/* =============================================================================
   ICleviathan.com — stylesheet, second design.

   The first design used warm paper, three typefaces and hand-drawn technical
   frames. It was rejected: the client read the page as broken, and the reason
   was demonstrable — headings were held at opacity 0 until 133 KB of animation
   library had downloaded and run, so a visitor on an ordinary connection saw an
   empty grid for the first second.

   This one is built on the opposite premise, and on what the peer group in this
   exact industry actually does (Presto Engineering, iST, EAG Labs):

     · white ground, one strong accent
     · ONE typeface — there is no font pairing to dislike
     · conventional structure: hero, metrics, cards, steps, quotes, contact
     · nothing is hidden before it is shown. No opacity-0 guard, no scroll
       library, no smooth-scroll hijack. Everything paints on first render.

   Mobile-first: the base rules are the 320px layout, enhancements are all in
   min-width queries.
   ============================================================================= */

/* --- one typeface, self-hosted -------------------------------------------- */
@font-face{
  font-family:'Inter';
  src:url(../fonts/inter.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- tokens ---------------------------------------------------------------
   Contrast on white, measured: --tx 17.4:1 · --tx-2 7.6:1 · --tx-3 4.9:1
   --brand 8.6:1 · --link 6.4:1. On --dark: white 15.6:1, --dk-2 9.1:1.
   -------------------------------------------------------------------------- */
:root{
  --bg:      #FFFFFF;
  --bg-alt:  #F4F6F9;   /* alternating section band */
  --bg-sunk: #EDF1F6;   /* inputs, subtle wells */
  --dark:    #16233A;   /* dark section ground */
  --dark-2:  #1E3151;   /* card on dark */

  --tx:      #101828;   /* headings, primary */
  --tx-2:    #475467;   /* body copy */
  --tx-3:    #667085;   /* captions, meta */
  --dk-tx:   #FFFFFF;
  --dk-tx-2: #C3CEDD;

  --brand:   #2D476C;   /* the logo navy — buttons, headings accents */
  --brand-d: #1E3151;
  --link:    #1A5FB4;   /* interactive blue, brighter than the brand navy */
  --sage:    #6C8A8D;   /* secondary brand, used sparingly */

  --border:  #E4E7EC;
  --border-2:#D0D5DD;
  --err:     #B42318;

  --r:       10px;      /* card radius — soft, not sharp, not pill */
  --r-sm:    6px;
  --pad:     clamp(20px,5vw,48px);
  --shadow:  0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
  --shadow-l:0 2px 4px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.09);
  --hdr:     68px;

  /* the constellation background — dark ink on light grounds by default */
  --net-navy:   #2D476C;
  --net-sage:   #6C8A8D;
  --net-dot:    #2D476C;
  --net-op-dot:  .05;
  --net-op-node: .085;
  --net-op-line: .075;
}

/* on any dark ground the same graphic flips to light ink */
.sec-dark,.hero,footer{
  --net-navy:   #8FB4E8;
  --net-sage:   #93B2B5;
  --net-dot:    #C9D9F0;
  --net-op-dot:  .085;
  --net-op-node: .26;
  --net-op-line: .20;
}
/* the hero's constellation sits beneath the scrim, so it is given more weight
   to survive it — it can never affect text contrast from down there */
.hero{--net-op-node:.42;--net-op-line:.34}

/* --- base ----------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100dvh;
}
h1,h2,h3,h4{margin:0;color:var(--tx);text-wrap:balance}
h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;letter-spacing:-.028em;font-weight:700}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-.026em;font-weight:700}
h3{font-size:clamp(19px,1.5vw,22px);line-height:1.3;letter-spacing:-.014em;font-weight:600}
h4{font-size:17px;line-height:1.4;font-weight:600}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
strong{font-weight:600;color:var(--tx)}
::selection{background:#D6E4F7;color:var(--tx)}

.w{max-width:1200px;margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
.w-narrow{max-width:820px}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-sm)}

/* technical figures get tabular, aligned numerals — no monospace needed */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em}

/* eyebrow label — set in the same face, just small and confident */
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--link);margin-bottom:14px}
.eyebrow-q{color:var(--tx-3)}

.lede{font-size:clamp(18px,1.35vw,21px);line-height:1.55;color:var(--tx-2);max-width:60ch}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r-sm) 0;font-size:15px;font-weight:600}
.skip:focus{left:0}

/* =============================================================================
   HEADER — solid, never translucent. It must never look half-loaded.
   ============================================================================= */
