/* ==== 00-tokens.css ==== */
/* ==========================================================================
   00-tokens.css — design tokens
   Visual system: Panel C "Paper, Forest, Ember" (notes/PANEL-REVIEW-2026-10-04.md),
   applied by Polish-2 (polish-visual). Light is the default (:root). Dark is
   html[data-theme="dark"], set by the early head script / MG.theme.

   Semantic map (old name -> new role)
     --bg / --bg-2 / --surface*  warm paper steps
     --sage                      brand forest (hero, menu panel, chat head)
     --sage-ink                  brand ink (paper) on forest
     --sage-tint / --sage-pale   warm paper tints (card hover, plates, chips)
     --panel*                    the dark "app" panel (AI Build) = forest
     --accent                    ember: section labels, small emphasis
     --accent-on-brand           ember for text on forest
     --accent-on-dark            ember for text on the always-dark games band
     --brand-fg                  forest used as text/icon colour on paper
                                 (pale forest in dark, where forest would fail)
     --line-ui                   3:1 boundary for controls (the others are hairlines)

   CONTRAST AUDIT (WCAG 2.x relative luminance; foreground : background).
   Designer review 2026-10-22 (notes/DESIGNER-REVIEW-2026-10-22.md, C01): one cleaner
   paper (no alternating tints), ember for the before -> after signal only, forest-black dark.
   --------------------------------------------------------------------------
   LIGHT
     ink        #141513 on bg #F4F3EF 16.5
     ink-2      #3A3A36 on bg 10.29
     muted      #57564F on bg 6.64 · surface-2 5.96
     accent     #A4461F on bg 5.44 · surface-2 4.89
     brand-fg   #1F3A32 on bg 11.06
     line-ui    #827F77 on bg 3.60 · surface 3.32 · surface-2 3.23 (UI boundary >= 3)
     --line / --line-strong are decorative hairlines only.
   BRAND (identical in both themes)
     brand-ink  #F4F3EF on forest #1F3A32 11.06
     brand-muted #C9D3CB on forest 7.99
     accent-on-brand #EFB491 on forest 6.79
   DARK (forest-black)
     ink        #ECEAE3 on bg #0E1916 14.92 · surface #152320 13.49
     ink-2      #D2D6D1 on bg 12.21
     muted      #A9B5AF on bg 8.48 · surface-2 6.98
     muted-2    #B3BEB8 on bg 9.39
     accent     #E8A37C on bg 8.52 · surface-2 7.01
     line-ui    #6F7C76 on bg 4.12 · surface 3.73
     brand-fg   #A9C7B8 (btn--primary) with bg text 9.88
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* surfaces: one cleaner paper (bg-2 = bg: the alternating tint is retired) */
  --bg: #F4F3EF;
  --bg-2: #F4F3EF;
  --surface: #ECEAE3;
  --surface-2: #E9E7E1;

  /* text */
  --ink: #141513;
  --ink-2: #3A3A36;
  --muted: #57564F;
  --muted-2: #57564F;
  --ink-inverse: #F4F3EF;

  /* lines */
  --line: #DCDAD3;
  --line-strong: #C6C3BA;
  --line-ui: #827F77;

  /* accent (ember) */
  --accent: #A4461F;

  /* forest used as a text / icon colour on paper */
  --brand-fg: #1F3A32;

  /* legacy "sage" names, re-pointed at the new palette */
  --sage: var(--brand);
  --sage-ink: var(--brand-ink);
  --sage-tint: #E9E7E1;
  --sage-pale: #ECEAE3;

  /* inset "app" panel (AI Build) = forest */
  --panel: var(--brand);
  --panel-ink: var(--brand-ink);
  --panel-muted: var(--brand-muted);

  /* games band: identical in both themes */
  --games-bg: #121413;
  --games-ink: #F7F4EE;
  --games-muted: #C9C2B6;

  /* focus */
  --focus: #141513;
  --focus-on-dark: #F4F3EF;
  --ring: var(--focus);

  /* glass / frost / veils. Smoked glass on forest (paper text 12.94:1);
     the edge ring is a decorative highlight. */
  --glass-bg: rgba(10, 20, 16, .30);
  --glass-bg-hover: rgba(10, 20, 16, .42);
  --glass-edge: rgba(247, 244, 238, .30);
  --frost: color-mix(in srgb, var(--bg) 80%, transparent);
  --backdrop: rgba(18, 20, 19, .55);
  --veil: color-mix(in srgb, var(--bg) 82%, transparent);

  /* shadows: content is flat (a 1px hairline); soft/lift are for floating UI only */
  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-soft: 0 1px 2px rgba(28,27,25,.06), 0 10px 30px -8px rgba(28,27,25,.16);
  --shadow-lift: 0 2px 6px rgba(28,27,25,.08), 0 30px 70px -16px rgba(28,27,25,.30);

  /* legacy category accents (search palette chips, data.color fallbacks).
     Each passes 4.5:1 as text on --bg (lowest: c-gold 5.49; on surface 5.03). */
  --c-blue: #3E5C76;
  --c-teal: #2F6B66;
  --c-green: #3F6B48;
  --c-gold: #7A5F1E;
  --c-orange: #8A4B22;
  --c-red: #8E3B37;
  --c-purple: #5E4B7A;
  --c-pink: #83405F;

  /* theme-color meta value */
  --theme-color: #F4F3EF;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* forest-black: the brand survives in dark instead of a neutral inversion */
  --bg: #0E1916;
  --bg-2: #0E1916;
  --surface: #152320;
  --surface-2: #1B2B27;

  --ink: #ECEAE3;
  --ink-2: #D2D6D1;
  --muted: #A9B5AF;
  --muted-2: #B3BEB8;
  --ink-inverse: #0E1916;

  --line: #22322D;
  --line-strong: #2E413B;
  --line-ui: #6F7C76;

  --accent: #E8A37C;
  --brand-fg: #A9C7B8;

  --sage-tint: #1B2B27;
  --sage-pale: #152320;

  --focus: #ECEAE3;
  --focus-on-dark: #F4F3EF;

  --backdrop: rgba(0, 0, 0, .62);

  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -8px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 30px 70px -16px rgba(0,0,0,.8);

  --c-blue: #9DB6CC;
  --c-teal: #8CC5BE;
  --c-green: #9CC5A2;
  --c-gold: #D6BC7E;
  --c-orange: #E0A57F;
  --c-red: #E39A94;
  --c-purple: #BBA8DA;
  --c-pink: #DDA0BD;

  --theme-color: #0E1916;
}

/* Theme-independent tokens */
:root {
  /* brand (forest): the hero, menu panel and AI panel look the same in both themes */
  --brand: #1F3A32;
  --brand-ink: #F4F3EF;
  --brand-muted: #C9D3CB;
  --accent-on-brand: #EFB491;
  --accent-on-dark: #E8A37C;

  /* type families (Google Fonts: Newsreader 400-600 + italic 400, Inter 400/500/600).
     Mono is retired as a visible style: the token stays so nothing breaks,
     but it now resolves to the UI sans. */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: var(--font-sans);

  /* type scale (Panel C six steps; 14px floor)
       display  hero statement only
       h1       section headings (.t-h1): the panel's h2 step
       h2       sub-heads, card titles, repeated items
       h3       Inter 600 headings
       lead · body · small · micro (labels, 14px minimum) */
  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);      /* 44 -> 96 */
  --t-figure: clamp(3rem, 1.2rem + 5vw, 6rem);            /* the Shift figures, ~91px at 1440 */
  --t-mega: clamp(3.5rem, 1.8rem + 7vw, 9rem);            /* reserved: a lead figure (owner to confirm) */
  --t-wordmark: clamp(4rem, 18vw, 17.5rem);
  --t-h1: clamp(2rem, 1.4rem + 1.6vw, 3rem);              /* 32 -> 48: section heads */
  /* three heading scales by section role (art-director re-score): one huge type moment per
     chapter, then calm text. xl: Results; l: the Journey line; s: Experience (Inter 600) */
  --h2-xl: clamp(3.5rem, 8.4vw, 8.5rem);
  --h2-l: clamp(2.75rem, 5.6vw, 5.5rem);
  --h2-s: clamp(1.5rem, 1.9vw, 1.75rem);
  --t-h2: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);        /* 22 -> 28 */
  --t-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);     /* 19 -> 22: Inter 600 titles */
  --t-lead: clamp(1.1875rem, 1.06rem + .45vw, 1.4375rem); /* 19 -> 23 */
  --t-body: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem);  /* 17 -> 18 */
  --t-text: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem);  /* short blocks = body */
  --t-ui: 1.0625rem;                                      /* buttons, arrow links */
  --t-small: 1rem;                                        /* 16: the reading floor */
  --t-micro: .875rem;                                     /* 14: labels, badges, eyebrows */

  --lh-display: 1.02;
  --lh-wordmark: .82;
  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-lead: 1.4;
  --lh-body: 1.6;
  --lh-text: 1.55;

  --ls-display: -.015em;
  --ls-wordmark: -.03em;
  --ls-h1: -.01em;
  --ls-h2: -.01em;
  --ls-micro: .08em;

  /* shape */
  --r-sm: 3px;
  --r: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.77, 0, .175, 1);      /* custo "IO" easeInOutQuart: panels, menu, sticky steps */
  --ease-out: cubic-bezier(.165, .84, .44, 1); /* custo "EO" easeOutQuart: hovers, reveals, clip-paths, image scale */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .25s;
  --dur-2: .6s;
  --dur-3: 1.2s;

  /* layout */
  --gutter: clamp(20px, 5.28vw, 76px);
  --gap: clamp(12px, 1.25vw, 18px);
  --section-y: clamp(96px, 11vw, 182px);
  --header-h: clamp(72px, 7vw, 104px);
  --container-max: 1920px;
  --tap: 44px;

  /* z-index map (DESIGN-SPEC §6) */
  --z-base: 1;
  --z-rail: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-inspector: 70;
  --z-overlay: 80;
  --z-chat: 90;
  --z-fab: 91;
  --z-toast: 95;
  --z-skip: 100;
}

/* Reduced transparency: frosted / glass surfaces become solid
   (solid glass = the .30 / .42 blends over forest). */
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="light"] {
    --frost: #F4F3EF;
    --glass-bg: #192F28;
    --glass-bg-hover: #162A24;
    --backdrop: rgba(18, 20, 19, .86);
    --veil: #F4F3EF;
  }
  :root[data-theme="dark"] {
    --frost: #0E1916;
    --backdrop: rgba(0, 0, 0, .88);
    --veil: #0E1916;
  }
}

/* --------------------------------------------------------------------------
   Theme-constant "on image" pair for small labels that sit on
   screenshots/photos (.badge--on-image).
   #1C1B19 on the 92% paper blend: 13.07:1 even over a pure-black pixel.
   -------------------------------------------------------------------------- */
:root {
  --on-image-bg: rgba(244, 243, 239, .92);
  --on-image-ink: #141513;
}

/* ==== 01-base.css ==== */
/* ==========================================================================
   01-base.css  (F1 CSS system)
   Reset, document, surfaces, typography, layout primitives, utilities,
   reduced-motion / reduced-transparency / contrast / print safety nets.
   Depends on 00-tokens.css. Colors come from tokens only (print excepted).

   Breakpoints (literal px, mobile-first):
     sm  < 768     6-column grid, stacked layouts
     md  768-1023  12-column grid, helpers .col-md-*
     lg  >= 1024   12-column grid, helpers .col-span-* / .col-start-*
     xl  >= 1180   section rail + full header nav (F2)
   API notes: notes/api/css.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page token snapshot + icon masks
   The --page-* values are resolved on :root (current theme) and inherited,
   so [data-surface="page"] can restore them inside a dark/sage surface.
   -------------------------------------------------------------------------- */
:root {
  --page-bg: var(--bg);
  --page-bg-2: var(--bg-2);
  --page-surface: var(--surface);
  --page-surface-2: var(--surface-2);
  --page-ink: var(--ink);
  --page-ink-2: var(--ink-2);
  --page-muted: var(--muted);
  --page-muted-2: var(--muted-2);
  --page-ink-inverse: var(--ink-inverse);
  --page-line: var(--line);
  --page-line-strong: var(--line-strong);
  --page-sage-tint: var(--sage-tint);
  --page-sage-pale: var(--sage-pale);
  --page-shadow-hairline: var(--shadow-hairline);
  --page-ring: var(--focus);
  --page-accent: var(--accent);
  --page-line-ui: var(--line-ui);
  --page-brand-fg: var(--brand-fg);

  /* Decorative glyphs as masks (painted with currentColor). The arrow glyphs
     are drawn as SVG (not font glyphs) for a consistent stroke in any
     family. The stroke color is mask alpha only. */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h16.5M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
  --icon-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5 17.5 6.5M8.5 6.5h9v9'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V20M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.2v15.6L20 12z' fill='black'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  /* One offset for every in-page jump (anchors, scrollIntoView, focus):
     keeps targets and keyboard focus out from under the fixed header
     (WCAG 2.4.11). See notes/api/css.md "Scroll offset". */
  scroll-padding-top: var(--header-h);
  /* SPEC-ADDENDUM C7: focused/scrolled-to targets also clear the chat FAB
     (56px circle / pill, bottom-right) and the toast. */
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  font-kerning: normal;
  /* No faux bold; faux italic stays allowed for <em> in Inter (only
     Newsreader ships a real italic). */
  font-synthesis: style;
  /* clip (not hidden): stops horizontal page scroll without creating a
     scroll container, so position: sticky keeps working. */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  /* html keeps overflow: visible, so this propagates to the viewport and
     body never becomes a scroll container (sticky still works). */
  body {
    overflow-x: hidden;
  }
}

img,
picture,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

img {
  font-style: italic; /* styles alt text if an image fails */
}

iframe {
  border: 0;
}

svg {
  flex-shrink: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a,
button,
summary,
[role="button"],
[role="tab"] {
  -webkit-tap-highlight-color: transparent;
}

summary {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  padding-left: 1.25em;
}

/* Lists that carry a class are layout lists: no markers, no indent.
   (Add role="list" if Safari/VoiceOver must still announce it as a list.) */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

dd {
  margin: 0;
}

hr,
.hairline {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--line);
}

[hidden] {
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. Surfaces
   Put data-surface on any block that changes the background. It paints
   itself (background + text) and re-maps the tokens, so every component
   inside adapts (buttons, chips, link arrows, lists, focus rings).
     dark   = inset "app" panel (--panel = forest)  e.g. AI Build panel
     sage   = hero / menu panel (--sage = forest); paper text 11.19:1,
              brand-muted 7.99:1, ember labels use --accent-on-brand
     games  = the always-dark games band (#121413)
     page   = restore the theme's page tokens inside one of the above
   .on-dark only swaps the focus ring (for dark images / glass contexts).
   Contrast inside dark: every text token passes on --bg, --bg-2, --surface
   and --surface-2 (lowest: accent-on-brand on surface-2, 4.66:1).
   -------------------------------------------------------------------------- */
[data-surface] {
  background-color: var(--bg);
  color: var(--ink);
}

[data-surface="dark"],
.panel-inset {
  --bg: var(--panel);
  --bg-2: color-mix(in srgb, var(--panel-ink) 5%, var(--panel));
  --surface: color-mix(in srgb, var(--panel-ink) 8%, var(--panel));
  --surface-2: color-mix(in srgb, var(--panel-ink) 13%, var(--panel));
  --sage-tint: color-mix(in srgb, var(--panel-ink) 10%, var(--panel));
  --sage-pale: color-mix(in srgb, var(--panel-ink) 6%, var(--panel));
  --ink: var(--panel-ink);
  --ink-2: var(--panel-ink);
  --muted: var(--panel-muted);
  --muted-2: var(--panel-muted);
  --ink-inverse: var(--panel);
  --line: color-mix(in srgb, var(--panel-ink) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--panel-ink) 34%, transparent);
  --line-ui: color-mix(in srgb, var(--panel-ink) 55%, var(--panel));
  --accent: var(--accent-on-brand);
  --brand-fg: var(--panel-ink);
  --shadow-hairline: 0 0 0 1px color-mix(in srgb, var(--panel-ink) 22%, transparent);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="sage"] {
  --bg: var(--sage);
  --bg-2: var(--glass-bg);
  --surface: var(--glass-bg);
  --surface-2: var(--glass-bg-hover);
  --sage-tint: var(--glass-bg);
  --sage-pale: var(--glass-bg);
  --ink: var(--sage-ink);
  --ink-2: var(--sage-ink);
  --muted: var(--brand-muted);
  --muted-2: var(--brand-muted);
  --ink-inverse: var(--panel);
  --line: color-mix(in srgb, var(--sage-ink) 40%, transparent);
  --line-strong: color-mix(in srgb, var(--sage-ink) 60%, transparent);
  --line-ui: color-mix(in srgb, var(--sage-ink) 55%, var(--sage));
  --accent: var(--accent-on-brand);
  --brand-fg: var(--sage-ink);
  --shadow-hairline: inset 0 0 0 1px var(--glass-edge);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="games"] {
  --bg: var(--games-bg);
  --bg-2: color-mix(in srgb, var(--games-ink) 4%, var(--games-bg));
  --surface: color-mix(in srgb, var(--games-ink) 7%, var(--games-bg));
  --surface-2: color-mix(in srgb, var(--games-ink) 12%, var(--games-bg));
  --sage-tint: color-mix(in srgb, var(--games-ink) 8%, var(--games-bg));
  --sage-pale: color-mix(in srgb, var(--games-ink) 5%, var(--games-bg));
  --ink: var(--games-ink);
  --ink-2: var(--games-ink);
  --muted: var(--games-muted);
  --muted-2: var(--games-muted);
  --ink-inverse: var(--games-bg);
  --line: color-mix(in srgb, var(--games-ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--games-ink) 30%, transparent);
  --line-ui: color-mix(in srgb, var(--games-ink) 45%, var(--games-bg));
  --accent: var(--accent-on-dark);
  --brand-fg: var(--games-ink);
  --shadow-hairline: 0 0 0 1px color-mix(in srgb, var(--games-ink) 20%, transparent);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="page"] {
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-2);
  --surface: var(--page-surface);
  --surface-2: var(--page-surface-2);
  --sage-tint: var(--page-sage-tint);
  --sage-pale: var(--page-sage-pale);
  --ink: var(--page-ink);
  --ink-2: var(--page-ink-2);
  --muted: var(--page-muted);
  --muted-2: var(--page-muted-2);
  --ink-inverse: var(--page-ink-inverse);
  --line: var(--page-line);
  --line-strong: var(--page-line-strong);
  --line-ui: var(--page-line-ui);
  --accent: var(--page-accent);
  --brand-fg: var(--page-brand-fg);
  --shadow-hairline: var(--page-shadow-hairline);
  --ring: var(--page-ring);
  color-scheme: light;
}

:root[data-theme="dark"] [data-surface="page"] {
  color-scheme: dark;
}

.on-dark {
  --ring: var(--focus-on-dark);
}


/* --------------------------------------------------------------------------
   4. Selection + focus
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--sage);
  color: var(--sage-ink);
}

:is([data-surface="dark"], [data-surface="sage"], [data-surface="games"], .panel-inset) ::selection {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Programmatic focus targets (main, dialog shells, headings) need no ring. */
:is(main, section, article, h1, h2, h3, h4, [role="dialog"], [role="region"], [role="tabpanel"]:not([tabindex="0"]))[tabindex="-1"]:focus {
  outline: none;
}


/* --------------------------------------------------------------------------
   5. Typography (Panel C)
   Newsreader (--font-display) 400 for the hero statement, section headings
   (.t-h1), wordmarks, stat/metric numbers, praise quotes and journey country
   names. Inter (--font-sans) for UI and body: 400 body, 500 UI, 600 for h3
   and labels. Headings are ink; long copy is --muted inside .prose / .t-text.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: -.005em;
}

h4 {
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: 0;
}

h5,
h6 {
  font-size: var(--t-small);
  line-height: 1.4;
  letter-spacing: 0;
}

p,
li,
dd,
blockquote,
figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

b,
strong {
  font-weight: 600;
}

small {
  font-size: var(--t-small);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: .9em;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
}

sub,
sup {
  position: relative;
  font-size: 70%;
  line-height: 0;
  vertical-align: baseline;
}

sup { top: -.5em; }
sub { bottom: -.25em; }

/* Type classes (sizes only; color is inherited unless noted) */
.t-wordmark {
  font-family: var(--font-display);
  font-size: var(--t-wordmark);
  font-weight: 400;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--ls-wordmark);
  white-space: nowrap;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* Section headings (every section h2 carries .t-h1): Newsreader 400 at the
   panel's h2 step. */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}

.t-h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

.t-h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: -.005em;
}

.t-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: -.005em;
  text-wrap: pretty;
}

/* custo t-text: short blocks, 20px / 1.43, gray */
.t-text {
  font-size: var(--t-text);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--muted);
  text-wrap: pretty;
}

.t-body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.t-small {
  font-size: var(--t-small);
  line-height: 1.5;
}

/* Label style (replaces the retired mono look): Inter 600, uppercase,
   .08em tracking, 14px. Used by eyebrows, badges, kickers and index labels. */
.t-micro,
.t-label {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* Formerly the mono face; now tabular Inter so counters keep their width. */
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Tone utilities (see the contrast audit in 00-tokens.css) */
.tone-ink { color: var(--ink); }
.tone-ink-2 { color: var(--ink-2); }
.tone-muted { color: var(--muted); }
.tone-2 { color: var(--muted-2); }

/* Rich text */
.prose {
  color: var(--muted);
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose > :is(h2, h3, h4) {
  margin-top: 2em;
}

.prose > :is(h2, h3, h4) + * {
  margin-top: .6em;
}

.prose :is(h2, h3, h4, strong, b) {
  color: var(--ink);
}

.prose :is(ul, ol) {
  padding-left: 1.2em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: .5em;
}

.prose li::marker {
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   6. Links
   Component links (any class) style themselves. Unclassed links inside
   running text are underlined so they are not identified by color alone.
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(p, li, dd, td, figcaption, blockquote, .prose, .t-text, .t-body, .t-lead, .t-small) a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

:where(p, li, dd, td, figcaption, blockquote, .prose, .t-text, .t-body, .t-lead, .t-small) a:not([class]):hover {
  text-decoration-color: currentColor;
}

.prose a:not([class]) {
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   7. Accessibility helpers
   -------------------------------------------------------------------------- */
.sr-only,
.visually-hidden,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background-color: var(--page-ink);
  color: var(--page-ink-inverse);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none; /* the shadow shows only with the link (:focus rule below), not as a smudge */
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-1) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--page-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--page-bg), var(--shadow-lift);
}


/* --------------------------------------------------------------------------
   8. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 6 columns below 768, 12 from 768. Children span the full row unless a
   column helper says otherwise (lg: .col-span-N/.col-start-N;
   md: .col-md-N/.col-md-start-N; sm: .col-sm-N of 6). */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--grid-row-gap, clamp(28px, 4vw, 56px));
}

.grid-12 > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.grid-12--middle { align-items: center; }
.grid-12--bottom { align-items: end; }
.grid-12--top { align-items: start; }
.grid-12--flush { row-gap: 0; }

