/* WLDM redesign stylesheet
   Built 7 Sep 2026 from WLDM-Brand-Replication-Brief.md v3.
   Bricks-shaped: every rule is a class, no element depends on page order.
   Sections: .brx-section > .brx-container > elements. */

/* ============================================================ 1. FONTS */

@font-face{font-family:'TT Lakes Neue';src:url(fonts/TT_Lakes_Neue_Regular.woff2) format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'TT Lakes Neue';src:url(fonts/TT_Lakes_Neue_Italic.woff2) format('woff2');font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:'TT Lakes Neue Head';src:url(fonts/TT_Lakes_Neue_Condensed_DemiBold.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

/* ============================================================ 2. TOKENS */

:root{
  /* core palette */
  --bg:#EEEADE; --surface:#F7F5EE;          /* Beige + 50% Beige, style guide p.4 */
  --ink:#2A2B29; --ink-deep:#20211F;
  --ny:#E1FF01; --bl:#B8D3D8; --tp:#BFC0B6; --wh:#FFFFFF;
  /* derived neutrals */
  --line:#DCD8C9;                          /* Beige darkened, borders */
  --ink-soft:#55564F;                      /* CR 6.17 on Beige, running text */
  --muted:#4F5049;                         /* CR 6.90 on Beige, labels and captions */
  /* accents: the guide has one accent (Fluro) and one blue (#B8D3D8) */
  --accent-dark:var(--ink);                /* accent on a light ground */
  --accent-light:var(--bl);                /* accent on a dark ground */
  /* on ink */
  --on-ink:#F3F0E6; --on-ink-lead:#CFCABB; --on-ink-label:#BFC0B6;   /* Taupe, CR 7.74 */
  /* type */
  --serif:"TT Lakes Neue","Roboto",system-ui,sans-serif;
  --head:"TT Lakes Neue Head","TT Lakes Neue",Roboto,sans-serif;
  --sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Accent font (style guide p.3): labels, calls to action, text breaks */
  --label:"TT Lakes Neue Head","TT Lakes Neue",Roboto,sans-serif;
  --data:"Roboto",system-ui,sans-serif;   /* tabular figures where columns must line up */
  --mono:var(--label);                    /* alias kept while the 200 call sites are renamed */
  /* spacing scale: one ratio (~1.4) so no two steps are close enough to pick by accident */
  --s1:8px; --s2:12px; --s3:18px; --s4:24px; --s5:32px; --s6:44px; --s7:60px; --s8:80px;
  --sec-y:clamp(56px,7vw,92px);           /* every .brx-section, top and bottom */
  --hero-y:clamp(96px,10vw,140px);        /* every hero, top only. One value, no page override. */
  --hero-foot:clamp(44px,5vw,66px);       /* hero bottom where a figure follows */
  /* Width (Sophie, 1 Oct): the site was a fixed 1140px column. It now runs to
     1400px and the gutter grows with the screen, so nav, hero and every section
     share one left and right edge at every width. */
  --gutter:clamp(20px,4vw,56px);
  --maxw:1400px;
  /* TYPE SCALE (Sophie, 1 Oct). Five sizes, nothing between them.
       page heading   TT Lakes Neue 400  64px   .h1
       heading        TT Lakes Neue 400  34px   .h2, pull-outs
       small heading  Roboto 400         21px   .h3
       body           Roboto 400         18px   body, .body, .lead
       small body     Roboto 300         17px   copy inside cards, frames, graphs */
  --fs-h1:clamp(38px,4.9vw,64px);
  --fs-h2:clamp(27px,2.5vw,34px);
  --fs-h3:21px;
  --fs-body:18px;
  --fs-small:17px;
  /* card padding: two values, nothing between them */
  --pad-card:var(--s5);                          /* 32px: card, callout, small panel */
  --pad-card-lg:clamp(28px,3.4vw,40px);          /* 40px: pillar, capture, quote, skyband, pad-lg */
  /* radii: seven steps and 50% for true circles. Nothing else. */
  --r-cell:3px;                           /* data cells 6-24px square */
  --r-xs:6px;                             /* chips, swatches, small bars */
  --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:20px; --r-pill:100px;
  /* hairlines: one per weight per ground. --line and --hair-strong are remapped
     inside .brx-section--ink, so a component never states a ground-specific alpha. */
  --hair-strong:rgba(42,43,41,.35);
  /* Chart series, schema.org study only. Brand colours and their tints only
     (Sophie, 1 Oct: no red, brand colours). Light fills carry an ink outline and
     every series is labelled in ink, so identity never rests on hue alone. */
  --c-nav:#2A2B29; --c-content:#6F969E; --c-people:#B8D3D8; --c-ecom:#E1FF01;
  --c-places:#82817A; --c-data:#BFC0B6; --c-else:#DCD9CE;
  /* shadows: two. A ring (0 0 0 Npx) or an inset hairline is a border, not a shadow. */
  --shadow-hover:0 14px 34px rgba(42,43,41,.10);
  --shadow-lift:0 24px 50px -30px rgba(42,43,41,.45);
}

/* ============================================================ 3. BASE */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,.h1,.h2{font-family:var(--serif);font-weight:400;margin:0}
h3,.h3{font-family:var(--sans);font-weight:400;margin:0;font-size:var(--fs-h3);line-height:1.3}
h4,.h4{font-family:var(--sans);font-weight:400;margin:0;font-size:var(--fs-body);line-height:1.4}
/* Widows and orphans (Sophie, 1 Oct): headlines balance their lines, running
   text never leaves one word alone on the last line. A forced break inside a
   headline is a <br>; a pair that must stay together is .nowrap. */
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.lead--italic,.pullout{text-wrap:balance}
p,li,figcaption,blockquote,dd,.lead,.body{text-wrap:pretty}
.nowrap{white-space:nowrap}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--ny);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px;border-radius:var(--r-cell)}

/* ============================================================ 4. LAYOUT */