header{position:sticky;top:0;z-index:70;background:var(--bg);
  border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:16px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;padding:6px 0}
.brand .mk{width:26px;height:auto;flex:none}
.brand .wm{width:116px;height:auto}
.nlinks{display:none}
.nav .btn{display:none}

.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-2);
  background:var(--bg);cursor:pointer;border-radius:var(--r-sm);padding:0;color:var(--tx)}
.burger span{display:block;width:16px;height:2px;background:currentColor;position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;
  background:currentColor;border-radius:2px}
.burger span::before{top:-5px}
.burger span::after{top:5px}

.mnav{display:none;border-top:1px solid var(--border);background:var(--bg);
  padding:8px max(var(--pad),env(safe-area-inset-left)) 20px}
.mnav.open{display:block}
.mnav a{display:flex;align-items:center;min-height:52px;font-size:17px;font-weight:500;
  color:var(--tx-2);border-bottom:1px solid var(--border)}
.mnav a[aria-current="page"]{color:var(--link);font-weight:600}
.mnav a.btn{margin-top:18px;border-bottom:0;justify-content:center;color:#fff}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  padding:12px 24px;border-radius:var(--r-sm);font-size:16px;font-weight:600;
  background:var(--brand);color:#fff;border:1px solid var(--brand);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .08s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--bg);color:var(--tx);border-color:var(--border-2)}
.btn-ghost{background:transparent;color:var(--link);border-color:transparent;padding-left:0;padding-right:0}
.btn-lg{min-height:54px;padding:14px 30px;font-size:17px}
.btn svg{flex:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
  .btn-2:hover{background:var(--bg-alt);border-color:var(--border-2)}
  .btn-ghost:hover{background:transparent;color:var(--brand-d)}
}

/* an inline text link that reads as a link */
.tlink{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(26,95,180,.35)}
@media (hover:hover) and (pointer:fine){
  .tlink:hover{text-decoration-color:currentColor}
}

/* an arrow link used at the end of sections */
.more{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-size:16px;
  font-weight:600;color:var(--link)}
.more svg{transition:transform .16s ease}
@media (hover:hover) and (pointer:fine){.more:hover svg{transform:translateX(3px)}}

/* =============================================================================
   SECTION BACKGROUND — the same constellation, everywhere.

   The dot field is a CSS radial-gradient pattern, so it costs no markup at all.
   The mark itself is one <symbol> defined once per page and referenced by every
   section with <use>. Both layers are decorative, both are painted immediately,
   and the parallax on them is a transform applied afterwards.
   ============================================================================= */
.secbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.secbg .lay{position:absolute;will-change:transform}

.snet-dots{inset:-18% -6%;
  background-image:radial-gradient(circle,var(--net-dot) 1.9px,transparent 2.1px);
  background-size:26px 26px;opacity:var(--net-op-dot);
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at var(--net-x,72%) 46%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 66% at var(--net-x,72%) 46%,#000 0%,transparent 72%)}

.snet-mark{top:-14%;right:-10%;width:64%;height:128%}
.snet-mark svg{width:100%;height:100%;display:block}
.netsprite{position:absolute;width:0;height:0;overflow:hidden}

/* alternate sections mirror the composition so it never reads as a repeat */
.sec:nth-of-type(even) .snet-dots{--net-x:26%}
/* the mirror goes on the inner svg: the layer itself carries the inline
   parallax transform, which would otherwise overwrite it */
.sec:nth-of-type(even) .snet-mark{right:auto;left:-10%}
.sec:nth-of-type(even) .snet-mark svg{transform:scaleX(-1)}

@media (max-width:767px){
  .snet-mark{width:120%;right:-30%}
  .sec:nth-of-type(even) .snet-mark{left:-30%}
}

/* =============================================================================
   SECTIONS
   ============================================================================= */
.sec{padding:clamp(56px,7vw,104px) 0;position:relative;overflow:hidden}
.sec > .w{position:relative;z-index:1}
.phero{position:relative;overflow:hidden}
.phero > .w{position:relative;z-index:1}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--dark);color:var(--dk-tx)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--dk-tx)}
.sec-dark .lede,.sec-dark p{color:var(--dk-tx-2)}
/* the form sits on a white card inside the dark band, so it keeps dark text —
   without this the section 11 notice renders light-on-light */
