/* ============================================================
   WeFi 2026 — Prototype stylesheet
   Implements build/design-tokens.css against real components.
   ============================================================ */

:root {
  --navy: #1A234D;
  --cyan: #1F8DC5;
  --white: #FFFFFF;
  --orange: #F99F38;
  --grey: #4A5066;
  --ink: #0E1530;
  --violet: #6E59E0;
  --sky: #E2F0F8;
  --lavender: #EFEDF9;
  --peach: #FCE9D2;
  --mint: #E1F4EA;
  --blush: #FCE2E2;
  --gridline: #E8EAEF;

  --font: 'Mulish', system-ui, sans-serif;

  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px;

  --ease: cubic-bezier(.25,.46,.45,.94);
  --dur-ui: 240ms; --dur-hero: 600ms;
  --reveal-y: 14px;

  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font: 400 16px/26px var(--font);
  color: var(--ink);
  background: linear-gradient(160deg, #e6ecf8 0%, #d3dcf0 50%, #dde5f4 100%);
  /* The card inset is shared with the fixed header so the bar tracks the frame. */
  --frame-inset: clamp(10px, 1.6vw, 22px);
  --bar-h: 72px;
  --bar-float: 0px;   /* becomes a gap once the bar detaches */
  padding: var(--frame-inset);
  -webkit-font-smoothing: antialiased;
}
.frame {
  position: relative; border-radius: 28px; overflow: clip; background: var(--white);
  box-shadow:
    0 40px 100px -40px rgba(26,35,77,.55),
    0 0 0 1px rgba(255,255,255,.65);
}

::selection { background: rgba(31,141,197,.25); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Type scale ---------- */
.display {
  font-weight: 300;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.06;
  letter-spacing: -1.5px;
}
h1, .h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -1px;
}
h2, .h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.14;
  letter-spacing: -.8px;
}
h3, .h3 { font-weight: 700; font-size: 22px; line-height: 29px; }
.eyebrow {
  font-weight: 700; font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan);
}
.sub { font-size: 18px; line-height: 30px; color: var(--grey); max-width: 620px; }
.register-dark .sub { color: rgba(255,255,255,.72); }

/* ---------- Registers ---------- */
.register-dark  { background: var(--navy); color: var(--white); }
.register-deep  { background: var(--ink);  color: var(--white); }
.register-light { background: var(--white); color: var(--navy); }
.register-pastel{ background: var(--lavender); color: var(--ink); }
section { padding: clamp(96px, 9vw, 124px) 0; position: relative; overflow: hidden; }

/* ---------- Logo (supplied vector files only — never redrawn) ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 28px; width: auto; display: block; }
footer .logo img { height: 32px; }

/* ---------- Header ---------- */
header {
  position: fixed; z-index: 50;
  top: var(--frame-inset); left: var(--frame-inset); right: var(--frame-inset);
  border-radius: 28px 28px 0 0;   /* meets the frame's own corner radius */
  transition: transform .4s var(--ease-out-expo), background-color .3s var(--ease),
              box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* At the top of the page the bar is transparent and full height: it belongs to the
   hero. Once you leave the hero it condenses onto its own surface. */
header .bar {
  display: flex; align-items: center; justify-content: space-between; height: var(--bar-h);
  transition: height .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), border-radius .3s var(--ease),
              margin-top .3s var(--ease), padding .3s var(--ease);
}
/* At the top of the page the bar is bare. Once it detaches it becomes a
   floating pill inside the frame rather than a full-width slab, so it reads as
   a deliberate object instead of a strip that failed to reach the edges.
   The surface lives on .bar, not on <header>, so only paint changes and no
   layout property is animated. */
header.solid { background: transparent; box-shadow: none; backdrop-filter: none; }
header.solid .bar {
  background: rgba(14,21,48,.86);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 46px -26px rgba(4,7,26,.95);
  border-radius: 999px;
  padding-inline: 34px;              /* air around the logo and the CTA */
  margin-top: var(--bar-float);
}
/* The CTA is the right-hand edge of the pill, so give it its own breathing room
   rather than letting it sit hard against the curve. */
header.solid .bar nav.primary { gap: 26px; }
/* Inside the 58px pill the full-size CTA touched both curves. Scale it to the
   bar so it sits inset like a control, not wedged like a cork. */
header.solid .bar nav.primary .btn {
  margin-left: 10px; padding: 9px 20px; font-size: 14px; line-height: 20px;
}
header.condensed { --bar-h: 58px; --bar-float: 12px; }
header.condensed .logo img, header.condensed .logo svg { transform: scale(.9); }
header .logo img, header .logo svg { transition: transform .3s var(--ease); transform-origin: 0 50%; }
/* Retreat on the way down, return the moment you head back up. */
/* The header stays put: it is a floating pill 20px below the top, so sliding it up by its own height left a cut-off strip. */
header.hide { transform: none; }
/* Never retreat while a menu is open, or the menu would go with it. */
header.menu-open, header:has(.nav-item.open), header:has(.mega:hover) { transform: none !important; }
nav.primary { display: flex; gap: 28px; align-items: center; }
nav.primary a {
  color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color var(--dur-ui) var(--ease);
}
nav.primary a:hover { color: var(--white); }
nav.primary a.active { color: var(--cyan); }
@media (max-width: 860px) { nav.primary a:not(.btn) { display: none; } }
.on-light nav.primary a { color: rgba(26,35,77,.8); }
.on-light nav.primary a:hover { color: var(--navy); }
.on-light nav.primary a.active { color: var(--cyan); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  padding: 12px 26px; text-decoration: none; cursor: pointer; border: 0;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,141,197,.5); }
.btn-primary { background: var(--cyan); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -8px rgba(31,141,197,.55); }
.btn-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.on-light .btn-ghost { color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(26,35,77,.3); }
.on-light .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(26,35,77,.7); }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -8px rgba(249,159,56,.6); }

/* ---------- Hero: base stage + melt variant ---------- */
.hero {
  min-height: 88vh; display: flex; align-items: center;
  padding: 150px 0 100px; position: relative; overflow: hidden;
}
.hero.melt {
  min-height: 90vh; align-items: flex-start; justify-content: center;
  padding: 150px 0 170px; text-align: center;
  background:
    radial-gradient(190% 135% at 50% 102%,
      #ffffff 0%, #ffffff 22%, #eef6fc 34%, #bcdaf0 46%, #5f9fd0 57%,
      rgba(35,64,124,.35) 66%, rgba(26,35,77,0) 76%),
    linear-gradient(180deg, #04071a 0%, #0E1530 34%, #1A234D 70%, #23407c 100%);
}
.hero .wave {
  position: absolute; inset: 0; pointer-events: none;
  background: url('img/hero-wave.jpg') center 20% / cover no-repeat;
  mix-blend-mode: screen; opacity: .4;
  -webkit-mask-image: radial-gradient(150% 105% at 50% 112%, transparent 46%, #000 68%);
  mask-image: radial-gradient(150% 105% at 50% 112%, transparent 46%, #000 68%);
  animation: wave-drift 26s var(--ease) infinite alternate;
}
@keyframes wave-drift {
  from { transform: translate3d(0,0,0) scale(1.02); }
  to   { transform: translate3d(-2.5%,-1.5%,0) scale(1.08); }
}
.hero .wave::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 38%, rgba(10,16,44,.55), transparent 75%);
}
.hero .aurora {
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(90px); opacity: .35; pointer-events: none;
  animation: aurora-drift 18s var(--ease) infinite alternate;
}
.hero .aurora.a1 { background: radial-gradient(circle, rgba(31,141,197,.55), transparent 62%); bottom: 4vw; left: 20vw; opacity: .4; }
.hero .aurora.a2 { background: radial-gradient(circle, rgba(110,89,224,.3), transparent 65%); top: -30vw; right: -10vw; animation-delay: -9s; }
@keyframes aurora-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6%,4%,0) scale(1.12); }
}
.hero.melt::after {
  /* the veil: every atmosphere layer dissolves to flat white before the seam */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.95) 52%, #fff 64%, #fff 100%);
  z-index: 1; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 3; width: 100%; will-change: transform, opacity; transform-origin: 50% 30%; }
.hero .display { max-width: 15ch; margin: 22px 0 26px; }

.hero.melt .display { max-width: 17ch; margin: 0 auto; color: #fff; }
.hero .display .accent { color: var(--cyan); font-weight: 800; }
.hero .actions { display: flex; align-items: center; gap: 18px; row-gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hero.melt .actions { justify-content: center; margin-top: 44px; }

.hero.melt .sub {
  margin: clamp(56px, 11vh, 130px) auto 0;
  color: #2a3556; font-weight: 600;
}
.hero.melt .btn-ghost { color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(26,35,77,.35); }
.hero.melt .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(26,35,77,.7); }

/* floating pill bar — the DeepSeek move, WeFi-ised */
.hero-bar {
  margin: 26px auto 0; max-width: 720px; width: fit-content; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.94); border-radius: var(--r-2xl); padding: 14px 14px 14px 24px;
  box-shadow: 0 30px 70px -30px rgba(10,16,44,.55), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(14px); text-align: left;
}
.hero-bar .q { flex: none; color: var(--grey); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.hero-bar .chips { display: flex; gap: 8px; flex-wrap: nowrap; }
.hero-bar .chip { white-space: nowrap; }
.hero-bar .go {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--cyan);
  display: grid; place-items: center; color: #fff; font-size: 20px; text-decoration: none;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.hero-bar .go:hover { transform: translateX(3px); box-shadow: 0 8px 26px -8px rgba(31,141,197,.7); }
@media (max-width: 900px) { .hero-bar .chips { display: none; } }
@media (max-width: 560px) { .hero-bar .q { white-space: normal; font-size: 14.5px; } }

/* hero footer strip — arrow, caption, learn-more */
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 38px; color: var(--grey); font-size: 13.5px;
}
.hero-foot .arrow { font-size: 20px; color: var(--navy); animation: nudge 2s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.hero-foot a { color: var(--navy); font-weight: 700; text-decoration: none; }
.hero-foot .cap { max-width: 46ch; text-align: center; }
@media (max-width: 640px) { .hero-foot .cap { display: none; } }
@media (max-height: 760px) { .hero-foot .cap { display: none; } }

/* staggered entrance — transform/opacity only, ease-out, bottom-to-top */
.hero .rise { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.hero .rise.r1 { animation-delay: .05s; } .hero .rise.r2 { animation-delay: .18s; }
.hero .rise.r3 { animation-delay: .32s; } .hero .rise.r4 { animation-delay: .48s; }
.hero .rise.r5 { animation-delay: .64s; } .hero .rise.r6 { animation-delay: .78s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  width: 22px; height: 36px; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.scroll-cue::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  border-radius: 2px; background: var(--cyan); transform: translateX(-50%);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,12px); } }

