/* ==========================================================================
   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 {
  /* ground — v23's radial ivory, used full-bleed instead of inside a card */
  --ground: radial-gradient(120% 100% at 18% 8%, #fdfcf9 0%, #f3f0e8 46%, #e9e3d6 100%);
  --ground-flat: #f3f0e8;
  --ground-sink: #ebe5d8;

  /* 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(248, 243, 232, .12);

  /* ── 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 */
  /* the same ground / dark / ink / cream as above, as rgb triplets for
     rgba() tints — the header's frost sheet reads them */
  --ground-rgb: 243, 240, 232;
  --dark-rgb: 23, 18, 12;
  --ink-rgb: 21, 21, 19;
  --cream-rgb: 248, 243, 232;

  --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(224, 198, 152, .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(224, 198, 152, .13);
  --clay-dark-in:
    inset  4px  5px 10px rgba(0, 0, 0, .42),
    inset -1px -2px  3px rgba(224, 198, 152, .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;
}

/* ── 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 10.5px/1 Inter, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.eyebrow--on-dark { color: rgba(201, 154, 82, .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(248, 243, 232, .66); }
.section--dark .small { color: rgba(248, 243, 232, .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, #fbf8f2 0%, #f4f0e6 58%, #ece7db 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, #faf7f1 0%, #f3efe5 100%); }
.clay--in {
  box-shadow: var(--clay-in);
  background: linear-gradient(178deg, #e9e3d5 0%, #efeade 100%);
  border: 0;
}
.clay--dark {
  background: linear-gradient(178deg, #241d15 0%, #1c1610 58%, #150f09 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, #e0ad58 0%, #c9933f 56%, #b07f2d 100%);
  color: #17120c;
  border-color: transparent;
  box-shadow:
     1px  2px  3px rgba(120, 84, 24, .16),
     4px  7px 13px rgba(120, 84, 24, .20),
    inset 0 -3px 6px rgba(120, 84, 24, .26),
    inset 0  1px 1px rgba(255, 244, 216, .5);
}
.btn--primary:hover { transform: translate3d(-1px, -3px, 0);
  box-shadow:
     2px  3px  5px rgba(120, 84, 24, .18),
     7px 12px 22px rgba(120, 84, 24, .24),
    inset 0 -3px 6px rgba(120, 84, 24, .26),
    inset 0  1px 1px rgba(255, 244, 216, .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(255, 240, 210, .55), 14px 20px 44px rgba(0, 0, 0, .48);
}

.btn--clay {
  background: linear-gradient(178deg, #fbf8f2 0%, #f0ece1 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, #fbf7ee 0%, #efe8da 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(120, 100, 70, .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(248,243,232,.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);
}
.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 11.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(178deg, #e9e3d5 0%, #f0ebdf 100%); color: var(--ink-soft);
  box-shadow: var(--clay-in);
}
.pill--dark { background: linear-gradient(178deg,#191309 0%,#221b12 100%); color: rgba(248,243,232,.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 { position: relative; 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 the dark hero the chrome is light; once the page scrolls onto the
   ivory ground it inverts and the bar itself becomes clay. Same inversion
   idea v23 used, just driven by scroll instead of by a keyframe track. */
.hdr--over-dark .hdr__logo .logo-colour { opacity: 0; }
.hdr--over-dark .hdr__logo .logo-white { opacity: .96; }
.hdr--over-dark .nav__link { color: rgba(248, 243, 232, .82); }
.hdr--over-dark .nav__link:hover, .hdr--over-dark .nav__link[aria-current="page"] { color: var(--cream); }
.hdr--over-dark .burger span { background: var(--cream); }

/* Round 3: at rest (page top) the band is transparent — the hero or the
   page's own ground shows through it. Once the page has scrolled (stuck) it
   condenses AND FROSTS: ::before is a blurred, translucent sheet of the
   ground colour, exactly the bar's box, so whatever scrolls under the band
   is muted and the logo, nav and CTA stay legible — no heading, roster row
   or card ever runs through the chrome. Over a dark ground (site.js samples
   what is actually painted under the bar and sets .hdr--over-dark) the same
   sheet is drawn in the dark. */
.hdr--stuck {
  height: 82px;
  background: transparent;
  box-shadow: none;
}
.hdr--stuck .hdr__logo img { height: 27px; }
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  background: rgba(var(--ground-rgb), .8);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), .06);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: opacity .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr--stuck::before { opacity: 1; }
.hdr--over-dark::before {
  background: rgba(var(--dark-rgb), .68);
  box-shadow: 0 1px 0 rgba(var(--cream-rgb), .08);
}
@media (max-width: 940px) {
  /* the phone band is already 84px: it does not condense, so the frosted
     sheet and the elements that pin under the band (the team roster's stage
     sits at exactly var(--head-h)) share one edge — no 2px sliver of the
     page between them */
  .hdr--stuck { height: var(--head-h); }
  .hdr--stuck .hdr__logo img { height: 26px; }
}