.sec-dark .formcard,.sec-dark .formcard p,.sec-dark .formcard label{color:var(--tx-2)}
.sec-dark .formcard h1,.sec-dark .formcard h2,.sec-dark .formcard h3,
.sec-dark .formcard h4,.sec-dark .formcard strong,.sec-dark .formcard .fld label{color:var(--tx)}
.sec-dark .formcard .notice .h{color:var(--tx-3)}
.sec-dark .formcard .ferr{color:var(--err)}
.sec-dark .eyebrow{color:#8FB4E8}
.sec-tight{padding-top:0}

.shead{max-width:46rem;margin-bottom:clamp(36px,4vw,60px)}
/* a small numeral and a rule before the eyebrow — structure without decoration */
.snum{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.snum span{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--tx-3);
  font-variant-numeric:tabular-nums}
.snum::after{content:"";flex:1;height:1px;background:var(--border);max-width:72px}
.sec-dark .snum span,.hero .snum span{color:rgba(195,206,221,.85)}
.sec-dark .snum::after,.hero .snum::after{background:rgba(255,255,255,.22)}
.shead p{margin-top:16px;color:var(--tx-2);font-size:clamp(17px,1.2vw,19px)}
.shead-row{display:grid;gap:20px;align-items:end;margin-bottom:clamp(32px,3.6vw,52px)}
.shead-row .shead{margin-bottom:0}

/* =============================================================================
   HERO — the photograph is the ground, the words sit on it.

   The image animates in; the text does not. That split is deliberate. The
   previous design held its headline at opacity 0 until a script ran, the client
   opened it and concluded the site was broken, and she was right. So the words
   are painted complete at frame zero and only the photograph moves.

   The scrim is at full strength from the first frame too — it never fades in —
   so contrast over the photograph is constant rather than arriving late.
   ============================================================================= */
.hero{background:var(--dark);color:var(--dk-tx);overflow:hidden;position:relative;
  display:flex;align-items:center;
  padding:clamp(56px,7vw,96px) 0;
  min-height:clamp(520px,74vh,760px)}
.hero h1,.hero h2{color:#fff}
.hero .eyebrow{color:#CFE0F7}

/* the photograph, and its entrance */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo-in{position:absolute;inset:0;
  animation:heroPhoto 1700ms cubic-bezier(.16,1,.3,1) 60ms}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
@keyframes heroPhoto{
  from{opacity:0;transform:scale(1.14)}
  55% {opacity:1}
  to  {opacity:1;transform:scale(1)}
}

/* the scrim: heavy where the words are, clearing to the right so the part
   itself stays visible. Static — it never animates. */
/* Three stacked layers, not one. A flat base guarantees a floor over the
   brightest solder balls; the horizontal ramp keeps the words dark; the
   vertical ramp settles the top and bottom edges. Measured against the
   rendered pixels, not against the section's background colour — the photo is
   what the text actually sits on. */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(13,24,40,.90) 0%,
      rgba(13,24,40,.87) 54%,
      rgba(13,24,40,.66) 76%,
      rgba(13,24,40,.34) 90%,
      rgba(13,24,40,.20) 100%),
    linear-gradient(to bottom, rgba(13,24,40,.34), rgba(13,24,40,.04) 42%, rgba(13,24,40,.30)),
    rgba(13,24,40,.10)}

.hero > .w{position:relative;z-index:3;width:100%}
.hero-copy{max-width:44rem}
.hero h1{max-width:19ch}
.hero .lede{margin-top:24px;color:#EAF0F7;max-width:50ch}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero .btn{background:#fff;color:var(--dark);border-color:#fff}
.hero .btn-2{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.42)}
.hero-note{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
  font-size:15.5px;color:#DDE5EF;max-width:46ch}
.hero-note strong{color:#fff}
@media (hover:hover) and (pointer:fine){
  .hero .btn:hover{background:var(--bg-alt);border-color:var(--bg-alt)}
  .hero .btn-2:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
}

/* between 768 and 1023 the copy spans nearly the whole width, so the heavy
   part of the ramp has to run almost all the way across */
@media (min-width:768px) and (max-width:1023px){
  .hero-scrim{background:
    linear-gradient(96deg,
      rgba(13,24,40,.94) 0%,
      rgba(13,24,40,.92) 62%,
      rgba(13,24,40,.86) 86%,
      rgba(13,24,40,.74) 100%),
    linear-gradient(to bottom, rgba(13,24,40,.45), rgba(13,24,40,.20) 42%, rgba(13,24,40,.45)),
    rgba(13,24,40,.34)}
}

@media (max-width:767px){
  /* On a phone the words cover the whole frame, so the scrim goes vertical.
     Two things make that survivable. The asset is a pre-graded copy, so the
     scrim can stay light and still leave a photograph — a flat scrim heavy
     enough to carry white text over bright solder balls erases the picture
     entirely. And the crop is pulled toward the top of the plate, where
     perspective makes the balls smaller and denser: a portrait frame shows
     only a 258px-wide slice of a 1600px banner, and the foreground of that
     slice reads as ball bearings rather than as a BGA array. */
  .hero{min-height:clamp(500px,84vh,720px)}
  .hero-photo img{object-position:50% 16%}
  .hero-scrim{background:
    linear-gradient(to bottom,
      rgba(13,24,40,.40) 0%,
      rgba(13,24,40,.52) 26%,
      rgba(13,24,40,.62) 52%,
      rgba(13,24,40,.70) 78%,
      rgba(13,24,40,.76) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .hero-photo-in{animation:none}
}

/* -----------------------------------------------------------------------------
   HERO BACKGROUND — three parallax layers.

   The mark is dots joined by strokes; the product is a ball grid array, which
   is a field of dots; the business is a chain of connected vendors. One shape,
   drawn once, split across three depths so it can move at three rates and sit
   in three tones.

   Everything is fully painted on first render. Parallax is a transform applied
   on top by script — if the script never runs, this is a static graphic.
   ----------------------------------------------------------------------------- */
.hbg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hbg .lay{position:absolute;will-change:transform}

/* soft tonal washes — the "gradients" under everything else */
.hglow{position:absolute;border-radius:50%;filter:blur(10px)}
.g1{top:-24%;right:-6%;width:62%;height:92%;
  background:radial-gradient(circle at 50% 50%,rgba(45,71,108,.55),rgba(45,71,108,0) 68%)}
.g2{bottom:-34%;right:22%;width:48%;height:78%;
  background:radial-gradient(circle at 50% 50%,rgba(108,138,141,.30),rgba(108,138,141,0) 66%)}
.g3{top:6%;left:-16%;width:44%;height:76%;
  background:radial-gradient(circle at 50% 50%,rgba(46,82,140,.28),rgba(46,82,140,0) 70%)}

/* the three dot layers, weighted to the right so they never fight the headline */
.hnet-far {top:-16%;right:-18%;width:96%;height:136%;opacity:.9}
.hnet-mid {top:-12%;right:-12%;width:82%;height:126%;opacity:1}
.hnet-near{top:-20%;right:-22%;width:88%;height:140%;opacity:.85}

.hbg .pulse{transform-box:fill-box;transform-origin:center;
  animation:netpulse 6s ease-in-out infinite}
.hbg .p2{animation-delay:-2s}
.hbg .p3{animation-delay:-4s}
@keyframes netpulse{
  0%,100%{opacity:.26;transform:scale(1)}
  50%    {opacity:.42;transform:scale(1.08)}
}

@media (max-width:1023px){
  .hnet-far {right:-40%;width:150%;top:auto;bottom:-14%;height:82%}
  .hnet-mid {right:-36%;width:132%;top:auto;bottom:-10%;height:74%}
  .hnet-near{right:-44%;width:150%;top:auto;bottom:-18%;height:86%}
  .g1{right:-30%;width:100%}
  .g3{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hbg .pulse{animation:none}
  .lay{transform:none!important}
}
@media (hover:hover) and (pointer:fine){
  .hero .btn:hover{background:var(--bg-alt);border-color:var(--bg-alt)}
  .hero .btn-2:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
}

/* page hero for the inner pages */
.phero{padding:clamp(40px,4.5vw,68px) 0 clamp(28px,3vw,40px);border-bottom:1px solid var(--border)}
.phero h1{max-width:18ch}
.phero .lede{margin-top:20px}

/* =============================================================================
   METRIC STRIP
   ============================================================================= */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.metrics div{background:var(--bg);padding:24px 20px}
.sec-alt .metrics div{background:var(--bg-alt)}
.metrics .v{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;
  color:var(--brand);line-height:1.1}
.metrics .k{margin-top:8px;font-size:14.5px;color:var(--tx-2);line-height:1.4}

/* =============================================================================
   CARDS
   ============================================================================= */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:30px 28px 28px;position:relative;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
  display:flex;flex-direction:column}
/* a hairline of brand colour along the top edge */
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--brand);opacity:.9}
.sec-alt .card{background:var(--bg)}
/* the partner name reads as a credit line above the title, with a short rule —
   less template-y than a pill, and it lets the title lead */
.card .tag,.ncard .tag{display:flex;align-items:center;gap:10px;align-self:stretch;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--link);margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--border)}
.card .tag::after,.ncard .tag::after{content:"";flex:1;height:1px;background:transparent}
.card h3{margin-bottom:10px}
.card p{color:var(--tx-2);font-size:16px;line-height:1.6}
.card ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.card li{position:relative;padding-left:24px;font-size:15.5px;color:var(--tx-2);line-height:1.5}
.card li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;
  border-radius:2px;background:var(--sage)}