@media (min-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* sm helpers (of 6) */
@media (max-width: 767.98px) {
  .col-sm-1 { grid-column: auto / span 1; }
  .col-sm-2 { grid-column: auto / span 2; }
  .col-sm-3 { grid-column: auto / span 3; }
  .col-sm-4 { grid-column: auto / span 4; }
  .col-sm-5 { grid-column: auto / span 5; }
  .col-sm-6 { grid-column: auto / span 6; }
  .order-first-sm { order: -1; }
  .hide-sm { display: none !important; }
}

/* md helpers (of 12) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .col-md-1 { grid-column: auto / span 1; }
  .col-md-2 { grid-column: auto / span 2; }
  .col-md-3 { grid-column: auto / span 3; }
  .col-md-4 { grid-column: auto / span 4; }
  .col-md-5 { grid-column: auto / span 5; }
  .col-md-6 { grid-column: auto / span 6; }
  .col-md-7 { grid-column: auto / span 7; }
  .col-md-8 { grid-column: auto / span 8; }
  .col-md-9 { grid-column: auto / span 9; }
  .col-md-10 { grid-column: auto / span 10; }
  .col-md-11 { grid-column: auto / span 11; }
  .col-md-12 { grid-column: auto / span 12; }
  .col-md-start-1 { grid-column-start: 1; }
  .col-md-start-2 { grid-column-start: 2; }
  .col-md-start-3 { grid-column-start: 3; }
  .col-md-start-4 { grid-column-start: 4; }
  .col-md-start-5 { grid-column-start: 5; }
  .col-md-start-6 { grid-column-start: 6; }
  .col-md-start-7 { grid-column-start: 7; }
  .col-md-start-8 { grid-column-start: 8; }
  .col-md-start-9 { grid-column-start: 9; }
  .col-md-start-10 { grid-column-start: 10; }
  .col-md-start-11 { grid-column-start: 11; }
  .col-md-start-12 { grid-column-start: 12; }
}

/* lg helpers (of 12). Span uses the shorthand (start = auto), so a
   .col-start-N declared after it can set the start line. */
@media (min-width: 1024px) {
  .col-span-1 { grid-column: auto / span 1; }
  .col-span-2 { grid-column: auto / span 2; }
  .col-span-3 { grid-column: auto / span 3; }
  .col-span-4 { grid-column: auto / span 4; }
  .col-span-5 { grid-column: auto / span 5; }
  .col-span-6 { grid-column: auto / span 6; }
  .col-span-7 { grid-column: auto / span 7; }
  .col-span-8 { grid-column: auto / span 8; }
  .col-span-9 { grid-column: auto / span 9; }
  .col-span-10 { grid-column: auto / span 10; }
  .col-span-11 { grid-column: auto / span 11; }
  .col-span-12 { grid-column: auto / span 12; }
  .col-start-1 { grid-column-start: 1; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
  .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; }
  .col-start-6 { grid-column-start: 6; }
  .col-start-7 { grid-column-start: 7; }
  .col-start-8 { grid-column-start: 8; }
  .col-start-9 { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }
  .hide-lg { display: none !important; }

  /* Sticky column (Approach image, AI Build intro, Industries panel).
     Doubled class so the utility beats component position rules (.plate). */
  .sticky-lg.sticky-lg {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* --bg-2 equals --surface in light, so cards/chips inside a tinted section
   step up to the page color (light) or to --surface-2 (dark).
   Polish-2: 99-polish.css applies this same treatment to every even
   section (bg / bg-2 rhythm), so the class is no longer the only source. */
.section--tint {
  --muted: var(--muted-2); /* muted fails 4.5:1 on some tints; muted-2 passes */
  --surface: var(--page-bg);
  --surface-2: var(--page-surface-2);
  background-color: var(--bg-2);
}

:root[data-theme="dark"] .section--tint {
  --surface: var(--page-surface-2);
  --surface-2: color-mix(in srgb, var(--page-ink) 12%, var(--page-bg-2));
}

.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Stack rhythm: vertical spacing between direct children */
.stack > * + * {
  margin-top: var(--stack, 1em);
}

.measure {
  max-width: 34em;
}


/* --------------------------------------------------------------------------
   9. Small utilities
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.u-nowrap { white-space: nowrap; }
.u-balance { text-wrap: balance; }
.u-tabular { font-variant-numeric: tabular-nums; }

/* Apple-style frosted surface (header after the hero, sheets) */
.u-frost {
  background-color: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .u-frost {
    background-color: var(--bg);
  }
}


/* --------------------------------------------------------------------------
   10. Preference safety nets
   -------------------------------------------------------------------------- */

/* Reduced motion: every animation and transition becomes instant; interactive
   controls keep short color/focus transitions (color change is not motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  :is(a, button, input, select, textarea, summary, [role="button"], [role="tab"], .btn, .chip, .icon-btn, .link-arrow, .link-line) {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, box-shadow, opacity !important;
    transition-duration: var(--dur-1) !important;
    transition-timing-function: var(--ease-out) !important;
  }

  [data-parallax],
  [data-magnetic] {
    transform: none !important;
    translate: none !important;
  }
}

/* Reduced transparency: tokens already turn glass/frost solid; drop blur. */
@media (prefers-reduced-transparency: reduce) {
  .u-frost,
  .btn--glass,
  .icon-btn--glass,
  .badge--on-image {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* More contrast: gray copy becomes ink-2, hairlines get stronger. */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme] {
    --muted: var(--ink-2);
    --muted-2: var(--ink-2);
    --line: var(--line-strong);
  }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  .skip-link,
  [data-surface] {
    border: 1px solid CanvasText;
  }
}


/* --------------------------------------------------------------------------
   11. Print
   Paper is always light; hardcoded black/white here only.
   -------------------------------------------------------------------------- */
@media print {
  :root,
  :root[data-theme] {
    --bg: #fff;
    --bg-2: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #333;
    --muted-2: #333;
    --line: #bbb;
    --line-strong: #888;
    --sage-tint: #eee;
    color-scheme: light;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible;
  }

  [data-surface] {
    --bg: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #333;
    --muted-2: #333;
    background: #fff !important;
    color: #000 !important;
  }

  .skip-link,
  .site-header,
  .section-rail,
  .menu-panel,
  .overlay,
  .toast,
  .scroll-progress,
  .marquee__toggle,
  .marquee__track[aria-hidden="true"],
  #cwFab,
  #cwTeaser,
  #cwWidget,
  #inspector,
  video,
  iframe {
    display: none !important;
  }

  .section {
    padding-block: 24pt;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }

  .plate,
  .card-surface,
  .tile,
  .stat,
  .acc__item,
  .num-list__item,
  figure,
  img {
    break-inside: avoid;
  }

  .prose a[href^="http"]::after,
  p a[href^="http"]:not([class])::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    word-break: break-all;
  }
}

/* ==== 02-components.css ==== */
/* ==========================================================================
   02-components.css  (F1 CSS system)
   Shared components (DESIGN-SPEC section 5) + reveal/motion hooks
   (FOUNDATION-CONTRACT). Every color is a token, so everything works in
   both themes and inside [data-surface] blocks (see 01-base.css section 3).
   Motion: custo EO = --ease-out (hovers, reveals, clips, image scale),
           custo IO = --ease (panels, accordions, large state changes).
   Hover effects run only on hover-capable devices; keyboard focus gets the
   same treatment through :focus-visible.
   API notes + markup: notes/api/css.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Text roll (custo nav/button label roll)
   <span class="roll"><span class="roll__a">Label</span><span class="roll__b" aria-hidden="true">Label</span></span>
   Structural selectors, so the class names on the two spans are optional.
   Trigger: hover/focus-visible of the closest a / button / .roll-host, or a
   held active state (.is-active / aria-current) on a link.
   -------------------------------------------------------------------------- */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
}

.roll > :first-child,
.roll > :nth-child(2) {
  display: block;
  transition:
    transform .6s var(--ease-out),
    opacity .6s var(--ease-out);
}

.roll > :nth-child(2) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  user-select: none;
}

@media (hover: hover) {
  :is(a, button, label, .roll-host):hover .roll > :first-child {
    opacity: 0;
    transform: translateY(-100%);
  }

  :is(a, button, label, .roll-host):hover .roll > :nth-child(2) {
    opacity: 1;
    transform: none;
  }
}

:is(a, button, .roll-host):focus-visible .roll > :first-child,
a:is(.is-active, [aria-current="true"], [aria-current="page"]) .roll > :first-child {
  opacity: 0;
  transform: translateY(-100%);
}

:is(a, button, .roll-host):focus-visible .roll > :nth-child(2),
a:is(.is-active, [aria-current="true"], [aria-current="page"]) .roll > :nth-child(2) {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   2. Buttons
   .btn                 pill, >= 44px, --t-ui (17px), weight 500
   .btn--primary        ink fill, inverse text
   .btn--outline        1px currentColor ring, fills with ink on hover
   .btn--glass          smoked glass on the forest hero / panel
                        (--glass-bg tokens: paper text 12.94:1)
   .btn--sm             header size (44px tall, 15px)
   .btn--on-dark        re-maps ink/inverse for dark/image backgrounds
   .btn--block          full width
   .btn-pair            Apple CTA pair (wraps, 12px gap)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: 14px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  translate: var(--mag, none);
  transition:
    background-color .6s var(--ease-out),
    color .6s var(--ease-out),
    border-color .6s var(--ease-out),
    box-shadow .6s var(--ease-out),
    translate .6s var(--ease-out),
    scale .25s var(--ease-out);
}

@media (min-width: 1024px) {
  .btn {
    padding: 15px 32px 16px;
  }
}

.btn:active {
  scale: .98;
}

.btn > svg,
.btn__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.btn:is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  scale: none;
}

/* primary */
.btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inverse);
}

/* outline */
.btn--outline {
  --btn-fg: var(--ink);
  --btn-bd: currentColor;
}

/* glass */
.btn--glass {
  --btn-bg: var(--glass-bg);
  --btn-fg: var(--sage-ink);
  --ring: var(--focus-on-dark);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

@media (hover: hover) {
  .btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }

  .btn--outline:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: var(--ink);
    --btn-fg: var(--ink-inverse);
    --btn-bd: var(--ink);
  }

  .btn--glass:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: var(--glass-bg-hover);
  }
}

.btn--primary:focus-visible {
  --btn-bg: color-mix(in srgb, var(--ink) 82%, var(--bg));
}

.btn--outline:focus-visible {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inverse);
  --btn-bd: var(--ink);
}

.btn--glass:focus-visible {
  --btn-bg: var(--glass-bg-hover);
}

/* on-dark: local token re-map, composes with every variant */
.btn--on-dark {
  --ink: var(--panel-ink);
  --ink-inverse: var(--panel);
  --bg: var(--panel);
  --ring: var(--focus-on-dark);
}

/* small (header CTA) */
.btn--sm {
  min-height: var(--tap);
  padding: 0 20px;
  font-size: var(--t-small);
  line-height: 1.2;
}

.btn--block {
  width: 100%;
}

.btn-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn-pair--center {
  justify-content: center;
}

@media (max-width: 559.98px) {
  .btn-pair--fill-sm > .btn {
    flex: 1 1 auto;
  }
}


/* --------------------------------------------------------------------------
   3. Arrow link (custo secondary CTA) + underline link
   <a class="link-arrow" href="#…">Label</a>               → arrow
   <a class="link-arrow link-arrow--ext" …>Label <span class="sr-only">(opens in a new tab)</span></a>
   Glyph is a CSS mask (decorative, never announced). 1px line at 25% that
   fills left→right on hover and leaves toward the right on mouse-out.
   -------------------------------------------------------------------------- */
.link-arrow {
  --la-icon: var(--icon-arrow-right);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: var(--tap);
  padding-block: 6px 15px;
  color: inherit;
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 25%, transparent), color-mix(in srgb, currentColor 25%, transparent));
  background-repeat: no-repeat;
  background-position: 100% 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size .6s var(--ease-out), color var(--dur-1) var(--ease-out);
}

.link-arrow::after {
  content: "";
  flex: none;
  width: .85em;
  height: .85em;
  background-color: currentColor;
  -webkit-mask: var(--la-icon) center / contain no-repeat;
  mask: var(--la-icon) center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}

.link-arrow--ext { --la-icon: var(--icon-arrow-ne); }
.link-arrow--down { --la-icon: var(--icon-arrow-down); }
.link-arrow--play { --la-icon: var(--icon-play); }
.link-arrow--play::after { width: .7em; height: .7em; }

/* play glyph sits before the label ("▶ Watch my journey") */
.link-arrow--play-start::after {
  order: -1;
}

@media (hover: hover) {
  .link-arrow:hover {
    background-position: 0 100%, 0 100%;
    background-size: 100% 1px, 100% 1px;
  }

  .link-arrow:hover::after { transform: translateX(4px); }
  .link-arrow--ext:hover::after { transform: translate(3px, -3px); }
  .link-arrow--down:hover::after { transform: translateY(3px); }
  .link-arrow--play:hover::after { transform: scale(1.12); }
}

.link-arrow:focus-visible {
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
}

.link-arrow--sm {
  padding-block: 10px 8px;
  font-size: var(--t-small);
  line-height: 1.35;
}

.link-arrow--block {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* custo min-width version: label left, arrow pushed right */
.link-arrow--wide {
  justify-content: space-between;
  min-width: min(100%, 19rem);
}

.link-arrow--on-dark {
  --ring: var(--focus-on-dark);
  color: var(--panel-ink);
}

/* Footer / list link: underline grows from the left, leaves to the right */
.link-line {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size .6s var(--ease-out), color var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .link-line:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

.link-line:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}


/* --------------------------------------------------------------------------
   4. Icon button (44px raised circle)
   <button class="icon-btn" type="button" aria-label="…"><svg …/></button>
   -------------------------------------------------------------------------- */
.icon-btn {
  --size: var(--tap);
  --icon: 20px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-hairline);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  translate: var(--mag, none);
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    scale .6s var(--ease-out),
    translate .6s var(--ease-out);
}

.icon-btn > svg,
.icon-btn__icon {
  width: var(--icon);
  height: var(--icon);
}

@media (hover: hover) {
  .icon-btn:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--surface);
    scale: 1.08;
  }
}

/* double ring: bg-colored halo + ring, readable over screenshots */
.icon-btn:focus-visible {
  box-shadow: var(--shadow-hairline), 0 0 0 5px var(--bg);
}

/* opt-in pressed look (not applied to the theme toggle, which also uses aria-pressed) */
.icon-btn--toggle[aria-pressed="true"] {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  .icon-btn--toggle[aria-pressed="true"]:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }
}

.icon-btn:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
}

.icon-btn:is(:disabled, [aria-disabled="true"]) > * {
  opacity: .3;
}

.icon-btn--glass {
  --ring: var(--focus-on-dark);
  background-color: var(--glass-bg);
  color: var(--sage-ink);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

@media (hover: hover) {
  .icon-btn--glass:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--glass-bg-hover);
  }
}

.icon-btn--glass:focus-visible {
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.icon-btn--on-dark {
  --ring: var(--focus-on-dark);
  background-color: color-mix(in srgb, var(--panel-ink) 12%, transparent);
  color: var(--panel-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-ink) 28%, transparent);
}

@media (hover: hover) {
  .icon-btn--on-dark:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--panel-ink) 22%, transparent);
  }
}

.icon-btn--on-dark:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-ink) 28%, transparent);
}

.icon-btn--solid {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  .icon-btn--solid:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }
}

.icon-btn--lg {
  --size: 56px;
  --icon: 24px;
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .icon-btn--lg {
    --size: 72px;
    --icon: 28px;
    font-size: 1.875rem;
  }
}

/* Mask glyphs for icon buttons: <span class="icon-btn__glyph icon-btn__glyph--next" aria-hidden="true"></span> */
.icon-btn__glyph {
  width: var(--icon);
  height: var(--icon);
  background-color: currentColor;
  -webkit-mask: var(--glyph, var(--icon-arrow-right)) center / contain no-repeat;
  mask: var(--glyph, var(--icon-arrow-right)) center / contain no-repeat;
}

.icon-btn__glyph--next { --glyph: var(--icon-arrow-right); }
.icon-btn__glyph--prev { --glyph: var(--icon-arrow-left); }
.icon-btn__glyph--ext { --glyph: var(--icon-arrow-ne); }
.icon-btn__glyph--play { --glyph: var(--icon-play); }
.icon-btn__glyph--plus { --glyph: var(--icon-plus); }


/* --------------------------------------------------------------------------
   5. Chips + chip row  (also used by .tabs__tab)
   36px visual, 44px hit area. Inactive: --surface + --ink-2 (12.7:1).
   Active: aria-pressed / aria-selected / aria-current / .is-active.
   -------------------------------------------------------------------------- */
.chip,
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

/* 44px tall hit area */
.chip::before,
.tabs__tab::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

@media (hover: hover) {
  .chip:hover,
  .tabs__tab:hover {
    background-color: var(--surface-2);
    color: var(--ink);
  }
}

