/* Prescienti — shared stylesheet. Every page links this. */
/* Six tokens. Cool base; the one warm note is the red enamel plate on the
     viewer, which is where the accent is drawn from. */
  :root {
    --sc-canvas:     #EEF1F2;
    --sc-surface:    #E2E7E9;
    --sc-ink:        #12171A;
    --sc-ink-soft:   #5C6871;
    --sc-accent:     #9A2A22;
    --sc-accent-ink: #F4F6F6;
    --sc-font-display: "korolev-compressed", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --sc-font-ui:      "korolev", "Archivo", "Helvetica Neue", system-ui, sans-serif;
    --sc-font-text:    "Newsreader", Georgia, serif;
  }

  body { background: var(--sc-canvas); color: var(--sc-ink); }
  .wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); }

  /* ---- the bar. Chaptered editorial specifies a margin folio and no fixed
     chrome; a six-section advisory site needs persistent navigation, so the
     two are merged into one layer. The wordmark is the Home link, so Home is
     not a nav item. ---- */
  /* The bar's BACKGROUND is full bleed, but its CONTENTS sit in the same
     measure as the page, so one left edge runs the whole height: nav wordmark,
     chapter rules, plates, footer wordmark. Without this the two wordmarks land
     at different x, and the gap widens with the viewport. */
  .bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 1.05rem 0;
    background: rgba(238, 241, 242, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
  }
  .bar--scrolled { border-bottom-color: rgba(18, 23, 26, 0.10); }
  .bar__inner {
    max-width: 78rem; margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    display: flex; align-items: center; gap: 1.25rem;
  }
  .mark { display: block; color: var(--sc-ink); flex: none; }
  .mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
  .mark__svg { display: block; height: clamp(1.6rem, 2.3vw, 2.15rem); width: auto; }
  .bar__ch {
    font-family: var(--sc-font-ui);
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sc-ink-soft); white-space: nowrap;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(18, 23, 26, 0.18);
  }
  .bar__ch b { color: var(--sc-accent); font-weight: 700; }
  .bar__nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
  .nav__item { position: relative; }
  .bar__nav > .nav__item > a {
    display: block;
    font-family: var(--sc-font-ui);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--sc-ink-soft); text-decoration: none;
    padding: 0.5rem 0; transition: color .18s ease;
  }
  .bar__nav > .nav__item > a:hover,
  .nav__item--menu.is-open > a { color: var(--sc-ink); }
  .bar__nav a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

  /* Pages not built yet. Dimmed and inert rather than silently dead, so a
     reviewer can see at a glance what exists. Delete the is-pending class from
     a link as its page lands; remove this rule when the site is complete. */
  .bar__nav a.is-pending, .nav__menu a.is-pending {
    opacity: 0.38; cursor: default; pointer-events: none;
  }
  /* The page you are on. */
  .bar__nav > .nav__item > a[aria-current], .nav__menu a[aria-current] {
    color: var(--sc-ink);
  }
  .bar__nav > .nav__item > a[aria-current]::after {
    content: ""; display: block; height: 1px; margin-top: 0.3rem;
    background: var(--sc-accent);
  }

  /* Mobile menu trigger. Hidden on desktop; the media query below turns it on
     and converts .bar__nav itself into the panel, so there is only ever ONE
     copy of the link list to maintain. */
  .nav__toggle {
    display: none; position: relative; z-index: 2;
    width: 2.75rem; height: 2.75rem; margin: -0.6rem -0.75rem -0.6rem 0;
    padding: 0; background: none; border: 0; cursor: pointer;
    align-items: center; justify-content: center;
  }
  .nav__toggle span {
    display: block; position: absolute; left: 0.75rem; right: 0.75rem;
    height: 1.5px; background: var(--sc-ink);
    transition: transform .22s ease, opacity .18s ease;
  }
  .nav__toggle span:nth-child(1) { transform: translateY(-4px); }
  .nav__toggle span:nth-child(2) { transform: translateY(4px); }
  body.nav-open .nav__toggle span:nth-child(1) { transform: rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { transform: rotate(-45deg); }
  .nav__toggle:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .nav__toggle span { transition: none; } }

  /* Submenu. Set in sentence case rather than the bar's uppercase: the Services
     entries are long, and uppercase at that length reads as shouting and eats
     width. Quiet panel, real shadow with offset, no halo. */
  .nav__menu {
    position: absolute; top: calc(100% + 0.75rem); left: -1rem;
    min-width: 15rem; padding: 0.7rem 0;
    display: flex; flex-direction: column;
    background: var(--sc-canvas);
    border: 1px solid rgba(18, 23, 26, 0.10);
    box-shadow: 0 12px 28px -12px rgba(18, 23, 26, 0.22);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  /* The panel sits 0.75rem below the trigger, which leaves a dead gap the
     pointer must cross to reach the menu. Crossing it dropped :hover and the
     panel closed before you got there, so every submenu link was unreachable
     by mouse. This invisible bridge makes the gap part of the panel's own box.
     It inherits visibility from the panel, so it captures nothing when closed. */
  .nav__menu::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -0.85rem; height: 0.85rem;
  }

  .nav__item--menu:hover > .nav__menu,
  .nav__item--menu:focus-within > .nav__menu,
  .nav__item--menu.is-open > .nav__menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__menu a {
    font-family: var(--sc-font-ui);
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
    line-height: 1.3; color: var(--sc-ink-soft); text-decoration: none;
    padding: 0.6rem 1.4rem; white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
  }
  .nav__menu a:hover { color: var(--sc-ink); background: rgba(18, 23, 26, 0.045); }
  @media (prefers-reduced-motion: reduce) { .nav__menu { transition: none; } }

  /* ---- CTAs. The same pair, same labels, in the hero and the close, exactly
     as the copy document sets them. ---- */
  .ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
  .cta {
    font-family: var(--sc-font-ui);
    font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; padding: 0.95rem 1.6rem;
    border-radius: 999px; border: 1px solid var(--sc-ink);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .cta--primary { background: var(--sc-ink); color: var(--sc-canvas); }
  .cta--primary:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
  .cta--ghost { color: var(--sc-ink); background: transparent; }
  .cta--ghost:hover { background: var(--sc-ink); color: var(--sc-canvas); }
  .cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

  /* ---- hero: a title page. Type on the paper ground, no media above the
     fold. The media starts in chapter one. ---- */
  /* The title plate. One line, nothing else on the screen. */
  .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 18vh; padding-bottom: 10vh; }
  .hero h1 {
    font-family: var(--sc-font-display); font-weight: 900;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 0.96; letter-spacing: -0.03em;
    margin: 0 0 2.2rem; max-width: 14ch; text-wrap: balance;
  }
  .chapter--open { padding-top: 0; }
  /* The opening act carries the page's slowest resolve, so it gets the most
     scroll room. Progress is measured against act height, so a taller act is
     what actually makes the viewer come in more gradually. */
  .chapter--open .text .spacer { height: 40vh; }
  .text .stand {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.4rem, 2.9vw, 2.25rem);
    line-height: 1.28; letter-spacing: -0.01em;
    margin: 0 0 1.8rem; max-width: 22ch; color: var(--sc-ink);
  }
  /* Set at chapter-body size rather than as a small intro: it makes the
     opening act taller, which buys the viewer a longer, slower resolve. */
  .text .sub {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.5; margin: 0; max-width: 34ch; color: var(--sc-ink-soft);
  }

  /* The pronunciation must never break at its hyphens. Marked up rather than
     re-typed with non-breaking hyphens, so the text still matches the copy
     document character for character. */
  .hero .nb { white-space: nowrap; }

  /* ---- statement chapter ----
     No media column at all. Centre anchor, narrow measure, copy set well above
     body size because it is the only thing on the screen. This is the third
     anchor the skill asks for — lead and trail are the checkerboard, centre is
     the one that was unused — and it is how a one-paragraph chapter earns a
     screen without consuming a photograph. */
  .chapter--statement { padding: 12vh 0 14vh; }
  .chapter--statement .wrap {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .chapter--statement .rule {
    width: 2.5rem; height: 1px; background: var(--sc-accent);
    margin: 0 0 3.5rem;
  }
  .chapter--statement p {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    line-height: 1.38; letter-spacing: -0.012em;
    color: var(--sc-ink); max-width: 30ch; margin: 0;
    text-wrap: pretty;
  }
  .chapter--statement .more { margin-top: 3.5rem; }
  @media (max-width: 62rem) {
    .chapter--statement { padding: 8vh 0 9vh; }
    .chapter--statement p { max-width: none; }
    .chapter--statement .rule { margin-bottom: 2.5rem; }
  }

  /* ---- intertitle ----
     Chaptered editorial calls for full-stop intertitles between chapters: the
     page turns, one line holds a screen, then the spread begins. Type only, no
     image, no media column. It is the structural break that stops the
     image/copy checkerboard reading as one repeating unit, and it costs
     nothing but scroll. Words are the document's own section headings. */
  .intertitle {
    min-height: 64vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 4vh; padding-bottom: 4vh;
  }
  /* Set to the hero exactly: same clamp, weight, line-height and tracking.
     A chapter title that outsizes the tagline competes with it. */
  /* An intertitle that opens a statement chapter centres too, so the title
     announces the shape of what follows instead of contradicting it. */
  .intertitle--centre { align-items: center; text-align: center; }

  /* The centred title rises into place under the wheel. Driven off the act's
     own progress, so it tracks the scroll rather than firing on a timer — but
     it completes by p=0.45 and holds, because type still drifting after the
     reader has stopped reading is an effect, not a design. transform and
     opacity only: never animate position. */
  .intertitle--centre h2 {
    /* Window shifted later on purpose. The title sits centred in a 64vh block,
       so it only reaches a comfortable reading position around p=0.5. The old
       0-to-0.45 window finished before you could see it move. This runs 0.22
       to 0.68, which is the span the title is actually on screen for. */
    --t: clamp(0, calc((var(--sc-p, 0) - 0.22) / 0.46), 1);
    /* Starts pale rather than invisible: you watch it resolve instead of
       finding it already there. */
    transform: translateY(calc((1 - var(--t)) * 3.2rem));
    opacity: calc(0.16 + var(--t) * 0.84);
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .intertitle--centre h2 { transform: none; opacity: 1; }
  }

  .intertitle h2 {
    font-family: var(--sc-font-display); font-weight: 900;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 0.96; letter-spacing: -0.03em;
    margin: 0; max-width: 14ch; text-wrap: balance;
    color: var(--sc-ink);
  }
  .intertitle p {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5;
    color: var(--sc-ink-soft); max-width: 40ch; margin: 2.2rem 0 0;
  }
  @media (max-width: 62rem) {
    .intertitle { min-height: 38vh; }
  }

  /* ---- chapters ---- */
  .chapter { padding: 7vh 0 11vh; }
  .chapter__rule { border: 0; border-top: 1px solid var(--sc-ink); margin: 0 0 0.9rem; }
  .chapter__no {
    font-family: var(--sc-font-ui);
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sc-accent); margin: 0 0 4.5rem;
  }
  /* A chapter label that sits inside the text column rather than above the
     spread — used where an intertitle would put a headline directly under the
     page headline. */
  .text p.chapter__no--inline {
    font-family: var(--sc-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sc-accent);
    max-width: none;
    margin: 0 0 1.8rem;
  }

  .spread {
    display: grid; grid-template-columns: auto minmax(0, 27rem);
    justify-content: space-between; gap: 0 clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .spread--text { grid-template-columns: minmax(0, 34rem); justify-content: start; }
  /* Media alternates sides down the page so no two spreads sit the same way. */
  .spread--flip { grid-template-columns: minmax(0, 27rem) auto; }
  .spread--flip .media { order: 2; }
  .spread--flip .text { order: 1; }

  .media { margin: 0; position: sticky; top: 13vh; }
  .focus {
    position: relative; height: min(62vh, 46vw);
    aspect-ratio: 1856 / 2287; overflow: hidden; background: var(--sc-surface);
  }
  .focus img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; will-change: opacity;
  }

  /* Two curves. --slow opens the page: it resolves and settles by roughly four
     fifths, so the promise arrives early. --long carries Chapter I, the longest
     chapter on the page: it starts a little softer and pulls in gradually,
     settling around three fifths of the way through the copy. */
  .focus--mid img[data-step="2"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.04) / 0.20), 1); }
  .focus--mid img[data-step="1"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.22) / 0.21), 1); }
  .focus--mid img[data-step="0"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.41) / 0.23), 1); }

  .focus--long img[data-step="3"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.02) / 0.15), 1); }
  .focus--long img[data-step="2"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.15) / 0.16), 1); }
  .focus--long img[data-step="1"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.29) / 0.16), 1); }
  .focus--long img[data-step="0"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.43) / 0.18), 1); }

  .focus--slow img[data-step="3"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.20), 1); }
  .focus--slow img[data-step="2"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.24) / 0.20), 1); }
  .focus--slow img[data-step="1"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.42) / 0.20), 1); }
  .focus--slow img[data-step="0"] { opacity: clamp(0, calc((var(--sc-p, 0) - 0.60) / 0.22), 1); }

  @media (prefers-reduced-motion: reduce) {
    .focus img { opacity: 1 !important; }
    .media { position: static; }
  }

  figcaption {
    margin-top: 0.9rem; font-family: var(--sc-font-ui);
    font-size: 0.75rem; font-weight: 500; line-height: 1.5;
    color: var(--sc-ink-soft); max-width: 34ch;
  }
  figcaption b { color: var(--sc-ink); font-weight: 700; letter-spacing: 0.06em; }

  .text { padding-top: 9vh; }
  .text p {
    font-family: var(--sc-font-text); font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.5; font-weight: 300; max-width: 34ch;
    margin: 0 0 2.6rem; color: var(--sc-ink);
  }
  .text .spacer { height: 19vh; }
  .spread--text .text { padding-top: 0; }
  .spread--text .text p { max-width: 46ch; }

  /* Plain list, body size. Used where the copy is a list of symptoms rather
     than named items with lead-ins. */
  .points { list-style: none; margin: 0 0 1rem; padding: 0; }
  .points li {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.45;
    color: var(--sc-ink-soft); max-width: 34ch;
    padding-left: 1.1rem; margin: 0 0 0.85rem; position: relative;
  }
  .points li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 0.35rem; height: 1px; background: var(--sc-accent);
  }

  /* Run-in lead-ins, exactly as the copy sets them: the practice name is the
     opening of its own sentence, not a heading lifted out of it. */
  .practice {
    line-height: 1.5; color: var(--sc-ink-soft);
    max-width: 34ch; margin: 0 0 2.8rem !important;
  }
  /* The lead-in takes its own line so the body always starts clean, instead of
     leaving a stray word ("We", "When") hanging off the end of the name. The
     markup is untouched: still one sentence, period intact, read as one
     sentence by a screen reader. Only the line break changes. */
  .practice b {
    display: block;
    font-family: var(--sc-font-ui); font-weight: 700;
    font-size: 0.92em; letter-spacing: -0.005em; color: var(--sc-ink);
    margin-bottom: 0.35rem;
  }

  /* In-chapter headings. The evidence and case-study runs carry eight named
     entries inside two chapters, which neither existing device handles: an
     intertitle is a full plate and cannot repeat eight times, and the inline
     folio label is 10px all-caps, which breaks down at sentence length
     ("The FPI universe is large — and growing again"). */
  .text h3 {
    font-family: var(--sc-font-ui);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    font-weight: 700; line-height: 1.3; letter-spacing: -0.005em;
    color: var(--sc-ink); max-width: 34ch;
    margin: 0 0 0.5rem;
  }
  .text h3 + p { margin-top: 0; }

  /* Two-column option list. The objective list is nine choices the reader
     scans, not a sentence they read: as one pipe-separated paragraph it wrapped
     to seven lines with the separators stranded at the line breaks. Same words,
     same order — the delimiter just stops being a character. */
  .points--two { column-count: 2; column-gap: 2.4rem; }
  .points--two li { break-inside: avoid; max-width: none; }
  @media (max-width: 46rem) { .points--two { column-count: 1; } }

  /* Contact terminus. The one block on the site meant to be acted on rather
     than read, so it is set in display type, one item to a line, above body
     size. Specificity is deliberate: .text p and .chapter--statement p both
     otherwise win and drop it back to running body copy. */
  .contact-lines { margin: 0; width: 100%; }
  .text .contact-lines p,
  .chapter--statement .contact-lines p,
  .contact-lines p {
    font-family: var(--sc-font-ui);
    font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500;
    line-height: 1.45; letter-spacing: -0.004em;
    color: var(--sc-ink); max-width: none; margin: 0 0 0.6rem;
  }
  .contact-lines a {
    color: var(--sc-ink); text-decoration: none;
    border-bottom: 1px solid var(--sc-accent); padding-bottom: 0.12rem;
  }
  .contact-lines a:hover { color: var(--sc-accent); }
  .contact-lines a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

  /* Compact regulatory note used where a full-size statement would overstate
     supporting legal copy. */
  .chapter--statement p.small {
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.62; color: var(--sc-ink-soft);
    max-width: 70ch;
  }

  /* Legal documents. Editorial body copy is set at 36px for a page with six
     paragraphs; a twenty-section privacy policy at that size is unreadable and
     runs to forty screens. These pages get document sizing and a longer
     measure — they are read for reference, not for rhythm. */
  .legal .text p {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.62; color: var(--sc-ink-soft);
    max-width: 70ch; margin: 0 0 1.05rem;
  }
  .legal .text h3 {
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    max-width: 70ch; margin: 2.5rem 0 0.7rem;
  }
  .legal .text > h3:first-child { margin-top: 0; }
  .legal .points { margin: 0 0 1.05rem; }
  .legal .points li {
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.62; max-width: 70ch; margin-bottom: 0.5rem;
  }
  .legal .spread--text { grid-template-columns: minmax(0, 52rem); }
  /* Effective date. Sits under the title as a record, not as copy. */
  .legal .text p.eff {
    font-family: var(--sc-font-ui); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sc-accent); margin: 0 0 2.2rem !important;
  }
  .legal .text p.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important; color: var(--sc-ink) !important; }

  /* Source citations. Deliberately fine print, set well below body size.
     The opacity that used to sit here is gone on purpose: at 0.75 the text
     composited to roughly 3.1:1 against the canvas, which fails AA at any size.
     Smaller type needs MORE contrast, not less, so the size drops and the
     colour goes to full strength. */
  .text p.src, .src {
    font-family: var(--sc-font-ui); font-size: 0.5625rem; font-weight: 500;
    line-height: 1.55; letter-spacing: 0.012em;
    color: var(--sc-ink-soft);
    max-width: 46ch; margin: -1.5rem 0 2.6rem;
  }

  .more {
    display: inline-block; font-family: var(--sc-font-ui);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--sc-ink);
    text-decoration: none; border-bottom: 1px solid var(--sc-accent);
    padding-bottom: 0.2rem;
  }
  .more:hover { color: var(--sc-accent); }
  .more:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

  /* ---- close: a colophon plate ---- */
  .close { padding-top: 12vh; padding-bottom: 14vh; }
  .close h2 {
    font-family: var(--sc-font-display); font-weight: 700;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.02;
    letter-spacing: -0.025em; margin: 0 0 1.4rem; max-width: 21ch; text-wrap: balance;
  }
  .close p {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45;
    margin: 0; max-width: none; color: var(--sc-ink-soft);
  }

  @media (max-width: 62rem) {
    .bar { padding: 0.85rem 0; }
    .bar__inner { gap: 0.9rem; }
    .mark__svg { height: 1.5rem; }
    .bar__ch { display: none; }
    /* Mobile navigation is a full-screen panel, not a scrolling row.
       The row it replaced hid 148px of itself off-screen, and — worse — its
       mask-image clipped the dropdowns out of existence: a mask clips its
       descendants, and the fixed panel sat outside the mask's box, so all
       twelve submenu links were invisible and unhittable on touch.
       .bar__nav IS the panel, so the link list is never duplicated. */
    .nav__toggle { display: flex; margin-left: auto; }
    /* The panel covers the bar, so the wordmark needs to sit above it — the
       mark stays put and the panel opens behind it. */
    .mark { position: relative; z-index: 2; }
    body.nav-open .bar__ch { opacity: 0; }
    /* The bar's backdrop-filter makes it the containing block for fixed
       descendants, which sized the panel to the BAR (~70px) instead of the
       viewport — only the first link was reachable. The blur is dropped here
       and the bar goes opaque, so `inset: 0` means the viewport again. */
    .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sc-canvas); }
    .bar__nav {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 5.5rem 1.5rem 4rem;
      background: var(--sc-canvas);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      mask-image: none;
      opacity: 0; visibility: hidden; transform: translateY(-0.75rem);
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    body.nav-open .bar__nav { opacity: 1; visibility: visible; transform: none; }
    .bar__nav > .nav__item { border-top: 1px solid rgba(18, 23, 26, 0.10); }
    .bar__nav > .nav__item:first-child { border-top: 0; }
    .bar__nav > .nav__item > a {
      display: block; padding: 1.05rem 0; white-space: normal;
      font-size: 0.9375rem; letter-spacing: 0.1em;
    }
    /* Submenus are always open inside the panel — no second tap, nothing to
       discover. That is the whole reason the dropdown mechanic can go away. */
    .nav__menu {
      position: static; min-width: 0;
      opacity: 1; visibility: visible; transform: none;
      background: none; border: 0; box-shadow: none;
      padding: 0 0 0.9rem 0.9rem;
    }
    .nav__menu::before { content: none; }
    .nav__menu a {
      padding: 0.55rem 0; white-space: normal; font-size: 0.875rem;
    }

    .spread, .spread--text { grid-template-columns: 1fr; gap: 0; }
    /* One column. The figure must stay ON SCREEN while the copy is read, or
       the focus pull happens where nobody is looking. */
    .media {
      position: sticky; top: 0; z-index: 3;
      background: var(--sc-canvas); padding: 10vh 0 0.9rem; margin-bottom: 1.5rem;
    }
    /* Copy scrolling under an opaque sticky plate is cut through the middle of
       a line, which reads as a fault. A short fade lets it dissolve. */
    .media::after {
      content: ""; position: absolute; left: 0; right: 0; top: 100%;
      height: 1.6rem; pointer-events: none;
      background: linear-gradient(var(--sc-canvas), rgba(238, 241, 242, 0));
    }
    .focus { height: auto; width: 100%; aspect-ratio: 4 / 5; }
    .text { padding-top: 0; }
    .text .spacer { height: 9vh; }
    /* On the homepage, introduce the firm before asking mobile visitors to
       scroll through the opening image sequence. Desktop retains the original
       image-and-copy spread. */
    .chapter--home-open .text { order: -1; }
    .chapter--home-open .text .spacer { height: 2.5rem; }
    .text p, figcaption, .practice p, .src, .spread--text .text p { max-width: none; }
    .hero { min-height: 76vh; padding-top: 24vh; padding-bottom: 8vh; }
    .cta { padding: 0.9rem 1.35rem; font-size: 0.75rem; }
  }

  /* ---- footer. Sits on every page. Dark ground so the document has a
     definite ending rather than fading into the page. ---- */
  .foot { background: var(--sc-ink); color: var(--sc-canvas); padding: 9vh 0 5vh; }
  .foot__inner {
    max-width: 78rem; margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    display: grid; gap: 4rem;
  }
  /* Sign-off scale. This is where the mark is introduced properly, so it is
     set as a statement rather than as a caption. */
  .foot__mark { display: block; height: clamp(4rem, 11vw, 9rem); width: auto; color: var(--sc-canvas); }
  .foot__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
  .foot__nav a {
    font-family: var(--sc-font-ui); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--sc-canvas); text-decoration: none; opacity: 0.78;
    padding: 0.3rem 0; transition: opacity .18s ease;
  }
  .foot__nav a:hover { opacity: 1; }
  .foot__nav a:focus-visible { outline: 2px solid var(--sc-canvas); outline-offset: 3px; opacity: 1; }
  /* Social links are a separate group in the source document, not part of the
     footer navigation — and mixing "Terms of Use" with "LinkedIn" in one row
     reads as one undifferentiated list. Same type, set quieter and apart. */
  .foot__social { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: -2.6rem; }
  .foot__social a {
    font-family: var(--sc-font-ui); font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--sc-canvas); text-decoration: none; opacity: 0.55;
    padding: 0.3rem 0; transition: opacity .18s ease;
  }
  .foot__social a:hover { opacity: 1; }
  .foot__social a:focus-visible { outline: 2px solid var(--sc-canvas); outline-offset: 3px; opacity: 1; }
  @media (max-width: 62rem) { .foot__social { margin-top: -2.8rem; gap: 0.2rem 1.1rem; } }

  .foot__fine {
    font-family: var(--sc-font-ui); font-size: 0.6875rem; font-weight: 500;
    line-height: 1.9; letter-spacing: 0.03em; color: var(--sc-canvas); opacity: 0.55;
  }
  .foot__fine span { display: block; }
  @media (max-width: 62rem) {
    .foot { padding: 7vh 0 4vh; }
    .foot__mark { height: 3.4rem; }
    .foot__nav { gap: 0.2rem 1.2rem; }
    .foot__nav a { padding: 0.5rem 0; }
  }

  /* Firm · How We Work. A real list, set at body size with run-in lead-ins
     matching the practices on the homepage. */
  .ways { list-style: none; margin: 0; padding: 0; }
  .ways li {
    font-family: var(--sc-font-text); font-weight: 300;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5;
    color: var(--sc-ink-soft); max-width: 34ch; margin: 0 0 2.4rem;
  }
  .ways b {
    display: block; margin-bottom: 0.35rem;
    font-family: var(--sc-font-ui); font-weight: 700;
    font-size: 0.92em; letter-spacing: -0.005em; color: var(--sc-ink);
  }

  /* Our Team. Name and role are one line in the copy; the role is set smaller
     so the roster scans, but the text is unchanged. */
  .bio h2 {
    font-family: var(--sc-font-display); font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05;
    letter-spacing: -0.02em; color: var(--sc-ink);
    margin: 0 0 1.6rem; max-width: 20ch;
  }
  .bio .role {
    font-family: var(--sc-font-ui); font-weight: 700;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sc-accent); margin: 0 0 1.8rem;
  }
  .bio h2 span {
    display: block; margin-top: 0.5rem;
    font-family: var(--sc-font-ui);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sc-accent);
  }
  .bio p { margin-bottom: 1.6rem; }
  .bio p:last-of-type { margin-bottom: 0; }


