/* ==========================================================================
   TWINE GROWTH - DESIGN SYSTEM
   Single source of truth for every page on the site.
   Any new page includes only this file plus its own section markup.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Components  (eyebrow, button, card, meta-tile, nav, footer)
     06  Section surfaces & rhythm
     07  Motion
     08  Utilities
   ========================================================================== */

/* ---------- 01  TOKENS ------------------------------------------------- */
:root{
  --tex-inline:url(/assets/media/0efe3e707920.avif);
  --chip-label:#FFFFFF;        /* white belongs INSIDE pills, buttons and chips only */
  --btn-label:var(--chip-label);

  /* Brand core */
  --ink:#101A1D;
  --ink-deep:#0C1417;
  --orange:#F15C36;
  --orange-ink:#E35A28;        /* icon stroke colour from brand SVGs */
  --orange-hover:#D84B27;
  --paper:#E9E3D4;             /* lightest beige - replaces the old near-white */
  --tan:#DCD5C2;               /* button faces; sampled #DAD4C2 from live site */
  --sand:#E7D8C2;
  --stone:#B7A58B;             /* sampled heading colour on live site is #B8AE96 */

  /* Dark surface system (hero + dark sections sit over texture) */
  --bg:#101A1D;
  /* Surface tints and borders are warm beige, not neutral white, so panels
     sit in the brand rather than greying it out. */
  --surface:rgba(233,227,212,.045);
  --surface-2:rgba(233,227,212,.075);
  --line:rgba(233,227,212,.13);
  --line-strong:rgba(233,227,212,.22);

  /* Text on dark */
  --text:#CDC3AD;              /* body */
  --text-bright:#BCAF94;       /* headings, logo, tile values - sampled from design */
  --text-soft:rgba(205,195,173,.70);

  /* Light surface system (for pale sections) */
  --bg-light:#DCD5C2;
  --card-light:#F3EEE4;
  --line-light:#CFC6B4;
  --text-dark:var(--ink);
  --text-dark-soft:#5E6A6D;

  /* Five Fibre accents */
  --fibre-1:#E53B10;
  --fibre-2:#6EA9D8;
  --fibre-3:#3E8E6B;
  --fibre-4:#55538D;
  --fibre-5:#FFAD0A;

  /* Typography */
  --font-display:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Line-height scale - set once here, used everywhere. Change these and the
     whole site's text rhythm moves together. */
  --lh-display:1.04;           /* headings - tight, display type needs less */
  --lh-body:1.5;               /* body copy and leads */
  --lh-ui:1.35;                /* buttons, labels, tight UI text */

  /* Fluid type scale - one system, scales with viewport, no breakpoint soup */
  --t-hero:clamp(2rem, 1.05rem + 4.0vw, 4.35rem);
  --t-h2:clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
  --t-h3:clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  --t-lead:clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-micro:.74rem;
  --t-tile:clamp(.82rem, .74rem + .22vw, .95rem);   /* hero tile values */

  /* Spacing scale */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:44px; --s-8:64px; --s-9:88px; --s-10:120px;

  /* Section rhythm (fluid) */
  --section-y:clamp(64px, 8vw, 112px);

  /* Shell */
  --header-h:84px;             /* fixed header clearance for the first section */
  --wrap:1200px;
  --wrap-narrow:820px;
  --gutter:clamp(20px, 4vw, 40px);

  /* Radius & shadow */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --shadow:0 18px 44px rgba(0,0,0,.38);
  --shadow-lg:0 28px 70px rgba(0,0,0,.5);

  /* Control heights - keeps every interactive element on one rhythm */
  --control-h:52px;
  --control-h-sm:42px;
}

