/* ═══════════════════════════════════════════════════════════
   CERO Studio | cerostudio.co
   1. Tokens          5. Sections
   2. Reset/base      6. Components
   3. Layout          7. Animation
   4. Buttons         8. Responsive
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ──────────────────────────────────────
   Both families are served from assets/fonts rather than Google's CDN. The old
   setup cost a DNS lookup, a TLS handshake and a stylesheet round trip to
   fonts.googleapis.com before the browser even learned which font files it
   needed, then a second connection to fonts.gstatic.com to fetch them. That
   chain sat directly in front of first paint.

   These are the variable versions, so one file covers every weight the site
   uses: 400 to 600 for body copy, 500 to 800 for headings. Latin subset only,
   which is all the site's copy needs; unicode-range lets the browser fall back
   per character for anything outside it rather than rendering tofu.

   font-display:swap keeps text visible in a fallback face from first paint and
   swaps when the real font arrives, so a slow font never blocks content. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url('assets/fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1. Tokens ───────────────────────────────────────────── */
:root {
  --navy-900:#060B1C;
  --navy-800:#0A1128;
  --navy-700:#0E1733;
  --navy-600:#16224A;
  --navy-line:rgba(236,196,64,.16);

  /* The site is navy end to end. What used to be the light palette is now three
     closely-spaced navies, so sections still separate without any white:
     navy-800 (#0A1128) for "dark" sections, --paper one step up, --paper-2 two. */
  --paper:#0C1430;
  --paper-2:#0E1836;
  --paper-line:rgba(236,196,64,.15);
  --surface:#111C3D;        /* cards that were white */
  --surface-2:#16224A;      /* raised card / table header */

  /* Brand gold: dark end #ECC440, light end #FFFF95. The gradient keeps the
     original 120deg dark-light-dark sheen so highlighted words catch a
     centre light rather than reading as a flat wash.
     NOTE: gold on the white service/step surfaces is a separate, much darker
     scale (#806413 / #8A6D14 / #6B540F). These bright values would fail
     contrast there, so they are not tokens. */
  --gold-1:#ECC440;
  --gold-2:#F3D65E;
  --gold-3:#FFFF95;
  --gold-grad:linear-gradient(120deg,#ECC440 0%,#F3D65E 28%,#FFFF95 58%,#F3D65E 82%,#ECC440 100%);

  /* Text on those navies, inverted from the old near-black scale. */
  --ink:#F4F6FB;
  --ink-2:#AEB8D0;
  --ink-3:#99A2B9;

  --on-dark:#F4F6FB;
  --on-dark-2:#A9B3CD;
  --on-dark-3:#99A2B9;

  --max:1180px;
  --gut:clamp(20px,5vw,40px);

  /* Spacing scale. Vertical rhythm was ad-hoc clamps per component before this;
     these are the only step sizes the layout should reach for. */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:clamp(18px,2vw,26px);
  --sp-5:clamp(22px,2.6vw,34px);
  --sp-6:clamp(34px,4vw,52px);
  --sp-7:clamp(54px,6.4vw,84px);
  --sp-8:clamp(76px,10vw,128px);
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:280ms var(--ease);
  --shadow:0 28px 66px -30px rgba(0,0,0,.66);
  --shadow-dark:0 30px 70px -34px rgba(0,0,0,.85);

  --f-head:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ── 2. Reset / base ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.68;
  color:var(--ink);
  background:var(--navy-800);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.1;letter-spacing:-.022em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--gold-2);color:var(--navy-900)}

/* Scrollbar, caret and tap highlight ship as browser defaults that belong to no
   design system; theming them is what stops the page reading as assembled. */
html{scrollbar-color:rgba(236,196,64,.45) #0A1128;scrollbar-width:thin}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#0A1128}
*::-webkit-scrollbar-thumb{
  background:rgba(236,196,64,.34);border-radius:99px;
  border:3px solid #0A1128;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(236,196,64,.6)}
body{caret-color:var(--gold-2);-webkit-tap-highlight-color:rgba(236,196,64,.22)}

:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);
  z-index:200;padding:12px 22px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--gold-2);color:var(--navy-900);font-weight:700;
  transition:top 200ms var(--ease);
}
.skip-link:focus{top:0}

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}



/* ── Load splash ─────────────────────────────────────────────
   Runs on every document load (the head gate only checks reduced motion).
   The lockup is used as a mask twice: a faint ghost, and a gold-gradient fill
   clipped to zero height and wiped upward. Total run 1.5s.
   Brand gold rather than the asset's own colours, because half that artwork is navy
   which would disappear against this ground. */
.splash{display:none}
.splash-on .splash{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(120% 90% at 50% 40%,#101A3C 0%,#080E20 70%);
  animation:splash-out 340ms var(--ease) 1160ms both;
}
.splash__mark{
  position:relative;z-index:1;
  width:min(330px,62vw);aspect-ratio:476 / 133;
}
.splash__ghost,.splash__fill{
  position:absolute;inset:0;display:block;
  -webkit-mask:url("assets/logo-navbar.png") center / contain no-repeat;
          mask:url("assets/logo-navbar.png") center / contain no-repeat;
}
.splash__ghost{background:rgba(244,246,251,.12)}
.splash__fill{
  background:var(--gold-grad);
  clip-path:inset(100% 0 0 0);
  animation:splash-fill 820ms cubic-bezier(.36,.02,.2,1) 130ms forwards;
}
.splash__halo{
  position:absolute;width:min(560px,86vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(236,196,64,.22),transparent 66%);
  filter:blur(16px);
  animation:splash-pulse 1.3s ease-in-out both;
}
@keyframes splash-fill{to{clip-path:inset(0 0 0 0)}}
@keyframes splash-pulse{
  0%{opacity:0;transform:scale(.72)}
  55%{opacity:1;transform:scale(1.05)}
  100%{opacity:.4;transform:scale(1.12)}
}
@keyframes splash-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.splash-on .splash{display:none}}

/* ── One page-wide background ────────────────────────────────
   Every section is transparent. This is the only painted ground on the page,
   and it is position:fixed, so nothing scrolls out from under a section and no
   seam can appear between them. Sits at z-index:-1, below all in-flow content. */
