/* ============================================================
   Vanenberg — near-clone build to DESIGN_SPEC.md
   Tokens, type scale and grid templates taken verbatim from spec.
   COLOURS ARE PLACEHOLDERS until the Vanenberg palette arrives.
   ============================================================ */

/* ---------- Vanenberg brand palette ---------- */
:root{
  --brand--ink:      #0E2B2A;  /* deep teal page ground */
  --brand--white:    #FFFFFF;
  --brand--pale:     #E0F4F5;  /* logo pale aqua - accents, badges */
  --brand--mint:     #CDE9E6;  /* light section bands */
  --brand--deep:     #10312F;  /* deepest card */
  --brand--deeper:   #1A4342;
  --brand--mid:      #2B5658;
  --brand--teal:     #60868A;  /* brand teal - the light-on-dark card */
  --brand--accent:   #9FD4D6;  /* bright aqua accent */
  --brand--muted:    #8FA9AA;
  --brand--transparent:#0000;

  /* intro timings - the only numbers worth tuning */
  --loader-hold:3300ms;
  --clear-dur:350ms;
  --split-dur:600ms;
  --wipe-dur:850ms;
  --black-hold:300ms;
  --reveal-dur:700ms;

  --nav-h:74px;
  --logo-h:42px;

  /* ---------- 1.2 Spacing ramp (verbatim) ---------- */
  --padding--0rem:0;      --padding--0-25rem:.25rem; --padding--0-5rem:.5rem;
  --padding--0-75rem:.75rem; --padding--1rem:1rem;   --padding--1-5rem:1.5rem;
  --padding--2rem:2rem;   --padding--3rem:3rem;      --padding--4rem:4rem;
  --padding--5rem:5rem;   --padding--6rem:6rem;      --padding--8rem:8rem;
  --padding--10rem:10rem; --padding--12rem:12rem;

  /* column ramp */
  --one-col--25:25%; --two-col--33:33.33%; --two-col--50:50%;
  --three-col--66:66.66%; --three-col--75:75%;

  /* free substitutes for the Typekit families */
  --f-display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif; /* neue-haas-grotesk-display */
  --f-emphasis:"Instrument Serif",Georgia,"Times New Roman",serif;        /* freightdispcmp-pro */
  --f-logo:"Poppins","Century Gothic",Futura,sans-serif;   /* matches the wordmark */
  --f-body:"Zilla Slab",Georgia,serif;                                    /* Stag Book Web / Stag Web */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--brand--ink);
  color:var(--brand--white);
  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--brand--teal);outline-offset:3px}

/* ---------- 1.3 Type classes (exact values from spec) ---------- */
.h2-standard{font-family:var(--f-display);font-weight:600;font-size:67px;line-height:100%}
.h3-standard{font-family:var(--f-display);font-weight:600;font-size:51px;line-height:110%}
.h4-standard{font-family:var(--f-display);font-weight:600;font-size:38px;line-height:120%}
.h5-standard{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:110%}
.h6-standard{font-family:var(--f-display);font-weight:600;font-size:21px;line-height:120%;letter-spacing:.42px}

.h1-emphasis{font-family:var(--f-emphasis);font-weight:300;font-size:clamp(6rem,20cqi,8rem);line-height:80%}
.h3-emphasis{font-family:var(--f-emphasis);font-weight:300;font-size:61px;line-height:100%}
.h4-emphasis{font-family:var(--f-emphasis);font-weight:300;font-size:45.5px;line-height:100%}
.h5-emphasis{font-family:var(--f-emphasis);font-weight:300;font-size:33.5px;line-height:110%}
.h6-emphasis{font-family:var(--f-emphasis);font-weight:400;font-size:25px;line-height:100%}

.p-standard{font-family:var(--f-body);font-weight:400;font-size:15px;line-height:140%;letter-spacing:.7px}
.technical-standard{font-family:var(--f-body);font-weight:500;font-size:11px;line-height:140%;letter-spacing:1.5px;text-transform:uppercase}
.technical-standard_small{font-family:var(--f-body);font-weight:500;font-size:9px;line-height:100%;letter-spacing:1.5px;text-transform:uppercase}

.half{max-width:var(--two-col--50)}

@media (max-width:991px){
  .h1-emphasis{font-size:clamp(4.5rem,18cqi,6.5rem)}
}
@media (max-width:767px){
  .h2-standard{font-size:40px}
  .h3-standard{font-size:33px}
  .h4-standard{font-size:28px}
  .h1-emphasis{font-size:65px}
  .h3-emphasis{font-size:41px}
  .h4-emphasis{font-size:35.5px}
  .h5-emphasis{font-size:30px}
  .h6-emphasis{font-size:23px}
  .h6-standard{font-size:19px}
  .p-standard{font-size:14px}
  .technical-standard{font-size:10px}
  .half{max-width:100%}
}
@media (max-width:479px){
  .h5-standard{font-size:23px}
}