.chip:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"], .is-active),
.tabs__tab[aria-selected="true"] {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

/* Count beside a chip label: 14px floor, full colour (the old .72 opacity
   sat at the 4.5:1 edge on tinted sections). */
.chip__count {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chip-row,
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 4px;
}

/* Mobile: one scrolling line with fade edges. Assumes the row sits in a
   .container; set --chip-row-bleed: 0px when it does not. */
@media (max-width: 767.98px) {
  .chip-row,
  .tabs__list {
    --fade: 20px;
    flex-wrap: nowrap;
    margin-inline: calc(var(--chip-row-bleed, var(--gutter)) * -1);
    padding: 6px var(--chip-row-bleed, var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--chip-row-bleed, var(--gutter));
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }

  .chip-row::-webkit-scrollbar,
  .tabs__list::-webkit-scrollbar {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   6. Badge (label style: Inter 600 14px uppercase pill)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--on-image {
  background-color: var(--on-image-bg);
  color: var(--on-image-ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge--ink {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

.badge--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}


/* --------------------------------------------------------------------------
   7. Section head (custo label + statement)
   ≥768: label cols 1-4, everything else cols 5-12 (baseline-aligned with
   the label). <768: stacked. Children may be direct (h2, .sec-sub,
   .link-arrow) or wrapped in .sec-head__main.
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(56px, 7vw, 120px);
}

.sec-head > * {
  min-width: 0;
}

.sec-head > .sec-label {
  margin-bottom: clamp(20px, 5.5vw, 32px);
}

@media (min-width: 768px) {
  .sec-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
  }

  .sec-head > * {
    grid-column: 5 / -1;
  }

  .sec-head > .sec-label {
    grid-row: 1;
    grid-column: 1 / span 4;
    margin-bottom: 0;
    padding-right: var(--gap);
  }
}

/* single column at every width (e.g. inside a narrow panel column) */
@media (min-width: 768px) {
  .sec-head--stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-head--stack > *,
  .sec-head--stack > .sec-label {
    grid-column: 1 / -1;
  }

  .sec-head--stack > .sec-label {
    grid-row: auto;
    margin-bottom: clamp(20px, 5.5vw, 32px);
  }
}

.sec-head--center {
  justify-items: center;
  text-align: center;
}

.sec-head--center .sec-sub {
  margin-inline: auto;
}

.sec-head--flush {
  margin-bottom: 0;
}

/* Quiet index label ("03 — Facilitation"): Inter 600, uppercase, .08em,
   14px, in ember. No pill. Ember on paper 5.51 (bg) / 5.04 (bg-2); on forest
   and the games band the surface tokens swap --accent for a light ember. */
.sec-label {
  max-width: 28em;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--accent);
  text-wrap: balance;
}

/* custo t-h3 sentence label (Intro). .sec-label--sans is the name used in
   notes/WAVE1-BRIEF.md; both classes are the same component. Sentences stay
   ink, mixed case. */
.sec-label--text,
.sec-label--sans {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.sec-sub {
  max-width: 34em;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  color: var(--muted);
  text-wrap: pretty;
}

.sec-head > :is(.link-arrow, .btn-pair, .btn),
.sec-head__main > :is(.link-arrow, .btn-pair, .btn) {
  margin-top: clamp(28px, 3.2vw, 46px);
  justify-self: start;
}

.sec-head__main > :is(.link-arrow, .btn) {
  display: flex;
  width: fit-content;
}

.sec-head--center > :is(.link-arrow, .btn-pair, .btn) {
  justify-self: center;
}

.sec-head--center .sec-head__main > :is(.link-arrow, .btn) {
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   8. Plate (custo rounded media plate)
   <div class="plate"><img class="plate__img" src alt width height loading="lazy" decoding="async"></div>
   Ratio: .plate--4x3 / --4x5 / --1x1 / --16x9 / --3x2 or style="--plate-ratio: 4 / 5".
   -------------------------------------------------------------------------- */
.plate {
  --plate-inset: 7%;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--plate-ratio, 16 / 10);
  border-radius: var(--r);
  background-color: var(--sage-tint);
  /* Safari: keep the radius while the inner image scales */
  clip-path: inset(0 round var(--r));
}

/* clip-path would clip an outside outline, so a plate that is itself the
   <button>/<a> (work cards) draws its ring inside the edge, above the image */
.plate:focus-visible {
  outline-offset: -4px;
}

button.plate {
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.plate--4x3 { --plate-ratio: 4 / 3; }
.plate--4x5 { --plate-ratio: 4 / 5; }
.plate--1x1 { --plate-ratio: 1 / 1; }
.plate--16x9 { --plate-ratio: 16 / 9; }
.plate--3x2 { --plate-ratio: 3 / 2; }
.plate--auto { aspect-ratio: auto; }

.plate__img {
  position: absolute;
  top: var(--plate-inset);
  left: var(--plate-inset);
  width: calc(100% - 2 * var(--plate-inset));
  height: calc(100% - 2 * var(--plate-inset));
  object-fit: cover;
  object-position: 50% 0;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-soft);
  transform-origin: 50% 50%;
  transition: transform .8s var(--ease);
}

.plate--auto .plate__img {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
}

/* image fills the plate */
.plate--bleed .plate__img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* window peeking up from the bottom edge */
.plate--peek .plate__img {
  height: calc(100% - var(--plate-inset));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* whole image visible (game art, logos) */
.plate--contain .plate__img {
  object-fit: contain;
  object-position: 50% 50%;
  box-shadow: none;
}

@media (hover: hover) {
  .plate:hover .plate__img,
  :is(a, button):hover > .plate .plate__img {
    transform: scale(1.03);
  }
}

.plate:focus-within .plate__img,
:is(a, button):focus-visible .plate__img {
  transform: scale(1.03);
}

/* custo card hover: the frame shrinks inward with rounder corners */
.plate--frame {
  transition: clip-path .6s var(--ease-out);
}

@media (hover: hover) {
  .plate--frame:hover,
  :is(a, button):hover > .plate--frame {
    clip-path: inset(10px round 20px);
  }

  .plate--frame:hover .plate__img,
  :is(a, button):hover > .plate--frame .plate__img {
    transform: scale(1.05);
  }
}

/* Corner slots for badges / the ↗ button */
.plate__slot {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.plate__slot--tl { top: clamp(8px, 1vw, 14px); left: clamp(8px, 1vw, 14px); }
.plate__slot--tr { top: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); }
.plate__slot--bl { bottom: clamp(8px, 1vw, 14px); left: clamp(8px, 1vw, 14px); }
.plate__slot--br { bottom: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); }


/* --------------------------------------------------------------------------
   9. Card surface + dark inset panel
   -------------------------------------------------------------------------- */
.card-surface {
  --muted: var(--muted-2); /* muted on --surface is 4.64; muted-2 is 5.63 */
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

:is(a, button).card-surface,
.card-surface--interactive {
  cursor: pointer;
  transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}

@media (hover: hover) {
  :is(a, button).card-surface:hover,
  .card-surface--interactive:hover {
    background-color: var(--sage-tint);
  }
}

:is(a, button).card-surface:focus-visible,
.card-surface--interactive:focus-within {
  background-color: var(--sage-tint);
}

/* custo dark "app" panel: 18px side margin, radius, 182/62 padding.
   Gets the dark surface tokens automatically (01-base section 3).
   Mobile: full-bleed, square, 50/72 vertical padding. */
.panel-inset {
  position: relative;
  margin-inline: 0;
  padding: 50px var(--gutter) 72px;
  border-radius: 0;
  background-color: var(--bg);
  color: var(--ink);
}

@media (min-width: 768px) {
  .panel-inset {
    margin-inline: 18px;
    padding: clamp(80px, 12.6vw, 182px) clamp(28px, 4.3vw, 62px);
    border-radius: var(--r);
  }
}


/* --------------------------------------------------------------------------
   10. Tiles (Apple 2-up)
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile {
  --muted: var(--muted-2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(36px, 4.4vw, 64px) clamp(20px, 3vw, 48px) clamp(20px, 3vw, 48px);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--ink);
  text-align: center;
}

.tile__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 32em;
}

.tile__kicker {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.tile__title {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-wrap: balance;
}

.tile__sub {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}

.tile .btn-pair {
  justify-content: center;
  margin-top: 8px;
}

.tile__media {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(28px, 3.6vw, 48px);
}


/* --------------------------------------------------------------------------
   11. Stats (big number + label, hairline-divided)
   Hairlines are pseudo-elements centered in the gaps; the grid clips the
   outer ones, so only inner dividers show at any column count.
   -------------------------------------------------------------------------- */
.stats {
  --stats-cols: 2;
  --stats-gap: clamp(28px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
  gap: var(--stats-gap);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

@media (max-width: 359.98px) {
  .stats { --stats-cols: 1; }
}

@media (min-width: 1024px) {
  .stats { --stats-cols: 4; }
  .stats--3 { --stats-cols: 3; }
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.stat--full {
  grid-column: 1 / -1;
}

.stat::before,
.stat::after {
  content: "";
  position: absolute;
  background-color: var(--line);
  pointer-events: none;
}

/* vertical divider (left) */
.stat::before {
  top: calc(var(--stats-gap) / -2);
  bottom: calc(var(--stats-gap) / -2);
  left: calc(var(--stats-gap) / -2);
  width: 1px;
  transform-origin: 50% 0;
}

/* horizontal divider (top) */
.stat::after {
  top: calc(var(--stats-gap) / -2);
  left: calc(var(--stats-gap) / -2);
  right: calc(var(--stats-gap) / -2);
  height: 1px;
  transform-origin: 0 50%;
}

/* Newsreader numerals at the section-heading step (--t-h1 = the panel's h2,
   32-52px), down from the old 57px top size. Lining figures keep columns tidy. */
.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat__label {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

/* [data-count]: core keeps the real text in .sr-only and animates an
   aria-hidden clone (recommended class .count__clone). */
[data-count] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-count] > [aria-hidden="true"],
.count__clone {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   12. Numbered list (custo 01-04)
   Rows: --muted-2 inactive, --ink active (.is-active), 1px ink progress line.
   Modifiers: --auto (3s linear progress, drives auto-advance), --static
   (all ink, no line), --compact (text at --t-lead).
   Inactive gray applies only with JS (no-JS: all rows ink).
   -------------------------------------------------------------------------- */
.num-list {
  --num-dur: 3s;
  margin: 0;
  padding: 0;
  list-style: none;
}

.num-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(24px, 2.8vw, 40px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color .8s var(--ease-out);
}

.num-list__item:first-child {
  padding-top: 0;
}

@media (min-width: 768px) {
  .num-list__item {
    grid-template-columns: minmax(3.5rem, 1fr) minmax(0, 6fr);
  }
}

/* optional full-row wrapper (div or <button>) using the same columns */
.num-list__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  column-gap: inherit;
  align-items: inherit;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
}

button.num-list__row {
  cursor: pointer;
}

.num-list__row:focus-visible {
  outline-offset: 8px;
  border-radius: var(--r-sm);
}

.num-list__index {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.num-list__text,
.num-list__title {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-h2);
  color: inherit;
  text-wrap: pretty;
}

.num-list--compact :is(.num-list__text, .num-list__title) {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: -.005em;
}

.num-list__desc {
  grid-column: 2;
  margin-top: 12px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

html.js .num-list:not(.num-list--static) .num-list__item:not(.is-active) {
  color: var(--muted-2);
}

@media (hover: hover) {
  .num-list__row:hover {
    color: var(--ink);
  }
}

.num-list__row:focus-visible {
  color: var(--ink);
}

/* progress line overlays the row border */
.num-list__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-out);
  pointer-events: none;
}

.num-list__item.is-active::after {
  transform: scaleX(1);
}

.num-list--static .num-list__item::after {
  display: none;
}

/* Auto-advance: the active row's line runs for --num-dur. Advance on its
   animationend (event.pseudoElement === "::after") so pausing the CSS also
   pauses the timer. Paused by hover, focus inside, or .is-paused. */
.num-list--auto .num-list__item::after {
  transition: none;
}

.num-list--auto .num-list__item.is-active::after {
  animation: mg-num-progress var(--num-dur) linear forwards;
}

.num-list--auto:is(:hover, :focus-within, .is-paused) .num-list__item.is-active::after {
  animation-play-state: paused;
}

@keyframes mg-num-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* per-row image (custo iris): position it in the section's own CSS */
.num-list__media {
  opacity: 0;
  clip-path: inset(20% round 20px);
  transition:
    opacity .6s var(--ease-out),
    clip-path .8s var(--ease-out);
}

.num-list__item.is-active .num-list__media,
html:not(.js) .num-list__item:first-child .num-list__media {
  opacity: 1;
  clip-path: inset(0 round var(--r));
}


/* --------------------------------------------------------------------------
   13. Meta table (recent.design inspector)
   <dl class="meta"><div class="meta__row"><dt>Tool</dt><dd>Storyline</dd></div>…</dl>
   (bare dt/dd pairs also work)
   -------------------------------------------------------------------------- */
.meta {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.45;
}

.meta dt,
.meta dd {
  margin: 0;
  padding-block: 11px;
}

.meta dt {
  padding-right: 1.25rem;
  color: var(--muted);
}

.meta dd {
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.meta > dt ~ dt,
.meta > dt ~ dt + dd {
  border-top: 1px solid var(--line);
}

.meta__row {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
}

.meta__row > dt {
  flex: none;
  padding-right: 0;
}

.meta__row + .meta__row {
  border-top: 1px solid var(--line);
}

.meta--ruled {
  border-block: 1px solid var(--line);
}

.meta dd a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}


/* --------------------------------------------------------------------------
   14. Accordion
   The panel opens from aria-expanded="true" on .acc__btn (via :has) or
   .is-open on .acc__item (fallback). grid-template-rows 0fr → 1fr.
   No JS: every panel is open and the icon is hidden.
   -------------------------------------------------------------------------- */
.acc {
  --acc-meta-w: 7.5rem;
  --acc-gap: clamp(16px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.acc__item {
  border-top: 1px solid var(--line);
}

.acc__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.acc__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta icon"
    "title icon"
    "sub icon";
  align-items: center;
  column-gap: var(--acc-gap);
  width: 100%;
  min-height: var(--tap);
  padding-block: clamp(20px, 2.2vw, 30px);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.acc__btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

@media (min-width: 768px) {
  .acc__btn {
    grid-template-columns: var(--acc-meta-w) minmax(0, 1fr) auto;
    grid-template-areas:
      "meta title icon"
      "meta sub icon";
  }

  .acc--plain .acc__btn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title icon"
      "sub icon";
  }

  /* separate rule: an unsupported :has() must not drop the one above */
  .acc__btn:not(:has(.acc__meta)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title icon"
      "sub icon";
  }
}

.acc__meta {
  grid-area: meta;
  align-self: center;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .acc__meta {
    margin-bottom: 6px;
  }
}

.acc__title {
  grid-area: title;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.acc--lg .acc__title {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.acc__sub {
  grid-area: sub;
  margin-top: 4px;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
}

.acc__icon {
  grid-area: icon;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-ui);
  color: var(--ink);
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform .6s var(--ease-out);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  border-radius: 1px;
  background-color: currentColor;
}

.acc__icon::after {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .acc__btn:hover .acc__icon {
    background-color: var(--surface);
  }
}

/* plus rotates 45deg into × and fills with ink */
.acc__btn[aria-expanded="true"] .acc__icon {
  background-color: var(--ink);
  color: var(--ink-inverse);
  transform: rotate(45deg);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear .6s;
}

.acc__item.is-open > .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear 0s;
}

/* :has() path kept in its own rule so older engines still get .is-open */
.acc__item:has(> .acc__heading > .acc__btn[aria-expanded="true"], > .acc__btn[aria-expanded="true"]) > .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear 0s;
}

.acc__inner {
  min-height: 0;
  overflow: hidden;
}

/* bottom spacing as a clipped child, so a closed panel is truly 0px */
.acc__inner::after {
  content: "";
  display: block;
  height: clamp(24px, 3vw, 40px);
}

@media (min-width: 768px) {
  .acc:not(.acc--plain) .acc__inner {
    padding-inline: calc(var(--acc-meta-w) + var(--acc-gap)) calc(40px + var(--acc-gap));
  }

  .acc--plain .acc__inner {
    padding-inline-end: calc(40px + var(--acc-gap));
  }
}

html:not(.js) .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

html:not(.js) .acc__icon {
  display: none;
}


/* --------------------------------------------------------------------------
   15. Tabs (chip-style tablist)
   <div class="tabs__list" role="tablist" aria-label="…"> <button class="tabs__tab" role="tab" aria-selected aria-controls id tabindex>…
   <div class="tabs__panel" role="tabpanel" aria-labelledby tabindex="0" hidden>…
   Tab visuals are shared with .chip (section 5); the list scrolls on mobile.
   -------------------------------------------------------------------------- */
.tabs__panel {
  padding-top: clamp(32px, 4.4vw, 72px);
}

.tabs__panel:focus-visible {
  outline-offset: 8px;
  border-radius: var(--r);
}

html.js .tabs__panel:not([hidden]) {
  animation: mg-tab-in .5s var(--ease-out) backwards;
}

@keyframes mg-tab-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}


/* --------------------------------------------------------------------------
   16. Marquee
   <div class="marquee">
     <div class="marquee__bar"><p class="marquee__label">Worked with</p><button class="icon-btn marquee__toggle" …></div>
     <div class="marquee__viewport">
       <ul class="marquee__track"><li class="marquee__item">Apple</li>…</ul>
       <ul class="marquee__track" aria-hidden="true">…same items…</ul>
     </div>
   </div>
   Runs only with JS (so the pause button works). Paused by hover, focus
   inside, or .is-paused. Static wrapped list under reduced motion, without
   JS, or with .is-static.
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-dur: 60s;
  --marquee-gap: .55em;
  position: relative;
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
}

.marquee__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marquee__label {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink);
}

.marquee__viewport {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: baseline;
  margin: 0;
  padding: 0;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-h2);
  color: var(--muted-2);
  white-space: nowrap;
  list-style: none;
}

.marquee__item {
  display: flex;
  align-items: baseline;
}

.marquee__item::after {
  content: "·";
  content: "·" / "";
  padding-inline: var(--marquee-gap);
}

html.js .marquee:not(.is-static) .marquee__track {
  animation: mg-marquee var(--marquee-dur) linear infinite;
}

html.js .marquee--reverse:not(.is-static) .marquee__track {
  animation-direction: reverse;
}

html.js .marquee:is(:hover, :focus-within, .is-paused) .marquee__track {
  animation-play-state: paused;
}

@keyframes mg-marquee {
  to { transform: translateX(-100%); }
}

/* static list (no JS, .is-static, reduced motion via section 20) */
html:not(.js) .marquee__viewport,
.marquee.is-static .marquee__viewport {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

html:not(.js) .marquee__track,
.marquee.is-static .marquee__track {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
}

html:not(.js) .marquee__item,
.marquee.is-static .marquee__item {
  display: inline;
}

html:not(.js) .marquee__item:last-child::after,
.marquee.is-static .marquee__item:last-child::after {
  content: none;
}

html:not(.js) .marquee__track[aria-hidden="true"],
.marquee.is-static .marquee__track[aria-hidden="true"],
html:not(.js) .marquee__toggle,
.marquee.is-static .marquee__toggle {
  display: none;
}


/* --------------------------------------------------------------------------
   17. Reveal + motion hooks (core JS adds .is-in once)
   Hidden states exist only under html.js. Reveals use animations with the
   independent translate/scale properties, so they never override a
   component's own transition or transform.
   -------------------------------------------------------------------------- */

/* [data-reveal] = "up" (default, 40px) | "fade" | "clip" */
html.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

html.js [data-reveal="clip"]:not(.is-in) {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
}

html.js [data-reveal].is-in {
  animation:
    mg-fade 1s var(--ease) backwards,
    mg-rise 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="fade"].is-in {
  animation: mg-fade 1s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="clip"].is-in {
  animation: mg-clip 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

/* [data-reveal][data-reveal-stagger]: the parent stays put; its direct
   children reveal in sequence (80ms steps from --i, set by core; the
   nth-child values below are a fallback). Children that carry their own
   data-reveal are independent. */
html.js [data-reveal][data-reveal-stagger]:not(.is-in) {
  opacity: 1;
  clip-path: none;
}

html.js [data-reveal][data-reveal-stagger].is-in {
  animation: none;
}

html.js [data-reveal][data-reveal-stagger]:not(.is-in) > :not([data-reveal]) {
  opacity: 0;
}

html.js [data-reveal][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation:
    mg-fade 1s var(--ease) backwards,
    mg-rise 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="fade"][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation: mg-fade 1s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="clip"][data-reveal-stagger]:not(.is-in) > :not([data-reveal]) {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
}

html.js [data-reveal="clip"][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation: mg-clip 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

[data-reveal-stagger] > :nth-child(2) { --i: 1; }
[data-reveal-stagger] > :nth-child(3) { --i: 2; }
[data-reveal-stagger] > :nth-child(4) { --i: 3; }
[data-reveal-stagger] > :nth-child(5) { --i: 4; }
[data-reveal-stagger] > :nth-child(6) { --i: 5; }
[data-reveal-stagger] > :nth-child(7) { --i: 6; }
[data-reveal-stagger] > :nth-child(8) { --i: 7; }
[data-reveal-stagger] > :nth-child(9) { --i: 8; }
[data-reveal-stagger] > :nth-child(10) { --i: 9; }
[data-reveal-stagger] > :nth-child(11) { --i: 10; }
[data-reveal-stagger] > :nth-child(n+12) { --i: 11; }

@keyframes mg-fade {
  from { opacity: 0; }
}

@keyframes mg-rise {
  from { translate: 0 40px; }
}

@keyframes mg-clip {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* [data-split] line reveal (makemepulse/custo): core wraps lines as
   .split-line > .split-line__inner[style="--i:n"]. Lines rise from below
   a clip, 1.2s EO, 90ms stagger. The padding/negative margin gives
   accents (Š) and descenders room inside the clip. */
.split-line {
  display: block;
  overflow: clip;
  padding-block: .1em .14em;
  margin-block: -.1em -.14em;
}

.split-line__inner {
  display: block;
}

html.js [data-split]:not(.is-in) .split-line__inner {
  translate: 0 calc(100% + .3em);
}

html.js [data-split].is-in .split-line__inner {
  animation: mg-line 1.2s var(--ease-out) backwards;
  animation-delay: calc(var(--split-delay, 0ms) + min(var(--i, 0), 15) * 90ms);
}

@keyframes mg-line {
  from { translate: 0 calc(100% + .3em); }
}

/* [data-draw] on a hairline element: scaleX 0 → 1 from the left, .9s IO.
   .stats[data-draw] draws its pseudo dividers instead of scaling itself. */
html.js [data-draw]:not(.stats):not(.is-in) {
  scale: 0 1;
  transform-origin: 0 50%;
}

html.js [data-draw]:not(.stats).is-in {
  transform-origin: 0 50%;
  animation: mg-draw-x .9s var(--ease) backwards;
  animation-delay: var(--draw-delay, 0ms);
}

html.js .stats[data-draw]:not(.is-in) .stat::after { scale: 0 1; }
html.js .stats[data-draw]:not(.is-in) .stat::before { scale: 1 0; }

html.js .stats[data-draw].is-in .stat::after {
  animation: mg-draw-x .9s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms);
}

html.js .stats[data-draw].is-in .stat::before {
  animation: mg-draw-y .9s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + 120ms);
}

.stats[data-draw] > :nth-child(2) { --i: 1; }
.stats[data-draw] > :nth-child(3) { --i: 2; }
.stats[data-draw] > :nth-child(4) { --i: 3; }
.stats[data-draw] > :nth-child(5) { --i: 4; }
.stats[data-draw] > :nth-child(6) { --i: 5; }
.stats[data-draw] > :nth-child(n+7) { --i: 6; }

@keyframes mg-draw-x {
  from { scale: 0 1; }
}

@keyframes mg-draw-y {
  from { scale: 1 0; }
}

/* [data-magnetic]: core may set --mag (e.g. "4px -2px") on the element;
   .btn and .icon-btn already apply and transition it. For any other
   element: */
[data-magnetic]:not(.btn):not(.icon-btn) {
  translate: var(--mag, none);
  transition: translate .6s var(--ease-out);
}

@media (hover: none), (pointer: coarse) {
  [data-magnetic] {
    translate: none !important;
  }
}

/* [data-parallax]: core writes transform inline (desktop, fine pointer,
   motion allowed). Hint the compositor only where it can run. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-parallax] {
    will-change: transform;
  }
}


/* --------------------------------------------------------------------------
   18. Toast (#toast, role=status; core adds .is-visible)
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: var(--z-toast);
  max-width: min(calc(100vw - 32px), 32rem);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background-color: var(--page-ink);
  color: var(--page-ink-inverse);
  box-shadow: var(--shadow-lift);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  translate: -50% 16px;
  pointer-events: none;
  transition:
    opacity var(--dur-1) var(--ease-out),
    translate .5s var(--ease-out);
}

@media (min-width: 768px) {
  .toast {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

.toast:is(.is-visible, .is-open, .is-shown) {
  opacity: 1;
  translate: -50% 0;
}

.toast:empty {
  opacity: 0;
}


/* --------------------------------------------------------------------------
   19. Keyboard key
   -------------------------------------------------------------------------- */
kbd,
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: .1em .4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background-color: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: max(.875rem, .75em);
  font-weight: 600;
  line-height: 1.4;
  vertical-align: .05em;
}


/* --------------------------------------------------------------------------
   20. Reduced motion (component specifics; global net is in 01-base)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* roll: color change only */
  .roll > :nth-child(2) {
    display: none;
  }

  .roll > :first-child {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:active {
    scale: none;
  }

  .icon-btn:hover {
    scale: none !important;
  }

  .link-arrow::after {
    transform: none !important;
  }

  .plate__img {
    transform: none !important;
  }

  .plate--frame {
    clip-path: inset(0 round var(--r)) !important;
  }

  /* numbered list: every row ink; the auto list keeps a static line on the
     active row so the selection stays visible */
  html.js .num-list:not(.num-list--static) .num-list__item:not(.is-active) {
    color: var(--ink);
  }

  .num-list:not(.num-list--auto) .num-list__item::after {
    display: none;
  }

  .num-list--auto .num-list__item.is-active::after {
    animation: none !important;
    transform: scaleX(1);
  }

  .num-list__media {
    clip-path: none;
  }

  /* marquee: static wrapped list */
  .marquee__viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    display: block;
    flex: 1 1 auto;
    white-space: normal;
    animation: none !important;
  }

  .marquee__item {
    display: inline;
  }

  .marquee__item:last-child::after {
    content: none;
  }

  .marquee__track[aria-hidden="true"],
  .marquee__toggle {
    display: none;
  }

  /* reveals: content is simply there */
  html.js [data-reveal],
  html.js [data-reveal-stagger] > *,
  html.js [data-split] .split-line__inner,
  html.js [data-draw],
  html.js .stats[data-draw] .stat::before,
  html.js .stats[data-draw] .stat::after {
    opacity: 1 !important;
    clip-path: none !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }

  .toast {
    translate: -50% 0;
  }
}


/* --------------------------------------------------------------------------
   21. Forced colors
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .link-arrow::after,
  .icon-btn__glyph,
  .acc__icon::before,
  .acc__icon::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .num-list__item::after,
  .stat::before,
  .stat::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .chip:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"], .is-active),
  .tabs__tab[aria-selected="true"],
  .icon-btn--toggle[aria-pressed="true"] {
    forced-color-adjust: none;
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }

  .acc__btn[aria-expanded="true"] .acc__icon {
    forced-color-adjust: none;
    background-color: Canvas;
    color: CanvasText;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .num-list__item.is-active {
    text-decoration: underline;
  }

  .toast {
    border: 1px solid CanvasText;
  }
}

/* ==== 03-chrome.css ==== */
/* ==========================================================================
   03-chrome.css — skip link, header (+ scroll progress), menu panel,
   section rail, footer.                                   Owner: F2
   Hooks: notes/FOUNDATION-CONTRACT.md · API: notes/api/markup.md
   Colours come only from 00-tokens.css. Hover effects are limited to
   (hover:hover) and (pointer:fine). Reduced motion removes every
   transition/animation here (block at the end of the file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. .sr-only and .skip-link live in 01-base.css (§7). Integrator: the
      duplicate copies that were here are removed so there is one source.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Header shell
   Local custom properties switch per state; the default (no state class,
   or no JS) is the frosted look so the header is always legible.
   -------------------------------------------------------------------------- */
.site-header {
  --hdr-fg: var(--ink);
  --hdr-btn-bg: var(--bg);
  --hdr-btn-bg-hover: var(--surface);
  --hdr-btn-fg: var(--ink);
  --hdr-btn-shadow: var(--shadow-hairline);
  --hdr-btn-blur: none;
  --hdr-cta-bg: var(--ink);
  --hdr-cta-fg: var(--ink-inverse);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--hdr-fg);
  transition: color .6s var(--ease);
}

/* Frosted layer (Apple): its own element so the header can slide away
   while the scroll-progress hairline stays pinned at the top. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  background: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header::before { background: var(--bg); }
}

/* is-on-hero: transparent, white text, smoked-glass controls.
   Only with JS (core removes it once the hero is passed). */
.js .site-header.is-on-hero:not(.is-frosted) {
  --hdr-fg: var(--sage-ink);
  --hdr-btn-bg: var(--glass-bg);
  --hdr-btn-bg-hover: var(--glass-bg-hover);
  --hdr-btn-fg: var(--sage-ink);
  --hdr-btn-shadow: inset 0 0 0 1px var(--glass-edge);
  --hdr-btn-blur: blur(10px);
  --hdr-cta-bg: var(--sage-ink);
  --hdr-cta-fg: var(--sage);
  --ring: var(--focus-on-dark);
}
.js .site-header.is-on-hero:not(.is-frosted)::before {
  opacity: 0;
}

/* is-hidden: slides up (scrolling down). Core never sets it under reduced
   motion or while focus is inside. The progress hairline stays visible. */
.site-header.is-hidden {
  pointer-events: none;
}
.site-header.is-hidden::before,
.site-header.is-hidden .site-header__inner {
  transform: translateY(calc(-100% - 2px));
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  box-sizing: border-box;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  transition: transform .6s var(--ease);
}

/* Focus rings inside the chrome follow the surface they sit on. */
.site-header :focus-visible {
  outline: 2px solid var(--ring, var(--focus));
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Brand + primary nav (custo text roll + scrollspy underline)
   -------------------------------------------------------------------------- */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  color: inherit;
  font-family: var(--font-display); /* the wordmark (Panel C) */
  font-size: clamp(1.3125rem, 1.2rem + .4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
}

.site-nav {
  margin-inline: auto;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.site-nav__link .roll {
  position: relative;
  display: block;
  overflow: hidden;
}
.site-nav__link .roll__a,
.site-nav__link .roll__b {
  display: block;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.site-nav__link .roll__b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
}

/* active section (scrollspy) holds the rolled state + underline */
.site-nav__link.is-active .roll__a,
.site-nav__link:focus-visible .roll__a {
  opacity: 0;
  transform: translateY(-100%);
}
.site-nav__link.is-active .roll__b,
.site-nav__link:focus-visible .roll__b {
  opacity: 1;
  transform: none;
}
.site-nav__link.is-active::after,
.site-nav__link:focus-visible::after {
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover .roll__a { opacity: 0; transform: translateY(-100%); }
  .site-nav__link:hover .roll__b { opacity: 1; transform: none; }
  .site-nav__link:hover::after { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. Actions: icon buttons, gears, theme icons, CTA, menu button
   -------------------------------------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  margin-left: auto;
}

.site-header .icon-btn,
.site-header .menu-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--hdr-btn-bg);
  color: var(--hdr-btn-fg);
  box-shadow: var(--hdr-btn-shadow);
  -webkit-backdrop-filter: var(--hdr-btn-blur);
  backdrop-filter: var(--hdr-btn-blur);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .4s var(--ease-out),
    color .4s var(--ease-out),
    box-shadow .4s var(--ease-out),
    transform .6s var(--ease-out);
}
.site-header .icon-btn > svg {
  display: block;
  width: 20px;
  height: 20px;
  grid-area: 1 / 1;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .icon-btn:hover,
  .site-header .menu-btn:hover {
    background: var(--hdr-btn-bg-hover);
  }
}
.site-header .icon-btn:active,
.site-header .menu-btn:active {
  transform: scale(.94);
}

/* Gears ("how I built this"): two interlocking gears; they spin only while
   the control is hovered or focused, never on their own. */
.ai-gears {
  position: relative;
  display: block;
  width: 24px;
  height: 22px;
}
.ai-gear {
  position: absolute;
  display: block;
}
.ai-gear-big {
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
}
.ai-gear-small {
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
}
@keyframes mg-gear-spin { to { transform: rotate(360deg); } }
@keyframes mg-gear-spin-rev { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .icon-btn--gears:focus-visible .ai-gear-big { animation: mg-gear-spin 1.8s linear infinite; }
  .icon-btn--gears:focus-visible .ai-gear-small { animation: mg-gear-spin-rev 1.3s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .icon-btn--gears:hover .ai-gear-big,
  .menu-panel__row:hover .ai-gear-big { animation: mg-gear-spin 1.8s linear infinite; }
  .icon-btn--gears:hover .ai-gear-small,
  .menu-panel__row:hover .ai-gear-small { animation: mg-gear-spin-rev 1.3s linear infinite; }
}

/* Theme icons: sun in light, moon in dark (as before), cross-rotating. */
.icon-sun,
.icon-moon {
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
:root[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}
:root:not([data-theme="dark"]) .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}

/* "Get in touch" (F1 .btn.btn--primary.btn--sm). Colours are switched per
   header state; F1 may read --btn-bg / --btn-fg, the direct properties
   cover an implementation that does not. */
.site-header__cta {
  --btn-bg: var(--hdr-cta-bg);
  --btn-fg: var(--hdr-cta-fg);
  flex: none;
  white-space: nowrap;
}
.js .site-header.is-on-hero:not(.is-frosted) .site-header__cta {
  background-color: var(--hdr-cta-bg);
  border-color: transparent;
  color: var(--hdr-cta-fg);
}

/* Menu button: "Menu" + two-line burger. Label is visible 640–1179px;
   icon-only (label kept for AT) below 640 and from 1180 up. */
.site-header .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-width: 44px;
  padding: 0 18px 0 20px;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
}
.menu-btn__icon {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 8px;
}
.menu-btn__icon::before,
.menu-btn__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .6s var(--ease);
}
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn__icon::after {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Scroll progress hairline (2px; white on the hero, ink elsewhere)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Header responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1179.98px) {
  .site-nav { display: none; }
}
@media (min-width: 1180px) {
  .site-header__actions { margin-left: 0; }
}
@media (min-width: 1180px), (max-width: 639.98px) {
  .site-header .menu-btn {
    width: 44px;
    padding: 0;
    gap: 0;
  }
  .menu-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 639.98px) {
  .site-header__cta { display: none; }
  .site-header__actions { gap: 6px; }
  /* two-line lockup: "Matthew / Grunewald" */
  .site-header__brand {
    width: min-content;
    font-size: 1.125rem;
    line-height: 1.02;
    white-space: normal;
  }
}
@media (max-width: 359.98px) {
  .site-header__inner { gap: 8px; }
  .site-header__actions { gap: 4px; }
}

/* --------------------------------------------------------------------------
   6. Menu panel (custo navigation panel): full-screen sage, huge links,
      wipe-down entrance, staggered rows. Core: removes [hidden], adds
      .is-open next frame; on close removes .is-open, restores [hidden]
      after the clip-path transition (800ms) on the panel itself.
   -------------------------------------------------------------------------- */
.menu-panel {
  --ring: var(--focus-on-dark);
  --menu-line: color-mix(in srgb, var(--sage-ink) 30%, transparent);

  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sage);
  color: var(--sage-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
.menu-panel[hidden] {
  display: none;
}
.menu-panel.is-open {
  clip-path: inset(0 0 0 0);
}
.menu-panel :focus-visible {
  outline: 2px solid var(--focus-on-dark);
  outline-offset: 3px;
}

.menu-panel__inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}

.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  min-height: var(--header-h);
}
.menu-panel__brand {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.2rem + .4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
}
.menu-panel .icon-btn,
.menu-panel__row-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  color: var(--sage-ink);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.menu-panel .icon-btn {
  cursor: pointer;
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
.menu-panel .icon-btn > svg,
.menu-panel__row-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
  grid-area: 1 / 1;
}
.menu-panel__close > svg {
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel .icon-btn:hover { background: var(--glass-bg-hover); }
  .menu-panel__close:hover > svg { transform: rotate(90deg); }
}

.menu-panel__nav {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding-block: clamp(16px, 5vh, 64px);
}
.menu-panel__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .menu-panel__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }
}
@media (min-width: 1280px) {
  .menu-panel__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
}
.menu-panel__links > li {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.menu-panel.is-open .menu-panel__links > li {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease-out) calc(.2s + var(--i, 0) * 45ms),
    transform 1s var(--ease-out) calc(.2s + var(--i, 0) * 45ms);
}
.menu-panel__link {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: .5em;
  padding-block: .06em;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: var(--ls-h1);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.menu-panel__idx {
  flex: none;
  width: 1.75rem;
  padding-top: calc(var(--t-h1) * .42);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-micro);
  color: var(--accent-on-brand);
}
.menu-panel__link::after {
  content: "";
  position: absolute;
  left: calc(1.75rem + .5em);
  right: 0;
  bottom: .1em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .6s var(--ease-out);
}
.menu-panel__link.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel__link:hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

.menu-panel__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: none;
  border-top: 1px solid var(--menu-line);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.menu-panel.is-open .menu-panel__rows {
  opacity: 1;
  transition: opacity .8s var(--ease-out) .55s;
}
@media (min-width: 768px) {
  .menu-panel__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
.menu-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--menu-line);
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .menu-panel__row { border-bottom: 0; }
}
.menu-panel__row-icon {
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel__row:hover .menu-panel__row-icon {
    background: var(--glass-bg-hover);
    transform: scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   7. Section rail (desktop ≥1180px): frosted vertical pill on the right
      edge; ticks extend when active; labels on hover/focus.
   -------------------------------------------------------------------------- */
.section-rail {
  position: fixed;
  top: 50%;
  right: max(12px, calc(var(--gutter) / 2 - 20px));
  z-index: var(--z-rail);
  transform: translateY(-50%);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s;
}
.section-rail.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(12px, -50%);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s;
}
.no-js .section-rail.is-hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}

/* While core locks scroll (modal / menu open) the page scrollbar is removed
   and body gets padding-right = --scrollbar-comp. Keep the fixed chrome
   where it was so nothing jumps sideways behind the backdrop. */
html.is-scroll-locked .site-header {
  right: var(--scrollbar-comp, 0px);
}
html.is-scroll-locked .section-rail {
  margin-right: var(--scrollbar-comp, 0px);
}
@media (max-width: 1179.98px) {
  .section-rail { display: none; }
}
.section-rail__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-radius: var(--r-pill);
  background: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-hairline);
}
.section-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  color: var(--muted-2);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.section-rail__link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.section-rail__tick {
  display: block;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .6s var(--ease-out), background-color .4s var(--ease-out);
}
.section-rail__link.is-active {
  color: var(--ink);
}
.section-rail__link.is-active .section-rail__tick {
  width: 22px;
}
.section-rail__link:focus-visible .section-rail__tick {
  width: 18px;
  background: var(--ink);
}
.section-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-soft);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.section-rail__link:focus-visible .section-rail__label {
  opacity: 1;
  transform: translate(0, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .section-rail__link:hover { color: var(--ink); }
  .section-rail__link:hover .section-rail__tick { width: 18px; }
  .section-rail__link:hover .section-rail__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* --------------------------------------------------------------------------
   8. Footer (custo footer + makemepulse giant wordmark)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: keeps the root as the view-timeline scroller */
  padding-top: clamp(64px, 7.6vw, 110px);
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.site-footer :focus-visible {
  outline: 2px solid var(--ring, var(--focus)); /* the footer is forest: --ring is paper there */
  outline-offset: 3px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(56px, 6.5vw, 96px);
}
.site-footer__brand { grid-column: 1 / span 5; }
.site-footer__ask { grid-column: 7 / -1; }
.site-footer__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
}
.site-footer__col--explore { grid-column: 1 / span 6; }
.site-footer__col--resources { grid-column: 7 / span 3; }
.site-footer__col--contact { grid-column: 10 / span 3; }

.site-footer__wordmark {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.site-footer__tagline {
  max-width: 22em;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-text);
  line-height: var(--lh-text);
}

/* Column titles use the quiet label style (Inter 600, uppercase, 14px). */
.site-footer__title {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__list--split {
  columns: 2;
  column-gap: var(--gap);
}
.site-footer__list > li {
  break-inside: avoid;
}
.site-footer__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  max-width: 100%;
  padding-block: 4px;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.62;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .6s var(--ease-out);
}
.site-footer__ext {
  flex: none;
  font-size: .85em;
}
.site-footer__link::after,
.foot-build-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .6s var(--ease-out);
}
.site-footer__link:focus-visible,
.foot-build-link:focus-visible {
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__link:hover,
  .foot-build-link:hover {
    color: var(--ink);
  }
  .site-footer__link:hover::after,
  .foot-build-link:hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}