.brx-section{padding:var(--sec-y) 0;position:relative}
.brx-section--tight{padding:calc(var(--sec-y) * .62) 0}
.brx-section--tinted{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brx-section--ruled{border-top:1.5px solid var(--line)}
/* Every hero, ink or beige, full-bleed or not, opens on --hero-y. A hero may
   change its bottom padding; the top is the token so the H1 lands at the same
   height on every page. The one exception is enterprise-seo, whose treemap
   bleeds to the top edge by design. */
.brx-section--hero{padding:var(--hero-y) 0 var(--sec-y)}
/* A hero closes on one of two values: --sec-y, or --hero-foot where the hero
   hands straight over to a figure or a rail (home, speaker, ranking-drop,
   enterprise-seo). Those four set padding-bottom:var(--hero-foot) in their
   own file; nothing else invents a third. */
/* Hero chip band: whatever sits above the H1 (kicker, eyebrow or tag) occupies
   the same 45px band, so a 21px kicker and a 35px tag put the H1 in one place. */
.brx-section--hero .kicker,.brx-section--hero .eyebrow{margin:0 0 var(--s4)}
.brx-section--hero .tag{margin:0 0 10px}
.brx-section--center{text-align:center}
.brx-section--center .h1,.brx-section--center .h2,.brx-section--center .h3,.brx-section--center .lead,.brx-section--center .body{margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------- dark sections

   Two hooks, one behaviour:
     .brx-section--ink  a full ink section: ground, on-ink text, grid texture,
                        and the token remap.
     .ink-ground        the token remap ONLY, for the page-scoped dark blocks
                        that already paint their own ground and texture
                        (.home-hero, .spk-hero, .spk-pitch, .careers-hero,
                         .careers-culture, .res-hero, .es-hero, .ce-dark,
                         .bl-dark, .geo-band, .rdi-hero).
   Because both remap --line and --hair-strong, a component inside either one
   states var(--line), never a ground-specific alpha. That is what makes "one
   hairline per ground" true rather than aspirational. */
.brx-section--ink,.ink-ground,.site-footer,.nav-panel,.callout{
  --bg:#20211F;
  --surface:#2A2B29;
  --line:rgba(243,240,230,.16);
  --hair-strong:rgba(243,240,230,.35);
  --ink-soft:#CFCABB;
  --muted:#BFC0B6;
  --accent-dark:#B8D3D8;
}
.brx-section--ink{background:var(--ink-deep);color:var(--on-ink);overflow:hidden}
:is(.brx-section--ink,.ink-ground--tex)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(243,240,230,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,240,230,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
:is(.brx-section--ink,.ink-ground)>.brx-container{position:relative}
:is(.brx-section--ink,.ink-ground) h1,:is(.brx-section--ink,.ink-ground) h2,:is(.brx-section--ink,.ink-ground) h3,:is(.brx-section--ink,.ink-ground) h4,
:is(.brx-section--ink,.ink-ground) .h1,:is(.brx-section--ink,.ink-ground) .h2,:is(.brx-section--ink,.ink-ground) .h3,:is(.brx-section--ink,.ink-ground) .h4,
:is(.brx-section--ink,.ink-ground) .panel-head .title,:is(.brx-section--ink,.ink-ground) blockquote.brand{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .eyebrow::before{background:var(--bl)}
:is(.brx-section--ink,.ink-ground) .kicker b,.hub .kicker b{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .tag{border-color:var(--hair-strong);background:rgba(225,255,1,.10);color:var(--on-ink-label)}
:is(.brx-section--ink,.ink-ground) .tag .dot{background:var(--ny)}
/* on an ink ground the secondary is .btn--ghost; .btn--outline is kept legible
   for the pages that still carry one, but new work uses ghost (see BUTTONS). */
:is(.brx-section--ink,.ink-ground) .btn--outline{color:var(--on-ink);border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .btn--outline:hover{background:rgba(243,240,230,.08)}
:is(.brx-section--ink,.ink-ground) .note{background:rgba(243,240,230,.06);color:var(--on-ink-lead)}
:is(.brx-section--ink,.ink-ground) .note-dashed{border-color:var(--hair-strong);background:rgba(243,240,230,.04)}
:is(.brx-section--ink,.ink-ground) .quote-card{border-color:var(--hair-strong);background:linear-gradient(150deg,rgba(225,255,1,.14),rgba(32,33,31,0))}
:is(.brx-section--ink,.ink-ground) .capture{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .card--flat{background:var(--ink)}
:is(.brx-section--ink,.ink-ground) table.brand th{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) table.brand td{border-bottom-color:var(--line)}
:is(.brx-section--ink,.ink-ground) table.cmp td.col-p{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) .tab[aria-selected="true"]{background:rgba(225,255,1,.14)}
:is(.brx-section--ink,.ink-ground) .tab[aria-selected="true"] .t-title{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .tab:hover,:is(.brx-section--ink,.ink-ground) .acc-head:hover,:is(.brx-section--ink,.ink-ground) .step:hover{background:rgba(243,240,230,.05)}
:is(.brx-section--ink,.ink-ground) .acc[data-open="true"]{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .acc-head .acc-chev{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .flow .node{background:rgba(243,240,230,.05)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="ink"]{background:var(--ny)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="part"]{background:rgba(243,240,230,.34)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="off"]{background:rgba(243,240,230,.12)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.on{background:var(--ny)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.part{background:rgba(243,240,230,.34)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.off{background:rgba(243,240,230,.12)}
:is(.brx-section--ink,.ink-ground) ul.clean li::before{border-color:var(--ink-deep)}
/* photographs and diagrams that ship on a white ground get a frame, not a float */
:is(.brx-section--ink,.ink-ground) figure img{background:var(--wh);border-radius:var(--r-sm)}
:is(.brx-section--ink,.ink-ground) table.brand td.rowhead{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) [data-island="kv-cache"] .kv-metrics .v{color:var(--on-ink)}
/* Primary Blue is a light ground: inside a dark section its text stays black */
:is(.brx-section--ink,.ink-ground) .skyband{color:var(--ink);--ink-soft:#55564F;--muted:#4F5049;--line:rgba(42,43,41,.2);--hair-strong:rgba(42,43,41,.35)}
:is(.brx-section--ink,.ink-ground) .skyband h1,:is(.brx-section--ink,.ink-ground) .skyband h2,:is(.brx-section--ink,.ink-ground) .skyband h3,:is(.brx-section--ink,.ink-ground) .skyband h4,
:is(.brx-section--ink,.ink-ground) .skyband .h1,:is(.brx-section--ink,.ink-ground) .skyband .h2,:is(.brx-section--ink,.ink-ground) .skyband .h3,:is(.brx-section--ink,.ink-ground) .skyband .h4{color:var(--ink)}
.brx-container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.brx-container--wide{max-width:var(--maxw)}   /* kept as a hook; every container now shares one edge */
.brx-container--narrow{max-width:1040px}

.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(34px,4vw,60px);align-items:center}

/* ============================================================ 5. TYPE

   Sophie White's scale (1 Oct 2026) replaces the earlier four-role set. The
   numbers live in the --fs-* tokens; this is where each one is used.

   PAGE HEADING   TT Lakes Neue 400, 64px     .h1 (one per page)
   HEADING        TT Lakes Neue 400, 34px     .h2, .h2--wide, .h2--xl, pull-outs
                                              (.pullout, .lead--italic, .quote-card p)
   SMALL HEADING  Roboto 400, 21px            h3, .h3, .h3--lg (card and panel titles)
   BODY           Roboto 400, 18px            body, p, li, .body, .body--lg, .lead
   SMALL BODY     Roboto 300, 17px            copy inside a card, frame, graph or
                                              figure: .body--sm, .step p, .pillar p,
                                              .capture p, .stat .k, .acc-body p
   ACCENT         TT Lakes Neue Cond Demi 600 labels, kickers, eyebrows, pills, tags,
                                              stat numbers, table headers, buttons
                                              (style guide p.3, unchanged)

   Where a headline must be shorter, a page sets max-width in ch. It does not
   set a different font-size. */

.eyebrow{margin:0 0 var(--s4)}
.brx-section--hero .tag{margin:0 0 10px}
.brx-section--center{text-align:center}
.brx-section--center .h1,.brx-section--center .h2,.brx-section--center .h3,.brx-section--center .lead,.brx-section--center .body{margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------- dark sections

   Two hooks, one behaviour:
     .brx-section--ink  a full ink section: ground, on-ink text, grid texture,
                        and the token remap.
     .ink-ground        the token remap ONLY, for the page-scoped dark blocks
                        that already paint their own ground and texture
                        (.home-hero, .spk-hero, .spk-pitch, .careers-hero,
                         .careers-culture, .res-hero, .es-hero, .ce-dark,
                         .bl-dark, .geo-band, .rdi-hero).
   Because both remap --line and --hair-strong, a component inside either one
   states var(--line), never a ground-specific alpha. That is what makes "one
   hairline per ground" true rather than aspirational. */
.brx-section--ink,.ink-ground,.site-footer,.nav-panel,.callout{
  --bg:#20211F;
  --surface:#2A2B29;
  --line:rgba(243,240,230,.16);
  --hair-strong:rgba(243,240,230,.35);
  --ink-soft:#CFCABB;
  --muted:#BFC0B6;
  --accent-dark:#B8D3D8;
}
.brx-section--ink{background:var(--ink-deep);color:var(--on-ink);overflow:hidden}
:is(.brx-section--ink,.ink-ground--tex)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(243,240,230,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,240,230,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
:is(.brx-section--ink,.ink-ground)>.brx-container{position:relative}
:is(.brx-section--ink,.ink-ground) h1,:is(.brx-section--ink,.ink-ground) h2,:is(.brx-section--ink,.ink-ground) h3,:is(.brx-section--ink,.ink-ground) h4,
:is(.brx-section--ink,.ink-ground) .h1,:is(.brx-section--ink,.ink-ground) .h2,:is(.brx-section--ink,.ink-ground) .h3,:is(.brx-section--ink,.ink-ground) .h4,
:is(.brx-section--ink,.ink-ground) .panel-head .title,:is(.brx-section--ink,.ink-ground) blockquote.brand{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .eyebrow::before{background:var(--bl)}
:is(.brx-section--ink,.ink-ground) .kicker b,.hub .kicker b{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .tag{border-color:var(--hair-strong);background:rgba(225,255,1,.10);color:var(--on-ink-label)}
:is(.brx-section--ink,.ink-ground) .tag .dot{background:var(--ny)}
/* on an ink ground the secondary is .btn--ghost; .btn--outline is kept legible
   for the pages that still carry one, but new work uses ghost (see BUTTONS). */
:is(.brx-section--ink,.ink-ground) .btn--outline{color:var(--on-ink);border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .btn--outline:hover{background:rgba(243,240,230,.08)}
:is(.brx-section--ink,.ink-ground) .note{background:rgba(243,240,230,.06);color:var(--on-ink-lead)}
:is(.brx-section--ink,.ink-ground) .note-dashed{border-color:var(--hair-strong);background:rgba(243,240,230,.04)}
:is(.brx-section--ink,.ink-ground) .quote-card{border-color:var(--hair-strong);background:linear-gradient(150deg,rgba(225,255,1,.14),rgba(32,33,31,0))}
:is(.brx-section--ink,.ink-ground) .capture{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .card--flat{background:var(--ink)}
:is(.brx-section--ink,.ink-ground) table.brand th{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) table.brand td{border-bottom-color:var(--line)}
:is(.brx-section--ink,.ink-ground) table.cmp td.col-p{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) .tab[aria-selected="true"]{background:rgba(225,255,1,.14)}
:is(.brx-section--ink,.ink-ground) .tab[aria-selected="true"] .t-title{color:var(--wh)}
:is(.brx-section--ink,.ink-ground) .tab:hover,:is(.brx-section--ink,.ink-ground) .acc-head:hover,:is(.brx-section--ink,.ink-ground) .step:hover{background:rgba(243,240,230,.05)}
:is(.brx-section--ink,.ink-ground) .acc[data-open="true"]{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .acc-head .acc-chev{border-color:var(--hair-strong)}
:is(.brx-section--ink,.ink-ground) .flow .node{background:rgba(243,240,230,.05)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="ink"]{background:var(--ny)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="part"]{background:rgba(243,240,230,.34)}
:is(.brx-section--ink,.ink-ground) .legend .sw[data-sw="off"]{background:rgba(243,240,230,.12)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.on{background:var(--ny)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.part{background:rgba(243,240,230,.34)}
:is(.brx-section--ink,.ink-ground) [data-island="coverage-grid"] .cg-grid i.off{background:rgba(243,240,230,.12)}
:is(.brx-section--ink,.ink-ground) ul.clean li::before{border-color:var(--ink-deep)}
/* photographs and diagrams that ship on a white ground get a frame, not a float */
:is(.brx-section--ink,.ink-ground) figure img{background:var(--wh);border-radius:var(--r-sm)}
:is(.brx-section--ink,.ink-ground) table.brand td.rowhead{color:var(--on-ink)}
:is(.brx-section--ink,.ink-ground) [data-island="kv-cache"] .kv-metrics .v{color:var(--on-ink)}
/* Primary Blue is a light ground: inside a dark section its text stays black */
:is(.brx-section--ink,.ink-ground) .skyband{color:var(--ink);--ink-soft:#55564F;--muted:#4F5049;--line:rgba(42,43,41,.2);--hair-strong:rgba(42,43,41,.35)}
:is(.brx-section--ink,.ink-ground) .skyband h1,:is(.brx-section--ink,.ink-ground) .skyband h2,:is(.brx-section--ink,.ink-ground) .skyband h3,:is(.brx-section--ink,.ink-ground) .skyband h4,
:is(.brx-section--ink,.ink-ground) .skyband .h1,:is(.brx-section--ink,.ink-ground) .skyband .h2,:is(.brx-section--ink,.ink-ground) .skyband .h3,:is(.brx-section--ink,.ink-ground) .skyband .h4{color:var(--ink)}
.brx-container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.brx-container--wide{max-width:var(--maxw)}   /* kept as a hook; every container now shares one edge */
.brx-container--narrow{max-width:1040px}

.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(34px,4vw,60px);align-items:center}

/* ============================================================ 5. TYPE

   FOUR ROLES, style guide p.3. Nothing on the site sits outside them.

   1. PRIMARY   TT Lakes Neue Regular 400  (--serif)
                h1, h2 and anything that reads as a headline
                (.h1 / .h2 / .h2--xl, .panel-head .title, blockquote.brand,
                 .quote-card p, .tab .t-title, .hub-card .t, .nav-panel-links a,
                 and .lead--italic, which is a pull quote in TT Lakes italic,
                 not a lead)
   2. SECONDARY Roboto Regular 400         (--sans, weight 400)
                the sentence directly under a headline: .lead. Where a page had
                .body--lg in that slot the class is now .lead.
   3. TEXT      Roboto Light 300           (--sans, weight 300)
                running body: body, .body, .body--lg, p, li, td
                Exception, declared once below: anything under 15px goes back
                to 400, because Light disappears on beige at that size.
   4. ACCENT    TT Lakes Neue Cond Demi Bold (--label / --head, weight 600)
                labels, kickers, eyebrows, pills, tags, stat numbers, table
                headers, buttons, and h3/h4 card titles.

   HEADLINE SCALE, one set, no page override:
     .h1       clamp(36px,5.6vw,64px)   64px at 1440
     .h2       clamp(25px,3.1vw,34px)   34px at 1440   section headline
     .h2--xl   clamp(30px,4.2vw,46px)   46px at 1440   closing / full-bleed statement
     .h3--lg   24px                     large panel title
     .h3       21px                     card title
     .h4       18px                     sub-title inside a card
   Where a headline must be shorter, a page sets max-width in ch. It does not
   set a different font-size. */

.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--ink);flex:none}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s4)}
.kicker b{font-weight:400;color:var(--ink)}

.h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.022em;max-width:22ch}
.h1 em{font-style:italic;font-weight:400}
.h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.012em;max-width:30ch}
.h2--wide{max-width:40ch}
/* .h2--xl was a third headline size (46px). Sophie's scale has two, so it is
   the section heading now; the class stays so the markup does not churn. */
.h2--xl{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.012em}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:0}
.h3--lg{font-size:var(--fs-h3);line-height:1.3;letter-spacing:0}
.h4{font-size:var(--fs-body);line-height:1.4;letter-spacing:0}
.accent-bar{display:block;width:104px;height:7px;background:var(--ny);border-radius:var(--r-pill);margin:var(--s5) 0 var(--s5)}

/* role 2: Roboto Regular, the sentence under a headline */
.lead{font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft);max-width:68ch;margin:0}
/* role 1 in disguise: a pull line set in TT Lakes italic, not Roboto */
.lead--italic{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--muted);max-width:34ch;font-size:var(--fs-h2);line-height:1.2}
/* pull-out: one line lifted out of the copy, TT Lakes at heading size */
.pullout{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.012em;color:var(--ink);max-width:30ch;margin:0;padding-left:22px;border-left:4px solid var(--bl)}
:is(.brx-section--ink,.ink-ground) .pullout{color:var(--wh)}
/* role 3: Roboto Light, running text */
.body{font-weight:400;font-size:var(--fs-body);line-height:1.6;max-width:74ch;margin:0}
/* small body: copy inside a card, frame, graph or figure */
.body--sm{font-weight:300;font-size:var(--fs-small);line-height:1.6;max-width:60ch;margin:0}
/* Light is too thin below 15px on beige: small type stays Regular */
.caption,.small,.card-label,.eyebrow,.kicker,.pill,.tag,.classchip,.score .k,.stat .src{font-weight:400}
.body--soft{color:var(--ink-soft)}
.body--lg{font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft);max-width:74ch}
/* role 2 again: the paragraph directly under a headline is the lead sentence,
   so it takes Roboto Regular whatever class the page gave it. Running text
   further down the block stays Light. */
:is(h1,h2,.h1,.h2)+.body--lg,:is(h1,h2,.h1,.h2)+.body{font-weight:400}
.caption{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.small{font-size:15px;color:var(--muted);margin:0}

/* Highlighters. On a light ground: black text with a band under the lower
   third. On ink the same band would put white or taupe text on fluro/blue,
   which style guide p.5 prohibits, so there it becomes a solid mark with
   black text, which p.5 approves. */
.u-lm{background:linear-gradient(transparent 62%,var(--ny) 62%);padding:0 .05em}
.u-bl{background:linear-gradient(transparent 62%,var(--bl) 62%);padding:0 .05em}
:is(.brx-section--ink,.ink-ground) .u-lm{background:var(--ny);color:var(--ink);padding:0 .14em;border-radius:var(--r-cell)}
:is(.brx-section--ink,.ink-ground) .u-bl{background:var(--bl);color:var(--ink);padding:0 .14em;border-radius:var(--r-cell)}
.lime{color:var(--ny)}
.num{font-family:var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--ny);padding:5px 12px;border-radius:var(--r-pill)}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair-strong);background:rgba(225,255,1,.18);border-radius:var(--r-pill);padding:7px 14px 7px 10px}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-light);flex:none;animation:wl-pulse 2.4s ease-in-out infinite}
.classchip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--ny);color:var(--ink);padding:3px 9px;border-radius:var(--r-pill);font-weight:600}

ul.clean{list-style:none;max-width:74ch;margin:0;padding:0}
ul.clean li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-soft)}
ul.clean li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--bl);border:1.5px solid var(--ink);border-radius:var(--r-cell)}

/* ============================================================ 6. BUTTONS

   THE RULE. One primary, one secondary, one exception. Nothing else.

   PRIMARY      .btn .btn--primary
                Fluro #E1FF01 pill, black #2A2B29 text, style guide p.3.
                It is the primary on EVERY ground: beige, 50% beige, white,
                ink, full-bleed ink hero. There is no dark primary.
                In a hero or section CTA row it also carries .btn--lg and a
                trailing <span class="arw">-></span>. The nav CTA is the same
                button at base size and carries no arrow.

   SECONDARY    .btn .btn--outline   on a LIGHT ground (beige, 50% beige, white, blue)
                .btn .btn--ghost     on an INK ground
                Transparent, 1.5px hairline, no arrow, ever. The absence of the
                arrow is what tells the two apart at a glance.

   EXCEPTION    .btn .btn--dark  — ink pill, fluro text.
                Only where the primary would sit ON Primary Blue #B8D3D8 or on
                Fluro. A fluro pill on blue is a 1.4:1 shape against its ground:
                the button loses its edge. The text combination (fluro on black)
                is approved on p.5. Three call sites, all .skyband panels:
                home close, ranking-drop offer, research-lab study card.
                Do not use it anywhere else.

   Geometry is identical across all four: 46px min-height (55px rendered),
   14px/26px padding, 100px radius, 15px accent font; .btn--lg is 17px/32px
   and 64px rendered. Do not set a button's height, padding or font per page. */

.btn{
  font-family:var(--label);font-size:15px;letter-spacing:.01em;text-transform:none;font-weight:600;
  text-decoration:none;padding:14px 26px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:10px;border:1.5px solid transparent;cursor:pointer;
  min-height:46px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn .arw{font-family:var(--label);font-size:15px;line-height:1}
.btn--primary{background:var(--ny);color:var(--ink)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(225,255,1,.5)}
.btn--dark{background:var(--ink);color:var(--ny)}
.btn--dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:rgba(42,43,41,.06)}
/* ghost is on-ink by definition, so its hairline is stated, not inherited:
   it also runs inside page-scoped ink heroes that do not remap --hair-strong */
.btn--ghost{background:transparent;color:var(--wh);border-color:var(--hair-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--lg{font-size:17px;padding:17px 32px}
.btn--lg .arw{font-size:17px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ============================================================ 7. NAV */

.nav{position:sticky;top:0;z-index:60;padding:14px 0;background:rgba(238,234,222,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(42,43,41,.06)}
.nav-inner{display:flex;align-items:center;gap:var(--s5);width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.nav-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.nav-logo img{height:26px;width:auto;display:block}
/* the links sit inside <nav>, so the auto margin goes on the wrapper: links and CTA end on the content edge */
.nav-inner>nav{margin-left:auto}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{font-size:15.5px;font-weight:400;text-decoration:none;color:var(--ink);padding:9px 14px;border-radius:var(--r-pill);display:block;transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(42,43,41,.06);color:var(--ink)}
.nav-links a[aria-current="page"]{background:var(--ny);color:var(--ink)}
.nav-cta{flex:none}
.nav-burger{display:none;flex:none;margin-left:auto;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);cursor:pointer}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
.nav-panel{position:fixed;inset:0;z-index:70;background:var(--ink-deep);color:var(--on-ink);display:none;flex-direction:column;padding:22px var(--gutter) 40px;overflow-y:auto}
.nav-panel[data-open="true"]{display:flex}
.nav-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s7)}
.nav-panel-top img{height:26px;width:auto}
.nav-close{width:46px;height:46px;border:1px solid var(--hair-strong);background:transparent;color:var(--on-ink);border-radius:var(--r-pill);font-size:20px;line-height:1;cursor:pointer}
.nav-panel-links{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}
.nav-panel-links a{font-family:var(--serif);font-size:30px;line-height:1.25;text-decoration:none;color:var(--on-ink);padding:12px 0;display:block;border-bottom:1px solid var(--line)}
.nav-panel-links a[aria-current="page"]{color:var(--ny)}
.nav-panel .btn{margin-top:var(--s6);align-self:flex-start}
body.is-locked{overflow:hidden}

/* ============================================================ 8. CARDS AND PANELS */

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.card--flat{background:var(--bg)}
.card--pad-lg{padding:var(--pad-card-lg)}
.card-hover{transition:transform .35s ease,box-shadow .35s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card-label{font-family:var(--mono);font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
.card-value{font-family:var(--head);font-size:21px;line-height:1.15;letter-spacing:-.01em}

.callout{background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg);padding:var(--pad-card)}
.callout .h2,.callout .h3{color:var(--wh)}
.callout .lead,.callout .body{color:var(--on-ink-lead)}
.skyband{background:var(--bl);border-radius:var(--r-xl);padding:var(--pad-card-lg)}
.skyband .body,.skyband .lead{color:var(--ink)}
.note-dashed{border:1px dashed var(--ink);border-radius:var(--r-md);background:rgba(42,43,41,.03);padding:clamp(24px,2.6vw,30px) clamp(24px,2.8vw,32px)}
.note{border-left:4px solid var(--ny);background:rgba(255,255,255,.5);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:16px 20px;font-size:14.5px;color:var(--ink-soft)}

.quote-card{margin:0;padding:var(--pad-card-lg);border:1px solid var(--hair-strong);border-radius:var(--r-lg);background:linear-gradient(150deg,rgba(184,211,216,.55),rgba(238,234,222,0))}
.quote-card p{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.25;letter-spacing:-.012em;margin:0 0 var(--s3);max-width:40ch}
.quote-card footer{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
blockquote.brand{font-family:var(--serif);font-size:var(--fs-h3);line-height:1.45;font-style:italic;border-left:4px solid var(--bl);padding-left:20px;max-width:60ch;margin:0;color:var(--ink)}
blockquote.brand cite{display:block;margin-top:10px;font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============================================================ 9. STAT TILES */

.statstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(243,240,230,.16);border:1px solid var(--ink);border-radius:var(--r-lg);overflow:hidden}
.statstrip--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--ink);padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px)}
.stat .v{font-family:var(--head);font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.02em;color:var(--ny);font-variant-numeric:tabular-nums;display:block}
.stat .k{margin-top:12px;font-size:var(--fs-small);font-weight:300;line-height:1.55;color:var(--on-ink-lead);max-width:30ch}
.stat .src{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-label)}

.scoregrid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.score{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px}
.score .v{font-family:var(--head);font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.score .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ============================================================ 10. TABLES */

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.tbl-wrap table{margin:0}
table.brand{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-weight:300;min-width:560px}
table.brand th{background:var(--surface);color:var(--ink);text-align:left;padding:13px 18px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);font-weight:600;border-bottom:1px solid var(--line)}
table.brand td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
table.brand tr:last-child td{border-bottom:none}
table.brand td.num,table.brand td.mono{font-family:var(--data);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
table.brand td.rowhead{color:var(--ink)}
table.brand td.dim{color:var(--muted)}

/* comparison table: recommended column tinted */
table.cmp{min-width:660px}
table.cmp th.col-p{background:rgba(225,255,1,.3);letter-spacing:.16em;white-space:nowrap;border-left:2px solid var(--ny);border-right:2px solid var(--ny)}
table.cmp td.col-p{background:rgba(225,255,1,.12);color:var(--ink);border-left:2px solid var(--ny);border-right:2px solid var(--ny)}
table.cmp tr:last-child td.col-p{border-bottom:2px solid var(--ny)}
table.cmp td.col-them{color:var(--muted)}
table.cmp td.rowhead{width:26%}

/* ============================================================ 11. TABS */

.tabs{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.tabs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line);margin:0;padding:0}
.tab{text-align:left;padding:22px 26px;background:transparent;border:none;border-top:3px solid transparent;border-right:1px solid var(--line);cursor:pointer;min-height:44px;transition:background .25s,border-color .25s}
.tab:last-child{border-right:none}
.tab:hover{background:rgba(42,43,41,.05)}
.tab[aria-selected="true"]{background:rgba(225,255,1,.2);border-top-color:var(--accent-dark)}
.tab .t-tag{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.tab .t-title{display:block;font-family:var(--sans);font-weight:400;font-size:var(--fs-h3);line-height:1.3;letter-spacing:0;color:var(--muted)}
.tab[aria-selected="true"] .t-tag{color:var(--accent-dark)}
.tab[aria-selected="true"] .t-title{color:var(--ink)}
.tabpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.tabpanel[hidden]{display:none}
.tabpanel-l{padding:clamp(26px,3.2vw,42px);border-right:1px solid var(--line)}
.tabpanel-r{padding:clamp(26px,3.2vw,42px)}
.proprows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.proprows .row{background:var(--bg);padding:15px 18px;display:flex;justify-content:space-between;gap:18px}
.proprows .row .k{font-size:15px;color:var(--muted)}
.proprows .row .v{font-family:var(--data);font-size:14.5px;color:var(--accent-dark);text-align:right}
.flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flow .node{padding:13px 17px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(42,43,41,.03);font-size:15px;color:var(--ink-soft);white-space:nowrap}
.flow .node.is-end{border-color:var(--hair-strong);background:rgba(225,255,1,.2);color:var(--accent-dark)}
.flow .arw{color:var(--accent-dark);font-family:var(--mono);font-size:15px}

/* ============================================================ 12. ACCORDION (technical panels) */

.acc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);overflow:hidden;transition:border-color .25s}
.acc+.acc{margin-top:var(--s3)}
.acc[data-open="true"]{border-color:var(--hair-strong)}
.acc-head{display:flex;width:100%;align-items:center;gap:20px;padding:22px 26px;background:transparent;border:none;cursor:pointer;text-align:left;min-height:44px;transition:background .25s}
.acc-head:hover{background:rgba(42,43,41,.04)}
.acc-head .acc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;flex:none}
.acc-head .acc-title{flex:1;font-size:var(--fs-h3);line-height:1.35;color:var(--ink)}
.acc-head .acc-chev{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);flex:none;transition:transform .25s}
.acc[data-open="true"] .acc-chev{transform:rotate(180deg)}
.acc-body{padding:6px 26px 32px;border-top:1px solid var(--line)}
.acc-body[hidden]{display:none}
.acc-body>*{margin-top:24px}
/* Bare-element rules inside a container must not swallow classed page
   components: .acc-body p was overriding page labels (0,1,1 beats 0,1,0).
   These rules style unclassed prose only. */
