/* ============================================================
   IALF CPI™ — Base + Components
   ============================================================ */

@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
  }

  body {
    margin: 0;
    background: var(--surface-canvas);
    color: var(--color-charcoal);
    font-family: var(--font-inter);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-feature-settings: "ss01", "ss04";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  /* Paper grain — the warm canvas should not read as flat #f9f8f6 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
  ul, ol { padding: 0; list-style: none; }

  img, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }

  a { color: inherit; text-decoration: none; }

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

  ::selection { background: var(--color-lavender-mist); color: var(--color-ink-navy); }

  :focus-visible {
    outline: 2px solid var(--color-electric-cobalt);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  .skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 999;
    background: var(--color-ink-navy); color: var(--color-paper-white);
    padding: 12px 20px; border-radius: var(--radius-buttons);
    font-size: var(--text-body-sm); font-weight: var(--fw-medium);
    transition: top var(--dur-fast) var(--ease-editorial);
  }
  .skip-link:focus { top: 16px; }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */
@layer base {

  .display {
    font-family: var(--font-sans-tight);
    font-weight: var(--fw-medium);
    font-size: clamp(2.125rem, 5.4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    text-wrap: balance;
    color: var(--color-charcoal);
  }

  .display--sm {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .display--xl {
    font-size: clamp(2.5rem, 7.2vw, 5.25rem);
    line-height: .98;
  }

  /* The signature: one italic serif phrase inside a sans headline. */
  .accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

  .eyebrow {
    display: block;
    font-family: var(--font-inter);
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-bottom: var(--spacing-24);
  }

  .lede {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--color-graphite);
    max-width: 58ch;
  }

  .prose p + p { margin-top: 1.1em; }
  .prose { max-width: 62ch; line-height: 1.6; }

  .serif-line {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .mono-num {
    font-family: var(--font-sans-tight);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
  }
}

/* ============================================================
   LAYOUT
   ============================================================ */
@layer base {

  .shell {
    width: 100%;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 1;
  }

  .shell--wide { max-width: 1400px; }

  .section {
    position: relative;
    padding-block: var(--section-gap);
    /* Transform-based reveals travel up to 32px sideways while the
       mobile gutter is only 20px, which gave the page ~12px of
       horizontal scroll mid-animation. `clip` (not `hidden`) contains
       it without creating a scroll container, so the sticky rail and
       the principles ledger inside still work. */
    overflow-x: clip;
  }

  /* Surface changes carry the rhythm. No dividers, ever. */
  .section--paper { background: var(--surface-paper); }
  .section--ink   { background: var(--surface-ink); color: var(--color-paper-white); }
  .section--ink .display,
  .section--ink .serif-line { color: var(--color-paper-white); }
  .section--ink .eyebrow { color: var(--color-lavender-mist); }
  .section--ink .lede,
  .section--ink .prose { color: rgba(255,255,255,.76); }

  .split {
    display: grid;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .split--sticky > :first-child { position: sticky; top: 14vh; }
    .split--40 { grid-template-columns: minmax(0,.78fr) minmax(0,1fr); }
  }

  .stack        { display: grid; gap: var(--spacing-24); }
  .stack--sm    { display: grid; gap: var(--spacing-16); }
  .stack--lg    { display: grid; gap: var(--spacing-40); }

  /* Grid items default to min-width:auto, so a wide descendant — the
     marquee track is ~3000px — can force its whole column open and
     give the page horizontal scroll on narrow screens. Explicit
     min-width:0 lets the item shrink and its own overflow do the
     clipping. Applies to single-column tracks too, where the
     minmax(0,1fr) on the multi-column rules does not reach. */
  .split > *, .grid > *, .stack > *, .stack--sm > *, .stack--lg > *,
  .audience > *, .outcomes > *, .deck > *, .rings > *, .chain > *,
  .vignettes > *, .calc > *, .page-hero__grid > *, .hero__grid > *,
  .footer__top > * { min-width: 0; }

  .marquee { min-width: 0; max-width: 100%; }
  .section-head { max-width: 46ch; margin-bottom: clamp(40px, 6vw, 80px); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head--center .eyebrow { text-align: center; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ---------- Brand lockup ----------
     The supplied wordmark, used as artwork. It already contains
     "CONTINUOUS PROFESSIONAL IMPACT", so nothing is set in type.
     Never recoloured, never restyled — only scaled. */
  .brand { display: inline-flex; align-items: center; flex: none; }
  .brand__img {
    display: block;
    height: var(--brand-h, 34px);
    width: auto;
    max-width: none;
  }
  .nav .brand__img { height: clamp(26px, 3.4vw, 34px); }
  .nav.is-compact .brand__img { height: clamp(24px, 3vw, 30px); transition: height var(--dur-base) var(--ease-editorial); }
  .footer .brand__img { height: clamp(34px, 4.6vw, 52px); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    /* Label stays on one line. In the nav "Explore the Framework" was
       wrapping to three lines and blowing the bar's height open. */
    white-space: nowrap;
    padding: 13px 26px;
    border-radius: var(--radius-buttons);
    border: 1px solid transparent;
    font-family: var(--font-inter);
    font-size: var(--text-body);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--dur-fast) var(--ease-editorial),
                color var(--dur-fast) var(--ease-editorial),
                border-color var(--dur-fast) var(--ease-editorial),
                transform var(--dur-fast) var(--ease-spring);
  }
  .btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast) var(--ease-editorial); }

  /* Colour is the elevation — never a shadow on a filled button. */
  .btn--primary { background: var(--color-electric-cobalt); color: var(--color-paper-white); }
  /* Border was cream (#f0e9e1) — invisible on the warm hero wash, so
     the button read as plain text. A charcoal-tinted hairline makes
     it a clear secondary button on any surface. */
  .btn--outline { background: transparent; color: var(--color-charcoal); border-color: color-mix(in srgb, var(--color-charcoal) 26%, transparent); }
  .btn--ghost   { background: transparent; color: var(--color-graphite); padding-inline: 16px; }
  .btn--on-ink  { background: var(--color-paper-white); color: var(--color-ink-navy); }
  .btn--outline-ink { background: transparent; color: var(--color-paper-white); border-color: rgba(255,255,255,.28); }
  .btn--sm { padding: 9px 18px; font-size: var(--text-body-sm); }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); }
    .btn--primary:hover { background: #1c37e0; }
    .btn--outline:hover { border-color: var(--color-electric-cobalt); color: var(--color-electric-cobalt); }
    .btn--on-ink:hover  { background: var(--color-lavender-mist); }
    .btn--outline-ink:hover { border-color: var(--color-paper-white); }
    .btn:hover svg { transform: translateX(3px); }
  }
  .btn:active { transform: translateY(0); }

  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

  /* ---------- Badges & pills ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border-radius: var(--radius-buttons);
    background: var(--color-lavender-mist);
    color: var(--color-ink-navy);
    font-size: var(--text-caption);
    font-weight: var(--fw-medium);
    letter-spacing: .02em;
  }
  .badge--num {
    width: 34px; height: 34px; padding: 0;
    justify-content: center;
    background: var(--color-electric-cobalt);
    color: var(--color-paper-white);
    font-family: var(--font-sans-tight);
    font-size: var(--text-body-sm);
    font-weight: var(--fw-semi);
    letter-spacing: -.02em;
    border-radius: var(--radius-buttons);
  }
  .badge--outline {
    background: transparent;
    border: 1px solid var(--color-cream-border);
    color: var(--color-graphite);
  }
  .badge--on-ink { background: rgba(255,255,255,.1); color: var(--color-lavender-mist); }

  /* ---------- Cards ---------- */
  .card {
    position: relative;
    padding: var(--card-padding);
    border-radius: var(--radius-cards);
    background: var(--surface-paper);
    border: 1px solid var(--color-cream-border);
  }
  .card--ink {
    background: var(--surface-ink);
    border-color: transparent;
    color: var(--color-paper-white);
  }
  .card--ink .card__body { color: var(--color-lavender-mist); }
  .card--accent { border: 1.5px solid var(--color-electric-cobalt); }
  .card--plain  { background: transparent; border-color: var(--color-cream-border); }
  .card--lift   { box-shadow: var(--shadow-card); border-color: transparent; }

  .card__title {
    font-family: var(--font-sans-tight);
    font-size: var(--text-heading-sm);
    font-weight: var(--fw-medium);
    letter-spacing: -0.03em;
    line-height: 1.16;
  }
  .card__body { color: var(--color-graphite); font-size: var(--text-body); line-height: 1.6; }
  .card__label {
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-stone);
  }
  .card--ink .card__label { color: rgba(255,255,255,.6); }

  .grid { display: grid; gap: var(--element-gap); }
  @media (min-width: 720px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  @media (min-width: 720px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  /* ---------- Media plate ----------
     Ships as a designed abstract composition in the brand palette.
     Drop a <video> or <img> inside and it takes over automatically. */
  .plate {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-images);
    background: var(--color-lavender-mist);
    aspect-ratio: var(--plate-ratio, 16 / 10);
    isolation: isolate;
  }
  .plate > img, .plate > video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.04);
    z-index: 2;
  }
  .plate::after {
    content: "";
    position: absolute; inset: 0; z-index: 3;
    background: rgba(12,23,84,.06);
    pointer-events: none;
  }
  .plate__art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
  .plate__caption {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
    padding: clamp(20px, 3vw, 32px);
    background: linear-gradient(to top, rgba(12,23,84,.82), rgba(12,23,84,.44) 55%, transparent);
    color: var(--color-paper-white);
  }
  .plate--tall { --plate-ratio: 4 / 5; }
  .plate--square { --plate-ratio: 1 / 1; }

  /* ---------- Spine (vertical progress rail) ---------- */
  .spine { position: relative; padding-left: 40px; }
  .spine::before {
    content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
    width: 1px; background: var(--color-cream-border);
  }
  .spine__fill {
    position: absolute; left: 7px; top: 8px; width: 1px;
    height: 100%;
    background: var(--color-electric-cobalt);
    transform-origin: top;
    transform: scaleY(var(--progress, 0));
  }
  .spine__item { position: relative; }
  .spine__item::before {
    content: ""; position: absolute; left: -40px; top: .55em;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--surface-canvas);
    border: 1px solid var(--color-cream-border);
    z-index: 1;
  }
  .spine__item::after {
    content: ""; position: absolute; left: -36px; top: calc(.55em + 4px);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-electric-cobalt);
    z-index: 2;
    transform: scale(0);
    transition: transform var(--dur-base) var(--ease-spring);
  }
  .spine__item.is-lit::after { transform: scale(1); }
  .section--ink .spine::before { background: rgba(255,255,255,.18); }
  .section--ink .spine__item::before { background: var(--surface-ink); border-color: rgba(255,255,255,.28); }

  /* ---------- Accordion ---------- */
  .accordion { border-top: 1px solid var(--color-cream-border); }
  .accordion__row { border-bottom: 1px solid var(--color-cream-border); }
  .accordion__btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 24px 0;
    background: none; border: 0; cursor: pointer;
    text-align: left;
    font-size: var(--text-body);
    font-weight: var(--fw-medium);
    color: var(--color-charcoal);
    transition: color var(--dur-fast) var(--ease-editorial);
  }
  .accordion__btn svg {
    flex: none; width: 20px; height: 20px; color: var(--color-graphite);
    transition: transform var(--dur-base) var(--ease-editorial), color var(--dur-fast) linear;
  }
  .accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--color-electric-cobalt); }
  @media (hover: hover) and (pointer: fine) { .accordion__btn:hover { color: var(--color-electric-cobalt); } }
  .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-editorial); }
  .accordion__panel > div { overflow: hidden; }
  .accordion__row.is-open .accordion__panel { grid-template-rows: 1fr; }
  .accordion__panel p { padding-bottom: 24px; color: var(--color-graphite); max-width: 62ch; }

  /* ---------- Navigation ----------
     A floating pill bar (August Health's device): a white capsule
     that sits ON the canvas rather than a full-width strip ruled off
     from it. The gap around it is what makes the page feel current. */
  .nav {
    position: sticky; top: 0; z-index: 200;
    padding-top: 14px;
    transition: transform var(--dur-slow) var(--ease-editorial),
                padding-top var(--dur-base) var(--ease-editorial);
  }
  .nav.is-hidden { transform: translateY(-140%); }
  .nav.is-compact { padding-top: 8px; }
  .nav .shell {
    max-width: 1380px;
  }

  .nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: 68px;
    padding: 0 14px 0 24px;
    border-radius: var(--radius-buttons);
    background: color-mix(in srgb, var(--color-paper-white) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--color-cream-border) 80%, transparent);
    box-shadow: var(--shadow-nav);
    transition: height var(--dur-base) var(--ease-editorial),
                background var(--dur-base) linear,
                box-shadow var(--dur-base) linear;
  }
  .nav.is-compact .nav__inner {
    height: 58px;
    background: color-mix(in srgb, var(--color-paper-white) 94%, transparent);
    box-shadow: var(--shadow-widget);
  }

  .nav__links {
    display: none; align-items: center; gap: 2px;
    margin-inline: auto;
    position: relative;
    min-width: 0;
    flex-shrink: 1;
  }
  /* Seven labels plus a logo and a CTA need real room. Below this the
     pill would be forced wider than the page and give the document
     horizontal scroll, so the links move into the drawer instead. */
  @media (min-width: 1160px) { .nav__links { display: flex; } }

  /* Centre links are visible and Contact remains accessible */
  @media (min-width: 1160px) { .nav__actions .btn--ghost { display: inline-flex; } }

  .nav__link {
    position: relative; z-index: 1;
    padding: 7px 8px;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--color-graphite);
    border-radius: var(--radius-buttons);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-editorial);
  }
  @media (min-width: 1260px) {
    .nav__link {
      padding: 7px 10px;
      font-size: 13.5px;
    }
  }
  @media (min-width: 1380px) {
    .nav__link {
      padding: 8px 12px;
      font-size: 14px;
    }
  }
  .nav__link[aria-current="page"] { color: var(--color-charcoal); }

  /* One pill slides between items instead of seven separate
     underlines fading in and out. JS positions it; with JS off the
     current page still reads via the dot below. */
  .nav__pill {
    position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
    border-radius: var(--radius-buttons);
    background: var(--tint-lavender);
    opacity: 0;
    transform: translateX(var(--pill-x, 0)) ;
    width: var(--pill-w, 0);
    transition: transform var(--dur-base) var(--ease-spring),
                width var(--dur-base) var(--ease-spring),
                opacity var(--dur-fast) linear;
    pointer-events: none;
  }
  .nav__links.is-tracking .nav__pill { opacity: 1; }

  .nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 3px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--color-electric-cobalt);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__link:hover { color: var(--color-charcoal); }
  }
  .nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    flex-shrink: 0;
  }
  .nav__actions .btn--primary {
    padding: 9px 18px;
    font-size: 13.5px;
  }
  @media (min-width: 1280px) {
    .nav__actions .btn--primary {
      padding: 10px 22px;
      font-size: 14px;
    }
  }

  /* Small screens: the bar keeps only the wordmark and the menu.
     Both actions already live inside the drawer, so nothing is lost. */
  @media (max-width: 560px) {
    .nav__actions .btn { display: none; }
    .nav__inner { height: 64px; padding-left: 16px; }
    .nav .brand__img { height: 24px; }
  }
  @media (max-width: 760px) and (min-width: 561px) {
    .nav__actions .btn--ghost { display: none; }
  }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--surface-canvas); border: 1px solid var(--color-cream-border);
    cursor: pointer; flex: none;
    transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear;
  }
  @media (hover:hover) and (pointer:fine) {
    .nav__toggle:hover { background: var(--tint-lavender); border-color: transparent; }
  }
  @media (min-width: 1160px) { .nav__toggle { display: none; } }
  .nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--color-charcoal); position: relative; transition: background var(--dur-fast) linear; }
  .nav__toggle span::before, .nav__toggle span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--color-charcoal);
    transition: transform var(--dur-base) var(--ease-editorial);
  }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after  { top:  6px; }
  .nav__toggle[aria-expanded="true"] span { background: transparent; }
  .nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* ---------- Menu overlay ----------
     Previously this used the 0fr -> 1fr grid-row trick. That never
     opened: the row stayed collapsed even with !important, so on every
     screen below 1160px the navigation was unreachable. Replaced with a
     full-screen panel driven by opacity + visibility, which has no
     intrinsic-sizing dependency and cannot silently fail. */
  .nav__drawer {
    position: fixed;
    inset: 0;
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    background: var(--surface-canvas);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 340ms var(--ease-editorial),
                visibility 0s linear 340ms;
  }
  .nav__drawer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--wash-warm); opacity: .7;
  }
  .nav.is-open .nav__drawer {
    opacity: 1;
    visibility: visible;
    transition: opacity 340ms var(--ease-editorial), visibility 0s;
  }
  @media (min-width: 1160px) { .nav__drawer { display: none; } }

  /* > div is the scroll body, > div > div the content column */
  .nav__drawer > div { position: relative; min-height: 100%; display: flex; }
  .nav__drawer > div > div {
    position: relative;
    width: 100%;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding: 108px var(--gutter) 48px;
    display: flex; flex-direction: column; justify-content: center;
  }

  .nav__drawer ul { display: grid; counter-reset: navitem; }
  .nav__drawer li { border-bottom: 1px solid var(--color-cream-border); }
  .nav__drawer li:first-child { border-top: 1px solid var(--color-cream-border); }
  /* Scoped to list items — the CTA below is an <a> too and was
     picking up a stray "09". */
  .nav__drawer li > a {
    counter-increment: navitem;
    display: flex; align-items: baseline; gap: 16px;
    padding: 18px 4px;
    font-family: var(--font-sans-tight);
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
    font-weight: var(--fw-medium);
    letter-spacing: -.045em;
    color: var(--color-charcoal);
    transition: color var(--dur-fast) linear, padding-left var(--dur-base) var(--ease-editorial);
  }
  .nav__drawer li > a::before {
    content: "0" counter(navitem);
    font-family: var(--font-inter); font-size: var(--text-caption);
    font-weight: var(--fw-bold); letter-spacing: .12em;
    color: var(--color-stone); flex: none;
  }
  .nav__drawer li > a[aria-current="page"] { color: var(--color-electric-cobalt); }
  .nav__drawer li > a[aria-current="page"]::before { color: var(--color-electric-cobalt); }
  @media (hover:hover) and (pointer:fine) {
    .nav__drawer li > a:hover { color: var(--color-electric-cobalt); padding-left: 12px; }
  }
  /* The CTA is a button, not a menu row — reset the row styling. */
  .nav__drawer .btn {
    font-family: var(--font-inter);
    font-size: var(--text-body);
    letter-spacing: normal;
    justify-content: center;
    padding: 15px 26px;
    color: var(--color-paper-white);
  }
  .nav__drawer .btn { margin-top: 32px; width: 100%; }

  /* Each row rises in when the panel opens. */
  .nav__drawer li, .nav__drawer .btn {
    opacity: 0; transform: translateY(14px);
    transition: opacity 420ms var(--ease-editorial), transform 420ms var(--ease-editorial);
  }
  .nav.is-open .nav__drawer li,
  .nav.is-open .nav__drawer .btn { opacity: 1; transform: none; }
  .nav.is-open .nav__drawer li { transition-delay: calc(90ms + var(--i, 0) * 45ms); }
  .nav.is-open .nav__drawer .btn { transition-delay: 500ms; }

  /* While the panel is open the bar must stay on top of it, so the
     wordmark and the close control remain reachable. `position: sticky`
     cannot do that once the body stops scrolling, so it switches to
     fixed for the duration. */
  .nav.is-open {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
  }
  .nav.is-open .nav__inner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.is-open .nav__actions .btn { display: none; }
  .nav__toggle { position: relative; z-index: 210; }
  body.nav-locked { overflow: hidden; }

  /* ---------- Footer ---------- */
  .footer { background: var(--surface-ink); color: var(--color-paper-white); padding-block: clamp(56px, 8vw, 96px) 40px; }
  .footer a { color: var(--color-lavender-mist); transition: color var(--dur-fast) linear; }
  @media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--color-paper-white); } }
  .footer__top { display: grid; gap: 48px; }
  @media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: start; } }
  .footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 32px; }
  .footer__rule { height: 1px; background: rgba(255,255,255,.14); margin-block: 48px 24px; position: relative; overflow: hidden; }
  .footer__rule::after { content:""; position:absolute; inset:0; background: var(--color-electric-cobalt); transform: scaleX(var(--draw-x, 0)); transform-origin: left; }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--text-body-sm); color: rgba(255,255,255,.58); }

  /* ---------- Companion widget ---------- */
  .companion {
    position: fixed; z-index: 180;
    left: 50%; bottom: 20px;
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 32px));
    background: var(--surface-paper);
    border: 1px solid var(--color-smoke);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-widget);
    padding: 16px;
    transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) linear;
  }
  .companion[hidden] { display: none; }
  .companion.is-stowed { transform: translateX(-50%) translateY(calc(100% + 28px)); opacity: 0; }

  /* Collapsed state: once past the first screen it shrinks to a pill
     so it stops covering the copy. Hover, focus or tap reopens it. */
  .companion.is-mini {
    width: auto; max-width: min(420px, calc(100vw - 32px));
    padding: 10px 14px;
    border-radius: var(--radius-buttons);
    cursor: pointer;
  }
  .companion.is-mini .companion__chips,
  .companion.is-mini .companion__close { display: none; }
  .companion.is-mini .companion__q {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: min(46vw, 216px);
  }
  .companion.is-mini .companion__head { align-items: center; }
  @media (hover: hover) and (pointer: fine) {
    .companion.is-mini:hover,
    .companion.is-mini:focus-within {
      width: min(400px, calc(100vw - 32px));
      padding: 16px; border-radius: var(--radius-cards); cursor: default;
    }
    .companion.is-mini:hover .companion__chips,
    .companion.is-mini:focus-within .companion__chips { display: flex; }
    .companion.is-mini:hover .companion__close,
    .companion.is-mini:focus-within .companion__close { display: grid; }
    .companion.is-mini:hover .companion__q,
    .companion.is-mini:focus-within .companion__q { white-space: normal; max-width: none; }
    .companion.is-mini:hover .companion__head,
    .companion.is-mini:focus-within .companion__head { align-items: flex-start; }
  }
  .companion.is-mini.is-open {
    width: min(400px, calc(100vw - 32px));
    padding: 16px; border-radius: var(--radius-cards); cursor: default;
  }
  .companion.is-mini.is-open .companion__chips { display: flex; }
  .companion.is-mini.is-open .companion__close { display: grid; }
  .companion.is-mini.is-open .companion__q { white-space: normal; max-width: none; }
  .companion.is-mini.is-open .companion__head { align-items: flex-start; }
  .companion__head { display: flex; align-items: flex-start; gap: 12px; }
  .companion__avatar {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-electric-cobalt); color: var(--color-paper-white);
    display: grid; place-items: center;
    font-family: var(--font-sans-tight); font-size: 11px; font-weight: 700; letter-spacing: -.02em;
  }
  .companion__q { font-size: var(--text-body-sm); line-height: 1.45; color: var(--color-charcoal); font-weight: var(--fw-medium); }
  .companion__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .companion__chip {
    padding: 8px 14px; border-radius: var(--radius-buttons);
    background: var(--surface-canvas); border: 1px solid var(--color-cream-border);
    color: var(--color-charcoal); font-size: var(--text-caption); font-weight: var(--fw-medium);
    transition: border-color var(--dur-fast) linear, background var(--dur-fast) linear;
  }
  @media (hover: hover) and (pointer: fine) {
    .companion__chip:hover { border-color: var(--color-electric-cobalt); background: var(--color-lavender-mist); }
  }
  .companion__close {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%;
    background: transparent; border: 0; cursor: pointer; color: var(--color-stone);
    display: grid; place-items: center;
  }
  @media (hover: hover) and (pointer: fine) { .companion__close:hover { color: var(--color-charcoal); } }

  /* ---------- Scroll progress hairline ---------- */
  .scrollbar-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
    background: var(--color-electric-cobalt);
    transform-origin: left;
    transform: scaleX(0);
  }

  /* ---------- Tables ---------- */
  .table-wrap { overflow-x: auto; border-radius: var(--radius-cards); border: 1px solid var(--color-cream-border); background: var(--surface-paper); }
  table.data { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); min-width: 560px; }
  table.data th, table.data td { padding: 16px 20px; text-align: left; vertical-align: top; }
  table.data thead th {
    font-size: var(--text-caption); font-weight: var(--fw-bold);
    letter-spacing: .12em; text-transform: uppercase; color: var(--color-stone);
    border-bottom: 1px solid var(--color-cream-border);
  }
  table.data tbody tr + tr td { border-top: 1px solid var(--color-cream-border); }
  table.data td:first-child { font-weight: var(--fw-medium); color: var(--color-charcoal); }
  table.data .num { font-variant-numeric: tabular-nums; }
  table.data .pos { color: var(--color-electric-cobalt); font-weight: var(--fw-medium); }

  /* ---------- Marquee ---------- */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item {
    white-space: nowrap; padding: 9px 18px; border-radius: var(--radius-buttons);
    background: var(--color-lavender-mist); color: var(--color-ink-navy);
    font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  }
  .marquee--ink .marquee__item { background: rgba(255,255,255,.08); color: var(--color-lavender-mist); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  .motion-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-buttons); padding: 7px 14px; cursor: pointer;
    font-size: var(--text-caption); font-weight: var(--fw-medium); color: var(--color-graphite);
  }
  .section--ink .motion-toggle { border-color: rgba(255,255,255,.25); color: var(--color-lavender-mist); }

  /* ---------- Forms ---------- */
  .field { display: grid; gap: 8px; }
  .field label { font-size: var(--text-body-sm); font-weight: var(--fw-medium); }
  .field input, .field textarea, .field select {
    width: 100%; padding: 14px 16px;
    background: var(--surface-paper);
    border: 1px solid var(--color-smoke);
    border-radius: var(--radius-inputs);
    font-size: var(--text-body);
    transition: border-color var(--dur-fast) linear;
  }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-electric-cobalt); }
  .field__hint { font-size: var(--text-caption); color: var(--color-stone); }
  .field textarea { resize: vertical; min-height: 140px; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .u-center       { text-align: center; }
  .u-max-46       { max-width: 46ch; }
  .u-max-56       { max-width: 56ch; }
  .u-mt-8         { margin-top: var(--spacing-8); }
  .u-mt-16        { margin-top: var(--spacing-16); }
  .u-mt-24        { margin-top: var(--spacing-24); }
  .u-mt-32        { margin-top: var(--spacing-32); }
  .u-mt-40        { margin-top: var(--spacing-40); }
  .u-mt-56        { margin-top: var(--spacing-56); }
  .u-mt-80        { margin-top: clamp(48px, 7vw, 80px); }
  .u-muted        { color: var(--color-graphite); }
  .u-quiet        { color: var(--color-stone); }
  .u-cobalt       { color: var(--color-electric-cobalt); }
  .u-ink          { color: var(--color-ink-navy); }
  .u-nowrap       { white-space: nowrap; }
  /* NOTE: `content-visibility: auto` was tried here and removed.
     Across a ~25,000px page the intrinsic-size estimate kept
     re-resolving as sections entered and left, which made the
     document height unstable — anchor links and scrollIntoView
     landed in the wrong place and the scrollbar jumped. The paint
     saving was not worth a broken scroll position. Kept as a
     no-op hook so section markup does not have to change. */
  .u-defer        { }
}