@media (pointer: coarse) {
  .site-footer__link {
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

/* Ask Agile ADDIE: big underline input + round submit */
.foot-ask {
  margin: 0;
}
.foot-ask__label {
  display: block;
  margin-bottom: clamp(12px, 1.6vw, 24px);
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
}
.foot-ask__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--muted);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.foot-ask__field:focus-within {
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 0 var(--ink);
}
.foot-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(64px, 5.2vw, 80px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.005em;
  -webkit-appearance: none;
  appearance: none;
}
.foot-ask__input::placeholder {
  color: var(--muted);
  opacity: 1;
}
/* the 2px ink underline on .foot-ask__field is the focus indicator */
.foot-ask__input:focus,
.foot-ask__input:focus-visible {
  outline: none;
}
.foot-ask__submit {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--ease-out), background-color .4s var(--ease-out);
}
.foot-ask__submit > svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot-ask__submit:hover { transform: scale(1.08); }
  .foot-ask__submit:hover > svg { transform: translateX(2px); }
}
.foot-ask__submit:active { transform: scale(.95); }

/* Bottom bar */
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(72px, 9.3vw, 140px);
  padding-block: clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.45;
}
.site-footer__bar .foot {
  margin: 0;
}
.foot-build-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .6s var(--ease-out);
}
.foot-build-link::after {
  bottom: 10px;
}

/* Giant wordmark strip, clipped at the bottom edge (decorative). */
.site-footer__giant {
  position: relative;
  box-sizing: content-box;
  height: .66em;
  margin-top: clamp(4px, 1vw, 16px);
  padding-inline: var(--gutter);
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 18vw, 28rem); /* floor under 18vw at 320, so the word stays centred */
  font-weight: 400;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--ls-wordmark);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  view-timeline-name: --mg-giant;
}
.site-footer__giant-word {
  display: block;
}
@keyframes mg-giant-rise {
  from { transform: translateY(55%); }
  to { transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer__giant-word {
      animation: mg-giant-rise linear both;
      animation-timeline: --mg-giant;
      animation-range: entry 0% entry 100%;
    }
  }
}

/* Footer responsive */
@media (max-width: 1023.98px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__ask { grid-column: 1 / -1; }
  .site-footer__col--explore { grid-column: 1 / -1; }
  .site-footer__col--resources { grid-column: 1 / span 6; }
  .site-footer__col--contact { grid-column: 7 / span 6; }
  .site-footer__list--split { columns: 3; }
}
@media (max-width: 639.98px) {
  .site-footer__col--resources,
  .site-footer__col--contact { grid-column: 1 / -1; }
  .site-footer__list--split { columns: 2; }
  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   9. Reduced motion, forced colours, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .site-header,
  .site-header::before,
  .site-header__inner,
  .site-header .icon-btn,
  .site-header .menu-btn,
  .site-nav__link::after,
  .site-nav__link .roll__a,
  .site-nav__link .roll__b,
  .menu-btn__icon::before,
  .menu-btn__icon::after,
  .icon-sun,
  .icon-moon,
  .menu-panel,
  .menu-panel *,
  .section-rail,
  .section-rail *,
  .site-footer *,
  .foot-build-link::after {
    transition: none !important;
    animation: none !important;
  }
  .site-nav__link .roll__b { display: none; }
  .site-nav__link .roll__a { opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
  .menu-panel__links > li,
  .menu-panel__rows {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-header::before {
    background: Canvas;
    border-bottom-color: CanvasText;
  }
  .site-header .icon-btn,
  .site-header .menu-btn,
  .menu-panel .icon-btn,
  .menu-panel__row-icon,
  .foot-ask__submit {
    border: 1px solid ButtonText;
  }
  .scroll-progress__bar { background: Highlight; }
  .menu-panel {
    background: Canvas;
    color: CanvasText;
  }
  .section-rail__list {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .section-rail__link.is-active .section-rail__tick { background: Highlight; }
  .section-rail__label { border: 1px solid CanvasText; }
}

@media print {
  .skip-link,
  .site-header,
  .menu-panel,
  .section-rail,
  .site-footer__ask,
  .site-footer__giant {
    display: none !important;
  }
}

/* ==== 04-overlays.css ==== */
/* ==========================================================================
   04-overlays.css — modal shell (.overlay/.modal), info + expertise notes,
   AI modal + detail panel, video modals (journey, vimeo), game modal, toast.
   Owner: F2 · Hooks: notes/FOUNDATION-CONTRACT.md · API: notes/api/markup.md
   Open/close is driven by core (MG.openModal / MG.closeModal):
     [hidden] removed → next frame .is-open → (close) .is-open removed →
     [hidden] + aria-hidden restored after the transition (.5s).
   The legacy .open class is styled identically for safety.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.overlay {
  --ring: var(--focus);

  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  box-sizing: border-box;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.overlay[hidden] {
  display: none;
}
.overlay.is-open,
.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: auto; /* centres, and never clips the top when taller than the viewport */
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
:root[data-theme="dark"] .modal {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lift);
}
.overlay.is-open .modal,
.overlay.open .modal {
  opacity: 1;
  transform: none;
}
.modal:focus {
  outline: none;
}
.modal :focus-visible {
  outline: 2px solid var(--ring, var(--focus));
  outline-offset: 3px;
}

/* Close button (.icon-btn.modal-close): 44px circle, top-right. */
.modal-close {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  right: clamp(12px, 1.6vw, 20px);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-hairline);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
:root[data-theme="dark"] .modal-close {
  background: var(--surface-2);
}
.modal-close > svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: var(--surface-2); }
  :root[data-theme="dark"] .modal-close:hover { background: var(--line-strong); }
  .modal-close:hover > svg { transform: rotate(90deg); }
}
.modal-close:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   2. Shared modal typography
   -------------------------------------------------------------------------- */
.modal-eyebrow {
  margin: 0 56px 12px 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.modal-eyebrow:empty {
  display: none;
}
.modal-title {
  margin: 0 52px 0 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
:root[data-theme="dark"] .modal-badge {
  background: var(--surface-2);
}
.modal-badge:empty {
  display: none;
}
.modal-bullets {
  margin-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
}
.modal-bullets:empty {
  display: none;
}
.modal-bullet {
  display: grid;
  gap: 6px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.modal-bullet strong {
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.4;
}
.modal-bullet span {
  color: var(--muted);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   3. AI modal + detail panel. Sibling contract (do not break):
      .ai-detail-toggle[aria-expanded="true"] + .ai-detail-panel opens it.
   -------------------------------------------------------------------------- */
.ai-modal {
  max-width: 700px;
}
.ai-modal-body {
  margin-top: clamp(18px, 2vw, 28px);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.ai-modal-body p {
  margin: 0 0 1em;
}
.ai-modal-body .ai-modal-sign {
  margin: 1.4em 0 0;
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
}
.ai-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.ai-detail-toggle .acc-chev {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1;
  transition: transform .5s var(--ease), background-color .4s var(--ease-out);
}
:root[data-theme="dark"] .ai-detail-toggle .acc-chev {
  background: var(--surface-2);
}
.ai-detail-toggle[aria-expanded="true"] .acc-chev {
  transform: rotate(90deg);
}
@media (hover: hover) and (pointer: fine) {
  .ai-detail-toggle:hover .acc-chev { background: var(--sage-tint); }
}
.ai-detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .55s var(--ease), visibility 0s linear .55s;
}
.ai-detail-toggle[aria-expanded="true"] + .ai-detail-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .55s var(--ease), visibility 0s;
}
.ai-detail-inner {
  min-height: 0;
  overflow: hidden;
}
.ai-detail-inner ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 22px 0 6px;
  list-style: none;
  counter-reset: mg-ai-item;
}
.ai-detail-inner li {
  position: relative;
  padding-left: 40px;
  color: var(--ink-2);
  counter-increment: mg-ai-item;
}
.ai-detail-inner li::before {
  content: counter(mg-ai-item, decimal-leading-zero) ".";
  content: counter(mg-ai-item, decimal-leading-zero) "." / "";
  position: absolute;
  left: 0;
  top: .2em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   4. Video modals (journey <video>, vimeo <iframe>): dark "cinema" sheet,
      16:9 stage sized to fit the viewport height.
   -------------------------------------------------------------------------- */
.overlay--media,
.overlay--game {
  --ring: var(--focus-on-dark);
}
.video-modal {
  display: flex;
  flex-direction: column;
  max-width: none;
  width: min(1120px, 100%, calc((100vh - 168px) * 16 / 9));
  width: min(1120px, 100%, calc((100dvh - 168px) * 16 / 9));
  min-width: min(280px, 100%);
  padding: 0;
  overflow: hidden;
  background: var(--games-bg);
  color: var(--games-ink);
}
:root[data-theme="dark"] .video-modal,
:root[data-theme="dark"] .game-modal {
  background: var(--games-bg);
}
.video-modal__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 10px 10px 10px clamp(16px, 2vw, 24px);
}
.video-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--games-ink);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
}
.video-modal .modal-close,
.game-modal .modal-close {
  position: static;
  margin-left: auto;
  background: color-mix(in srgb, var(--games-ink) 12%, transparent);
  color: var(--games-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--games-ink) 22%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .video-modal .modal-close:hover,
  .game-modal .modal-close:hover {
    background: color-mix(in srgb, var(--games-ink) 22%, transparent);
  }
}
.vid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--games-bg);
}
.vid > iframe,
.vid > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--games-bg);
}
.vid-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 16px clamp(16px, 2vw, 24px) 20px;
  color: var(--games-muted);
  font-size: var(--t-small);
  line-height: 1.45;
}
.vid-foot > span:first-child {
  color: var(--games-ink);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Game modal: head bar + iframe stage + "Thanks for playing." screen
      (#gameThanks gets .show for 1.4s before the modal closes).
   -------------------------------------------------------------------------- */
.game-modal {
  --game-head-h: 60px;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: min(1180px, 100%);
  height: min(880px, calc(100vh - 32px));
  height: min(880px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  background: var(--games-bg);
  color: var(--games-ink);
}
.game-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  box-sizing: border-box;
  height: var(--game-head-h);
  padding: 8px 8px 8px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid color-mix(in srgb, var(--games-ink) 14%, transparent);
}
.game-head__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--games-ink);
}
.game-head .t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--games-ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--games-bg);
}
.game-body > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.game-thanks {
  position: absolute;
  inset: var(--game-head-h) 0 0 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: var(--games-bg);
  color: var(--games-ink);
  text-align: center;
}
.game-thanks.show {
  display: flex;
  animation: mg-thanks-in .5s var(--ease-out) both;
}
.game-thanks .tt {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.game-thanks .ss {
  color: var(--games-muted);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
@keyframes mg-thanks-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Small screens: text modals become bottom sheets; the game goes
      full-screen.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .overlay:not(.overlay--media):not(.overlay--game) {
    padding: max(12px, env(safe-area-inset-top, 0px)) 0 0;
  }
  .overlay:not(.overlay--media):not(.overlay--game) > .modal {
    margin: auto 0 0;
    max-width: none;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(40px);
  }
  .overlay.is-open:not(.overlay--media):not(.overlay--game) > .modal,
  .overlay.open:not(.overlay--media):not(.overlay--game) > .modal {
    transform: none;
  }
  .overlay--game {
    padding: 0;
  }
  .game-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Toast (#toast, role=status). Core: set text, add .is-visible; remove
      .is-visible after the timeout. Hidden while empty.
      Integrator: this block is the single source for the toast's position.
      It uses the independent `translate` property, like the 02-components
      base rule it overrides (a `transform` here would ADD to that rule's
      translate and push the toast off-centre).
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  z-index: var(--z-toast);
  box-sizing: border-box;
  max-width: min(480px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: none;
  translate: -50% 16px;
  transition: opacity .35s var(--ease-out), translate .5s var(--ease-out);
}
.toast:empty {
  visibility: hidden;
}
.toast.is-visible,
.toast.is-open,
.toast.is-shown,
.toast.show {
  opacity: 1;
  translate: -50% 0;
}
@media (max-width: 639.98px) {
  /* clear the chat FAB (56px circle, bottom-right) */
  .toast {
    bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  }
}

/* --------------------------------------------------------------------------
   8. Reduced motion, forced colours, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .overlay,
  .modal,
  .modal-close,
  .modal-close > svg,
  .ai-detail-panel,
  .ai-detail-toggle .acc-chev,
  .game-thanks,
  .toast {
    transition: none !important;
    animation: none !important;
  }
  .modal,
  .overlay .modal {
    transform: none !important;
  }
  .toast {
    translate: -50% 0 !important;
  }
}

@media (forced-colors: active) {
  .modal {
    border: 1px solid CanvasText;
  }
  .modal-close,
  .ai-detail-toggle .acc-chev {
    border: 1px solid ButtonText;
  }
  .modal-badge {
    border: 1px solid CanvasText;
  }
  .toast {
    border: 1px solid CanvasText;
  }
}

@media print {
  .overlay,
  .toast {
    display: none !important;
  }
}

/* ==== 10-hero.css ==== */
/* 10-hero.css (designer review 2026-10-22, C05): Hero. Scoped to #top / .hero*.
   custo's formula: one message, one action, one complete giant word.
   - The hero fills the first screen (100svh) and is a size container, so the
     wordmark can be sized to run gutter to gutter (calc on cqi).
   - >=1024: the statement sits top-left in 8 columns; the lead, industries and
     CTAs sit bottom-right in 4 columns, directly above the wordmark (no dead band).
   - The wordmark row: the small portrait + italic "Matthew", then "Grunewald",
     fully inside the hero (never cropped by the next section, no parallax drift).
   - The header brand always shows (custo keeps its logo); the Ask composer moved
     to the header's single "Ask Agile ADDIE" entry point (C06).
   Letter lift (signature 5) is kept. */

#top.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(20px, 4vh, 48px));
  padding-bottom: clamp(16px, 3vh, 32px);
  /* forest with a faint paper light from the top right (paper text >= 10:1) */
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--brand-ink) 6%, transparent) 0%, transparent 62%),
    var(--sage);
  color: var(--ink); /* = sage-ink on the forest surface; #000 in print */
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}

#top .hero__inner {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
/* one column: the text stays grouped at the top and any spare height sits above the name */
#top .hero__grid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
#top .hero__copy,
#top .hero__aside { min-width: 0; }

/* Subtitle: the title as a quiet sentence-case line (brand ink 11:1 on forest). */
#top .hero__eyebrow {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink); /* = sage-ink on the forest surface; #000 in print */
}

/* Statement: Newsreader at the display step, one sentence per line where it fits. */
#top .hero__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  color: var(--ink); /* = sage-ink on the forest surface; #000 in print */
  text-wrap: balance;
}
#top .hero__line { display: block; }

#top .hero__aside { margin-top: clamp(24px, 3.4vh, 36px); max-width: 32rem; }
#top .hero__lead {
  margin: 0;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
  color: var(--ink); /* = sage-ink on the forest surface; #000 in print */
  text-wrap: pretty;
}
/* --muted = brand-muted here, 7.99:1 on forest */
#top .hero__industries {
  margin: 10px 0 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
#top .hero__ctas {
  margin-top: clamp(20px, 3vh, 28px);
  align-items: center;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 8px;
}
#top .hero__journey { color: var(--ink); /* = sage-ink on the forest surface; #000 in print */ }

/* ---------- The wordmark: portrait + "Matthew", then "Grunewald" edge to edge ---------- */
#top .hero-wordmark {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  box-sizing: border-box;
  margin: clamp(28px, 5vh, 56px) auto 0;
  padding: 0 var(--gutter);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink); /* = sage-ink on the forest surface; #000 in print */
  white-space: nowrap;
}
#top .hero-wordmark__inner { display: block; }
#top .hero-wordmark__first {
  display: flex;
  align-items: center;
  gap: 14px;
  /* clear of the giant word's cap height (its line box is only .8em tall) */
  /* the giant G overshoots its .8em line box by ~.11em, so the clearance scales with the word */
  margin: 0 0 calc((min(100cqi, var(--container-max)) - 2 * var(--gutter)) / 4.78 * .11 + 12px) .06em;
  font-size: var(--t-h3);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  color: var(--muted);
}
#top .hero-wordmark__portrait {
  flex: none;
  width: 56px;
  height: 62px;
  object-fit: cover;
  border-radius: var(--r-lg);
  filter: grayscale(.15);
}
@media (min-width: 768px) {
  #top .hero-wordmark__portrait { width: 88px; height: 98px; }
}
/* phones: the complete word stays on the first screen */
@media (max-width: 767.98px) {
  #top .hero-wordmark { margin-top: clamp(16px, 3vh, 28px); }
  #top .hero-wordmark__first { margin-bottom: 14px; }
}
/* short phones (iPhone SE and smaller): tighter steps so the whole name still makes the first screen */
@media (max-width: 767.98px) and (max-height: 700px) {
  #top.hero { padding-top: calc(var(--header-h) + 12px); }
  #top .hero__statement { font-size: 2.25rem; }
  #top .hero__lead { font-size: 1.0625rem; }
  #top .hero__aside { margin-top: 18px; }
  #top .hero__ctas { margin-top: 16px; }
  #top .hero-wordmark { margin-top: 14px; }
}
/* "Grunewald" advances about 4.73em in Newsreader (measured at 227px with the -.03em
   tracking): /4.78 keeps a hair of safety, so the word ends just inside the right gutter
   at every width (min() caps it at the container max on very wide screens). It has no
   descenders, so line-height .8 keeps its baseline inside the hero. */
#top .hero-wordmark__last {
  display: block;
  font-size: calc((min(100cqi, var(--container-max)) - 2 * var(--gutter)) / 4.78);
  line-height: .8;
  letter-spacing: var(--ls-wordmark);
  margin: 0;
}

/* Letter lift (signature 5): the letter under the pointer rises, its
   neighbours follow a little, and the lifted letter turns ember. */
#top .hero-wordmark__char {
  display: inline-block;
  transition: translate .7s var(--ease-out), color .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.reduced-motion) #top .hero-wordmark__char:hover {
    translate: 0 -.12em;
    color: var(--accent-on-brand);
    transition: translate .55s var(--ease-spring), color .25s var(--ease-out);
  }
  html:not(.reduced-motion) #top .hero-wordmark__char:hover + .hero-wordmark__char,
  html:not(.reduced-motion) #top .hero-wordmark__char:has(+ .hero-wordmark__char:hover) {
    translate: 0 -.06em;
    transition: translate .6s var(--ease-spring);
  }
  html:not(.reduced-motion) #top .hero-wordmark__char:hover + .hero-wordmark__char + .hero-wordmark__char,
  html:not(.reduced-motion) #top .hero-wordmark__char:has(+ .hero-wordmark__char + .hero-wordmark__char:hover) {
    translate: 0 -.022em;
    transition: translate .65s var(--ease-spring);
  }
}

/* >=1024: statement top-left (8 columns), lead + CTAs bottom-right (4 columns) */
@media (min-width: 1024px) {
  #top .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "copy copy copy copy copy copy copy copy aside aside aside aside";
    column-gap: var(--gap);
    align-content: stretch; /* the one row fills the hero, so the aside sits right above the name */
  }
  #top .hero__copy { grid-area: copy; align-self: start; }
  #top .hero__aside {
    grid-area: aside;
    align-self: end;
    max-width: none;
    margin-top: 0;
  }
  /* sized so "Learning that performs." holds one line in 8 columns, even with a classic
     scrollbar (vw counts it, the column does not) */
  #top .hero__statement { font-size: min(var(--t-display), 5.6vw); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  #top .hero__statement { font-size: min(var(--t-display), 5vw, 9.5vh); }
}

/* ---------- Reduced motion / forced colours / print ---------- */
@media (prefers-reduced-motion: reduce) {
  #top .hero-wordmark__char { transition: none; transform: none !important; translate: none !important; }
}
html.reduced-motion #top .hero-wordmark__char { translate: none !important; }

@media print {
  #top.hero { min-height: 0; }
}

/* ==== 12-intro.css ==== */
/* 12-intro.css (L1, v3 lean): At a glance (#intro). Scoped to #intro / .intro-* / .route*.
   V3-LEAN item 2: the label + 4 stats (count-up, evidence links on two of them,
   proof captions under three of them, v3 review HM2) and the "Seven countries"
   route line (creative signature 2), which replaces the "Worked with" marquee.
   Route: a horizontal SVG route (>=1280) joining 8 nodes (seven countries; the
   United States twice, 2001 and 2014, v3 review HM4). 12-intro.js adds
   .is-armed (hidden start) then .is-drawn when the strip is in view: the line
   draws left to right, then the nodes pop in 80ms apart. When it has played,
   JS removes both classes (the final state is the plain CSS). Below 1280 it is
   a vertical route. No JS / reduced motion: static and fully drawn. */

#intro.section {
  padding-block: clamp(48px, 5vw, 88px);
}
/* designer review (C11): the route moved into #now; its variables travel with it */
#now .route {
  --route-svg-h: 112px;  /* = the SVG viewBox height, so the arcs keep their vertical shape */
  --route-dot: 12px;
  --route-dot-y: 104px;  /* dot centre inside the SVG (the path's endpoints) */
  margin-bottom: clamp(56px, 6vw, 96px);
}

/* ---------- the Shift strip (designer review C08) ----------
   Four figures in one row at >=1024 (2 x 2 below), each a .shift (02 / 99z): a muted
   before, an ember arrow and the after; singles in ink. The .stats dividers still draw in.
   The label sits above nothing: the h2 is sr-only, so no empty label column. */
#intro .intro__proof { display: block; }
#intro .intro-stats { --stats-cols: 2; --stats-gap: clamp(32px, 3.4vw, 56px); }
@media (min-width: 1024px) {
  #intro .intro-stats { --stats-cols: 4; }
}
#intro .intro-stat { gap: 12px; }
#intro .intro-stat__label {
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
/* proof caption: the verbatim first clause behind the number */
#intro .intro-stat__proof {
  display: block;
  max-width: 22em;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* the linked figure (154K+ -> communication page): an arrow after the label and an
   underline that grows on hover/focus */
#intro .intro-stat__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
}
#intro a.intro-stat__link .intro-stat__label {
  align-self: flex-start;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
#intro a.intro-stat__link .intro-stat__label::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .4em;
  vertical-align: -.02em;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
#intro a.intro-stat__link:hover .intro-stat__label,
#intro a.intro-stat__link:focus-visible .intro-stat__label { background-size: 100% 1px; }
#intro a.intro-stat__link:hover .intro-stat__label::after,
#intro a.intro-stat__link:focus-visible .intro-stat__label::after { transform: translateX(3px); }
/* ---------- route: shared ---------- */
/* designer review (C11): the route heads the Journey chapter (no top rule; the section
   hairline separates it) */