/* ---------- 02  RESET & BASE ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

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

/* Fonts - self-hosted, subset, separate files so they cache across all pages */
@font-face{
  font-family:'Familjen Grotesk';
  src:url(/assets/media/bb7b6b440d49.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Google Sans';
  src:url(/assets/media/9bb69e689246.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- 03  TYPOGRAPHY -------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:500;             /* two steps down from 700 */
  line-height:var(--lh-display);
  letter-spacing:-.035em;
  color:var(--text-bright);
  text-wrap:balance;
}
h1,.t-hero{font-size:var(--t-hero)}
h2,.t-h2{font-size:var(--t-h2);line-height:var(--lh-display)}
h3,.t-h3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.018em}

p{text-wrap:pretty}
.lead{font-size:var(--t-lead);color:var(--text);line-height:var(--lh-body)}
.muted{color:var(--text-soft)}
.small{font-size:var(--t-small)}
.micro{font-size:var(--t-micro);line-height:var(--lh-body);color:var(--text-soft)}
.hl{color:var(--orange)}
strong{font-weight:600;color:var(--text-bright)}
b,.display-strong{font-weight:600}

/* Measure caps - keeps line length readable without per-section overrides */
.measure{max-width:62ch}
.measure-tight{max-width:46ch}
.measure-wide{max-width:78ch}

/* ---------- 04  LAYOUT PRIMITIVES ------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gutter)}

.stack > * + *,
.stack-sm > * + *,
.stack-lg > * + *{margin-top:var(--stack-gap,var(--s-4))}
.stack-lg{--stack-gap:var(--s-6)}
.stack-sm{--stack-gap:var(--s-5)}

.cluster{display:flex;flex-wrap:wrap;gap:var(--cluster-gap,var(--s-3));align-items:center}
.center{text-align:center;margin-inline:auto}

/* Auto-fitting grid: set --min per instance, no media queries needed */
.grid{display:grid;gap:var(--grid-gap,var(--s-4));
      grid-template-columns:repeat(auto-fit,minmax(min(var(--min,240px),100%),1fr))}
.grid-2{--min:320px}
.grid-3{--min:280px}
.grid-4{--min:210px}

/* ---------- 05  COMPONENTS -------------------------------------------- */

/* Eyebrow pill */
.eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding-inline:var(--s-4);
  font-size:var(--t-small);font-weight:500;letter-spacing:.005em;
  color:var(--chip-label);
  background:rgba(16,26,29,.55);
  border:1.5px solid var(--orange);
  border-radius:var(--r-sm);
  backdrop-filter:blur(6px);
}
.eyebrow--solid{background:var(--orange);border-color:var(--orange);color:var(--paper)}
.eyebrow--plain{border-color:var(--line-strong);color:var(--text)}
.eyebrow--sand{background:#B8AE96;border-color:#B8AE96;color:#1B2125}   /* sampled */
.eyebrow--ink{background:#1B2125;border-color:#1B2125;color:var(--chip-label)}

/* Section label (small orange caption above a heading) */
.section-label{
  font-size:var(--t-small);font-weight:600;color:var(--orange);
  letter-spacing:.02em;
}

/* --- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  height:var(--control-h);padding-inline:var(--s-5);
  font-family:var(--font-body);font-weight:500;font-size:1rem;
  line-height:var(--lh-ui);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Leading circular arrow - the Twine signature */
.btn__arrow{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  background:var(--orange);color:var(--btn-label);
  margin-left:-14px;                      /* nests the circle into the pill */
  font-size:1rem;line-height:1;
}
.btn--sm{height:var(--control-h-sm);font-size:var(--t-small);padding-inline:var(--s-4)}
.btn--sm .btn__arrow{width:28px;height:28px;margin-left:-10px}

/* Variants */
.btn--paper{background:var(--tan);color:var(--ink)}
.btn--paper:hover{background:var(--paper);box-shadow:var(--shadow)}

.btn--primary{background:var(--orange);color:var(--btn-label)}
.btn--primary .btn__arrow{background:var(--ink);color:var(--btn-label)}
.btn--primary:hover{background:var(--orange-hover);box-shadow:var(--shadow)}

.btn--ghost{background:transparent;color:var(--btn-label);border:1.5px solid var(--line-strong)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--orange)}

.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:#18262b}

/* --- Card ------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s-6);
  backdrop-filter:blur(10px);
}
.card--flush{padding:var(--s-5)}
.card--light{background:var(--card-light);border-color:var(--line-light);color:var(--text-dark)}

/* --- Meta tile (hero strip: icon + label + value) --------------------- */
.meta-tile{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:rgba(31,37,39,.82);          /* sampled #1F2527 */
  border:1px solid var(--line);
  border-radius:var(--r-md);
  backdrop-filter:blur(12px);
}
.meta-tile__icon{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(150deg,#F5A07A,#E2622F 60%,#B8431C);
  color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,246,232,.32);
}
.meta-tile__icon svg{width:21px;height:21px}
.meta-tile__label{
  font-family:var(--font-body);
  font-size:var(--t-micro);font-weight:500;color:var(--orange);
  letter-spacing:.01em;line-height:var(--lh-ui);margin-bottom:2px;
}
.meta-tile__value{
  /* Body face, not display, and light: matches the original tile design. */
  font-family:var(--font-body);font-weight:400;
  font-size:var(--t-tile);color:var(--text-bright);
  line-height:1.25;letter-spacing:-.005em;
  white-space:nowrap;                     /* values stay on one line */
}

/* --- Site header ------------------------------------------------------ */
.site-header{
  /* Fixed, not sticky: it lifts out of flow so the first section's texture
     runs full-bleed to the top of the page and the header floats over it. */
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:var(--s-4) 0;
}
.site-header__bar{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background:rgba(18,17,17,.72);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.brand{
  display:flex;align-items:flex-end;gap:var(--s-3);flex:none;
  --brand-mark-h:26px;      /* rendered logo height */
  --brand-descender:.199;   /* the 'g' descender as a share of the logo box
                               (8.44 of 42.44 viewBox units) */
}
.brand__mark{height:var(--brand-mark-h);width:auto}
.brand__tag{
  font-size:var(--t-small);color:var(--text-soft);
  border-left:1px solid var(--line-strong);padding-left:var(--s-3);
  line-height:1;white-space:nowrap;position:relative;
  /* The wordmark's box bottom is the bottom of the 'g' descender, NOT the
     baseline, so flex-end alone drops the strapline too low. Lift it by the
     descender depth, then push back down by the strapline's own descent
     below its baseline (~.136em at line-height:1). Net: baselines match. */
  top:calc(.136em - var(--brand-mark-h) * var(--brand-descender));
}
.site-nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.site-nav a:not(.btn){font-size:.95rem;color:var(--text);transition:color .15s ease}
.site-nav a:not(.btn):hover{color:var(--text-bright)}




@media(max-width:900px){
  :root{--header-h:76px}
  .brand__tag{display:none}
  .site-nav{
    position:absolute;top:calc(100% + 10px);left:var(--gutter);right:var(--gutter);
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(18,17,17,.96);border:1px solid var(--line);
    border-radius:var(--r-md);padding:var(--s-3);
    backdrop-filter:blur(16px);
    display:none;
  }
  .site-nav[data-open="true"]{display:flex}
  .site-nav a:not(.btn){padding:var(--s-3) var(--s-4);border-radius:var(--r-sm)}
  .site-nav a:not(.btn):hover{background:var(--surface-2)}
  .site-nav .btn{margin-top:var(--s-2);justify-content:center}
  
}

/* ---------- 06  SECTION SURFACES & RHYTHM ----------------------------- */
.section{position:relative;padding-block:var(--section-y)}
.section--flush-top{padding-top:0}
.section--light{background:var(--bg-light);color:var(--text-dark)}
.section--light h1,.section--light h2,.section--light h3{color:var(--text-dark)}
.section--light .muted{color:var(--text-dark-soft)}

/* Textured dark surface - the Twine signature background */
.surface-texture{
  position:relative;
  background-color:#0D1518;
  isolation:isolate;
  /* The colour this surface dissolves into at its foot. Set it to the
     background of whatever section follows and the join disappears. */
  --blend-next:#141A1C;
  --blend-start:58%;
}
.surface-texture > *{position:relative;z-index:2}
.surface-texture::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--texture-fallback);   /* plain url, always works */
  background-image:var(--texture-img);        /* overrides where image-set() is supported */
  background-size:cover;background-position:center;
  opacity:var(--texture-opacity,1);
}
/* Readability scrim so text always passes contrast over photography */
.surface-texture::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Fallback for browsers without color-mix(): plain fade to the blend colour */
  background:linear-gradient(180deg, transparent var(--blend-start), var(--blend-next) 100%);
  /* Light touch: darkens the centre just enough for text contrast while
     leaving the orange bloom and grey wash of the artwork intact. */
  background:
    /* Foot fade: the texture dissolves into the section below so the two
       never meet on a hard line. Listed first so it sits on top. */
    linear-gradient(180deg,
        transparent var(--blend-start),
        color-mix(in srgb, var(--blend-next) 45%, transparent) 76%,
        color-mix(in srgb, var(--blend-next) 82%, transparent) 90%,
        var(--blend-next) 100%),
    radial-gradient(66% 54% at 50% 50%, rgba(8,9,11,0.44), rgba(8,9,11,0.10) 72%, rgba(8,9,11,0) 100%),
    linear-gradient(180deg, rgba(8,9,11,0) 62%, rgba(8,9,11,.16) 100%);
}

/* Hairline divider, inset to the content column */
.rule{border:0;height:1px;background:var(--line);margin:0}
.rule-wrap{padding-block:0}

/* ---------- 07  MOTION ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.07s}
.reveal-delay-2{transition-delay:.14s}
.reveal-delay-3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ---------- 08  UTILITIES --------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.flow-tight{--stack-gap:var(--s-2)}
.mt-auto{margin-top:auto}
.full{width:100%}

/* ==========================================================================
   SECTION LAYER
   Page-section layouts. The design system above stays generic; anything
   specific to a named homepage section lives here, in section order.
   ========================================================================== */

/* ---------- 01  HERO --------------------------------------------------- */
.hero{
  /* Texture selection accounts for device pixel ratio, not just CSS width.
     A 390px phone at 3x needs ~1170 real pixels: serving it a 768px file
     was what flattened the grain. AVIF is listed first because it holds
     roughly 99% of the source grain where WebP at the same quality holds 75%. */
  --texture-fallback:var(--tex-inline);
  --texture-img:var(--tex-inline);
  /* Full-screen panel: the hero always fills the viewport exactly, so
     nothing of the next section is visible until the visitor scrolls.
     svh is the viewport with browser chrome showing, which is what you
     actually see on load; 100vh is the fallback for older engines. */
  display:flex;align-items:stretch;
  min-height:100vh;
  min-height:100svh;
  padding-top:calc(var(--header-h) + clamp(24px, 4vw, 56px));
  padding-bottom:clamp(40px,4.5vw,72px);
  text-align:center;
}
/* Copy sits centred in the space left over; the tiles hold the foot. */
.hero .wrap{justify-content:space-between;flex:1}
.hero__inner{margin-block:auto}

/* Short viewports: tighten the rhythm so the tiles stay above the fold
   rather than being pushed off the bottom of a laptop screen. */
@media(max-height:820px) and (min-width:641px){
  .hero__inner{--stack-gap:clamp(14px,1.6vw,22px)}
  .hero__meta{margin-top:clamp(28px,3vw,44px)}
}
@media(max-height:700px) and (min-width:641px){
  .hero{padding-top:calc(var(--header-h) + 16px);padding-bottom:28px}
  .hero__title{font-size:clamp(1.9rem,1rem + 2.6vw,2.9rem)}
}
@media(min-width:641px){
  .hero{
    --texture-fallback:var(--tex-inline);
    --texture-img:var(--tex-inline);
  }
}
@media(min-width:1025px){
  .hero{
    --texture-fallback:var(--tex-inline);
    --texture-img:var(--tex-inline);
  }
}

.hero .wrap{display:flex;flex-direction:column;width:100%}
.hero__inner{max-width:1000px;margin-inline:auto;--stack-gap:clamp(20px,2.4vw,32px)}
.hero__title{margin-inline:auto;max-width:min(1000px,100%)}
.hero__sub{margin-inline:auto}
.hero__sub .lead{margin-inline:auto}

/* Meta strip sits at the foot of the hero */
.hero__dots{display:none}
.hero__meta{
  --min:236px;--grid-gap:var(--s-3);
  margin-top:clamp(48px, 6.5vw, 84px);
  text-align:left;
}
.meta-tile__label,.meta-tile__value{display:block}