/* ---------- 2.3 Page shell ---------- */
.unicorn{
  position:fixed;inset:0;z-index:0;
  background:var(--brand--ink);
  pointer-events:none;
}
.unicorn canvas{width:100%;height:100%;display:block}

.content-wrapper{position:relative;z-index:1}
.content-wrapper.dark-theme{color:var(--brand--white)}

/* container: full width, NO horizontal padding — gutters live on inner wrappers */
.container{width:100%;margin-inline:auto;padding-inline:0;container-type:inline-size}
.gutter{padding-inline:var(--padding--1-5rem)}

.section{position:relative;background:transparent}
.section.light-theme{background:var(--brand--mint);color:var(--brand--ink)}


/* ---------- Hero: headline high, clock and CTA pinned to the floor ---------- */
.hero{min-height:100svh;display:flex}
.hero-inner{
  width:100%;display:flex;flex-flow:column;justify-content:space-between;
  padding-top:calc(var(--nav-h) + var(--padding--3rem));
  padding-bottom:var(--padding--3rem);
}
.hero h1{max-width:16ch;font-size:clamp(34px,6.6vw,72px);line-height:1.02;letter-spacing:-.02em}
.hero-lede{
  font-family:var(--f-emphasis);font-weight:300;
  font-size:clamp(17px,2.1vw,25px);line-height:1.35;
  max-width:46ch;margin-top:var(--padding--2rem);
}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--padding--2rem);flex-wrap:wrap}
.hero-clock{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:1.2px}
.hero-clock .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.hero-cta .button-arrow{width:70px}
.hero-cta:hover .button-arrow{width:104px}

/* ---------- 2.4 Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:1100;height:var(--nav-h);
  display:flex;align-items:center;color:var(--brand--white);background:transparent;
  transition:background-color .35s ease;
}
.nav-inner{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--padding--1-5rem);
}
/* see-through across the hero, then mint for the rest of the page */
.past-hero .nav{background:var(--brand--mint);color:var(--brand--ink)}
.past-hero .nav-border{background:rgba(14,43,42,.25)}
.past-hero .logo-full--light{opacity:0}
.past-hero .logo-full--dark{opacity:1}
.nav-border{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.35)}
.logo-svg{display:flex;align-items:center;gap:10px;overflow:hidden}
.logo-mark{width:16px;height:16px;flex:none}
.logo-svg{position:relative;display:block;height:var(--logo-h)}
.logo-full{height:var(--logo-h);width:auto;display:block}
.logo-full--dark{position:absolute;left:0;top:0;opacity:0}
.logo-full{transition:opacity .3s ease}
.footer-logo{height:72px;width:auto;margin-bottom:var(--padding--2rem)}
.nav-clock{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.nav-clock .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.menu-toggle{
  background:none;border:0;padding:6px 0;cursor:pointer;color:inherit;
  display:flex;align-items:center;gap:8px;
  font-size:16px;letter-spacing:1.1px;
}

/* ---------- 2.5 Menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:1000;display:none}
.menu.is-open{display:block}
.menu-wrapper{
  width:100%;height:100%;
  padding:var(--padding--12rem) var(--padding--1-5rem) var(--padding--1-5rem);
  background:var(--brand--ink);color:var(--brand--white);
  display:flex;flex-flow:column;justify-content:space-between;
}
.menu-primary{display:flex;flex-flow:column;align-items:flex-start;gap:2px}
.menu-primary a{display:block;padding-block:2px}
.menu-secondary{display:flex;flex-flow:column;align-items:flex-start;gap:8px;margin-top:var(--padding--3rem)}
.menu-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* ---------- 3.7 Buttons — the wipe ---------- */
.button{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:none;border:0;padding:0;color:inherit;font:inherit;
}
.button-label{display:inline-block;overflow:hidden;position:relative}
.button-label span{display:inline-block}
.button-arrow{height:1px;width:44px;background:currentColor;transition:width .45s cubic-bezier(.19,1,.22,1)}
.button:hover .button-arrow{width:70px}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border:1px solid currentColor;border-radius:999px;
  overflow:hidden;
}

/* ---------- 2.1 The four editorial grids (verbatim) ---------- */
.grid_one{
  display:grid;
  grid-template:
    ".        .       first  first"
    "second   third   first  first"
    "seventh  seventh fourth fifth"
    "seventh  seventh sixth  ."
    / 1fr 1fr 1fr 1fr;
  gap:var(--padding--1rem);
}
.grid_two{
  display:grid;grid-auto-columns:.5fr;
  grid-template:
    ".      first first second"
    "third  first first ."
    / 1fr 1fr 1fr 1fr;
  gap:var(--padding--1rem);
}
.grid_three{
  display:grid;grid-auto-columns:1fr;
  grid-template:
    ".      first  second second"
    "third  third  second second"
    "third  third  fourth ."
    / 1fr 1fr 1fr 1fr;
  gap:var(--padding--1rem);
}
.grid_nine{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  column-gap:var(--padding--1rem);
  row-gap:var(--padding--4rem);
  width:100%;
}
.a-first{grid-area:first}     .a-second{grid-area:second}
.a-third{grid-area:third}     .a-fourth{grid-area:fourth}
.a-fifth{grid-area:fifth}     .a-sixth{grid-area:sixth}
.a-seventh{grid-area:seventh}

