/* ==========================================================================
   USAIndiaCFO — v27 "Warm Bronze Clay"
   Design system, forked from Homepage v23.

   v23's palette, typography and bronze accent are carried over unchanged.
   What is new is that v23's ONE claymorphic gesture — the mockup card's
   dual shadow, light from the top-left and weight to the bottom-right — is
   promoted from a single decoration into the system every surface uses.
   That is why the clay reads as belonging to the site rather than applied
   on top of it: it was already the site's own light.

       v23 card:  -16px -16px 38px rgba(255,255,255,.7),
                   18px 24px 56px rgba(108,97,76,.34)

   One light source, top-left, everywhere. Never contradict it.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* type floor for small caps labels (imp-home, 17 Oct 2026): eyebrows, chapter labels,
     roles, captions and pills never render below 12px; the tracking comes down a little
     so the wider glyphs keep the same line length */
  --fs-label: 12px;
  --ls-label: .2em;
  /* ground — v23's radial ivory, used full-bleed instead of inside a card */
  --ground: radial-gradient(120% 100% at 18% 8%, var(--ground-hi) 0%, var(--ground-flat) 46%, var(--sand-917) 100%);
  --ground-flat: #f3f0e8;
  --ground-sink: #ebe5d8;
  /* the inner-page hero's bloom (blue theme re-tints it, see below) */
  --bloom-rgb: 216, 162, 74;

  /* dark territory — hero, footer, panels */
  --dark: #17120c;
  --dark-2: #1b1610;
  --dark-3: #221b13;

  /* ink */
  --cream: #f8f3e8;
  --ink: #151513;
  --ink-muted: #5d5850;
  --ink-soft: #67635a;
  --ink-faint: #8a8478;

  /* bronze */
  --bronze: #c99a52;
  --bronze-deep: #a8762f;
  --bronze-bright: #d8a24a;

  /* hairlines */
  --line: #d6cfbd;
  --line-soft: #e0dacd;
  --line-dark: rgba(var(--cream-rgb), .12);

  /* rgb triplets for rgba() — use rgba(var(--bronze-rgb), a) instead of
     hard-coded colours so the theme switch ([data-theme="blue"]) reaches it */
  --bronze-rgb: 201, 154, 82;
  --bronze-deep-rgb: 168, 118, 47;
  --cream-rgb: 248, 243, 232;
  --ink-rgb: 21, 21, 19;
  --dark-rgb: 23, 18, 12;
  --ground-rgb: 243, 240, 232;

  /* ── derived palette ─────────────────────────────────────────────────────
     Every warm literal the chrome / section CSS used to hard-code, as a
     token, so the blue theme can re-tint it. Named by family + OKLCH
     lightness (sand-980 = a sand at L 0.980): sand = ivory/sand grounds and
     hairlines, gold = bronze/gold fills, umber = the dark browns, stone =
     warm greys and cast shadows. Warm values are the original v27 ones. */
  --ground-hi: #fdfcf9;
  /* the theme toggle's two-tone swatch shows BOTH themes, so these two are
     deliberately fixed (not overridden under [data-theme="blue"]) */
  --swatch-bronze: #c99a52;
  --swatch-blue: #4a78b0;
  --dark-2-rgb: 27, 22, 16;
  --bronze-bright-rgb: 216, 162, 74;
  --ink-muted-rgb: 93, 88, 80;
  --gold-1: #e0ad58;
  --gold-2: #c9933f;
  --gold-3: #b07f2d;
  --gold-647: #b58431;
  --gold-719: #cf9944;
  --gold-801: #e6b562;
  --gold-core: #5a3c0c;
  --gold-core-rgb: 90, 60, 12;
  --gold-hi: #fff4d8;
  --gold-hi-rgb: 255, 244, 216;
  --gold-hi-2: #fff0d2;
  --gold-hi-2-rgb: 255, 240, 210;
  --gold-shade: #785418;
  --gold-shade-rgb: 120, 84, 24;
  --rim: #e0c698;
  --rim-rgb: 224, 198, 152;
  --sand-860: #d9d0bf;
  --sand-882: #e9d6af;
  --sand-884: #e3d8be;
  --sand-900: #e7ddc7;
  --sand-908: #e7e0d0;
  --sand-909: #ece0c6;
  --sand-914: #e8e2d4;
  --sand-916: #f0e2c4;
  --sand-917: #e9e3d6;
  --sand-917b: #e9e3d5;
  --sand-918: #ede3cc;
  --sand-922: #efe4cd;
  --sand-926: #ece6d7;
  --sand-926b: #ece6d9;
  --sand-929: #ece7db;
  --sand-929b: #efe7d4;
  --sand-933: #efe8da;
  --sand-934: #f3e8d2;
  --sand-934-rgb: 243, 232, 210;
  --sand-935: #efe9db;
  --sand-935b: #efe9dc;
  --sand-938: #efeade;
  --sand-941: #f0ebdf;
  --sand-943: #f0ece1;
  --sand-944: #f1ece1;
  --sand-949: #f2eee4;
  --sand-950: #f3eee2;
  --sand-952: #f3efe5;
  --sand-952b: #f2efe7;
  --sand-953: #f6efdf;
  --sand-953b: #f4efe4;
  --sand-955: #f4f0e6;
  --sand-956: #f4f0e7;
  --sand-962: #f6f2ea;
  --sand-965: #f7f3eb;
  --sand-973: #f8f6f0;
  --sand-973-rgb: 248, 246, 240;
  --sand-977: #faf7f1;
  --sand-977b: #fbf7ee;
  --sand-977bb: #faf7f0;
  --sand-977bb-rgb: 250, 247, 240;
  --sand-980: #fbf8f2;
  --sand-985: #fcfaf5;
  --sand-986: #fdfaf4;
  --sand-988: #fdfbf6;
  --shade-2: #6c614c;
  --shade-2-rgb: 108, 97, 76;
  --shade-3: #786446;
  --shade-3-rgb: 120, 100, 70;
  --stone-335: #3a362f;
  --umber-147: #0d0a06;
  --umber-147-rgb: 13, 10, 6;
  --umber-167: #120e09;
  --umber-167-rgb: 18, 14, 9;
  --umber-168: #130e08;
  --umber-168-rgb: 19, 14, 8;
  --umber-173: #140f09;
  --umber-173-rgb: 20, 15, 9;
  --umber-174: #150f09;
  --umber-183: #17110b;
  --umber-187: #18120b;
  --umber-187-rgb: 24, 18, 11;
  --umber-191: #191309;
  --umber-193: #1a130c;
  --umber-193-rgb: 26, 19, 12;
  --umber-202: #1c150d;
  --umber-202-rgb: 28, 21, 13;
  --umber-205: #1c1610;
  --umber-210: #1d1711;
  --umber-228: #221b12;
  --umber-236: #241d15;
  --umber-241: #251e16;
  --umber-282: #2c2924;
  --gold-658: #b98739;
  --sand-834: #cdc8bd;
  --sand-904: #e3dfd5;
  --stone-380: #48413a;
  --umber-285: #2f2922;

  /* ── clay: matte slabs that CAST, they do not glow ─────────────────────
     The first pass got this wrong. It used a white outer shadow opposite a
     dark one — which is neumorphism, an embossed-into-the-page look, and on a
     dark hero it read as a halo around everything.

     Real clay is three separate things, and none of them is a glow:

       1. a MATTE fill, very slightly lighter at the top (light from above),
          with no gloss and no specular highlight;
       2. a DIRECTIONAL CAST SHADOW — offset down and to the right, layered
          tight-to-wide, because the object is sitting ON the ground rather
          than embossed into it;
       3. THICKNESS — a soft inner shadow along the bottom inside edge, which
          is what makes a shape read as a slab with depth instead of a
          coloured rectangle. Plus a 1px light hairline along the top edge:
          a real material edge, not a ring.

     Light stays top-left, so every cast shadow is +x +y. Never negative. */

  --shade: 104, 90, 66;              /* the warm stone the ground casts in */

  --clay-sm:
     1px  2px  3px rgba(var(--shade), .06),
     4px  7px 12px rgba(var(--shade), .10),
    inset 0 -3px 5px rgba(var(--shade), .09),
    inset 0  1px 1px rgba(255, 255, 255, .55);

  --clay-md:
     2px  4px  6px rgba(var(--shade), .07),
     7px 12px 20px rgba(var(--shade), .11),
    16px 27px 42px rgba(var(--shade), .10),
    inset 0 -4px 7px rgba(var(--shade), .10),
    inset 0  1px 1px rgba(255, 255, 255, .6);

  --clay-lg:
     3px  5px  8px rgba(var(--shade), .07),
    10px 18px 28px rgba(var(--shade), .12),
    23px 38px 60px rgba(var(--shade), .11),
    inset 0 -5px 10px rgba(var(--shade), .11),
    inset 0  1px 1px rgba(255, 255, 255, .65);

  --clay-xl:
     4px  7px 11px rgba(var(--shade), .08),
    13px 22px 34px rgba(var(--shade), .12),
    30px 50px 78px rgba(var(--shade), .12),
    inset 0 -6px 12px rgba(var(--shade), .11),
    inset 0  1px 1px rgba(255, 255, 255, .68);

  /* lifted — the slab rises, so the cast travels further. Same direction. */
  --clay-hover:
     4px  7px 11px rgba(var(--shade), .08),
    13px 23px 36px rgba(var(--shade), .13),
    30px 50px 78px rgba(var(--shade), .12),
    inset 0 -4px 8px rgba(var(--shade), .10),
    inset 0  1px 1px rgba(255, 255, 255, .7);

  /* pressed IN — the cast inverts inward from the top-left, and the far
     inside wall (bottom-right) is what catches the light. */
  --clay-in:
    inset  3px  4px  7px rgba(var(--shade), .13),
    inset  1px  2px  3px rgba(var(--shade), .09),
    inset -1px -2px  3px rgba(255, 255, 255, .5);
  --clay-in-deep:
    inset  5px  7px 12px rgba(var(--shade), .16),
    inset  2px  3px  5px rgba(var(--shade), .11),
    inset -2px -2px  4px rgba(255, 255, 255, .45);

  /* clay on dark ground — same geometry, and the hairline goes warm because
     a white edge on #1b1610 reads as a mistake */
  --clay-dark:
     2px  4px  7px rgba(0, 0, 0, .30),
     8px 14px 24px rgba(0, 0, 0, .34),
    20px 34px 54px rgba(0, 0, 0, .30),
    inset 0 -4px 9px rgba(0, 0, 0, .34),
    inset 0  1px 1px rgba(var(--rim-rgb), .11);
  --clay-dark-hover:
     3px  5px  9px rgba(0, 0, 0, .28),
     9px 16px 28px rgba(0, 0, 0, .34),
    20px 34px 58px rgba(0, 0, 0, .30),
    inset 0 -4px 9px rgba(0, 0, 0, .34),
    inset 0  1px 1px rgba(var(--rim-rgb), .13);
  --clay-dark-in:
    inset  4px  5px 10px rgba(0, 0, 0, .42),
    inset -1px -2px  3px rgba(var(--rim-rgb), .07);

  /* radii — clay needs real roundness or it reads as a flat card with a
     drop shadow. Restrained, though: this is a finance firm. */
  --r-sm: 16px;
  --r: 22px;
  --r-lg: 30px;
  --r-xl: 38px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .28, 1);
  --shell: 1320px;
  --gutter: 60px;
  --head-h: 104px;
}