.card .foot{margin-top:auto;padding-top:20px}
@media (hover:hover) and (pointer:fine){
  .card-int:hover{box-shadow:var(--shadow-l);border-color:var(--border-2);transform:translateY(-2px)}
}
.sec-dark .card{background:var(--dark-2);border-color:rgba(255,255,255,.14)}
.sec-dark .card p,.sec-dark .card li{color:var(--dk-tx-2)}
.sec-dark .card .tag,.sec-dark .ncard .tag{background:rgba(143,180,232,.16);color:#A9C7EE}

/* =============================================================================
   AUDIENCE CARDS — "who we work with"
   Three company types, taken from the audience table in the content spec.
   Lets a visitor identify themselves in the first screen after the hero.
   ============================================================================= */
.aud{display:grid;grid-template-columns:1fr;gap:20px}
.acard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column}
.sec-alt .acard{background:var(--bg)}
.acard .who{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--link);margin-bottom:14px}
.acard h3{margin-bottom:12px;font-size:clamp(20px,1.6vw,23px)}
.acard p{color:var(--tx-2);font-size:16px;line-height:1.6}
.acard .need{margin-top:auto;padding-top:20px;border-top:1px solid var(--border);
  font-size:15px;color:var(--tx-3);line-height:1.55}
.acard .need b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:6px}