/* section-intro copy sitting inside an empty cell, baseline-aligned */
.grid-intro{display:flex;flex-flow:column;justify-content:flex-end;gap:var(--padding--1rem);padding-bottom:var(--padding--1rem)}

/* ---------- 2.2 Card ---------- */
.grid-item{
  position:relative;display:flex;flex-flow:column;justify-content:space-between;
  align-items:flex-start;aspect-ratio:1/1;padding:var(--padding--1-5rem);
  overflow:hidden;text-decoration:none;color:var(--brand--white);
  background:var(--brand--deep);
}
.grid-item.bg-deep{background:var(--brand--deep)}
.grid-item.bg-mid{background:var(--brand--mid)}
.grid-item.bg-teal{background:var(--brand--teal);color:var(--brand--ink)}
.grid-item.bg-deeper{background:var(--brand--deeper)}
.grid-item.bg-ink{background:#0A2322}


/* ---- numbered animation slots (scaffolding for review) ---- */
.art-no{
  position:absolute;left:0;bottom:0;z-index:20;
  min-width:42px;height:32px;padding:0 11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand--pale);color:var(--brand--ink);
  font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:1.4px;
}
.grid-item.bg-teal .art-no{background:var(--brand--ink);color:var(--brand--pale)}
/* keep card copy clear of the badge strip */
.grid-item{padding-bottom:calc(var(--padding--1-5rem) + 34px)}
.grid-item-image{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.grid-item-image svg{width:100%;height:100%;display:block}
.grid-item-link{position:absolute;inset:0;z-index:10}
.grid-item__top,.grid-item__btm{position:relative;z-index:6}
.grid-item__btm{display:flex;flex-flow:column;align-items:flex-start;gap:var(--padding--0-75rem)}
.tag-pill{
  display:inline-flex;align-items:center;padding:4px 12px;
  border:1px solid currentColor;border-radius:999px;
}
.card-cta{font-family:var(--f-emphasis);font-weight:400;font-size:25px;line-height:100%}

/* ---------- Section rhythm ---------- */
.statement-wrapper{padding:var(--padding--12rem) var(--padding--1-5rem) var(--padding--10rem)}
.grid-section-wrapper{padding:var(--padding--8rem) var(--padding--1-5rem)}
.newsletter-wrapper{
  padding:var(--padding--6rem) var(--padding--1-5rem);
  display:flex;flex-flow:column;align-items:flex-start;gap:var(--padding--1-5rem);
  min-height:447px;justify-content:center;
}
.section-head{display:flex;flex-flow:column;gap:var(--padding--0-5rem);margin-bottom:var(--padding--4rem)}

/* newsletter form */
.news-form{display:flex;gap:var(--padding--1rem);width:100%;max-width:620px;flex-wrap:wrap;align-items:center}
.news-form input{
  flex:1 1 240px;font-family:var(--f-body);font-size:15px;letter-spacing:.7px;color:inherit;
  background:transparent;border:0;border-bottom:1px solid currentColor;padding:12px 2px;
}
.news-form input::placeholder{color:currentColor;opacity:.45}
.news-form input:focus{outline:none;border-bottom-color:var(--brand--teal)}

/* ---------- 2.6 Footer ---------- */
.footer-container{overflow:hidden;position:relative;z-index:1}
.footer-wrapper{
  background:var(--brand--ink);color:var(--brand--white);
  padding:var(--padding--6rem) var(--padding--1-5rem) var(--padding--1-5rem);
  min-height:520px;display:flex;flex-flow:column;justify-content:space-between;gap:var(--padding--4rem);
}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--padding--3rem)}
.footer-cols h5{margin-bottom:var(--padding--1rem);opacity:.6}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--padding--0-5rem)}
.footer-cols li{font-family:var(--f-emphasis);font-weight:400;font-size:25px;line-height:100%}
.footer-strapline{font-family:var(--f-emphasis);font-weight:300;font-size:clamp(2.5rem,7vw,61px);line-height:100%}
.footer-btm{display:flex;justify-content:space-between;align-items:center;gap:var(--padding--1-5rem);flex-wrap:wrap;
  padding-top:var(--padding--1-5rem);border-top:1px solid rgba(255,255,255,.2)}