.page-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* Jewel-tone sapphire base: more blue in the upper half, deeper and cooler at
     the foot, so the page reads as one lit surface rather than flat. */
  background:
    radial-gradient(120% 80% at 50% 0%,#101838 0%,transparent 56%),
    linear-gradient(180deg,#0C1430 0%,#0A1128 44%,#070C1E 100%),
    var(--navy-800);
}
.page-bg__glow{position:absolute;border-radius:50%;filter:blur(24px);will-change:transform}
.page-bg__glow--a{
  top:-34vh;right:-18vw;width:88vw;height:88vh;max-width:1500px;
  background:radial-gradient(circle,rgba(48,72,158,.26),rgba(236,196,64,.07) 44%,transparent 68%);
  animation:float 22s ease-in-out infinite;
}
.page-bg__glow--b{
  bottom:-30vh;left:-16vw;width:76vw;height:76vh;max-width:1250px;
  background:radial-gradient(circle,rgba(236,196,64,.13),transparent 64%);
}
/* Gold veining: fractal noise pushed through the alpha row of a colour matrix,
   so only the crests survive as sparse organic veins. Screen blend lightens the
   navy without touching anything in front of it. */
.page-bg__veins{
  position:absolute;inset:-10%;
  opacity:.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271400%27%20height%3D%271400%27%3E%3Cfilter%20id%3D%27v%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0055%200.013%27%20numOctaves%3D%274%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.82%20%200%200%200%200%200.66%20%200%200%200%200%200.24%20%201.9%200%200%200%20-1.06%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23v%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:1400px 1400px;
}
/* Sparkle: sub-2px points on a large tile, breathing slowly. */
.page-bg__sparkle{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 18%,rgba(242,218,151,.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 62% 9%,rgba(242,218,151,.6),transparent 62%),
    radial-gradient(1.8px 1.8px at 84% 31%,rgba(255,241,205,.7),transparent 62%),
    radial-gradient(1.1px 1.1px at 33% 44%,rgba(242,218,151,.55),transparent 62%),
    radial-gradient(1.5px 1.5px at 71% 58%,rgba(242,218,151,.62),transparent 62%),
    radial-gradient(1.2px 1.2px at 9% 67%,rgba(255,241,205,.5),transparent 62%),
    radial-gradient(1.7px 1.7px at 47% 79%,rgba(242,218,151,.6),transparent 62%),
    radial-gradient(1.1px 1.1px at 89% 88%,rgba(242,218,151,.5),transparent 62%),
    radial-gradient(1.4px 1.4px at 25% 95%,rgba(255,241,205,.45),transparent 62%);
  background-size:760px 760px;opacity:.26;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:.20}50%{opacity:.34}}
@media (prefers-reduced-motion:reduce){
  .page-bg__sparkle{animation:none;opacity:.26}
}
.page-bg__grain{
  position:absolute;inset:0;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Centred section header, used by Services. */
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .sec-sub{margin-inline:auto}
/* The stacking pin already centres its cards inside a full viewport, which puts
   a lot of air under a normal section header. This pulls the two together. */
.sec-head--tight{margin-bottom:var(--sp-2)}


/* Gold text renders as the brand gradient, matching .gold-text. Only elements
   without their own background are listed: on a pill, background-clip:text
   would clip the fill away as well. */
.eyebrow,
.footer__h,
.faq__item.is-open .faq__q > span:first-child{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ── 3. Layout ───────────────────────────────────────────── */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.container--narrow{max-width:900px}

/* No overflow:hidden here: it would become the scroll container for the
   sticky process pin and stop it sticking. Nothing needs clipping now that
   the per-section glows are gone. */
.section{position:relative;padding:var(--sp-8) 0}
.section--tight{padding:var(--sp-7) 0}
/* The stack pin carries its own bottom padding, so the section does not
   need a full step underneath it as well. */
#process{padding-bottom:var(--sp-7)}
#work{padding-top:var(--sp-7)}

.section--dark{color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--alt{color:var(--ink)}




/* section headings */
.sec-head{max-width:720px;margin-bottom:var(--sp-6)}
.sec-title{font-size:clamp(30px,4.1vw,50px);margin-bottom:16px}
.sec-sub{color:var(--ink-2);font-size:clamp(16px,.5vw + 15px,18.5px);max-width:60ch}
.section--dark .sec-sub{color:var(--on-dark-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-3);margin-bottom:18px;
}
.eyebrow--dark{color:var(--gold-3)}
/* Lighter than the brand mid-gold on purpose: at 6px the darker tone reads as a
   smudge against navy. Same value drives the hero badge dot. */
.eyebrow__dot,.hero__badge-dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#FFFF95;
  box-shadow:0 0 0 4px rgba(255,255,149,.15),0 0 10px 1px rgba(255,255,149,.35);
}
/* Manual line breaks are a desktop nicety. Below the breakpoints they only
   create orphaned words, so the text is left to wrap on its own. */
.br-md{display:none}
@media (max-width:720px){.br-hero{display:none}}

/* ── 4. Buttons ──────────────────────────────────────────── */
.btn{
  --btn-y:15px;--btn-x:28px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-y) var(--btn-x);
  font-family:var(--f-head);font-size:15px;font-weight:700;letter-spacing:-.005em;
  border-radius:999px;white-space:nowrap;cursor:pointer;
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),
             background-position 420ms var(--ease),background-color 240ms var(--ease),
             border-color 240ms var(--ease),color 240ms var(--ease);
  will-change:transform;
}
.btn--sm{--btn-y:11px;--btn-x:19px;font-size:13.5px}
.btn--lg{--btn-y:18px;--btn-x:36px;font-size:16.5px}