/* ---------- Flow-field canvas — code-drawn movement, no video ---------- */
.hero canvas.flowfield {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen; opacity: .9;
  -webkit-mask-image: radial-gradient(150% 105% at 50% 112%, transparent 48%, #000 70%);
  mask-image: radial-gradient(150% 105% at 50% 112%, transparent 48%, #000 70%);
}
@media (max-width: 720px) { .hero canvas.flowfield { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero canvas.flowfield { display: none; } }

/* static wave settles into a supporting role under the live field */
.hero .wave { opacity: .28; }

/* ---------- Photo heroes dissolve into navy before the seam ---------- */
.hero.register-dark::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, rgba(26,35,77,0) 0%, rgba(26,35,77,.75) 62%, var(--navy) 96%);
  pointer-events: none; z-index: 1;
}

/* ---------- Grain — film texture on dark registers ---------- */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 92%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}
.grain > .wrap { position: relative; z-index: 2; }

/* ---------- Register transitions: clean lines between colours; only photography blends ---------- */
section > .wrap { position: relative; z-index: 2; }

/* ---------- Ecosystem section — backlit world map field (parallax layer) ---------- */
.ecosystem { background: var(--navy); }
.eco-map {
  position: absolute; inset: -90px 0; pointer-events: none; will-change: transform;
  background: url('img/world-map.jpg') center 30% / cover no-repeat;
}
.eco-map::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,66,.95) 0%, rgba(20,28,66,.84) 50%, rgba(20,28,66,.96) 100%);
}

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  border-radius: var(--r-lg); padding: 26px 24px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.stat.lit { /* one glowing element per view */
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(31,141,197,.30), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.35);
}
.stat.lit-violet {
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(110,89,224,.32), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(110,89,224,.4);
}
.stat .num { font-weight: 300; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -1px; line-height: 1.1; }
.stat .lbl { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.6); font-weight: 600; text-wrap: balance; }

/* ---------- Flow visualisation v2 · SVG ---------- */
.flow { margin-top: 56px; position: relative; z-index: 2; }
.flow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow-svg .box { fill: rgba(13,20,50,.85); stroke: rgba(255,255,255,.26); stroke-width: 1; }
.flow-svg .box.funders { stroke: rgba(31,141,197,.4); }
.flow-svg .box.izzi { fill: rgba(50,38,120,.55); stroke: rgba(147,129,240,.7); animation: izzi-breathe 5s var(--ease) infinite alternate; }
@keyframes izzi-breathe { from { fill: rgba(50,38,120,.5); } to { fill: rgba(70,55,160,.62); } }
.flow-svg .lbl { fill: #fff; font: 700 17px/1 var(--font); }
.flow-svg .sub { fill: rgba(255,255,255,.8); font: 400 12.5px/1 var(--font); }
.flow-svg .lbl.violet { fill: #C9BEF8; }
.flow-svg .path { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.5; stroke-dasharray: 3 6; }
.flow-svg .drop { fill: none; stroke: rgba(110,89,224,.3); stroke-width: 1.2; stroke-dasharray: 2 5; }
.flow-svg .particle {
  r: 5; fill: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(31,141,197,.9));
  animation: flow-p 4.2s linear infinite;
}
.flow-svg .particle.v { fill: var(--violet); filter: drop-shadow(0 0 6px rgba(110,89,224,.9)); animation-duration: 3.6s; }
.flow-svg .particle.d2 { animation-delay: 1.4s; }
.flow-svg .particle.d3 { animation-delay: 2.8s; }
@keyframes flow-p {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.flow-caption { text-align: center; margin-top: 20px; font-size: 13.5px; color: rgba(255,255,255,.72); }

/* ecosystem section: copy left, diagram right on wide screens; stacked below 860px */
.eco-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 60px; align-items: center; }
.eco-layout .sec-head { margin-bottom: 0; }
.flow { max-width: 460px; margin: 0 auto; }
@media (max-width: 860px) {
  .eco-layout { grid-template-columns: 1fr; gap: 32px; }
  .flow { margin-top: 24px; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .grid.c5 { grid-template-columns: repeat(2, 1fr); } .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: 1fr; } .grid.c2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .grid.c5 { grid-template-columns: 1fr; } .grid.c4 { grid-template-columns: 1fr; } }

.card {
  border-radius: var(--r-lg); padding: 26px 24px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gridline);
  text-decoration: none; color: inherit; display: block;
  transition: transform .18s var(--ease), box-shadow var(--dur-ui) var(--ease);
  transform-style: preserve-3d;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.4), 0 14px 40px -14px rgba(31,141,197,.35); /* Signal Glow */
}
.card .k { font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
.card h3 { margin: 10px 0 8px; color: var(--navy); }
.card p { color: var(--grey); font-size: 15px; line-height: 24px; }
.card .go { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--cyan); }
.card.violet .k { color: var(--violet); }
.card.violet:hover { box-shadow: inset 0 0 0 1px rgba(110,89,224,.45), 0 14px 40px -14px rgba(110,89,224,.4); }
.card.pastel-sky { background: var(--sky); box-shadow: none; }
.card.pastel-mint { background: var(--mint); box-shadow: none; }
.card.pastel-peach { background: var(--peach); box-shadow: none; }

.quiet-row { margin-top: 26px; display: flex; gap: 26px; flex-wrap: wrap; }
.quiet-row a { color: var(--grey); font-weight: 600; font-size: 15px; text-decoration: none; }
.quiet-row a:hover { color: var(--cyan); }

/* ---------- Photo cards ---------- */
.card.has-ph { padding: 0; overflow: hidden; }
.card.has-ph .ph {
  height: 180px; background-size: cover; background-position: center;
  transition: transform .6s var(--ease);
}
.card.has-ph:hover .ph { transform: scale(1.05); }
.card.has-ph .body { padding: 22px 24px 26px; }
.card.has-ph .ph.dark { box-shadow: inset 0 0 0 999px rgba(26,35,77,.18); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps.s4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps.s4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .steps.s4 { grid-template-columns: 1fr; } }
.step { border-radius: var(--r-lg); padding: 26px 24px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gridline); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-weight: 300; font-size: 34px; letter-spacing: -1px; color: var(--cyan); display: block; margin-bottom: 10px;
}
.step h3 { color: var(--navy); margin-bottom: 8px; font-size: 19px; line-height: 26px; }
.step p { color: var(--grey); font-size: 15px; line-height: 24px; }
.step.violet::before { color: var(--violet); }

/* ---------- Personas ---------- */
.persona { border-radius: var(--r-lg); padding: 24px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gridline); }
.persona .role { font-weight: 800; color: var(--navy); }
.persona .pain { color: var(--grey); font-size: 15px; margin: 8px 0 10px; }
.persona .resp { font-size: 15px; color: var(--navy); font-weight: 600; }
.persona .resp::before { content: "→ "; color: var(--cyan); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border-radius: var(--r-sm); padding: 7px 14px; font-size: 13.5px; font-weight: 700;
  background: var(--sky); color: var(--navy); text-decoration: none;
}
.chip.violet { background: var(--lavender); color: var(--violet); }
.confirm {
  display: inline-block; border-radius: var(--r-sm); padding: 1px 8px; margin-left: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; vertical-align: middle;
  background: var(--peach); color: #8a5a14;
}

/* ---------- FAQ ---------- */
.faq details {
  border-radius: var(--r-lg); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gridline); margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 700; color: var(--navy); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--cyan); font-weight: 400; font-size: 22px; transition: transform var(--dur-ui) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 20px; color: var(--grey); font-size: 15px; line-height: 25px; }

/* ---------- Section furniture ---------- */
.sec-head { margin-bottom: 56px; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head h2 { margin-left: -0.03em; }
.hero:not(.melt) .display { margin-left: -0.035em; }
.sec-head p.lead { margin-top: 14px; max-width: 640px; font-size: 17px; line-height: 28px; color: var(--grey); }
.register-dark .sec-head p.lead, .register-deep .sec-head p.lead { color: rgba(255,255,255,.7); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; padding: 110px 0; }
.cta-band h2 { max-width: 18ch; margin: 0 auto 16px; }
.cta-band p { color: rgba(255,255,255,.7); max-width: 46ch; margin: 0 auto 32px; }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.65); padding: 70px 0 40px; font-size: 14px; }
footer .brandline { font-weight: 300; font-size: 22px; letter-spacing: -.5px; color: var(--white); margin: 14px 0 40px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 46px; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }
footer h4 { color: var(--white); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
footer a { color: rgba(255,255,255,.65); text-decoration: none; display: block; margin-bottom: 9px; }
footer a:hover { color: var(--cyan); }
footer .legal { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Reveal on scroll ---------- */
/* Visible is the default; only a JS-flagged document may hide content, because
   only JS can bring it back. Every page sets the flag in its head. */
.reveal { transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .reveal { opacity: .1; transform: translateY(16px); }
.reveal.in, .js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  header, header .bar, .mobile-menu, .nav-scrim { transition: none; }
  header.hide { transform: none; }
  .mobile-menu.open a { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .rise { opacity: 1; transform: none; animation: none; }
  .hero .wave, .hero .aurora, .flow-svg .particle, .flow-svg .box.izzi, .scroll-cue::after, .hero-foot .arrow, .flow-svg .path { animation: none; }
  .reveal { transform: none; }
  .flow-svg .particle { opacity: 0; }
}

/* type scale up for the atmosphere pass */
.display { font-size: clamp(38px, 5.6vw, 68px); letter-spacing: -1.6px; }
h2, .h2 { font-size: clamp(28px, 3.8vw, 44px); }

/* accent shimmer — a slow light sweep inside the brand line */
.hero .display .u, .footer-shimmer {
  /* shimmer now lives on the underlined emphasis */
}
@keyframes shimmer { 0% { background-position: 110% 0; } 55% { background-position: -10% 0; } 100% { background-position: -10% 0; } }

/* floating stat band — cards break the hero seam */
.stats-float { position: relative; z-index: 5; margin-top: -58px; }
section.seam { overflow: visible; }
.stat { position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.stat:hover { transform: translateY(-4px); }

/* cursor spotlight — cards answer to the pointer */
.card, .stat { position: relative; }
.card::after, .stat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .35s var(--ease); pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(31,141,197,.16), transparent 65%);
}
.card.violet::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(110,89,224,.18), transparent 65%); }
.card:hover::after, .stat:hover::after { opacity: 1; }

/* flagship card — the one lit element in the solutions view */
.card.flagship {
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(31,141,197,.12), transparent 55%),
    var(--white);
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.35);
}

.stats-light .stat { background: var(--white); box-shadow: inset 0 0 0 1px var(--gridline), 0 18px 50px -24px rgba(26,35,77,.35); }
.stats-light .stat .num { color: var(--navy); }
.stats-light .stat .lbl { color: var(--grey); }
.stats-light .stat.lit {
  background: radial-gradient(120% 90% at 50% 110%, rgba(31,141,197,.14), transparent 60%), var(--white);
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.4), 0 18px 50px -20px rgba(31,141,197,.45);
}

/* marching capital paths — the channel is always moving */
.flow-svg .path { stroke-dasharray: 3 6; animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -9; } }