/* ============================================================
   Intro - pale loader, then a black-out curtain that wipes open
   from the centre. Timings ported from the measured spec.
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:2000;
  background:#FFFFFF;                      /* plain white, as on the template */
  display:grid;place-items:center;
}
.loader p{
  font-family:var(--f-emphasis);font-weight:500;
  font-size:clamp(15px,3.1vw,36px);letter-spacing:.06em;word-spacing:.12em;
  padding-inline:var(--padding--1-5rem);text-align:center;max-width:none;white-space:nowrap;
  /* ink rises up through the glyphs */
  transform:scaleY(.84);transform-origin:50% 50%;   /* shorter, wider letterforms */
  position:relative;display:inline-block;
}
/* Two stacked copies of the line - a pale one underneath, a black one on top
   revealed upward by a clip. Animating the clip leaves the text raster alone,
   where the old background-clip gradient had to redraw every glyph each frame
   and stuttered on a slower machine. */
.ink-base{color:#C8C8C8;display:block}
.ink-fill{
  position:absolute;left:0;top:0;width:100%;color:#000;display:block;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;
}
.fonts-ready .ink-fill{
  animation:introInk 2.9s cubic-bezier(.35,.08,.5,.92) forwards .25s;
}
@keyframes introInk{to{clip-path:inset(-12% 0 0 0)}}

.is-clearing .loader p{opacity:0;transition:opacity var(--clear-dur) ease}

.split-line{
  will-change:transform;
  position:fixed;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;z-index:2050;
  background:var(--brand--ink);
  transform:scaleY(0);transform-origin:50% 50%;   /* grows from the centre, up and down together */
}
.is-splitting .split-line{
  transform:scaleY(1);
  transition:transform var(--split-dur) cubic-bezier(.6,0,.25,1);
}
.is-lifting .split-line{opacity:0;transition:opacity var(--reveal-dur) ease}

.curtain{
  position:fixed;inset:0;z-index:2100;will-change:transform,opacity;
  background:var(--brand--ink);
  transform:scaleX(0);
  transform-origin:50% 50%;            /* centre-out, both directions at once */
}
.is-wiping .curtain{
  transform:scaleX(1);
  transition:transform var(--wipe-dur) cubic-bezier(.7,0,.25,1);
}
/* loader stays put until the curtain has fully closed - no flash of the hero */
.is-wiping .loader{visibility:hidden;transition:visibility 0s linear var(--wipe-dur)}
.is-lifting .curtain{
  opacity:0;pointer-events:none;
  transition:opacity var(--reveal-dur) ease;
}
.intro-lock{overflow:hidden}
.intro-done .loader,.intro-done .curtain,.intro-done .split-line{display:none}

/* ---------- 3.4 word reveal base state ---------- */
.word{display:inline-block}

/* ---------- Responsive (Webflow breakpoints) ---------- */
@media (max-width:991px){
  .grid_one,.grid_two,.grid_three{
    grid-template:none;grid-template-columns:1fr 1fr;gap:var(--padding--1rem);
  }
  .grid_one > *,.grid_two > *,.grid_three > *{grid-area:auto}
  .grid_nine{grid-template-columns:1fr 1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .statement-wrapper{padding:var(--padding--8rem) var(--padding--1-5rem) var(--padding--6rem)}
}
@media (max-width:767px){
  :root{--nav-h:88px;--logo-h:44px}
  .grid_one,.grid_two,.grid_three,.grid_nine{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .menu-wrapper{padding-top:var(--padding--8rem)}
  .nav-clock{display:none}
}

/* ============================================================
   Card artwork — animated modules
   Idiom borrowed from smartcat.com; keyframe values ported from
   their live stylesheet (flare / ripple / wire-travel / count-tick /
   chat-dots / marquee / shimmer / drift). Pure CSS, no libraries.
   ============================================================ */
.sc-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* artwork holds still until its card is revealed, then starts */
.sc-art,.sc-art *{animation-play-state:paused}
.is-live .sc-art,.is-live .sc-art *{animation-play-state:running}
.sc-art svg{width:100%;height:100%;display:block}
.sc-art .ln{stroke:currentColor;fill:none;stroke-width:.6;opacity:.32}

/* ---- 1. Map flares: dot + two ripple rings + city tag ---- */
.sc-flare__pt{position:absolute;left:var(--x);top:var(--y)}
.sc-flare__pt i,.sc-flare__pt b{position:absolute;left:0;top:0}
.sc-flare__dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  transform:translate(-50%,-50%);
  animation:sc-flare-dot 6s ease-in-out infinite;animation-delay:var(--d);
}
.sc-flare__ring{
  width:5px;height:5px;border-radius:50%;border:1px solid currentColor;
  transform:translate(-50%,-50%);
  animation:sc-ripple 6s ease-out infinite;animation-delay:var(--d);
}
.sc-flare__ring--2{animation-delay:calc(var(--d) + .45s)}
.sc-flare__tag{
  transform:translate(10px,-26px);white-space:nowrap;
  font-family:var(--f-body);font-weight:500;font-size:8.5px;letter-spacing:1.2px;
  text-transform:uppercase;border:1px solid currentColor;border-radius:999px;
  padding:3px 8px;background:rgba(0,0,0,.18);
  animation:sc-tagflare 6s ease-in-out infinite;animation-delay:var(--d);
}
@keyframes sc-flare-dot{
  0%      {opacity:0;transform:translate(-50%,-50%) scale(.4)}
  8%,28%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  40%,100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}
}
@keyframes sc-ripple{
  0%      {opacity:.75;transform:translate(-50%,-50%) scale(.5)}
  24%     {opacity:0}
  34%,100%{opacity:0;transform:translate(-50%,-50%) scale(8)}
}
@keyframes sc-tagflare{
  0%      {opacity:0;transform:translate(10px,-23px)}
  7%,28%  {opacity:1;transform:translate(10px,-26px)}
  38%,100%{opacity:0;transform:translate(10px,-28px)}
}

/* ---- 2. Wire travel: a pulse running along the line ---- */
.sc-wire .trace{
  stroke:currentColor;fill:none;stroke-width:1.4;opacity:.95;
  stroke-dasharray:.12 1;
  animation:sc-wire-travel 2.6s cubic-bezier(.45,0,.4,1) infinite;
}
.sc-wire .trace--2{animation-delay:-.9s}
.sc-wire .trace--3{animation-delay:-1.8s}
.sc-wire .node{fill:currentColor;opacity:.75}
@keyframes sc-wire-travel{0%{stroke-dashoffset:1.12}100%{stroke-dashoffset:-1}}

/* ---- 3. Count tick: odometer reel ---- */
.sc-count{display:flex;align-items:center;justify-content:center;height:100%}
.sc-count__win{
  height:1.05em;overflow:hidden;font-family:var(--f-display);
  font-weight:600;font-size:46px;line-height:1.05;opacity:.9;
}
.sc-count__reel{display:flex;flex-direction:column;animation:sc-reel 7s steps(7) infinite}
.sc-count__reel span{height:1.05em}
/* -700% resolved against the reel's own height, parking it far past the last
   number and leaving the tile blank. One reel height steps through all seven. */
@keyframes sc-reel{to{transform:translateY(-100%)}}

/* ---- 4. Typing dots ---- */
.sc-dots{display:flex;gap:7px;align-items:center;justify-content:center;height:100%}
.sc-dots i{
  width:8px;height:8px;border-radius:50%;background:currentColor;
  animation:sc-chat-dots 1.4s ease-in-out infinite;
}
.sc-dots i:nth-child(2){animation-delay:.18s}
.sc-dots i:nth-child(3){animation-delay:.36s}
@keyframes sc-chat-dots{
  0%,80%,100%{opacity:.3;transform:translateY(0)}
  40%        {opacity:1;transform:translateY(-22%)}
}

/* ---- 5. Language marquee ---- */
.sc-marquee{display:flex;flex-direction:column;justify-content:center;height:100%;gap:11px;overflow:hidden}
.sc-marquee__row{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.sc-marquee__track{display:flex;gap:14px;white-space:nowrap;flex:none;
  animation:sc-marquee 22s linear infinite}
.sc-marquee__row--b .sc-marquee__track{animation-duration:31s;animation-direction:reverse}
.sc-marquee__track span{font-family:var(--f-body);font-weight:500;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;opacity:.7}
@keyframes sc-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---- 6. Concentric pulse ---- */
.sc-pulse{position:absolute;inset:0;display:grid;place-items:center}
.sc-pulse i{position:absolute;border:1px solid currentColor;border-radius:50%;
  width:64px;height:64px;animation:sc-pulse 4.5s ease-in-out infinite}
.sc-pulse i:nth-child(2){animation-delay:-1.5s}
.sc-pulse i:nth-child(3){animation-delay:-3s}
@keyframes sc-pulse{
  0%,100%{transform:scale(.85);opacity:.25}
  50%    {transform:scale(1.35);opacity:.8}
}

/* ---- 7. Shimmer skeleton ---- */
.sc-skel{display:flex;flex-direction:column;justify-content:center;height:100%;gap:9px;padding:0 9%}
.sc-skel i{height:7px;border-radius:999px;display:block;
  background:linear-gradient(90deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.36) 45%,rgba(255,255,255,.12) 70%);
  background-size:220% 100%;
  animation:sc-shimmer 2.4s linear infinite}
.sc-skel i:nth-child(1){width:82%}
.sc-skel i:nth-child(2){width:64%;animation-delay:-.5s}
.sc-skel i:nth-child(3){width:73%;animation-delay:-1s}
.sc-skel i:nth-child(4){width:45%;animation-delay:-1.5s}
.grid-item.bg-teal .sc-skel i{
  background:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.12) 70%);
  background-size:220% 100%}