.btn--gold{
  color:#14192E;
  background:var(--gold-grad);
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:0 10px 30px -12px rgba(236,196,64,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover,.btn--gold:focus-visible{
  transform:scale(1.03);
  background-position:100% 50%;
  box-shadow:0 16px 40px -12px rgba(236,196,64,.72),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold:active{transform:scale(.99)}

.btn--ghost{
  color:var(--on-dark);
  border:1px solid rgba(244,246,251,.24);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  transform:scale(1.03);
  border-color:rgba(236,196,64,.62);
  background:rgba(236,196,64,.09);
  color:#fff;
}
.btn__icon{width:18px;height:18px;transition:transform 240ms var(--ease)}
.btn__ico{display:inline-flex;flex:none}
.btn__ico svg{width:19px;height:19px}
.btn:hover .btn__icon{transform:translateX(3px)}

/* ── 5. Navbar ───────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color 320ms var(--ease),box-shadow 320ms var(--ease),
             backdrop-filter 320ms var(--ease),border-color 320ms var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(8,13,32,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(236,196,64,.16);
  box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}

/* Brand lockup. assets/logo-navbar.png carries the asset's own colours on a
   transparent ground. Intrinsic art is 476x133, so at 40px tall it renders at
   ~3.3x, crisp on 2x and 3x displays. The width/height attributes on the element
   reserve the box and keep the bar from shifting while it decodes. */
.logo{display:inline-flex;align-items:center;flex:none}
.logo__img{
  height:40px;width:auto;
  transition:transform 400ms var(--ease),filter 400ms var(--ease);
}
.logo:hover .logo__img{
  transform:scale(1.03);
  filter:drop-shadow(0 3px 14px rgba(236,196,64,.34));
}
.logo--footer .logo__img{height:44px}

.nav__links{display:flex;align-items:center;gap:6px}
.nav__link{
  position:relative;padding:9px 14px;border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--on-dark-2);
  transition:color 220ms var(--ease),background-color 220ms var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:#fff}
.nav__cta{margin-left:12px}

.nav__toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(244,246,251,.2);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color 220ms var(--ease),background-color 220ms var(--ease);
}
.nav__toggle span{
  display:block;width:18px;height:1.8px;border-radius:2px;background:var(--on-dark);
  transition:transform 300ms var(--ease),opacity 200ms var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}


/* ── Hero float cards ────────────────────────────────────────
   Four service mockups drifting at the hero edges. Decorative only: inert to
   the pointer, behind .hero__inner (z-index 2), and gone below 1280px where the
   text column would run into them. `rotate` and `translate` are separate
   properties so the drift never clobbers each card's angle. Sizes vary per card
   so the group reads as scattered rather than tiled. */
.hero__float{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.float-card{
  position:absolute;display:flex;flex-direction:column;gap:7px;
  padding:12px;border-radius:14px;
  background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(236,196,64,.22);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  opacity:.52;filter:blur(.3px);
  font-family:var(--f-body);
}
.float-card--voice {width:192px; left:1.5%; top:18%;    rotate:-9deg; animation:drift-a 27s ease-in-out infinite}
.float-card--video {width:174px; right:2%;  top:13%;    rotate:8deg;  animation:drift-b 33s ease-in-out infinite}
.float-card--avatar{width:146px; left:2%;   bottom:12%; rotate:6deg;  animation:drift-b 24s ease-in-out infinite}
.float-card--site  {width:182px; right:2%;  bottom:16%; rotate:-7deg; animation:drift-a 37s ease-in-out infinite}

/* Amplitude is kept small so a card at the far end of its drift still clears
   the 880px text column. */
@keyframes drift-a{0%,100%{translate:-15px 0}50%{translate:15px 0}}
@keyframes drift-b{0%,100%{translate:16px 0}50%{translate:-16px 0}}

/* shared bits */
.fc-line,.fc-name,.fc-top,.fc-tag,.fc-dur,.fc-rec{letter-spacing:.01em}
.fc-top{
  display:flex;align-items:center;gap:6px;
  font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-3);
}
.fc-live{
  width:5px;height:5px;border-radius:50%;background:#5FE3A1;
  box-shadow:0 0 0 3px rgba(95,227,161,.18);
}
.fc-name{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.86)}
.fc-line{
  font-size:8.5px;line-height:1.45;color:rgba(255,255,255,.6);
  padding:6px 8px;border-radius:8px;border-bottom-left-radius:3px;
  background:rgba(236,196,64,.1);border:1px solid rgba(236,196,64,.2);
}
.fc-wave{display:flex;align-items:center;gap:2.5px;height:22px}
.fc-wave i{
  flex:1;border-radius:2px;
  background:linear-gradient(to top,rgba(236,196,64,.45),rgba(255,255,149,.9));
}
.fc-wave i:nth-child(1){height:34%} .fc-wave i:nth-child(2){height:66%}
.fc-wave i:nth-child(3){height:100%} .fc-wave i:nth-child(4){height:48%}
.fc-wave i:nth-child(5){height:82%}  .fc-wave i:nth-child(6){height:38%}
.fc-wave i:nth-child(7){height:70%}  .fc-wave i:nth-child(8){height:52%}
.fc-wave i:nth-child(9){height:28%}
.fc-wave--sm{height:14px}

.fc-frame{
  position:relative;aspect-ratio:16 / 9;border-radius:9px;overflow:hidden;
  background:
    radial-gradient(70% 90% at 30% 20%,rgba(120,150,235,.3),transparent 70%),
    linear-gradient(150deg,#1B2650,#0C1432);
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
}
.fc-play{
  width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent rgba(255,255,255,.9);
  margin-left:3px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.fc-play--sm{border-width:5px 0 5px 9px}
.fc-tag{
  position:absolute;top:6px;left:6px;
  font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 5px;border-radius:99px;color:#14192E;
  background:linear-gradient(120deg,#ECC440,#FFFF95);
}
.fc-dur{
  position:absolute;bottom:6px;right:6px;
  font-size:7px;font-weight:600;color:rgba(255,255,255,.85);
  padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.5);
}
.fc-strip{display:flex;gap:2px;height:9px}
.fc-strip i{
  flex:1;border-radius:2px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.06);
}
.fc-strip i:nth-child(3){background:rgba(236,196,64,.5)}

.fc-portrait{
  position:relative;aspect-ratio:3 / 4;border-radius:9px;overflow:hidden;
  background:linear-gradient(165deg,#22305E,#0D1430);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);
}
.fc-silhouette{
  position:absolute;bottom:-14%;width:66%;aspect-ratio:1;border-radius:50% 50% 42% 42%;
  background:radial-gradient(60% 45% at 50% 22%,rgba(255,255,255,.34),rgba(255,255,255,.13) 60%,transparent 72%);
  filter:blur(2px);
}
.fc-rec{
  position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:4px;
  font-size:6.5px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.9);
  padding:2px 5px;border-radius:99px;background:rgba(0,0,0,.45);
}
.fc-rec i{width:4px;height:4px;border-radius:50%;background:#FF6B6B}

.fc-chrome{display:flex;align-items:center;gap:4px;padding-bottom:3px}
.fc-chrome i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28)}
.fc-chrome b{
  flex:1;height:7px;margin-left:4px;border-radius:99px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.07);
}
.fc-hero{
  height:36px;border-radius:7px;
  background:
    radial-gradient(60% 80% at 25% 30%,rgba(236,196,64,.22),transparent 70%),
    rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.07);
}
.fc-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.16)}
.fc-bar--short{width:56%}
.fc-cta{
  width:44%;height:11px;border-radius:99px;
  background:linear-gradient(120deg,#ECC440,#FFFF95);opacity:.85;
}

@media (max-width:1439px){
  .float-card--voice{width:152px} .float-card--video{width:140px}
  .float-card--avatar{width:118px} .float-card--site{width:146px}
  .float-card{padding:10px;gap:6px;border-radius:12px}
  .fc-hero{height:27px}
}
@media (max-width:1279px){.hero__float{display:none}}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}

