/* ============================================================
   Somro Global — site stylesheet
   Apple-inspired discipline · Somro palette · iFusion foundations
   Inter + JetBrains Mono · 8px spacing · liquid-glass motifs
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');}

/* ---------- Tokens ---------- */
:root{
  /* Ink + neutrals */
  --ink:#1D1D1F;
  --ink-2:#3A3A3E;
  --grey:#6E6E73;
  --grey-2:#6C6C72; /* darkened from #86868B so small mono labels meet WCAG AA (4.5:1) on white */
  --canvas:#FFFFFF;
  --panel:#F5F7FA;
  --panel-2:#EDF1F6;
  --line:#E6E8EC;
  --line-soft:#EEF0F3;
  --border-strong:#D2D6DC;

  /* Brand */
  --blue:#0B6BB0;
  --blue-deep:#084E80;
  --blue-bright:#1487D6;
  --cyan:#1FA2C4;
  --gold:#F2B100;
  --blue-tint:#EAF3FA;
  --cyan-tint:#E8F6FA;

  /* Dark surfaces */
  --night:#0A1626;
  --night-2:#0C1E36;

  /* Gradients */
  --grad-brand:linear-gradient(135deg,#1487D6 0%, #0B6BB0 46%, #0A2E52 100%);
  --grad-blue:linear-gradient(135deg,#36B6E0 0%, #0B6BB0 100%);
  --grad-aurora:radial-gradient(60% 80% at 18% 12%, rgba(31,162,196,.20) 0%, transparent 60%),
                radial-gradient(55% 70% at 92% 8%, rgba(11,107,176,.18) 0%, transparent 58%),
                radial-gradient(70% 90% at 70% 100%, rgba(20,135,214,.10) 0%, transparent 60%);

  /* Type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Spacing (8px scale) */
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:40px; --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;

  /* Radii */
  --r-2:8px; --r-3:12px; --r-4:20px; --r-5:28px; --r-full:999px;

  /* Shadows */
  --sh-1:0 1px 2px rgba(13,28,48,.05), 0 0 0 1px rgba(13,28,48,.04);
  --sh-2:0 18px 48px -20px rgba(13,28,48,.22), 0 0 0 1px rgba(13,28,48,.04);
  --sh-3:0 40px 90px -32px rgba(8,46,82,.40);
  --sh-glass:0 1px 0 rgba(255,255,255,.5) inset, 0 24px 60px -28px rgba(8,46,82,.45);

  /* Motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.4s;

  /* Layout */
  --content:1200px;
  --prose:680px;
  --pad:24px;

  /* Chrome */
  --nav-h:64px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:'cv11','ss01','ss03';
  overflow-x:hidden;
}
::selection{background:rgba(11,107,176,.16); color:var(--blue-deep);}
img{max-width:100%; display:block;}
a{color:var(--blue); text-decoration:none; transition:color .15s var(--ease);}
a:hover{color:var(--blue-deep);}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:600; letter-spacing:-.02em; text-wrap:balance; line-height:1.1;}
p{margin:0; text-wrap:pretty;}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px;}
a,button,select,textarea,input,.cap,.indrow,.mega__cell{touch-action:manipulation;} /* removes 300ms tap delay */

/* ---------- Accessibility helpers ---------- */
.skip-link{position:fixed; top:10px; left:10px; z-index:1000;
  transform:translateY(-160%); transition:transform .2s var(--ease);
  background:var(--blue); color:#fff; padding:11px 18px; border-radius:10px;
  font-weight:600; font-size:14px; box-shadow:var(--sh-2);}