.acc-body p:not([class]){font-size:var(--fs-small);font-weight:300;line-height:1.7;color:var(--ink-soft);max-width:78ch}
.acc-sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.acc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.acc-list li{display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-small);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:76ch}
.acc-list li .k{font-family:var(--mono);font-size:12px;color:var(--accent-dark);padding-top:4px;flex:none;min-width:46px}

/* ============================================================ 13. STEPS AND PILLARS */

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--bg);padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,30px);transition:background .25s}
.step:hover{background:var(--surface)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent-dark);letter-spacing:.08em;margin-bottom:20px}
.step .h3{margin-bottom:12px;letter-spacing:-.015em}
.step p{font-size:var(--fs-small);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:36ch}

.pillar{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--pad-card-lg)}
.pillar .card-label{margin-bottom:18px}
.pillar .h3{margin-bottom:14px;max-width:28ch}
.pillar p{font-size:var(--fs-small);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.pillar p+p{margin-top:14px;color:var(--muted)}

.legend{display:flex;gap:22px;flex-wrap:wrap}
.legend .item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.legend .sw{width:11px;height:11px;border-radius:var(--r-cell);flex:none}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:var(--s4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.legend .sw[data-sw="ink"]{background:var(--ink)}
.legend .sw[data-sw="ny"]{background:var(--ny);border:1px solid var(--hair-strong)}
.legend .sw[data-sw="part"]{background:rgba(42,43,41,.18)}
.legend .sw[data-sw="off"]{background:rgba(42,43,41,.07)}
.panel-head .title{font-family:var(--serif);font-size:21px;letter-spacing:-.015em;color:var(--ink)}

/* ============================================================ 14. CAPTURE */

.capture{border:1px solid var(--ink);border-radius:var(--r-xl);background:var(--surface);padding:var(--pad-card-lg);text-align:left;max-width:640px;margin:0 auto}
.capture .card-label{margin-bottom:14px}
.capture .h3{margin-bottom:12px;max-width:28ch}
.capture p{font-size:var(--fs-small);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.capture .btn-row{margin-top:var(--s5)}
.capture .reassure{margin-top:var(--s4);font-size:14px;font-weight:400;color:var(--muted);display:flex;align-items:flex-start;gap:10px}
.capture .reassure::before{content:"";width:9px;height:9px;background:var(--ny);border:1.5px solid var(--ink);border-radius:var(--r-cell);flex:none;margin-top:6px}

/* ============================================================ 15. FOOTER */

.site-footer{background:var(--ink-deep);color:var(--on-ink);padding:var(--s8) 0 var(--s6);position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(243,240,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,240,230,.045) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.site-footer .brx-container{position:relative}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s6);padding-bottom:var(--s7);border-bottom:1px solid var(--line)}
.footer-brand img{height:30px;width:auto;display:block;margin-bottom:var(--s3)}
.footer-brand p{font-size:16px;line-height:1.6;color:var(--on-ink-lead);max-width:32ch;margin-bottom:var(--s4)}
.footer-col h3{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--on-ink-label);text-transform:uppercase;margin-bottom:18px;font-weight:400}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-col a{font-size:15.5px;color:var(--on-ink-label);text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--ny)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding-top:var(--s5);flex-wrap:wrap}
.footer-bottom p,.footer-bottom a{font-size:14px;color:var(--on-ink-label);margin:0;text-decoration:none}
.footer-bottom a:hover{color:var(--on-ink-label)}