/* ── 6. Hero ─────────────────────────────────────────────── */
.hero{
  position:relative;padding:clamp(112px,12.5vw,134px) 0 clamp(64px,7vw,92px);
  overflow:hidden;color:var(--on-dark);
}
.hero__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:880px;margin-inline:auto;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px 8px 14px;margin-bottom:26px;border-radius:999px;
  font-family:var(--f-head);font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-3);
  background:rgba(236,196,64,.07);
  border:1px solid rgba(236,196,64,.32);
  backdrop-filter:blur(6px);
}
.hero__title{
  font-size:clamp(38px,6.4vw,76px);letter-spacing:-.038em;
  margin-bottom:22px;text-wrap:balance;
}
.hero__sub{
  color:var(--on-dark-2);font-size:clamp(16.5px,.7vw + 15px,20px);
  max-width:56ch;margin:0 auto 34px;text-wrap:pretty;
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:34px;
}
.hero__ticks{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  font-size:14px;color:var(--on-dark-3);
}
.hero__ticks li{display:flex;align-items:center;gap:8px}
.hero__ticks li::before{
  content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:rgba(236,196,64,.16);
  box-shadow:inset 0 0 0 1px rgba(236,196,64,.5);
}
.hero__scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3);
}
.hero__scroll span{
  width:1px;height:26px;background:linear-gradient(to bottom,transparent,var(--gold-2));
  animation:pulse-line 2.4s ease-in-out infinite;
}


/* ── Stats ───────────────────────────────────────────────── */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px)}
.stat{position:relative;padding-left:20px}
.stat::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--gold-grad);opacity:.6;
}
.stat__num{
  font-family:var(--f-head);font-weight:800;font-size:clamp(34px,3.8vw,46px);
  line-height:1.05;letter-spacing:-.04em;margin-bottom:8px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__num em{font-style:normal}
/* The less-than sign carries wide side bearings in Schibsted Grotesk; pull it
   back so '<1s' reads as one figure rather than two glyphs. */
.stat__pre{opacity:.75;margin-right:-.07em;letter-spacing:-.02em}
.stat__label{font-size:14px;line-height:1.5;color:var(--on-dark-2)}
.stat__tag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:5px;vertical-align:1px;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-3);background:rgba(236,196,64,.14);border:1px solid rgba(236,196,64,.26);
}
.stats__note{
  margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
  font-size:13.6px;line-height:1.65;color:var(--on-dark-3);max-width:70ch;
}
.stats__note em{color:var(--on-dark-2);font-style:italic}

/* ── Marquee ─────────────────────────────────────────────── */
.marquee-wrap{padding:clamp(38px,4.4vw,54px) 0}
.marquee__label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:24px;font-family:var(--f-head);font-weight:600;
}
.marquee{
  --mq-gap:clamp(34px,4.4vw,60px);
  position:relative;display:flex;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* Two identical tracks sit side by side; each slides exactly its own width,
   so the second lands where the first began, a seamless loop. */
.marquee__track{
  flex:0 0 auto;display:flex;align-items:center;
  gap:var(--mq-gap);padding-right:var(--mq-gap);
  animation:scroll-x 42s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__track li{
  font-family:var(--f-head);font-size:clamp(17px,1.5vw,21px);font-weight:700;
  letter-spacing:-.015em;color:rgba(244,246,251,.4);white-space:nowrap;
  transition:color 260ms var(--ease);
}
.marquee__track li:hover{color:rgba(255,255,149,.95)}

/* ── Image card grids (Problem + Services) ───────────────────
   Both sections are finished artwork: the icon, headline and copy are baked
   into each file, so there is nothing to type-set here, only the frame, the
   aspect box and the hover. Aspect ratio comes from each grid's own token
   because the two sets ship at different ratios.

   The hover selector is deliberately .img-grid .img-card:hover (0,3,0):
   [data-reveal].is-in sets transform:none at (0,2,0) and sits later in this
   file, so a plain .img-card:hover would tie on specificity and lose on
   source order, killing the lift on any revealed card. */
.img-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
.img-grid--problem{--ar:1402 / 1122}
.img-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-dark);
  transition:transform 340ms var(--ease),box-shadow 340ms var(--ease),
             border-color 340ms var(--ease);
}
.img-card img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ar,1402 / 1122);
}
.img-grid .img-card:hover{
  transform:translateY(-5px);
  border-color:rgba(236,196,64,.5);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.92);
}

/* ── Services: editorial rows ────────────────────────────────
   One service per row, full width. Each row is a single card: the dark banner
   on top, then the info block on white below, carrying the label, title, copy
   and two pills. Text colours are the light-background scale here, because this is the
   one deliberately light surface on an otherwise navy page. */
.svc-rows{display:flex;flex-direction:column;gap:var(--sp-7)}
.svc-row{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(236,196,64,.22);
  box-shadow:var(--shadow-dark);
  transition:border-color 380ms var(--ease),box-shadow 380ms var(--ease),
             transform 380ms var(--ease);
}
.svc-rows .svc-row:hover{
  transform:translateY(-4px);
  border-color:rgba(236,196,64,.5);
  box-shadow:0 46px 92px -34px rgba(0,0,0,.92);
}
/* <picture> is inline by default, which would put a baseline gap under every
   converted image. It carries no styling of its own here, so it is taken out of
   the box tree entirely and the existing ".img-card img" / ".svc-row__banner img"
   descendant rules keep matching exactly as before. */