.skip-link:focus{transform:translateY(0); color:#fff; outline:2.5px solid #fff; outline-offset:2px;}
.req{color:#C0392B;} /* required-field asterisk */
[tabindex="-1"]:focus{outline:none;} /* don't ring non-interactive scroll/skip targets */
.field .form-error{color:#C0392B; font-size:13.5px; line-height:1.5; margin-top:12px;}

/* ---------- Type utilities ---------- */
.display{font-size:clamp(44px,6.6vw,80px); line-height:1.04; letter-spacing:-.035em; font-weight:600;}
.h-hero{font-size:clamp(40px,5.4vw,68px); line-height:1.05; letter-spacing:-.035em; font-weight:600;}
.h2{font-size:clamp(30px,3.6vw,40px); line-height:1.1; letter-spacing:-.028em; font-weight:600;}
.h3{font-size:clamp(22px,2.4vw,28px); line-height:1.18; letter-spacing:-.02em; font-weight:600;}
.h4{font-size:20px; line-height:1.3; letter-spacing:-.015em; font-weight:600;}
.lead{font-size:clamp(19px,2vw,22px); line-height:1.5; color:var(--ink-2); font-weight:400;}
.body{font-size:18px; line-height:1.62; color:var(--ink-2);}
.muted{color:var(--grey);}
.caption{font-size:13.5px; line-height:1.5; color:var(--grey);}
.kicker{
  display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.kicker-line{position:relative; padding-bottom:10px;}
.kicker-line::after{content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--gold); border-radius:2px;}
.balance{text-wrap:balance;}

/* ---------- Layout ---------- */
.container{max-width:var(--content); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.prose{max-width:var(--prose); margin-left:auto; margin-right:auto;}
.section{padding:clamp(72px,10vw,128px) 0;}
.section--tight{padding:clamp(56px,7vw,88px) 0;}
.panel{background:var(--panel);}
.center{text-align:center;}
.eyebrow-block>*+*{margin-top:18px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:16px; font-weight:500; line-height:1; cursor:pointer;
  border-radius:var(--r-full); padding:14px 26px; border:1px solid transparent;
  transition:transform .12s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space:nowrap; text-decoration:none;
}
.btn:active{transform:scale(.975);}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px -10px rgba(11,107,176,.7);}
.btn--primary:hover{background:var(--blue-deep); color:#fff;}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ghost:hover{border-color:var(--grey-2); color:var(--ink); background:rgba(13,28,48,.02);}
.btn--white{background:#fff; color:var(--ink);}
.btn--white:hover{background:#f2f4f7; color:var(--ink);}
.btn--glass{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.btn--glass:hover{background:rgba(255,255,255,.24); color:#fff;}
.btn--sm{padding:10px 18px; font-size:14px;}
.btn--lg{padding:16px 32px; font-size:17px;}

/* text link with arrow */
.tlink{display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:16px; color:var(--blue);}
.tlink svg{width:16px; height:16px; transition:transform .2s var(--ease);}
.tlink:hover svg{transform:translateX(4px);}

/* ---------- Icons ---------- */
.ico{display:inline-block; vertical-align:middle;}
svg.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

/* ============================================================
   NAV — frosted liquid glass, sticky, condenses on scroll
   ============================================================ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;}
.nav.is-scrolled{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.nav__inner{max-width:var(--content); margin:0 auto; padding:0 var(--pad);
  height:var(--nav-h); display:flex; align-items:center; gap:28px;}
.nav__logo{display:flex; align-items:center; gap:0; flex-shrink:0;}
.nav__links{display:flex; align-items:center; gap:2px; margin-left:8px;}
.nav__link{position:relative; padding:9px 14px; border-radius:8px; font-size:15px; font-weight:500;
  color:var(--ink); cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease);
  display:inline-flex; align-items:center; gap:5px;}
.nav__link:hover{background:rgba(13,28,48,.05); color:var(--ink);}
.nav__link.is-active{color:var(--blue);}
/* non-color cue for the active item (WCAG: don't rely on colour alone) */
.nav__link.is-active::after{content:""; position:absolute; left:14px; right:14px; bottom:5px;
  height:2px; border-radius:2px; background:currentColor; opacity:.55;}
.nav__link svg{width:13px; height:13px; opacity:.6; transition:transform .2s var(--ease);}
.nav__item.is-open .nav__link svg{transform:rotate(180deg);}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.nav__burger{display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  border-radius:8px; align-items:center; justify-content:center; color:var(--ink);}
.nav__burger:hover{background:rgba(13,28,48,.05);}

/* mega menu */
.nav__item{position:relative;}
.mega{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(720px,86vw); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  border-radius:var(--r-4); padding:20px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--sh-2); border:1px solid var(--line);}
.nav__item.is-open .mega,
.nav__item:focus-within .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);} /* :focus-within = keyboard access */
.mega__grid{display:grid; grid-template-columns:1fr 1fr; gap:4px;}
.mega__cell{display:flex; gap:13px; padding:12px 13px; border-radius:12px; cursor:pointer;
  transition:background .15s var(--ease); align-items:flex-start;}
.mega__cell:hover{background:rgba(11,107,176,.06);}
.mega__ico{width:38px; height:38px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--blue); background:var(--blue-tint);}
.mega__ico svg{width:20px; height:20px;}
.mega__t{display:block; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:2px;}
.mega__d{display:block; font-size:13px; color:var(--grey); line-height:1.4;}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none;}
.drawer__scrim{position:absolute; inset:0; background:rgba(10,22,38,.4); opacity:0; transition:opacity .3s var(--ease);
  backdrop-filter:blur(2px);}
.drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(380px,86vw);
  background:rgba(255,255,255,.92); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  transform:translateX(100%); transition:transform .34s var(--ease); padding:20px;
  display:flex; flex-direction:column; gap:4px; overflow-y:auto; box-shadow:-20px 0 60px -30px rgba(8,46,82,.4);}
.drawer.is-open{visibility:visible; pointer-events:auto;}
.drawer.is-open .drawer__scrim{opacity:1;}
.drawer.is-open .drawer__panel{transform:translateX(0);}
.drawer__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.drawer__link{padding:14px 12px; border-radius:10px; font-size:18px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line-soft);}
.drawer__link:hover{background:rgba(11,107,176,.06);}
.drawer__sub{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-2); padding:18px 12px 6px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding-top:calc(var(--nav-h) + 64px); padding-bottom:96px; overflow:hidden;
  background:var(--canvas);}