#now .route {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#now .route__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 32px;
}
/* the chapter heading: section-head size (it is the h2 of #now) */
#now .route__title {
  margin: 0 0 clamp(28px, 3vw, 48px);
  max-width: 18em;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  text-wrap: balance;
}
#now .route__title:focus { outline: none; }
#now .route__film { flex: none; }

#now .route__map { position: relative; margin-top: clamp(20px, 2.6vw, 36px); }
#now .route__list { margin: 0; padding: 0; list-style: none; }
#now .route__stop { position: relative; }
#now .route__node {
  position: relative;
  display: block;
  min-height: var(--tap);
  color: inherit;
  text-decoration: none;
  outline: none;
}
#now .route__body {
  display: grid;
  gap: 2px 14px;
  border-radius: var(--r-sm);
}
#now .route__country {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
  justify-self: start;
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
#now .route__year {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
  transition: color var(--dur-1) var(--ease-out);
}
#now .route__orgs {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

#now .route__dot {
  position: absolute;
  width: var(--route-dot);
  height: var(--route-dot);
  border-radius: 50%;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 2px var(--ink);
  transition: transform .6s var(--ease-spring), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
/* the current stop: an ember dot with a soft halo (the ring pulses twice after the draw) */
#now .route__stop--now .route__dot {
  background-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
#now .route__stop--now .route__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* hover / focus highlights the node */
#now .route__node:is(:hover, :focus-visible) .route__dot {
  transform: scale(1.45);
  background-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}
#now .route__node:is(:hover, :focus-visible) .route__country { background-size: 100% 1px; }
#now .route__node:is(:hover, :focus-visible) .route__year { color: var(--ink); }
#now .route__node:focus-visible .route__body {
  outline: 2px solid var(--ring);
  outline-offset: 6px;
}

/* ---------- vertical route (< 1280) ----------
   With 8 stops the horizontal route needs about 140px per column (the longest
   unbreakable words, "Afghanistan" and "1‑800Accountant", must fit), so it
   starts at 1280; below that the route is vertical. */
@media (max-width: 1279.98px) {
  #now .route__line { display: none; }
  #now .route__node { padding: 0 0 clamp(20px, 4vw, 28px) 34px; }
  #now .route__stop:last-child .route__node { padding-bottom: 0; }
  #now .route__dot { left: 0; top: 7px; }
  /* country and year on one line, the organisations under them */
  #now .route__body { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  #now .route__country { grid-column: 1; grid-row: 1; }
  #now .route__year { grid-column: 2; grid-row: 1; }
  #now .route__orgs { grid-column: 1 / -1; grid-row: 2; }
  /* the segment from this stop's dot down to the next stop's dot */
  #now .route__stop:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--route-dot) / 2 - .75px);
    top: calc(7px + var(--route-dot));
    bottom: -7px;
    width: 1.5px;
    background-color: var(--line-ui);
    transform-origin: 50% 0;
  }
}
@media (min-width: 600px) and (max-width: 1279.98px) {
  /* a fixed year column, so "2010 · 2013–14" does not push its row's organisations out of line */
  /* the country column scales down too, so at ~600px the organisations keep ~150px */
  #now .route__body { grid-template-columns: clamp(9rem, 24vw, 15rem) 8.25rem minmax(0, 1fr); column-gap: 20px; }
  #now .route__orgs { grid-column: 3; grid-row: 1; }
}

/* ---------- horizontal route (>= 1280) ---------- */
@media (min-width: 1280px) {
  #now .route__line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--route-svg-h);
    overflow: visible;
    pointer-events: none;
  }
  #now .route__path {
    fill: none;
    stroke: color-mix(in srgb, var(--ink) 55%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  /* the 2014 -> 2026 hop: the journey's present tense (ember 5.44:1 on paper) */
  #now .route__path--now { stroke: var(--accent); stroke-width: 2; }
  /* equal columns with no gap: node i sits at (i + .5) / 8 of the width,
     exactly where the path's endpoints are (87.5 + i * 175 in the 1400 viewBox) */
  #now .route__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  /* min-width 0: a long word can never widen its column and pull a dot off the path */
  #now .route__stop { display: flex; min-width: 0; }
  #now .route__node {
    flex: 1;
    min-width: 0;
    padding: calc(var(--route-svg-h) + 14px) 6px 0;
    text-align: center;
  }
  #now .route__body { justify-items: center; }
  #now .route__country { justify-self: center; background-position: 50% 100%; }
  #now .route__year { order: -1; }
  #now .route__orgs { max-width: 15em; margin-top: 2px; }
  #now .route__dot {
    left: 50%;
    top: calc(var(--route-dot-y) - var(--route-dot) / 2);
    margin-left: calc(var(--route-dot) / -2);
  }
}

/* ---------- the draw (JS + motion only) ---------- */
#now .route__stop:nth-child(2) { --i: 1; }
#now .route__stop:nth-child(3) { --i: 2; }
#now .route__stop:nth-child(4) { --i: 3; }
#now .route__stop:nth-child(5) { --i: 4; }
#now .route__stop:nth-child(6) { --i: 5; }
#now .route__stop:nth-child(7) { --i: 6; }
#now .route__stop:nth-child(8) { --i: 7; }
#now .route { --route-base: 820ms; --route-step: 80ms; }

html.js #now .route.is-armed .route__line { clip-path: inset(0 100% 0 0); }
html.js #now .route.is-armed .route__dot { transform: scale(0); }
html.js #now .route.is-armed .route__body { opacity: 0; translate: 0 10px; }
html.js #now .route.is-armed .route__stop::before { transform: scaleY(0); }

html.js #now .route.is-armed.is-drawn .route__line {
  animation: route-draw 1.25s var(--ease) both;
}
html.js #now .route.is-armed.is-drawn .route__dot {
  animation: route-pop .7s var(--ease-spring) calc(var(--route-base) + var(--i, 0) * var(--route-step)) both;
}
html.js #now .route.is-armed.is-drawn .route__body {
  animation: route-rise .7s var(--ease-out) calc(var(--route-base) + 60ms + var(--i, 0) * var(--route-step)) both;
}
html.js #now .route.is-armed.is-drawn .route__stop::before {
  animation: route-draw-y .5s var(--ease-out) calc(var(--route-base) + 120ms + var(--i, 0) * var(--route-step)) both;
}
@media (max-width: 1279.98px) {
  #now .route { --route-base: 0ms; --route-step: 110ms; }
}
/* the halo pulse on the current stop, keyed on .is-played (never removed) */
html.js #now .route.is-played .route__stop--now .route__dot::after {
  animation: route-halo 1.6s var(--ease-out) calc(var(--route-base) + 700ms + 7 * var(--route-step)) 2 both;
}

@keyframes route-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes route-draw-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes route-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
/* the scrubbed pop animates `scale`, so the dot's hover/focus transform still works */
@keyframes route-pop-s {
  from { scale: 0; }
  to { scale: 1; }
}
@keyframes route-rise {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes route-halo {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ---------- scroll-linked route (designer review: the one continuous signature) ----------
   Where scroll-driven animations exist, 12-intro.js marks the route .is-scrub instead of
   arming the one-shot draw: the line draws as the route scrolls through the viewport and
   each stop's dot lands as the line reaches it (scrolling back undraws it). Labels are never
   hidden. Horizontal route (>=1280): one view timeline on the map. Vertical (<1280): each
   segment draws as its own stop scrolls in. Reduced motion (below) keeps it static. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.reduced-motion) #now .route.is-scrub .route__map { view-timeline: --route-tl block; }
    html.js:not(.reduced-motion) #now .route.is-scrub .route__line {
      animation: route-draw linear both;
      animation-timeline: --route-tl;
      animation-range: cover 12% cover 46%;
    }
    html.js:not(.reduced-motion) #now .route.is-scrub .route__dot {
      animation: route-pop-s linear both;
      animation-timeline: --route-tl;
      animation-range: cover calc(12% + var(--i, 0) * 4.2%) cover calc(16% + var(--i, 0) * 4.2%);
    }
    @media (max-width: 1279.98px) {
      html.js:not(.reduced-motion) #now .route.is-scrub .route__dot {
        animation-timeline: view();
        animation-range: entry 30% entry 90%;
      }
      html.js:not(.reduced-motion) #now .route.is-scrub .route__stop::before {
        animation: route-draw-y linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 45%;
      }
    }
  }
}

/* ---------- reduced motion: static, fully drawn ---------- */
@media (prefers-reduced-motion: reduce) {
  #now .route__line,
  #now .route__dot,
  #now .route__dot::after,
  #now .route__body,
  #now .route__stop::before {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
  #now .route__dot::after { opacity: 0 !important; }
  #now .route__dot,
  #now .route__stop::before { transform: none !important; }
  #intro a.intro-stat__link .intro-stat__num { translate: none !important; }
}
html.reduced-motion #now .route__line,
html.reduced-motion #now .route__dot,
html.reduced-motion #now .route__body,
html.reduced-motion #now .route__stop::before {
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  translate: none !important;
}
html.reduced-motion #now .route__dot::after { animation: none !important; opacity: 0 !important; }

/* ---------- forced colours / print ---------- */
@media (forced-colors: active) {
  #now .route__path { stroke: CanvasText; }
  #now .route__dot { forced-color-adjust: none; background-color: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  #now .route__stop--now .route__dot,
  #now .route__node:is(:hover, :focus-visible) .route__dot { background-color: Highlight; box-shadow: none; }
  #now .route__stop::before { background-color: CanvasText; }
  #intro a.intro-stat__link .intro-stat__label::after { background-color: CanvasText; }
}
@media print {
  #now .route__film { display: none; }
  #now .route__line,
  #now .route__body { clip-path: none !important; opacity: 1 !important; translate: none !important; animation: none !important; }
  #now .route__dot { transform: none !important; scale: none !important; animation: none !important; }
  #now .route__stop::before { animation: none !important; transform: none !important; }
}

/* ==== 14-results.css ==== */
/* 14-results.css (designer review 2026-10-22, C09): Selected results (#results) as a ledger.
   Four featured cases (CS 1, 9, 13, 5), each one hairline row: tag + title | the figure as a
   Shift (02/99z .shift) | the verbatim result sentence. Situation / Task / Action open on
   demand in a native <details> ("How it was done"). Then "More case studies" (CS 4, 14, 10, 8)
   in the shared accordion.
   Removed from the v3 build: the sticky stacked cards, the index rail and chip row, the circled
   S/T/A steppers, the forest Result slabs and the per-row choreography. The figure still rolls
   once like an odometer (14-results.js, aria-hidden copy); reduced motion, print and no JS show
   the final value. Tokens only; both themes; forced colours; print. */

/* ---------- ledger ---------- */
#results .res-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border-top: 1px solid var(--line-strong);
}
#results .res-card {
  position: static;
  padding: clamp(28px, 3vw, 44px) 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
#results .res-card:focus { outline: none; }

#results .res-card__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "snap" "title" "fig" "text";
  row-gap: 10px;
}
#results .res-card__snap {
  grid-area: snap;
  margin: 0;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
#results .res-card__h {
  grid-area: title;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
#results .res-card__h:focus { outline: none; }
#results .res-card__title { font: inherit; letter-spacing: inherit; color: inherit; text-wrap: balance; }

#results .res-card__fig { grid-area: fig; margin-top: 8px; }
#results .res-card__fig .shift { font-size: var(--t-figure); }
/* a word figure (ILT -> VILT) is wide: one step smaller so it never crowds its column */
#results .res-card__fig .shift--words { font-size: calc(var(--t-figure) * .72); }
#results .res-card__unit {
  margin: 8px 0 0;
  max-width: 16em;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted);
}
#results .res-result__text {
  grid-area: text;
  margin: 8px 0 0;
  max-width: 34em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  #results .res-card__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "snap  snap  snap  snap  fig fig fig fig text text text text"
      "title title title title fig fig fig fig text text text text";
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    row-gap: 8px;
    align-items: start;
  }
  #results .res-card__fig { margin-top: 0; }
  #results .res-result__text { margin-top: 0; }
}

/* ---------- "How it was done" (native disclosure) ---------- */
/* inline-block + an absolutely placed sign, so only the words carry the underline */
#results .res-card__more > summary {
  position: relative;
  display: inline-block;
  margin-top: 8px;
  padding: 12px 1.6em 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  border-radius: var(--r-sm);
}
#results .res-card__more > summary::-webkit-details-marker { display: none; }
#results .res-card__more > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1em;
  margin-top: -.55em;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
#results .res-card__more[open] > summary::after { content: "\2212"; }
#results .res-card__more > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

#results .res-star {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 16px 0 0;
}
#results .res-row { margin: 0; padding: 0; border: 0; }
#results .res-row > dt {
  margin: 0 0 4px;
  min-height: 0;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
#results .res-row > dd {
  margin: 0;
  max-width: 38em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
@media (min-width: 1024px) {
  #results .res-card__more .res-star {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: 20px;
  }
}

/* ---------- odometer (built by 14-results.js on the aria-hidden figure; every glyph is a 1em cell) ---------- */
#results .odo { display: inline-flex; align-items: flex-start; line-height: 1; }
#results .odo__c {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: top;
}
#results .odo__s {
  display: block;
  transform: translateY(0);
  transition: transform var(--odo-dur, 1400ms) var(--ease-expo) var(--odo-delay, 0ms);
}
#results .odo__s > span { display: block; height: 1em; text-align: center; }
#results .is-counting .odo__s { transform: translateY(calc(var(--odo-to, 0) * -1em)); }
#results .is-counting:not(.is-settled) .odo__c {
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
}
#results .is-settled .odo__s { transition: none; }

/* the Shift arrow draws in when the card is revealed (14-results.js adds .is-revealed) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduced-motion) #results.is-armed .res-card:not(.is-revealed) .shift__arrow { transform: scaleX(0); }
  html.js:not(.reduced-motion) #results.is-armed .res-card.is-revealed:not(.is-instant) .shift__arrow {
    transition: transform .5s var(--ease-out) .15s;
  }
}

/* ---------- More case studies (CS 4, 14, 10, 8) ---------- */
#results .res-more {
  display: grid;
  gap: 16px;
  margin-top: clamp(48px, 5.5vw, 84px);
}
#results .res-more__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
@media (min-width: 1024px) {
  #results .res-more {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  #results .res-more__title { grid-column: 1 / span 4; padding-top: 18px; }
  #results .res-more__list { grid-column: 5 / -1; min-width: 0; }
}

/* ---------- reduced motion: everything at once, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  #results .odo__s { transition: none !important; }
  #results .shift__arrow { transform: none !important; transition: none !important; }
}
html.reduced-motion #results .odo__s { transition: none !important; }
html.reduced-motion #results .shift__arrow { transform: none !important; transition: none !important; }

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  #results .res-card { border-bottom: 1px solid CanvasText; }
  #results .res-card__more > summary { forced-color-adjust: auto; }
}

/* ---------- print: static and complete (every "How it was done" opens: ::details-content where
   supported, and 14-results.js opens the details on beforeprint elsewhere) ---------- */
@media print {
  #results .res-card { break-inside: avoid; }
  #results .shift__arrow { transform: none !important; }
  #results .res-card__more::details-content { content-visibility: visible; }
  #results .res-card__more > summary { display: none; }
}

/* ==== 18-communication.css ==== */
/* 18-communication.css (v3 lean, L2; v3 review R2): communication.html (#communication).
   h1 "Communication projects" (the small .sec-label look) -> lead statement (the h2)
   -> the 80% -> <5% metric card (#metric-email; sticky beside the STAR card from 1024px, CD13)
   -> CS 2 STAR (#cs-2) -> two tool tiles (Clarity & Trust, PMP: Communication Channels; .tt
   from 20-work.css).
   Everything is scoped to #communication; nothing here depends on the home-page section CSS.
   Motion (once, on reveal): the "before" bar draws to 80%, the "after" bar runs to the same
   length and then contracts to under 5% (the reduction, made visible); the STAR rows rise
   S -> T -> A -> R at 0 / 220 / 440 / 700 ms like the Results cards. Reduced motion: final
   state at once. Contrast: ink/ink-2 on --surface >= 12.7:1, muted-2 5.6:1, brand-fg 10.25:1,
   paper on forest 11.19:1, light ember on forest 6.7:1. */

#communication {
  --comms-mark: 40px;
  --comms-gap: clamp(14px, 1.4vw, 20px);
  /* the first section under the fixed header: clear the header, then breathe
     (the plain section padding left the h1 label ~15px under the header's edge) */
  padding-top: calc(var(--header-h) + clamp(32px, 4.5vw, 72px));
}

/* ---------- head: label + the lead statement ---------- */
#communication .comms-head {
  margin-bottom: clamp(36px, 4vw, 64px);
}
#communication .comms-head__title {
  max-width: 21em;
}
/* the h1 keeps the label's size: .sec-label already wins over the h1 type defaults;
   this pins the label metrics in case a later h1 rule leaks through (A11Y8) */
#communication .comms-head > h1.sec-label {
  font-size: var(--t-small);
  line-height: 1.4;
  letter-spacing: 0; /* designer review (C03): labels are quiet sentence case, untracked */
}

/* ---------- layout ---------- */
#communication .comms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--comms-gap);
}
@media (min-width: 1024px) {
  #communication .comms-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--comms-gap);
    align-items: stretch;
  }
  #communication .comms-metric { grid-column: 1 / span 5; }
  #communication .comms-case { grid-column: 6 / -1; }
  #communication .comms-builds { grid-column: 1 / -1; }
}
/* CD13: the page's one big number stays in view while the STAR card scrolls past
   (only where the card fits the viewport height; it stops at the end of its grid row) */
@media (min-width: 1024px) and (min-height: 640px) {
  #communication .comms-metric {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }
}

/* ---------- shared card surface ---------- */
#communication .comms-metric,
#communication .comms-case {
  --muted: var(--muted-2);
  min-width: 0;
  padding: clamp(22px, 2.5vw, 36px);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-hairline);
}

/* ---------- metric card ---------- */
#communication .comms-metric {
  display: flex;
  flex-direction: column;
}
#communication .comms-metric__head {
  margin: 0;
  font-weight: 500;
}
#communication .comms-metric__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.7rem + 3.4vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brand-fg);
  white-space: nowrap;
}
#communication .comms-metric__arrow { color: var(--accent); }
#communication .comms-metric__unit {
  display: block;
  margin-top: 10px;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
#communication .comms-metric__desc {
  max-width: 34em;
  margin: auto 0 0;
  padding-top: 4px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* before / after bars (decorative; the heading carries the numbers) */
#communication .comms-bars {
  display: grid;
  gap: 10px;
  margin: clamp(22px, 2.4vw, 32px) 0 clamp(20px, 2.2vw, 28px);
}
#communication .comms-bars__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 12px;
}
#communication .comms-bars__lbl {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#communication .comms-bars__val {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
#communication .comms-bars__track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}
#communication .comms-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 80%;
  border-radius: 5px;
  background-color: var(--ink);
  transform-origin: 0 50%;
}
#communication .comms-bars__row--after .comms-bars__fill {
  background-color: var(--accent);
  scale: .05625 1; /* 4.5% of the track: "under 5%" */
}
html.js #communication .comms-bars:not(.is-in) .comms-bars__fill { scale: 0 1; }
html.js #communication .comms-bars.is-in .comms-bars__row--before .comms-bars__fill {
  animation: comms-grow 1s var(--ease) .2s backwards;
}
html.js #communication .comms-bars.is-in .comms-bars__row--after .comms-bars__fill {
  animation: comms-drop 2s var(--ease) .55s backwards;
}
@keyframes comms-grow {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes comms-drop {
  0% { scale: 0 1; background-color: var(--ink); }
  38% { scale: 1 1; background-color: var(--ink); }
  52% { scale: 1 1; }
  100% { scale: .05625 1; background-color: var(--accent); }
}

/* ---------- CS 2 STAR card ---------- */
#communication .comms-case__snap {
  margin: 0 0 10px;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#communication .comms-case__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
#communication .comms-star {
  display: grid;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
}
#communication .comms-star__row {
  position: relative;
  margin: 0;
  padding: 0 0 clamp(14px, 1.6vw, 20px) calc(var(--comms-mark) + 16px);
}
#communication .comms-star__row > dt {
  display: flex;
  align-items: center;
  min-height: var(--comms-mark);
  margin: 0 0 2px;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#communication .comms-star__row > dd {
  max-width: 42em;
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
#communication .comms-star__mark {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--comms-mark);
  height: var(--comms-mark);
  border-radius: 50%;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-ui);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
/* the spine from each marker to the next row; A's runs into the Result panel */
#communication .comms-star__row:not(.comms-result)::before {
  content: "";
  position: absolute;
  left: calc(var(--comms-mark) / 2 - .5px);
  top: var(--comms-mark);
  bottom: 0;
  width: 1px;
  background-color: var(--line-strong);
}
#communication .comms-result {
  margin-top: 4px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r);
  box-shadow: var(--shadow-hairline);
}
#communication .comms-result > dt {
  min-height: 0;
  margin: 0 0 8px;
  color: var(--accent);
}
#communication .comms-result > dd {
  max-width: 34em;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem);
  line-height: 1.4;
  color: var(--ink);
}
#communication .comms-ask {
  min-height: var(--tap);
  margin-top: 14px;
}

/* S -> T -> A -> R: replaces core's 80 ms stagger with the Results timing */
html.js #communication .comms-star.is-in > * {
  animation: comms-rise 420ms var(--ease-out) var(--comms-d, 0ms) both;
}
#communication .comms-star > :nth-child(2) { --comms-d: 220ms; }
#communication .comms-star > :nth-child(3) { --comms-d: 440ms; }
#communication .comms-star > :nth-child(4) { --comms-d: 700ms; }
@keyframes comms-rise {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- the two builds ---------- */
#communication .comms-builds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--comms-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  #communication .comms-builds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#communication .comms-builds__item { display: flex; min-width: 0; }
#communication .comms-builds__item > .tt { flex: 1 1 auto; }

/* ---------- reduced motion / forced colours / print ---------- */
@media (prefers-reduced-motion: reduce) {
  #communication .comms-bars__fill { animation: none !important; }
  html.js #communication .comms-bars:not(.is-in) .comms-bars__row--before .comms-bars__fill { scale: 1 1; }
  html.js #communication .comms-bars:not(.is-in) .comms-bars__row--after .comms-bars__fill { scale: .05625 1; }
  #communication .comms-star > * { animation: none !important; opacity: 1 !important; translate: none !important; }
}
html.reduced-motion #communication .comms-bars__fill { animation: none; }
html.reduced-motion #communication .comms-star > * { animation: none; opacity: 1; translate: none; }

@media (forced-colors: active) {
  #communication .comms-metric,
  #communication .comms-case,
  #communication .comms-result { border: 1px solid CanvasText; }
  #communication .comms-bars__track { border: 1px solid CanvasText; }
  #communication .comms-bars__fill { background-color: CanvasText; }
  #communication .comms-star__mark { border: 1px solid CanvasText; }
  #communication .comms-star__row:not(.comms-result)::before { background-color: CanvasText; }
}
@media print {
  #communication .comms-bars__fill { animation: none !important; }
  #communication .comms-star > * { animation: none !important; opacity: 1 !important; translate: none !important; }
  #communication .comms-metric,
  #communication .comms-case { box-shadow: none; border: 1px solid var(--line-ui); break-inside: avoid; }
  #communication .comms-metric { position: static; }
  #communication { padding-top: 24pt; } /* the fixed header is not printed */
}

/* ==== 20-work.css ==== */
/* 20-work.css (v3 lean, L2; v3 review R2): Courses (#band-portfolio / #work) + the shared tool
   tile (.tt). The tool tile is also used on communication.html, so .tt rules are not scoped to
   #work (except the 3-line description clamp, which is home only).
   Tile = one stretched link (or button) over a PAPER card (--surface, ink text). The tool colour
   is an accent only (HM5/CD2): a 3px top bar, the coloured glyph and a 6% watermark.
   Content: tool name + format, an original animated SVG glyph, the title, the description
   (home: clamped to 3 lines, HM6), the CTA.
   Heights follow the content (A11Y2): overflow: clip is not a scroll container, so with
   min-height: auto the box grows to fit; nothing clips under zoom or text spacing. Compact
   minimums per breakpoint (HM5/CD5).
   Contrast, tool colour as glyph / top bar (non-text, >= 3:1):
     light, on surface #EFEAE1 / paper #F7F4EE: Storyline #9A3F1C 5.65 / 6.17 ·
       Rise #3F3A52 9.04 / 9.87 · Captivate #2D4654 8.28 / 9.04 · AI-assisted #2B2A27 11.97 / 13.07;
       the AI spark uses --accent (ember 5.04+).
     dark, lifted 55% toward paper, on #262A27 / #1D201E: Storyline 5.30 / 5.98 ·
       Rise 4.52 / 5.11 · Captivate 4.69 / 5.29 · AI-assisted 3.94 / 4.45.
   Text: ink on the tile >= 13:1; sub and description use --muted (>= 6:1, both themes).
   Motion: each glyph moves once per hover / keyboard focus (and once on reveal on touch
   screens, via .is-play from 20-work.js). Reduced motion: static glyphs, no lift. */

/* ---------- tool tokens (theme-constant hues; dark mode lifts them per tile) ---------- */
:root {
  --tool-storyline: #9A3F1C;
  --tool-rise: #3F3A52;      /* dusk plum (was violet #4B3F8F; CD2) */
  --tool-captivate: #2D4654; /* slate (was cobalt #1D4F91; CD2) */
  --tool-ai: #2B2A27;
}

/* ---------- section head: statement left, sub right (saves a screen-third) ---------- */
@media (min-width: 1024px) {
  #band-portfolio .work-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
    margin-bottom: clamp(32px, 3.4vw, 56px);
  }
  #band-portfolio .work-head > .sec-label { grid-column: 1 / -1; }
  #band-portfolio .work-head > h2 { grid-column: 1 / span 6; }
  #band-portfolio .work-head > .sec-sub {
    grid-column: 8 / -1;
    margin-top: 0;
    font-size: var(--t-body);
    line-height: var(--lh-text);
  }
}