@keyframes sc-shimmer{0%{background-position:100% 50%}100%{background-position:-100% 50%}}

/* ---- 8. Language swap ---- */
.sc-swap{display:flex;flex-direction:column;justify-content:center;height:100%;gap:9px;padding:0 10%}
.sc-swap b{
  display:block;font-family:var(--f-body);font-weight:500;font-size:11px;
  letter-spacing:1.2px;text-transform:uppercase;
  animation:sc-swap 8s ease-in-out infinite;
}
.sc-swap b:nth-child(2){animation-delay:-2s}
.sc-swap b:nth-child(3){animation-delay:-4s}
.sc-swap b:nth-child(4){animation-delay:-6s}
@keyframes sc-swap{
  0%      {opacity:0;transform:translateX(38%)}
  8%,22%  {opacity:1;transform:translateX(0)}
  32%,100%{opacity:0;transform:translateX(-14%)}
}

/* ---- 9. Drifting orbs ---- */
.sc-orb{position:absolute;inset:0;overflow:hidden}
.sc-orb i{position:absolute;border-radius:50%;filter:blur(26px);opacity:.5;
  animation:sc-drift 20s ease-in-out infinite}
.sc-orb i:nth-child(1){width:150px;height:150px;left:8%;top:14%;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}
.sc-orb i:nth-child(2){width:120px;height:120px;right:6%;bottom:12%;animation-delay:-7s;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%)}
@keyframes sc-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-24px)}}