/* CTA band v2 — cinematic close */
.cta-band {
  background:
    radial-gradient(60% 90% at 20% 110%, rgba(31,141,197,.22), transparent 60%),
    radial-gradient(50% 80% at 85% -10%, rgba(110,89,224,.16), transparent 60%),
    var(--navy);
}
.cta-band h2 { font-size: clamp(32px, 4.8vw, 56px); font-weight: 300; letter-spacing: -1.2px; }
.cta-band h2 b { font-weight: 800; }

/* footer — brand line as the closing statement */
footer { border-top: 1px solid rgba(31,141,197,.22); position: relative; }
footer::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 340px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,141,197,.8), transparent);
}
footer .brandline { font-size: clamp(24px, 3vw, 34px); letter-spacing: -1px; }
footer .brandline .accent { color: var(--cyan); }


/* ---------- Editorial article ---------- */
.article { max-width: 720px; margin: 0; }
.article p { font-size: 17.5px; line-height: 31px; color: #333c56; margin-bottom: 22px; }
.article h3 { color: var(--navy); font-size: 24px; line-height: 32px; margin: 36px 0 14px; }
.article p:first-of-type { font-size: 20px; line-height: 34px; color: var(--navy); font-weight: 600; }

/* ---------- IZZI product theatre ---------- */
.theatre { perspective: 1400px; }
.theatre .ui {
  border-radius: var(--r-xl); background: #fff; overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(26,35,77,.5), 0 0 0 1px var(--gridline);
  transform: rotateX(9deg); transform-origin: 50% 100%;
  transition: transform .2s linear; will-change: transform;
}
.ui-top {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: #F7F9FC; border-bottom: 1px solid var(--gridline);
}
.ui-top .dot { width: 10px; height: 10px; border-radius: 50%; }
.ui-top .dot.r { background: #f16a5d; } .ui-top .dot.y { background: #f5bf4f; } .ui-top .dot.g { background: #59c26f; }
.ui-top .ui-url { margin-left: 12px; font-size: 12.5px; color: var(--grey); font-weight: 600; }
.ui-body { display: grid; grid-template-columns: 200px 1fr; min-height: 480px; }
.ui-side { background: var(--lavender); padding: 20px 0; }
.ui-side .brand { font-weight: 800; color: var(--navy); padding: 0 20px 16px; font-size: 17px; }
.ui-side a { display: block; padding: 9px 20px; font-size: 13.5px; font-weight: 600; color: var(--grey); text-decoration: none; }
.ui-side a.on { color: var(--navy); background: rgba(255,255,255,.7); border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.ui-side a.af { color: var(--violet); }
.ui-main { padding: 22px; display: grid; gap: 18px; align-content: start; }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ui-kpi { border-radius: var(--r-lg); padding: 16px 18px; background: #F7F9FC; box-shadow: inset 0 0 0 1px var(--gridline); }
.ui-kpi.active { background: radial-gradient(120% 90% at 50% 110%, rgba(31,141,197,.14), transparent 60%), #fff; box-shadow: inset 0 0 0 1px rgba(31,141,197,.4); }
.ui-kpi.af { background: radial-gradient(120% 90% at 50% 110%, rgba(110,89,224,.14), transparent 60%), #fff; box-shadow: inset 0 0 0 1px rgba(110,89,224,.4); }
.ui-kpi .v { font-weight: 300; font-size: 26px; letter-spacing: -.5px; color: var(--navy); }
.ui-kpi .l { font-size: 11.5px; color: var(--grey); font-weight: 700; margin-top: 2px; }
.ui-kpi .d { font-size: 11.5px; font-weight: 700; color: #1d9e6c; margin-top: 4px; }
.ui-kpi.af .d { color: var(--violet); }
.ui-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 6px 4px 0; border-bottom: 1px solid var(--gridline); }
.ui-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--navy); opacity: .9; }
.ui-chart i.c { background: var(--cyan); }
.ui-chart i.v { background: var(--violet); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-table th { text-align: left; color: var(--grey); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--gridline); }
.ui-table td { padding: 10px; border-bottom: 1px solid #f0f2f7; color: #333c56; font-weight: 600; }
.ui-bar { height: 6px; border-radius: 3px; background: #EDF0F6; position: relative; min-width: 90px; }
.ui-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--cyan); }
.pill { display: inline-block; border-radius: var(--r-pill); padding: 3px 10px; font-size: 11px; font-weight: 800; }
.pill.ok { background: var(--mint); color: #187a52; }
.pill.rv { background: var(--lavender); color: var(--violet); }
@media (max-width: 860px) { .ui-body { grid-template-columns: 1fr; } .ui-side { display: none; } .ui-kpis { grid-template-columns: 1fr; } }

/* ---------- App-like page transitions (progressive) ---------- */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ---------- Split panels (image + text) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.split img { width: 100%; height: auto; border-radius: var(--r-xl); display: block; box-shadow: 0 30px 70px -30px rgba(26,35,77,.4); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Full-width image panel ---------- */
.img-panel { border-radius: var(--r-xl); overflow: hidden; margin-top: 44px; box-shadow: 0 30px 70px -30px rgba(4,7,26,.6); }
.img-panel img { width: 100%; display: block; }

/* ---------- Dark-register cards ---------- */
.register-dark .card.dark-card { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.register-dark .card.dark-card h3 { color: #fff; }
.register-dark .card.dark-card p { color: rgba(255,255,255,.7); }

/* ---------- Persona benefit bullets ---------- */
.persona ul { margin: 12px 0 0 18px; color: var(--grey); font-size: 14px; line-height: 25px; }


/* ============ MEGA MENU ============ */
.nav-item { position: static; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.caret { font-size: 10px; opacity: .6; transition: transform var(--dur-ui) var(--ease); }
.nav-item:hover .caret, .nav-item.open .caret { transform: rotate(180deg); }

.mega {
  /* A module that hangs under the bar, not a full-width slab fused to it.
     Matched to the bar's own measure and rounded on all four corners, with a
     gap above so the pill reads as a separate object. */
  position: absolute; z-index: 60;
  top: calc(var(--bar-h) + var(--bar-float) + 10px);
  left: max(0px, calc((100% - var(--maxw)) / 2));
  right: max(0px, calc((100% - var(--maxw)) / 2));
  background: #fff; border-radius: var(--r-2xl);
  box-shadow: 0 50px 100px -30px rgba(10,16,44,.45), 0 1px 0 rgba(26,35,77,.06) inset;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-item:hover .mega, .nav-item.open .mega, .nav-item:focus-within .mega {
  opacity: 1; visibility: visible; transform: none;
}
header:has(.nav-item:hover), header:has(.nav-item.open), header:has(.nav-item:focus-within) {
  background: rgba(26,35,77,.97);
}

.mega-grid { display: grid; grid-template-columns: 1.05fr 1.05fr 1.2fr; gap: 36px; padding: 34px 24px 38px; }
.mega-grid.plat { grid-template-columns: 1fr 1fr 1fr; }
.mega-h {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; padding-left: 12px;
}
.m-link { display: block; padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-ui) var(--ease); }
.m-link:hover { background: var(--sky); }
.m-link .t { display: block; font-weight: 700; font-size: 14.5px; color: var(--navy); }
.m-link .d { display: block; font-size: 12.5px; color: var(--grey); margin-top: 1px; }
.mega-quiet { margin-top: 14px; padding-left: 12px; display: grid; gap: 6px; }
.mega-quiet a { font-size: 13px; font-weight: 600; color: var(--grey); text-decoration: none; }
.mega-quiet a:hover { color: var(--cyan); }

.mega-feature {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  border-radius: var(--r-lg); padding: 22px; min-height: 240px; text-decoration: none;
  background-size: cover; background-position: center 25%;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.mega-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -20px rgba(31,141,197,.5); }
.mega-feature .k { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
.mega-feature .t { font-weight: 800; font-size: 21px; color: #fff; }
.mega-feature .d { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 20px; }
.mega-feature .go { margin-top: 8px; font-weight: 700; font-size: 13.5px; color: var(--cyan); }

.m-card {
  display: block; border-radius: var(--r-lg); padding: 20px; text-decoration: none;
  background: #F7F9FC; box-shadow: inset 0 0 0 1px var(--gridline);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.m-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(31,141,197,.4), 0 16px 40px -16px rgba(31,141,197,.35); }
.m-card.af:hover { box-shadow: inset 0 0 0 1px rgba(110,89,224,.45), 0 16px 40px -16px rgba(110,89,224,.4); }
.m-card .k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); }
.m-card.af .k { color: var(--violet); }
.m-card .t { display: block; font-weight: 800; font-size: 19px; color: var(--navy); margin: 6px 0 4px; }
.m-card .d { display: block; font-size: 13px; color: var(--grey); line-height: 20px; }
.mega-kpis { grid-column: 1 / -1; display: flex; align-items: center; gap: 34px; padding: 18px 12px 0; border-top: 1px solid var(--gridline); }
.mega-kpis b { font-weight: 300; font-size: 24px; letter-spacing: -.5px; color: var(--navy); display: block; }
.mega-kpis i { font-style: normal; font-size: 11.5px; color: var(--grey); font-weight: 700; }
.mega-kpis .chip { margin-left: auto; }

/* ============ Mobile menu ============ */
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 1px; transition: transform var(--dur-ui) var(--ease); }
.nav-burger.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* The drawer stays in the DOM so it can animate; [hidden] only removes it from
   the a11y tree once it is closed. JS drives .open. */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(86vw, 380px);
  background: linear-gradient(180deg, #0E1530 0%, #1A234D 100%);
  padding: 96px 26px 34px;
  box-shadow: -40px 0 90px -30px rgba(4,7,26,.75);
  display: grid; gap: 4px; align-content: start;
  transform: translateX(100%);
  transition: transform .42s var(--ease-out-expo);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.open { transform: none; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; padding: 13px 4px; }
.mobile-menu a:not(.btn) { border-bottom: 1px solid rgba(255,255,255,.08); }
/* Staggered entrance for the links, so the drawer feels built rather than dumped. */
.mobile-menu.open a { animation: drawer-in .42s var(--ease-out-expo) both; }
.mobile-menu.open a:nth-child(1){animation-delay:.04s} .mobile-menu.open a:nth-child(2){animation-delay:.08s}
.mobile-menu.open a:nth-child(3){animation-delay:.12s} .mobile-menu.open a:nth-child(4){animation-delay:.16s}
.mobile-menu.open a:nth-child(5){animation-delay:.20s} .mobile-menu.open a:nth-child(6){animation-delay:.24s}
.mobile-menu.open a:nth-child(7){animation-delay:.28s} .mobile-menu.open a:nth-child(8){animation-delay:.32s}
@keyframes drawer-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* Scrim: dismisses on tap, and stops the page scrolling behind the drawer. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 55; border: 0; padding: 0;
  background: rgba(4,7,26,.55); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .34s var(--ease);
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
body.nav-locked { overflow: hidden; }
/* The bar rides above the drawer while it is open, so the close X stays visible
   and tappable. The drawer's 96px top padding is what clears it. */
body.nav-locked header { z-index: 80; background: transparent; backdrop-filter: none; box-shadow: none; }
.mobile-menu .btn { text-align: center; }
@media (max-width: 860px) {
  .nav-burger { display: block; }
  .nav-item, nav.primary > a:not(.btn) { display: none; }
  nav.primary .btn { display: inline-block; }
}

.mega-grid.plat4 { grid-template-columns: 1fr 1fr 1fr 1.15fr; }
.mega-grid.plat4 .mega-feature { min-height: 200px; }
@media (max-width: 1020px) { .mega-grid, .mega-grid.plat4 { grid-template-columns: 1fr 1fr; } }


/* ---------- Solution finder (the bar now works) ---------- */
.hero-bar input.q {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: 600 15.5px/1.4 var(--font); color: var(--navy);
}
.hero-bar input.q::placeholder { color: var(--grey); font-weight: 600; }
.hero-bar .chip { border: 0; cursor: pointer; font: 700 13.5px var(--font); }
.bar-result { max-width: 720px; margin: 14px auto 0; }
.bar-result[hidden] { display: none; }
.br-label { display: block; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); margin: 0 0 6px 24px; }
.br-link {
  display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none;
  background: #fff; border-radius: var(--r-lg); padding: 16px 22px;
  box-shadow: 0 24px 60px -24px rgba(10,16,44,.5), inset 0 0 0 1px rgba(31,141,197,.35);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.br-link:hover { transform: translateY(-2px); box-shadow: 0 28px 66px -24px rgba(31,141,197,.55), inset 0 0 0 1px rgba(31,141,197,.55); }
.br-link b { color: var(--navy); font-size: 16px; white-space: nowrap; }
.br-link i { font-style: normal; color: var(--grey); font-size: 13.5px; flex: 1; }
.br-link .go { color: var(--cyan); font-weight: 800; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) { .br-link i { display: none; } }


/* ---------- Team (leadership on navy) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1020px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  border-radius: var(--r-lg); overflow: hidden;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(31,141,197,.45), 0 18px 44px -18px rgba(31,141,197,.4); }
.team-card img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; display: block; filter: saturate(.92); }
.tc-body { padding: 14px 16px 16px; }
.tc-body b { display: block; color: #fff; font-size: 15.5px; }
.tc-body i { font-style: normal; display: block; color: rgba(255,255,255,.62); font-size: 12.5px; margin-top: 2px; }


/* ---------- Audience router — the hero answers "which one am I?" ---------- */
.router {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 960px; margin: 34px auto 0; text-align: left;
}
@media (max-width: 860px) { .router { grid-template-columns: 1fr; max-width: 460px; } }
.route-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: rgba(255,255,255,.94); border-radius: var(--r-lg); padding: 20px 22px;
  box-shadow: 0 24px 60px -28px rgba(10,16,44,.45), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.route-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -28px rgba(31,141,197,.5), inset 0 0 0 1px rgba(31,141,197,.5);
}
.route-card .r-role {
  font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan);
}
.route-card b { color: var(--navy); font-size: 15.5px; line-height: 22px; font-weight: 700; }
.route-card .r-go { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--grey); transition: color var(--dur-ui) var(--ease); }
.route-card:hover .r-go { color: var(--cyan); }
.router-alt { margin: 22px auto 0; font-size: 14px; color: var(--grey); font-weight: 600; }
.router-alt a { color: var(--navy); font-weight: 700; text-decoration: none; }
.router-alt a:hover { color: var(--cyan); }


/* ---------- Testimonial card (proof, not decoration) ---------- */
.quote-card {
  max-width: 780px; margin: 0 auto; text-align: center; padding: 8px 20px;
}
.quote-card .qmark { margin-bottom: 18px; }
.quote-card p {
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1.42; font-weight: 600;
  color: var(--navy); letter-spacing: -.3px;
}
.qc-attr { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.qc-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy), #23407c); color: #fff;
  font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.qc-attr b { display: block; color: var(--navy); font-size: 15px; }
.qc-attr i { font-style: normal; display: block; color: var(--grey); font-size: 13px; margin-top: 1px; }


/* ---------- Homepage "shift" section — split with supporting image ---------- */
.shift-split.split { align-items: center; }
.shift-list { display: grid; gap: 26px; }
.shift-item { display: flex; gap: 18px; align-items: flex-start; }
.shift-item .si-num { font-weight: 300; font-size: 30px; letter-spacing: -1px; color: var(--cyan); line-height: 1.3; flex: none; width: 44px; }
.shift-item.violet .si-num { color: var(--violet); }
.shift-item h3 { color: var(--navy); font-size: 18px; margin-bottom: 4px; }
.shift-item p { color: var(--grey); font-size: 14.5px; line-height: 23px; }


/* ---------- Team card as button + bio modal ---------- */
.team-card {
  font: inherit; text-align: left; color: inherit; cursor: pointer; border: 0; padding: 0;
  display: block; width: 100%;
}
.team-card .tc-more {
  display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--cyan);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.team-card:hover .tc-more, .team-card:focus-visible .tc-more { opacity: 1; transform: none; }
.team-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,141,197,.5); border-radius: var(--r-lg); }

.bio-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.bio-modal[hidden] { display: none; }
.bio-modal-backdrop {
  position: absolute; inset: 0; background: rgba(4,7,26,.72); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.bio-modal.in .bio-modal-backdrop { opacity: 1; }
.bio-modal-panel {
  position: relative; z-index: 1; width: min(640px, 100%); max-height: 84vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-2xl); box-shadow: 0 60px 120px -30px rgba(4,7,26,.6);
  display: grid; grid-template-columns: 180px 1fr;
  opacity: 0; transform: translateY(18px); transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.bio-modal.in .bio-modal-panel { opacity: 1; transform: none; }
.bio-modal-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-modal-body { padding: 30px 30px 30px 26px; }
.bio-modal-body b { display: block; color: var(--navy); font-size: 21px; font-weight: 800; }
.bio-modal-body i { display: block; font-style: normal; color: var(--cyan); font-weight: 700; font-size: 13px; margin: 4px 0 16px; }
.bio-modal-body p { color: var(--grey); font-size: 14.5px; line-height: 24px; }
.bio-modal-body .chip { display: inline-block; margin-top: 18px; }
.bio-modal-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: #F7F9FC; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background var(--dur-ui) var(--ease);
}
.bio-modal-close:hover { background: var(--sky); }
@media (max-width: 560px) {
  .bio-modal-panel { grid-template-columns: 1fr; }
  .bio-modal-panel img { max-height: 200px; }
}


/* ---------- Ask yourself — pain-first discovery strip ---------- */
.ask-yourself { padding: 40px 0 32px; }
.ask-yourself .aq-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.5); display: block; margin-bottom: 16px; text-align: center;
}
.aq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .aq-grid { grid-template-columns: 1fr; } }
.aq-item {
  border-radius: var(--r-lg); padding: 18px 20px; text-align: center;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,.88); line-height: 22px;
}
.aq-item::before { content: "— "; color: var(--cyan); font-weight: 800; }


/* ================================================================
   HOME 2026 · award pass
   Scoped to body.home except for the shared a11y + polish block.
   ================================================================ */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Shared: skip link ---------- */
.skip-link {
  position: absolute; left: 50%; top: -72px; transform: translateX(-50%); z-index: 300;
  background: #fff; color: var(--navy); font: 800 14px/1 var(--font);
  padding: 14px 22px; border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none; transition: top .22s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Shared: one visible focus ring everywhere ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 5px;
}
:where(.register-dark, .register-deep, header, footer) :where(a, button):focus-visible {
  outline-color: #7FD2FF;
}

/* (The old .home-scoped no-JS fallback lived here. Every page now sets the js
   flag in its head, so the base .reveal rules above cover the whole site.) */

/* QA still-frame: ?flat freezes every entrance at its end state */
.flat .reveal, .flat .rise, .flat .display .line > span {
  opacity: 1 !important; transform: none !important; animation: none !important;
}
/* QA still-frame: pins the hero so a full-page capture keeps its real proportions */
.flat .hero.melt { min-height: 860px; }
.flat .hero .wrap { opacity: 1 !important; transform: none !important; }

/* ---------- Shared: card tilt is a whisper, not a wobble ---------- */
.card { transition: transform .35s var(--ease-soft), box-shadow var(--dur-ui) var(--ease); }

/* ================================================================
   HERO
   ================================================================ */

.home .hero.melt {
  padding: 124px 0 128px;
  /* Anchored in pixels, not percentages: the headline and the sub keep the dark
     register at every hero height, and the melt always breaks at the same place.
     --melt-y is that break point. It has to sit below the claim block, so it moves
     down as the hero grows taller at narrow widths. */
  /* Percentage, not pixels. The old fixed anchor was tuned for a ~700px hero and
     went stale the moment the hero grew: the light ramp climbed into the copy. */
  --melt-y: 106%;
  background:
    radial-gradient(190% 58% at 50% var(--melt-y),
      #ffffff 0%, #ffffff 26%, #eef6fc 38%, #bcdaf0 50%, #5f9fd0 62%,
      rgba(35,64,124,.35) 74%, rgba(26,35,77,0) 86%),
    linear-gradient(180deg, #04071a 0%, #0E1530 34%, #1A234D 70%, #23407c 100%);
}
/* the headline needs more room than the body grid gives it */
.home .hero .wrap { max-width: 1260px; }

/* Display type: bigger, tighter, and it arrives line by line */
.home .hero.melt .display {
  max-width: none;
  /* Sized for the pain-first headline, which runs far longer than the brand
     anchor it replaced. 84px orphaned the last word at every desktop width. */
  /* Capped so the longest line ("Your balance sheet isn't.") stays on one line
     inside the left column. Above this it wraps and breaks the line mask. */
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: .99;
  letter-spacing: -.038em;
  font-weight: 300;
}
/* The mask has to clear the descenders. The accent line is weight 800, whose g
   drops deeper than the 300 above it, so .2em shaved it flat. Keep this slack
   below the line-up offset or the mask stops hiding the line before it lands. */
.display .line { display: block; overflow: hidden; padding-bottom: .36em; margin-bottom: -.36em; }
/* The offset lives in the keyframe, not on the element: if the animation never
   runs, the headline still reads. */
.js .display .line > span { display: block; animation: line-up 1.05s var(--ease-out-expo) both; }
.js .display .line:nth-child(1) > span { animation-delay: .08s; }
.js .display .line:nth-child(2) > span { animation-delay: .20s; }
.js .display .line:nth-child(3) > span { animation-delay: .32s; }
.js .display .line:nth-child(4) > span { animation-delay: .44s; }
@keyframes line-up { from { transform: translateY(160%); } to { transform: none; } }

/* The brand phrase carries a slow light sweep */
.home .hero.melt .display .accent {
  font-weight: 800;
  background: linear-gradient(100deg, #2FA5DC 0%, #7FD9FF 27%, #9C8CFF 50%, #2FA5DC 76%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* The gradient is the only thing painting these glyphs, so the background box
     has to reach below the baseline or the g's tail simply never gets drawn.
     This span is display:block, so its box stops at the line-height; the padding
     extends it and the negative margin keeps that out of the layout. */
  padding-bottom: .24em;
  margin-bottom: -.24em;
  animation: sweep 11s var(--ease) 1.9s infinite;
}
@keyframes sweep {
  0%, 10%  { background-position: 118% 0; }
  50%, 100% { background-position: -28% 0; }
}

/* The horizon: capital crossing the melt, where the dark hands over to the light */
.home .hero .horizon {
  position: relative; z-index: 2;
  margin: clamp(36px, 5.4vh, 60px) auto clamp(26px, 4vh, 44px);
  max-width: 680px;
}
.home .hero .hz {
  display: block; position: relative; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.30) 18%, rgba(255,255,255,.30) 82%, transparent);
}

.home .hero.melt .sub {
  /* The horizon rule used to space this; the headline now hands straight over. */
  margin: clamp(24px, 3.6vh, 38px) auto 0; max-width: 680px;
  font-weight: 400; font-size: 19px; line-height: 32px;
  color: rgba(255,255,255,.86);
}
/* the router keeps the body grid width so it lines up with the ledger below */
.home .hero .router, .home .hero .sub, .home .hero .router-alt { max-width: 1000px; }
.home .hero .sub { max-width: 680px; }

/* Route cards: taller, quieter at rest, decisive on hover */
.home .router { gap: 16px; margin-top: 40px; }
.home .route-card {
  padding: 24px 24px 22px; gap: 8px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.97);
  box-shadow: 0 26px 64px -30px rgba(10,16,44,.5), inset 0 0 0 1px rgba(26,35,77,.07);
  overflow: hidden;
}
.home .route-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease-out-expo);
}
.home .route-card { position: relative; }
.home .route-card:hover::before, .home .route-card:focus-visible::before { transform: none; }
.home .route-card b { font-size: 16.5px; line-height: 24px; }
.home .route-card .r-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--navy);
}
.home .route-card .r-go::after {
  content: "→"; display: inline-block; color: var(--cyan);
  transition: transform .4s var(--ease-out-expo);
}
.home .route-card:hover .r-go::after { transform: translateX(5px); }