/* ── blue theme ───────────────────────────────────────────────────────────
   html[data-theme="blue"] — the owner's full blue tone (restored 14 Oct 2026,
   replacing the accent-only variant): every warm token gets its cool
   counterpart at the same lightness and role — grounds = cool ivory, sands =
   pale steel, darks = deep navy-ink, cast shadows = cool slate, bloom = blue.
   Accent values keep the AA tuning from review r2 (dark text on --bronze /
   the gold ramp ≥ 4.5:1). Set before first paint by the inline script in
   <head> (localStorage "uic-theme"). */
html[data-theme="blue"] {
  --ground-hi: #fbfcfe;
  --ground-flat: #edf1f5;
  --ground-sink: #e0e6ed;
  --dark: #0c131f;
  --dark-2: #101723;
  --dark-3: #131c2d;
  --cream: #eff4fa;
  --ink: #121722;
  --ink-muted: #545960;
  --ink-soft: #5e646c;
  --ink-faint: #7e8590;
  --bronze: #5f8cc4;
  --bronze-deep: #335f96;
  --bronze-bright: #6a9ad4;
  --line: #c8d0da;
  --line-soft: #d5dbe2;
  --bronze-rgb: 95, 140, 196;
  --bronze-deep-rgb: 51, 95, 150;
  --bronze-bright-rgb: 106, 154, 212;
  --ink-muted-rgb: 84, 89, 96;
  --cream-rgb: 239, 244, 250;
  --ink-rgb: 18, 23, 34;
  --dark-rgb: 12, 19, 31;
  --dark-2-rgb: 16, 23, 35;
  --ground-rgb: 237, 241, 245;
  --shade: 78, 93, 114;
  --bloom-rgb: 106, 154, 212;
  --gold-1: #8ab0dd;
  --gold-2: #6f9ad0;
  --gold-3: #5886c0;
  --gold-647: #6490c8;
  --gold-719: #7aa3d6;
  --gold-801: #96b8e2;
  --gold-core: #072241;
  --gold-core-rgb: 7, 34, 65;
  --gold-hi: #e9f6ff;
  --gold-hi-rgb: 233, 246, 255;
  --gold-hi-2: #e5f3ff;
  --gold-hi-2-rgb: 229, 243, 255;
  --gold-shade: #183a61;
  --gold-shade-rgb: 24, 58, 97;
  --rim: #b6cce4;
  --rim-rgb: 182, 204, 228;
  --sand-860: #cad2db;
  --sand-882: #c8daef;
  --sand-884: #cedae8;
  --sand-900: #d5dfeb;
  --sand-908: #dae2ea;
  --sand-909: #d6e3f0;
  --sand-914: #dde3eb;
  --sand-916: #d7e5f5;
  --sand-917: #dee4eb;
  --sand-917b: #dee4ec;
  --sand-918: #dae5f1;
  --sand-922: #dbe6f3;
  --sand-926: #e0e7ef;
  --sand-926b: #e1e7ee;
  --sand-929: #e2e8ee;
  --sand-929b: #e0e9f3;
  --sand-933: #e3eaf1;
  --sand-934: #e0ebf6;
  --sand-934-rgb: 224, 235, 246;
  --sand-935: #e4eaf2;
  --sand-935b: #e4eaf1;
  --sand-938: #e5ebf1;
  --sand-941: #e6ecf2;
  --sand-943: #e8edf2;
  --sand-944: #e8edf3;
  --sand-949: #eaeff4;
  --sand-950: #e9eff5;
  --sand-952: #ebf0f5;
  --sand-952b: #ecf0f4;
  --sand-953: #e9f1f9;
  --sand-953b: #ebf0f6;
  --sand-955: #ecf1f6;
  --sand-956: #ecf1f6;
  --sand-962: #eff3f7;
  --sand-965: #f0f4f8;
  --sand-973: #f4f6f9;
  --sand-973-rgb: 244, 246, 249;
  --sand-977: #f5f8fb;
  --sand-977b: #f3f8fd;
  --sand-977bb: #f4f8fb;
  --sand-977bb-rgb: 244, 248, 251;
  --sand-980: #f6f9fc;
  --sand-985: #f8fafd;
  --sand-986: #f8fbfe;
  --sand-988: #f9fbfe;
  --shade-2: #566475;
  --shade-2-rgb: 86, 100, 117;
  --shade-3: #556983;
  --shade-3-rgb: 85, 105, 131;
  --stone-335: #32373d;
  --umber-147: #060a13;
  --umber-147-rgb: 6, 10, 19;
  --umber-167: #090f19;
  --umber-167-rgb: 9, 15, 25;
  --umber-168: #080f1b;
  --umber-168-rgb: 8, 15, 27;
  --umber-173: #09101c;
  --umber-173-rgb: 9, 16, 28;
  --umber-174: #09101d;
  --umber-183: #0b121f;
  --umber-187: #0b1321;
  --umber-187-rgb: 11, 19, 33;
  --umber-191: #0a1426;
  --umber-193: #0c1424;
  --umber-193-rgb: 12, 20, 36;
  --umber-202: #0d1627;
  --umber-202-rgb: 13, 22, 39;
  --umber-205: #101724;
  --umber-210: #111825;
  --umber-228: #131c2e;
  --umber-236: #151e2f;
  --umber-241: #161f30;
  --umber-282: #242a34;
  --gold-658: #5886c0;
  --sand-834: #c4c9cf;
  --sand-904: #dbe0e5;
  --stone-380: #3d434a;
  --umber-285: #222a39;
}
/* ── theme C: "soft blue" (owner 20 Oct 2026: "a little less blue tint … a little bright side") ──
   html[data-blue-flavor="soft"] while the blue theme is on. Derived from the blue tokens above by rule
   (site generated, 20 Oct): light surfaces ~45% less saturated and a touch brighter, accents ~22% less
   saturated, darks ~28% less blue at the same depth; text colours unchanged (contrast). */
html[data-theme="blue"][data-blue-flavor="soft"] {
  --ground-hi: #fdfdfe;
  --ground-flat: #f4f5f7;
  --ground-sink: #ebeef0;
  --dark: #0f141c;
  --dark-2: #131820;
  --dark-3: #171d29;
  --cream: #f6f7fa;
  --bronze: #6a8db9;
  --bronze-deep: #3e608b;
  --bronze-bright: #769bc8;
  --line: #dbdee2;
  --line-soft: #e4e6e9;
  --bronze-rgb: 106, 141, 185;
  --bronze-deep-rgb: 62, 96, 139;
  --bronze-bright-rgb: 118, 155, 200;
  --cream-rgb: 246, 247, 250;
  --dark-rgb: 15, 20, 28;
  --dark-2-rgb: 19, 24, 32;
  --ground-rgb: 244, 245, 247;
  --shade: 82, 94, 110;
  --bloom-rgb: 118, 155, 200;
  --gold-1: #93b1d4;
  --gold-2: #7a9bc5;
  --gold-3: #6387b5;
  --gold-647: #6f91bd;
  --gold-719: #84a4cc;
  --gold-801: #9eb9da;
  --gold-core: #0f2339;
  --gold-core-rgb: 15, 35, 57;
  --gold-hi: #f3f8fc;
  --gold-hi-rgb: 243, 248, 252;
  --gold-hi-2: #f1f6fb;
  --gold-hi-2-rgb: 241, 246, 251;
  --gold-shade: #223b57;
  --gold-shade-rgb: 34, 59, 87;
  --rim: #d3dce5;
  --rim-rgb: 211, 220, 229;
  --sand-860: #dde0e3;
  --sand-882: #dfe6ee;
  --sand-884: #e1e5eb;
  --sand-900: #e5e9ee;
  --sand-908: #e8ebee;
  --sand-909: #e6ebf0;
  --sand-914: #e9ecef;
  --sand-916: #e8edf3;
  --sand-917: #eaecef;
  --sand-917b: #eaecef;
  --sand-918: #e9edf2;
  --sand-922: #eaeef3;
  --sand-926: #eceef1;
  --sand-926b: #eceef1;
  --sand-929: #edeff1;
  --sand-929b: #ecf0f4;
  --sand-933: #eef0f3;
  --sand-934: #edf1f5;
  --sand-934-rgb: 237, 241, 245;
  --sand-935: #eef1f4;
  --sand-935b: #eef0f3;
  --sand-938: #eff1f3;
  --sand-941: #eff2f4;
  --sand-943: #f0f2f4;
  --sand-944: #f1f3f5;
  --sand-949: #f2f4f6;
  --sand-950: #f1f4f6;
  --sand-952: #f3f4f6;
  --sand-952b: #f3f4f6;
  --sand-953: #f2f5f8;
  --sand-953b: #f3f5f7;
  --sand-955: #f3f5f7;
  --sand-956: #f3f5f7;
  --sand-962: #f5f7f8;
  --sand-965: #f6f7f9;
  --sand-973: #f8f9fa;
  --sand-973-rgb: 248, 249, 250;
  --sand-977: #f9fafb;
  --sand-977b: #f8fafc;
  --sand-977bb: #f8fafb;
  --sand-977bb-rgb: 248, 250, 251;
  --sand-980: #fafbfc;
  --sand-985: #fbfcfd;
  --sand-986: #fbfcfd;
  --sand-988: #fcfcfe;
  --shade-2: #596472;
  --shade-2-rgb: 89, 100, 114;
  --shade-3: #5a6a7e;
  --shade-3-rgb: 90, 106, 126;
  --umber-147: #080b11;
  --umber-147-rgb: 8, 11, 17;
  --umber-167: #0b1017;
  --umber-167-rgb: 11, 16, 23;
  --umber-168: #0b1018;
  --umber-168-rgb: 11, 16, 24;
  --umber-173: #0c1119;
  --umber-173-rgb: 12, 17, 25;
  --umber-174: #0c111a;
  --umber-183: #0e131c;
  --umber-187: #0e141e;
  --umber-187-rgb: 14, 20, 30;
  --umber-191: #0e1522;
  --umber-193: #0f1521;
  --umber-193-rgb: 15, 21, 33;
  --umber-202: #111723;
  --umber-202-rgb: 17, 23, 35;
  --umber-205: #131821;
  --umber-210: #141922;
  --umber-228: #171d2a;
  --umber-236: #191f2b;
  --umber-241: #1a202c;
  --umber-282: #262b32;
  --gold-658: #6387b5;
  --sand-834: #d7d9dc;
  --sand-904: #e7e9eb;
  --stone-380: #3f4348;
  --umber-285: #252b36;
}
html[data-theme="blue"][data-blue-flavor="soft"] .hero__tint { --hero-tint-rgb: 74, 94, 128; }