/* ---- 10. Processing ring ---- */
.sc-spin{position:absolute;inset:0;display:grid;place-items:center}
.sc-spin svg{width:60%;height:60%;animation:sc-spin 9s linear infinite}
.sc-spin circle{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:14 9;opacity:.7}
.sc-spin circle:nth-child(2){stroke-dasharray:5 11;opacity:.4}
@keyframes sc-spin{to{transform:rotate(1turn)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  .word{opacity:1!important}
  .sc-art *{animation:none!important}
  .sc-flare__ring{opacity:.25!important}
}

/* ============================================================
   Content pages - components the markdown maps onto
   ============================================================ */

/* nav links */
.nav-links{display:flex;align-items:center;gap:var(--padding--2rem)}
.nav-link{font-family:var(--f-body);font-weight:500;font-size:16px;letter-spacing:1.1px;
  text-transform:uppercase;position:relative;padding-block:4px;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.19,1,.22,1)}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:900px){.nav-links{display:none}}
/* the nav links replace it on desktop; it only returns when they hide */
@media (min-width:901px){.menu-toggle{display:none}}

/* overlay menu sub-links */
.menu-kids{display:flex;flex-wrap:wrap;gap:10px 18px;margin:6px 0 18px;max-width:70ch}
.menu-kids a{opacity:.6;transition:opacity .25s}
.menu-kids a:hover{opacity:1}
.menu-primary{overflow-y:auto;padding-right:8px}
.menu-primary a.h4-standard{margin-top:10px}

/* inner-page hero sits shorter than the home hero */
.hero--inner{min-height:74svh}
.hero--inner h1{max-width:20ch}
.hero-ctas{display:flex;gap:var(--padding--2rem);flex-wrap:wrap;align-items:center}
/* home hero CTA: just the word, no arrow, no pill */
.hero:not(.hero--inner) .hero-ctas .button-arrow{display:none}
.hero:not(.hero--inner) .hero-ctas .btn-solid{
  background:transparent;color:var(--brand--white);
  border:1px solid currentColor;border-radius:999px;
  padding:14px 34px;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(17px,1.8vw,23px);letter-spacing:-.01em;
  transition:background .3s,color .3s;
}
.hero:not(.hero--inner) .hero-ctas .btn-solid:hover{
  background:var(--brand--pale);color:var(--brand--ink);
}
.hero:not(.hero--inner) .hero-ctas .button-label span{font-size:inherit}

/* on the home hero the single CTA sits on the centre of the light source */
@media (min-width:900px){
  .hero:not(.hero--inner) .hero-inner{position:relative}
  .hero:not(.hero--inner) .hero-ctas{
    position:absolute;left:82%;top:52%;transform:translate(-50%,-50%);margin:0;
  }
}
.btn-solid{
  padding:14px 26px;border-radius:999px;background:var(--brand--pale);color:var(--brand--ink);
  transition:background .3s,color .3s;
}
.btn-solid .button-arrow{background:currentColor;width:34px}
.btn-solid:hover{background:var(--brand--white)}

/* section rhythm on content pages */
.section-block{padding-block:clamp(56px,8vw,110px)}
.section-block:has(.section-split){padding-block:clamp(72px,11vw,150px);min-height:88svh;display:flex;align-items:center}
.section-head{max-width:24ch;margin-bottom:var(--padding--2rem)}
.section .p-standard{max-width:70ch;margin-bottom:var(--padding--1rem)}
.sub-head{margin:var(--padding--2rem) 0 var(--padding--0-75rem)}
.prose-list{margin:0 0 var(--padding--1-5rem);padding-left:1.1rem;max-width:70ch;display:grid;gap:10px}
.prose-list li{font-family:var(--f-body);font-size:15px;line-height:140%;letter-spacing:.7px}
.prose-notes{margin:0;padding-left:1.2rem;max-width:70ch;display:grid;gap:10px;opacity:.75}
.prose-notes li{font-size:13.5px;line-height:150%}