picture{display:contents}
.svc-row__banner{display:block;line-height:0}
.svc-row__banner img{display:block;width:100%;height:auto;aspect-ratio:1600 / 648}

.svc-row__body{
  display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr;
  gap:clamp(20px,3.4vw,56px);align-items:start;
  padding:clamp(26px,3vw,44px) clamp(24px,3vw,48px);
  background:#FBFBF9;
}
.svc-row__no{
  font-family:var(--f-head);font-size:11.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#806413;
  margin-bottom:10px;
}
/* .section--dark h1,h2,h3 sets #fff at (0,2,0); this block sits on white, so the
   selector is doubled to (0,2,0) and wins on source order. */
.svc-row .svc-row__title{
  font-size:clamp(25px,2.5vw + 12px,38px);letter-spacing:-.03em;
  color:#0A1128;text-wrap:balance;
}
.svc-row__text{
  color:#43506E;font-size:clamp(15.5px,.5vw + 14.5px,17.5px);
  line-height:1.66;max-width:56ch;text-wrap:pretty;
}
.svc-row__chips{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(18px,1.8vw,24px);
  padding-top:clamp(18px,1.8vw,24px);
  border-top:1px solid #E6E3D8;
}
.svc-row__chips li{
  font-family:var(--f-head);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;
  color:#8A6D14;
  background:rgba(236,196,64,.10);
  border:1px solid rgba(236,196,64,.34);
  transition:background-color 260ms var(--ease),border-color 260ms var(--ease);
}
.svc-row:hover .svc-row__chips li{
  background:rgba(236,196,64,.18);border-color:rgba(236,196,64,.5);
}

/* ── Our Work: video placeholder slots ───────────────────────
   .work__slot owns the 16:9 box, the rounding and the gold hairline, so the
   player dropped inside it inherits all of that and needs no styling of its
   own. Two cards on desktop, stacked to one column at the mobile breakpoint. */
.work-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
.work__slot{
  position:relative;aspect-ratio:16 / 9;overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(26rem 16rem at 50% 120%,rgba(236,196,64,.12),transparent 70%),
    linear-gradient(158deg,#101A3A,#0A1128);
  border:1px solid rgba(236,196,64,.34);
  box-shadow:var(--shadow-dark);
  transition:border-color 320ms var(--ease),box-shadow 320ms var(--ease),
             transform 320ms var(--ease);
}
/* No lift on hover any more. The slot holds a real player now, and a card that
   shifts under the pointer while you are reaching for scrub or fullscreen is
   irritating. The border and shadow still respond. */
.work-grid .work__item:hover .work__slot{
  border-color:rgba(236,196,64,.72);
  box-shadow:0 40px 84px -32px rgba(0,0,0,.9);
}
/* The player fills the slot edge to edge and inherits its rounding through the
   slot's overflow:hidden. Both sources are 1920x1080, the same 16:9 as the box,
   so object-fit:cover crops nothing. */
.work__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block;
  background:#0A1128;
}
.work__title{
  margin-top:16px;
  font-family:var(--f-head);font-size:clamp(17px,.9vw + 14px,21px);font-weight:700;
  letter-spacing:-.022em;color:var(--ink);
}
.work__desc{
  margin-top:8px;
  color:var(--on-dark-2);
  font-size:clamp(14.5px,.3vw + 13.6px,15.8px);
  line-height:1.62;max-width:52ch;text-wrap:pretty;
}


/* ── Comparison ──────────────────────────────────────────── */
.compare{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--paper-line);background:var(--surface);
  box-shadow:var(--shadow);
}
.compare__head,.compare__row{display:grid;grid-template-columns:1fr 1fr}
.compare__head{background:var(--navy-800);color:#fff}
.compare__col{
  display:flex;align-items:center;gap:10px;padding:18px clamp(20px,2.2vw,28px);
  font-family:var(--f-head);font-size:14.5px;font-weight:700;letter-spacing:.02em;
}
.compare__col--old{color:var(--on-dark-2)}
.compare__col--new{
  background:linear-gradient(120deg,rgba(236,196,64,.34),rgba(236,196,64,.12));
  color:#FBF2DE;
  box-shadow:inset 1px 0 0 rgba(236,196,64,.4),inset 0 1px 0 rgba(255,255,149,.22);
}
.compare__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:12px;flex:none;
}
.compare__mark--x{background:rgba(255,255,255,.1);color:#FF9C8A}
.compare__mark--check{background:rgba(236,196,64,.25);color:var(--gold-3)}

.compare__row + .compare__row{border-top:1px solid var(--paper-line)}
.compare__cell{
  padding:20px clamp(20px,2.2vw,28px);font-size:14.8px;line-height:1.6;
}
.compare__cell--old{color:var(--ink-3)}
.compare__cell--new{
  color:var(--ink);font-weight:500;
  background:linear-gradient(120deg,rgba(236,196,64,.11),rgba(236,196,64,.035));
  box-shadow:inset 1px 0 0 var(--paper-line);
}
.compare__label{display:none}

/* ── Process: vertical timeline ───────────────────────
   Replaced the scroll-driven stacking cards. Ordinary page scroll, no sticky
   pinning: five rows, each a numbered marker plus copy, with a rule running
   from one marker down to the next. Centred in the container on the same axis
   as the section heading above it, so the column reads as one block.

   The connector is drawn per item rather than as one line behind the list, so
   it can never overshoot past the last marker; :last-child simply drops it. */
.steps{
  position:relative;
  width:100%;max-width:660px;margin-inline:auto;
  list-style:none;
  display:flex;flex-direction:column;gap:var(--sp-5);
}
.steps__item{
  position:relative;
  display:grid;grid-template-columns:44px 1fr;
  gap:clamp(18px,2vw,28px);
  align-items:start;
}
.steps__item::before{
  content:"";position:absolute;
  left:22px;top:52px;bottom:calc(var(--sp-5) * -1);
  width:1px;
  /* fades out downward so the rule never ends in a hard stub */
  background:linear-gradient(180deg,rgba(236,196,64,.42),rgba(236,196,64,.10));
}
.steps__item:last-child::before{content:none}
.steps__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  font-family:var(--f-head);font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--gold-2);
  background:rgba(236,196,64,.10);
  border:1px solid rgba(236,196,64,.34);
  /* sits above the connector so the rule appears to start at the circle's edge */
  position:relative;z-index:1;
}
.steps__body{padding-top:5px}
.steps .steps__title{
  font-size:clamp(19px,1.1vw + 14px,24px);letter-spacing:-.022em;
  color:var(--on-dark);margin-bottom:var(--sp-1);
}
.steps__text{
  color:var(--on-dark-2);font-size:clamp(15px,.4vw + 14px,16.5px);
  line-height:1.62;max-width:52ch;text-wrap:pretty;
}
@media (max-width:560px){
  .steps__item{grid-template-columns:38px 1fr}
  .steps__item::before{left:19px;top:46px}
  .steps__num{width:38px;height:38px;font-size:12.5px}
}