/* ── the visible nav (Round 2) ───────────────────────────────────────────
   Centred in the band from 941px up; below that the burger + drawer carry
   the same destinations. ONE type size for every link — top level and
   dropdown alike: Inter 500 14px, letter-spacing .05em (Round 3). */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(24px, 2.8vw, 44px);
  margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 10px 0; border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1 Inter, sans-serif; letter-spacing: .05em; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: color .28s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; opacity: .75;
  transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after,
.nav__link[aria-current="page"]::after, .nav__item[data-current="true"] > .nav__link::after { transform: scaleX(1); }
.nav__chev { opacity: .55; transition: transform .3s var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.hdr--over-dark .nav__link { color: rgba(248, 243, 232, .86); }
.hdr--over-dark .nav__link:hover, .hdr--over-dark .nav__link[aria-expanded="true"],
.hdr--over-dark .nav__link[aria-current="page"] { color: var(--cream); }

/* dropdown: a clay panel under the trigger (state is data-open, set by site.js) */
.nav__panel {
  position: absolute; left: -16px; top: calc(100% + 8px); z-index: 5; min-width: 236px;
  padding: 10px 8px; border-radius: var(--r);
  background: linear-gradient(178deg, #fbf8f2 0%, #f0ece1 100%);
  box-shadow: var(--clay-lg);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }  /* hover bridge */
.nav__panel[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
.nav__sub {
  display: block; padding: 11px 16px; border-radius: 14px;
  font: 500 14px/1.25 Inter, sans-serif; letter-spacing: .05em; color: var(--ink-muted);
  white-space: nowrap;
  transition: color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.nav__sub:hover, .nav__sub:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: var(--clay-in); outline: none; }
.nav__sub[aria-current="page"] { color: var(--bronze-deep); }
@media (min-width: 941px) {
  .nav { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

.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); }
@media (min-width: 941px) { .burger { display: none; } }   /* the visible nav carries the destinations */

/* ── 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;
}
.drawer__link {
  display: block; padding: 13px 0;
  font: 300 1.5rem/1.15 Newsreader, Georgia, serif;
  letter-spacing: -.018em; color: var(--cream);
  border-bottom: 1px solid rgba(248, 243, 232, .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; }
.drawer__foot { margin-top: auto; padding-top: 34px; border-top: 1px solid rgba(248,243,232,.14); }

/* ── 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(20,15,9,.88) 0%, rgba(26,19,12,.62) 27%,
              rgba(28,21,13,.68) 58%, rgba(18,14,9,.94) 100%); }
.hero__scrim-b { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(76% 62% at 50% 46%, rgba(26,19,12,.18) 0%,
              rgba(24,18,11,.34) 34%, rgba(18,14,9,.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(248, 243, 232, .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 10px/1 Inter, sans-serif; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(248, 243, 232, .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(216,162,74,.16) 0%, rgba(216,162,74,.05) 46%, rgba(216,162,74,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: #d6cfbd;
  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(168, 118, 47, .14),
              1px 2px 4px rgba(120, 84, 24, .3),
              inset 0 -1px 2px rgba(90, 60, 12, .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, #fbf8f2 0%, #f4f0e6 58%, #ece7db 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, #f6efdf 0%, #efe7d4 58%, #e7ddc7 100%);
}
.flow__card-num { display: block; font: 500 10.5px/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, #ece6d7 0%, #f3eee2 100%);
  box-shadow: var(--clay-in);
  color: var(--bronze-deep);
  margin-bottom: 26px;
}
.clay--dark .card__icon { background: linear-gradient(178deg,#191309 0%,#221b12 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(248,243,232,.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(248,243,232,.56); }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 5px; padding: 6px; border-radius: var(--r-pill);
  background: linear-gradient(178deg, #e8e2d4 0%, #efeade 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, #fdfaf4 0%, #f3efe5 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, #fbf8f2 0%, #f2eee4 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);
}
.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, #e9e3d5 0%, #f0ebdf 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, #e9e3d5 0%, #f0ebdf 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(216,162,74,.5);
  box-shadow: var(--clay-in), 0 0 0 3px rgba(216,162,74,.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(248,243,232,.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(27,22,16,.97) 0%,
              rgba(27,22,16,.86) 40%, rgba(27,22,16,.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 ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--dark-2); color: var(--cream); padding: clamp(64px, 8vw, 92px) 0 36px;
  position: relative; }
.ftr__top { display: flex; justify-content: space-between; gap: 80px;
  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(248,243,232,.52); }
.ftr__cols { display: flex; gap: 72px; flex-wrap: wrap; }
.ftr__h { margin: 0 0 20px; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(248,243,232,.36); }
.ftr__a { display: block; margin-bottom: 13px; font: 400 14.5px/1.4 Inter, sans-serif;
  color: rgba(248,243,232,.74); transition: color .26s var(--ease), transform .26s var(--ease); }
.ftr__a:hover { color: var(--cream); transform: translateX(3px); }
.ftr__meta { padding-top: 26px; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; flex-wrap: wrap; }
.ftr__meta p, .ftr__meta a { font: 400 12.5px/1 Inter, sans-serif; color: rgba(248,243,232,.34); }
.ftr__meta a:hover { color: rgba(248,243,232,.7); }

/* ── 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; }
  .ftr__top { flex-direction: column; gap: 44px; }
}
@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; }
  .ftr__cols { gap: 36px; }
  .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(248,243,232,.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 10.5px/1 Inter, sans-serif; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-faint);
}
.section--dark .chapter__label { color: rgba(248,243,232,.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(248,243,232,.6); }
.section--dark a.index-row:hover { background: rgba(248,243,232,.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, #efe9db 0%, #e7e0d0 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(248,243,232,.42); }
.section--dark .figure__cap b { color: rgba(248,243,232,.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(248,243,232,.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(248,243,232,.52); }

/* ── 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 11px/1.6 Inter, sans-serif; letter-spacing: .16em;
  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(248,243,232,.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, #efe4cd 0%, #ece0c6 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(248,243,232,.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: 28px; }
  .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; }
@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(248,243,232,.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(216,162,74,0) 0%, var(--bronze-deep) 10%,
      var(--bronze-deep) 90%, rgba(216,162,74,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(248,243,232,.85); font-size: 1rem; }
  .seq-m__stop .figure__cap span { color: rgba(216,162,74,.85); font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase; }
  .seq-m__count { text-align: center; margin-top: 4px;
    font: 500 11px/1 Inter, sans-serif; letter-spacing: .2em;
    color: rgba(248,243,232,.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 10.5px/1.7 Inter, sans-serif; letter-spacing: .2em;
  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(248,243,232,.4); }
.section--bronze-wash .mini, .section--bronze-wash .mini__row { border-color: rgba(21,21,19,.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 10.5px/1 Inter, sans-serif; letter-spacing: .2em;
  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, #EDE3CC 0%, #E3D8BE 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 10.5px/1.6 Inter, sans-serif; letter-spacing: .16em;
  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 10.5px/1.7 Inter, sans-serif; letter-spacing: .18em;
  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; }
}