/* On dark grounds the blue accent steps up to the bronze's own lightness
   (bronze is already light enough to read on umber; the blue tuned for the
   ivory ground is not), so labels and links there keep AA. */
html[data-theme="blue"] :is(.section--dark, .section--slate, .clay--dark, .drawer, .ftr, .hero, [data-chrome-dark]) {
  --bronze: #77a2d9;
  --bronze-rgb: 119, 162, 217;
  --bronze-bright: #8fb5e6;
  --bronze-bright-rgb: 143, 181, 230;
  --bronze-deep: #5e90cc;
  --bronze-deep-rgb: 94, 144, 204;
}
/* The swap itself: site.js puts `theme-switching` on <html> for two frames
   while it flips data-theme, so every surface changes colour in the same
   frame instead of each fading at its own transition speed (review L8). */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}
/* ── SVG attribute bridge ────────────────────────────────────────────────
   The drawn tiles (site/_illos.py, stories_*.py, stack_orbit.py, about map)
   write their ink / paper as SVG presentation attributes, which cannot take
   var(). Any author rule beats a presentation attribute, so these
   zero-specificity rules route the warm literals through the tokens — same
   colour in the bronze theme, re-tinted under [data-theme="blue"]. */
:where(svg [fill="#17120c" i]) { fill: var(--dark); }
:where(svg [stroke="#17120c" i]) { stroke: var(--dark); }
:where(svg [stroke="#17120c2b" i]) { stroke: rgba(var(--dark-rgb), .17); }
:where(svg [stroke="#17120c55" i]) { stroke: rgba(var(--dark-rgb), .33); }
:where(svg [stroke="#17120c66" i]) { stroke: rgba(var(--dark-rgb), .4); }
:where(svg [fill="#151513" i]) { fill: var(--ink); }
:where(svg [stroke="#151513" i]) { stroke: var(--ink); }
:where(svg [fill="#f3e8d2" i]) { fill: var(--sand-934); }
:where(svg [stroke="#f3e8d2" i]) { stroke: var(--sand-934); }
:where(svg [stroke="#f3e8d22b" i]) { stroke: rgba(var(--sand-934-rgb), .17); }
:where(svg [stroke="#f3e8d255" i]) { stroke: rgba(var(--sand-934-rgb), .33); }
:where(svg [stroke="#f3e8d266" i]) { stroke: rgba(var(--sand-934-rgb), .4); }
:where(svg [fill="#faf7f0" i]) { fill: var(--sand-977bb); }
:where(svg [fill="rgba(250,247,240,.75)"]) { fill: rgba(var(--sand-977bb-rgb), .75); }
:where(svg [fill="rgba(250,247,240,.14)"]) { fill: rgba(var(--sand-977bb-rgb), .14); }
:where(svg [fill="rgba(250,247,240,.11)"]) { fill: rgba(var(--sand-977bb-rgb), .11); }
:where(svg [stroke="rgba(23,18,12,.28)"]) { stroke: rgba(var(--dark-rgb), .28); }
:where(svg [fill="#a8762f" i]) { fill: var(--bronze-deep); }
:where(svg [stroke="#a8762f" i]) { stroke: var(--bronze-deep); }
:where(svg [fill="#c99a52" i]) { fill: var(--bronze); }
:where(svg [stroke="#c99a52" i]) { stroke: var(--bronze); }
:where(svg [fill="#d8a24a" i]) { fill: var(--bronze-bright); }
:where(svg [stroke="#d8a24a" i]) { stroke: var(--bronze-bright); }
:where(svg [fill="#e9d6af" i]) { fill: var(--sand-882); }
:where(svg [fill="#e7e0d0" i]) { fill: var(--sand-908); }
:where(svg [fill="#221b13" i]) { fill: var(--dark-3); }
:where(svg [stop-color="#a8762f" i]) { stop-color: var(--bronze-deep); }
:where(svg [stop-color="#c99a52" i]) { stop-color: var(--bronze); }

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

body {
  margin: 0;
  /* FULL BLEED. v23 sat in a 1440px card with 40px page padding and a
     border-radius, which is what left the dead space at the top, left and
     right. There is no card here — the ground is the viewport. */
  min-height: 100vh;
  background: var(--ground-flat);
  background-image: var(--ground);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; border-radius: 4px; }

/* ── type ───────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 300;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.75rem, 6.2vw, 5.75rem); font-weight: 200; line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(2rem, 3.9vw, 3.625rem); line-height: 1.1; }
h3 { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.18; }
h4 { font-size: 1.3125rem; line-height: 1.25; font-weight: 400; }
p  { margin: 0; }
em, .it { font-style: italic; font-weight: 300; }

.eyebrow {
  display: block;
  font: 500 var(--fs-label)/1.2 Inter, sans-serif;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.eyebrow--on-dark { color: rgba(var(--bronze-rgb), .92); }
.lede  { font: 400 clamp(1rem, 1.25vw, 1.125rem)/1.78 Inter, sans-serif; color: var(--ink-muted); }
.body  { font: 400 15px/1.72 Inter, sans-serif; color: var(--ink-muted); }
.small { font: 400 13.5px/1.68 Inter, sans-serif; color: var(--ink-soft); }
.num   { font-variant-numeric: tabular-nums; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.shell--narrow { max-width: 960px; }
.shell--flow { max-width: 1160px; }
.shell--wide { max-width: 1560px; }

/* Sections are full-bleed; only their contents are constrained. */
.section { position: relative; padding: clamp(88px, 11vw, 148px) 0; }
.section--tight { padding: clamp(64px, 7vw, 96px) 0; }
.section--dark { background: var(--dark-2); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream); }
.section--dark .body, .section--dark .lede { color: rgba(var(--cream-rgb), .66); }
.section--dark .small { color: rgba(var(--cream-rgb), .5); }

/* A sunken well — the ground pressed IN. Used to separate bands without
   introducing a new colour. */
.section--sunk {
  background: var(--ground-sink);
  box-shadow: inset 0 7px 16px -7px rgba(var(--shade), .18),
              inset 0 -7px 16px -7px rgba(var(--shade), .11);
}

.stack   { display: grid; gap: 22px; }
.stack-sm { display: grid; gap: 12px; }
.grid    { display: grid; gap: 28px; }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 60px; margin-bottom: clamp(48px, 6vw, 84px);
}
.head-row > p { max-width: 320px; margin-bottom: 8px; }

/* ── clay surfaces ──────────────────────────────────────────────────────── */
.clay {
  position: relative;
  /* Matte, and very slightly lighter at the top — the fill carries the light
     direction so the shadow does not have to shout it. No gloss, no sheen. */
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-955) 58%, var(--sand-929) 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-md);
  border: 0;
}
.clay--sm { border-radius: var(--r); box-shadow: var(--clay-sm); }
.clay--lg { border-radius: var(--r-xl); box-shadow: var(--clay-lg); }
.clay--flat { background: linear-gradient(178deg, var(--sand-977) 0%, var(--sand-952) 100%); }
.clay--in {
  box-shadow: var(--clay-in);
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-938) 100%);
  border: 0;
}
.clay--dark {
  background: linear-gradient(178deg, var(--umber-236) 0%, var(--umber-205) 58%, var(--umber-174) 100%);
  box-shadow: var(--clay-dark);
  border: 0;
  color: var(--cream);
}
.clay--dark h3, .clay--dark h4 { color: var(--cream); }

.clay-pad    { padding: clamp(26px, 3vw, 40px); }
.clay-pad-lg { padding: clamp(34px, 4vw, 56px); }

/* interactive clay — lifts toward the light source */
.clay-lift {
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
  will-change: transform;
}
.clay-lift:hover, .clay-lift:focus-visible {
  transform: translate3d(-1px, -4px, 0);
  box-shadow: var(--clay-hover);
}
.clay--dark.clay-lift:hover, .clay--dark.clay-lift:focus-visible { box-shadow: var(--clay-dark-hover); }
.clay-lift:active { transform: translate3d(0, -1px, 0); box-shadow: var(--clay-sm); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 54px; padding: 0 30px;
  font: 500 14.5px/1 Inter, sans-serif; letter-spacing: .002em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}
.btn svg { flex: 0 0 auto; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(178deg, var(--gold-1) 0%, var(--gold-2) 56%, var(--gold-3) 100%);
  color: var(--dark);
  border-color: transparent;
  box-shadow:
     1px  2px  3px rgba(var(--gold-shade-rgb), .16),
     4px  7px 13px rgba(var(--gold-shade-rgb), .20),
    inset 0 -3px 6px rgba(var(--gold-shade-rgb), .26),
    inset 0  1px 1px rgba(var(--gold-hi-rgb), .5);
}
.btn--primary:hover { transform: translate3d(-1px, -3px, 0);
  box-shadow:
     2px  3px  5px rgba(var(--gold-shade-rgb), .18),
     7px 12px 22px rgba(var(--gold-shade-rgb), .24),
    inset 0 -3px 6px rgba(var(--gold-shade-rgb), .26),
    inset 0  1px 1px rgba(var(--gold-hi-rgb), .55); }
.btn--primary:active { transform: none; box-shadow: var(--clay-in); }

.hero .btn--primary:hover,
.section--dark .btn--primary:hover,
.clay--dark .btn--primary:hover,
.hdr--over-dark .btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(var(--gold-hi-2-rgb), .55), 14px 20px 44px rgba(0, 0, 0, .48);
}

.btn--clay {
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  color: var(--ink);
  box-shadow: var(--clay-sm);
  border-color: transparent;
}
.btn--clay:hover { transform: translate3d(-1px, -3px, 0); box-shadow: var(--clay-md); }
.btn--clay:active { transform: none; box-shadow: var(--clay-in); }