/* ── Founder / Co-founder messages ───────────────────────────
   Two stacked blocks: copy left, portrait right. The photo card keeps a fixed
   portrait ratio so the two rows line up even though the images differ by a
   couple of pixels. */
.msg{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  padding:clamp(26px,3.2vw,46px);
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(236,196,64,.2);
  box-shadow:var(--shadow-dark);
  transition:border-color 380ms var(--ease),box-shadow 380ms var(--ease);
}
.msg + .msg{margin-top:var(--sp-5)}
.msg:hover{border-color:rgba(236,196,64,.4);box-shadow:0 44px 90px -34px rgba(0,0,0,.9)}

.msg__badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:var(--sp-4);
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.msg__role{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:4px;
}
.msg .msg__name{
  font-size:clamp(26px,2.4vw + 14px,40px);letter-spacing:-.03em;
  color:#fff;margin-bottom:var(--sp-3);
}
.msg__quote{margin:0 0 var(--sp-4)}
.msg__quote p{
  font-size:clamp(16px,.6vw + 15px,19px);line-height:1.68;
  color:var(--on-dark-2);font-style:italic;text-wrap:pretty;max-width:56ch;
}
.msg__attrib{
  font-family:var(--f-head);font-size:14px;font-weight:600;
  color:var(--gold-3);letter-spacing:-.01em;
}
.msg__photo{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(236,196,64,.24);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.85);
}
.msg__photo img{
  display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;
}

/* The founder's card links through to /founder. There is exactly one anchor in
   the markup, on the name; .msg__link::after stretches it over the whole card so
   the photo, quote and name are all clickable. Wrapping the <article> in an <a>
   instead would nest a blockquote and a heading inside a link, give that link a
   paragraph-long accessible name, and make the quote awkward to select.
   Layout is untouched: the overlay is absolutely positioned. */
.msg--linked{position:relative;cursor:pointer}
.msg__link::after{
  content:"";position:absolute;inset:0;z-index:1;
  border-radius:var(--r-lg);
}
.msg--linked:hover{border-color:rgba(236,196,64,.4);box-shadow:0 44px 90px -34px rgba(0,0,0,.9)}
.msg--linked:hover .msg__link{color:var(--gold-3);background-size:100% 1.5px}
/* the overlay swallows pointer events, so the focus ring has to come from the
   card rather than the anchor's own box */
.msg--linked:focus-within{border-color:rgba(236,196,64,.55)}
.msg__link{
  color:inherit;
  background-image:linear-gradient(var(--gold-3),var(--gold-3));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size 380ms var(--ease),color 300ms var(--ease);
}
.msg__link:hover{color:var(--gold-3);background-size:100% 1.5px}
.msg__photo img{transition:scale 620ms var(--ease)}
.msg--linked:hover .msg__photo img{scale:1.035}
@media (max-width:820px){
  .msg{grid-template-columns:1fr;gap:var(--sp-4)}
  .msg__photo{order:-1;max-width:260px}
}

/* ── FAQ ─────────────────────────────────────────────────── */
.section--faq{padding-top:clamp(60px,7vw,96px)}
.faq{
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--paper-line);box-shadow:var(--shadow);
}
.faq__item + .faq__item{border-top:1px solid var(--paper-line)}
.faq h3{margin:0;font-weight:inherit}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:clamp(19px,2vw,24px) clamp(20px,2.4vw,30px);text-align:left;
  font-family:var(--f-head);font-size:clamp(15.6px,.5vw + 14.6px,17.6px);font-weight:700;
  letter-spacing:-.015em;color:var(--ink);
  transition:background-color 240ms var(--ease),color 240ms var(--ease);
}
.faq__q:hover{background:rgba(236,196,64,.08)}
.faq__item.is-open .faq__q{color:var(--gold-3)}
.faq__icon{
  position:relative;width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(236,196,64,.12);border:1px solid rgba(236,196,64,.3);
  transition:transform 340ms var(--ease),background-color 240ms var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;width:11px;height:1.8px;border-radius:2px;
  background:var(--gold-3);transform:translate(-50%,-50%);
  transition:transform 340ms var(--ease),opacity 240ms var(--ease);
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.is-open .faq__icon{transform:rotate(180deg);background:rgba(236,196,64,.24)}
.faq__item.is-open .faq__icon::after{opacity:0;transform:translate(-50%,-50%) rotate(0)}

.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 380ms var(--ease);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden;min-height:0}
.faq__a-inner p{
  padding:0 clamp(20px,2.4vw,30px) clamp(22px,2.2vw,26px);
  font-size:15.2px;line-height:1.72;color:var(--ink-2);max-width:72ch;
}

/* ── Final CTA ───────────────────────────────────────────── */
.cta{
  position:relative;padding:clamp(78px,9.5vw,124px) 0;overflow:hidden;
}
.cta__inner{position:relative;z-index:2;text-align:center}
.cta__inner .eyebrow{justify-content:center}
.cta__title{font-size:clamp(31px,4.7vw,58px);letter-spacing:-.035em;margin-bottom:20px}
.cta__sub{color:var(--on-dark-2);font-size:clamp(16px,.5vw + 15px,18.6px);max-width:56ch;margin:0 auto 34px}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ── Footer ──────────────────────────────────────────────── */
.footer{color:var(--on-dark);padding-top:clamp(52px,6vw,74px)}
.footer__inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,48px);
  padding-bottom:clamp(38px,4.4vw,54px);
}
.footer__tag{margin-top:16px;font-size:14.4px;line-height:1.62;color:var(--on-dark-3);max-width:34ch}
.footer__nav{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer__h{
  font-family:var(--f-head);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-3);margin-bottom:3px;
}
.footer__nav a{
  font-size:14.4px;color:var(--on-dark-2);
  transition:color 220ms var(--ease),transform 220ms var(--ease);
}
.footer__nav a:hover{color:var(--gold-3);transform:translateX(3px)}
.footer__meta{font-size:14.4px;color:var(--on-dark-3)}
.footer__social{display:flex;gap:10px}
.footer__social a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;border:1px solid rgba(244,246,251,.16);color:var(--on-dark-2);
  transition:all 240ms var(--ease);
}
.footer__social a:hover{
  transform:translateY(-3px);border-color:rgba(236,196,64,.55);
  color:var(--gold-3);background:rgba(236,196,64,.1);
}
.footer__social svg{width:19px;height:19px}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  padding-top:22px;padding-bottom:28px;
  border-top:1px solid rgba(244,246,251,.09);
  font-size:13px;color:var(--on-dark-3);
}