/* =============================================================================
   FOUNDER — the human the whole proposition rests on, made contactable
   ============================================================================= */
.founder{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:1fr;
  gap:clamp(26px,3vw,44px);align-items:start;box-shadow:var(--shadow)}
.sec-alt .founder{background:var(--bg)}
.fportrait{display:flex;align-items:center;gap:20px}
.fportrait img{width:96px;height:96px;border-radius:50%;object-fit:cover;
  object-position:center 22%;flex:none;border:1px solid var(--border)}
.fportrait .nm{font-size:19px;font-weight:600;color:var(--tx);line-height:1.3}
.fportrait .rl{font-size:15px;color:var(--tx-3);margin-top:3px}
.founder blockquote{margin:0;font-size:clamp(20px,1.9vw,26px);line-height:1.4;
  letter-spacing:-.016em;font-weight:500;color:var(--tx)}
.founder .bio{margin-top:20px;color:var(--tx-2);font-size:16px;line-height:1.65}
.founder .bio + .bio{margin-top:14px}
.fcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* =============================================================================
   PROCESS STEPS
   ============================================================================= */
.steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:s;
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.step{padding:24px;border-bottom:1px solid var(--border);position:relative}
.step:last-child{border-bottom:0}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:14.5px;font-weight:700;
  margin-bottom:14px;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:6px;font-size:17px;font-weight:600}
.step p{font-size:15.5px;color:var(--tx-2);line-height:1.5}

/* =============================================================================
   PARTNERS
   ============================================================================= */