.btn--cream {
  background: linear-gradient(178deg, var(--sand-977b) 0%, var(--sand-933) 100%);
  color: var(--dark-2);
  box-shadow:
     2px  3px  5px rgba(0, 0, 0, .22),
     6px 11px 20px rgba(0, 0, 0, .28),
    inset 0 -3px 6px rgba(var(--shade-3-rgb), .16),
    inset 0  1px 1px rgba(255, 255, 255, .7);
}
.btn--cream:hover { transform: translate3d(-1px,-3px,0); background: #fff; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--bronze-deep); color: var(--bronze-deep); }
.btn--ghost-dark { background: transparent; border-color: rgba(var(--cream-rgb),.26); color: var(--cream); }
.btn--ghost-dark:hover { border-color: var(--bronze); color: var(--bronze-bright); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 14px/1 Inter, sans-serif; color: var(--bronze-deep);
}
/* a ≥ 24px tap target that moves nothing (review P5): an invisible hit area
   6px above and below the link, so the many rules that set a link-arrow's own
   margin keep their exact layout. Zero specificity: any positioned variant
   keeps its position. */
:where(.link-arrow) { position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill);
  font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%); color: var(--ink-soft);
  box-shadow: var(--clay-in);
}
.pill--dark { background: linear-gradient(178deg,var(--umber-191) 0%,var(--umber-228) 100%); color: rgba(var(--cream-rgb),.72); box-shadow: var(--clay-dark-in); }

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--head-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease), height .4s var(--ease);
}
.hdr__in { width: 100%; margin: 0; padding: 0 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hdr__logo { position: relative; display: block; }
.hdr__logo img { height: 32px; width: auto; display: block;
  transition: height .4s var(--ease), opacity .4s var(--ease); }
.hdr__logo .logo-white { position: absolute; left: 0; top: 0; opacity: 0; }

/* Over a dark band the chrome is light; on the ivory ground it inverts and
   the bar itself becomes clay. site.js measures EVERY dark band on the page
   (the video hero, dark sections, the slate wall, the footer) and keeps
   hdr--over-dark on while the header's midline is inside one (review B4).
   hdr--drawer is the same inversion while the menu is open. */
.hdr--over-dark .hdr__logo .logo-colour, .hdr--drawer .hdr__logo .logo-colour { opacity: 0; }
.hdr--over-dark .hdr__logo .logo-white, .hdr--drawer .hdr__logo .logo-white { opacity: .96; }
.hdr--over-dark .nav__link { color: rgba(var(--cream-rgb), .82); }
.hdr--over-dark .nav__link:hover, .hdr--over-dark .nav__link[aria-current="page"] { color: var(--cream); }
.hdr--over-dark .burger span, .hdr--drawer .burger span { background: var(--cream); }

/* Scrolled (> 8px, site.js toggles the class from one passive rAF-throttled
   listener): the bar frosts — the page blurs and saturates behind a
   translucent ground tint, with a hairline along its bottom edge. At the very
   top it stays clear. Everything from tokens, so the blue theme frosts cool. */
.hdr--stuck {
  height: 82px;
  background: rgba(var(--ground-rgb), .76);
  backdrop-filter: saturate(165%) blur(18px);
  -webkit-backdrop-filter: saturate(165%) blur(18px);
  box-shadow: inset 0 -1px 0 rgba(var(--ink-rgb), .08), 0 1px 0 rgba(255, 255, 255, .55),
              0 14px 34px rgba(var(--shade), .12);
}
.hdr--stuck .hdr__logo img { height: 27px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr--stuck { background: rgba(var(--ground-rgb), .95); }
}

/* Still over a dark band: the bar condenses but frosts dark, so the inverted
   logo and hamburger keep their contrast. */
.hdr--stuck.hdr--over-dark {
  background: rgba(var(--umber-168-rgb), .6);
  box-shadow: inset 0 -1px 0 rgba(var(--cream-rgb), .09), 0 14px 34px rgba(0, 0, 0, .28);
}

/* Menu open (review B5): the header rides above the veil and the drawer,
   clear, so the logo, the theme pill and the burger-as-X stay visible and
   usable on top of the open menu. Same for the no-JS :target state below. */
.hdr.hdr--drawer { z-index: 97; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── theme toggle: bronze ⇄ blue. A clay pill — a swatch in the current
   accent plus the current theme's name — legible on the ivory ground and,
   in its dark form, over dark bands, the drawer and the open menu. The name
   is keyed to html[data-theme], so it is right before site.js runs. ── */
.theme-tog {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* one width for both names ("Bronze" is the longer), so the pill never
     shrinks out from under the pointer that just clicked it */
  min-width: 9.3em;
  height: 40px; padding: 0 15px 0 11px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-955) 58%, var(--sand-929) 100%);
  box-shadow: var(--clay-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}
.theme-tog:hover { transform: translate3d(-1px, -2px, 0); box-shadow: var(--clay-md); color: var(--ink); }
.theme-tog:active { transform: none; box-shadow: var(--clay-in); }
.theme-tog__dot {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze-bright) 0%, var(--bronze) 55%, var(--bronze-deep) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -1px 2px rgba(0, 0, 0, .18),
              0 0 0 3px rgba(var(--ink-rgb), .05);
}
.theme-tog__t { display: block; }
.theme-tog__t--blue, html[data-theme="blue"] .theme-tog__t--bronze { display: none; }
html[data-theme="blue"] .theme-tog__t--blue { display: block; }
.hdr--over-dark .theme-tog, .hdr--drawer .theme-tog, .drawer .theme-tog {
  color: rgba(var(--cream-rgb), .88);
  background: rgba(var(--dark-rgb), .32);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .16), 0 6px 18px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hdr--over-dark .theme-tog:hover, .hdr--drawer .theme-tog:hover, .drawer .theme-tog:hover { color: var(--cream); }
.hdr--over-dark .theme-tog__dot, .hdr--drawer .theme-tog__dot, .drawer .theme-tog__dot {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 0 0 3px rgba(var(--cream-rgb), .08); }
.drawer .theme-tog { background: rgba(var(--cream-rgb), .07); box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .12); }
@media (max-width: 940px) {
  .theme-tog { height: 36px; padding: 0 13px 0 10px; font-size: var(--fs-label); }
  .theme-tog__dot { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .theme-tog { transition: none; } }
@media print { .theme-tog { display: none; } }

.nav { display: none; }   /* v23 has no nav bar: logo + hamburger only */
.nav__link {
  position: relative; padding: 10px 15px; border-radius: var(--r-pill);
  font: 500 14px/1 Inter, sans-serif; color: var(--ink-muted);
  transition: color .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); background: rgba(255,255,255,.5); box-shadow: var(--clay-in); }
.hdr--over-dark .nav__link[aria-current="page"] { background: rgba(0,0,0,.24); box-shadow: var(--clay-dark-in); }
.nav__cta { margin-left: 12px; min-height: 44px; padding: 0 20px; font-size: 13.5px; }

/* The burger is a real link to #drawer (review L11): with JavaScript it is
   the toggle (site.js cancels the navigation); without, :target opens the
   menu — see the drawer rules. */
.burger {
  position: relative; z-index: 30;
  display: flex; width: 52px; height: 52px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer;
}
.burger span { display: block; width: 26px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), background-color .4s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* ── mobile drawer ──────────────────────────────────────────────────────── */
.drawer-veil {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(9, 9, 8, .55); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .38s var(--ease);
}
.drawer-veil[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 96;
  width: min(452px, 90vw); padding: 104px 44px 44px;
  background: var(--dark-2);
  box-shadow: none;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .44s var(--ease), box-shadow .44s var(--ease),
              visibility 0s linear .44s;
  overflow-y: auto;
}
.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  box-shadow: -30px 0 70px rgba(0, 0, 0, .5);
  transition: transform .44s var(--ease), box-shadow .44s var(--ease), visibility 0s;
}
/* Every destination at one size and weight — the grouped links' — so the
   loose links (Insights, FAQ, Contact) no longer tower over the groups.
   Groups keep their small labels (site.css). */
.drawer__link {
  display: block; padding: 12px 0;
  font: 300 clamp(1.25rem, 3.4vw, 1.5rem)/1.2 Newsreader, Georgia, serif;
  letter-spacing: -.01em; color: var(--cream);
  border-bottom: 1px solid rgba(var(--cream-rgb), .1);
  transition: color .28s var(--ease), padding-left .28s var(--ease);
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--bronze-bright); padding-left: 8px; }
/* the Theme row: label left, the same pill as the header right */
.drawer__theme { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(var(--cream-rgb), .1); }
.drawer__theme .drawer__label { margin: 0; }
.drawer__foot { margin-top: auto; padding-top: 34px; border-top: 1px solid rgba(var(--cream-rgb),.14); }

/* No JavaScript: the burger link's #drawer target opens the menu; the veil
   and the header inversion follow where :has() exists (each in its own rule
   so older engines only drop that rule); a Close link, shown only in this
   state, points at #! — no such element, so nothing scrolls. */
.drawer:target { transform: none; visibility: visible; box-shadow: -30px 0 70px rgba(0, 0, 0, .5); }
/* the Close pill sits where the header's actions are; those step aside
   (the burger cannot close without JS, the theme pill is inert without it) */
.drawer__close { display: none; position: absolute; right: 44px; top: 32px; z-index: 2;
  align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--cream-rgb), .88); background: rgba(var(--cream-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .12); }
.drawer:target .drawer__close { display: inline-flex; }
@media (max-width: 940px) { .drawer__close { right: 24px; top: 24px; height: 36px; font-size: var(--fs-label); } }
body:has(.drawer:target) .drawer-veil { opacity: 1; pointer-events: auto; }
body:has(.drawer:target) .hdr { z-index: 97; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
body:has(.drawer:target) .hdr__logo .logo-colour { opacity: 0; }
body:has(.drawer:target) .hdr__logo .logo-white { opacity: .96; }
body:has(.drawer:target) .hdr__acts { visibility: hidden; }

/* ── hero ───────────────────────────────────────────────────────────────── */
/* Covers the viewport, edge to edge — no card, no margin. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  overflow: hidden;
  isolation: isolate;
}
.hero--short { min-height: min(72svh, 720px); }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media video, .hero__media img.hero__still {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%) scale(1.06);
  object-fit: cover; object-position: center 76%;
  transition: transform 1.1s var(--ease);
}
/* v23's two overlays, kept exactly — they are what makes the footage read
   as sepia bronze rather than as a stock clip. */
.hero__scrim-a { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--umber-173-rgb),.88) 0%, rgba(var(--umber-193-rgb),.62) 27%,
              rgba(var(--umber-202-rgb),.68) 58%, rgba(var(--umber-167-rgb),.94) 100%); }
.hero__scrim-b { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(76% 62% at 50% 46%, rgba(var(--umber-193-rgb),.18) 0%,
              rgba(var(--umber-187-rgb),.34) 34%, rgba(var(--umber-167-rgb),.78) 100%); }
.hero__body {
  position: relative; z-index: 3;
  width: 100%; padding: 0 60px;
  text-align: center;
  transition: transform 1.1s var(--ease);
}
.hero__body h1 { color: var(--cream); }
.hero__sub { margin: 36px auto 0; max-width: 604px;
  font: 400 clamp(1rem, 1.2vw, 1.0625rem)/1.8 Inter, sans-serif;
  color: rgba(var(--cream-rgb), .92); }
.hero__acts { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hero__cue {
  position: absolute; left: 0; right: 0; bottom: 38px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  pointer-events: none;
}
.hero__cue span { font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(var(--cream-rgb), .4); }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }
.hero__cue svg { animation: cue 2.6s ease-in-out infinite; }