@media(max-width:640px){
  /* Drop the forced break on phones: at this size it strands a single word.
     text-wrap:balance then finds even lines across the full sentence. */
  .hero__title br{display:none}
  .hero{padding-top:calc(var(--header-h) + clamp(20px,6vw,40px));padding-bottom:clamp(32px,7vw,56px)}
  /* Mobile: the tiles become an auto-advancing slideshow. Stacked they are
     ~330px tall and push themselves off a phone screen; as one full-width
     slide they cost a single row. */
  .hero__meta{
    display:flex;grid-template-columns:none;
    margin-top:clamp(24px,5vw,40px);
    gap:var(--s-4);
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-behavior:smooth;
    padding:0;margin-inline:0;          /* aligns with the body copy above */
  }
  .hero__meta::-webkit-scrollbar{display:none}
  .hero__meta .meta-tile{flex:0 0 100%;scroll-snap-align:start}

  /* Progress: one segment per slide, the active one filling over its dwell. */
  .hero__dots{display:flex;gap:6px;margin-top:var(--s-4);justify-content:center}
  .hero__dot{
    position:relative;height:3px;width:26px;border-radius:999px;
    background:rgba(233,227,212,.22);overflow:hidden;
  }
  .hero__dot i{
    position:absolute;inset:0;width:0;border-radius:inherit;
    background:var(--orange);
  }
  .hero__dot.is-active i{width:100%;transition:width var(--meta-dwell,3s) linear}
  .hero__dot.is-done i{width:100%}
  /* Once the reader takes over, the active segment sits solid instead of
     replaying its fill animation on every swipe. */
  .hero__dots.is-paused .hero__dot.is-active i{transition:none;width:100%}
  .meta-tile{padding:var(--s-4) var(--s-5)}
  .meta-tile__icon{width:40px;height:40px;border-radius:12px}
}

/* ---------- 02  THE PROBLEMS WE SOLVE ---------------------------------- */
.problems{
  background:#141A1C;
  overflow-x:clip;                       /* clip, not hidden: hidden would break the sticky pin */
  padding-bottom:clamp(56px,7vw,96px);
}

/* --- top block: copy left, artwork right ----------------------------- */
.problems__top{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:900px){
  .problems__top{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,4vw,64px)}
}
.problems__copy{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);align-items:flex-start}

/* Word-by-word reveal. Unlit words stay legible-but-recessed so the
   paragraph never reads as broken if scripting is unavailable. */
.problems__lede{
  font-size:clamp(1.75rem, 1.1rem + 2.4vw, 3.1rem);
  line-height:1.16;letter-spacing:-.03em;font-weight:500;
  color:var(--text-bright);
  text-wrap:pretty;
}
.problems__lede .w{
  color:#41433E;
  transition:color .45s cubic-bezier(.22,.61,.36,1);
}
.problems__lede .w.is-lit{color:var(--text-bright)}
.problems__lede .w--accent.is-lit{color:var(--orange)}
/* No JS or reduced motion: show the sentence fully lit */
.no-js .problems__lede .w,
.problems__lede.is-all-lit .w{color:var(--text-bright)}
.no-js .problems__lede .w--accent,
.problems__lede.is-all-lit .w--accent{color:var(--orange)}

/* --- artwork panel ----------------------------------------------------
   The brand mark sits ON the texture rather than being baked into a
   raster, so it stays crisp at any size and the fade is tunable in CSS. */
.problems__art{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1/1;                      /* fixed box = no layout shift */
  box-shadow:var(--shadow-lg);
  display:grid;place-items:center;
  background-color:#2A1712;
  background-image:image-set(
      url('/assets/media/9b15cd3ea80e.avif') type('image/avif') 1x,
      url('/assets/media/d686a4bcbee0.avif') type('image/avif') 2x,
      url('/assets/media/258f049797d0.webp') type('image/webp') 1x,
      url('/assets/media/e703c83ef743.webp') type('image/webp') 2x);
  background-size:cover;background-position:center;
}
@media(min-width:900px){
  .problems__art{
    aspect-ratio:1/1;                       /* square, to sit level with the copy */
    /* The old right-bleed (negative gutter margin) is gone: now that the
       cards below sit inside the wrap, everything on this section aligns
       to the same right margin. */
    background-image:image-set(
      url('/assets/media/7646458fa8bf.avif') type('image/avif') 1x,
      url('/assets/media/d686a4bcbee0.avif') type('image/avif') 2x,
      url('/assets/media/01fcc98289c4.webp') type('image/webp') 1x,
      url('/assets/media/e703c83ef743.webp') type('image/webp') 2x);
  }
}
/* Faded so the paper grain reads through the mark, with a warm bloom behind. */
.problems__mark{
  position:relative;
  width:min(56%, 340px);
  display:block;
  opacity:.92;
  mix-blend-mode:soft-light;
  filter:drop-shadow(0 0 46px rgba(255,168,116,.34));
}
.problems__mark-svg{width:100%;height:auto;display:block}

/* --- sub-heading ------------------------------------------------------ */
.problems__sub{
  font-size:clamp(1.02rem,.95rem + .35vw,1.22rem);
  color:var(--text);
  margin-top:clamp(40px,5vw,72px);
}

/* --- horizontal card drift -------------------------------------------- */
.hscroll{margin-top:clamp(24px,3vw,40px)}
.hscroll__track{
  display:flex;gap:clamp(14px,1.6vw,24px);
  /* Left edge lines up with the content column; the track then runs on
     past the right edge of the screen, which is the room it has to travel. */
  padding-left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --rail-pad:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-right:0;
}
/* A rail already inside .wrap must not add the gutter again, or its first
   card sits inboard of the section heading above it. */
.wrap .hscroll__track{padding-left:0;padding-right:0;--rail-pad:0px}
/* One rail behaviour at every size: a horizontal snap strip driven by the
   arrows (and optional autoplay). The earlier desktop scroll-pin was removed
   in favour of this, so desktop and mobile navigate identically. */
.hscroll{
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* Snap padding mirrors the track's own left padding EXACTLY, so the
     browser's snapping and the arrows' scrollTo agree on where a card
     rests. When they disagreed (gutter vs content column) every user
     swipe settled ~80px off the arrows' positions. No scroll-behavior
     here: the JS sets it per scroll, so smoothing never stacks. */
  scroll-padding-left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-bottom:var(--s-3);
}
/* Rails inside .wrap have no track padding, so no snap inset either, and
   no trailing gutter after the last card - the final pair should end flush
   on the wrap's right margin, exactly where the exact 50% sizing puts it. */
.wrap .hscroll{scroll-padding-left:0}
.wrap .hscroll .hscroll__track::after{width:0}
.hscroll::-webkit-scrollbar{display:none}
.hscroll__sticky{display:contents}
.hscroll__track{transform:none!important}
.hscroll .p-card,
.hscroll .fibre,
.hscroll .tl__step{scroll-snap-align:start}
/* End stop: a small trailing box that is itself an end-aligned snap point.
   With mandatory snapping, a rail may only rest ON a snap point - so
   without this, any card whose start-position lies past the end of the
   scroll range simply cannot be reached: the rail bounces back off it.
   This gives the very end of the scroll a legal resting position, so the
   last card always lands flush with the right gutter. It replaces BOTH the
   old JS-measured spacer and the variable-width pseudo-element, which ran
   at the same time and doubled the dead space after the last card. */
.hscroll__track::after{
  content:"";flex:0 0 auto;
  width:var(--gutter);
  scroll-snap-align:end;
}
@media(max-width:900px){
  /* Phones and tablets get a plain swipeable strip: native, smooth,
     and it never fights the user's scrolling. */
  .hscroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
           scrollbar-width:none;padding-bottom:var(--s-3);
           /* snap must respect the gutter, or every slide lands flush to the
              screen edge instead of lining up with the body copy */
           scroll-padding-left:var(--gutter)}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll__track{transform:none!important}
  /* start-aligned, so the slideshow's scroll target and the snap point agree.
     With centre alignment the snap pulled every slide ~82px off position. */
  .hscroll .p-card{scroll-snap-align:start;flex:0 0 78%}
}

.hscroll:has(.p-card){--rail-card:clamp(272px, 25vw, 360px)}
.p-card{
  flex:0 0 clamp(272px, 25vw, 360px);
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:clamp(20px,1.8vw,28px);
  border-radius:var(--r-lg);
  scroll-snap-align:center;
  min-height:clamp(230px,20vw,268px);
}
.p-card__meta{display:flex;align-items:center;gap:var(--s-3)}
.p-card__chip{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--orange);
  box-shadow:inset 0 1px 0 rgba(255,246,232,.28);
}
.p-card__num{font-size:var(--t-small);color:var(--text-soft);font-weight:400}
.p-card__num span{color:var(--orange);margin-right:2px}
.p-card__title{
  font-size:clamp(1.26rem,0.98rem + .52vw,1.46rem);
  font-weight:500;letter-spacing:-.034em;line-height:1.1;
  color:#DBD7D5;margin-top:auto;
}
.p-card__body{font-size:var(--t-small);line-height:1.5;color:var(--text-soft)}