/* ================================================================
   THE LEDGER · one slab of proof, breaking the hero seam
   ================================================================ */

.ledger-sec { padding: 0 0 clamp(80px, 8vw, 110px); background: #fff; overflow: visible; }
.ledger {
  position: relative; z-index: 5; margin-top: clamp(-72px, -6vw, -44px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 40px 90px -38px rgba(26,35,77,.45), inset 0 0 0 1px var(--gridline);
}
.ledger::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 1.5s var(--ease-out-expo) .25s;
}
.ledger.in::before, .flat .ledger::before { width: 100%; }
.ledger .lg { padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 34px); position: relative; }
.ledger .lg + .lg::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: var(--gridline);
}
.ledger .num {
  font-weight: 300; font-size: clamp(38px, 4.6vw, 60px);
  letter-spacing: -.035em; line-height: 1; color: var(--navy);
}
.ledger .lbl {
  margin-top: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.9px;
  text-transform: uppercase; color: var(--grey);
}
@media (max-width: 860px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger .lg:nth-child(3)::before, .ledger .lg:nth-child(2n+1)::before { display: none; }
  .ledger .lg:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--gridline); }
}

/* ================================================================
   SECTION HEADINGS · light display type, bold on the payload word
   ================================================================ */

.home .sec-head h2, .home .split h2 {
  font-weight: 300;
  font-size: clamp(30px, 4.7vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.home .sec-head h2 b, .home .split h2 b { font-weight: 800; }
.home .sec-head .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.home .sec-head .eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; opacity: .55;
}
.home .sec-head p.lead { font-size: 18px; line-height: 30px; }

/* ================================================================
   SOLUTIONS FILMSTRIP · five panels, one opens
   ================================================================ */

.strip {
  display: flex; gap: 12px;
  height: clamp(400px, 44vw, 520px);
}
.sp {
  position: relative; display: block; flex: 1 1 0; min-width: 0;
  border-radius: var(--r-xl); overflow: hidden; text-decoration: none;
  background: var(--navy);
  transition: flex-grow .7s var(--ease-out-expo);
}
.sp.lead { flex-grow: 2.15; }
.strip:has(.sp:hover) .sp.lead:not(:hover),
.strip:has(.sp:focus-visible) .sp.lead:not(:focus-visible) { flex-grow: 1; }
.sp:hover, .sp:focus-visible { flex-grow: 2.15; }

.sp .ph {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 1.1s var(--ease-out-expo), filter .6s var(--ease);
  filter: saturate(.8);
}
.sp:hover .ph, .sp:focus-visible .ph { transform: scale(1); filter: saturate(1); }
.sp .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(10,16,44,.34) 0%, rgba(10,16,44,.66) 40%, rgba(6,10,32,.96) 86%);
  transition: background .6s var(--ease);
}
.sp:hover .scrim, .sp:focus-visible .scrim {
  background: linear-gradient(178deg, rgba(10,16,44,.26) 0%, rgba(12,22,62,.66) 42%, rgba(6,10,32,.97) 88%);
}
.sp .sp-body {
  position: absolute; inset: auto 0 0 0; padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.sp .k {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #7FD2FF;
}
.sp.violet .k { color: #C0B2FF; }
/* The card grows from flex 1 to 2.15, and .sp-body is bottom-anchored at full
   card width, so without a fixed measure the title re-wraps mid-animation and
   shoves everything above it. 13ch holds every title at exactly two lines at
   both widths, so the text never reflows and nothing jumps. */
.sp h3 { color: #fff; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.18; letter-spacing: -.02em;
  max-width: 13ch; min-height: 2.36em; }
.sp .d {
  color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 22px;
  /* Fixed measure for the same reason: it is mid-reveal while the card is still
     growing, so a percentage width would re-wrap in front of you. */
  width: 30ch; max-width: none;
  opacity: 0; max-height: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), max-height .7s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.sp .go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13.5px; color: #7FD2FF;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease) .06s, transform .5s var(--ease-out-expo) .06s;
}
.sp.violet .go { color: #C0B2FF; }
.sp:hover .d, .sp:focus-visible .d { opacity: 1; max-height: 90px; transform: none; }
.sp:hover .go, .sp:focus-visible .go { opacity: 1; transform: none; }
.sp .sp-rule {
  position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease-out-expo);
}
.sp:hover .sp-rule, .sp:focus-visible .sp-rule { transform: none; }

@media (max-width: 900px) {
  /* stacked: the photo takes the top of each panel and the copy flows beneath,
     so a longer hook lengthens the card instead of being clipped by it */
  .strip { flex-direction: column; height: auto; gap: 14px; }
  .sp, .sp.lead { flex: none; height: auto; }
  .sp .sp-body { position: relative; inset: auto; padding: 130px 22px 24px; }
  .sp .d { opacity: 1; max-height: none; transform: none; }
  .sp .go { opacity: 1; transform: none; }
  .sp .ph { transform: none; filter: saturate(.95); }
}

/* ================================================================
   AUDIENCES · photography carries the weight
   ================================================================ */

.aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .aud { grid-template-columns: 1fr; } }
.aud a {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  border-radius: var(--r-xl); height: clamp(330px, 33vw, 430px);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease);
}
.aud a:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(26,35,77,.5); }
.aud .ph {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 1.1s var(--ease-out-expo);
}
.aud a:hover .ph { transform: scale(1.07); }
.aud .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,44,.06) 26%, rgba(10,16,44,.58) 64%, rgba(8,12,36,.94) 100%);
}
.aud .body { position: absolute; inset: auto 0 0 0; padding: 28px 26px 26px; color: #fff; }
.aud .body h3 { color: #fff; font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }
.aud .body p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 23px; }
.aud .body .go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-weight: 800; font-size: 13.5px; color: #7FD2FF;
}
.aud .body .go::after { content: "→"; transition: transform .4s var(--ease-out-expo); }
.aud a:hover .body .go::after { transform: translateX(5px); }