/* page hero (inner pages) — clay ground, not video */
.phero {
  position: relative;
  padding: calc(var(--head-h) + clamp(52px, 6vw, 88px)) 0 clamp(40px, 4.5vw, 64px);
  overflow: hidden;
}
.phero::after {
  /* a soft moulded bloom, so an inner page's top is not a flat rectangle */
  content: ""; position: absolute; z-index: 0;
  width: 780px; height: 780px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bloom-rgb),.16) 0%, rgba(var(--bloom-rgb),.05) 46%, rgba(var(--bloom-rgb),0) 70%);
  pointer-events: none;
}
.phero .shell { position: relative; z-index: 1; }
.phero__crumb { display: flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font: 500 12px/1 Inter, sans-serif; color: var(--ink-faint); }
.phero__crumb a:hover { color: var(--bronze-deep); }
.phero h1 { max-width: 24ch; font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.06; }
.phero__lede { margin-top: 26px; max-width: 620px; }

/* ── the 5-stage track (carried from v23, made a real component) ────────── */
.flow__rail { position: relative; height: 66px; margin-bottom: 2px; }
.flow__rail-line { position: absolute; left: 0; right: 0; top: 33px; height: 1px;
  background: var(--line); }
.flow__rail-fill { position: absolute; left: 0; top: 33px; height: 1px;
  background: var(--bronze-deep); width: 20%;
  transition: width .42s var(--ease); }
.flow__dot {
  position: absolute; top: 28px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--line);
  box-shadow: inset 0 -1px 2px rgba(var(--shade), .2);
  border: 0;
  transition: background-color .34s var(--ease), transform .34s var(--ease),
              box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.flow__dot[data-on="true"] {
  background: var(--bronze-deep);
  transform: scale(1.2);
  box-shadow: 0 0 0 5px rgba(var(--bronze-deep-rgb), .14),
              1px 2px 4px rgba(var(--gold-shade-rgb), .3),
              inset 0 -1px 2px rgba(var(--gold-core-rgb), .3);
}
.flow__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.flow__card {
  text-align: left; border: 0; cursor: pointer;
  padding: 30px 26px 34px; border-radius: var(--r);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-955) 58%, var(--sand-929) 100%);
  box-shadow: var(--clay-sm);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease), background-color .42s var(--ease);
}
.flow__card:hover, .flow__card[data-on="true"] {
  transform: translate3d(-1px, -6px, 0);
  box-shadow: var(--clay-hover);
}
/* v23 marked the active stage by warming its ground, not by outlining it. */
.flow__card[data-on="true"] {
  background: linear-gradient(178deg, var(--sand-953) 0%, var(--sand-929b) 58%, var(--sand-900) 100%);
}
.flow__card-num { display: block; font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .2em;
  color: var(--bronze-deep); font-variant-numeric: tabular-nums; }
.flow__card-title { display: block; margin-top: 18px;
  font: 300 clamp(1.25rem, 1.7vw, 1.6875rem)/1.16 Newsreader, Georgia, serif; color: var(--ink); }
.flow__card-body { display: block; margin-top: 13px; font: 400 13px/1.68 Inter, sans-serif;
  color: var(--ink-muted); }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card__icon {
  width: 58px; height: 58px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(178deg, var(--sand-926) 0%, var(--sand-950) 100%);
  box-shadow: var(--clay-in);
  color: var(--bronze-deep);
  margin-bottom: 26px;
}
.clay--dark .card__icon { background: linear-gradient(178deg,var(--umber-191) 0%,var(--umber-228) 100%); box-shadow: var(--clay-dark-in); color: var(--bronze-bright); }
.card__title { margin-bottom: 12px; }
.card__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.card__list li { position: relative; padding-left: 20px; font: 400 13.5px/1.6 Inter, sans-serif;
  color: var(--ink-muted); }
.card__list li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); opacity: .75; }
.clay--dark .card__list li { color: rgba(var(--cream-rgb),.62); }

/* stat tile */
.stat { text-align: left; }
.stat__val { font: 300 clamp(2.5rem, 4vw, 3.75rem)/1 Newsreader, Georgia, serif;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat__lab { margin-top: 12px; font: 400 13.5px/1.6 Inter, sans-serif; color: var(--ink-soft); }
.section--dark .stat__val { color: var(--cream); }
.section--dark .stat__lab { color: rgba(var(--cream-rgb),.56); }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 5px; padding: 6px; border-radius: var(--r-pill);
  background: linear-gradient(178deg, var(--sand-914) 0%, var(--sand-938) 100%); box-shadow: var(--clay-in); }
.tab {
  padding: 11px 22px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 13.5px/1 Inter, sans-serif; color: var(--ink-soft); background: transparent;
  transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(178deg, var(--sand-986) 0%, var(--sand-952) 100%);
  box-shadow: var(--clay-sm);
}
.tabpanel[hidden] { display: none !important; }

/* ── accordion ──────────────────────────────────────────────────────────── */
.acc { display: grid; gap: 14px; }
.acc__item { border-radius: var(--r); overflow: hidden;
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-949) 100%);
  box-shadow: var(--clay-sm); border: 0;
  transition: box-shadow .4s var(--ease); }
.acc__item[data-open="true"] { box-shadow: var(--clay-md); }
.acc__btn {
  width: 100%; padding: 26px 30px; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left; font: 400 clamp(1.0625rem, 1.4vw, 1.25rem)/1.4 Newsreader, Georgia, serif;
  color: var(--ink);
}
/* the item clips overflow, so the ring sits inside the slab (review P7) */
.acc__btn:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: -5px;
  border-radius: calc(var(--r) - 5px); }
.acc__sign { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%); box-shadow: var(--clay-in); color: var(--bronze-deep);
  transition: transform .4s var(--ease); }
.acc__item[data-open="true"] .acc__sign { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.acc__item[data-open="true"] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 30px 28px; font: 400 14.5px/1.75 Inter, sans-serif; color: var(--ink-muted); }

/* ── form ───────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 9px; }
.field > label { font: 500 12px/1 Inter, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; padding: 16px 18px;
  font: 400 15px/1.5 Inter, sans-serif; color: var(--ink);
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%); border: 0;
  border-radius: var(--r-sm); box-shadow: var(--clay-in);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(var(--bronze-bright-rgb),.5);
  box-shadow: var(--clay-in), 0 0 0 3px rgba(var(--bronze-bright-rgb),.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field__err { font: 400 12.5px/1.4 Inter, sans-serif; color: #9d3a2a; min-height: 0; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea {
  border-color: rgba(157,58,42,.5); box-shadow: var(--clay-in), 0 0 0 3px rgba(157,58,42,.12); }
.form__note { font: 400 12.5px/1.6 Inter, sans-serif; color: var(--ink-faint); }
.form__ok {
  padding: 22px 24px; border-radius: var(--r);
  background: linear-gradient(178deg, #f3f7ee 0%, #e5ecdf 100%);
  box-shadow: var(--clay-sm); border: 0;
  font: 400 14.5px/1.7 Inter, sans-serif; color: #3f5137;
}

/* ── constellation teaser ───────────────────────────────────────────────── */
.tease {
  position: relative; min-height: 560px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--dark-2); box-shadow: var(--clay-dark);
  border: 0;
}
.tease__world { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.tease__node { position: absolute; border-radius: 3px; overflow: hidden; opacity: .9; }
.tease__node img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) brightness(.9) sepia(.12); }
.tease__hub { position: absolute; font: 300 17px/1.3 Newsreader, Georgia, serif;
  color: rgba(var(--cream-rgb),.5); white-space: nowrap; transform: translate(-50%, -50%); }
/* The copy sits in the middle of the field, so the middle has to recede
   further than v23's card needed it to — this panel is wider. */
.tease__veil { position: absolute; inset: 0;
  background: radial-gradient(64% 68% at 50% 50%, rgba(var(--dark-2-rgb),.97) 0%,
              rgba(var(--dark-2-rgb),.86) 40%, rgba(var(--dark-2-rgb),.34) 100%); }
.tease__body { position: relative; z-index: 5; min-height: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px var(--gutter); }
.tease__body h2 { color: var(--cream); max-width: 760px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
/* Footer (owner-approved P2, from the mockup): one row on the shell grid —
   logo + blurb | Services | Company | Resources | Get in touch — then a
   hairline and one calm bottom line: copyright + disclaimer left, legal and
   social links right, separated by thin dots. Tablet: the brand takes the
   first row, the four columns share the second. Phone: two-up. */
.ftr { background: var(--dark-2); color: var(--cream); padding: clamp(64px, 8vw, 92px) 0 36px;
  position: relative; }
.ftr__top { display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.3fr);
  gap: 44px clamp(28px, 3.2vw, 56px);
  padding-bottom: 52px; border-bottom: 1px solid var(--line-dark); }
.ftr__brand { max-width: 340px; }
.ftr__brand img { height: 34px; width: auto; }
.ftr__brand p { margin-top: 22px; font: 400 14.5px/1.75 Inter, sans-serif;
  color: rgba(var(--cream-rgb),.52); }
.ftr__col { min-width: 0; }
.ftr__h { margin: 6px 0 20px; font: 500 var(--fs-label)/1.2 Inter, sans-serif; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(var(--cream-rgb),.36); }
/* links: a ≥ 24px line box (3px padding each side) with the rhythm kept —
   13px of margin became 7px + 6px of padding (review P5) */
.ftr__a, .ftr__c { display: block; margin-bottom: 7px; padding: 3px 0; font: 400 14.5px/1.4 Inter, sans-serif;
  color: rgba(var(--cream-rgb),.74); transition: color .26s var(--ease), transform .26s var(--ease); }