/* ============================================================ 16. REVIEW HUB */

.hub{background:var(--ink-deep);color:var(--on-ink);min-height:100vh}
.hub .h1,.hub .h2{color:var(--wh)}
.hub .kicker{color:var(--on-ink-label)}
.hub .lead{color:var(--on-ink-lead)}
.hub .caption,.hub .small{color:var(--on-ink-label)}
.hub .accent-bar{margin-top:var(--s5)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.hub-card{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(243,240,230,.04);text-decoration:none;color:var(--on-ink);transition:transform .3s,background .3s,border-color .3s}
.hub-card:hover{transform:translateY(-4px);background:rgba(243,240,230,.08);border-color:rgba(225,255,1,.5)}
.hub-card .t{font-family:var(--serif);font-size:20px;line-height:1.25;letter-spacing:-.015em}
.hub-card .u{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--on-ink-label);word-break:break-all}
.hub-card[aria-disabled="true"]{opacity:.62;pointer-events:none}
.status{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);align-self:flex-start;font-weight:600}
.status--ready{background:var(--ny);color:var(--ink)}
.status--progress{background:var(--bl);color:var(--ink)}
.status--planned{background:transparent;color:var(--on-ink-label);border:1px solid var(--hair-strong);font-weight:400}
.hub-note{border-left:4px solid var(--ny);padding:16px 0 16px 20px;max-width:78ch}
.hub-note p{color:var(--on-ink-lead);font-size:16.5px;line-height:1.7}