/* ================================================================
   INSIGHTS · one feature, two follow-ons
   ================================================================ */

.ins { display: grid; grid-template-columns: 1.22fr 1fr; gap: 20px; align-items: stretch; }
.ins .feature { grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .ins { grid-template-columns: 1fr; }
  .ins .feature { grid-row: auto; }
}
.ins .feature {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  border-radius: var(--r-xl); min-height: 440px;
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease);
}
.ins .feature:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(26,35,77,.5); }
.ins .feature .ph {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 1.1s var(--ease-out-expo);
}
.ins .feature:hover .ph { transform: scale(1.06); }
.ins .feature .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,44,.20) 12%, rgba(10,16,44,.74) 52%, rgba(6,10,32,.96) 92%);
}
.ins .feature .body { position: absolute; inset: auto 0 0 0; padding: 32px 30px 30px; color: #fff; }
.ins .feature .k { color: #7FD2FF; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.ins .feature h3 {
  color: #fff; margin: 12px 0 0; font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.025em; max-width: 20ch;
}
.ins .feature .go { display: inline-block; margin-top: 16px; font-weight: 800; font-size: 13.5px; color: #7FD2FF; }

.ins .row {
  display: flex; gap: 22px; align-items: stretch; text-decoration: none;
  background: #fff; border-radius: var(--r-xl); padding: 16px;
  box-shadow: inset 0 0 0 1px var(--gridline);
  transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease);
  overflow: hidden;
}
.ins .row:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.4), 0 18px 44px -20px rgba(31,141,197,.4);
}
.ins .row .th {
  width: 168px; flex: none; align-self: stretch; min-height: 108px;
  border-radius: var(--r-md);
  background-size: cover; background-position: center;
}
.ins .row > span:last-child {
  display: flex; flex-direction: column; justify-content: center;
  padding-right: 10px;
}
.ins .row .k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan); }
.ins .row h3 { color: var(--navy); font-size: 17.5px; line-height: 25px; margin: 8px 0 0; letter-spacing: -.015em; }
@media (max-width: 480px) { .ins .row .th { width: 92px; height: 92px; } }

/* ================================================================
   TESTIMONIAL · scaled to the register it sits in
   ================================================================ */

.home .quote-card { max-width: 900px; }
.home .qc-attr { text-align: left; }
.home .quote-card blockquote { margin: 0; }
.home .quote-card p {
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.28; font-weight: 300;
  letter-spacing: -.03em; color: var(--navy);
}

/* ================================================================
   PLATFORM on the dark register
   ================================================================ */