.hero__bg{position:absolute; inset:0; z-index:0; background:var(--grad-aurora);}
.hero__canvas{position:absolute; inset:0; z-index:0; width:100%; height:100%;}
.hero__inner{position:relative; z-index:2; text-align:center; max-width:920px; margin:0 auto;}
.hero__sub{margin:26px auto 0; max-width:620px;}
.hero__cta{margin-top:38px; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center;}
.scroll-cue{position:relative; z-index:2; margin:64px auto 0; width:26px; height:42px; border:1.5px solid var(--grey-2);
  border-radius:14px; display:flex; justify-content:center; padding-top:7px;}
.scroll-cue span{width:4px; height:8px; border-radius:3px; background:var(--grey); animation:cue 1.8s var(--ease) infinite;}
@keyframes cue{0%{opacity:0; transform:translateY(-4px);}40%{opacity:1;}100%{opacity:0; transform:translateY(10px);}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none;}}

/* ============================================================
   DARK SHADER HERO  +  scroll-aware nav (index only)
   WebGL shader behind a type-led hero; nav switches to a light
   treatment over the dark hero and back to dark once scrolled.
   ============================================================ */
.hero--shader{
  min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:64px;
  background:#06101F; color:#fff;
}
.hero--shader .container{width:100%;}
.hero--shader .hero__bg{
  background:radial-gradient(80% 90% at 50% 0%, #0d2c4e 0%, #071425 55%, #050d18 100%);
}
.hero--shader .hero__canvas{opacity:1;}
/* legibility vignette between the shader and the content */
.hero--shader::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(72% 62% at 50% 46%, rgba(4,12,22,.04) 0%, rgba(4,12,22,.40) 76%, rgba(4,12,22,.66) 100%);}
.hero--shader .hero__inner{position:relative; z-index:2;}
.hero--shader .kicker{color:#86D2F2;}
.hero--shader .display{color:#fff;}
.hero--shader .hero__sub{color:rgba(255,255,255,.84);}
.hero--shader .tw__text{color:#86D2F2;}
.hero--shader .tlink{color:#9FD6F5;}
.hero--shader .tlink:hover{color:#fff;}
.hero--shader .scroll-cue{border-color:rgba(255,255,255,.45);}
.hero--shader .scroll-cue span{background:rgba(255,255,255,.8);}

/* logo: dark (navy) wordmark by default; white wordmark only over the dark hero */
.nav__logo .brandmark{display:block;}
.nav__logo .brandmark--light{display:none;}
body.hero-dark .nav:not(.is-scrolled) .nav__logo .brandmark--dark{display:none;}
body.hero-dark .nav:not(.is-scrolled) .nav__logo .brandmark--light{display:block;}
body.hero-dark .nav:not(.is-scrolled) .nav__link{color:#fff;}
body.hero-dark .nav:not(.is-scrolled) .nav__link:hover{background:rgba(255,255,255,.14);}
body.hero-dark .nav:not(.is-scrolled) .nav__link.is-active{color:#fff;}
body.hero-dark .nav:not(.is-scrolled) .nav__burger{color:#fff;}
body.hero-dark .nav:not(.is-scrolled) .nav__burger:hover{background:rgba(255,255,255,.14);}
body.hero-dark .nav:not(.is-scrolled) .btn--ghost{color:#fff; border-color:rgba(255,255,255,.42);}
body.hero-dark .nav:not(.is-scrolled) .btn--ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6);}

/* ============================================================
   GLASS UTILITIES
   ============================================================ */
.glass{
  position:relative; border-radius:var(--r-4); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.42) 100%);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-2);
}
/* glass on dark stage */
.glass-d{
  position:relative; border-radius:var(--r-4); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.02) 100%);
  backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 50px -24px rgba(0,0,0,.5);
}
.glass-d::before{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 55% at 30% -10%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);}

/* liquid-glass icon tile — glossy colour fill, reads on any background */
.gtile{position:relative; width:56px; height:56px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden;
  --g1:#2E96E6; --g2:#0B6BB0;
  background:linear-gradient(152deg, var(--g1) 0%, var(--g2) 100%);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -10px 16px -8px rgba(0,30,60,.28),
    0 1px 1px rgba(0,0,0,.06), 0 12px 24px -12px rgba(8,46,82,.55);}
.gtile::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(125% 72% at 28% -12%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 56%);}
.gtile svg{position:relative; z-index:1; width:28px; height:28px; filter:drop-shadow(0 1px 1px rgba(8,30,60,.28));}
.gtile.t-blue{--g1:#2E96E6; --g2:#0B6BB0;}
.gtile.t-cyan{--g1:#3CC6E2; --g2:#1487A8;}
.gtile.t-sky{--g1:#5AA8F2; --g2:#1564C2;}
.gtile.t-deep{--g1:#27659E; --g2:#0A2E52;}

/* light icon chip (on white surfaces) */
.chip{width:52px; height:52px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--blue); background:var(--blue-tint);}
.chip svg{width:26px; height:26px;}
.chip.c-cyan{color:var(--cyan); background:var(--cyan-tint);}

/* ============================================================
   TYPEWRITER (hero rotating phrase)
   ============================================================ */
.tw{white-space:pre-wrap;}
.tw__text{color:var(--blue); font-weight:600;}
.tw__cursor{display:inline-block; margin-left:1px; color:var(--gold); font-weight:400;
  transform:translateY(.02em); animation:tw-blink 1.05s steps(1) infinite;}
@keyframes tw-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.tw__cursor{animation:none;}}

/* ============================================================
   THE WHY — single statement
   ============================================================ */
.statement{font-size:clamp(28px,4vw,46px); line-height:1.22; letter-spacing:-.025em; font-weight:600;
  color:var(--ink); text-wrap:balance;}
.statement .em{color:var(--blue);}

/* ============================================================
   CAPABILITY GRID (glass tiles)
   ============================================================ */
.capgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cap{position:relative; display:flex; flex-direction:column; gap:16px; padding:26px;
  border-radius:var(--r-4); background:var(--canvas); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  color:inherit; min-height:188px;}
.cap:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent;}
.cap__t{display:block; font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.cap__d{display:block; font-size:14.5px; line-height:1.5; color:var(--grey); margin-top:6px;}
.cap__stage{position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .3s var(--ease);}

/* ============================================================
   FEATURE BAND (alternating)
   ============================================================ */
.band{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:center;}
.band--flip .band__media{order:-1;}
.band__body>*+*{margin-top:20px;}
.media{position:relative; border-radius:var(--r-4); overflow:hidden; aspect-ratio:4/3;
  background:var(--grad-brand); box-shadow:var(--sh-2);}
.checks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px;}
.checks li{display:flex; gap:11px; align-items:flex-start; font-size:16.5px; color:var(--ink-2);}
.checks svg{width:20px; height:20px; color:var(--blue); flex-shrink:0; margin-top:2px;}

/* ============================================================
   PROOF BAND (dark, glass panels, counters)
   ============================================================ */
.proof{position:relative; overflow:hidden; color:#fff; background:var(--night);}
.proof__bg{position:absolute; inset:0; z-index:0;
  background:radial-gradient(80% 120% at 12% 0%, rgba(20,135,214,.5) 0%, transparent 55%),
             radial-gradient(70% 100% at 95% 100%, rgba(31,162,196,.34) 0%, transparent 55%),
             linear-gradient(135deg,#0C2A4A 0%, #0A1626 60%);}
.proof__inner{position:relative; z-index:1;}
.proof h2,.proof h3,.proof .h2{color:#fff;}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px;}
.metric{padding:28px 26px; border-radius:var(--r-4);}
.metric__n{font-size:clamp(40px,4.4vw,58px); line-height:1; font-weight:600; letter-spacing:-.035em;
  color:#fff; font-variant-numeric:tabular-nums; display:flex; align-items:baseline;}
.metric__l{margin-top:14px; font-size:15px; color:rgba(255,255,255,.74); line-height:1.45;}

/* ============================================================
   DIFFERENTIATOR CARDS
   ============================================================ */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.dcard{padding:32px; border-radius:var(--r-4); background:var(--canvas); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.dcard:hover{transform:translateY(-4px); box-shadow:var(--sh-2);}
.dcard .gtile{margin-bottom:22px;}
.dcard__t{font-size:21px; font-weight:600; letter-spacing:-.015em; margin-bottom:10px;}
.dcard__d{font-size:16px; color:var(--grey); line-height:1.55;}

/* ============================================================
   INDUSTRY LIST
   ============================================================ */
.indrow{display:flex; align-items:center; gap:20px; padding:24px 4px; border-top:1px solid var(--line);
  transition:padding .25s var(--ease); cursor:pointer; color:inherit;}
.indrow:last-child{border-bottom:1px solid var(--line);}
.indrow:hover{padding-left:14px;}
.indrow__n{font-family:var(--font-mono); font-size:13px; color:var(--grey-2); width:34px; flex-shrink:0;}
.indrow__t{font-size:clamp(20px,2.4vw,28px); font-weight:600; letter-spacing:-.02em; flex:1;}
.indrow__d{font-size:15px; color:var(--grey); max-width:420px; display:none;}
.indrow__ar{color:var(--blue); width:22px; height:22px; flex-shrink:0; opacity:0; transform:translateX(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);}
.indrow:hover .indrow__ar{opacity:1; transform:translateX(0);}
@media (min-width:900px){.indrow__d{display:block;}}

/* ============================================================
   OUTCOME / WORK CARDS
   ============================================================ */
.workgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.work{display:flex; flex-direction:column; padding:28px; border-radius:var(--r-4); background:var(--canvas);
  border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); min-height:260px;}
.work:hover{transform:translateY(-4px); box-shadow:var(--sh-2);}
.tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:var(--blue-tint);
  padding:6px 11px; border-radius:var(--r-full);}
.work__c{font-size:19px; line-height:1.4; font-weight:500; color:var(--ink); margin:18px 0;}
.work__caps{margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); font-size:13.5px;
  color:var(--grey); font-weight:500;}

/* ============================================================
   PILL LIST (accelerators / tech)
   ============================================================ */
.pills{display:flex; flex-wrap:wrap; gap:10px;}
.pill{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--canvas); font-size:14.5px; color:var(--ink-2); font-weight:500;}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan);}

/* ============================================================
   STANDARDS LINE
   ============================================================ */
.standards{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; color:var(--grey); font-size:14px;}
.standards b{color:var(--ink-2); font-weight:600;}

/* ============================================================
   CLOSING BAND
   ============================================================ */
.closing{position:relative; overflow:hidden; color:#fff;}
.closing__card{position:relative; border-radius:var(--r-5); padding:clamp(48px,7vw,96px) 40px; overflow:hidden;
  background:var(--night); text-align:center;}
.closing__bg{position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 110% at 20% 0%, rgba(20,135,214,.55) 0%, transparent 55%),
             radial-gradient(60% 100% at 95% 100%, rgba(31,162,196,.4) 0%, transparent 55%),
             linear-gradient(135deg,#0C2A4A 0%, #0A1626 70%);}
.closing__inner{position:relative; z-index:1;}

/* ============================================================
   FORM
   ============================================================ */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field label{font-size:14px; font-weight:500; color:var(--ink-2);}
.input,.textarea,.select{font-family:inherit; font-size:16px; color:var(--ink); background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r-2); padding:13px 15px; width:100%;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(11,107,176,.14);}
.textarea{min-height:130px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--panel); border-top:1px solid var(--line); padding:72px 0 40px;}
.footer__grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:40px;}
.footer__col h2{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:16px; letter-spacing:0; line-height:1.3;}
.footer__col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.footer__col a{font-size:14.5px; color:var(--grey);}
.footer__col a:hover{color:var(--blue);}
.footer__brand p{font-size:14.5px; color:var(--grey); line-height:1.55; max-width:280px; margin-top:18px;}
.footer__hubs{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line);
  font-size:14px; color:var(--grey);}