/* ---------- problem groups ---------- */
#work .work-groups {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}
#work .work-group {
  display: grid;
  gap: 18px;
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--line);
}
#work .work-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
}
#work .work-group__index {
  grid-row: 1 / span 2;
  padding-top: .35em;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
#work .work-group__title {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.005em;
}
#work .work-group__sub {
  grid-column: 2;
  max-width: 34em;
  margin: 8px 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}

#work .work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
#work .work-grid__item { display: flex; min-width: 0; }
#work .work-grid__item > .tt { flex: 1 1 auto; min-width: 0; }

@media (min-width: 560px) {
  #work .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 560-899: an odd last tile takes the whole row, so the 3-tile group ends flush (CD5) */
@media (min-width: 560px) and (max-width: 899.98px) {
  #work .work-grid > .work-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  #work .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* CD5: a 2-tile group fills its row instead of leaving an empty third slot
   (own rule, so an engine without :has() only loses this one) */
@media (min-width: 900px) {
  #work .work-grid:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* >=1180: the problem on the left, the tools to its right (one row per group) */
@media (min-width: 1180px) {
  #work .work-group {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 3fr);
    column-gap: clamp(24px, 2.6vw, 44px);
    align-items: start;
  }
}

#work .work-tm {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- the tool tile ---------- */
.tt {
  --tt-tool: var(--tool-ai);
  --tt-accent: var(--tt-tool);
  --tt-pad: clamp(18px, 1.6vw, 26px);
  --tt-glyph: clamp(44px, 3.6vw, 56px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* v3 review (vis-02): the flexible spacer sits under the description, so titles share one
     line across a row and the CTAs keep the bottom line (the 12px title margin replaces the
     old 12px spacer minimum) */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "tool glyph"
    "title title"
    "desc desc"
    ". ."
    "cta cta";
  aspect-ratio: 3 / 2;
  min-height: auto;
  padding: var(--tt-pad);
  overflow: hidden; /* fallback for engines without overflow: clip (see @supports below) */
  overflow: clip;   /* A11Y2: clips the watermark without becoming a scroll container */
  border-radius: 16px;
  background-color: var(--surface);
  box-shadow: inset 0 3px 0 var(--tt-accent), var(--shadow-hairline);
  color: var(--ink);
  text-align: left;
  transition:
    translate .6s var(--ease-out),
    box-shadow .6s var(--ease-out);
}
/* without overflow: clip the fixed ratio could clip content again, so drop it */
@supports not (overflow: clip) {
  .tt { aspect-ratio: auto; }
}
.tt--storyline { --tt-tool: var(--tool-storyline); }
.tt--rise { --tt-tool: var(--tool-rise); }
.tt--captivate { --tt-tool: var(--tool-captivate); }
.tt--ai { --tt-tool: var(--tool-ai); }
/* dark: lift the accent toward paper so bar, glyph and watermark keep >= 3:1 (see header) */
:root[data-theme="dark"] .tt {
  --tt-accent: color-mix(in srgb, var(--tt-tool) 55%, var(--brand-ink));
}
:root[data-theme="dark"] .tt__mark { opacity: .035; }

.tt__tool {
  grid-area: tool;
  display: grid;
  gap: 2px;
  align-content: start;
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.35;
  color: inherit;
}
.tt__name {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.tt__sub {
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--muted);
}

.tt__title {
  grid-area: title;
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .55vw, 1.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: inherit;
  text-wrap: balance;
}

/* description: one sentence per home tile, never clamped (v3 length pass: the 3-line clamp
   cut sentences mid-thought in the three-up row; the cut sentences live on the courses) */
.tt__desc {
  grid-area: desc;
  max-width: 34em;
  margin: 8px 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- tile sizes (compact; the content always wins over the minimum) ---------- */
/* .tt--wide (communication.html): a wider, flatter tile */
.tt--wide { aspect-ratio: 5 / 2; }
@media (max-width: 767.98px) {
  .tt--wide { aspect-ratio: auto; min-height: 168px; }
}
/* v3 review (rsp-1/rsp-2): from 560px, not 900px. Between them the 3:2 ratio's automatic
   minimum width beat the grid column, so tiles overlapped, clipped and widened the page */
@media (min-width: 560px) {
  .tt,
  .tt--wide { aspect-ratio: auto; min-height: 168px; }
}
@media (min-width: 1180px) {
  #work .tt { min-height: 184px; } /* every tile in a row shares one height (CD5) */
}
/* phones: glyph beside tool + title, no spacer row (about 1,000px for the 7 tiles' frame) */
@media (max-width: 559.98px) {
  .tt,
  .tt--wide {
    --tt-glyph: 36px;
    aspect-ratio: auto;
    min-height: 0;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "tool glyph"
      "title glyph"
      "desc desc"
      "cta cta";
  }
  .tt > .tt__title { margin-top: 10px; }
  .tt > .tt__mark { width: 44%; bottom: -24%; } /* beats the base .tt__mark rule further down */
}
.tt__flow {
  display: block;
  margin-bottom: 2px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* The CTA is the tile's one link/button; its ::before stretches over the whole tile. */
.tt__cta {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 10px;
  padding: 0 0 3px;
  border: 0;
  background: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  color: inherit;
  font: 500 var(--t-small) / 1.35 var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-size .6s var(--ease-out);
}
.tt__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.tt__cta::after {
  content: "";
  flex: none;
  width: .8em;
  height: .8em;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-ne) center / contain no-repeat;
  mask: var(--icon-arrow-ne) center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.tt__cta--play::after {
  width: .7em;
  height: .7em;
  -webkit-mask-image: var(--icon-play);
  mask-image: var(--icon-play);
}

/* keyboard: the ring goes round the whole tile */
@supports selector(:has(a)) {
  .tt:has(.tt__cta:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }
  .tt .tt__cta:focus-visible { outline: none; }
}

/* glyph */
.tt__glyph {
  grid-area: glyph;
  width: var(--tt-glyph);
  height: var(--tt-glyph);
  margin: -4px -4px 0 12px;
  overflow: visible;
  color: var(--tt-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt__glyph .g-solid { fill: currentColor; stroke: none; }
.tt__glyph .g-br { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tt__glyph .g-dec,
.tt__glyph .g-end,
.tt__glyph .g-blk,
.tt__glyph .g-chev,
.tt__glyph .g-ripple,
.tt__glyph .g-spark,
.tt__glyph .g-brace,
.tt__glyph .g-play,
.tt__glyph .g-scrub {
  transform-box: fill-box;
  transform-origin: center;
}
.tt__glyph .g-ptr {
  fill: currentColor;
  stroke: var(--surface); /* the card colour: cuts the pointer out of the screen outline */
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 0 0;
}
.tt__glyph .g-ripple { opacity: 0; stroke-width: 2; }
.tt__glyph .g-spark { fill: var(--accent); stroke: none; }

/* watermark: the same glyph, oversized, 6% of the tool accent (CD2) */
.tt__mark {
  position: absolute;
  z-index: -1;
  /* v3 review (vis-04): capped, so 2-up and wide tiles keep a corner watermark instead of a
     shape behind the title and description */
  right: -4%;
  bottom: -16%;
  width: min(52%, 168px);
  aspect-ratio: 1;
  background-color: var(--tt-accent);
  opacity: .05;
  pointer-events: none;
  -webkit-mask: var(--tt-mark) center / contain no-repeat;
  mask: var(--tt-mark) center / contain no-repeat;
  transition: translate .9s var(--ease-out);
}
.tt--storyline { --tt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='32' r='4' fill='%23000'/%3E%3Cpath d='M12 32H19.5M26 25.5L32.5 32L26 38.5L19.5 32ZM32.5 32C41 32 39 15 47.5 15M32.5 32C41 32 39 49 47.5 49'/%3E%3Ccircle cx='53' cy='15' r='5'/%3E%3Ccircle cx='53' cy='49' r='5'/%3E%3C/svg%3E"); }
.tt--rise { --tt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='45' width='38' height='11' rx='3'/%3E%3Crect x='13' y='31' width='38' height='11' rx='3'/%3E%3Crect x='13' y='17' width='38' height='11' rx='3' fill='%23000'/%3E%3Cpath d='M24 10.5L32 4.5L40 10.5'/%3E%3C/svg%3E"); }
.tt--captivate { --tt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='9' width='44' height='31' rx='3.5'/%3E%3Cpath d='M21 48H33M27 40V48'/%3E%3Cpath d='M37 27V49.5L42.6 44.4L46.4 53L50.4 51.2L46.6 42.8H54Z' fill='%23000'/%3E%3C/svg%3E"); }
.tt--ai { --tt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 11C13 11 14 19 14 25C14 29 12 32 8.5 32C12 32 14 35 14 39C14 45 13 53 19 53M45 11C51 11 50 19 50 25C50 29 52 32 55.5 32C52 32 50 35 50 39C50 45 51 53 45 53'/%3E%3Cpath d='M32 19.5C33 27.5 36.5 31 44.5 32C36.5 33 33 36.5 32 44.5C31 36.5 27.5 33 19.5 32C27.5 31 31 27.5 32 19.5Z' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.tt--video { --tt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='10' width='52' height='34' rx='4'/%3E%3Cpath d='M27.5 19.5L40 27L27.5 34.5Z' fill='%23000'/%3E%3Cpath d='M6 54H58'/%3E%3Ccircle cx='18' cy='54' r='3' fill='%23000'/%3E%3C/svg%3E"); }

/* ---------- hover / focus: lift, CTA underline, watermark drift ---------- */
@media (hover: hover) {
  .tt:hover {
    translate: 0 -4px;
    box-shadow: inset 0 3px 0 var(--tt-accent), var(--shadow-lift);
  }
  .tt:hover .tt__cta {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
  .tt:hover .tt__cta::after { transform: translate(2px, -2px); }
  .tt:hover .tt__cta--play::after { transform: translateX(3px); }
  .tt:hover .tt__mark { translate: -8px -6px; }
}
.tt__cta:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* ---------- glyph motion (once per hover / focus / touch reveal) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Storyline: the decision turns, then the path branches and each end lands */
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-dec {
    animation: tt-turn .5s var(--ease) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-br--a {
    animation: tt-draw .55s var(--ease-out) .18s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-br--b {
    animation: tt-draw .55s var(--ease-out) .32s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-end--a {
    animation: tt-pop .45s var(--ease-out) .62s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-end--b {
    animation: tt-pop .45s var(--ease-out) .76s both;
  }

  /* Rise: the blocks drop in and stack, bottom first; the chevron lifts */
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-blk--1 {
    animation: tt-drop .5s var(--ease-out) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-blk--2 {
    animation: tt-drop .5s var(--ease-out) .12s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-blk--3 {
    animation: tt-drop .5s var(--ease-out) .24s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-chev {
    animation: tt-lift .7s var(--ease-out) .3s both;
  }

  /* Captivate: the pointer moves in, presses, and the click ripples out */
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-ptr {
    animation: tt-press .8s var(--ease-out) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-ripple {
    animation: tt-ripple .8s var(--ease-out) both;
  }

  /* AI-assisted: the spark pulses inside the braces; the small spark twinkles */
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-spark:not(.g-spark--sm) {
    animation: tt-pulse .9s var(--ease-out) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-spark--sm {
    animation: tt-twinkle .9s var(--ease-out) .15s both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-brace--l {
    animation: tt-open-l .9s var(--ease-out) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-brace--r {
    animation: tt-open-r .9s var(--ease-out) both;
  }

  /* Video: the play mark pulses and the scrubber runs along the timeline */
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-play {
    animation: tt-pulse .8s var(--ease-out) both;
  }
  html:not(.reduced-motion) :is(.tt:hover, .tt:focus-within, .tt.is-play) .g-scrub {
    animation: tt-scrub 1.1s var(--ease) .1s both;
  }
}

@keyframes tt-turn { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes tt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tt-pop {
  from { scale: 0; }
  60% { scale: 1.25; }
  to { scale: 1; }
}
@keyframes tt-drop {
  from { translate: 0 -14px; opacity: 0; }
  70% { translate: 0 1.5px; opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes tt-lift {
  0%, 30% { translate: 0 0; }
  65% { translate: 0 -4px; }
  100% { translate: 0 0; }
}
@keyframes tt-press {
  0% { translate: 6px 6px; scale: 1; }
  38% { translate: 0 0; scale: 1; }
  52% { scale: .82; }
  70% { scale: 1.04; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes tt-ripple {
  0%, 48% { opacity: 0; scale: .3; }
  58% { opacity: 1; }
  100% { opacity: 0; scale: 1.8; }
}
@keyframes tt-pulse {
  0% { scale: 1; }
  30% { scale: 1.3; }
  55% { scale: .92; }
  78% { scale: 1.06; }
  100% { scale: 1; }
}
@keyframes tt-twinkle {
  0% { opacity: 1; scale: 1; }
  35% { opacity: .15; scale: .4; }
  70% { opacity: 1; scale: 1.25; }
  100% { opacity: 1; scale: 1; }
}
@keyframes tt-open-l { 0%, 100% { translate: 0 0; } 40% { translate: -2.5px 0; } }
@keyframes tt-open-r { 0%, 100% { translate: 0 0; } 40% { translate: 2.5px 0; } }
@keyframes tt-scrub {
  from { translate: 0 0; }
  70% { translate: 24px 0; }
  to { translate: 22px 0; }
}

/* ---------- reduced motion: no lift, no drift ---------- */
@media (prefers-reduced-motion: reduce) {
  .tt, .tt__mark, .tt__cta, .tt__cta::after { transition: none; }
  .tt:hover { translate: none; }
  .tt:hover .tt__mark { translate: none; }
}
html.reduced-motion .tt:hover,
html.reduced-motion .tt:hover .tt__mark { translate: none; }

/* ---------- forced colours / print ---------- */
@media (forced-colors: active) {
  .tt { border: 1px solid CanvasText; }
  .tt__mark { display: none; }
  .tt__cta::after { background-color: CanvasText; }
  .tt__glyph .g-spark { fill: CanvasText; }
  .tt__glyph .g-ptr { stroke: Canvas; }
}
@media print {
  .tt {
    aspect-ratio: auto;
    min-height: 0;
    border: 1px solid var(--line-ui);
    background: none !important;
    box-shadow: none;
    color: var(--ink);
    break-inside: avoid;
  }
  .tt__glyph, .tt__mark { display: none; }
}

/* ==== 30-approach.css ==== */
/* 30-approach.css (L1, v3 lean): Approach (#band-pov).
   V3-LEAN item 4: h2 + the four manifesto lines as the custo auto-advancing numbered
   list (creative signature 5) + the sig line. No photo.
   The pause/play button carries a ring that fills with the active row's timer
   (same --num-dur), so the control shows what it controls. The list pauses on hover,
   focus inside, the button, or when offscreen (30-approach.js). Reduced motion: no
   auto-advance, every row ink, no button (02-components.css + below). */

#band-pov .pov-grid { align-items: start; row-gap: clamp(28px, 4vw, 48px); }
#band-pov .pov-head { min-width: 0; }
#band-pov .pov-head__inner { display: grid; justify-items: start; gap: clamp(16px, 1.6vw, 24px); }
#band-pov .pov-head .sec-label { margin: 0; }
#band-pov .pov-title { margin: 0; max-width: 9em; }
#band-pov .pov-title:focus { outline: none; }
@media (min-width: 1024px) {
  #band-pov .pov-head__inner { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* the list: Newsreader manifesto lines, one active at a time */
#band-pov .pov-body { min-width: 0; }
#band-pov .pov-list { --num-dur: 6s; }
#band-pov .pov-list .num-list__item { padding-block: clamp(22px, 2.4vw, 34px); }
#band-pov .pov-list .num-list__item:first-child { padding-top: 0; }
#band-pov .pov-list .num-list__index { padding-top: .5em; }
/* v3 review (CD9): a fixed 3.5rem index column (not 1fr of 7fr), so "01" sits next to its
   line and the sig's padding-left (3.5rem + gap) lands exactly on the text column */
@media (min-width: 768px) {
  #band-pov .pov-list .num-list__item { grid-template-columns: 3.5rem minmax(0, 1fr); }
}
#band-pov .pov-list .num-list__text {
  margin: 0;
  max-width: 30em;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.01em;
  outline: none;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  html.js #band-pov .pov-list .num-list__item:not(.is-active) .num-list__text { cursor: pointer; }
}

/* v3 review (HM14): the clearest claim of building a function, set in display italic, ink */
#band-pov .pov-sig {
  position: relative;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding-left: calc(3.5rem + var(--gap));
  max-width: calc(30em + 3.5rem + var(--gap));
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
#band-pov .pov-sig::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 2rem;
  height: 1px;
  background-color: var(--accent);
}
@media (max-width: 767.98px) {
  #band-pov .pov-sig { padding-left: calc(3rem + var(--gap)); }
}

/* pause / play with a timer ring */
@property --pov-p {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#band-pov .pov-toggle svg { width: 20px; height: 20px; }
#band-pov .pov-toggle .pov-toggle__play { display: none; }
/* .is-paused (set by 30-approach.js; v3 review A11Y7: no aria-pressed, the label names the action) */
#band-pov .pov-toggle.is-paused .pov-toggle__play { display: block; }
#band-pov .pov-toggle.is-paused .pov-toggle__pause { display: none; }
#band-pov .pov-toggle__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) var(--pov-p), color-mix(in srgb, var(--ink) 12%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
@keyframes pov-ring {
  from { --pov-p: 0deg; }
  to { --pov-p: 360deg; }
}
#band-pov .pov-toggle.is-ticking .pov-toggle__ring { animation: pov-ring var(--num-dur, 6s) linear both; }
#band-pov .pov-grid:has(.pov-list:is(:hover, :focus-within, .is-paused)) .pov-toggle__ring { animation-play-state: paused; }
#band-pov .pov-toggle.is-paused .pov-toggle__ring { animation-play-state: paused; }
#band-pov .pov-head { --num-dur: 6s; }

@media (prefers-reduced-motion: reduce) {
  #band-pov .pov-toggle { display: none !important; }
}
html.reduced-motion #band-pov .pov-toggle { display: none !important; }

@media (forced-colors: active) {
  #band-pov .pov-toggle__ring { display: none; }
  #band-pov .pov-sig::before { background-color: CanvasText; }
}
@media print {
  #band-pov .pov-toggle { display: none !important; }
}

/* ==== 32-people.css ==== */
/* 32-people.css (L1, v3 lean): Facilitation (#band-people).
   Three columns trimmed to the strongest entries (V3-LEAN item 5); one column below 900px. */
#band-people .people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 56px);
}
@media (max-width: 900px) {
  #band-people .people-grid { grid-template-columns: minmax(0, 1fr); }
}
#band-people .people-col { min-width: 0; }
#band-people .people-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
#band-people .people-col__index {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
#band-people .people-col__icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#band-people .people-col__title {
  margin: 20px 0 6px;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  outline: none;
}
#band-people .people-list { margin: 0; padding: 0; list-style: none; }
#band-people .people-list li {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
}
#band-people .people-list li:last-child { border-bottom: 0; padding-bottom: 0; }
#band-people .people-list b {
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
@media (forced-colors: active) {
  #band-people .people-col__head { border-bottom-color: CanvasText; }
}

/* ==== 34-build.css ==== */
/* 34-build.css (v3 lean, L2; v3 review R2): AI in practice (#band-build).
   The dark forest panel: intro (label, h2, sub, "Try the assistant") beside the pull quote,
   then three cards (the middle one, Enterprise AI Rollout, links to CS 14).
   #build-now moved to now.html (L1); nothing of it is styled here.
   Panel text uses the dark-surface tokens (01-base): ink 11.19:1, muted 7.99:1, ember 6.7:1.
   CD10: the two columns are top-aligned and the quote's rule lines up with the h2. */

#band-build {
  padding-block: clamp(16px, 2vw, 24px);
}
#band-build .build-panel {
  padding-block: clamp(56px, 7.5vw, 120px);
}

/* ---------- intro + pull quote ---------- */
#band-build .build-top {
  display: grid;
  gap: clamp(36px, 4vw, 64px);
}
@media (min-width: 1024px) {
  #band-build .build-top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
}
#band-build .build-intro .btn-pair { margin-top: clamp(24px, 3vw, 40px); }
/* the grid gap and the cards' top margin do the spacing; the sec-head's own bottom margin
   stacked on top of them left ~150px of empty forest under the button */
#band-build .build-intro { margin-bottom: 0; }

#band-build .build-quote {
  margin: 0;
  padding: clamp(20px, 2vw, 28px) 0 0;
  border-top: 1px solid var(--line);
}
#band-build .build-quote p {
  max-width: 14em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  /* label height (14px x 1.4) + its bottom margin (99-polish), so the rule meets the h2 */
  #band-build .build-quote { margin-top: calc(var(--t-micro) * 1.4 + clamp(16px, 1.6vw, 24px)); }
}

/* ---------- three cards ---------- */
#band-build .build-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px);
  margin: clamp(48px, 6vw, 96px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  #band-build .build-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#band-build .build-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
#band-build .build-card__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#band-build .build-card__dot { fill: var(--accent); stroke: none; }
#band-build .build-card__title {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
}
#band-build .build-card__text {
  max-width: 34em;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
}
#band-build .build-card__link { justify-self: start; }

@media (forced-colors: active) {
  #band-build .build-card__icon { stroke: CanvasText; }
  #band-build .build-card__dot { fill: CanvasText; }
}

/* ==== 50-experience.css ==== */
/* 50-experience.css (v3 lean, L2; v3 review R2): Experience (#band-experience).
   No tabs. A 9-row career timeline (the shared .acc accordion from 02-components.css, with a
   spine and one dot per row) and one credentials line. Each row reads years · organisation
   (.acc__title, the emphasis) · role and location (.acc__sub) (HM7). Career body styles are
   repeated here (scoped) so the section does not depend on 52-cases.css. Tokens only; both themes.
   Motion: the spine draws top to bottom and the dots land in turn when the timeline first
   enters view (50-experience.js adds .exp-tl--drawn); an open row's dot turns ember.
   Reduced motion / no IntersectionObserver: drawn at once. */

#band-experience {
  --exp-dot: 9px;
  --exp-rail: 30px;
}

/* ---------- timeline ---------- */
#band-experience .exp-tl {
  --acc-meta-w: 8.75rem;
  position: relative;
}
/* the spine */
#band-experience .exp-tl::before {
  content: "";
  position: absolute;
  left: calc(var(--exp-dot) / 2 - .5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-strong) 32px, var(--line-strong) calc(100% - 32px), transparent);
  transform-origin: 50% 0;
  transition: scale 1.6s var(--ease);
  pointer-events: none;
}
html.js #band-experience .exp-tl:not(.exp-tl--drawn)::before { scale: 1 0; }

#band-experience .exp-tl .acc__btn {
  position: relative;
  padding-left: var(--exp-rail);
}
/* one dot per row, on the spine */
#band-experience .exp-tl .acc__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--exp-dot);
  height: var(--exp-dot);
  margin-top: calc(var(--exp-dot) / -2);
  border-radius: 50%;
  background-color: var(--line-ui);
  transition:
    background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    scale var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  #band-experience .exp-tl .acc__btn:hover::before { background-color: var(--ink); }
}
#band-experience .exp-tl .acc__btn[aria-expanded="true"]::before {
  background-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
  scale: 1.2;
}

html.js #band-experience .exp-tl:not(.exp-tl--drawn) .acc__btn::before { opacity: 0; }
#band-experience .exp-tl.exp-tl--drawn .acc__btn::before {
  animation: exp-dot-in .5s var(--ease-out) var(--exp-d, 0ms) backwards;
}
#band-experience .exp-tl > .acc__item:nth-child(2) { --exp-d: 160ms; }
#band-experience .exp-tl > .acc__item:nth-child(3) { --exp-d: 320ms; }
#band-experience .exp-tl > .acc__item:nth-child(4) { --exp-d: 480ms; }
#band-experience .exp-tl > .acc__item:nth-child(5) { --exp-d: 640ms; }
#band-experience .exp-tl > .acc__item:nth-child(6) { --exp-d: 800ms; }
#band-experience .exp-tl > .acc__item:nth-child(7) { --exp-d: 960ms; }
#band-experience .exp-tl > .acc__item:nth-child(8) { --exp-d: 1120ms; }
#band-experience .exp-tl > .acc__item:nth-child(n+9) { --exp-d: 1280ms; }
@keyframes exp-dot-in {
  from { opacity: 0; scale: 0; }
  to { opacity: 1; scale: 1; }
}

#band-experience .exp-tl .acc__meta {
  white-space: nowrap;
}
#band-experience .exp-tl .acc__title {
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  line-height: 1.3;
}

/* panel content under the title */
#band-experience .exp-tl .acc__inner { padding-inline-start: var(--exp-rail); }
@media (min-width: 768px) {
  #band-experience .exp-tl .acc__inner {
    padding-inline-start: calc(var(--exp-rail) + var(--acc-meta-w) + var(--acc-gap));
  }
}

/* >=1024: one line per row: years · organisation · role and location (the longer of the two) */
@media (min-width: 1024px) {
  #band-experience .exp-tl .acc__btn {
    grid-template-columns: var(--acc-meta-w) minmax(0, 1fr) minmax(0, 1.3fr) auto;
    grid-template-areas: "meta title sub icon";
    padding-block: clamp(16px, 1.5vw, 22px);
  }
  #band-experience .exp-tl .acc__sub {
    margin-top: 0;
    padding-right: 8px;
  }
}

/* career body (verbatim text, store / program links) */
#band-experience .car-body {
  max-width: 46em;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
#band-experience .car-body p { margin: 0; }
#band-experience .car-body p + p { margin-top: 1em; }
#band-experience .car-body b { color: var(--ink); font-weight: 600; }
#band-experience .car-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 20px;
}
#band-experience .car-links .link-arrow { min-height: var(--tap); }

/* ---------- credentials line ---------- */
#band-experience .exp-creds {
  display: grid;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 64px);
}
@media (min-width: 768px) {
  #band-experience .exp-creds {
    grid-template-columns: calc(var(--exp-rail) + 8.75rem) minmax(0, 1fr);
    column-gap: clamp(16px, 2.4vw, 40px);
    align-items: baseline;
  }
}
#band-experience .exp-creds__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#band-experience .exp-creds__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
}
/* CD11: every item carries a 1.1em left margin and the list is pulled left by the same amount,
   so each line starts flush; the separator dot sits absolutely in that margin (baselines stay
   aligned), and a dot that lands at the start of a wrapped line falls into the clipped gutter. */
#band-experience .exp-creds__list {
  margin-left: -1.1em;
  clip-path: inset(-.5em 0 -.5em 1.1em);
}
#band-experience .exp-creds__list > li {
  position: relative;
  display: inline;
  margin-left: 1.1em;
}
/* separators are drawn, not typed, so nothing extra is announced */
#band-experience .exp-creds__list > li + li::before {
  content: "";
  position: absolute;
  left: -.68em;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0;
  border-radius: 50%;
  background-color: var(--accent);
}