.partners{display:grid;grid-template-columns:1fr;gap:20px}
.partner{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:28px;display:flex;flex-direction:column}
.partner .logo{height:52px;display:flex;align-items:center;margin-bottom:22px}
.partner .logo img{max-height:52px;max-width:190px;width:auto;height:auto;object-fit:contain}
.partner h3{margin-bottom:10px}
.partner p{color:var(--tx-2);font-size:16px;line-height:1.6}
.partner dl{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.partner dt{color:var(--tx-3);font-weight:500}
.partner dd{margin:0;color:var(--tx);font-weight:500;text-align:right}

/* =============================================================================
   QUOTES
   ============================================================================= */
.quotes{display:grid;grid-template-columns:1fr;gap:20px}
.quote{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:30px}
.sec-alt .quote{background:var(--bg)}
.quote blockquote{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.5;
  letter-spacing:-.012em;color:var(--tx);font-weight:500}
.quote figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:15px;color:var(--tx-3)}
.quote figcaption b{display:block;color:var(--tx);font-weight:600;font-size:16px;margin-bottom:2px}
.sec-dark .quote{background:var(--dark-2);border-color:rgba(255,255,255,.14)}
.sec-dark .quote blockquote{color:var(--dk-tx)}
.sec-dark .quote figcaption{color:var(--dk-tx-2);border-color:rgba(255,255,255,.14)}
.sec-dark .quote figcaption b{color:#fff}

/* =============================================================================
   CAPABILITY GROUPS
   ============================================================================= */
.groups{display:grid;grid-template-columns:1fr;gap:20px}
.group{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.sec-alt .group{background:var(--bg)}
.group .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.group h3{font-size:18px}
.group .ct{font-size:14px;color:var(--tx-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.group ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.group li{position:relative;padding-left:22px;font-size:15.5px;color:var(--tx-2);line-height:1.5}
.group li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;
  border-radius:2px;background:var(--sage)}

/* =============================================================================
   IMAGE PLATES
   ============================================================================= */
.plate{border-radius:var(--r);overflow:hidden;background:var(--bg-alt);margin:0;
  border:1px solid var(--border)}
.plate img{width:100%;height:auto;display:block}
.plate figcaption{padding:14px 18px;font-size:14px;color:var(--tx-3);
  border-top:1px solid var(--border);background:var(--bg)}
.sec-dark .plate{border-color:rgba(255,255,255,.14)}
.sec-dark .plate figcaption{background:var(--dark-2);color:var(--dk-tx-2);
  border-color:rgba(255,255,255,.14)}
.plate-wide img{aspect-ratio:21/9;object-fit:cover}

/* a photograph that breaks the container and runs the full width of the screen */
.band{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:var(--dark)}
.band img{width:100%;height:auto;display:block;aspect-ratio:16/6;object-fit:cover}
@media (max-width:767px){.band img{aspect-ratio:4/3}}
.band figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:20px max(var(--pad),env(safe-area-inset-left));
  font-size:14.5px;color:rgba(255,255,255,.86);
  background:linear-gradient(to top,rgba(11,18,31,.78),rgba(11,18,31,0))}
.band .in{max-width:1200px;margin:0 auto}

/* text beside an image */
.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,52px);align-items:center}

/* =============================================================================
   TABLE
   ============================================================================= */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.tbl tr{display:block;padding:18px;border-bottom:1px solid var(--border)}
.tbl tr:last-child{border-bottom:0}
.tbl td{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:4px 0;border:0;color:var(--tx-2)}
.tbl td::before{content:attr(data-k);font-size:13px;font-weight:600;color:var(--tx-3)}
.tbl td:first-child{color:var(--tx);font-weight:600}

/* =============================================================================
   NEWS
   ============================================================================= */
.ncard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.ncard .tag{margin-bottom:14px}
.ncard h3{margin-bottom:10px;font-size:19px}
.ncard p{color:var(--tx-2);font-size:15.5px;line-height:1.6}
.ncard .more{margin-top:auto;padding-top:18px}
@media (hover:hover) and (pointer:fine){
  .ncard:hover{box-shadow:var(--shadow-l);border-color:var(--border-2);transform:translateY(-2px)}
}

/* =============================================================================
   ARTICLE + LONG-FORM PROSE
   ============================================================================= */
.prose{max-width:70ch}
.prose p{color:var(--tx-2);margin-bottom:20px}
.prose p.first{font-size:clamp(18px,1.3vw,20px);color:var(--tx);line-height:1.55}
.prose h2{font-size:clamp(22px,2vw,28px);margin:44px 0 16px}
.prose h3{margin:32px 0 12px}
.prose ul,.prose ol{color:var(--tx-2);padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--tx-3)}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(26,95,180,.35)}
.prose dl{margin:0 0 20px;display:grid;gap:0}
.prose dt{font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tx-3);margin-top:20px}
.prose dd{margin:6px 0 0;color:var(--tx-2)}
.prose .src{font-size:15px;color:var(--tx-3);border-top:1px solid var(--border);
  padding-top:20px;margin-top:36px}
.callout{border:1px solid var(--border-2);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);background:var(--bg-alt);padding:20px 22px;margin:26px 0}
.callout p{margin:0;font-size:16px;color:var(--tx-2)}
.artmeta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--tx-3)}