.ftr__a:hover, .ftr__c:hover { color: var(--cream); transform: translateX(3px); }
.ftr__c { margin-bottom: 8px; }
.ftr__tag { display: block; margin-bottom: 6px; font: 500 var(--fs-label)/1.2 Inter, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(var(--cream-rgb),.38); }
.ftr__v { display: block; overflow-wrap: anywhere; }
.ftr__hours { margin-top: 4px; font: 400 12.5px/1.65 Inter, sans-serif; color: rgba(var(--cream-rgb),.4); }
.ftr__hours .ftr__tag { margin-bottom: 4px; }
.ftr__hours b { font-weight: 500; color: rgba(var(--cream-rgb),.62); }
.ftr__meta { padding-top: 26px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px 40px; flex-wrap: wrap; }
.ftr__copy, .ftr__links a { font: 400 12.5px/1.6 Inter, sans-serif; color: rgba(var(--cream-rgb),.36); }
.ftr__copy { min-width: 0; }
.ftr__disc { margin-top: 2px; color: rgba(var(--cream-rgb),.28); }
.ftr__ends { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ftr__links { display: flex; flex-wrap: wrap; align-items: baseline; }
.ftr__links + .ftr__links::before { content: "·"; margin: 0 10px; color: rgba(var(--cream-rgb),.22); }
.ftr__links a { padding: 2px 0; transition: color .26s var(--ease); }
/* social marks: 40px tap targets (review P5) drawn exactly where the 22px
   ones were — the boxes overlap their 2px margins, the row hangs 7px past
   the column (the icon is inset 12px in its box) and the separator keeps
   its 13px to the first mark, so nothing visible moves */
.ftr__links--social { gap: 0; align-items: center; align-self: center; margin-right: -7px; }
.ftr__links + .ftr__links--social::before { margin: 0 3px 0 10px; }
.ftr__soc { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 -2px; }
.ftr__soc svg { display: block; }
.ftr__links a:hover { color: rgba(var(--cream-rgb),.74); }
.ftr__dot { margin: 0 10px; font: 400 12.5px/1 Inter, sans-serif; color: rgba(var(--cream-rgb),.22); }
@media (max-width: 1180px) {
  .ftr__top { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .ftr__brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 680px) {
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  /* the third link column and the contacts each take the full row, their
     entries two-up, so the grid stays two-up without a hole */
  .ftr__top > .ftr__col:nth-last-child(2), .ftr__col--touch { grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .ftr__top > .ftr__col:nth-last-child(2) .ftr__h, .ftr__col--touch .ftr__h,
  .ftr__col--touch .ftr__c[href^="mailto:"] { grid-column: 1 / -1; }
  .ftr__col--touch .ftr__hours { margin-top: 0; }
  .ftr__meta { flex-direction: column; gap: 12px; }
}
@media (max-width: 480px) {
  /* no separator dots on phones: a wrapped row never ends in a dangling "·" */
  .ftr__dot, .ftr__links + .ftr__links::before { display: none; }
  .ftr__links { gap: 2px 18px; }
  /* the marks' row starts on the column edge: the first icon is inset 12px
     in its 40px box, less the box's own -2px margin */
  .ftr__links--social { gap: 0; margin-left: -10px; }
}

/* ── scroll reveal ──────────────────────────────────────────────────────── */
/* Opacity plus a small lift. Nothing flies. Applied by JS only when the
   observer is available, so with JS off everything is simply visible. */
[data-rise] { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-rise][data-shown="true"] { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }
  .flow__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__rail { display: none; }
  .hdr__in { padding: 0 32px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  :root { --gutter: 28px; --head-h: 84px; }
  .hdr__in { padding: 0 24px; }
  .hdr__logo img { height: 26px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .head-row > p { max-width: 52ch; }
}
@media (max-width: 680px) {
  :root { --gutter: 22px; }
  .grid, .grid-2, .grid-3, .grid-4, .flow__cards { grid-template-columns: minmax(0, 1fr); }
  .hero__body { padding-bottom: 96px; }
  .hero__acts .btn { width: 100%; }
  .tease, .tease__body { min-height: 480px; }
  .acc__btn { padding: 22px 20px; }
  .acc__panel p { padding: 0 20px 24px; }
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .hero__media video, .hero__media img.hero__still,
  .hero__body, .tease__world { transform: translate(-50%, -50%) scale(1.02); }
  .hero__body, .tease__world { transform: none; }
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print {
  .hdr, .drawer, .drawer-veil, .hero__cue, .hero__media { display: none !important; }
  body { background: #fff; }
  .clay, .clay--dark { box-shadow: none; border: 1px solid #ddd; background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER — the anti-card vocabulary
   ══════════════════════════════════════════════════════════════════════════
   The first inner pages were card grids stacked under a breadcrumb — the
   layout every site has. This layer replaces that with the structures an
   editorial site (the Anthropic register) actually uses:

     · chapter headers    index number + hairline + oversized serif
     · index rows         numbered hairline rows instead of card grids
     · duet               text scrolling past a sticky media panel
     · statement          one full-bleed serif sentence
     · collage            mixed-ratio images revealing on scroll
     · figure             ONE treatment for every photo, so mismatched
                          sources become one family
     · quote band         a pull-quote as a section, not a widget

   Clay remains the material — frames, buttons, wells — but it stops being
   the structure. Cards become the exception again.
   ────────────────────────────────────────────────────────────────────────── */

/* ── display type ───────────────────────────────────────────────────────── */
.display-xl {
  font-family: Newsreader, Georgia, serif; font-weight: 200;
  font-size: clamp(3rem, 7.2vw, 6.75rem);
  line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}
.display-lg {
  font-family: Newsreader, Georgia, serif; font-weight: 250;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.02; letter-spacing: -.026em; text-wrap: balance;
}
.lede-xl {
  font: 300 clamp(1.25rem, 1.9vw, 1.625rem)/1.5 Newsreader, Georgia, serif;
  color: var(--ink-muted); max-width: 30ch; text-wrap: pretty;
}
.section--dark .lede-xl { color: rgba(var(--cream-rgb),.72); }
.prose-measure { max-width: 62ch; }

/* ── chapter header: index + hairline + heading ─────────────────────────── */
.chapter { margin-bottom: clamp(44px, 6vw, 76px); }
.chapter__rule {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 18px; margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.section--dark .chapter__rule { border-color: var(--line-dark); }
.chapter__no {
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .22em;
  color: var(--bronze-deep); font-variant-numeric: tabular-nums;
}
.chapter__label {
  font: 500 var(--fs-label)/1.2 Inter, sans-serif; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.section--dark .chapter__label { color: rgba(var(--cream-rgb),.4); }
.chapter__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.chapter__row > p { max-width: 340px; margin-bottom: 10px; }

/* ── index rows: the list that replaces the card grid ───────────────────── */
.index-list { border-top: 1px solid var(--line); }
.index-row {
  display: grid; grid-template-columns: 88px 1fr minmax(0, 46%) 56px;
  gap: clamp(20px, 3vw, 48px); align-items: baseline;
  padding: clamp(26px, 3.4vw, 42px) 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; position: relative;
  transition: background-color .4s var(--ease), padding-left .4s var(--ease);
}
a.index-row:hover { background: rgba(255, 255, 255, .44); padding-left: 18px; }
.index-row__no {
  font: 500 12px/1.8 Inter, sans-serif; letter-spacing: .2em;
  color: var(--bronze-deep); font-variant-numeric: tabular-nums;
}
.index-row > * { min-width: 0; }
.index-row__title {
  font: 300 clamp(1.5rem, 2.6vw, 2.375rem)/1.12 Newsreader, Georgia, serif;
  letter-spacing: -.018em; color: var(--ink);
  overflow-wrap: break-word;
}
.index-row__body { font: 400 14.5px/1.7 Inter, sans-serif; color: var(--ink-muted); }
.index-row__arrow { justify-self: end; color: var(--bronze-deep); opacity: 0;
  transform: translateX(-8px); transition: opacity .34s var(--ease), transform .34s var(--ease); }
a.index-row:hover .index-row__arrow { opacity: 1; transform: none; }
.section--dark .index-list, .section--dark .index-row { border-color: var(--line-dark); }
.section--dark .index-row__title { color: var(--cream); }
.section--dark .index-row__body { color: rgba(var(--cream-rgb),.6); }
.section--dark a.index-row:hover { background: rgba(var(--cream-rgb),.05); }

/* ── duet: prose scrolling past a sticky media panel ────────────────────── */
.duet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start; }
.duet__media { position: sticky; top: calc(var(--head-h) + 28px); }
.duet__copy > * + * { margin-top: 22px; }
.duet--flip .duet__media { order: -1; }

/* ── statement: one sentence as a section ───────────────────────────────── */
.statement {
  font-family: Newsreader, Georgia, serif; font-weight: 250;
  font-size: clamp(1.875rem, 3.6vw, 3.375rem);
  line-height: 1.22; letter-spacing: -.02em; text-wrap: balance;
  max-width: 24ch; color: var(--ink);
}
.statement em { font-style: italic; color: var(--bronze-deep); }
.section--dark .statement { color: var(--cream); }

/* ── figure: the single photo treatment ─────────────────────────────────
   Every image on the site goes through this frame: clay slab, uniform
   sepia-bronze grade, a caption row underneath. One treatment is what turns
   images from four different sources into one editorial family. */
.figure { position: relative; margin: 0; }   /* the UA default is 1em 40px */
.figure__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--clay-md);
  background: linear-gradient(178deg, var(--sand-935) 0%, var(--sand-908) 100%);
}
.figure__frame > img, .figure__frame > video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) sepia(.14) contrast(.97) brightness(.99);
}
.figure__frame--duo > img { filter: saturate(.25) sepia(.42) contrast(1.02) brightness(1.02); }
.figure__frame--plain > img { filter: none; }
.figure__cap {
  display: flex; justify-content: space-between; gap: 18px; min-width: 0;
  margin-top: 13px; padding: 0 4px;
  font: 400 12.5px/1.55 Inter, sans-serif; color: var(--ink-faint);
}
.figure__cap b { font-weight: 500; color: var(--ink-soft); }
.figure__cap b, .figure__cap span { min-width: 0; overflow-wrap: break-word; }
.collage__item { min-width: 0; }
.section--dark .figure__frame { box-shadow: var(--clay-dark); }
.section--dark .figure__cap { color: rgba(var(--cream-rgb),.42); }
.section--dark .figure__cap b { color: rgba(var(--cream-rgb),.66); }

/* aspect helpers so a collage can mix ratios deliberately */
.ar-45 { aspect-ratio: 4 / 5; } .ar-11 { aspect-ratio: 1 / 1; }
.ar-32 { aspect-ratio: 3 / 2; } .ar-169 { aspect-ratio: 16 / 9; }
.ar-34 { aspect-ratio: 3 / 4; } .ar-21 { aspect-ratio: 2 / 1; }

/* ── collage: the claude-corps move ─────────────────────────────────────
   A 12-col canvas; items place themselves and DRIFT at distinct rates as
   the page scrolls (JS writes --drift-y per frame). Reveal is fade + rise
   with per-item delays. Columns moving at different speeds is what makes
   the field feel alive rather than pasted. */
.collage { display: grid; grid-template-columns: repeat(12, 1fr);
  /* Explicit row heights: with content-sized rows, a frame spanning two rows
     paints only its intrinsic height and leaves a hole below itself. Every
     row is exactly --rh; a 2-row item is 2·rh + the gap, and every frame
     stretches to fill its cell (crop, not letterbox). */
  grid-auto-rows: var(--rh, 320px);
  gap: clamp(14px, 2vw, 28px); align-items: stretch; }
.collage__item figure { height: 100%; display: flex; flex-direction: column; }
.collage__item .figure__frame { flex: 1; min-height: 0; }
.collage__item .figure__frame > img { height: 100%; }
/* A graphic with baked-in text cannot survive a hard crop — chopped words
   read as a bug. `contain` mounts it on the frame like a print on a mat. */
.collage__item .figure__frame > img.fit-contain { object-fit: contain; padding: 8px; }
.collage__item .figure__cap { flex: 0 0 auto; }
.collage__item { transform: translate3d(0, calc(var(--drift-y, 0px) * var(--drift, 0)), 0); }
@media (prefers-reduced-motion: reduce) { .collage__item { transform: none !important; } }

/* ── quote band ─────────────────────────────────────────────────────────── */
.quote { position: relative; max-width: 30ch; }
.quote__mark {
  position: absolute; left: -.55em; top: -.28em;
  font: 300 5.5rem/1 Newsreader, Georgia, serif; color: var(--bronze); opacity: .5;
}
.quote__text {
  font: 300 clamp(1.5rem, 2.6vw, 2.25rem)/1.34 Newsreader, Georgia, serif;
  font-style: italic; letter-spacing: -.014em; color: var(--ink);
}
.quote__who { margin-top: 22px; font: 500 12px/1.6 Inter, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.section--dark .quote__text { color: var(--cream); }
.section--dark .quote__who { color: rgba(var(--cream-rgb),.5); }

/* ── inline giant numerals (stats without tiles) ────────────────────────── */
.figures-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px); padding-top: 34px; border-top: 1px solid var(--line); }
@media (max-width: 940px) { .figures-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section--dark .figures-row { border-color: var(--line-dark); }
.figure-stat__val {
  font: 200 clamp(3.25rem, 6vw, 5.5rem)/1 Newsreader, Georgia, serif;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.figure-stat__val sup { font-size: .45em; color: var(--bronze-deep); font-weight: 300; }
.figure-stat__lab { margin-top: 10px; max-width: 21ch;
  font: 400 13.5px/1.6 Inter, sans-serif; color: var(--ink-soft); }
.section--dark .figure-stat__val { color: var(--cream); }
.section--dark .figure-stat__lab { color: rgba(var(--cream-rgb),.52); }
/* structured cells (owner, 17 Oct): every figure sits in its own ruled cell with the same
   inset, numerals sized so the widest ("12,000+") fits its column, labels on one shared line */
.figures-row { gap: 0; padding-top: 0; border-bottom: 1px solid var(--line); }
.figure-stat { padding: clamp(26px, 2.6vw, 38px) clamp(16px, 2vw, 30px); border-left: 1px solid var(--line); min-width: 0; }
.figure-stat:nth-child(4n+1) { border-left: 0; padding-left: 0; }   /* first cell of every row of four */
.figure-stat:nth-child(n+5) { border-top: 1px solid var(--line); }   /* rows after the first */
.figure-stat__val { font-size: clamp(2.6rem, 4.3vw, 4.25rem); white-space: nowrap; }
.figure-stat__lab { margin-top: 14px; }
.section--dark .figures-row, .section--dark .figure-stat, .section--dark .figure-stat:nth-child(n+5) { border-color: var(--line-dark); }
@media (max-width: 940px) {
  .figure-stat:nth-child(4n+1) { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 30px); }
  .figure-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figure-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .figure-stat:nth-child(n+3) { border-top-color: var(--line-dark); }
}

/* ── person row (leadership) ────────────────────────────────────────────── */
.person { display: grid; gap: 18px; }
.person__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.person__name { font: 400 clamp(1.375rem, 2vw, 1.75rem)/1.15 Newsreader, Georgia, serif; color: var(--ink); }
.person__role { font: 500 var(--fs-label)/1.6 Inter, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bronze-deep); text-align: right; }
.person__bio { font: 400 14px/1.72 Inter, sans-serif; color: var(--ink-muted); max-width: 46ch; }

/* ── ticker: jurisdictions / obligations strip ──────────────────────────── */
.ticker { overflow: hidden; padding: 20px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.section--dark .ticker { border-color: var(--line-dark); }
.ticker__track { display: flex; gap: 56px; width: max-content;
  animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: flex; align-items: center; gap: 56px; white-space: nowrap;
  font: 300 clamp(1.125rem, 1.6vw, 1.5rem)/1 Newsreader, Georgia, serif; color: var(--ink-soft); }
.ticker__item::after { content: "·"; color: var(--bronze); }
.section--dark .ticker__item { color: rgba(var(--cream-rgb),.55); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── coloured grounds: tinted bands, still inside the palette ───────────── */
.section--bronze-wash { background: linear-gradient(180deg, var(--sand-922) 0%, var(--sand-909) 100%); }
.section--slate { background: linear-gradient(180deg, #31404A 0%, #2a3841 100%); color: var(--cream); }
.section--slate h2, .section--slate h3, .section--slate .statement { color: var(--cream); }
.section--slate .body, .section--slate .lede { color: rgba(var(--cream-rgb),.68); }

/* ── reveal variants (JS assigns data-shown) ────────────────────────────── */
[data-rise="left"]  { opacity: 0; transform: translate3d(-26px, 0, 0); }
[data-rise="right"] { opacity: 0; transform: translate3d(26px, 0, 0); }
[data-rise-scale] { opacity: 0; transform: translate3d(0, 26px, 0) scale(1.035);
  transition: opacity .95s var(--ease), transform .95s var(--ease); }
[data-rise-scale][data-shown="true"] { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms); }
[data-stagger][data-shown="true"] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-rise-scale], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .index-row { grid-template-columns: 56px 1fr 40px; }
  /* Explicit placement for every cell, not just body+arrow. Leaving `no` and
     `title` on auto column while `arrow` had an explicit grid-row (but auto
     column) triggered a real CSS Grid auto-placement bug: the arrow's
     definite-row item is placed FIRST (per spec, before the fully-auto
     items), claiming column 1 in row 1 — which then pushed `no` into column 2
     and `title` into column 3 (the 30-40px arrow track). "Entity setup"
     rendered wrapped to one or two characters per line. Pinning all four
     children removes the ambiguity entirely. */
  .index-row__no { grid-column: 1; grid-row: 1; }
  .index-row__title { grid-column: 2; grid-row: 1; }
  .index-row__body { grid-column: 2 / 3; grid-row: 2; margin-top: 8px; }
  .index-row__arrow { grid-column: 3; grid-row: 1; }
  .duet { grid-template-columns: 1fr; }
  .duet__media { position: relative; top: 0; }
  .duet--flip .duet__media { order: 0; }
}
@media (max-width: 680px) {
  .collage { gap: 12px; grid-auto-rows: max(170px, calc(var(--rh, 320px) * .58)); }
  .collage__item { grid-column: auto / span 6 !important; grid-row: auto !important; }
  .index-row { grid-template-columns: 40px 1fr 30px; gap: 14px; }
  .person__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .person__role { text-align: left; }
  .figures-row { gap: 0; }
  .chapter__row { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ── draw-on-reveal: inline SVG strokes draw themselves when revealed ─────
   Every animatable path carries pathLength="1", so dash math is uniform
   regardless of geometry. The wrapper carries data-rise (for the observer)
   plus data-draw. */
[data-draw] .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-draw][data-shown="true"] .draw {
  transition: stroke-dashoffset 1.7s var(--ease) .15s;
  stroke-dashoffset: 0;
}
[data-draw] .draw--slow { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-draw][data-shown="true"] .draw--slow {
  transition: stroke-dashoffset 2.6s var(--ease) .3s;
  stroke-dashoffset: 0;
}
[data-draw] .pop { opacity: 0; transform: scale(.6); transform-origin: center;
  transform-box: fill-box; }
[data-draw][data-shown="true"] .pop {
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  opacity: 1; transform: none;
}
[data-draw][data-shown="true"] .pop:nth-of-type(2) { transition-delay: .9s; }
@keyframes pulse-dot { 0%,100% { opacity: .9 } 50% { opacity: .35 } }
.pulse { animation: pulse-dot 2.8s ease-in-out infinite; }
/* phones: the corridor drawing (gfx_arc) prints at ~40% of its viewBox, so its 10-unit captions would be ~4px
   (QA 22 Oct 2026): keep the two city names, larger, and drop the captions; the text beside it lists the services */
@media (max-width: 600px) {
  .arc .arc__sub { display: none; }
  .arc .arc__name { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-draw] .draw, [data-draw] .draw--slow { stroke-dashoffset: 0 !important; }
  [data-draw] .pop { opacity: 1 !important; transform: none !important; }
  .pulse { animation: none; }
}

/* ── seq: the scroll-driven roll call ─────────────────────────────────────
   A pinned stage; as the page scrolls, portraits arrive one by one into a
   scattered arrangement around a centred title (the claude-corps reveal,
   turned into a roll call). JS sets the section height and flips data-on;
   under reduced motion or on small screens it degrades to a plain grid. */
.seq { position: relative; }
.seq__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* the wave: the six stand along one continuous line — the firm's own motif.
   A faint bronze curve draws itself across the stage with scroll; portraits
   sit on its crests and dips at slight hand-laid tilts, and the title lives
   in the hollow of the curve.

   .seq__canvas is the SAME device the constellation uses (.v20fit): the curve
   and the six items are laid out in one fixed 1440x900 px canvas — matching
   the SVG path's own coordinate space exactly, so item centres sit precisely
   on the curve's crests and dips — and that whole canvas is centred and
   uniformly scaled by JS (`--seqk`, contain-fit: min(stageW/1440, stageH/900))
   to fit any stage size. Nothing about the shape, the relative positions or
   the motion changes at any screen size; only the zoom level does — the same
   principle already proven on the constellation page. */
.seq__canvas { position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px;
  margin: -450px 0 0 -720px; transform: scale(var(--seqk, 1)); transform-origin: 50% 50%; }
.seq__head { position: absolute; left: 50%; top: clamp(48px, 12vh, 132px);
  transform: translateX(-50%); text-align: center; z-index: 3;
  width: min(92vw, 720px); }
.seq__line { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; }
.seq__line path { stroke: var(--bronze-deep); stroke-width: 1.6; fill: none;
  opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.seq__item { position: absolute; z-index: 2;
  width: calc(210px * var(--w, 1));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  will-change: transform; }
.seq__item figure { opacity: 0; transform: translate3d(0, 42px, 0) scale(.94);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
.seq__item[data-on="true"] figure { opacity: 1; transform: none; }
.seq__item .figure__cap { flex-direction: column; gap: 3px; align-items: center;
  text-align: center; }
/* Counter-scale — DAMPENED, not full. Fully countering --seqk (1/k) renders
   captions at their true 20px/10.5px design size regardless of zoom — but at
   phone widths (k≈0.27) six full-size captions no longer fit the gaps
   between six now-tiny portraits; names collided and ran off-screen (caught
   by screenshot, not by any overflow check). --seqCapK (set in JS) is a
   damped root-based recovery instead: captions shrink SOME with the canvas,
   just not all the way — legible without out-growing the space the wave
   actually has at that size. Above ~desktop size (k>=1) it is exactly 1,
   reproducing the original undamped behaviour untouched. transform-origin:top
   keeps the caption anchored just under the (shrunk) frame. */
/* Position OUT of .figure's normal flow (absolute, on the position:relative
   .figure box) so the caption's own height never shifts the frame's centre —
   the frame stays exactly on the curve point either way. Left/-right with a
   small bleed gives the (already narrow, phone-scale) caption a bit more
   room than the frame's own width without letting it run far enough to
   reach a neighbour. */
.seq__item .figure__cap { position: absolute; left: -4px; right: -4px; top: 100%;
  margin-top: 10px; transform-origin: top center;
  transform: scale(var(--seqCapK, 1)); }
.seq__item .figure__cap b, .seq__item .figure__cap span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The wave alternates crest/mid/dip. A caption below a CREST item (the two
   highest points) drops into the vertical band the next mid/dip item's frame
   already occupies — measured directly: real overlap, not a guess. Flipping
   just those two captions above their frame uses the emptier space near the
   top of the composition instead. */
.seq__item[data-cap="top"] .figure__cap { top: auto; bottom: 100%;
  margin-top: 0; margin-bottom: 10px; transform-origin: bottom center; }
.seq__count { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 1;
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .22em; color: rgba(var(--cream-rgb),.5);
  font-variant-numeric: tabular-nums; }
/* ── mobile timeline: a DIFFERENT pattern for narrow screens, not a shrunk
   copy of the desktop wave. The desktop horizontal wave — canvas, curve,
   crest/dip positions, all of it — is completely untouched; it is simply
   hidden below 940px in favour of a vertical alternating timeline that suits
   a tall narrow screen instead of a wide horizontal one. Reveal reuses the
   sitewide [data-rise="left"/"right"] system already used elsewhere on this
   page — no bespoke scroll-progress JS needed, it is the same fade+slide
   every other section on the site already uses. */
@media (max-width: 940px) { .seq--desktop { display: none; } }
.seq-m { display: none; }
@media (max-width: 940px) {
  .seq-m { display: block;
    /* The desktop wave (.seq--desktop, now hidden here) was the page's own
       opening section, and cleared the fixed header itself via its pinned
       .seq__head's own vh-based top offset. Hiding it makes THIS section the
       first thing on the page instead — a normal-flow block needs its own
       real padding to clear the fixed header, which nothing here provided
       (measured directly: the heading rendered underneath the header bar). */
    padding-top: calc(var(--head-h) + clamp(28px, 6vw, 48px)); }
  .seq-m__head { text-align: center; max-width: 46ch; margin: 0 auto 8px; }
  .seq-m__timeline { position: relative; display: grid;
    grid-template-columns: 1fr 2px 1fr; column-gap: clamp(14px, 4vw, 28px);
    padding: clamp(44px, 8vw, 64px) 0 8px; }
  .seq-m__spine { grid-column: 2; grid-row: 1 / -1; width: 2px;
    background: linear-gradient(180deg, rgba(var(--bronze-bright-rgb),0) 0%, var(--bronze-deep) 10%,
      var(--bronze-deep) 90%, rgba(var(--bronze-bright-rgb),0) 100%);
    opacity: .4; }
  .seq-m__stop { max-width: 190px; }
  .seq-m__stop[data-side="left"] { grid-column: 1; justify-self: end; }
  .seq-m__stop[data-side="right"] { grid-column: 3; justify-self: start; }
  .seq-m__stop .figure__cap { flex-direction: column; gap: 3px; align-items: center;
    text-align: center; }
  .seq-m__stop .figure__cap b { color: rgba(var(--cream-rgb),.85); font-size: 1rem; }
  .seq-m__stop .figure__cap span { color: rgba(var(--bronze-bright-rgb),.85); font-size: var(--fs-label);
    letter-spacing: .12em; text-transform: uppercase; }
  .seq-m__count { text-align: center; margin-top: 4px;
    font: 500 var(--fs-label)/1 Inter, sans-serif; letter-spacing: .18em;
    color: rgba(var(--cream-rgb),.4); }
}

/* Reduced motion only — a real accessibility fallback, not a size-based one.
   Screen WIDTH no longer swaps the wave out for a plain grid; --seqk handles
   every size instead. This governs the DESKTOP wave's own fallback; the
   mobile timeline's reveal is reduced-motion-aware separately, through the
   sitewide [data-rise] system. */
.seq--static .seq__stage { position: static; height: auto; overflow: visible;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.seq--static .seq__canvas { position: static; width: auto; height: auto;
  margin: 0; transform: none; display: contents; }
.seq--static .seq__head { position: static; transform: none; flex: 1 1 100%;
  margin: 0 auto 26px; }
.seq--static .seq__line { display: none; }
.seq--static .seq__item { position: static; transform: none;
  width: clamp(140px, 42vw, 200px); }
.seq--static .seq__item .figure__cap { transform: none; }
.seq--static .seq__item figure { opacity: 1; transform: none; }
.seq--static .seq__count { display: none; }

/* tease as a page hero: edge to edge, full viewport, no card */
.tease--hero { border-radius: 0; box-shadow: none; border: 0; min-height: 100svh; }
.tease--hero .tease__body { min-height: 100svh; padding-top: calc(var(--head-h) + 40px); }

/* ── illustration tiles: solid block + paper panel + ink doodle ──────────── */
.illo { width: 100%; height: 100%; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit; }
.illo svg { width: min(64%, 300px); height: auto; display: block; }

/* ── mini rows: compact hairline facts — the anti-card for sidebars ──────── */
.mini { border-top: 1px solid var(--line); }
.mini__row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 28px; padding: 17px 2px; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease), background-color .3s var(--ease); }
a.mini__row:hover { padding-left: 10px; background: rgba(255,255,255,.4); }
.mini__k { flex: 0 0 auto; font: 500 var(--fs-label)/1.6 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); }
.mini__v { font: 350 clamp(1.0625rem, 1.4vw, 1.3125rem)/1.4 Newsreader, Georgia, serif;
  color: var(--ink); text-align: right; }
.mini__v small { display: block; font: 400 12.5px/1.6 Inter, sans-serif; color: var(--ink-soft); }
.section--dark .mini, .section--dark .mini__row { border-color: var(--line-dark); }
.section--dark .mini__v { color: var(--cream); }
.section--dark .mini__k { color: rgba(var(--cream-rgb),.4); }
.section--bronze-wash .mini, .section--bronze-wash .mini__row { border-color: rgba(var(--ink-rgb),.14); }

/* featured entry list (the research-page pattern): title + blurb per hairline */
.entry { display: block; padding: 22px 2px; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease); }
a.entry:hover { padding-left: 10px; }
.entry__cat { font: 500 var(--fs-label)/1.2 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bronze-deep); }
.entry__title { display: block; margin-top: 9px;
  font: 350 clamp(1.125rem, 1.6vw, 1.4375rem)/1.3 Newsreader, Georgia, serif; color: var(--ink); }
.entry__blurb { display: block; margin-top: 7px; font: 400 13.5px/1.65 Inter, sans-serif;
  color: var(--ink-muted); max-width: 46ch; }

/* ── roster: a directory, not a collage ───────────────────────────────────
   Left: one sticky portrait stage — every photo on the SAME warm block, so
   mismatched sources read as one set (the anthropic/leadership treatment).
   Right: hairline name rows; hovering or focusing a row swaps the portrait.
   Names churn — a row is one line of data, and the closing row counts the
   associates instead of pretending to picture everyone. */
.roster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 88px); align-items: start; }
.roster__stage { position: sticky; top: calc(var(--head-h) + 28px); }
.roster__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); box-shadow: var(--clay-md);
  background: linear-gradient(178deg, var(--sand-918) 0%, var(--sand-884) 100%); }