.footer__hubs .hub{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:500;}
.footer__hubs .hub::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);}
.footer__signoff{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--grey);}
.footer__signoff .gold{color:var(--ink-2);}

/* gold signature rule */
.sig-rule{width:46px; height:3px; background:var(--gold); border-radius:3px;}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.phead{padding-top:calc(var(--nav-h) + 72px); padding-bottom:24px;}
.phead .lead{margin-top:22px; max-width:640px;}
.phead--center{text-align:center;}
.phead--center .lead{margin-left:auto; margin-right:auto;}

/* utilities */
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}
.mt-6{margin-top:48px;} .mt-8{margin-top:64px;}
.maxw-prose{max-width:var(--prose);}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .capgrid{grid-template-columns:repeat(2,1fr);}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .cards3,.workgrid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr 1fr 1fr;}
  .footer__brand{grid-column:1/-1;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .nav__links{display:none;}
  .nav__right .btn--ghost{display:none;}
  .nav__burger{display:inline-flex;}
  .band,.grid-2,.field-row{grid-template-columns:1fr; gap:32px;}
  .band--flip .band__media{order:0;}
  .cards3,.workgrid,.footer__grid{grid-template-columns:1fr;}
  .capgrid{grid-template-columns:1fr 1fr;}
  .metrics{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:auto;}
}
@media (max-width:460px){
  .capgrid{grid-template-columns:1fr;}
}