/* =============================================================================
   FORM
   ============================================================================= */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px)}
.cinfo{display:grid;gap:2px;margin-top:28px}
.cinfo a,.cinfo div{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;
  border-bottom:1px solid var(--border);min-height:48px;align-content:center}
.cinfo .k{font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tx-3)}
.cinfo .v{font-size:17px;color:var(--tx);font-weight:500;overflow-wrap:anywhere}
.sec-dark .cinfo a,.sec-dark .cinfo div{border-color:rgba(255,255,255,.16)}
.sec-dark .cinfo .k{color:var(--dk-tx-2)}
.sec-dark .cinfo .v{color:#fff}
@media (hover:hover) and (pointer:fine){.cinfo a:hover .v{color:var(--link)}}
.sec-dark .cinfo a:hover .v{color:#A9C7EE}

.formcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr;gap:18px}
.fld{display:grid;gap:7px}
.fld label{font-size:14.5px;font-weight:600;color:var(--tx)}
.fld .opt{font-weight:400;color:var(--tx-3)}
input,textarea,select{font:inherit;font-size:16px;width:100%;min-height:48px;
  padding:11px 14px;border:1px solid var(--border-2);border-radius:var(--r-sm);
  background:var(--bg);color:var(--tx);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--link);
  box-shadow:0 0 0 3px rgba(26,95,180,.14)}