.roster__frame img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(.82) sepia(.14) contrast(.97);
  opacity: 0; transition: opacity .45s var(--ease); }
.roster__frame img.on { opacity: 1; }
.roster__cap { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-top: 13px; padding: 0 4px; }
.roster__cap b { font: 400 1.25rem/1.2 Newsreader, Georgia, serif; color: var(--ink); }
.roster__cap span { font: 500 var(--fs-label)/1.6 Inter, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bronze-deep); text-align: right; }
.roster__row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; width: 100%; padding: 19px 2px; border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; text-align: left;
  transition: padding-left .3s var(--ease), background-color .3s var(--ease); }
.roster__list { border-top: 1px solid var(--line); }
.roster__row:hover, .roster__row:focus-visible, .roster__row[data-on="true"] {
  padding-left: 12px; background: rgba(255, 255, 255, .45); }
.roster__name { font: 350 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 Newsreader, Georgia, serif;
  color: var(--ink); }
.roster__role { font: 500 var(--fs-label)/1.6 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); text-align: right; flex: 0 0 auto; }
.roster__row[data-on="true"] .roster__role { color: var(--bronze-deep); }
.roster__more { padding: 22px 2px; border-bottom: 1px solid var(--line);
  font: 400 14px/1.6 Inter, sans-serif; color: var(--ink-soft); }