/* ============================================================ 17. ISLANDS */

/* --- island: kv-cache (hero memory visual) --- */
[data-island="kv-cache"]{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-lift)}
[data-island="kv-cache"] .kv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
[data-island="kv-cache"] .kv-top .r{letter-spacing:.06em;color:var(--accent-dark);text-transform:none}
[data-island="kv-cache"] .kv-body{padding:26px 24px 24px}
[data-island="kv-cache"] .kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
[data-island="kv-cache"] .kv-row .l{font-size:14px}
[data-island="kv-cache"] .kv-row .n{font-family:var(--data);font-size:13px;color:var(--muted)}
[data-island="kv-cache"] .kv-grid{position:relative;display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:10px;border-radius:var(--r-sm);background:rgba(42,43,41,.05);overflow:hidden}
[data-island="kv-cache"] .kv-grid i{height:15px;border-radius:var(--r-cell);display:block}
[data-island="kv-cache"] .kv-scan{position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(90deg,transparent,rgba(225,255,1,.6),transparent);animation:wl-scan 3.6s ease-in-out infinite;pointer-events:none}
[data-island="kv-cache"] .kv-mid{display:flex;align-items:center;gap:14px;margin:18px 0}
[data-island="kv-cache"] .kv-mid .chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--ny);padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap}
[data-island="kv-cache"] .kv-mid .rule{flex:1;height:1px;background:var(--line)}
[data-island="kv-cache"] .kv-mid .out{font-family:var(--mono);font-size:12.5px;color:var(--accent-dark);white-space:nowrap}
[data-island="kv-cache"] .kv-metrics{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
[data-island="kv-cache"] .kv-metrics .v{font-family:var(--head);font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
[data-island="kv-cache"] .kv-metrics .l{margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--muted)}
[data-island="kv-cache"] .kv-foot{margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* --- island: source-pool (5 to 20 candidates) --- */
[data-island="source-pool"] .sp-slots{display:flex;gap:8px;flex-wrap:wrap}
[data-island="source-pool"] .sp-slots i{flex:1;min-width:34px;height:52px;border-radius:var(--r-xs);border:1px solid var(--line);display:block;transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
[data-island="source-pool"] .sp-slots i.pre{background:var(--ink)}
[data-island="source-pool"] .sp-slots i.new{background:var(--ny)}
[data-island="source-pool"][data-armed="true"] .sp-slots i.new{transform:scaleY(.12);opacity:.35}
[data-island="source-pool"][data-armed="done"] .sp-slots i.new{transform:none;opacity:1}

/* --- island: prose-vs-entities --- */
[data-island="prose-vs-entities"]{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center}
[data-island="prose-vs-entities"] .pv-vs{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--accent-dark)}
[data-island="prose-vs-entities"] .pv-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);padding:clamp(24px,2.6vw,32px)}
[data-island="prose-vs-entities"] .pv-card.is-dark{border-color:var(--hair-strong);background:var(--ink)}
[data-island="prose-vs-entities"] .pv-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
[data-island="prose-vs-entities"] .is-dark .pv-label{color:var(--ny)}
[data-island="prose-vs-entities"] .pv-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
[data-island="prose-vs-entities"] .pv-lines i{height:7px;border-radius:var(--r-pill);background:rgba(42,43,41,.16);display:block}
[data-island="prose-vs-entities"] .pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
[data-island="prose-vs-entities"] .pv-chips i{width:22px;height:22px;border-radius:var(--r-xs);background:rgba(225,255,1,.85);display:block}
[data-island="prose-vs-entities"] .pv-big{font-family:var(--head);font-size:22px;letter-spacing:-.01em}
[data-island="prose-vs-entities"] .is-dark .pv-big{color:var(--on-ink)}
[data-island="prose-vs-entities"] .pv-sub{margin-top:6px;font-size:15px;color:var(--muted)}
[data-island="prose-vs-entities"] .is-dark .pv-sub{color:var(--on-ink-label)}