.register-dark .card.dark-card { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.register-dark .card.dark-card:hover {
  box-shadow: inset 0 0 0 1px rgba(31,141,197,.5), 0 20px 50px -20px rgba(31,141,197,.4);
}
.register-dark .card.dark-card.violet:hover {
  box-shadow: inset 0 0 0 1px rgba(110,89,224,.55), 0 20px 50px -20px rgba(110,89,224,.45);
}
.register-dark .card.dark-card .k { color: #7FD2FF; }
.register-dark .card.dark-card.violet .k { color: #C0B2FF; }
.register-dark .card.dark-card .go { color: #7FD2FF; }
.register-dark .card.dark-card.violet .go { color: #C0B2FF; }
.register-dark .card.dark-card p { color: rgba(255,255,255,.72); }

/* ================================================================
   SCROLL PROGRESS · a hairline that tracks the read
   ================================================================ */

.progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  pointer-events: none;
}

/* ================================================================
   REDUCED MOTION · everything new settles at its end state
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* nothing waits to be scrolled into view */
  .js .reveal { opacity: 1; transform: none; }
  .js .display .line > span { transform: none; animation: none; }
  .home .hero.melt .display .accent { animation: none; background: none; color: #7FD2FF; }
  .ledger::before { transition: none; width: 100%; }
  .sp, .sp .ph, .sp .d, .sp .go, .sp .scrim, .sp .sp-rule,
  .aud a, .aud .ph, .ins .feature, .ins .feature .ph, .ins .row,
  .home .route-card, .home .route-card::before { transition: none; }
  .sp .d, .sp .go { opacity: 1; max-height: 90px; transform: none; }
  .progress { display: none; }
}

/* ================================================================
   SMALL SCREENS · header fit, type rag, touch targets
   ================================================================ */

nav.primary .btn { white-space: nowrap; }
.nav-burger { padding: 11px; }              /* 44px touch target */

@media (max-width: 560px) {
  nav.primary { gap: 12px; }
  nav.primary .btn { font-size: 14px; padding: 11px 18px; }
  /* Drive the shared bar height so the mega panel follows it. The drawer is a
     full-height slide-out now, so it must not be anchored under the bar. */
  header { --bar-h: 68px; }
}

@media (max-width: 420px) {
  /* keeps "Empowering Growth" whole instead of orphaning the first word */
  .home .hero.melt .display { font-size: 36px; }
}

/* Filmstrip at tablet width: the collapsed panels need a little more room */
@media (min-width: 901px) and (max-width: 1120px) {
  .strip { gap: 10px; }
  .sp.lead, .sp:hover, .sp:focus-visible { flex-grow: 1.8; }
  .sp .sp-body { padding: 22px 18px 24px; }
  .sp h3 { font-size: 17.5px; }
}

/* Filmstrip on a coarse pointer: there is no hover to open a panel, so every
   panel is open by default — flagship full width, the rest two up. */
@media (hover: none) and (min-width: 901px) {
  .strip { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; gap: 14px; }
  .sp, .sp.lead { flex: none; height: auto; }
  .sp.lead { grid-column: 1 / -1; }
  .sp .sp-body { position: relative; inset: auto; padding: 150px 24px 26px; }
  .sp .d { opacity: 1; max-height: none; transform: none; }
  .sp .go { opacity: 1; transform: none; }
  .sp .sp-rule { transform: none; }
}

/* ================================================================
   CONTRAST · brand cyan at small sizes
   #1F8DC5 is 3.7:1 on white and 4.3:1 on navy, so small cyan text
   missed AA on both registers. Same hue (201deg), two values:
   darker for light grounds, lighter for dark ones.
   ================================================================ */

:root { --cyan-ink: #14709F; --cyan-lit: #7FD2FF; }

:where(.register-light, .register-pastel, .on-light) .eyebrow { color: var(--cyan-ink); }
:where(.register-dark, .register-deep) .eyebrow { color: var(--cyan-lit); }

.card .k, .card .go,
.m-card .k, .mega-h,
.ins .row .k,
.route-card .r-role,
.br-link .go,
.team-card .tc-more { color: var(--cyan-ink); }

.quiet-row a:hover, .mega-quiet a:hover, .router-alt a:hover, .persona .resp::before { color: var(--cyan-ink); }

/* dark registers keep the lighter value */
.register-dark .card .k, .register-dark .card .go,
.register-deep .card .k, .register-deep .card .go { color: var(--cyan-lit); }
.register-dark .card.violet .k, .register-dark .card.violet .go { color: #C0B2FF; }

/* Responsive-image baseline: a width/height attribute describes the intrinsic
   size for CLS, it must never fight a CSS width and stretch the picture. */
img { max-width: 100%; height: auto; }




/* The hero grows as the headline and sub wrap, so the melt break follows it down.
   Without this the white core lands on the panel and swallows it. */

/* ================================================================
   HOME HERO 2026 · one promise
   A hero has three jobs: say where you are, make one promise that
   matters, offer one way in. Anything else competes for the same
   three seconds, so the mechanism lives further down the page.
   ================================================================ */

.home .hero.melt { text-align: left; padding: 132px 0 56px; }
.home .hero .wrap { max-width: 1260px; }

/* The statement takes a column and leaves the rest as air. */
.home .hero.melt .display {
  margin: 0; text-align: left;
  /* ch scales with font-size, so this holds the longest line ("balance sheet
     allows.") on one line at every step of the clamp. 17ch wrapped it. */
  max-width: 23ch;
  font-size: clamp(34px, 4.9vw, 68px);
  line-height: .99;
  letter-spacing: -.035em;
  font-weight: 300;
}
.home .hero.melt .sub {
  margin: clamp(26px, 3.6vh, 40px) 0 0;
  max-width: 44ch; text-align: left;
  font-size: 19px; line-height: 32px; font-weight: 400;
  color: rgba(255,255,255,.82);
}
.home .router { margin-top: clamp(54px, 7vh, 92px); }
.home .router-alt { text-align: left; }

@media (max-width: 620px) {
  .home .hero.melt { padding-top: 116px; }
  .home .hero.melt .display { max-width: none; }
}


/* ================================================================
   HOME HERO · full-bleed channel sequence
   Three shots of the same journey, cross-fading with a slow drift.
   CSS-only and staggered by delay, so it survives a JS failure and
   costs nothing on the main thread.
   ================================================================ */

.home .hero.has-media .wave { display: none; }   /* the photo replaces the texture */

.home .hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.home .hero-media .shot {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 55%;
  opacity: 0; will-change: opacity, transform;
  animation: shot-cycle 27s var(--ease) infinite;
}
.home .hero-media .shot:nth-child(1) { animation-delay: 0s; }
.home .hero-media .shot:nth-child(2) { animation-delay: 9s; }
.home .hero-media .shot:nth-child(3) { animation-delay: 18s; }

@keyframes shot-cycle {
  0%   { opacity: 0; transform: scale(1.03); }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; transform: scale(1.11); }
  100% { opacity: 0; transform: scale(1.11); }
}

/* The scrim. Type legibility is not negotiable, so the photo sits under a
   graded wash that is heaviest exactly where the headline sits. */
.home .hero.has-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,7,26,.94) 0%, rgba(4,7,26,.82) 34%, rgba(4,7,26,.42) 62%, rgba(4,7,26,.28) 100%),
    linear-gradient(180deg, rgba(4,7,26,.72) 0%, rgba(4,7,26,.30) 32%, rgba(10,16,44,.35) 100%);
}
.home .hero.has-media .wrap { z-index: 3; }
.home .hero.has-media .aurora { z-index: 2; opacity: .22; }

/* One still frame, no motion, for anyone who asked for that. */
@media (prefers-reduced-motion: reduce) {
  .home .hero-media .shot { animation: none; opacity: 0; transform: none; }
  .home .hero-media .shot:nth-child(1) { opacity: 1; }
}
/* Same for the QA still-frame mode. */
.flat .home .hero-media .shot, .flat .hero-media .shot { animation: none; opacity: 0; }
.flat .hero-media .shot:nth-child(1) { opacity: 1; }

/* With a photograph the melt is the wrong device: fading to white washes the
   image out at exactly the point it should be strongest. The hero now ends
   dark and the white ledger card steps onto it instead. */
/* The photo hands over to white at the base so the hero pours into the light
   strip below instead of ending on a hard edge. This is a real element, not a
   pseudo: the hero also carries .grain, whose ::after owns the same pseudo and
   quietly merged its opacity .05, overlay blend and bottom mask into the fade,
   which is why a computed-correct gradient painted as nothing. */
.home .hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 42%,
    rgba(255,255,255,.92) 72%, #fff 100%);
  z-index: 2; pointer-events: none;
}
/* Just enough room under the last line for the ledger card to straddle the
   seam. More than this and the hero leaves a dead dark band with a white card
   floating in it, which reads as a mistake rather than a device. */
.home .hero.has-media { padding-bottom: 56px; }

/* Anything sitting over the photo has to be light. */
/* The closing line sits inside the white fade now, so it reads dark. */
.home .hero.has-media .router-alt { color: var(--grey); }
.home .hero.has-media .router-alt a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.home .hero.has-media .router-alt a:hover { color: var(--cyan); }

/* The hero was 810px (90vh) around 748px of content, and align-items:flex-start
   dumped every spare pixel underneath the route cards. Let the content set the
   height instead. */
.home .hero.has-media { min-height: auto; padding-bottom: 76px; }
/* And stop the ledger card straddling the seam on the photo hero: the overlap
   is what produced the dark band either side of it. It now sits in the light. */
.home .hero.has-media + .ledger-sec .ledger { margin-top: 0; }
.home .hero.has-media + .ledger-sec { padding-top: 64px; }


/* ================================================================
   GOLF · sponsorship page
   Bible rules: athlete imagery full-bleed, navy field, cyan accent,
   #WeFi hashtags. The Instagram grid renders official embeds from
   assets/golf-posts.json; until posts are added it holds the frame
   with branded tiles.
   ================================================================ */
.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 860px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.ig-tile {
  aspect-ratio: 4/5; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(31,141,197,.5), transparent 55%),
    radial-gradient(120% 120% at 85% 90%, rgba(110,89,224,.35), transparent 55%),
    linear-gradient(160deg, #0E1530, #1A234D);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  display: flex; align-items: flex-end; padding: 18px;
}
.ig-tile span {
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.ig-tile.ph2 { background:
  radial-gradient(120% 120% at 50% 0%, rgba(37,125,86,.55), transparent 60%),
  linear-gradient(160deg, #0E1530, #142a1f); }   /* Masters green, per the bible */
.ig-grid .ig-embed { border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.ig-grid .ig-embed iframe, .ig-grid .ig-embed blockquote { margin: 0 !important; }
.ig-follow{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:14px; font-weight:700; color:var(--cyan); text-decoration:none;
}
.ig-follow:hover{ text-decoration:underline; }
.ig-note { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.45); font-weight: 600; }
.ig-note code { font-family: ui-monospace, monospace; font-size: 11.5px; color: rgba(255,255,255,.6); }

/* ================================================================
   PLATFORM OVERVIEW · the stack + awaiting-content slots
   ================================================================ */
.stack { display: grid; gap: 10px; max-width: 780px; margin: 0 auto; }
.stack-layer {
  border-radius: var(--r-lg); padding: 20px 24px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.stack-layer.top {
  background: linear-gradient(120deg, rgba(31,141,197,.28), rgba(110,89,224,.2));
  box-shadow: inset 0 0 0 1px rgba(127,210,255,.35);
}
.stack-layer .sl-k {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 4px;
}
.stack-layer b { display: block; color: #fff; font-size: 18px; margin-bottom: 4px; }
.stack-layer .sl-d { font-size: 14.5px; line-height: 23px; color: rgba(255,255,255,.72); }

/* The gap, made loud on purpose: these slots exist to be pointed at on calls. */
.card.slot { border: 2px dashed rgba(31,141,197,.55); box-shadow: none; background: rgba(31,141,197,.04); }
.card.slot h3 { color: var(--navy); }
.slot-chip {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  background: #FFE9C7; color: #8a5a12;
}

/* ================================================================
   AI ECONOMY BAND · full-bleed statement
   Imagery does the talking. No stat grid here: the ledger above
   already carries the numbers, and repeating them read as filler.
   ================================================================ */
.ai-band { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 180px) 0; background: #060a18; }
.ai-band .ai-bg {
  position: absolute; inset: 0;
  background: url('img/ai-datacentre.jpg') center 45% / cover no-repeat;
  transform: scale(1.04);
}
/* Graded to brand: the source is electric blue, WeFi is navy into cyan. */
.ai-band .ai-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(6,10,24,.96) 0%, rgba(6,10,24,.88) 38%, rgba(10,16,44,.55) 72%, rgba(10,16,44,.4) 100%),
    linear-gradient(180deg, rgba(6,10,24,.75) 0%, rgba(6,10,24,.25) 40%, rgba(6,10,24,.85) 100%);
}
.ai-band .wrap { position: relative; z-index: 2; }
.ai-say { max-width: 46ch; }
.ai-say h2 { color: #fff; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.04; letter-spacing: -.032em; }
.ai-say h2 b { font-weight: 800; color: var(--cyan); }
.ai-say p { margin-top: 20px; font-size: 17px; line-height: 29px; color: rgba(255,255,255,.78); }
.ai-go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
  font-weight: 800; font-size: 14.5px; color: #7FD2FF; text-decoration: none;
}
.ai-go span { transition: transform var(--dur-ui) var(--ease); }
.ai-go:hover span { transform: translateX(4px); }
@media (max-width: 620px) { .ai-band .ai-bg { background-position: 62% 45%; } }

/* ---- Hero video -------------------------------------------------------
   Sits above the poster .shot, below .aurora / .hero-fade. It only ever
   appears once app.js has decided the visit should pay for it, so the
   default state is hidden and .playing is the opt-in. */
.home .hero-media .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;   /* matches .shot framing */
  opacity:0; transition:opacity .9s var(--ease);
  z-index:1; pointer-events:none;
}
.home .hero-media .hero-video.playing{ opacity:1; }
/* The live flow-field reads as clutter over footage, so it steps back when
   the video is actually running. Remove this rule to get it back at full. */
.has-hero-video .flowfield{ opacity:.28; }
@media (prefers-reduced-motion: reduce){
  .home .hero-media .hero-video{ display:none; }
}

/* ---- Hero video, extended + glass -------------------------------------
   Asked for 2026-09-15: run the footage further down the page, put the
   router cards on glass over it, and let the blocks arrive on scroll. */

/* The media box now bleeds past the hero's own box so the footage carries
   on behind the proof slab instead of stopping at a hard seam. */
.home .hero.has-media{ overflow:visible; }
.home .hero-media{ inset:0 0 -300px 0; border-radius:0; }

/* Less white veil: the old 42% swallowed most of the frame. */
.home .hero-fade{ height:24%; }
.home .hero.melt::after{ opacity:.55; }

/* The proof slab rides on the video rather than sitting on white. */
.home .hero.has-media + .ledger-sec{ background:transparent; position:relative; z-index:4; padding-top:40px; }
.home .hero.has-media + .ledger-sec .ledger{
  background:rgba(12,20,42,.38);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl); padding:30px 26px;
  box-shadow:0 34px 90px -40px rgba(4,10,28,.7);
}
.home .hero.has-media + .ledger-sec .num{ color:#fff; }
.home .hero.has-media + .ledger-sec .lbl{ color:rgba(255,255,255,.72); }

/* ---- Glass router cards ---- */
.home .hero.has-media .route-card{
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px -36px rgba(4,10,28,.75);
}
.home .hero.has-media .route-card b{ color:#fff; }
.home .hero.has-media .route-card .r-role{ color:#7FD2FF; }
.home .hero.has-media .route-card .r-go{ color:rgba(255,255,255,.82); }
.home .hero.has-media .route-card:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(127,210,255,.55);
  transform:translateY(-4px);
}
.home .hero.has-media .route-card, .home .hero.has-media .route-card::before{
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
/* Safari/Firefox without backdrop-filter would render near-invisible text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .home .hero.has-media .route-card{ background:rgba(10,18,40,.72); }
  .home .hero.has-media + .ledger-sec .ledger{ background:rgba(10,18,40,.78); }
}

/* ---- Blocks arrive on scroll ---- */
.home .hero.has-media .route-card[data-stagger]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.home .hero.has-media .route-card[data-stagger].in{ opacity:1; transform:none; }
.home .hero.has-media .route-card[data-stagger="2"]{ transition-delay:.10s; }
.home .hero.has-media .route-card[data-stagger="3"]{ transition-delay:.20s; }
@media (prefers-reduced-motion: reduce){
  .home .hero.has-media .route-card[data-stagger]{ opacity:1; transform:none; transition:none; }
}

/* ---- Hero stage -------------------------------------------------------
   Corrects 2026-09-15: the video used to live inside .hero, so .hero-fade
   (anchored to the hero's bottom) painted a white band straight across the
   middle of the footage, and the proof slab overhung the video's end.
   The stage wraps hero + proof so one backdrop covers both at any height. */
.hero-stage{ position:relative; isolation:isolate; }
.hero-stage > .hero-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.home .hero-stage > .hero-media{ inset:0; }          /* overrides the -300px hack */
.hero-stage > .hero,
.hero-stage > .ledger-sec{ position:relative; z-index:2; }

/* One dissolve, at the very bottom of the stage, below the proof slab. */
.hero-stage > .stage-fade{
  position:absolute; left:0; right:0; bottom:0; height:560px; z-index:1;
  pointer-events:none;
  /* Curved, not a flat band: an ellipse anchored bottom-centre so the white
     rises in an arc and the footage stays deeper at the left and right edges.
     This is the shape .hero.melt used to give before the stage took over. */
  background:
    radial-gradient(128% 118% at 50% 124%,
      #fff 0%,
      rgba(255,255,255,.97) 30%,
      rgba(255,255,255,.80) 47%,
      rgba(255,255,255,.42) 63%,
      rgba(255,255,255,.12) 76%,
      rgba(255,255,255,0) 88%);
}
/* The page below must still start on flat white, so seal the last 90px. */
.hero-stage > .stage-fade::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 78%);
}

/* The two veils that caused the band. Both were sized to a hero that no
   longer owns the background. */
.home .hero.has-media .hero-fade{ display:none; }
.home .hero.has-media.melt::after{ display:none; }

/* Keep the hero's own left-to-right darkening for headline legibility. */
.home .hero-stage > .hero.has-media::before{ z-index:1; }

/* The hero's own left-to-right darkening stopped dead at the hero's bottom
   edge, so the footage read as two different images either side of the seam.
   Promote it to the stage so one tint covers the whole backdrop. */
.home .hero-stage > .hero.has-media::before{ display:none; }
.hero-stage::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(4,10,28,.86) 0%,
    rgba(4,10,28,.72) 34%,
    rgba(4,10,28,.42) 62%,
    rgba(4,10,28,.30) 100%);
}

/* The real cause of the wash behind the router cards: .hero.melt paints its
   own 786px white radial gradient (the "melt" to white). That made sense when
   the hero owned its background; now the stage does, so it has to go or it
   bleaches the footage exactly where the cards sit. */
.home .hero-stage > .hero.melt{ background:none; }

/* The flow-field canvas blends with mix-blend-mode:screen, which lightens.
   Over footage it washes the frame out, and its opacity is set inline by
   app.js so a plain rule loses. */
.has-hero-video .flowfield{ opacity:.20 !important; mix-blend-mode:soft-light; }

/* This row was grey because it used to sit on the white melt. It now sits on
   footage, so it needs to come up to a legible weight. */
.home .hero-stage .hero.has-media .router-alt{ color:rgba(255,255,255,.80); }
.home .hero-stage .hero.has-media .router-alt a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.home .hero-stage .hero.has-media .router-alt a:hover{ color:#7FD2FF; }

/* The arc now sweeps up behind the proof slab, so the slab can no longer be a
   38% veil: over white it would composite to light grey and its white numerals
   would drop to roughly 1.9:1. It stays a dark panel on its own terms. */
.home .hero.has-media + .ledger-sec .ledger{
  background:linear-gradient(180deg, rgba(10,18,40,.62) 0%, rgba(8,15,34,.86) 100%);
  border-color:rgba(255,255,255,.20);
}

/* ---- Ambassador portraits --------------------------------------------
   Phone-camera originals (3072x4608 and 3024x4032) cropped to a common 4:5
   so the two players sit as a matched pair despite different source shoots. */
.amb-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.amb-card .amb-shot{
  display:block; margin:0 0 22px; border-radius:0;
  overflow:hidden; background:rgba(255,255,255,.04);
}
.amb-card .amb-shot img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 22%;          /* both faces sit in the upper third */
  transition:transform .8s var(--ease);
}
.amb-card:hover .amb-shot img{ transform:scale(1.03); }
.amb-card .k, .amb-card h3, .amb-card p{ padding-left:26px; padding-right:26px; }
.amb-card p{ padding-bottom:26px; }
@media (prefers-reduced-motion: reduce){
  .amb-card .amb-shot img, .amb-card:hover .amb-shot img{ transition:none; transform:none; }
}

/* ---- Ambassadors page -------------------------------------------------- */
.grid.c4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px){ .grid.c4{ grid-template-columns:repeat(2,1fr); } }
.amb-values .card{ text-align:center; padding:26px 18px; }
.amb-values .card h3{ margin:0; font-size:17px; letter-spacing:-.01em; }
.amb-statement{
  margin:34px 0 26px; font-size:clamp(21px,2.5vw,29px); line-height:1.32;
  font-weight:300; color:#fff; max-width:22ch;
}
/* Visually hidden labels: the inputs carry placeholders, but a placeholder is
   not an accessible name. */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.amb-card p + p{ margin-top:12px; }