/* ── 7. Animation ────────────────────────────────────────── */
/* Scoped to .js, which the gate in each document's head sets. Without scripting
   the rule never applies and the content is simply visible, rather than hidden
   forever waiting for a reveal that will never come. */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity 760ms var(--ease),transform 760ms var(--ease);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}
/* The failsafe. Same (0,2,0) specificity as .is-in and deliberately placed
   after it, so whichever applies, the element ends up visible. */
.reveal-fallback [data-reveal]{opacity:1;transform:none}

@keyframes scroll-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,3%,0) scale(1.06)}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulse-line{0%,100%{opacity:.35;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}

/* ── 8. Responsive ───────────────────────────────────────── */
@media (max-width:1024px){
  .stats__grid{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .footer__inner{grid-template-columns:1fr 1fr;row-gap:38px}
  .hero__inner{grid-template-columns:1fr;gap:52px}
  .hero__copy{max-width:640px}
}
@media (max-width:1024px) and (min-width:721px){.br-md{display:inline}}

@media (max-width:880px){
  /* Single column early: the card copy is baked into the image, so a narrow
     column shrinks real text rather than reflowing it. */
  .img-grid,
  .work-grid{grid-template-columns:1fr}
  .svc-row__body{grid-template-columns:1fr;gap:14px}
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;
    flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
    min-height:100svh;padding:96px var(--gut) 44px;
    background:rgba(6,11,28,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform 460ms var(--ease),opacity 300ms var(--ease);
    overflow-y:auto;
  }
  .nav__links.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  /* Keep the wordmark above the full-screen panel it would otherwise sit under. */
  .logo{position:relative;z-index:2}
  .nav__link{
    padding:17px 4px;font-family:var(--f-head);font-size:26px;font-weight:700;
    color:#fff;border-bottom:1px solid rgba(244,246,251,.08);border-radius:0;
  }
  .nav__link::after{display:none}
  .nav__cta{margin:26px 0 0;justify-content:center;--btn-y:16px;font-size:15px}
  .nav.is-menu-open{background:transparent;box-shadow:none;border-bottom-color:transparent}
}

@media (max-width:720px){
  .compare__head{display:none}
  .compare__row{grid-template-columns:1fr}
  .compare__cell{padding:16px 20px}
  .compare__cell--old{padding-bottom:8px}
  .compare__cell--new{box-shadow:none;border-radius:0 0 2px 2px}
  .compare__label{
    display:block;margin-bottom:5px;
    font-family:var(--f-head);font-size:10.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .compare__cell--old .compare__label{color:#FF9C8A}
  .compare__cell--new .compare__label{color:var(--gold-3)}
  .founder{grid-template-columns:1fr;text-align:left}
  .step{grid-template-columns:auto 1fr;gap:18px}
  .step__num{width:52px;height:52px;font-size:15px}
  .step:not(:last-child)::after{left:26px;top:60px}
  .step__title{padding-top:10px}
  .footer__inner{grid-template-columns:1fr;row-gap:32px}
  .hero__actions .btn{flex:1 1 auto}
  .cta__actions .btn{width:100%}
  .hero__scroll{display:none}
}

@media (max-width:420px){
  .logo__img{height:34px}
  .logo--footer .logo__img{height:38px}
  .hero__ticks{gap:8px 16px;font-size:13px}
}

/* ── /founder: back link ─────────────────────────────────────
   Sits above the intro on the founder page. The arrow is a rotated chevron
   built from a rotated square so it needs no SVG and no icon font. */
.backlink{
  /* Pulled out of the flow and parked at the section's top left, just under the
     navbar. In flow it pushed the photo arc down and read as a heading above it,
     which is not what a back link should be. It stays first in the DOM so it is
     also the first thing a keyboard reaches. */
  position:absolute;top:calc(var(--sp-3) + 52px);left:var(--gut);z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-head);font-size:11.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--on-dark-2);
  transition:color 240ms var(--ease),gap 240ms var(--ease);
}
.backlink:hover{color:var(--gold-3);gap:14px}
.backlink__arrow{
  width:6px;height:6px;flex:none;
  border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  rotate:45deg;
}

/* ── /founder: story timeline ────────────────────────────────
   A vertical spine down the centre. Chapters carrying a photograph run as two
   columns and alternate side to side (.story__ch--flip swaps them); chapters
   without one sit centred on the spine at a narrower measure, so no row is ever
   left half empty. Below 880px the spine moves to the left edge and every
   chapter stacks image-over-text. */
/* Top padding has two jobs: clear the fixed navbar, and clear the back link,
   which is absolutely positioned inside that padding and ends 87px down. A
   plain clamp on a spacing token is not enough, because the token shrinks with
   the viewport while the back link does not: between 620 and 880px the padding
   fell to 84px and the heading landed on top of the link. The floor is stated
   outright instead. */
.section--story{
  padding-top:max(104px,calc(var(--sp-5) + 62px));
  padding-bottom:var(--sp-7);
}

/* The story hero is the heading and nothing else. The grid placement, z-index
   and text shadow it used to carry existed only to lift it clear of a bank of
   photographs behind it; on a flat navy ground they are dead weight. */
.story__lede{
  max-width:30ch;margin:0 auto clamp(20px,2.6vw,34px);
  text-align:center;
  font-family:var(--f-head);font-weight:800;
  line-height:1.06;letter-spacing:-.035em;
  color:var(--on-dark);
}
/* Two-line entity headline: the person's name, largest, then their role at
   the studio underneath in a smaller weight. The gold gradient lives on just
   the role's job-title span, set on .story__lede-role's markup, not here. */
.story__lede-name{
  display:block;text-wrap:balance;
  font-size:clamp(34px,3.6vw + 18px,64px);
}
.story__lede-role{
  display:block;margin-top:.32em;text-wrap:balance;
  font-size:clamp(17px,.9vw + 12px,26px);
  font-weight:700;letter-spacing:-.02em;
}

.story__intro{
  max-width:60ch;margin:0 auto clamp(40px,5vw,72px);
  text-align:center;
  color:var(--on-dark-2);
  font-size:clamp(15.5px,.45vw + 14px,17.5px);
  line-height:1.72;
}

.story{
  position:relative;list-style:none;
  width:100%;max-width:1060px;margin-inline:auto;padding:0;
}
/* the spine. Fades in and out at the ends rather than stopping dead. */
.story::before{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    rgba(236,196,64,0) 0%,
    rgba(236,196,64,.34) 8%,
    rgba(236,196,64,.34) 92%,
    rgba(236,196,64,0) 100%);
}
.story__ch{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.4vw,74px);
  align-items:center;
}
/* generous air between chapters, each should read as its own beat */
.story__ch + .story__ch{margin-top:clamp(56px,8vw,116px)}