/* Card tones, sampled from the design */
.p-card--slate {background:#84878A}
.p-card--tan   {background:#B8AE96}
.p-card--dark  {background:#252B2F}
.p-card--orange{background:var(--orange)}

/* Light faces take ink body copy; titles stay pale as designed */
.p-card--slate .p-card__body,
.p-card--tan .p-card__body,
.p-card--orange .p-card__body{color:#192022}
.p-card--slate .p-card__num,
.p-card--tan .p-card__num,
.p-card--orange .p-card__num{color:rgba(25,32,34,.72)}
.p-card--slate .p-card__num span,
.p-card--tan .p-card__num span{color:var(--orange)}
.p-card--orange .p-card__num span{color:#192022}
/* On the orange face the chip inverts to an outline so it stays visible */
.p-card--orange .p-card__chip{background:transparent;border:2px solid rgba(25,32,34,.45);box-shadow:none}

/* --- problems grid: all four cards in view, no scroller -----------------
   The four problem cards are short enough to sit side by side inside the
   content column, so they do: no arrows, no swiping, nothing hidden off
   screen. Two-up on tablets, stacked on phones. (The old flex-basis on
   .p-card is ignored by grid items, so the cards simply share the row.) */
.problems__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(24px,3vw,40px);
}
@media(min-width:640px){
  .problems__grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1100px){
  .problems__grid{grid-template-columns:repeat(4,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .hero__dot.is-active i{transition:none}
  .problems__lede .w{transition:none}
  .hscroll__track{transform:none!important}
  .hscroll{overflow-x:auto}
}

/* ---------- 03  THE PROOF ---------------------------------------------- */
.proof{
  background:var(--proof-bg,#DAD4C2);          /* sampled from the design */
  color:var(--ink);
  text-align:center;
}
.proof__head{--stack-gap:clamp(20px,2.4vw,32px);margin-inline:auto}
.proof__title{
  color:#1B2125;
  font-size:clamp(1.6rem,1.05rem + 2.1vw, 2.7rem);
  line-height:1.2;letter-spacing:-.032em;font-weight:500;
  margin-inline:auto;
}
.proof__title .hl{color:var(--orange)}

/* --- stage: video panel with the caption card overlapping its foot ----- */
.proof__stage{
  position:relative;
  margin-top:clamp(34px,4.4vw,64px);
  padding-bottom:clamp(56px,7vw,104px);   /* room for the overlapping card */
}

.player{
  position:relative;
  max-width:min(1080px,100%);
  margin-inline:auto;
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:16/9;
  background:#1B2125;
  /* warm bloom behind the panel, as in the design */
  box-shadow:0 0 0 1px rgba(27,33,37,.06),
             0 26px 70px -18px rgba(226,98,47,.42),
             0 10px 30px rgba(27,33,37,.16);
}
.player__poster,
.player video{width:100%;height:100%;object-fit:cover;display:block}

.player__play{
  position:absolute;inset:0;margin:auto;
  width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px);
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--orange);color:var(--chip-label);
  box-shadow:0 8px 26px rgba(27,33,37,.34);
  transition:transform .18s ease, background-color .18s ease;
}
.player__play svg{width:46%;height:46%;margin-left:6%}
.player__play:hover{transform:scale(1.06);background:var(--orange-hover)}
.player.is-playing .player__play,
.player.is-playing .player__poster{display:none}

/* --- caption card ------------------------------------------------------ */
.proof__caption{
  position:relative;
  display:grid;gap:clamp(16px,2vw,32px);
  grid-template-columns:1fr;
  align-items:center;
  text-align:left;
  width:min(760px,92%);
  margin:clamp(-72px,-6vw,-40px) auto 0;   /* overlaps the video foot */
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,36px);
  background:#E3DED1;                       /* sampled */
  border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(27,33,37,.14);
}
@media(min-width:700px){
  .proof__caption{grid-template-columns:minmax(140px,190px) 1fr}
}
.proof__logo{width:100%;max-width:190px;height:auto;margin-inline:auto;display:block}
.proof__logo path{fill:#1B2125}
.proof__note p{font-size:var(--t-small);line-height:1.55;color:#1B2125}
.proof__note p + p{margin-top:var(--s-2)}
.proof__note p.proof__kicker{color:var(--orange);font-weight:600}
.proof__note .muted{color:rgba(27,33,37,.62)}
.proof__note strong{color:#1B2125;font-weight:600}

@media(max-width:699px){
  /* Deeper box, but no more of the video covered than before: the overlap is
     pinned low and the extra height goes downward. */
  .proof__caption{text-align:center;margin-top:calc(-1 * clamp(18px,4vw,26px))}
  .proof__logo{max-width:150px}
}

/* ---------- 03b  BUILD TIMELINE ---------------------------------------- */
.tl{
  margin-top:clamp(48px,6vw,88px);
  text-align:left;
  --tl-dot:46px;
  --tl-progress:0;                         /* 0-1, set by JS */
}
.tl .tl__track{
  gap:clamp(20px,2.4vw,40px);
  align-items:start;
  counter-reset:tl;
  padding-top:6px;            /* the dot scales up when reached; give it room */
}
.hscroll:has(.tl__step){--rail-card:clamp(268px, 26vw, 360px)}
.tl__step{
  flex:0 0 clamp(268px, 26vw, 360px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}

/* --- rail: dot plus the connector running to the next dot ------------- */
.tl__rail{
  position:relative;
  height:calc(var(--tl-dot) + 8px);
  display:flex;align-items:center;
  margin-bottom:clamp(22px,2.4vw,34px);
}
/* the line spans from this dot's centre across the gap to the next dot */
.tl__step:not(:last-child) .tl__rail::before{
  content:"";position:absolute;z-index:0;
  left:calc(var(--tl-dot) / 2);
  width:calc(100% - var(--tl-dot) / 2 + clamp(20px,2.4vw,40px));
  height:2px;
  background:rgba(27,33,37,.28);
}
/* orange fill that advances with scroll */
.tl__step:not(:last-child) .tl__rail::after{
  content:"";position:absolute;z-index:1;
  left:calc(var(--tl-dot) / 2);
  width:calc((100% - var(--tl-dot) / 2 + clamp(20px,2.4vw,40px)) * var(--seg,0));
  height:2px;
  background:var(--orange);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}

.tl__dot{
  position:relative;z-index:2;flex:none;
  width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#5A3227 0%,#8E4632 42%,var(--orange) 100%);
  box-shadow:0 4px 14px rgba(27,33,37,.24), inset 0 1px 0 rgba(255,246,232,.22);
  /* dormant until the timeline reaches it */
  filter:saturate(.28) brightness(.82);
  transition:filter .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.tl__step.is-reached .tl__dot{filter:none;transform:scale(1.04)}
.tl__num{
  font-family:var(--font-body);font-weight:500;
  font-size:.94rem;color:var(--tan);line-height:1;
}

.tl__title{
  color:var(--orange);
  font-size:clamp(1.7rem,1.2rem + 1.5vw,2.4rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
  margin-bottom:clamp(16px,1.8vw,26px);
}
.tl__body{
  font-size:var(--t-small);line-height:1.6;
  color:rgba(27,33,37,.78);
}
.tl__body b{font-weight:600;color:#1B2125}

@media(max-width:900px){
  .tl{--tl-dot:40px}
  .tl__step{flex:0 0 78%}
}
@media(max-width:899px){
  /* Phones: one full-width fibre per view, stepped by the same arrows. */
  .hscroll .fibre{flex:0 0 100%}
}
@media(prefers-reduced-motion:reduce){
  .tl__dot{filter:none;transition:none}
  .tl__step:not(:last-child) .tl__rail::after{transition:none}
}

/* --- static timeline: the whole journey in view, no scroller ------------
   Four compact steps fit across the content column, so the rail, arrows,
   and autoplay are gone. Every step is on screen at once, which means the
   whole journey reads as reached: dots awake, connectors filled. Stacks to
   a single column on phones, where the horizontal connectors (which would
   bridge to nothing) are hidden. The column gap matches the connector's
   reach - clamp(20px,2.4vw,40px) - so each line still lands on the next dot. */
.tl--static .tl__track{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3vw,36px) clamp(20px,2.4vw,40px);
}
.tl--static .tl__step{--seg:1}
.tl--static .tl__dot{filter:none}
@media(min-width:900px){
  .tl--static .tl__track{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:899px){
  /* Phones: a true vertical timeline. Dot on the left, copy alongside it,
     and a spine running down from each dot to the next - drawn by the same
     scroll-driven --seg the desktop connectors use. */
  .tl--static .tl__track{gap:0}
  .tl--static .tl__step{
    position:relative;
    padding-left:calc(var(--tl-dot) + 16px);
    padding-bottom:clamp(30px,7vw,44px);
  }
  .tl--static .tl__step:last-child{padding-bottom:0}
  .tl--static .tl__rail{position:absolute;left:0;top:-2px;margin:0;height:var(--tl-dot)}
  .tl--static .tl__step:not(:last-child) .tl__rail::before,
  .tl--static .tl__step:not(:last-child) .tl__rail::after{display:none}
  .tl--static .tl__step:not(:last-child)::before{
    content:"";position:absolute;z-index:0;
    left:calc(var(--tl-dot) / 2 - 1px);
    top:calc(var(--tl-dot) + 4px);
    bottom:6px;
    width:2px;background:rgba(27,33,37,.28);
  }
  .tl--static .tl__step:not(:last-child)::after{
    content:"";position:absolute;z-index:1;
    left:calc(var(--tl-dot) / 2 - 1px);
    top:calc(var(--tl-dot) + 4px);
    bottom:6px;
    width:2px;background:var(--orange);
    transform:scaleY(var(--seg,1));transform-origin:top;
  }
  .tl--static .tl__title{margin-bottom:clamp(12px,3vw,18px)}
}

/* Each step's copy lives in a paper tile; the dot rail stays above it,
   outside the card, so the piece still reads as a timeline. flex:1 makes
   the four cards equal height across the desktop row. */
.tl--static .tl__track{align-items:stretch}  /* overrides the rail-era align-items:start */
.tl--static .tl__step{display:flex;flex-direction:column}
.tl__card{
  flex:1;
  background:var(--paper);
  border:1px solid rgba(27,33,37,.08);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,32px) clamp(20px,2vw,30px) clamp(26px,2.4vw,36px);
  box-shadow:0 10px 28px rgba(27,33,37,.07);
}

/* --- timeline journey: the line draws itself on scroll ------------------
   With scripting and motion allowed, .tl--journey re-dims the timeline and
   hands --seg to a scroll handler: as the section crosses the viewport the
   connector fill sweeps across (or down, on phones), each dot ignites as
   the line arrives, and each step's copy rises into place. Without JS or
   under prefers-reduced-motion the class is never added, so the timeline
   simply renders complete - the .tl--static state above. */
.tl--journey .tl__step{
  --seg:0;
  opacity:.35;transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.tl--journey .tl__step.is-reached{opacity:1;transform:none}
.tl--journey .tl__dot{filter:saturate(.28) brightness(.82)}
.tl--journey .tl__step.is-reached .tl__dot{filter:none;transform:scale(1.04)}
/* The fill is driven continuously per scroll frame; the old eased width
   transition would smear behind it. */
.tl--journey .tl__step:not(:last-child) .tl__rail::after{transition:none}

/* Desktop hover interplay: the step under the pointer lifts and its
   neighbours recede slightly. Purely additive - nothing is hidden. */
@media(hover:hover) and (min-width:900px){
  .tl--static .tl__step{transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1)}
  .tl--static .tl__track:hover .tl__step{opacity:.55}
  .tl--static .tl__track:hover .tl__step:hover{opacity:1;transform:translateY(-6px)}
  .tl--static .tl__step:hover .tl__dot{filter:none;transform:scale(1.1)}
}
@media(prefers-reduced-motion:reduce){
  .tl--static .tl__step,
  .tl--static .tl__track:hover .tl__step{opacity:1;transform:none;transition:none}
}

/* ---------- 04  THE METHOD (Five Fibre Framework) ---------------------- */
.method{background:#192022}          /* sampled */
.method__head{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,2.6vw,36px);
}
.method__title{
  font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  font-weight:500;letter-spacing:-.035em;line-height:1.06;
  color:var(--text-bright);
}
.method__title .hl{color:var(--orange)}
.method__title sup{font-size:.32em;vertical-align:super;letter-spacing:0}
.method__intro{color:var(--text-soft);font-size:var(--t-lead);line-height:var(--lh-body)}

.fibres{margin-top:clamp(36px,4.6vw,64px)}
.fibres__track{align-items:stretch;gap:clamp(16px,1.8vw,28px)}

.hscroll:has(.fibre){--rail-card:clamp(280px, 38vw, 560px)}
.fibre{
  /* Exactly two cards per view inside the content column: half the track
     minus half the gap. The gap value here MUST match .fibres__track's gap,
     or the pair drifts off the right margin. Because the sizing divides the
     row exactly, the last pair lands flush on the wrap's right edge - no
     more part-card cut off at the end. One card per view below 900px. */
  flex:0 0 calc((100% - clamp(16px,1.8vw,28px)) / 2);
  display:flex;flex-direction:column;
  background:var(--orange);
  border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,44px);
  scroll-snap-align:start;
  background:var(--fib,var(--orange));
  color:var(--fib-ink,#1B2125);
}
/* Five Fibre colours - locked palette, signed off on the scorecard.
   Each card carries its own fibre colour; --fib-ink / --fib-body are tuned
   per background (contrast-checked) so every card stays legible. */
.fibre{--fib:var(--orange);--fib-ink:#1B2125;--fib-body:rgba(27,33,37,.82)}
.fibre:nth-child(1){--fib:#E53B10;--fib-ink:#FFFFFF;--fib-body:rgba(255,255,255,.86)}  /* Assess  - Terracotta */
.fibre:nth-child(2){--fib:#6EA9D8;--fib-ink:#14202A;--fib-body:rgba(20,32,42,.88)}     /* Build   - Cool Horizon */
.fibre:nth-child(3){--fib:#3E8E6B;--fib-ink:#0E241B;--fib-body:rgba(14,36,27,.92)}     /* Launch  - Sea Green */
.fibre:nth-child(4){--fib:#55538D;--fib-ink:#FFFFFF;--fib-body:rgba(255,255,255,.86)}  /* Grow    - Dusty Grape */
.fibre:nth-child(5){--fib:#FFAD0A;--fib-ink:#3A2600;--fib-body:rgba(40,26,0,.86)}      /* Amplify - Amber */
.fibre__meta{display:flex;align-items:center;gap:var(--s-4);margin-bottom:clamp(20px,2.2vw,32px)}
.fibre__icon{
  flex:none;display:grid;place-items:center;
  width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px);
  border-radius:14px;
  background:#1B2125;color:var(--fib,var(--orange));
}
.fibre__icon svg{width:56%;height:56%}
.fibre__num{font-size:var(--t-small);color:var(--fib-ink);font-weight:400}
.fibre__num span{color:var(--fib-ink);opacity:.55;margin-right:2px}

.fibre__title{
  font-size:clamp(1.6rem,1.2rem + 1.3vw,2.2rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.08;
  color:var(--fib-ink);
  margin-bottom:clamp(18px,1.8vw,26px);
}
.fibre__points{
  display:grid;gap:6px;
  margin-bottom:clamp(24px,3vw,44px);
}
.fibre__points li{
  color:var(--fib-ink);font-weight:600;
  font-size:clamp(.94rem,.88rem + .22vw,1.06rem);
  line-height:1.35;
}
.fibre__points li::before{content:"- ";}
.fibre__lead{
  color:var(--fib-ink);font-weight:600;
  font-size:clamp(.96rem,.9rem + .25vw,1.08rem);
  line-height:1.35;margin-bottom:var(--s-2);
  padding-top:clamp(22px,2.4vw,32px);
  /* Hairline separator: 50% tint of this card's fibre background colour.
     color-mix keeps it per-fibre automatically. */
  border-top:1px solid color-mix(in srgb, var(--fib) 50%, #ffffff);
}
.fibre__body{
  color:var(--fib-body);
  font-size:clamp(.94rem,.88rem + .22vw,1.05rem);
  line-height:1.55;
  margin-top:auto;
}

@media(max-width:900px){
  .fibre{flex:0 0 84%}
}

/* ---------- 05  THE FOUNDERS ------------------------------------------- */
.founders{background:#DAD4C2;color:var(--ink);padding-block:clamp(40px,5vw,80px)}
.founders__grid{
  display:grid;gap:clamp(20px,2.4vw,40px);
  grid-template-columns:1fr;align-items:start;
}
@media(min-width:960px){
  .founders__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,3vw,52px)}
}
.founders__intro{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,2.6vw,36px)}
.founders__title{
  font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);
  font-weight:500;letter-spacing:-.032em;line-height:1.18;
  color:#1B2125;max-width:16ch;
}
.founders__title .hl{color:var(--orange)}

/* Round cue, echoing the numbered dots on the build timeline */
.founders__cue{
  display:grid;place-items:center;
  width:clamp(110px,10vw,150px);aspect-ratio:1;
  border-radius:50%;
  /* real texture, not a CSS gradient */
  background-color:#4A2419;
  background-image:image-set(
      url('/assets/media/209a7c6510ab.avif') type('image/avif') 1x,
      url('/assets/media/be5356251eff.avif') type('image/avif') 2x,
      url('/assets/media/f7514c8f97db.webp') type('image/webp') 1x,
      url('/assets/media/c94ee70cb12c.webp') type('image/webp') 2x);
  background-size:cover;background-position:38% 62%;
  color:var(--paper);
  box-shadow:0 14px 34px rgba(27,33,37,.22);
  margin-top:auto;                    /* aligns to the base of the cards */
}
.founders__cue-svg{width:32%;height:auto;transform:rotate(90deg)}
.founders__intro{min-height:100%}
@media(max-width:959px){.founders__cue{display:none}}

/* --- cards ------------------------------------------------------------- */
.founders__cards{
  display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  align-items:start;
}
.founder{
  background:#E8E5DA;                       /* sampled */
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.founder__photo{width:100%;aspect-ratio:8/7;object-fit:cover;object-position:50% 22%;display:block}
.founder__panel{padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px)}

.founder__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.founder__name{
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);
  font-weight:500;letter-spacing:-.028em;line-height:1.15;color:#1B2125;
}
.founder__role{color:var(--orange);font-size:var(--t-small);margin-top:2px}

.founder__toggle{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:#1B2125;color:var(--paper);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), background-color .2s ease;
}
.founder__toggle svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.founder__toggle:hover{background:#26343A}
.founder__toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

/* Disclosure: grid-template-rows animates cleanly from nothing to auto,
   with no JavaScript height measurement. */
.founder__bio{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
}
.founder__bio-inner{overflow:hidden;min-height:0}
.founder__bio[data-open]{grid-template-rows:1fr}
.founder__bio-inner p{
  font-size:var(--t-small);line-height:1.6;color:rgba(27,33,37,.78);
  margin-top:clamp(16px,1.6vw,22px);
}
.founder__bio-inner p:first-child{margin-top:clamp(18px,1.8vw,24px)}

.founder__rule{
  border:0;height:1px;background:rgba(27,33,37,.16);
  margin:clamp(18px,2vw,26px) 0 clamp(14px,1.5vw,20px);
}
.founder__stats{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.6vw,26px)}
.founder__stats .stat{min-width:0;white-space:nowrap}
.founder__stats dt{font-size:var(--t-micro);color:rgba(27,33,37,.60);margin-bottom:2px}
.founder__stats dd{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  letter-spacing:-.03em;color:#1B2125;line-height:1.1;
}

@media(prefers-reduced-motion:reduce){
  .founder__bio,.founder__toggle svg{transition:none}
}

/* ---------- 06  OUR BELIEF --------------------------------------------- */
.belief{background:#DAD4C2}
.belief__card{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  padding:clamp(30px,5vw,84px) clamp(24px,5vw,90px) clamp(40px,6.5vw,110px);
  background-color:#B99177;
  background-image:image-set(
      url('/assets/media/3fecfe979266.avif') type('image/avif') 1x,
      url('/assets/media/ad9e64075790.avif') type('image/avif') 2x,
      url('/assets/media/1d9013df50f0.webp') type('image/webp') 1x,
      url('/assets/media/81ba27d983db.webp') type('image/webp') 2x);
  background-size:cover;background-position:center;
  box-shadow:0 22px 60px rgba(27,33,37,.18);
}
@media(min-width:1000px){
  .belief__card{
    background-image:image-set(
      url('/assets/media/7eac7c83f8e9.avif') type('image/avif') 1x,
      url('/assets/media/ad9e64075790.avif') type('image/avif') 2x,
      url('/assets/media/a027a07ebbef.webp') type('image/webp') 1x,
      url('/assets/media/81ba27d983db.webp') type('image/webp') 2x);
  }
}

.belief__label{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--t-small);color:#1B2125;
  margin-bottom:clamp(20px,3vw,44px);
}
.belief__chip{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--orange);
  box-shadow:inset 0 1px 0 rgba(255,246,232,.28);
}

.belief__quote{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,.95rem + 1.9vw,2.6rem);
  font-weight:500;line-height:1.14;letter-spacing:-.032em;
  max-width:none;
  text-wrap:pretty;
}
/* Inverted reveal: on this light card the unlit words are LIGHTER than the
   lit ones, where Section 02 on dark does the opposite. */
.belief__quote .w{
  color:rgba(27,33,37,.24);
  transition:color .45s cubic-bezier(.22,.61,.36,1);
}
.belief__quote .w.is-lit{color:#1B2125}
.no-js .belief__quote .w,
.belief__quote.is-all-lit .w{color:#1B2125}

/* The forced break only helps at desktop widths; below that the natural
   wrap is better than a hard break mid-sentence. */
.belief__br{display:none}
@media(min-width:1000px){.belief__br{display:inline}}
@media(max-width:640px){.belief__quote{max-width:none}}
@media(prefers-reduced-motion:reduce){.belief__quote .w{transition:none}}

/* ---------- 07  WHO WE WORK WITH --------------------------------------- */
.audience{background:#192022}
.audience__head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,44px)}
.audience__title{
  font-size:clamp(2rem,1.25rem + 3vw,3.6rem);
  font-weight:500;letter-spacing:-.036em;line-height:1.08;
  color:var(--text-bright);
}
.audience__title .hl{color:var(--orange)}

.audience__cards{
  display:grid;gap:clamp(14px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  margin-top:clamp(36px,4.5vw,64px);
}
.fit-card{
  background:#14191A;                      /* sampled: sits below the section */
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,38px);
  display:flex;flex-direction:column;
}
.fit-card__badge{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(130% 130% at 30% 78%, var(--orange) 0%, #A6472A 60%, #7A3421 100%);
  color:var(--chip-label);
  margin-bottom:clamp(26px,3vw,46px);
}
.fit-card__badge svg{width:20px;height:20px}
.fit-card__title{
  font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.18;
  color:var(--paper);
  margin-bottom:clamp(16px,1.8vw,26px);
}
.fit-card__body{
  font-size:var(--t-small);line-height:1.62;color:var(--text-soft);
  margin-top:auto;
}

/* --- not the right fit ------------------------------------------------- */
.notfit{
  margin-top:clamp(16px,1.8vw,24px);
  background:#181E20;                      /* sampled */
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px,3vw,48px) clamp(24px,3vw,52px);
  display:grid;gap:clamp(16px,2.4vw,40px);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:860px){
  .notfit{grid-template-columns:minmax(180px,.32fr) 1fr}
}
.notfit__title{
  color:var(--orange);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
}
.notfit__body p{font-size:var(--t-small);line-height:1.62;color:var(--text-soft)}
.notfit__body p + p{margin-top:clamp(14px,1.4vw,20px)}
.notfit__body strong{color:var(--paper);font-weight:600}

/* ---------- 08  BEYOND LAUNCH ------------------------------------------ */
.beyond{
  /* Brand orange, not the screenshot sample. Screenshots read saturated
     colour roughly G+33 B+47 lighter than truth (P3 -> sRGB), which is what
     made this read as salmon. Subtle gradient as in the design. */
  background:linear-gradient(158deg, #F2603A 0%, #E9512C 52%, #D9451F 100%);
  color:#1B2125;
}
.beyond__head{--stack-gap:clamp(20px,2.6vw,36px);margin-inline:auto;max-width:900px}
.beyond__title{
  font-size:clamp(1.9rem,1.25rem + 2.6vw,3.4rem);
  font-weight:500;letter-spacing:-.036em;line-height:1.1;
  color:#1B2125;margin-inline:auto;
}
.beyond__title .hl{color:var(--tan)}
.beyond__intro{
  color:rgba(27,33,37,.82);
  font-size:var(--t-lead);line-height:var(--lh-body);
  margin-inline:auto;max-width:56ch;
}

.beyond__cards{
  display:grid;gap:clamp(16px,1.8vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-top:clamp(40px,5vw,80px);
}
.bl-card{
  background:#F4F3ED;                      /* sampled */
  border:2px solid #F4F3ED;            /* same as the panel behind the text */
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 16px 40px rgba(27,33,37,.14);
}
.bl-card__art{
  aspect-ratio:16/11;

  display:grid;place-items:center;
  background-color:#4A2419;
  background-image:image-set(
      url('/assets/media/209a7c6510ab.avif') type('image/avif') 1x,
      url('/assets/media/be5356251eff.avif') type('image/avif') 2x,
      url('/assets/media/f7514c8f97db.webp') type('image/webp') 1x,
      url('/assets/media/c94ee70cb12c.webp') type('image/webp') 2x);
  background-size:cover;background-position:center;
}
.bl-card__icon{
  display:block;width:34%;max-width:120px;
  /* dark edge plus a warm bloom, which is what lifts the mark off the texture */
  filter:drop-shadow(0 0 26px rgba(255,150,105,.5));
}
.bl-card__icon-svg{width:100%;height:auto;display:block}
.bl-card__panel{padding:clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px) clamp(26px,2.8vw,40px)}
.bl-card__kicker{
  color:var(--orange);font-size:var(--t-small);margin-bottom:clamp(14px,1.6vw,22px);
}
.bl-card__kicker span{opacity:.75;margin-right:2px}
.bl-card__title{
  font-size:clamp(1.2rem,1.02rem + .75vw,1.55rem);
  font-weight:600;letter-spacing:-.028em;line-height:1.2;
  color:#1B2125;
}

/* ---------- 09  BOOK A CONSULTATION ------------------------------------ */
.consult{background:#1B2125}
.consult__card{
  border-radius:var(--r-lg);
  padding:clamp(34px,5vw,90px) clamp(24px,4vw,72px) clamp(40px,5.5vw,96px);
  /* silver gradient, sampled left to right */
  background:linear-gradient(100deg,#B6B8BA 0%,#C4C6C8 46%,#D9DADB 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.34);
}
.consult__inner{--stack-gap:clamp(26px,3.4vw,52px);max-width:920px;margin-inline:auto}
.consult__title{max-width:25ch}
.consult__title{
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3.1rem);
  font-weight:500;letter-spacing:-.036em;line-height:1.06;
  color:#1B2125;margin-inline:auto;
}
.consult__title .soft{color:#565B5F}          /* sampled */

.consult__copy{max-width:56ch;margin-inline:auto}
.consult__copy p{
  font-size:var(--t-lead);line-height:var(--lh-body);
  color:rgba(27,33,37,.82);
}
.consult__copy strong{color:#1B2125;font-weight:600}

.consult__actions{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.4vw,18px);
}
.consult__note{
  color:rgba(27,33,37,.62);
  max-width:44ch;text-align:center;margin-top:var(--s-2);
}

/* ---------- 10  FOOTER -------------------------------------------------- */
.site-footer{
  position:relative;
  background:#1B2125;
  padding-top:clamp(40px,5vw,80px);
  isolation:isolate;
}
.site-footer .rule{background:#323232;margin-bottom:clamp(40px,5.5vw,88px)}

.footer__grid{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
  position:relative;z-index:2;
  padding-bottom:clamp(48px,6vw,96px);
}
@media(min-width:820px){
  .footer__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.9fr)}
}

.footer__logo{height:clamp(23px,2.04vw,31px);width:auto;display:block;margin-bottom:var(--s-4)}
.footer__tag{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);
  letter-spacing:-.024em;color:var(--text-bright);
}
.footer__sub{color:var(--orange);font-size:var(--t-small);margin-top:var(--s-2)}

.footer__heading{
  color:var(--orange);
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);
  font-weight:500;letter-spacing:-.024em;
  margin-bottom:clamp(18px,2vw,28px);
}
.footer__links{display:grid;gap:clamp(7px,.8vw,11px)}
.footer__links a{
  color:#7E8184;                              /* sampled */
  font-size:clamp(.84rem,.8rem + .16vw,.94rem);
  line-height:1.35;
  transition:color .15s ease;
}
.footer__links a:hover{color:var(--text-bright)}

.footer__cta{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,30px)}
.footer__legal{color:#7E8184;font-size:var(--t-small);line-height:1.5}
.footer__legal + .footer__legal{margin-top:calc(-1 * clamp(8px,1vw,14px))}

/* Oversized wordmark, bled off the bottom edge. Decorative only. */
.footer__mark{
  position:relative;z-index:0;
  display:block;width:100%;
  color:#393C39;                              /* sampled */
  margin-bottom:0;                            /* sits flush on the page base */
  pointer-events:none;
}
.footer__mark svg{width:100%;height:auto;display:block}
.footer__mark .dot{fill:var(--orange)}



/* ---------- Rail navigation (manual, long-form cards) ------------------- */
.rail-nav{
    display:flex;align-items:center;justify-content:flex-start;gap:var(--s-4);
    margin-top:var(--s-5);
  }
@media(min-width:0px){
  .rail-nav__btn{
    display:grid;place-items:center;flex:none;
    width:44px;height:44px;border-radius:50%;
    background:var(--surface-2);border:1px solid var(--line-strong);
    color:var(--text-bright);
    transition:background-color .18s ease, opacity .18s ease;
  }
  .rail-nav__btn svg{width:20px;height:20px}
  .rail-nav__btn:hover{background:var(--orange);border-color:var(--orange);color:var(--chip-label)}
  .rail-nav__btn:disabled{opacity:.32;pointer-events:none}
  .rail-nav__count{font-size:var(--t-small);color:var(--text-soft);min-width:3.5em;text-align:center}
}

/* Progress segments for the problem-card slideshow */
.hscroll__dots{display:none}
@media(max-width:900px){
  /* Left aligned to match the section, sitting under the first tile and
     spanning exactly its width. */
  .hscroll__dots{
    display:flex;gap:6px;
    margin-top:var(--s-6);
    margin-left:var(--gutter);
    justify-content:flex-start;
    /* exactly one tile wide: the tile is 78% of the track's content box */
    width:calc((100% - 2 * var(--gutter)) * 0.78);
  }
  .hscroll__dots .hero__dot{flex:1;width:auto}
}

/* ---------- Snag fixes -------------------------------------------------- */
@media(max-width:900px){
  /* Beyond Launch icons ~30% larger so they fill the art panel */
  .bl-card__icon{width:45%;max-width:170px}
}
/* Footer wordmark dot sits at the same faded weight as the mark itself */
.footer__mark .dot{fill:var(--orange);opacity:.42}

/* ---------- Snag round: mobile refinements ----------------------------- */
@media(max-width:900px){
  /* Controls sit on the left margin, in line with the body copy */
  .rail-nav{justify-content:flex-start;margin-left:var(--gutter)}
  .hscroll__dots{margin-left:var(--gutter);justify-content:flex-start}
  /* Controls already inside .wrap inherit its gutter; adding it again pushes
     them inboard of the body copy. */
  .wrap .rail-nav,
  .wrap .hscroll__dots{margin-left:0}

  /* Timeline dots were clipping their shadow against the rail edge */
  .tl .tl__track{padding-top:10px;padding-bottom:4px}
  .tl__dot{box-shadow:0 3px 10px rgba(27,33,37,.22), inset 0 1px 0 rgba(255,246,232,.22)}

  /* Fibre body sits closer to its lead line */
  .fibre__points{margin-bottom:clamp(12px,1.5vw,18px)}
  .fibre__lead{margin-bottom:var(--s-1)}

  /* Founders heading holds two lines */
  /* Two lines on mobile: the desktop break would make it three. */
  .founders__title{max-width:none}
  .fnd-br,.fnd-br1{display:none}

  /* Belief: larger quote, tighter section */
  .belief__quote{font-size:clamp(1.45rem,1.05rem + 2.4vw,2rem)}
  .belief{padding-block:clamp(32px,4vw,48px)}
  .belief__card{padding:clamp(26px,5vw,44px) clamp(22px,5vw,40px) clamp(30px,5.5vw,48px)}
}

/* Proof caption: deeper box, more air around the logo, without covering
   any more of the video than before. */
@media(max-width:900px){
  .proof__caption{
    padding:clamp(28px,5vw,40px) clamp(22px,4vw,32px) clamp(30px,5.5vw,44px);
    gap:clamp(20px,4vw,30px);
  }
  .proof__logo{max-width:170px}
}


/* ---------- Rail card widths (mobile overrides, declared last) ----------
   --rail-card must match each rail's card width so the trailing spacer can
   size itself and the last card can reach the gutter. */
@media(max-width:900px){
  .hscroll:has(.p-card){--rail-card:78%}
  .hscroll:has(.tl__step){--rail-card:78%}
  .hscroll:has(.fibre){--rail-card:84%}
}

/* ---------- entrance reveal: staggered rise-up ----------------------
   Cards/tiles start low + hidden and rise into place when their section
   scrolls into view, each shortly after the last. Gated on JS being live
   (html loses .no-js pre-paint) so no-JS users get everything in place. */
html:not(.no-js) .reveal > *{
  opacity:0;
  transform:translateY(26px);
}
html:not(.no-js) .reveal.is-in > *{
  opacity:1;
  transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
html:not(.no-js) .reveal.is-in > *:nth-child(1){transition-delay:0s}
html:not(.no-js) .reveal.is-in > *:nth-child(2){transition-delay:.08s}
html:not(.no-js) .reveal.is-in > *:nth-child(3){transition-delay:.16s}
html:not(.no-js) .reveal.is-in > *:nth-child(4){transition-delay:.24s}
html:not(.no-js) .reveal.is-in > *:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  html:not(.no-js) .reveal > *,
  html:not(.no-js) .reveal.is-in > *{opacity:1;transform:none;transition:none}
}




.preview-flag{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:999;
  font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#DCD5C2;background:rgba(12,14,16,.82);border:1px solid rgba(255,255,255,.16);
  padding:8px 14px;border-radius:999px;backdrop-filter:blur(8px);pointer-events:none}


/* Scorecard CTA lives permanently in the header bar (primary lead-gen
   route). It takes the auto margin so it and the toggle sit together on
   the right, with the hamburger furthest right. */
.header-cta{margin-left:auto;flex:none}
.header-cta__short{display:none}
@media(max-width:620px){
  .header-cta__full{display:none}
  .header-cta__short{display:inline}
}
@media(max-width:420px){
  .header-cta .btn__arrow{display:none}
  .header-cta{padding-inline:var(--s-3)}
}

/* ================= SITE MENU (hamburger, all breakpoints) =============
   Replaces the old inline .site-nav links. The bar keeps only the brand
   and the toggle; everything else lives in a full-screen overlay so the
   navigation can be visual rather than a cramped row of text links. */
.nav-toggle{
  display:inline-flex;align-items:center;gap:var(--s-3);
  flex:none;cursor:pointer;
  height:44px;padding:0 var(--s-4) 0 var(--s-4);
  background:transparent;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);color:var(--text-bright);
  font-family:var(--font-body);font-size:var(--t-small);font-weight:500;
  transition:border-color .16s ease, background-color .16s ease;
}
.nav-toggle:hover{border-color:var(--text-soft);background:var(--surface)}
.nav-toggle__bars{display:grid;gap:4px;width:18px;flex:none}
.nav-toggle__bars span{
  display:block;height:2px;width:100%;background:var(--text-bright);
  border-radius:2px;transition:transform .26s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-toggle__txt{line-height:1}

.menu{
  position:fixed;inset:0;z-index:55;   /* BELOW the header (60) so the
                                          toggle stays clickable as Close */
  background:rgba(16,26,29,.975);
  backdrop-filter:blur(18px) saturate(1.1);
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--header-h) + var(--s-5)) 0 var(--s-8);
  opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu__cols{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:900px){.menu__cols{grid-template-columns:1.25fr .85fr;gap:var(--s-8)}}

.menu__label{
  display:block;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);
  margin-bottom:var(--s-4);
}
.menu__side .menu__label{margin-top:var(--s-6)}
.menu__side .menu__label:first-child{margin-top:0}

.menu__primary{display:grid;gap:var(--s-1)}
.menu__link{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:var(--s-4);text-decoration:none;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);
  transition:padding-left .2s ease;
}
.menu__link:hover,.menu__link:focus-visible{padding-left:var(--s-3)}
.menu__n{
  font-size:var(--t-micro);color:var(--text-soft);
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:var(--s-2);
}
.menu__n::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fib,var(--orange))}
.menu__link:nth-child(2) .menu__n::before{background:var(--fibre-1)}
.menu__link:nth-child(3) .menu__n::before{background:var(--fibre-2)}
.menu__link:nth-child(4) .menu__n::before{background:var(--fibre-3)}
.menu__link:nth-child(5) .menu__n::before{background:var(--fibre-4)}
.menu__ttl{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.18rem,1.02rem + .72vw,1.68rem);
  line-height:1.08;letter-spacing:-.03em;color:var(--text-bright);
  display:block;
}
.menu__link:hover .menu__ttl{color:var(--orange)}
.menu__desc{
  display:block;margin-top:6px;font-size:var(--t-small);
  color:var(--text-soft);line-height:1.45;max-width:46ch;
}

.menu__card{
  display:block;text-decoration:none;
  padding:var(--s-5);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.menu__card + .menu__card{margin-top:var(--s-3)}
.menu__card:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)}
.menu__card h3{
  font-family:var(--font-display);font-weight:500;font-size:1.12rem;
  letter-spacing:-.02em;color:var(--text-bright);margin:0 0 6px;line-height:1.2;
}
.menu__card p{font-size:var(--t-small);color:var(--text-soft);line-height:1.5;margin:0}
.menu__card .menu__go{
  display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);
  font-size:var(--t-small);color:var(--orange);
}
.menu__side .btn{margin-top:var(--s-5);width:100%;justify-content:center}


.menu__close{
  position:absolute;top:calc(var(--header-h) + var(--s-2));right:var(--gutter);
  display:inline-flex;align-items:center;gap:var(--s-2);
  height:38px;padding-inline:var(--s-4);cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);color:var(--text-soft);
  font-family:var(--font-body);font-size:var(--t-small);
  transition:color .16s ease, border-color .16s ease;
}
.menu__close:hover{color:var(--text-bright);border-color:var(--text-soft)}
.menu__close span{font-size:1.05rem;line-height:1}
@media(min-width:900px){.menu__close{display:none}}  /* desktop uses the header toggle */
html.no-js .menu__close{display:none}

.menu .wrap{position:relative}
html[data-menu-open="true"]{overflow:hidden}

/* No-JS: the overlay cannot be opened, so let it sit in the flow instead
   of trapping the links behind a button that does nothing. */
html.no-js .nav-toggle{display:none}
html.no-js .menu{
  position:static;opacity:1;visibility:visible;
  background:none;backdrop-filter:none;padding:var(--s-6) 0 0;
}

@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .menu__link,.menu__card,.nav-toggle__bars span{transition:none}
}


/* ---------- mobile header: icon-only toggle, compact CTA ---------------
   The word "Menu" and a full-size Scorecard button crowd a phone header.
   The toggle keeps its accessible name via aria-label, so hiding the
   visible text costs nothing for screen readers. */
@media(max-width:700px){
  .nav-toggle__txt{display:none}
  .nav-toggle{padding-inline:0;width:44px;justify-content:center;gap:0}
  .header-cta{height:36px;font-size:.82rem;padding-inline:var(--s-3)}
  .header-cta .btn__arrow{width:24px;height:24px;margin-left:-6px;font-size:.85rem}
  .site-header__bar{gap:var(--s-3);padding-right:var(--s-2)}
}
/* the in-panel close button is retired: the header toggle sits above the
   overlay and morphs to a cross, so a second control was redundant. */
.menu__close{display:none}