/* ============================================================
   TECH JOINT SOLUTION — BRAND GRAPHICS & ADVANCED ANIMATION
   Custom visual language derived from the official logo:
   modular maze geometry, connected nodes, circuit paths.
   Everything here is CSS/SVG — no raster images, no libraries.
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION RHYTHM — alternating premium dark / clean light
   ------------------------------------------------------------ */
.section--light{
  /* Rebind the semantic tokens for this scope. Anything inside the
     section — including inline style="color:var(--muted)" — then
     resolves to the light-theme colour automatically. */
  --surface:var(--l-surface);
  --surface-2:#EEF4FB;
  --line:var(--l-line);
  --line-2:#C9D8EA;
  --text:var(--l-text);
  --muted:var(--l-muted);
  --faint:var(--l-faint);
  background:var(--l-bg);
  color:var(--l-muted);
  border-block:1px solid var(--l-line);
  position:relative;
}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:var(--l-text)}
.section--light p,.section--light li{color:var(--l-muted)}
.section--light .lead{color:var(--l-muted)}
.section--light .eyebrow{color:var(--color-blue-primary)}
.section--light .eyebrow::before{color:var(--l-faint)}
.section--light .card,
.section--light .step,
.section--light .tcard,
.section--light .faq-item,
.section--light .tech-chip,
.section--light .info-row,
.section--light .stat{
  background:var(--l-surface);
  border-color:var(--l-line);
  box-shadow:var(--shadow-light);
}
.section--light .card:hover,
.section--light .tcard:hover{border-color:rgba(0,107,230,.45);box-shadow:0 18px 44px rgba(7,27,63,.13)}
.section--light .card p,.section--light .step p{color:var(--l-muted)}
.section--light .card .ic{background:rgba(0,107,230,.1);color:var(--color-blue-primary)}
.section--light .card:hover .ic{background:var(--grad-brand);color:#fff}
.section--light .tl-n{background:var(--l-surface);border-color:var(--l-line);color:var(--color-blue-primary)}
.section--light .tl-tag,.section--light .stat .lbl{color:var(--l-faint)}
.section--light .stat .num{color:var(--l-text)}
.section--light .feature-list li{border-bottom-color:var(--l-line)}
.section--light .feature-list b{color:var(--l-text)}
.section--light .ck-badge{background:rgba(0,107,230,.12);color:var(--color-blue-primary)}
.section--light .faq-q{color:var(--l-text)}
.section--light .faq-q .ind{border-color:#C6D4E6}
.section--light .faq-a-inner{color:var(--l-muted)}
.section--light .faq-item.open{border-color:rgba(0,107,230,.5)}
.section--light .pill{color:var(--l-muted);border-color:var(--l-line);background:#fff}
.section--light .tech-chip{color:var(--l-muted)}
.section--light .tech-chip:hover{color:var(--l-text);border-color:var(--color-blue-primary)}
.section--light .filter-btn{color:var(--l-muted);border-color:var(--l-line);background:#fff}
.section--light .filter-btn:hover{color:var(--l-text);border-color:var(--color-blue-primary)}
.section--light .filter-btn.active{background:var(--grad-brand);border-color:transparent;color:#fff}
.section--light .btn--ghost{border-color:#C6D4E6;color:var(--l-text)}
.section--light .btn--ghost:hover{color:#fff}
.section--light .textlink{color:var(--color-blue-primary)}
.section--light .textlink:hover{color:var(--color-blue-dark)}
.section--light .info-row .k{color:var(--l-faint)}
.section--light .info-row .v{color:var(--l-text)}
.section--light .section-head p{color:var(--l-muted)}

/* ------------------------------------------------------------
   2. LOGO-DERIVED BACKGROUND PATTERNS
   ------------------------------------------------------------ */

/* AnimatedGridBackground — modular grid that drifts slowly */
.bg-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,143,240,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,143,240,.07) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
  animation:gridDrift 26s linear infinite}
.section--light .bg-grid{background-image:
    linear-gradient(rgba(7,27,63,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,27,63,.05) 1px,transparent 1px)}
@keyframes gridDrift{to{background-position:54px 54px}}

/* LogoPatternBackground — the symbol tiled as a faint watermark */
.bg-logo-pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("../assets/logo-symbol-white.png");
  background-size:82px 82px;background-repeat:repeat;
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent)}
.section--light .bg-logo-pattern{background-image:url("../assets/logo-symbol.png");opacity:.05}

/* Circuit-path background — abstract code pathways */
.bg-circuit{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.bg-circuit path{fill:none;stroke:var(--color-blue-primary);stroke-width:1;opacity:.28}
.bg-circuit circle{fill:var(--color-cyan);opacity:.5}
.section--light .bg-circuit path{stroke:var(--color-blue-dark);opacity:.16}
.section--light .bg-circuit circle{fill:var(--color-blue-primary);opacity:.3}

/* GradientGlow */
.glow-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(0,107,230,.28),transparent 66%);filter:blur(8px)}
.glow-orb--cyan{background:radial-gradient(circle,rgba(0,183,244,.2),transparent 66%)}
.section > .wrap{position:relative;z-index:1}

/* AnimatedSectionDivider — a circuit line that draws itself in */
.divider{display:block;width:100%;height:26px;overflow:visible}
.divider path{fill:none;stroke:var(--color-blue-primary);stroke-width:1.4;opacity:.5;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.divider.in path{animation:drawLine 1.4s var(--ease) forwards}
.divider circle{fill:var(--color-cyan);opacity:0}
.divider.in circle{animation:nodePop .5s var(--ease) 1s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes nodePop{to{opacity:1}}

/* ------------------------------------------------------------
   3. HERO — logo assembly + network + parallax
   ------------------------------------------------------------ */
.hero{background:
  radial-gradient(ellipse 90% 60% at 70% 0%,rgba(10,49,128,.55),transparent 60%),
  linear-gradient(180deg,var(--color-navy) 0%,var(--color-bg-dark) 72%)}

.hero-stage{position:relative;min-height:440px;display:grid;place-items:center;
  transform-style:preserve-3d;will-change:transform}

/* The official symbol, assembled from four masked copies. The artwork is
   never redrawn — each layer is the real logo file, clipped to a quadrant. */
.logo-build{position:relative;width:200px;height:200px;filter:drop-shadow(0 0 26px rgba(0,143,240,.55))}
.logo-build .piece{position:absolute;inset:0;background:url("../assets/logo-symbol-white.png") center/contain no-repeat;
  opacity:0;will-change:transform,opacity}
.logo-build .p1{clip-path:polygon(0 0,50% 0,50% 50%,0 50%)}
.logo-build .p2{clip-path:polygon(50% 0,100% 0,100% 50%,50% 50%)}
.logo-build .p3{clip-path:polygon(50% 50%,100% 50%,100% 100%,50% 100%)}
.logo-build .p4{clip-path:polygon(0 50%,50% 50%,50% 100%,0 100%)}
html.js .logo-build.run .p1{animation:asm1 1s var(--ease) .15s forwards}
html.js .logo-build.run .p2{animation:asm2 1s var(--ease) .3s forwards}
html.js .logo-build.run .p3{animation:asm3 1s var(--ease) .45s forwards}
html.js .logo-build.run .p4{animation:asm4 1s var(--ease) .6s forwards}
@keyframes asm1{from{opacity:0;transform:translate(-48px,-48px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes asm2{from{opacity:0;transform:translate(48px,-48px) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes asm3{from{opacity:0;transform:translate(48px,48px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes asm4{from{opacity:0;transform:translate(-48px,48px) rotate(8deg)}to{opacity:1;transform:none}}
/* Data pulse travelling through the assembled symbol */
.logo-build .pulse{position:absolute;inset:0;opacity:0;
  -webkit-mask:url("../assets/logo-symbol-white.png") center/contain no-repeat;
  mask:url("../assets/logo-symbol-white.png") center/contain no-repeat;
  background:linear-gradient(100deg,transparent 40%,rgba(0,183,244,.95) 50%,transparent 60%);
  background-size:280% 100%}
html.js .logo-build.run .pulse{animation:pulseSweep 3.4s linear 1.5s infinite}
@keyframes pulseSweep{0%{opacity:1;background-position:180% 0}60%,100%{opacity:1;background-position:-80% 0}}
/* Orbit ring around the symbol */
.logo-orbit{position:absolute;inset:-42px;border:1px dashed rgba(0,143,240,.32);border-radius:50%;
  animation:spin 34s linear infinite}
.logo-orbit::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--color-cyan);box-shadow:0 0 12px var(--color-cyan)}
.logo-orbit--2{inset:-74px;animation-duration:52s;animation-direction:reverse;border-color:rgba(0,183,244,.18)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Connected-node SVG layer */
.hero-nodes{position:absolute;inset:0;pointer-events:none}
.hero-nodes line{stroke:rgba(0,143,240,.4);stroke-width:1}
.hero-nodes circle{fill:var(--color-cyan)}
.hero-nodes .n{animation:nodeFloat 6s ease-in-out infinite}
.hero-nodes .n:nth-child(2n){animation-duration:8s;animation-delay:-2s}
.hero-nodes .n:nth-child(3n){animation-duration:7s;animation-delay:-4s}
@keyframes nodeFloat{50%{transform:translateY(-8px)}}

/* Floating dashboard cards get depth via parallax layers */
.hero-visual .gcard{transition:transform .5s var(--ease)}
.gcard{background:linear-gradient(165deg,rgba(17,28,49,.96),rgba(7,10,18,.94));border-radius:var(--r-lg)}
.gc-ic{background:var(--grad-brand);border-radius:var(--r-sm)}
.gc-bars i{background:var(--grad-brand)}

/* ------------------------------------------------------------
   4. PORTFOLIO — editorial cards
   ------------------------------------------------------------ */
.pcard{border-radius:var(--r-lg);transform-style:preserve-3d;will-change:transform}
.pcard .ph{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--color-navy)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center;
  /* Lift the photo so under-exposed stock shots read bright and clear
     instead of muddy. Paired with the imgix tone params in content.py. */
  filter:brightness(1.14) contrast(1.04) saturate(1.12);
  transition:transform .7s var(--ease),filter .4s var(--ease)}
.pcard:hover .ph img{transform:scale(1.07);filter:brightness(1.2) contrast(1.05) saturate(1.18)}
/* Gradient overlay keeps the title legible — kept shallow so the photo stays
   bright and only the caption area is darkened. */
.pcard .ph::after{content:"";position:absolute;inset:0;opacity:1;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(7,10,18,0) 46%,rgba(7,10,18,.34) 72%,rgba(7,10,18,.86) 100%)}
.ph-ov{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;z-index:2}
.ph-cat{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-cyan);margin-bottom:6px;
  text-shadow:0 1px 10px rgba(7,10,18,.9)}
.ph-name{font-size:1.16rem;color:#fff;line-height:1.25;text-shadow:0 2px 14px rgba(7,10,18,.95)}
.pcard .ph-arrow{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:#fff;background:rgba(7,10,18,.5);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);opacity:0;transform:translate(-6px,6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .25s}
.pcard:hover .ph-arrow{opacity:1;transform:none;background:var(--color-blue-primary);border-color:transparent}
/* Cursor-following highlight */
.pcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(0,183,244,.16),transparent 60%)}
.pcard:hover::after{opacity:1}
.pcard .pb{position:relative;z-index:4}
.section--light .pcard{background:var(--l-surface);border-color:var(--l-line);box-shadow:var(--shadow-light)}
.section--light .pcard h3{color:var(--l-text)}
.section--light .pcard p{color:var(--l-muted)}
.section--light .pcard .pi{color:var(--l-faint)}

/* ------------------------------------------------------------
   5. SERVICE VISUAL IDENTITY GRAPHICS
   ------------------------------------------------------------ */
.svc-visual{position:relative;width:100%;aspect-ratio:4/3;max-width:460px;margin-inline:auto;
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--color-bg-dark));box-shadow:var(--shadow)}
.svc-visual svg{position:absolute;inset:0;width:100%;height:100%}
.svc-visual .stroke{fill:none;stroke:var(--color-blue-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-visual .fill-soft{fill:rgba(0,107,230,.18)}
.svc-visual .fill-cyan{fill:var(--color-cyan)}
.svc-visual .dim{stroke:rgba(156,168,186,.3)}
/* browser chrome */
.svc-visual .bar{fill:rgba(156,168,186,.12)}
/* typing code lines */
.svc-visual .code-line{transform-origin:left;animation:typeIn 2.4s var(--ease) infinite}
.svc-visual .code-line:nth-child(2){animation-delay:.3s}
.svc-visual .code-line:nth-child(3){animation-delay:.6s}
.svc-visual .code-line:nth-child(4){animation-delay:.9s}
@keyframes typeIn{0%,10%{transform:scaleX(0)}40%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
/* rising SEO bars */
.svc-visual .rise{transform-origin:bottom;animation:riseBar 2.6s var(--ease) infinite alternate}
.svc-visual .rise:nth-child(2){animation-delay:.2s}
.svc-visual .rise:nth-child(3){animation-delay:.4s}
.svc-visual .rise:nth-child(4){animation-delay:.6s}
@keyframes riseBar{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
/* pulsing status dot / nodes */
.svc-visual .blink{animation:blink 1.8s ease-in-out infinite}
.svc-visual .blink:nth-child(2){animation-delay:.6s}
.svc-visual .blink:nth-child(3){animation-delay:1.2s}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
/* travelling dash on connector paths */
.svc-visual .flow{stroke-dasharray:6 8;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
/* floating module blocks */
.svc-visual .floaty{animation:floatY 5s ease-in-out infinite}
.svc-visual .floaty:nth-child(2){animation-delay:-1.6s}
.svc-visual .floaty:nth-child(3){animation-delay:-3.2s}
.section--light .svc-visual{background:linear-gradient(160deg,#fff,#EAF2FB);border-color:var(--l-line);box-shadow:var(--shadow-light)}
.section--light .svc-visual .stroke{stroke:var(--color-blue-primary)}
.section--light .svc-visual .bar{fill:rgba(7,27,63,.08)}

/* Service icon micro-interaction */
.card .ic svg{transition:transform .4s var(--ease)}
.card:hover .ic svg{transform:scale(1.12) rotate(-4deg)}

/* Connecting line between related-service cards */
.linked{position:relative}
.linked::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-blue-primary),transparent);opacity:.4}

/* ------------------------------------------------------------
   6. PROCESS — illuminating connection path
   ------------------------------------------------------------ */
.timeline{position:relative}
.tl-item::before{background:var(--line)}
.tl-item .tl-n{position:relative;overflow:hidden;transition:border-color .4s,color .4s}
.tl-item.lit .tl-n{border-color:var(--color-blue-bright);color:#fff;
  background:var(--grad-brand);box-shadow:var(--glow)}
.tl-item .tl-n::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(0,183,244,.45);transition:box-shadow .5s}
.tl-item.lit .tl-n::after{box-shadow:0 0 0 10px rgba(0,183,244,0)}
/* the vertical path fills as each stage lights up */
.tl-item .tl-fill{position:absolute;left:31px;top:56px;bottom:6px;width:2px;transform:scaleY(0);
  transform-origin:top;background:var(--grad-brand);transition:transform .7s var(--ease)}
.tl-item.lit .tl-fill{transform:scaleY(1)}
.tl-item:last-child .tl-fill{display:none}

/* ------------------------------------------------------------
   7. GLOBAL EFFECTS — scroll progress, cursor glow, gradient borders
   ------------------------------------------------------------ */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:left;background:var(--grad-brand);
  box-shadow:0 0 12px rgba(0,183,244,.7);will-change:transform;pointer-events:none}

.cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;z-index:0;
  pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform;
  background:radial-gradient(circle,rgba(0,107,230,.13),transparent 62%);
  mix-blend-mode:screen}
body.has-cursor .cursor-glow{opacity:1}

/* Gradient border animation for highlighted cards */
.grad-border{position:relative;background-clip:padding-box}
.grad-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent 55%,var(--color-blue-bright),var(--color-cyan),transparent 85%);
  opacity:0;transition:opacity .35s}
.grad-border:hover::before{opacity:1;animation:angSpin 3.2s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes angSpin{to{--ang:360deg}}

/* Animated heading highlight */
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.34em;z-index:-1;
  background:var(--grad-brand);opacity:.28;border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) .3s}
.reveal.in .hl::after,.section-head.in .hl::after{transform:scaleX(1)}

/* Card 3D tilt (desktop only, applied by JS) */
.tilt{transition:transform .4s var(--ease)}
.tilt.tilting{transition:transform .1s linear}

/* Page entrance */
html.js body{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* Marquee logo cards on light sections */
.section--light .logo-card{border-color:var(--l-line);box-shadow:var(--shadow-light)}
.section--light .trusted-row .lbl{color:var(--l-faint)}
.section--light .marquee{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* CTA band on brand gradient */
.cta-band--brand{background:var(--grad-brand);border-color:transparent}
.cta-band--brand::before{background:radial-gradient(600px circle at 50% 120%,rgba(0,183,244,.5),transparent 60%)}
.cta-band--brand .eyebrow{color:rgba(255,255,255,.85)}
.cta-band--brand .eyebrow::before{color:rgba(255,255,255,.5)}
.cta-band--brand .lead{color:rgba(255,255,255,.92)}
.cta-band--brand .cta-note{color:rgba(255,255,255,.7)}
.cta-band--brand .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.cta-band--brand .btn--ghost::before{background:#fff}
.cta-band--brand .btn--ghost:hover{color:var(--color-blue-dark)}

/* Footer = deepest navy, with logo watermark */
.site-footer{background:linear-gradient(180deg,var(--color-bg-secondary),var(--color-navy));
  position:relative;overflow:hidden}
.site-footer .wrap{position:relative;z-index:1}

/* Form focus ring in brand blue */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--color-blue-primary);box-shadow:0 0 0 3px rgba(0,107,230,.25)}
.field.is-focus label{color:var(--color-cyan)}
.section--light .field input,.section--light .field select,.section--light .field textarea{
  background:#fff;border-color:#C6D4E6;color:var(--l-text)}
.section--light .field label{color:var(--l-text)}
.section--light .form-card{background:var(--l-surface);border-color:var(--l-line);box-shadow:var(--shadow-light)}

/* Success animation after form submit */
.form-status.ok{animation:okPop .5s var(--ease)}
@keyframes okPop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}

/* Loading indicator (brand) */
.loader{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,143,240,.25);
  border-top-color:var(--color-cyan);animation:spin .8s linear infinite}

/* ------------------------------------------------------------
   8. DEVICE ANIMATION TIERS
   ------------------------------------------------------------ */
/* Tablet: moderate — drop the most expensive continuous effects */
@media (max-width:1024px){
  .cursor-glow{display:none}
  .logo-orbit--2{display:none}
  .bg-logo-pattern{opacity:.03}
  .hero-nodes .n{animation:none}
}
/* Mobile: simplified — no orbits, no drift, no sweeps */
@media (max-width:640px){
  .logo-orbit{display:none}
  .bg-grid{animation:none}
  .logo-build{width:150px;height:150px}
  .logo-build .pulse{animation:none;opacity:0}
  .svc-visual .code-line,.svc-visual .rise,.svc-visual .flow,.svc-visual .floaty{animation:none}
  .svc-visual .rise{transform:scaleY(1)}
  .svc-visual .code-line{transform:scaleX(1)}
  .btn--primary::after{display:none}
  .pcard::after{display:none}
  .hero-stage{min-height:320px}
}
/* Reduced motion: minimal movement, everything visible */
@media (prefers-reduced-motion:reduce){
  .logo-build .piece{opacity:1 !important;animation:none !important;transform:none !important}
  .logo-build .pulse,.logo-orbit,.scroll-progress,.cursor-glow{display:none}
  .bg-grid,.hero-nodes .n,.divider path,.divider circle{animation:none}
  .divider path{stroke-dashoffset:0}
  .divider circle{opacity:1}
  .tl-item .tl-fill{transform:scaleY(1);transition:none}
  html.js body{animation:none}
  .hl::after{transform:scaleX(1);transition:none}
  .svc-visual *{animation:none !important}
  .svc-visual .rise{transform:scaleY(1)}
  .svc-visual .code-line{transform:scaleX(1)}
}

/* ------------------------------------------------------------
   9. HERO STAGE LAYOUT
   The assembled symbol owns the centre; the floating UI cards sit
   in the corners around it so nothing covers the brand mark.
   ------------------------------------------------------------ */
.hero-stage{min-height:470px}
.hero-stage .logo-build{position:relative;z-index:2}
.hero-stage .hero-nodes{z-index:0}
.hero-stage .gcard{position:absolute;z-index:3;width:min(206px,47%);padding:14px 16px;
  animation:none} /* parallax + float handled per-card below */
.hero-stage .gcard--1{top:0;left:0;animation:floatY 7s ease-in-out infinite}
.hero-stage .gcard--2{top:2%;right:0;animation:floatY 8.5s ease-in-out infinite reverse}
.hero-stage .gcard--3{bottom:0;left:2%;animation:floatY 9.5s ease-in-out infinite}
.hero-stage .gcard--2.gc-wide{bottom:0;top:auto;right:0}
.hero-stage .gc-big{font-size:1.5rem}
.hero-stage .gc-bars{height:44px;margin-top:10px}
.hero-stage .gc-code{font-size:.68rem;line-height:1.75}
.hero-stage .gc-check{font-size:.76rem;padding:3px 0}
.hero-stage .gc-h{font-size:.68rem;margin-bottom:8px}
@media (max-width:1080px){.hero-stage{min-height:440px;max-width:560px;margin-inline:auto}}
@media (max-width:640px){
  .hero-stage{min-height:390px}
  .hero-stage .gcard{width:min(168px,46%);padding:11px 12px}
  .hero-stage .gcard--3{display:none}
  .hero-stage .gc-big{font-size:1.15rem}
  .hero-stage .gc-bars{height:30px}
}

/* ------------------------------------------------------------
   10. LIGHT-SECTION COVERAGE FOR BLOG + FILTER COMPONENTS
   Any component that carries its own dark surface must be
   re-skinned when it sits inside .section--light, otherwise
   dark-on-dark / navy-on-navy text becomes unreadable.
   ------------------------------------------------------------ */
.section--light .featured-post,
.section--light .post-card,
.section--light .blog-search input,
.section--light .pcard,
.section--light .form-card{
  background:var(--l-surface);
  border-color:var(--l-line);
  box-shadow:var(--shadow-light);
}
.section--light .featured-post:hover,
.section--light .post-card:hover{border-color:rgba(0,107,230,.45)}
.section--light .featured-post .fp-img,
.section--light .post-card .pt-img{
  background:linear-gradient(150deg,#E8F0FA,#D9E6F6);
  color:var(--color-blue-primary);
}
.section--light .post-meta,
.section--light .post-card .pt-meta{color:var(--l-faint)}
.section--light .featured-post h3,
.section--light .post-card h3{color:var(--l-text)}
.section--light .featured-post h3 a,
.section--light .post-card h3 a,
.section--light a.textlink{color:var(--l-text)}
.section--light a.textlink{color:#0A3180}
.section--light a.textlink:hover{color:var(--color-blue-primary)}
.section--light .blog-search input{color:var(--l-text)}
.section--light .blog-search input::placeholder{color:var(--l-faint)}
.section--light .blog-search input:focus{border-color:var(--color-blue-primary)}
.section--light .filter-btn{
  color:var(--l-muted);border-color:var(--l-line);background:var(--l-surface);
}
.section--light .filter-btn:hover{color:var(--l-text);border-color:var(--color-blue-primary)}
.section--light .filter-btn.active{
  background:var(--grad-brand);border-color:transparent;color:#fff;
}
.section--light .pager a,.section--light .pager span{
  color:var(--l-muted);border-color:var(--l-line);background:var(--l-surface);
}
.section--light .pager .on{background:var(--grad-brand);color:#fff;border-color:transparent}
/* muted body copy on light: darken to clear WCAG AA */
.section--light p,.section--light li,.section--light .lead,
.section--light .card p,.section--light .step p{color:#3F4E63}
.section--light .pill{color:#3F4E63}

/* Cyan is a highlight colour on dark, but fails contrast as text on the
   light background (2.31:1). Inside light sections rebind the alias so
   every cyan text token resolves to an accessible brand blue instead. */
.section--light{ --blue-2:var(--color-blue-primary); }
.section--light .step .n,
.section--light .tl-n,
.section--light .post-meta .cat,
.section--light .fp-cat,
.section--light .stat .num .accent{color:var(--color-blue-dark)}

/* ------------------------------------------------------------
   11. OFFICIAL LOGO PLACEMENTS (About brand band + Contact)
   The supplied logo files are used as-is — never redrawn,
   recoloured or stretched. Fixed width/height stop layout shift.
   ------------------------------------------------------------ */
.brand-band{background:var(--color-navy);border-block:1px solid rgba(0,143,240,.22);overflow:hidden;position:relative}
.brand-band::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(600px 300px at 50% 0,rgba(0,143,240,.22),transparent 70%);pointer-events:none}
.brand-band-inner{position:relative;text-align:center;max-width:780px;margin-inline:auto}
.brand-band-logo{width:min(400px,80vw);height:auto;object-fit:contain;
  background:#fff;padding:26px 34px;border-radius:var(--r-lg);
  box-shadow:0 22px 60px rgba(0,0,0,.4)}                 /* light version on white plate */
.brand-band-line{color:#C8D6EA;margin:26px auto 0;max-width:60ch}
.brand-band-marks{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.brand-band-marks .bm img{width:30px;height:auto;opacity:.9;display:block}
.brand-band-marks .bm-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--color-blue-bright),transparent)}
.brand-band-marks .bm-txt{font-family:var(--font-mono);font-size:.74rem;color:var(--color-text-muted);letter-spacing:.04em}
.contact-logo{width:min(280px,64vw);height:auto;object-fit:contain;display:block;margin-bottom:24px;opacity:.95}
@media (max-width:640px){
  .brand-band-logo{padding:16px 20px}
  .brand-band-marks{flex-direction:column;gap:10px}
}


/* ------------------------------------------------------------
   12. PHOTO TONE — bright, not muddy
   ------------------------------------------------------------ */
.project-cover img{filter:brightness(1.12) contrast(1.03) saturate(1.1)}
.featured-post .fp-img img,.post-card .pt-img img{filter:brightness(1.1) saturate(1.08)}
@media (prefers-reduced-motion:reduce){
  .pcard .ph img,.pcard:hover .ph img{transition:none}
}

/* ------------------------------------------------------------
   12. BRIGHT THEME — dark sections are now the deliberate accent
   ------------------------------------------------------------ */
.section--dark{
  background:var(--color-bg-dark);
  border-block:1px solid rgba(156,168,186,.14);
  position:relative;
}
.section--dark.section--alt{background:var(--color-bg-secondary)}

/* The header is a dark bar on every page, so it always reads as premium
   and the white logo stays legible. */
.site-header{color:var(--color-text-muted)}

/* Light theme: cards get a real (not translucent) surface + soft shadow */
.card,.tcard,.step,.faq-item,.info-row,.stat,.pcard,.form-card,.featured-post,.post-card{
  box-shadow:var(--shadow-light);
}
.theme-dark .card,.theme-dark .tcard,.theme-dark .step,.theme-dark .faq-item,
.theme-dark .info-row,.theme-dark .stat,.theme-dark .pcard,.theme-dark .form-card,
.theme-dark .featured-post,.theme-dark .post-card,
.section--dark .card,.section--dark .tcard,.section--dark .step,.section--dark .faq-item,
.section--dark .info-row,.section--dark .stat,.section--dark .pcard,.section--dark .form-card{
  box-shadow:var(--shadow);
}
/* pills/tags on light need a real border, not a 2% white wash */
.pill{background:#FFFFFF;border-color:var(--line-2);color:var(--muted)}
.theme-dark .pill,.section--dark .pill{background:rgba(255,255,255,.02);border-color:var(--line-2);color:var(--muted)}

/* ------------------------------------------------------------
   13. HERO BACKGROUND VIDEO
   Sits behind the hero content. A scrim keeps the headline
   legible over any footage. The poster shows instantly, so the
   hero never waits on the video (and phones only ever get the
   poster — see main.js).
   ------------------------------------------------------------ */
.hero-video{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-video-el{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.hero-video-el.is-playing{opacity:.55}
.hero-video::after{                      /* poster/video tint to brand navy */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,27,63,.55),rgba(7,10,18,.82));
}
.hero-video-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,var(--color-bg-dark) 4%,rgba(7,10,18,.72) 42%,rgba(7,10,18,.35) 72%,transparent 100%),
    linear-gradient(180deg,transparent 55%,var(--color-bg-dark) 100%);
}
.hero--video .wrap,
.hero--video .hero-inner{position:relative;z-index:2}
/* keep the decorative layers readable above the footage */
.hero--video .bg-grid{opacity:.5}
.hero--video .bg-logo-pattern{opacity:.35}
@media (max-width:920px){
  .hero-video-scrim{background:linear-gradient(180deg,rgba(7,10,18,.72),var(--color-bg-dark) 92%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-video-el{display:none}
}