/* phones (v3 review rsp-5): the organisation and the role line run the full row width; the
   +/x icon shares the years line, so nine closed rows no longer take ~2.6 screens */
@media (max-width: 767.98px) {
  #band-experience { --exp-rail: 22px; }
  #band-experience .exp-tl .acc__btn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "meta icon"
      "title title"
      "sub sub";
    padding-block: 16px;
  }
  #band-experience .exp-tl .acc__icon { align-self: start; width: 32px; height: 32px; }
}

/* ---------- reduced motion / forced colours / print ---------- */
@media (prefers-reduced-motion: reduce) {
  #band-experience .exp-tl::before { scale: 1 1 !important; transition: none; }
  #band-experience .exp-tl .acc__btn::before { opacity: 1 !important; animation: none !important; transition: none; }
}
html.reduced-motion #band-experience .exp-tl::before { scale: 1 1; }
html.reduced-motion #band-experience .exp-tl .acc__btn::before { opacity: 1; animation: none; }

@media (forced-colors: active) {
  #band-experience .exp-tl::before { background: CanvasText; }
  #band-experience .exp-tl .acc__btn::before,
  #band-experience .exp-creds__list > li + li::before { background-color: CanvasText; }
  #band-experience .exp-tl .acc__btn[aria-expanded="true"]::before { background-color: Highlight; }
}
@media print {
  #band-experience .exp-tl::before { scale: 1 1 !important; }
  #band-experience .exp-tl .acc__btn::before { opacity: 1 !important; animation: none !important; }
}

/* ==== 52-cases.css ==== */
/* 52-cases.css (L1, v3 lean): shared accordion content for the career entries (.car-*)
   and "More case studies" (.cs-*). Tokens only; both themes.
   Removed in v3 (markup gone): level badges, before/after schematics, the "Your call"
   scenario and the mindful minute. */

/* ---------- shared panel content ---------- */
.car-acc .acc__inner > *,
.cs-acc .acc__inner > * {
  /* room for focus rings inside the clipped .acc__inner */
  margin-inline: 4px;
}

/* ---------- career entries (parts/career.html) ---------- */
.car-body {
  max-width: 46em;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.car-body p { margin: 0; }
.car-body p + p { margin-top: 1em; }
.car-body b { color: var(--ink); font-weight: 600; }
.car-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 24px;
}

.car-ask,
.cs-ask { margin-top: 24px; }
.car-links .link-arrow,
.car-ask,
.cs-ask { min-height: var(--tap); }

/* ---------- case-study row: the org tag ---------- */
.cs-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* ---------- STAR grid (More case studies) ---------- */
.cs-star {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0;
}
.cs-star:focus { outline: none; }
.cs-star__row {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cs-star dt {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.cs-star dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
/* the Result row reads as the payoff: an ink rule and ink text */
.cs-star__row--r { border-top-color: var(--ink); }
.cs-star__row--r dt { color: var(--accent); }
.cs-star__row--r dd { color: var(--ink); }

@media (min-width: 768px) {
  .cs-star { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (min-width: 1180px) {
  .cs-star { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (forced-colors: active) {
  .cs-star__row--r { border-top-color: CanvasText; }
}

/* ==== 80-praise.css ==== */
/* ==========================================================================
   80-praise.css (B9; v3 lean, L1; v3 review R2): Praise  #band-recommendations > #testimonials
   <1024px: one-at-a-time scroll-snap slider. >=1024px (HM10): the first card
   (Wells Rutland, the one quote about leading instructors) spans the full
   width on forest, quote beside its attribution; the three Apple quotes sit
   in a 3-up row below at body size.
   ========================================================================== */

#band-recommendations .praise-slider { position: relative; }

/* ---------- track: slider (mobile/tablet) ---------- */
#band-recommendations .praise-track {
  display: flex;
  gap: var(--gap, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
}
#band-recommendations .praise-track::-webkit-scrollbar { display: none; }
#band-recommendations .praise-track:focus-visible { outline-offset: 4px; }

#band-recommendations .praise-card {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--surface);
}
#band-recommendations .praise-card:focus { outline: none; }
#band-recommendations .praise-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

#band-recommendations .praise-card__mark {
  display: block;
  height: .55em;
  font-size: clamp(4rem, 6vw, 6rem);
  line-height: 1;
  font-weight: 500;
  color: var(--muted-2);
}

#band-recommendations .praise-card__quote {
  margin: 0;
  flex: 1;
}
#band-recommendations .praise-card__quote p {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

#band-recommendations .praise-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
#band-recommendations .praise-card__name { color: var(--ink); font-weight: 500; }

/* ---------- controls ---------- */
#band-recommendations .praise-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
#band-recommendations .praise-count {
  min-width: 5.5em;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#band-recommendations .praise-count__cur { color: var(--ink); }
#band-recommendations .praise-arrow[aria-disabled="true"] { opacity: .4; cursor: default; }
/* no JS: arrows do nothing, the track still scrolls */
html:not(.js) #band-recommendations .praise-controls { display: none; }

/* ---------- desktop: the featured quote full width, then a 3-up row ---------- */
@media (min-width: 1024px) {
  #band-recommendations .praise-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    border-radius: 0;
  }
  #band-recommendations .praise-card { flex: none; }
  #band-recommendations .praise-controls { display: none; }

  /* v2 (V1): the first card (Wells Rutland, the direct supervisor) is the
     featured quote on forest. Paper on forest 11.19:1, brand-muted 7.99:1.
     HM10: it spans the row; the quote keeps a reading measure and the
     attribution sits beside its last line. */
  #band-recommendations .praise-card:first-child {
    --ink: var(--brand-ink);
    --muted: var(--brand-muted);
    --line: color-mix(in srgb, var(--brand-ink) 26%, transparent);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    grid-template-areas:
      "mark mark"
      "quote meta";
    column-gap: clamp(40px, 5vw, 96px);
    align-items: end;
    background: var(--brand);
    color: var(--brand-ink);
  }
  #band-recommendations .praise-card:first-child .praise-card__mark {
    grid-area: mark;
    color: var(--accent-on-brand);
  }
  #band-recommendations .praise-card:first-child .praise-card__quote { grid-area: quote; }
  #band-recommendations .praise-card:first-child .praise-card__quote p { max-width: 36em; }
  #band-recommendations .praise-card:first-child .praise-card__meta { grid-area: meta; }

  /* the three Apple quotes: body size in a tighter card (beats the 99-polish quote size) */
  #band-recommendations .praise-card:not(:first-child) { padding: clamp(24px, 2.4vw, 36px); }
  #band-recommendations .praise-card:not(:first-child) .praise-card__quote p {
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }
  /* v3 review (vis-07): the three cards share mark / quote / meta rows, so the attribution
     rules sit on one line whatever each role line wraps to (no subgrid: today's layout) */
  #band-recommendations .praise-card:not(:first-child) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: clamp(20px, 2.4vw, 32px);
  }
  #band-recommendations .praise-card:not(:first-child) .praise-card__meta { align-self: start; }
}

/* >=1280: a little more air between the cards */
@media (min-width: 1280px) {
  #band-recommendations .praise-track { gap: clamp(20px, 1.6vw, 28px); }
}

/* ---------- social proof row ---------- */
#band-recommendations .praise-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: clamp(36px, 4vw, 56px);
}
#band-recommendations .praise-avatars {
  display: flex;
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
}
#band-recommendations .praise-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--sage-tint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
#band-recommendations .praise-avatar:nth-child(2) { background: var(--sage-pale); }
#band-recommendations .praise-avatar:nth-child(3) { background: color-mix(in srgb, var(--sage-tint) 60%, var(--bg)); }
#band-recommendations .praise-avatar:nth-child(4) { background: var(--surface-2); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.reduced-motion) #band-recommendations .praise-track { scroll-behavior: smooth; }
}

@media (forced-colors: active) {
  #band-recommendations .praise-card { border: 1px solid CanvasText; }
  #band-recommendations .praise-avatar { border-color: CanvasText; }
}

/* ==== 86-now.css ==== */
/* 86-now.css (designer review 2026-10-22, C11): Journey · Slovakia (#now).
   The seven-country route (12-intro.css, now scoped to #now .route) heads the chapter;
   then the Slovakia story in two columns (label, title and the fellowship small print
   left; the lead and two verbatim paragraphs right) and the handover line as the payoff.
   The ember "now" dot echoes the route's last stop; its halo pulses twice when the label is
   revealed (static under reduced motion). The 01-04 blend stepper and its return arc are cut
   (another timeline motif); 86-now.js stays inert without them. */

#now .now__grid { align-items: start; row-gap: clamp(24px, 3vw, 40px); }
#now .now__head { min-width: 0; }
#now .now__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
#now .now__title {
  margin: 0;
  max-width: 16em;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
#now .now__title:focus { outline: none; }

#now .now__pulse {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
#now .now__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--accent);
  opacity: 0;
}
@keyframes now-halo {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduced-motion) #now .now__label.is-in .now__pulse::after {
    animation: now-halo 1.6s var(--ease-out) .5s 2 both;
  }
}

/* small print: the fellowship context */
#now .now__fine {
  margin: 14px 0 0;
  max-width: 30em;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- right column ---------- */
#now .now__body { min-width: 0; }
#now .now__lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
#now .now__text {
  margin: 1em 0 0;
  max-width: 36em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* the payoff line */
#now .now__close {
  margin: clamp(40px, 5vw, 72px) 0 0;
  max-width: 20em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

@media (forced-colors: active) {
  #now .now__pulse { forced-color-adjust: none; background-color: CanvasText; box-shadow: none; }
  #now .now__pulse::after { display: none; }
}

/* ==== 88-contact.css ==== */
/* 88-contact.css (L1, v3 lean; v3 review R2): Contact (#contact). Small portrait, h2, the CTA
   pair (Email Matthew primary, Ask Agile ADDIE outline) and the contact rows. The hiring brief,
   "Find your way" and the lead sentence are gone.
   CD12: the grid is top-aligned; from 768px the portrait sits at the end of its cell (next to the
   copy) and drops by the label's height so its top lines up with the h2; the rows run full width. */
#contact .contact-grid { row-gap: clamp(28px, 4vw, 48px); }
#contact .contact-portrait { max-width: 300px; border-radius: var(--r-lg); --plate-ratio: 540 / 600; }
#contact .contact-portrait .plate__img { width: 100%; height: 100%; object-fit: cover; }
#contact .contact-main { min-width: 0; }
#contact .contact-main .sec-label { margin: 0 0 1.25rem; }
#contact .contact-main h2 { margin: 0; }
#contact .contact-main h2:focus { outline: none; }
#contact .contact-ctas { margin-top: clamp(24px, 3vw, 40px); }
#contact .contact-list { margin-top: clamp(32px, 4vw, 56px); max-width: none; }
#contact .contact-list a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

@media (min-width: 768px) {
  #contact .contact-media {
    justify-self: end;
    width: 100%;
    max-width: 300px;
    padding-top: 2.4rem;
  }
}

@media (max-width: 767.98px) {
  #contact .contact-portrait { max-width: 200px; }
  /* v3 review (rsp-7): every row stacks label over value, so no value wraps left while another
     stays right-aligned */
  #contact .contact-list .meta__row { flex-direction: column; align-items: flex-start; gap: 0; }
  #contact .contact-list .meta__row > dt { padding-bottom: 0; }
  #contact .contact-list .meta__row > dd { padding-top: 0; text-align: left; }
}

/* ==== 90-chat.css ==== */
/* 90-chat.css — Agile ADDIE chat widget, teaser and FAB (B10).
   DESIGN-SPEC §8: white sheet (radius --r-lg), ink header text, ink send button,
   sage "MG" avatar; FAB = ink pill "Ask Agile ADDIE" on desktop, 56px circle on mobile.
   z: widget --z-chat (90), FAB --z-fab (91). */

/* ---------------------------------------------------------------- FAB */
.chat-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 56px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  font: 500 var(--t-small)/1 var(--font-sans);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.chat-fab:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.chat-fab svg { width: 20px; height: 20px; flex: none; }
.chat-fab .ico-close { display: none; }
.chat-fab.open .ico-chat { display: none; }
.chat-fab.open .ico-close { display: block; }

@media (max-width: 767px) {
  .chat-fab { width: 56px; padding: 0; }
  .chat-fab__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* the sheet covers the FAB on phones; its own Close button takes over */
  html.chat-open .chat-fab { display: none; }
}

/* ---------------------------------------------------------------- teaser */
.chat-teaser {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: flex;
  align-items: flex-start;
  max-width: min(300px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chat-teaser[hidden] { display: none; }
.chat-teaser.visible { opacity: 1; transform: none; }
.chat-teaser__open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 14px 4px 14px 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.chat-teaser-body { font-weight: 600; font-size: var(--t-small); }
.chat-teaser-sub { color: var(--muted-2); font-size: var(--t-small); }
.chat-teaser-x {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted-2);
  cursor: pointer;
}
.chat-teaser-x svg { width: 14px; height: 14px; }
.chat-teaser-x:hover { color: var(--ink); background: var(--surface); }
.chat-teaser__open:focus-visible,
.chat-teaser-x:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ---------------------------------------------------------------- widget sheet */
.chat-widget {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 84px - var(--header-h) - 16px));
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chat-widget[hidden] { display: none; }
.chat-widget.open { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .chat-widget {
    inset: auto 0 0 0;
    width: 100%;
    height: min(86dvh, 100dvh - 48px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(24px);
  }
}

/* header */
.cw-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.cw-av {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--sage-ink);
  font: 600 .875rem/1 var(--font-sans);
  letter-spacing: .02em;
}
.cw-hdr-text { flex: 1; min-width: 0; }
.cw-hdr-title { margin: 0; font-size: var(--t-body); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: normal; }
.cw-hdr-sub { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: var(--muted-2); }
.cw-online { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); flex: none; }
.cw-hdr-btns { display: flex; gap: 2px; flex: none; }
.cw-hdr-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink-2);
  cursor: pointer;
}
.cw-hdr-btn svg { width: 18px; height: 18px; }
.cw-hdr-btn:hover { background: var(--surface); color: var(--ink); }
.cw-hdr-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* messages */
.cw-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-msgs:focus-visible { outline: 2px solid var(--ring); outline-offset: -4px; }
.cw-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; animation: cwFade .2s var(--ease-out); }
.cw-msg.user { align-self: flex-end; align-items: flex-end; }
@keyframes cwFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.cw-bubble {
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-small);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cw-msg.bot .cw-bubble { border-bottom-left-radius: var(--r-sm); }
.cw-msg.user .cw-bubble { background: var(--ink); color: var(--ink-inverse); border-bottom-right-radius: var(--r-sm); }
.cw-bubble.disclaimer {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted-2);
  font-size: var(--t-micro);
  line-height: 1.5;
}
.cw-bubble--error { border: 1px solid var(--line-strong); }

.cw-contact-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; white-space: normal; }
.cw-contact-link,
.cw-email-btn {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
}
.cw-email-btn { display: flex; margin-top: 6px; }
.cw-contact-link:hover, .cw-email-btn:hover { text-decoration-thickness: 2px; }
.cw-contact-link:focus-visible, .cw-email-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

.cw-msg-actions { margin-top: 2px; }
.cw-speak-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted-2);
  cursor: pointer;
}
.cw-speak-btn svg { width: 18px; height: 18px; }
.cw-speak-btn .cw-speak-stop { display: none; }
.cw-speak-btn.speaking .cw-speak-icon { display: none; }
.cw-speak-btn.speaking .cw-speak-stop { display: block; }
.cw-speak-btn.speaking, .cw-speak-btn.loading { color: var(--ink); }
.cw-speak-btn.loading { animation: cwPulseOpacity 1s ease-in-out infinite; }
.cw-speak-btn:hover { background: var(--surface); color: var(--ink); }
.cw-speak-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.cw-typing .cw-bubble { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.cw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: cwBounce 1.2s infinite; }
.cw-dot:nth-child(2) { animation-delay: .15s; }
.cw-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cwBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* "ADDIE is thinking" (v3 creative runner-up): Analysis, Design, Development, Implementation,
   Evaluation light in turn, then a small ember hook draws back from E to A (the agile loop).
   Slow and muted, a heartbeat rather than a bounce. Reduced motion: static ADDIE + hook. */
.cw-typing .cw-bubble:has(.cw-addie) { padding: 12px 16px 10px; }
.cw-addie {
  position: relative;
  display: inline-flex;
  gap: .38em;
  padding-bottom: 6px;
  font: 600 var(--t-micro)/1 var(--font-sans);
  letter-spacing: .02em;
  color: var(--muted);
}
.cw-addie > span { animation: cw-addie 1.8s var(--ease-out) infinite; animation-delay: calc(var(--k, 0) * 170ms); }
.cw-addie > span:nth-child(2) { --k: 1; }
.cw-addie > span:nth-child(3) { --k: 2; }
.cw-addie > span:nth-child(4) { --k: 3; }
.cw-addie > span:nth-child(5) { --k: 4; }
.cw-addie::after {
  content: "";
  position: absolute;
  left: .1em;
  right: .1em;
  bottom: 0;
  height: 5px;
  border: 1.5px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  animation: cw-addie-loop 1.8s var(--ease) infinite;
}
@keyframes cw-addie {
  0%, 36%, 100% { color: var(--muted); translate: 0 0; }
  10% { color: var(--ink); translate: 0 -2px; }
}
@keyframes cw-addie-loop {
  0%, 48% { clip-path: inset(0 0 0 100%); opacity: 1; }
  80% { clip-path: inset(0); opacity: 1; }
  100% { clip-path: inset(0); opacity: 0; }
}
@keyframes cwPulseOpacity { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* quick topics */
.cw-sugg { padding: 0 16px 12px; }
.cw-sugg[hidden] { display: none; }
.cw-sugg-label {
  margin: 0 0 8px;
  font: 500 var(--t-micro)/1.2 var(--font-mono);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted-2);
}
.cw-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-chip-grid > li { display: flex; }
.cw-chip {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.cw-chip:hover { border-color: var(--line-strong); background: var(--surface); }
.cw-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cw-chip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-chip-title { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }
.cw-chip-sub { font-size: var(--t-micro); color: var(--muted-2); line-height: 1.3; }
.cw-chip-star { color: var(--sage); font-size: .75rem; line-height: 1.6; }
@media (max-width: 359px) { .cw-chip-grid { grid-template-columns: 1fr; } }

/* input bar */
.cw-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  border-top: 1px solid var(--line);
}
.cw-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-sans);   /* 16px: no iOS zoom */
}
.cw-input::placeholder { color: var(--muted-2); opacity: 1; }
.cw-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cw-mic, .cw-send {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
}
.cw-mic[hidden] { display: none; }
.cw-mic { border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); }
.cw-mic:hover { background: var(--surface); }
.cw-mic svg { width: 18px; height: 18px; position: relative; }
.cw-mic .cw-mic-stop { display: none; }
.cw-mic.listening .cw-mic-icon, .cw-mic.sending .cw-mic-icon { display: none; }
.cw-mic.listening .cw-mic-stop { display: block; }
.cw-mic.sending .cw-mic-stop { display: block; animation: cwPulseOpacity 1s ease-in-out infinite; }
.cw-mic-ring { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--c-red); opacity: 0; }
.cw-mic.listening { color: var(--c-red); }
.cw-mic.listening .cw-mic-ring { opacity: 1; animation: cwPulseOpacity 1.2s ease-in-out infinite; }
.cw-send { border: 0; background: var(--ink); color: var(--ink-inverse); }
.cw-send svg { width: 18px; height: 18px; }
.cw-send:hover { background: var(--ink-2); }
.cw-send[aria-disabled="true"] { opacity: .45; cursor: progress; }
.cw-mic:focus-visible, .cw-send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------------------------------------------------------------- forced colors */
@media (forced-colors: active) {
  .chat-fab, .chat-widget, .chat-teaser, .cw-bubble, .cw-chip, .cw-send { border: 1px solid CanvasText; }
  .cw-addie::after { border-color: CanvasText; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-teaser, .chat-widget, .cw-chip { transition: none; }
  .chat-widget, .chat-teaser { transform: none; }
  .chat-fab:hover { transform: none; }
  .cw-msg, .cw-dot, .cw-speak-btn.loading, .cw-mic.sending .cw-mic-stop, .cw-mic.listening .cw-mic-ring { animation: none; }
  .cw-addie > span, .cw-addie::after { animation: none; }
}
html.reduced-motion .cw-addie > span,
html.reduced-motion .cw-addie::after { animation: none; }
html.reduced-motion .chat-fab,
html.reduced-motion .chat-teaser,
html.reduced-motion .chat-widget,
html.reduced-motion .cw-chip { transition: none; }
html.reduced-motion .chat-widget,
html.reduced-motion .chat-teaser,
html.reduced-motion .chat-fab:hover { transform: none; }
html.reduced-motion .cw-msg,
html.reduced-motion .cw-dot,
html.reduced-motion .cw-speak-btn.loading,
html.reduced-motion .cw-mic.sending .cw-mic-stop,
html.reduced-motion .cw-mic.listening .cw-mic-ring { animation: none; }

/* ==== 99-polish.css ==== */
/* Polish layer (2026-10-04, after the first live review).
   Loaded last, so it overrides section and component defaults.
   Goals: less dead space, a clear background rhythm between sections,
   headings that read as one unit, and quicker scroll-in motion.
   Polish-2 (polish-visual): Panel C "Paper, Forest, Ember" applied across
   the site. Tokens live in 00-tokens.css; this file only routes section
   styles onto them where a section hard-codes a font, size or colour. */

/* ---------- Spacing ---------- */
:root { --section-y: clamp(80px, 8vw, 144px); }
.sec-head { margin-bottom: clamp(32px, 3.5vw, 56px); }

/* ---------- Section heads: label sits above its heading ---------- */
@media (min-width: 768px) {
  .sec-head:not(.sec-head--center) { grid-template-columns: minmax(0, 1fr); }
  .sec-head:not(.sec-head--center) > *,
  .sec-head:not(.sec-head--center) > .sec-label {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .sec-head:not(.sec-head--center) > .sec-label {
    margin-bottom: clamp(16px, 1.6vw, 24px);
    padding-right: 0;
  }
  .sec-head h2 { max-width: 18em; }
}
/* .sec-label is now a quiet Inter 600 uppercase label in --accent (no pill,
   no dot); see 02-components.css. Ember 5.51:1 on --bg, 5.04:1 on --bg-2;
   the forest and games surfaces swap in a light ember (6.7:1 / 8.77:1). */

/* ---------- Background rhythm ----------
   Sections alternate --bg / --bg-2 by position, so the rhythm survives any
   re-ordering or added section. Surfaces with their own colour (forest
   hero, games band) are left alone. Even sections get the tinted-section
   treatment: cards and pale chips step up to the page paper so they still
   read on --bg-2, and gray copy uses --muted-2. The same rule resets an odd
   .section--tint, so two tinted bands never touch. */
main > section.section:not([data-surface]) {
  --muted: var(--page-muted);
  --surface: var(--page-surface);
  --surface-2: var(--page-surface-2);
  --sage-pale: var(--page-sage-pale);
  background-color: var(--bg);
}
/* Designer review 2026-10-22 (C02): the alternating --bg-2 band is retired (it read as one
   greige ribbon). Consecutive paper sections are separated by a container-width hairline. */
main > section.section:not([data-surface]) + section.section:not([data-surface]) {
  background:
    linear-gradient(var(--line), var(--line)) no-repeat top center / calc(min(100%, var(--container-max)) - 2 * var(--gutter)) 1px,
    var(--bg);
}
:root[data-theme="dark"] main > section.section:not([data-surface]) + section.section:not([data-surface]) {
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) no-repeat top center / calc(min(100%, var(--container-max)) - 2 * var(--gutter)) 1px,
    var(--bg);
}

/* The rail duplicates the header nav and collides with full-bleed panels. */
.section-rail { display: none !important; }

/* Design notes stay reachable from the menu and the "how I built this"
   overlay; the extra switches inside sections read as stray controls. */
.dn-row--inline { display: none !important; }

/* ---------- Display type roles (Newsreader 400) ----------
   Section h2s (.t-h1), the hero statement, wordmarks and stat__num are set
   in 01/02/03/10. These are the section-owned ones. */
#band-experience .exp-metric__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Education abbreviations: repeated cards, so one step down (h2 -> sub-head). */
#band-experience .exp-edu__mark {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
}
.jr-ch__country {
  font-family: var(--font-display);
  font-weight: 400;
}
#band-connect .games-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
}

/* ---------- Recommendations: quotes in Newsreader at reading size ----------
   Newsreader has a smaller x-height than Inter, so the quote runs one step
   larger than --t-h3 to read at the same visual size. */
#band-recommendations .praise-card__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.22rem + .55vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.005em;
}
#band-recommendations .praise-card__mark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4vw, 4.5rem);
  font-weight: 400;
  color: var(--accent);
}

/* ---------- Label system ----------
   Mono is retired: every former mono label, eyebrow, kicker and badge reads
   as Inter 600, uppercase, .08em (sizes come from --t-micro = 14px). Each
   selector repeats the section's own selector, so this later rule wins at
   equal specificity without touching the section files. */