/* ---- Start-a-conversation form (added Phase 5 prep; uses core tokens) ---- */
#start-a-conversation > .wrap > h3 {
  font-family: var(--sc-font-ui);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--sc-ink); max-width: 34ch;
  margin: 0 0 1.5rem;
}
.convo { max-width: 46rem; }
.convo .hidden-field { position: absolute; left: -9999px; }
.convo__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.convo label { display: block; margin: 0 0 1.25rem; font-family: var(--sc-font-ui);
  font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.convo input, .convo select, .convo textarea { display: block; width: 100%; margin-top: .45rem;
  padding: .7rem .8rem; font-family: var(--sc-font-text); font-size: 1.02rem; color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid transparent; border-radius: 0; box-sizing: border-box; }
.convo input:focus, .convo select:focus, .convo textarea:focus {
  outline: none; border-color: var(--sc-accent); }
.convo textarea { resize: vertical; }
.convo input[type="submit"].cta {
  display: inline-block; width: auto; margin-top: 0; padding: .95rem 1.6rem;
  font-family: var(--sc-font-ui); font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sc-canvas);
  background: var(--sc-ink); border: 1px solid var(--sc-ink); border-radius: 999px; cursor: pointer;
}
.convo__note { font-size: .85rem; line-height: 1.5; color: var(--sc-ink-soft); margin: 1rem 0 0; }
@media (max-width: 720px) { .convo__row { grid-template-columns: 1fr; } }