@media (max-width: 940px) {
  /* The stage stays — this is the fix, not a new compromise. It used to be
     display:none here, replaced by a static thumbnail per row; that dropped
     the "point at a name, watch the portrait change" interaction entirely on
     touch, exactly the kind of trade the design should not make. The stage
     just stacks ABOVE the list instead of sitting beside it (grid falls back
     to one column; DOM order already puts the stage first), and stays
     sticky so it holds the current portrait in view while you scroll the
     names beneath it — the same feature, reflowed, not swapped out.
     Tap (not hover) drives it here, and .roster__row already has a real
     onClick handler, so touch was never the blocker. */
  .roster { grid-template-columns: 1fr; gap: 40px; }
  .roster__stage { top: calc(var(--head-h) + 16px); }
  /* Name+role side by side (flex:0 0 auto on the role) is what overflowed
     at narrow widths before ("Executive Assistant" ran past the edge,
     measured 19-59px). Stack them instead of trying to fit both on one
     line — same fix already used for .person__role. */
  .roster__row { display: grid; grid-template-columns: 1fr; row-gap: 4px; }
  .roster__name { grid-row: 1; }
  .roster__role { grid-row: 2; margin-left: 0; text-align: left; white-space: normal; }
}


/* ── type floor for small labels (imp-home, 17 Oct 2026) ────────────────────
   The section stylesheets that load after this file set a few small-caps labels
   (roles, captions, step numbers, table heads) below 12px. Each is lifted to the
   --fs-label token here; the `html` prefix outranks the original selector
   whatever the load order, without !important. Only the size changes. */
html .drawer__label, html .sched__k, html .flow__num, html .flow__cap, html .hero__eye,
html .office__tag, html .amap__cities .office__tag, html .role__tag, html .chip small,
html .lf__progress, html .lf__next li::before, html .lg__role,
html .lead__role, html .dept__n, html .ppl__cap span, html .ppl__ghead, html .ppl__role,
html .svc-glance__k, html .sp__no, html .sp__lab, html .seq__cap span,
html .amap__tip, html .amap__legend,
html .post-meta, html .post-body th, html .author__cred,
html .isearch__m, html .search-clear, html .tag-new { font-size: var(--fs-label); }