.lvl-badge,
.cs-star dt,
.scn-context dt,
.scn-debrief__star dt,
.ba-label,
.scn-board__label,
.scn-step__num,
.scn-consequence__k,
.scn-path__k,
.modal-eyebrow,
.modal-badge,
.vid-foot > span:first-child,
.game-thanks .ss,
.dnote__summary,
.dnote-label,
.cmdk-item-cat,
.cmdk-hint,
.cw-sugg-label,
.brief__h,
.inspector__group,
#work .work-teaser__time,
#work .work-list__group,
#band-experience .exp-bars__lbl,
#band-experience .exp-ev__label,
#band-experience .exp-ev__rel,
#band-experience .exp-ladder__src,
#band-experience .exp-shelf__title,
#band-experience .exp-ind__eyebrow,
#band-foundations .phase-link__kind,
#band-foundations .addie__quote footer,
#band-foundations .fd-pane__eyebrow,
#band-foundations .fd-proj__sub,
#band-foundations .fd-cat,
#band-foundations .fd-pane__h,
#band-practice .pr-cover__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
/* index numbers ("01") and small category heads join the label scale */
#work .work-group__index,
#band-people .people-col__index,
#band-practice .pr-service__index,
#band-build .build-step__index,
#band-foundations .fd-cat,
#band-foundations .fd-pane__h {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
}

/* ---------- 14px floor ----------
   Sizes hard-coded below 14px in section and overlay files. */
#band-foundations .phase-link__kind,
#band-foundations .addie__quote footer,
#band-foundations .fd-pane__eyebrow,
#band-foundations .fd-proj__sub,
#band-practice .pr-cover__tag,
#band-experience .exp-ev__rel,
#band-recommendations .praise-avatar,
.jr-ch__meta,
.jr-ch__yr,
.xray-tag,
.xray-order,
.focus-spot__tag,
.access-why,
.audit-summary,
.audit-note--fact,
.audit-scope,
.audit-report__body,
.audit-report__title,
.audit-table {
  font-size: var(--t-micro);
}
#band-foundations .fd-plus { font-size: max(var(--t-micro), .8em); }
/* Journey constellation labels: 14px, and inactive labels at .72 opacity
   (the old .55 measured 3.74:1 on paper; .72 is 6.2:1). */
.jr-node text {
  font-size: 14px;
  opacity: .72;
}

/* ---------- Forest used as text ----------
   Forest (#1F3A32) passes on paper but fails on the dark theme's surfaces,
   so text and icon uses go through --brand-fg (pale forest in dark). */
.cmdk-input-row > svg,
.cmdk-input::placeholder { color: var(--brand-fg); }
.cw-chip-star {
  color: var(--brand-fg);
  font-size: var(--t-micro);
}

/* ---------- Journey chapter tints: warm paper family ----------
   The cool blue/grey tints clashed with the paper palette. Ink on every
   light tint is >= 12:1; the 80% ink meta line is >= 7.6:1. */
#journey {
  --jr-t1: #ECE6DC; --jr-t2: #E8E0D2; --jr-t3: #E3E4DA; --jr-t4: #EBE3DA;
  --jr-t5: #E2E6DE; --jr-t6: #EDE4D5; --jr-t7: #E6E2DB; --jr-t8: #E7E5D6;
}
[data-theme="dark"] #journey {
  --jr-t1: #1B1E1C; --jr-t2: #221F1A; --jr-t3: #1C1F1D; --jr-t4: #211D1B;
  --jr-t5: #1A201C; --jr-t6: #24201A; --jr-t7: #1E1E1D; --jr-t8: #20221B;
}

/* ---------- Readable type preference ----------
   With "Readable type" on, headings follow the readable face too, and the
   fallback chain points at Inter (Inter Tight is no longer loaded). */
html.pref-type {
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Inter", Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* ---------- Quicker reveals ---------- */
html.js [data-reveal].is-in,
html.js [data-reveal][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation-duration: .6s, .7s;
}
html.js [data-reveal="fade"][data-reveal-stagger].is-in > :not([data-reveal]) { animation-duration: .6s; }
html.js [data-reveal="clip"][data-reveal-stagger].is-in > :not([data-reveal]) { animation-duration: .7s; }
html.js [data-split].is-in .split-line__inner {
  animation-duration: .75s;
  animation-delay: calc(var(--split-delay, 0ms) + min(var(--i, 0), 15) * 60ms);
}
@keyframes mg-rise { from { translate: 0 24px; } }

/* ==========================================================================
   v3 lean polish (2026-10-09, lead review of headless captures)
   ========================================================================== */

/* On the home hero the inline "Ask" bar replaces the floating chat pill;
   the pill (and its teaser) appear once the hero is passed. Kept visible
   while the chat is open so it can still close the widget. */
body:has(.site-header.is-on-hero) .chat-fab:not(.open),
body:has(.site-header.is-on-hero) .chat-teaser {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Light pill for dark/forest surfaces ("Try the assistant"). Paper on forest. */
.btn--light {
  --btn-bg: var(--brand-ink, #F7F4EE);
  --btn-fg: var(--brand, #1F3A32);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
}
.btn--light:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--btn-fg)); }
.btn--light:focus-visible { outline: 2px solid var(--brand-ink, #F7F4EE); outline-offset: 3px; }

/* Recommendations: editorial quotes at a calmer size (was --t-h2) so the
   section reads in one glance instead of two screens. */
#band-recommendations .praise-card__quote p {
  font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem);
  line-height: 1.4;
}
#band-recommendations .praise-card__mark { font-size: clamp(3rem, 4.2vw, 4.25rem); }

/* Communication page: the metric card hugs its content. */
@media (min-width: 1024px) {
  #communication .comms-metric { align-self: start; }
}
/* ==========================================================================
   v3 review fixes (2026-10-09): chat reflow + focus, footer
   ========================================================================== */

/* A11Y3: at 320 CSS px or on short viewports the chat becomes a full-screen sheet;
   the header and input bar stay put, only the chips and the log scroll (1.4.10). */
@media (max-width: 767px), (max-height: 520px) {
  .chat-widget { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; min-height: 0; border-radius: 0; }
  .cw-sugg { flex: 0 1 auto; min-height: 0; max-height: 45%; overflow-y: auto; }
  /* the sheet's own Close button takes over; on short wide screens the FAB sat on Send/mic */
  html.chat-open .chat-fab,
  html.chat-open .chat-teaser { display: none; }
}
@media (max-width: 359px) {
  .cw-hdr-sub, .cw-chip-sub { display: none; }
}

/* A11Y5: two-tone ring so the floating pill's focus shows on paper AND forest backdrops. */
.chat-fab:focus-visible {
  outline: 2px solid var(--ink-inverse);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink), var(--shadow-soft);
}

/* A11Y6: the chat field and mic need a 3:1 boundary (1.4.11). */
.cw-input, .cw-mic { border-color: var(--line-ui); }

/* CD6: the giant footer word was clipped at the top (ascenders); the footer no longer repeats
   the name as a heading, so the tagline takes the display role. */
.site-footer__giant { padding-top: .12em; }
.site-footer__tagline {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: 0;
  max-width: 14em;
  text-wrap: balance; /* one sentence per line, not "...performs. Change / that sticks." */
}
/* Utility: keep short tokens such as 501(c)(3) on one line. */
.nowrap { white-space: nowrap; }

/* Credentials: trailing separators, so no dot ever starts a wrapped line. */
#band-experience .exp-creds__list { margin-left: 0; clip-path: none; }
#band-experience .exp-creds__list > li { margin-left: 0; }
#band-experience .exp-creds__list > li + li::before { content: none; }
#band-experience .exp-creds__list > li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 .55em 0 .6em;
  border-radius: 50%;
  vertical-align: middle;
  background-color: var(--accent);
}
@media (forced-colors: active) {
  #band-experience .exp-creds__list > li:not(:last-child)::after { background-color: CanvasText; }
}
/* ==== 99z-designer.css ==== */
/* ==========================================================================
   99z-designer.css: the designer-review layer (2026-10-22).
   notes/DESIGNER-REVIEW-2026-10-22.md, C01-C16. Loaded last (after 99-polish.css), so
   equal-specificity rules here win. Tokens changed in 00-tokens.css (C01); the hero was
   rewritten in 10-hero.css (C05), Results in 14-results.css (C09), Now in 86-now.css (C11).
   Principles: subtract before adding; one signature system (before -> after, "The Shift");
   colour has meaning (forest marks a chapter: the hero and Approach); three type voices
   (Newsreader display/figures/quotes, Inter 600 titles, Inter 400/500 body and labels; no
   uppercase tracked eyebrows); flat, quiet components; nothing floats over content.
   Motion rules: no custom cursor, no wheel hijacking, no sticky pinning; every animation sits
   inside prefers-reduced-motion: no-preference and html:not(.reduced-motion), with the end
   state as the default style.
   ========================================================================== */

/* ---------- C03: labels and titles ---------- */
.sec-label {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.t-h1 { letter-spacing: -.015em; text-wrap: balance; }

/* every card / row title is Inter 600 */
#work .tt__title,
#work .work-group__title,
#band-experience .acc__title,
#results .acc__title,
.comms-case__title {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* no uppercase tracked labels in content */
.acc__meta,
.cs-star dt,
#results .res-row > dt,
#work .tt__name,
#work .tt__sub,
#work .tt__flow,
.site-footer__title,
#communication .comms-case__snap,
#communication .comms-star__row > dt,
#communication .comms-bars__lbl {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.acc__meta,
#results .res-row > dt { font-variant-numeric: tabular-nums; }
.acc__meta { color: var(--muted); }

/* ---------- C04: one component kit ---------- */
.btn { min-height: 48px; padding-inline: 22px; }
.btn--sm { min-height: 44px; padding-inline: 18px; }

/* content is flat: no drop shadows, small radii */
.res-card,
.tt,
.praise-card,
.comms-metric,
.comms-case { box-shadow: none !important; border-radius: var(--r-lg); }

/* accordion icon: a bare 24px plus that turns into a cross */
.acc__icon {
  width: 24px;
  height: 24px;
  border-radius: 0;
  box-shadow: none;
}
.acc__btn[aria-expanded="true"] .acc__icon { background-color: transparent; color: var(--ink); }
@media (hover: hover) {
  .acc__btn:hover .acc__icon { background-color: transparent; }
}

/* ---------- C08: "The Shift": the before -> after figure system ---------- */
.shift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .16em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-figure);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.shift__from { font-size: .42em; color: var(--muted); }
.shift__arrow {
  display: inline-block;
  flex: none;
  width: .3em;
  height: .3em;
  align-self: center;
  background-color: var(--accent);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transform-origin: 0 50%;
}
.shift__to { color: var(--accent); }
.shift--single .shift__to { color: var(--ink); }
/* the count-up's own parts inherit the figure */
.shift .stat__num { font: inherit; letter-spacing: inherit; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduced-motion) .intro-stats:not(.is-in) .shift__arrow { transform: scaleX(0); }
  html.js:not(.reduced-motion) .intro-stats .shift__arrow { transition: transform .45s var(--ease-out) .2s; }
}
@media (forced-colors: active) {
  .shift__arrow { forced-color-adjust: none; background-color: CanvasText; }
}

/* ---------- C06: header: logo, 5 links, one Ask entry point, Get in touch ---------- */
.site-header__ask {
  --btn-bg: transparent;
  --btn-fg: var(--hdr-fg);
  --btn-bd: var(--hdr-ask-line, var(--line-ui));
  gap: 8px;
  padding-inline: 14px;
  white-space: nowrap;
}
.site-header__ask-icon { flex: none; width: 18px; height: 18px; }
.js .site-header.is-on-hero:not(.is-frosted) { --hdr-ask-line: color-mix(in srgb, var(--sage-ink) 55%, var(--sage)); }
@media (max-width: 1279.98px) {
  .site-header__ask { width: 44px; padding-inline: 0; }
  .site-header__ask-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
/* the menu button only where the nav is hidden (below 1180) */
@media (min-width: 1180px) {
  .site-header .menu-btn { display: none; }
}

/* the assistant's floating button only shows as the open chat's close control; the
   auto-teaser is retired, so nothing floats over content while the chat is closed */
.chat-fab:not(.open),
.chat-teaser { display: none !important; }

/* ---------- C10: Approach is the forest chapter ---------- */
#band-pov { background-color: var(--sage); color: var(--ink); }
#band-pov .pov-head__inner { position: static; }
#band-pov .pov-list .num-list__item { border-bottom-color: var(--line); }
#band-pov .pov-list .num-list__text {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--ink);
}
#band-pov .pov-list .num-list__index {
  color: var(--accent);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0;
}
#band-pov .pov-sig {
  font-size: var(--t-lead);
  color: var(--muted);
}
#band-pov .pov-proof {
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
#band-pov .pov-proof__title {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
#band-pov .pov-proof__title:focus { outline: none; }
#band-pov .pov-proof__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  #band-pov .pov-proof__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 40px); }
}
#band-pov .pov-proof__list h4 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
#band-pov .pov-proof__list p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
}
#band-pov .pov-proof__link { margin-top: 6px; }

/* ---------- C12: Courses: a problem-led list ---------- */
#work .work-group__index { font-size: var(--t-micro); font-weight: 500; letter-spacing: 0; color: var(--accent); }
/* the group already draws the top rule; the list adds none */
#work .work-grid {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 0;
}
#work .work-grid > .work-grid__item:first-child .tt { padding-top: 0; }
#work .work-grid__item { display: block; }
#work .tt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: none;
  grid-template-areas:
    "title cta"
    "desc  cta"
    "tool  cta";
  gap: 6px 32px;
  aspect-ratio: auto;
  min-height: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
  translate: none;
}
#work .tt__title { grid-area: title; margin: 0; }
#work .tt__desc {
  grid-area: desc;
  margin: 0;
  max-width: 46em;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}
#work .tt__tool {
  grid-area: tool;
  display: block;
  margin: 4px 0 0;
  font-size: var(--t-micro);
  color: var(--muted);
}
#work .tt__name,
#work .tt__sub { display: inline; font-size: inherit; color: inherit; }
#work .tt__name::after { content: " ·"; }
#work .tt__cta { grid-area: cta; align-self: center; justify-self: end; margin-top: 0; }
@media (hover: hover) {
  #work .tt:hover { translate: none; }
  #work .tt:hover .tt__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
@supports selector(:has(a)) {
  #work .tt:has(.tt__cta:focus-visible) { outline-offset: 6px; border-radius: var(--r-sm); }
}
@media (max-width: 559.98px) {
  #work .tt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "desc" "tool" "cta";
  }
  #work .tt > .tt__title { margin-top: 0; }
  #work .tt__cta { justify-self: start; margin-top: 6px; }
}

/* ---------- C13: Experience: credentials first, one line per role ---------- */
#band-experience { --exp-rail: 0px; }
#band-experience .exp-creds {
  display: block;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
#band-experience .exp-creds__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#band-experience .exp-creds__list { font-size: var(--t-h3); }
#band-experience .exp-tl::before,
#band-experience .exp-tl .acc__btn::before { display: none; }
#band-experience .exp-tl .acc__btn { padding-left: 0; }
#band-experience .exp-tl .acc__meta {
  font-size: var(--t-micro);
  font-weight: 500;
  white-space: nowrap;
}
#band-experience .exp-tl .acc__title { font-size: var(--t-h3); }
#band-experience .exp-tl .acc__sub { font-size: var(--t-small); color: var(--muted); }
#band-experience .exp-tl .acc__icon { width: 24px; height: 24px; }
#band-experience .exp-tl .acc__inner { padding-inline-start: 0; }
@media (min-width: 1024px) {
  #band-experience .exp-tl .acc__btn {
    grid-template-columns: 9rem minmax(0, 1.1fr) minmax(0, 1.4fr) 24px;
    grid-template-areas: "meta title sub icon";
    align-items: center;
    padding-block: 18px;
  }
  #band-experience .exp-tl .acc__inner { padding-inline-start: calc(9rem + var(--acc-gap, 16px)); }
}

/* ---------- C14: Praise: stacked at every width, the lead quote on paper ---------- */
#band-recommendations .praise-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px) var(--gap);
  overflow: visible;
  scroll-snap-type: none;
  border-radius: 0;
}
@media (min-width: 768px) {
  #band-recommendations .praise-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#band-recommendations .praise-card {
  flex: none;
  scroll-snap-align: none;
  padding: 24px 0 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line-strong);
}
#band-recommendations .praise-card:first-child {
  --ink: var(--page-ink);
  --muted: var(--page-muted);
  --line: var(--page-line);
  grid-column: 1 / -1;
  padding-top: 0;
  border-top: 0;
  background: none;
  color: var(--ink);
}
#band-recommendations .praise-card:first-child .praise-card__mark { color: var(--accent); }
#band-recommendations .praise-card:first-child .praise-card__quote p {
  max-width: 34em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
}
@media (min-width: 768px) {
  #band-recommendations .praise-card:not(:first-child) { padding: 24px 0 0; }
  #band-recommendations .praise-card:not(:first-child) .praise-card__quote p {
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }
}
#band-recommendations .praise-proof { justify-content: flex-start; }

/* ---------- C15: Contact and footer ---------- */
#contact .contact-head .sec-label { margin: 0 0 1rem; }
#contact .contact-head h2 { margin: 0; }
#contact .contact-head h2:focus { outline: none; }
#contact .contact-ctas { margin-top: 0; }
@media (max-width: 1023.98px) {
  #contact .contact-ctas { margin-top: 8px; }
}
@media (min-width: 1024px) {
  #contact .contact-head { grid-column: 1 / span 6; }
  #contact .contact-main { grid-column: 7 / -1; padding-top: calc(var(--t-small) * 1.4 + 1rem); }
}

.site-footer { padding-top: clamp(48px, 5vw, 72px); }
.site-footer__top { display: block; }
@media (min-width: 640px) {
  .site-footer__col--resources { grid-column: 1 / span 6; }
  .site-footer__col--contact { grid-column: 7 / span 6; }
}
.site-footer__bar { margin-top: clamp(40px, 5vw, 64px); }
/* the theme switch moved from the header into the footer bar */
.site-footer__bar .icon-btn--theme {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-ui);
  cursor: pointer;
}
.site-footer__bar .icon-btn--theme > svg { grid-area: 1 / 1; display: block; width: 20px; height: 20px; }
.site-footer__bar .icon-btn--theme:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__bar .icon-btn--theme:hover { background: var(--surface); }
}

/* ---------- dark theme: forest-black page; the two forest chapters keep an edge ---------- */
:root[data-theme="dark"] .btn--primary { --btn-bg: var(--brand-fg); --btn-fg: var(--ink-inverse); }
:root[data-theme="dark"] main > section[data-surface="sage"],
:root[data-theme="dark"] #top.hero {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--brand-ink) 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--brand-ink) 14%, transparent);
}

/* ==========================================================================
   Round 2 (art-director re-score, 6.5/10): give the idea a system after the hero.
   ========================================================================== */

/* ---------- the Shift strip: the lead before -> after on one line, leading the row ---------- */
#intro .intro-stat .shift {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: .1em .2em;
  font-size: clamp(2.5rem, 1rem + 5vw, 5rem);
}
@media (min-width: 1024px) {
  #intro .intro-stats { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
}

/* ---------- three heading scales by section role ---------- */
#results #results-title {
  font-size: var(--h2-xl);
  line-height: .92;
  letter-spacing: -.035em;
}
#results .sec-head { margin-bottom: clamp(40px, 5vw, 80px); }
#now .route__title {
  font-size: var(--h2-l);
  line-height: .98;
  letter-spacing: -.03em;
  max-width: 14em;
}
#band-experience #experience-title {
  font-family: var(--font-sans);
  font-size: var(--h2-s);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
/* Courses: the heading breaks the left edge and sits over the course rows */
@media (min-width: 1180px) {
  #work .work-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 3fr);
    column-gap: clamp(24px, 2.6vw, 44px);
    align-items: end;
  }
  #work .work-head > .sec-label { grid-column: 1; grid-row: 1; margin: 0; }
  #work .work-head > h2 { grid-column: 2; grid-row: 1; }
}

/* ---------- Approach: a sticky heading fills the left column; the AI coda keeps the voice ---------- */
@media (min-width: 1024px) {
  #band-pov .pov-head__inner { position: sticky; top: calc(var(--header-h) + 40px); }
}
#band-pov .pov-proof { margin-top: clamp(64px, 7vw, 112px); padding-top: clamp(40px, 5vw, 72px); }
#band-pov .pov-proof__title {
  margin-bottom: clamp(28px, 3vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}
#band-pov .pov-proof__list h4 { font-size: 1.0625rem; }
#band-pov .pov-proof__list p { font-size: var(--t-small); line-height: 1.6; }
@media (min-width: 1024px) {
  #band-pov .pov-proof__list { column-gap: 0; }
  #band-pov .pov-proof__list > li { padding-inline: clamp(20px, 2vw, 32px); }
  #band-pov .pov-proof__list > li:first-child { padding-left: 0; }
  #band-pov .pov-proof__list > li + li { border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
}

/* ---------- Contact + footer: the forest closing chapter (bookends the hero) ---------- */
#contact {
  background-color: var(--sage);
  color: var(--ink);
  padding-block: clamp(96px, 12vw, 176px) clamp(48px, 6vw, 88px);
}
#contact .contact-head,
#contact .contact-main { grid-column: 1 / -1; padding-top: 0; }
#contact .contact-head .sec-label { margin-bottom: clamp(20px, 2.4vw, 36px); } /* clear of the giant cap height */
#contact #contact-title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: clamp(4.5rem, 14.5vw, 13rem);
  line-height: .88;
  letter-spacing: -.04em;
}
#contact .contact-main { display: grid; gap: 32px; }
@media (min-width: 768px) {
  #contact .contact-main {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(32px, 6vw, 112px);
  }
  #contact .contact-list { margin-top: 0; }
}
#contact .contact-list a { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.site-footer {
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background-color: var(--bg);
  color: var(--ink);
}
:root[data-theme="dark"] .site-footer[data-surface="sage"] {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand-ink) 14%, transparent);
}

/* ---------- small, visible fixes ---------- */
/* the logo is one line on phones too (there is room) */
@media (max-width: 639.98px) {
  .site-header__brand { width: auto; flex: none; white-space: nowrap; font-size: 1.125rem; }
}
/* the hero subtitle labels instead of competing with the 23px lead (brand-muted 7.99:1) */
#top .hero__eyebrow {
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--muted);
}

/* Praise: the lead attribution in flow under its quote; the three Apple quotes as a
   staggered editorial spread (no borders, no slider) */
#band-recommendations .praise-card__mark { height: .45em; }
@media (min-width: 1024px) {
  #band-recommendations .praise-card:first-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "quote" "meta";
    row-gap: 18px;
  }
  #band-recommendations .praise-card:first-child .praise-card__meta { max-width: 36ch; margin-top: 8px; }
  #band-recommendations .praise-card:not(:first-child) {
    display: flex;
    grid-row: auto;
    border-top: 0;
    padding-top: 0;
  }
  #band-recommendations .praise-card:nth-child(3) { margin-top: 4rem; }
  #band-recommendations .praise-card:nth-child(4) { margin-top: 8rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  #band-recommendations .praise-card:not(:first-child) { border-top: 0; padding-top: 0; }
}

/* ---------- communication.html on the same system ---------- */
#communication .comms-metric,
#communication .comms-case {
  padding: clamp(24px, 2.6vw, 36px) 0 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--line-strong);
}
#communication .comms-metric__shift { font-size: var(--t-figure); }
#communication .comms-metric__unit { margin-top: 12px; font-size: var(--t-body); color: var(--muted); }
#communication .comms-metric__desc { margin-top: 20px; }
#communication .comms-case__title {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
#communication .comms-case__snap { font-size: var(--t-small); color: var(--muted); }
#communication .comms-star { gap: 16px; }
#communication .comms-star__row { padding: 0; }
#communication .comms-star__row::before { display: none; }
#communication .comms-star__row > dt { min-height: 0; margin: 0 0 4px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
#communication .comms-result { margin-top: 8px; padding: 18px 0 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
#communication .comms-result > dt { color: var(--accent); }
/* the two builds as rows, like the home page's courses */
#communication .comms-builds { display: block; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
#communication .comms-builds__item { display: block; }
#communication .tt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: none;
  grid-template-areas: "title cta" "desc cta" "tool cta";
  gap: 6px 32px;
  aspect-ratio: auto;
  min-height: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
#communication .tt__title { grid-area: title; margin: 0; font-family: var(--font-sans); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
#communication .tt__desc { grid-area: desc; margin: 0; max-width: 46em; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
#communication .tt__tool { grid-area: tool; display: block; margin: 4px 0 0; font-size: var(--t-micro); color: var(--muted); }
#communication .tt__name,
#communication .tt__sub { display: inline; font-size: inherit; color: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; }
#communication .tt__name::after { content: " ·"; }
#communication .tt__flow { display: inline; margin-right: .35em; font-size: inherit; color: var(--ink-2); }
#communication .tt__cta { grid-area: cta; align-self: center; justify-self: end; margin-top: 0; }
@media (max-width: 559.98px) {
  #communication .tt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "desc" "tool" "cta"; }
  #communication .tt__cta { justify-self: start; margin-top: 6px; }
}

/* ---------- QA fixes (2026-10-22, skeptic-confirmed) ---------- */
/* the Shift figures fit their columns at 1024-1350 (154K+ was clipped) and at 320 */
@media (min-width: 1024px) {
  #intro .intro-stat .shift { font-size: min(5rem, 5.4vw); }
}
@media (max-width: 359.98px) {
  #intro .intro-stat .shift { font-size: 2.25rem; }
}
/* communication.html rows do not lift on hover (the shared tile hover) */
#communication .tt { translate: none; }
@media (hover: hover) {
  #communication .tt:hover { translate: none; }
  #communication .tt:hover .tt__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
/* print: buttons stay legible whether or not backgrounds print */
@media print {
  .btn--primary { --btn-bg: transparent !important; --btn-fg: #000 !important; border: 1px solid #000; }
}