/* ---- AI band, light register ------------------------------------------
   Was a dark full-bleed photograph. Now white, two columns, with the SDLC
   loop on the right. The video is already on a white ground, so it sits on
   the page rather than in a box. */
.ai-band.ai-light{ background:#fff; padding:clamp(56px,6vw,84px) 0; }
.ai-band.ai-light .ai-bg{ display:none; }
.ai-split{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(36px,5vw,76px); align-items:center;
}
@media (max-width:900px){ .ai-split{ grid-template-columns:1fr; } }
.ai-band.ai-light .ai-say{ max-width:44ch; }
.ai-band.ai-light .ai-say h2{ color:var(--navy); }
.ai-band.ai-light .ai-say h2 b{ color:var(--cyan-ink, #1F8DC5); }
.ai-band.ai-light .ai-say p{ color:var(--grey); }
.ai-band.ai-light .ai-go{ color:var(--cyan-ink, #1F8DC5); }

.ai-media{ margin:0; }
.ai-media .loop-video{
  display:block; width:100%; height:auto;
  /* The source carries generous empty margins around the ring, so the frame is
     tightened and the video scaled to fill it rather than shipping whitespace. */
  aspect-ratio:1168/620; object-fit:cover; object-position:50% 48%;
  border-radius:var(--r-lg);
  background:#fff url('video/sdlc-poster.jpg') center/cover no-repeat;
}
.ai-media figcaption{
  margin:14px auto 0; font-size:13px; line-height:20px; color:var(--grey);
  max-width:46ch; text-align:center;
}

/* ---- Hero stage: one content width ------------------------------------
   Asked 2026-09-16. The headline sat in a 1260 wrap, the proof slab in an
   1180 wrap and the router in a 1000 box, so three stacked elements had
   three different left edges. One width for the whole stage. */
.home .hero-stage .wrap{ max-width:1260px; }
.home .hero .router{ max-width:none; margin-left:0; margin-right:0; }
.home .hero .sub{ max-width:56ch; }
.home .hero-stage > .ledger-sec .wrap{ max-width:1260px; }

/* ---- Hero choreography -------------------------------------------------
   The entrance was globally disabled, so everything landed at once and read
   as noise. Re-enabled for the home hero only (other pages keep their current
   behaviour) and slowed into a reading order: headline, then the statement,
   then the three routes, then the quiet line. ~2s end to end.
   .flat still freezes all of it for QA stills. */
.js:not(.flat) .home .hero .display .line > span{
  display:block; animation:line-up 1.15s var(--ease-out-expo) both;
}
.js:not(.flat) .home .hero .display .line:nth-child(1) > span{ animation-delay:.10s; }
.js:not(.flat) .home .hero .display .line:nth-child(2) > span{ animation-delay:.26s; }

.js:not(.flat) .home .hero .rise{
  opacity:0; transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;
}
.js:not(.flat) .home .hero .rise.r2{ animation-delay:.78s; }   /* the statement */
.js:not(.flat) .home .hero .rise.r3{ animation-delay:1.18s; }  /* the three routes */
.js:not(.flat) .home .hero .rise.r4{ animation-delay:1.95s; }  /* just exploring */

/* The routes arrive one after another inside their own row, so the eye is led
   left to right rather than hit with three at once. */
.js:not(.flat) .home .hero .route-card[data-stagger]{
  opacity:0; transform:translateY(22px);
  animation:rise .85s var(--ease) forwards;
}
.js:not(.flat) .home .hero .route-card[data-stagger="1"]{ animation-delay:1.24s; }
.js:not(.flat) .home .hero .route-card[data-stagger="2"]{ animation-delay:1.42s; }
.js:not(.flat) .home .hero .route-card[data-stagger="3"]{ animation-delay:1.60s; }
/* the JS observer also adds .in; neither must cancel the other */
.js:not(.flat) .home .hero .route-card[data-stagger].in{ opacity:1; transform:none; }

/* The proof slab is the payoff, so it waits for the scroll rather than
   arriving with the hero. */
.js:not(.flat) .home .hero-stage .ledger-sec .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js:not(.flat) .home .hero-stage .ledger-sec .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .home .hero .display .line > span,
  .js .home .hero .rise,
  .js .home .hero .route-card[data-stagger],
  .js .home .hero-stage .ledger-sec .reveal{
    opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;
  }
}

/* ---- Ambassadors page rhythm ------------------------------------------
   Asked 2026-09-16: "too spaced out". Measured cause was cumulative, not one
   value: 96px section padding top and bottom, plus a 56px .sec-head margin,
   plus the sections' own dead space, left 250 to 330px between consecutive
   blocks. Tightened as a set rather than by nudging one number. */
.amb section{ padding-top:64px; padding-bottom:64px; }
.amb section:first-of-type{ padding-top:118px; }      /* clears the fixed header */
.amb .sec-head{ margin-bottom:34px; }
.amb .sec-head p.lead + p.lead{ margin-top:12px; }
/* The register-interest block sits directly under Beyond the Fairway and reads
   as one thought, so it keeps its zero top padding and loses the double gap. */
.amb #invitational{ padding-top:0; }
.amb .amb-statement{ margin:26px 0 20px; }

@media (max-width:860px){
  .amb section{ padding-top:48px; padding-bottom:48px; }
  .amb section:first-of-type{ padding-top:100px; }
}

/* ---- From-the-course: own tiles ---------------------------------------
   The alternative to Instagram's embed. Same grid, but a linked image in our
   own styling: no iframe, no third-party script, no follower count, and it
   inherits the page's dark register instead of fighting it.
   4:5 because that is the frame the posts are actually composed in, so the
   artwork's own headline is never cropped out. */
.ig-own{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); aspect-ratio:4/5;
  background:rgba(255,255,255,.04);
  box-shadow:0 22px 60px -30px rgba(4,10,28,.8);
  text-decoration:none;
}
.ig-own picture{ display:block; width:100%; height:100%; }
.ig-own img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.ig-own:hover img{ transform:scale(1.045); }
.ig-own:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.ig-own .ig-cap{
  position:absolute; left:0; right:0; bottom:0; padding:44px 16px 14px;
  font-size:13px; line-height:18px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, rgba(4,10,28,0) 0%, rgba(4,10,28,.86) 72%);
}
@media (prefers-reduced-motion: reduce){
  .ig-own img, .ig-own:hover img{ transition:none; transform:none; }
}

/* Hero headline: on narrow screens each line wraps; balance it so no single
   word is stranded ("pace." / "sheet."). No effect where a line fits. */
.home .hero h1.display .line > span{ text-wrap:balance; }

/* ---- Ecosystem flow v3 · HTML ------------------------------------------
   Replaces the scaled SVG: a 560-unit viewBox in a 460px column printed the
   labels at 82%, so the sub-lines landed near 10px. Real text keeps its size
   at every width. Order of reading: nodes light top to bottom, then capital
   pulses travel down the connectors, IZZI lands last. */
.eco-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; }
.flow { width: 100%; max-width: 520px; margin-top: 0; }  /* auto margins would shrink a grid item to its content */
.eco-flow { list-style: none; margin: 0; padding: 0; position: relative; }
.eco-node {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 17px 22px; border-radius: 14px;
  background: rgba(13,20,50,.74); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.eco-node b { font-size: 18px; line-height: 1.25; font-weight: 700; color: #fff; }
.eco-node span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.78); text-align: right; }
.eco-node.funders { border-color: rgba(31,141,197,.5); }
.eco-node.izzi {
  padding: 21px 22px; background: rgba(50,38,120,.62); border-color: rgba(147,129,240,.75);
  box-shadow: 0 0 0 0 rgba(110,89,224,0);
}
.eco-node.izzi b { color: #D9D1FB; }
.eco-node.izzi span { color: rgba(233,228,253,.85); }

/* connectors: a dashed line between each pair, with a travelling pulse */
.eco-node + .eco-node { margin-top: 30px; }
.eco-node + .eco-node::before {
  content: ""; position: absolute; left: 50%; top: -31px; width: 1px; height: 30px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.32) 0 3px, transparent 3px 8px);
  transform-origin: top;
}
.eco-node + .eco-node::after {
  content: ""; position: absolute; left: 50%; top: -31px; width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(31,141,197,.95);
  opacity: 0;
}
.eco-node.izzi::before { background: repeating-linear-gradient(180deg, rgba(147,129,240,.5) 0 3px, transparent 3px 8px); }
.eco-node.izzi::after { background: var(--violet); box-shadow: 0 0 12px rgba(110,89,224,.95); }