/* stat row */
.band-stats{border-block:1px solid rgba(255,255,255,.14)}
.band-stats .stat-row{padding-block:var(--padding--4rem)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--padding--3rem)}
.stat__v{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.05}
.stat__l{font-family:var(--f-body);font-size:14.5px;line-height:145%;margin-top:12px;opacity:.8;max-width:34ch}
.stat__s{margin-top:12px;opacity:.5}
.light-theme .band-stats{border-color:rgba(14,43,42,.15)}
@media (max-width:900px){.stat-row{grid-template-columns:1fr;gap:var(--padding--2rem)}}

/* card grid */
.content-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.light-theme .content-cards{background:rgba(14,43,42,.15);border-color:rgba(14,43,42,.15)}
.content-card{background:var(--brand--ink);padding:clamp(24px,2.6vw,36px);
  display:flex;flex-flow:column;gap:12px;transition:background .35s}
.light-theme .content-card{background:var(--brand--mint)}
.content-card:hover{background:var(--brand--deeper)}
.light-theme .content-card:hover{background:var(--brand--pale)}
.content-card .p-standard{margin:0;opacity:.8}
.card-go{margin-top:auto;padding-top:10px;font-family:var(--f-emphasis);font-size:22px}
.card-go:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){.content-cards{grid-template-columns:1fr}}

/* two column list */
.two-col{list-style:none;margin:var(--padding--1rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--padding--2rem) var(--padding--3rem)}
.two-col li{font-family:var(--f-body);font-size:15px;line-height:145%;letter-spacing:.7px;
  padding-top:var(--padding--1rem);border-top:1px solid currentColor}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

/* cta band */
.cta-band{padding-block:clamp(56px,8vw,110px);max-width:74ch}
.cta-band .p-standard{margin-bottom:var(--padding--1rem)}
.cta-band .button{margin-top:var(--padding--2rem)}

/* faq */
.faq-list{max-width:74ch;border-top:1px solid currentColor}
.faq{border-bottom:1px solid currentColor;padding-block:var(--padding--1-5rem)}
.faq summary{cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;opacity:.6}
.faq[open] summary::after{content:"–"}
.faq .p-standard{margin-top:var(--padding--1rem);opacity:.85}

/* related */
.rel-links{display:flex;flex-wrap:wrap;gap:12px}
.rel-link{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  border:1px solid currentColor;font-family:var(--f-body);font-size:13px;letter-spacing:.8px;
  transition:background .3s,color .3s}
.rel-link:hover{background:var(--brand--ink);color:var(--brand--mint)}
.light-theme .rel-link:hover{background:var(--brand--ink);color:var(--brand--mint)}

/* footer */
.footer-tagline{margin-bottom:var(--padding--3rem);opacity:.8;max-width:40ch}
.footer-cols{grid-template-columns:repeat(4,1fr)}
.footer-cols li{font-size:14px;line-height:150%}
.footer-cols a{opacity:.75;transition:opacity .25s}
.footer-cols a:hover{opacity:1}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-cols{grid-template-columns:1fr}}

/* content-bearing tiles: keep the template look, but let real copy breathe */
.grid-item--content{
  aspect-ratio:auto;
  min-height:clamp(340px,32vw,440px);
  padding-bottom:calc(var(--padding--1-5rem) + 34px);
}
.grid-item--content .card-body{
  font-family:var(--f-emphasis);font-weight:400;
  font-size:clamp(16px,1.5vw,19px);line-height:1.35;opacity:.9;max-width:44ch;
}
.grid-item--content .grid-item__btm{gap:var(--padding--0-75rem)}
.grid-item--content .card-cta{font-size:21px;opacity:.9}
.grid-item.bg-teal{color:var(--brand--ink)}
.grid-item.bg-teal .art-no{background:var(--brand--ink);color:var(--brand--pale)}