input::placeholder,textarea::placeholder{color:#98A2B3}
select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
textarea{min-height:110px;resize:vertical;line-height:1.55}
.fld[data-invalid] input,.fld[data-invalid] textarea{border-color:var(--err)}
.ferr{display:none;font-size:14px;color:var(--err);font-weight:500}
.fld[data-invalid] .ferr{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{font-size:14.5px;line-height:1.6;color:var(--tx-2);background:var(--bg-alt);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:18px 20px}
.notice .h{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:12px}
.notice p+p{margin-top:10px}
.notice a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.fmsg{font-size:15.5px;line-height:1.55;color:var(--tx-2);min-height:22px}
.fmsg[data-state="ok"]{color:#067647;font-weight:500}
.fmsg[data-state="err"]{color:var(--err);font-weight:500}
.fmsg a{color:inherit;text-decoration:underline}

/* map */
.map{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-alt)}
.mapbox{position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:28px;text-align:center}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapbox p{font-size:15.5px;color:var(--tx-2);max-width:44ch;margin-bottom:18px}

/* =============================================================================
   404
   ============================================================================= */
.e404{padding:clamp(64px,9vw,128px) 0}
.e404 ul{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:0;max-width:560px;
  border-top:1px solid var(--border)}
.e404 li a{display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:60px;padding:10px 0;border-bottom:1px solid var(--border);font-weight:600}
.e404 li a span{color:var(--tx-3);font-weight:400;font-size:15px;text-align:right}
@media (hover:hover) and (pointer:fine){.e404 li a:hover{color:var(--link)}}

/* =============================================================================
   FOOTER
   ============================================================================= */
footer{background:var(--dark);color:var(--dk-tx-2);padding:clamp(48px,5vw,72px) 0
  max(32px,env(safe-area-inset-bottom));font-size:15.5px}
.fgrid{display:grid;grid-template-columns:1fr;gap:36px}
footer .brand .wm{filter:brightness(0) invert(1)}
footer .blurb{margin-top:18px;max-width:38ch;line-height:1.6;color:var(--dk-tx-2)}
footer h2{color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:14px;line-height:1.4}
.fcol{display:grid;gap:2px}
.fcol a,.fcol button{display:inline-flex;align-items:center;min-height:44px;color:var(--dk-tx-2);
  background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left}
.fcol .addr{padding:8px 0;line-height:1.6}
@media (hover:hover) and (pointer:fine){.fcol a:hover,.fcol button:hover{color:#fff}}
.fbase{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14.5px;
  color:rgba(195,206,221,.8)}

/* =============================================================================
   CONSENT
   ============================================================================= */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bg);
  border-top:1px solid var(--border);box-shadow:0 -8px 32px rgba(16,24,40,.1);
  padding:22px max(var(--pad),env(safe-area-inset-left))
          max(22px,env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-right))}
.consent[hidden]{display:none}
.consent .in{max-width:1200px;margin:0 auto;display:grid;gap:18px}
.consent .eyebrow{margin-bottom:8px}
.consent p{font-size:15.5px;color:var(--tx-2);max-width:72ch}
.cbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cbtn{min-height:48px;padding:12px 20px;border-radius:var(--r-sm);font-size:16px;font-weight:600;
  background:var(--brand);color:#fff;border:1px solid var(--brand);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-align:center}
.cbtn-2{background:var(--bg);color:var(--tx);border-color:var(--border-2)}
.clink{grid-column:1/-1;min-height:44px;display:inline-flex;align-items:center;background:none;
  border:0;padding:0;cursor:pointer;color:var(--link);font:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.cprefs{display:grid;gap:16px;border-top:1px solid var(--border);padding-top:18px}
.cprefs[hidden]{display:none}
.cprefs .rt{font-size:15.5px;font-weight:600;color:var(--tx)}
.cprefs .fixed{font-weight:400;color:var(--tx-3)}
.cprefs .rd{font-size:14.5px;line-height:1.55;color:var(--tx-2);max-width:72ch}
.cprefs label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.cprefs input[type=checkbox]{width:20px;height:20px;min-height:20px;accent-color:var(--brand);
  margin:0;flex:none;padding:0}
@media (hover:hover) and (pointer:fine){
  .cbtn:hover{background:var(--brand-d);border-color:var(--brand-d)}
  .cbtn-2:hover{background:var(--bg-alt)}
}

/* =============================================================================
   ENHANCEMENTS — min-width only
   ============================================================================= */
@media (min-width:600px){
  .f2{grid-template-columns:1fr 1fr}
  .cbtns{grid-template-columns:auto auto;justify-content:start}
  .cbtn{min-width:190px}
  .cinfo a,.cinfo div{grid-template-columns:150px 1fr;gap:16px;align-items:center}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metrics div{padding:26px 22px}
}

@media (min-width:768px){
  .nlinks{display:flex;align-items:center;gap:4px}
  .nlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
    font-size:16px;font-weight:500;color:var(--tx-2);border-radius:var(--r-sm)}
  .nlinks a[aria-current="page"]{color:var(--link);font-weight:600}
  .nav .btn{display:inline-flex}
  .burger,.mnav{display:none!important}

  .cards{grid-template-columns:1fr 1fr}
  .aud{grid-template-columns:1fr 1fr}
  .founder{grid-template-columns:290px 1fr}
  .partners{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .groups{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
  .step:nth-child(3n){border-right:0}
  .step:nth-child(n+4){border-bottom:0}
  .shead-row{grid-template-columns:1fr auto}

  .tbl thead{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal}
  .tbl tr{display:table-row;padding:0;border-bottom:0}
  .tbl th{text-align:left;padding:14px 20px;background:var(--bg-alt);font-size:13.5px;
    font-weight:600;color:var(--tx-3);border-bottom:1px solid var(--border);
    letter-spacing:.03em;text-transform:uppercase}
  .tbl td{display:table-cell;padding:16px 20px;border-bottom:1px solid var(--border);
    vertical-align:top}
  .tbl td::before{content:none}
  .tbl tbody tr:last-child td{border-bottom:0}
  .split{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1.6fr 1fr 1fr}
}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  .nlinks a:hover{background:var(--bg-alt);color:var(--tx)}
  .tbl tbody tr:hover td{background:var(--bg-alt)}
}

@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.12fr .88fr;gap:clamp(40px,4vw,72px)}
  .cards-3{grid-template-columns:repeat(3,1fr)}
  .aud{grid-template-columns:repeat(3,1fr)}
  .founder{grid-template-columns:320px 1fr}
  .partners{grid-template-columns:repeat(3,1fr)}
  .groups{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(6,1fr)}
  .step{border-bottom:0;border-right:1px solid var(--border)}
  .step:last-child{border-right:0}
  .step:nth-child(3n){border-right:1px solid var(--border)}
  .fgrid{grid-template-columns:1.8fr 1fr 1fr 1fr}
}

/* =============================================================================
   MOTION
   -----------------------------------------------------------------------------
   There is deliberately no scroll-reveal animation on this site.

   It was built, twice, and both times it reintroduced the exact defect that got
   the previous design rejected: content sitting at opacity 0 after the page had
   been scrolled, and text failing contrast because it was measured mid-fade.
   The hero parallax gives the page movement without ever hiding anything, and
   every word on every page is painted on first render. That trade is correct.
   ============================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media print{
  header,footer,.consent,.burger,.mnav,.map{display:none!important}
  body{font-size:12pt;color:#000}
  .sec{padding:12pt 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}