/* the node on the spine, pinned to the chapter's own vertical centre */
.story__node{
  position:absolute;left:50%;top:50%;
  width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--gold-1);
  box-shadow:0 0 0 4px rgba(10,17,40,1),0 0 0 5px rgba(236,196,64,.32),0 0 18px rgba(236,196,64,.5);
}
.story__node--end{
  width:15px;height:15px;
  background:transparent;border:2px solid var(--gold-1);
  box-shadow:0 0 0 4px rgba(10,17,40,1),0 0 20px rgba(236,196,64,.45);
}

/* Column placement. Every chapter alternates strictly right / left down the
   page: by default the copy takes the right column (and a photograph, where
   there is one, the left), and .story__ch--flip reverses both.

   Text-only chapters follow the same rhythm and simply leave the opposite half
   empty. That is the point: a centred text block sits on top of the spine, so
   the line appears to run straight through the words. Keeping the copy in one
   half leaves the middle clear for the spine and its node.

   Only the columns swap. The copy stays left-aligned in both positions, because
   right-aligned body text is markedly harder to read. */
.story__ch .story__fig{grid-column:1;grid-row:1}
.story__ch .story__body{grid-column:2;grid-row:1}
.story__ch--flip .story__fig{grid-column:2;grid-row:1}
.story__ch--flip .story__body{grid-column:1;grid-row:1}

.story__fig{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(236,196,64,.22);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  transition:border-color 420ms var(--ease),transform 420ms var(--ease);
}
.story__fig img{
  display:block;width:100%;height:auto;
  aspect-ratio:4 / 5;object-fit:cover;
}
/* Landscape sources keep a landscape frame. Forcing a 4:3 group photo into the
   portrait crop cuts roughly a fifth off each side, which is enough to clip a
   person out of the shot. */
.story__fig--wide img{aspect-ratio:4 / 3}
.story__ch:hover .story__fig{border-color:rgba(236,196,64,.4);transform:translateY(-3px)}

/* Text-only chapters get a surface of their own. Without one they read as a
   short paragraph floating in a very large empty row, which is what made the
   page feel unfinished next to the chapters carrying a photograph.

   The panel is the homepage .msg card's treatment, so the two pages share a
   rhythm: every chapter is now one solid block on one side of the spine,
   whether that block is a photograph or a piece of writing.

   It cannot be made full-width instead. The spine runs down the centre, so a
   block spanning both halves would sit underneath the line. Widening happens
   inside the half: the panel fills its column and the copy drops its 56ch cap
   to use it. */
.story__ch--solo .story__body{
  padding:clamp(24px,2.6vw,38px);
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(236,196,64,.18);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.8);
  transition:border-color 420ms var(--ease),transform 420ms var(--ease);
}
.story__ch--solo:hover .story__body{border-color:rgba(236,196,64,.36);transform:translateY(-3px)}
.story__ch--solo .story__text{max-width:none}
/* the year reads as the chapter's marker here, so give it a little more weight */
.story__ch--solo .story__year{font-size:12.5px;padding:6px 13px}

.story__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:var(--sp-3);
  font-family:var(--f-head);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.story__year{
  display:inline-block;padding:5px 11px;border-radius:999px;
  letter-spacing:.09em;
  color:var(--gold-3);
  background:rgba(236,196,64,.11);
  border:1px solid rgba(236,196,64,.3);
}
.story .story__title{
  font-size:clamp(22px,1.5vw + 15px,32px);letter-spacing:-.03em;
  color:var(--on-dark);margin-bottom:var(--sp-2);text-wrap:balance;
}
.story__text{
  color:var(--on-dark-2);
  font-size:clamp(15.5px,.45vw + 14px,17.5px);
  line-height:1.72;max-width:56ch;text-wrap:pretty;
}

.story__end{
  margin-top:clamp(64px,9vw,128px);
  text-align:center;
}
.story__end-text{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(20px,1.4vw + 14px,28px);letter-spacing:-.028em;
  color:var(--on-dark);margin-bottom:var(--sp-4);
}
.story__end-actions{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;
}

.story__faq{margin-top:clamp(64px,9vw,128px)}
.story__faq .faq{max-width:760px;margin-inline:auto}
.story__social{display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px)}

/* Single column: the spine moves to the left edge and every chapter stacks,
   photograph first. .story__ch--solo drops its centring so the two kinds of
   chapter share one left-aligned rhythm. */
@media (max-width:880px){
  .story{padding-left:34px}
  .story::before{left:5px;transform:none}
  .story__ch{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  /* grid-row:auto rather than an explicit 2: a text-only chapter has no figure,
     and pinning its body to row 2 would leave an empty row 1 plus a row gap
     above it. Auto-placement puts the body under the photo where there is one
     and in the first row where there is not. */
  .story__ch .story__fig{grid-column:1;grid-row:1}
  .story__ch .story__body{grid-column:1;grid-row:auto}
  .story__node{left:-29px;top:14px;transform:none}
  .story__fig img{aspect-ratio:3 / 2}
  .story__lede{max-width:22ch}
}