/* prose running beside an animated panel */
.section-split{display:grid;grid-template-columns:1.15fr .75fr;gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.section-split__text .p-standard{max-width:56ch}
.art-panel{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  min-height:0;max-width:460px;margin-left:auto;width:100%;
}
@media (max-width:900px){
  .section-split{grid-template-columns:1fr}
  .art-panel{aspect-ratio:4/3;min-height:0}
}

/* three cards: one wider tile, but not double-height like grid_two */
.grid_trio{
  display:grid;
  grid-template:
    ".      first  first  second"
    "third  .      .      ."
    / 1fr 1fr 1fr 1fr;
  gap:var(--padding--1rem);
}
@media (max-width:991px){
  .grid_trio{grid-template:none;grid-template-columns:1fr 1fr}
  .grid_trio > *{grid-area:auto}
}
@media (max-width:767px){.grid_trio{grid-template-columns:1fr}}

/* Packed tile grid: rows of at most three, split evenly, never a hole. */
.grid_packed{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--padding--1rem);width:100%}
.grid_packed > .span-2{grid-column:span 2;aspect-ratio:1/1}
.grid_packed > .span-3{grid-column:span 3;aspect-ratio:3/2}
.grid_packed > .span-6{grid-column:span 6;aspect-ratio:3/1}
@media (max-width:991px){
  .grid_packed{grid-template-columns:1fr 1fr}
  .grid_packed > *{grid-column:span 1;aspect-ratio:1/1}
  .grid_packed > *:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:2/1}
}
@media (max-width:767px){
  .grid_packed{grid-template-columns:1fr}
  .grid_packed > *,.grid_packed > *:last-child:nth-child(odd){grid-column:span 1;aspect-ratio:4/3}
}

/* The line artwork ran straight through the card's title. It now sits behind
   a soft scrim so the text reads cleanly over it. */
.grid-item--content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:5;
  background:linear-gradient(to top,rgba(6,26,25,.92) 18%,rgba(6,26,25,.62) 55%,rgba(6,26,25,0) 100%);
  pointer-events:none;
}
.grid-item.bg-teal.grid-item--content::after{
  background:linear-gradient(to top,rgba(224,244,245,.94) 18%,rgba(224,244,245,.66) 55%,rgba(224,244,245,0) 100%);
}
.grid-item__top,.grid-item__btm{z-index:7}
.art-no{z-index:7}

/* The statement band had no gutter between the heading and the copy, and held
   a half-empty screen beneath it. */
.section-split{gap:clamp(40px,5vw,88px)}
.section-block:has(.section-split){min-height:0}

/* The statement heading is a flex sibling of the copy-and-artwork block and
   had no gutter, so the last word ran straight into the paragraph. */
.section-block:has(.section-split){gap:clamp(40px,5vw,90px)}
.section-block:has(.section-split) > .section-head{flex:0 0 30%}

/* The closing call to action sat in the left third of a full-width band with
   nothing beside it. Centred, it reads as deliberate and fills the section. */
.cta-band{max-width:70ch;margin-inline:auto;text-align:center}
.cta-band .button{margin-inline:auto}

/* Sources sat as a narrow list in the left third. They now run in columns
   across the band. */
.prose-notes{max-width:none;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px 48px}
.prose-list{max-width:none;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px 48px}

/* ---- Navigation, measured from the template --------------------------
   Bar 74px. Links 11px, medium, 1.5px tracking, uppercase. Each link is
   masked so it rises up into the bar one after another, left to right,
   rather than fading in. Once the page scrolls, the bar takes a ground
   colour and the wordmark drops away, leaving the mark alone. */
.nav-link{
  font-family:var(--f-technical,var(--f-display));
  font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  text-decoration:none;color:inherit;display:block;
}
.nav-links{gap:var(--padding--3rem)}
.nav-link-mask{display:block;overflow:hidden;line-height:1.35}

/* the mark rides in the same slot as the wordmark and takes over on scroll */
.logo-mark-img{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:calc(var(--logo-h) * .82);width:auto;opacity:0;
  transition:opacity .35s ease;
}
.past-hero .logo-full--light,
.past-hero .logo-full--dark{opacity:0}
.past-hero .logo-mark-img{opacity:1}
/* the mark never moves - only the word beside it disappears */
.logo-svg{width:auto;min-width:calc(var(--logo-h) * .82)}

/* ---- Reference numbers, preview builds only ---------------------------
   Section badges and tile numbers so a section or a tile can be named in
   conversation. The live build omits the body class, so none of this shows. */
.sec-no{display:none}
.preview-labels .sec-no{
  display:block;position:absolute;top:10px;left:10px;z-index:60;
  font-family:var(--f-technical,monospace);font-size:10px;font-weight:600;
  letter-spacing:1.4px;padding:3px 8px;border-radius:3px;
  background:#B4341F;color:#fff;pointer-events:none;
}
/* tile numbers are part of the artwork, so they only appear in preview too */
.art-no{display:none}
.preview-labels .art-no{display:block}

/* ---- Tile artwork: above the copy, resting on the title ---------------- */
.grid-item-image{
  position:relative;inset:auto;z-index:6;
  flex:1 1 auto;min-height:0;width:100%;
  padding-block:8px 2px;pointer-events:none;
}
/* the module classes sit on this element itself, so their own layout still
   applies - nothing here should override the inner pieces */
.grid-item-image svg{height:100%;width:auto;max-width:74%;margin-inline:auto;display:block}
/* the copy no longer sits under the drawing, so the scrim can go */
.grid-item--content::after{display:none}
.grid-item__btm{margin-top:2px}