@keyframes eco-pulse {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(24px); }
}
@keyframes eco-breathe {
  from { box-shadow: 0 0 0 0 rgba(110,89,224,0); }
  to { box-shadow: 0 0 34px 2px rgba(110,89,224,.38); }
}

@media (prefers-reduced-motion: no-preference) {
  .js:not(.flat) .flow .eco-node {
    opacity: 0; transform: translateY(10px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i) * .2s + .1s);
  }
  .js:not(.flat) .flow .eco-node + .eco-node::before {
    transform: scaleY(0); transition: transform .35s var(--ease);
    transition-delay: calc(var(--i) * .2s);
  }
  .js:not(.flat) .flow.in .eco-node { opacity: 1; transform: none; }
  .js:not(.flat) .flow.in .eco-node + .eco-node::before { transform: scaleY(1); }
  /* pulses start once the whole stack is in, staggered so capital reads as moving down */
  .js:not(.flat) .flow.in .eco-node + .eco-node::after {
    animation: eco-pulse 2.6s var(--ease) infinite;
    animation-delay: calc(1.5s + var(--i) * .42s);
  }
  .js:not(.flat) .flow.in .eco-node.izzi { animation: eco-breathe 3.2s var(--ease) 2.2s infinite alternate; }
}
/* no JS, ?flat or reduced motion: everything visible, no pulses */
.flat .flow .eco-node, .flat .flow .eco-node::before { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .eco-layout { grid-template-columns: 1fr; gap: 32px; }
  .flow { max-width: none; }
}
@media (max-width: 480px) {
  .eco-node { flex-direction: column; align-items: flex-start; gap: 3px; padding: 15px 18px; }
  .eco-node span { text-align: left; }
}
.flow-caption { text-wrap: balance; }

/* ---- Team tabs (Company page) ----------------------------------------- */
.team-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -24px 0 34px; }
.team-tab {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 0;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.team-tab:hover { background: rgba(255,255,255,.1); color: #fff; }
.team-tab[aria-selected="true"] { background: var(--cyan); color: #fff; box-shadow: none; }
.team-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,141,197,.5); }
.team-panel[hidden] { display: none; }

/* Photo placeholder: initials until the real portrait arrives. */
.team-card .tc-ph {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.05;
  background: radial-gradient(120% 90% at 30% 15%, rgba(31,141,197,.35), transparent 60%), linear-gradient(160deg, #18225a, #0e1530);
  color: rgba(255,255,255,.85); font-size: clamp(28px, 3vw, 40px); font-weight: 300; letter-spacing: 1px;
}
.bio-modal.no-photo .bio-modal-panel { grid-template-columns: 1fr; width: min(520px, 100%); }
.bio-modal.no-photo #bioImg { display: none; }
.bio-modal-body .chip[hidden] { display: none; }