/* --- island: coverage-grid --- */
[data-island="coverage-grid"] .cg-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:6px}
[data-island="coverage-grid"] .cg-grid i{padding-top:100%;border-radius:var(--r-cell);display:block}
[data-island="coverage-grid"] .cg-grid i.on{background:var(--ink)}
[data-island="coverage-grid"] .cg-grid i.part{background:rgba(42,43,41,.18)}
[data-island="coverage-grid"] .cg-grid i.off{background:rgba(42,43,41,.07)}
[data-island="coverage-grid"] .cg-axis{margin-top:18px;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* --- island: adoption-timeline --- */
[data-island="adoption-timeline"] .at-track{position:relative;height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-bottom:16px}
[data-island="adoption-timeline"] .at-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent-light),var(--bl));border-radius:var(--r-pill);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
[data-island="adoption-timeline"] .at-marks{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
[data-island="adoption-timeline"] .at-marks .now{color:var(--accent-dark)}

/* ============================================================ 18. MOTION */

@keyframes wl-scan{0%{transform:translateX(-40%)}50%{transform:translateX(300%)}100%{transform:translateX(-40%)}}
@keyframes wl-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* elements are visible by default; JS only arms them when it can also release them */
.reveal{opacity:1;transform:none}
html.js .reveal[data-armed="true"]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal[data-armed="shown"]{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* ============================================================ 17b. ICONS

   One set: Lucide line icons (ISC), vendored in redesign-src/icons/ and folded
   into assets/icons.svg at build. Markup:
     <span class="ico-tile"><svg class="ico" aria-hidden="true"><use href="/redesign/assets/icons.svg#i-network"></use></svg></span>
   On a light ground the tile is Primary Blue with an ink icon (9.6:1); on ink it
   is a blue hairline tile with a blue icon (10.9:1). Decorative: aria-hidden. */
.ico{width:24px;height:24px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-tile{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-sm);background:var(--bl);color:var(--ink);flex:none}
.ico-tile--sm{width:40px;height:40px;border-radius:var(--r-xs)}
.ico-tile--sm .ico{width:20px;height:20px}
.ico-tile--lg{width:64px;height:64px;border-radius:var(--r-md)}
.ico-tile--lg .ico{width:30px;height:30px}
:is(.brx-section--ink,.ink-ground) .ico-tile{background:rgba(184,211,216,.12);color:var(--bl);box-shadow:inset 0 0 0 1px rgba(184,211,216,.38)}
.skyband .ico-tile,:is(.brx-section--ink,.ink-ground) .skyband .ico-tile{background:var(--wh);color:var(--ink);box-shadow:none}
/* a card that opens on an icon: tile, then title, then copy */
.has-ico>.ico-tile{margin-bottom:var(--s4)}

/* ============================================================ 17c. REVIEWS

   One client-review card for every page (home is the reference; careers,
   speaker and backlinks reuse it). Copy is Roboto body, not TT Lakes:
   a review is something a person said, not a pull-out.
     <div class="reviews">
       <figure class="review">
         <span class="classchip">result</span>
         <blockquote>&ldquo;...&rdquo;</blockquote>
         <figcaption><img ...><span class="who">Name<span class="role">Role</span></span></figcaption>
       </figure>
     </div> */
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.reviews--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.review{margin:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--bl);border-radius:var(--r-md);padding:clamp(24px,2.6vw,32px);transition:transform .35s ease,box-shadow .35s ease}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.review>.classchip{align-self:flex-start;margin-bottom:var(--s3)}
.review blockquote{margin:0;font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--ink);flex:1}
.review figcaption{display:flex;align-items:center;gap:14px;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.review figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--bl);background:var(--bg)}
.review .who{font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
.review .role{display:block;font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:400}
:is(.brx-section--ink,.ink-ground) .review{background:rgba(243,240,230,.05);border-color:var(--line);border-top-color:var(--bl)}
:is(.brx-section--ink,.ink-ground) .review blockquote,:is(.brx-section--ink,.ink-ground) .review .who{color:var(--on-ink)}

/* ============================================================ 17d. FEATURE LIST

   Bullet points that need to stand out (Sophie: backlinks evidence, speaker
   talk). Each item is a row with a blue tick tile, set in body size. */
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.feature-list li{display:flex;gap:16px;align-items:flex-start;font-size:var(--fs-body);line-height:1.5;color:var(--ink);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.feature-list li:last-child{border-bottom:none}
.feature-list li>.ico-tile{margin-top:-4px}
:is(.brx-section--ink,.ink-ground) .feature-list li{color:var(--on-ink)}

/* ============================================================ 18b. SPACING UTILITIES
   Declared last so they win over component rules that reset margins. */

.stack>*+*{margin-top:var(--s4)}
.stack-sm>*+*{margin-top:var(--s3)}
.stack-lg>*+*{margin-top:var(--s6)}
.block{margin-top:var(--s5)}
.block-lg{margin-top:var(--s6)}

/* ============================================================ 19. RESPONSIVE */

@media (max-width:1080px){
  .grid--4,.reviews--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links a{padding:9px 9px;font-size:14.5px}
}
@media (max-width:960px){
  :root{--gutter:24px}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .grid--hero{grid-template-columns:minmax(0,1fr)}
  .tabpanel{grid-template-columns:minmax(0,1fr)}
  .tabpanel-l{border-right:none;border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  [data-island="prose-vs-entities"]{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  [data-island="prose-vs-entities"] .pv-vs{padding:6px 0}
  [data-island="coverage-grid"] .cg-grid{grid-template-columns:repeat(12,1fr)}
}
@media (max-width:820px){
  :root{--gutter:18px}
  .grid--2,.grid--3,.grid--4,.reviews,.reviews--3{grid-template-columns:minmax(0,1fr)}
  .statstrip,.statstrip--4{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .tabs-list{grid-template-columns:minmax(0,1fr)}
  .tab{border-right:none;border-bottom:1px solid var(--line)}
  .acc-head{flex-wrap:wrap;gap:10px;padding:18px 20px}
  .acc-head .acc-title{flex-basis:100%;order:3}
  .acc-head .acc-chev{margin-left:auto}
  .acc-body{padding:6px 20px 26px}
  [data-island="kv-cache"] .kv-metrics{grid-template-columns:minmax(0,1fr);gap:12px}
  [data-island="source-pool"] .sp-slots i{min-width:24px;height:42px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .nav-panel-links a{font-size:26px}
}
@media (max-width:480px){
  .h1{font-size:clamp(31px,8.4vw,40px)}
  [data-island="coverage-grid"] .cg-grid{grid-template-columns:repeat(10,1fr);gap:4px}
  [data-island="source-pool"] .sp-slots{gap:5px}
  [data-island="source-pool"] .sp-slots i{min-width:0;flex:1 1 14%;height:34px}
  .btn{width:100%;justify-content:center}
  .btn-row{gap:10px}
  .capture .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .reveal[data-armed="true"]{opacity:1;transform:none}
}

@media print{
  .nav,.nav-panel,.kv-scan{display:none!important}
  body{background:#EEEADE;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .brx-section,.card,.acc,.callout,.steps,.tabs{break-inside:avoid}
  .acc-body[hidden]{display:block!important}
  a{color:inherit;text-decoration:none}
  html.js .reveal[data-armed="true"]{opacity:1!important;transform:none!important}
}