/* ============================================================
     FONTS — PP Neue Montreal (local)
     ============================================================ */
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: block;
  }
  @font-face {
    font-family: 'Neue Montreal';
    src: url('ppneuemontreal-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: block;
  }

  /* ============================================================
     TOKENS
     ============================================================ */
  :root {
    /* Base palette */
    --bg:            #08090a;   /* near-black */
    --fg:            #f7f8f8;   /* off-white */
    /* Secondary/tertiary text: darker shades of the SAME off-white hue,
       not transparent grey. Derived from #f7f8f8 stepped toward the bg. */
    --fg-secondary:  #a9adb0;   /* ~70% step from fg toward bg */
    --fg-tertiary:   #6b6f73;   /* ~45% step */
    --fg-quaternary: #3f4346;   /* ~22% step */

    /* Spacing — 8px baseline */
    --space-1:  0.5rem;
    --space-2:  1rem;
    --space-3:  1.5rem;
    --space-4:  2rem;
    --space-5:  2.5rem;
    --space-6:  3rem;
    --space-7:  4rem;
    --space-8:  5rem;
    --space-9:  6rem;
    --space-10: 8rem;
    --space-11: 10rem;
    --space-12: 14rem;

    /* Vertical anchors — these align Hi! (sidebar) with "I bring..." (main intro).
       Top of viewport to brand:   --anchor-top
       Brand to nav stack:         --anchor-gap
       Brand intrinsic height:     --brand-h (≈ fs-nav * 1.1)
       Top of "Hi!" = --anchor-top + --brand-h + --anchor-gap
       Top of intro must equal that value (set as #hi padding-top). */
    --anchor-top:   var(--space-7);   /* 64px from viewport top to brand top */
    --anchor-gap:   var(--space-6);   /* 48px between brand and nav */
    --brand-h:      1.79rem;           /* 26px * 1.1 line-height ≈ 28.6px ≈ 1.79rem */

    /* Type */
    --fs-100: 0.8125rem;
    --fs-200: 0.9375rem;
    --fs-300: 1.0625rem;
    /* Fluid type — vw anchored so the ~1280px size matches the old fixed value,
       scales down on narrow screens, grows (bounded) on wide ones. */
    --fs-nav:  clamp(1.375rem,  2.03vw, 1.875rem);
    --fs-400:  clamp(1.125rem,  1.64vw, 1.5rem);
    --fs-500:  clamp(1.3125rem, 2.03vw, 1.9rem);
    --fs-600:  clamp(1.5rem,    2.58vw, 2.5rem);
    --fs-700:  clamp(1.75rem,   3.2vw,  3rem);
    --fs-display-md: clamp(2.5rem, 4.5vw, 3.75rem);
    --fs-display-lg: clamp(2.75rem, 5.5vw, 4.5rem);

    --lh-body:    1.4;
    --lh-h1:      1.02;
    --lh-display: 0.96;

    --tr-caps:    0.06em;
    --tr-label:   0.02em;
    --tr-body:    -0.005em;
    --tr-display: -0.035em;
    --tr-mega:    -0.045em;

    /* PAGE GRID — 12 cols, edge to edge, sidebar lives in cols 1–2 */
    --cols:    12;
    --gutter:  var(--space-3);   /* inter-column gutter — held constant across breakpoints */
    --page-pad-x: var(--space-2);   /* outer margin — steps up at 600 / 1020 (see below) */

    /* Case-study reading column */
    --reading-max:     48rem;       /* 768px cap on the reading column */
    --sidebar-reserve: 17rem;       /* ~272px — clears the fixed desktop sidebar footprint */

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-1: 180ms;
    --dur-2: 320ms;
    --dur-3: 520ms;
    --dur-4: 800ms;
  }
  /* Outer margin steps up with viewport; gutter stays constant. */
  @media (min-width: 600px) {
    :root { --page-pad-x: var(--space-4); }
  }
  @media (min-width: 1020px) {
    :root { --page-pad-x: var(--space-7); }
  }

  /* RESET */
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;       /* reserve scrollbar space so menu scroll-lock can't shift layout */
    overflow-x: clip;               /* no horizontal scroll at the root */
  }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
  body {
    font-family: 'Neue Montreal', 'Neue Haas Grotesk', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: var(--fs-300);
    line-height: var(--lh-body);
    font-weight: 400;
    letter-spacing: var(--tr-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  blockquote, p, h1, h2, h3, figure { margin: 0; }
  ::selection { background: var(--fg); color: var(--bg); }
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
    border-radius: 2px;
  }

  .skip-link {
    position: absolute; top: -100px; left: var(--space-3);
    background: var(--fg); color: var(--bg);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-200); font-weight: 500;
    z-index: 100;
    transition: top var(--dur-2) var(--ease-out);
  }
  .skip-link:focus-visible { top: var(--space-3); outline: none; }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* ============================================================
     BODY COPY — one type spec shared by every prose paragraph on
     the site. Layout (grid placement, margins) stays with each
     class; only the type lives here, so the classes cannot drift.

     Wrapping is deliberately left at the browser default (greedy).
     text-wrap: pretty was removed: WebKit reflows a whole paragraph
     to even out the rag while Chromium only adjusts the last lines,
     so the same copy broke differently on iOS than on desktop.
     ============================================================ */
  .cs-body,
  .cs-point__body,
  .case__desc,
  .tenets__copy {
    font-size: var(--fs-300);
    line-height: 1.5;
    color: var(--fg-secondary);
    letter-spacing: var(--tr-body);
  }
  .tenets__copy strong { color: var(--fg); font-weight: 500; }

  /* ============================================================
     PAGE GRID — one 12-col system used everywhere
     ============================================================ */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    padding-inline: var(--page-pad-x);
  }

  /* ============================================================
     SIDEBAR — mobile: floating brand + hamburger, full-screen menu overlay
                desktop: transparent fixed-left, nav always visible
     ============================================================ */

  /* Default (mobile) */
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    padding: var(--space-3) var(--page-pad-x);
    background: transparent;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    align-items: center;
    pointer-events: none;
    /* fade the backdrop in/out so closing doesn't snap to transparent
       (which caused a white composite-layer flash at the bottom) */
    transition: background-color var(--dur-3) var(--ease-out);
  }
  .sidebar > * { pointer-events: auto; }
  .sidebar.is-open {
    height: 100vh;
    background: var(--bg);
    transition: background-color var(--dur-1) var(--ease-out);
  }
  /* During close: keep full height so layout doesn't snap; bg fades to transparent */
  .sidebar.is-closing {
    height: 100vh;
    background: transparent;
    transition: background-color var(--dur-3) var(--ease-out);
  }

  .sidebar__brand {
    font-size: var(--fs-nav);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg);
    white-space: nowrap;
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  /* Hamburger button — animates to X when expanded */
  .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: var(--fg);
  }
  .menu-toggle__bar {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transform-origin: center;
    transition: transform var(--dur-3) var(--ease-out), width var(--dur-2) var(--ease-out);
  }
  .menu-toggle__bar--top { width: 1.5rem;  transform: translateY(-4px); }
  .menu-toggle__bar--bot { width: 0.9rem;  transform: translateY(4px); }
  /* Open state: both bars become full width and rotate into an X, centered */
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar--top {
    width: 1.5rem;
    transform: translateY(0) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar--bot {
    width: 1.5rem;
    transform: translateY(0) rotate(-45deg);
  }

  /* Nav — anchored to the BOTTOM of the viewport when open on mobile.
     Uses position:fixed (viewport-relative) so the sidebar collapsing on
     close can't drag the nav up to the top-left corner. */
  .sidebar__nav {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-7);
    top: auto;
    flex-direction: column;
    display: flex;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-3) var(--ease-out),
                transform var(--dur-3) var(--ease-out),
                visibility 0s linear var(--dur-3);
  }
  .sidebar.is-open .sidebar__nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-3) var(--ease-out),
                transform var(--dur-3) var(--ease-out),
                visibility 0s;
  }
  /* Mobile nav items: body-size, generously spaced, no dash affordance */
  @media (max-width: 959px) {
    .sidebar__nav .nav-link {
      font-size: var(--fs-300);
      line-height: 1.45;                /* tighter, matches reference */
      padding: 0;
      padding-left: 0 !important;
    }
    .sidebar__nav .nav-link::before { display: none; }

    /* Back link is persistent on mobile too (mirrors desktop): sits below the
       brand in the fixed header, always tappable without opening the menu. */
    .sidebar__back {
      grid-column: 1;
      grid-row: 2;
      margin-top: var(--space-2);
      margin-bottom: 0;
    }
  }

  /* Desktop: revert to transparent fixed-left sidebar */
  @media (min-width: 960px) {
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      right: auto;
      width: auto;
      padding-left: var(--page-pad-x);
      padding-right: var(--space-6);
      padding-top: var(--anchor-top);
      padding-bottom: var(--space-7);
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      pointer-events: none;
    }
    .sidebar > * { pointer-events: auto; }
    .sidebar.is-open {
      height: auto;
      background: transparent;
    }
    .sidebar__brand {
      margin-bottom: var(--anchor-gap);
    }
    .menu-toggle { display: none; }
    .sidebar__nav {
      position: static;
      inset: auto;
      flex-direction: column;
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: none;
    }
  }

  /* Case-study nav groups: section sub-nav lives in the desktop sidebar;
     the mobile hamburger overlay always shows the global menu instead. */
  .sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  @media (max-width: 959px) {
    .sidebar__group--sections { display: none; }
  }
  @media (min-width: 960px) {
    .sidebar__group--global { display: none; }
  }

  .nav-link {
    --line-w: 1.25rem;
    --line-gap: 0.5rem;
    position: relative;
    display: inline-block;
    align-self: start;               /* hit area = the label, not the nav's full width */
    font-size: var(--fs-300);
    line-height: 1.35;
    color: var(--fg-tertiary);
    padding: 0.0625rem 0;
    letter-spacing: var(--tr-body);
    transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
  }
  .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% - 0.08em));
    width: 0;
    height: 1.5px;
    background: var(--fg);
    transition: width var(--dur-2) var(--ease-out);
  }
  .nav-link:hover,
  .nav-link:focus-visible { color: var(--fg); }
  .nav-link[aria-current="true"] {
    color: var(--fg);
    padding-left: calc(var(--line-w) + var(--line-gap));
  }
  .nav-link[aria-current="true"]::before { width: var(--line-w); }

  /* Back link — case-study sidebar only. Sits at the top of the section nav,
     above the in-page links, and returns to the home page. */
  .sidebar__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: start;
    font-size: var(--fs-200);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--fg-tertiary);
    margin-bottom: var(--space-3);
    transition: color var(--dur-1) var(--ease-out);
  }
  .sidebar__back:hover,
  .sidebar__back:focus-visible { color: var(--fg); }
  .sidebar__back .arrow {
    display: inline-block;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .sidebar__back:hover .arrow { transform: translateX(-3px); }

  /* ============================================================
     MAIN — each section is a row in the page grid
     ============================================================ */
  .main { display: contents; }   /* let sections participate in page-grid */

  /* Helper: a section row that uses the page grid */
  .section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    padding-block: var(--space-9);
  }
  @media (min-width: 768px) {
    .section { padding-block: var(--space-11); }
  }
  /* Top of "I bring..." cap-line aligns with top of "Hi!" nav item cap-line.
     Hi! sits at: --anchor-top + --brand-h + --anchor-gap from viewport top.
     Section padding-top matches that. Intro's negative margin-top compensates
     for the display text's leading-above-cap so cap-lines actually meet. */
  #hi {
    padding-top: calc(var(--anchor-top) + var(--brand-h) + var(--anchor-gap));
    padding-bottom: var(--space-10);
  }
  @media (max-width: 959px) {
    /* Account for the floating brand + hamburger row above */
    #hi { padding-top: calc(var(--space-3) + var(--brand-h) + var(--space-7)); padding-bottom: var(--space-9); }
  }

  /* ============================================================
     CONTENT PLACEMENT
     All blocks start at page column 5 by default.
     Splits use 5–8 and 10–12.
     ============================================================ */

  /* HI */
  .intro__body {
    grid-column: 1 / -1;
    font-size: var(--fs-display-md);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    color: var(--fg);
    font-weight: 500;
  }
  @media (min-width: 960px) {
    /* The one block that is 5 columns rather than 4. At the 4-col measure this
       sentence cannot be set without a single-word line at any laptop width:
       the only two-word opening, "Designing products", is 516px at the capped
       60px display size and a 4-col track is 421px at 1440. The 5th column
       (533px at 1440) buys the four-line setting with no orphan.
       The paragraph below stays at 4 columns with the rest of the body copy. */
    .intro__body { grid-column: 5 / span 5; }
  }

  .intro__meta {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
    color: var(--fg-secondary);
    font-size: var(--fs-300);
    line-height: 1.45;
    letter-spacing: var(--tr-body);
  }
  @media (min-width: 960px) {
    .intro__meta { grid-column: 5 / span 4; }
  }

  /* WORK */
  /* Reel is fully edge to edge of the viewport.
     Sidebar floats transparently above it on the left. */
  .reel-row {
    grid-column: 1 / -1;
    margin-block: var(--space-8);
    background: #08090a;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .reel-row img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .case {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    position: relative;
    align-content: start;     /* rows hug content; media height won't stretch them */
  }
  .case + .case { margin-top: var(--space-9); }
  .case[data-preview] { cursor: none; }

  .case__label {
    grid-column: 1 / -1;
    font-size: var(--fs-200);
    color: var(--fg-tertiary);
    letter-spacing: var(--tr-label);
    font-weight: 500;
    margin-bottom: var(--space-1);   /* closer to the title */
  }
  @media (min-width: 960px) {
    .case__label { grid-column: 5 / span 4; }
  }
  .case__title {
    grid-column: 1 / -1;
    font-size: var(--fs-display-md);
    line-height: var(--lh-h1);
    letter-spacing: var(--tr-mega);
    font-weight: 500;
  }
  @media (min-width: 960px) {
    .case__title { grid-column: 5 / span 4; }
  }
  .case__desc {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
  }
  @media (min-width: 960px) {
    .case__desc { grid-column: 5 / span 4; }
  }

  /* CASE — inline media preview. Reveals via the site's scroll-reveal
     system (.reveal, added in HTML with a stagger delay so it eases in
     just after the label/title/desc) rather than hover, then plays once
     in view and keeps looping — see script.js. */
  .case__media {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
    display: block;
    aspect-ratio: 4 / 3;
    background: #08090a;
    overflow: hidden;
    position: relative;
    /* Tappable by default so touch users can reach the case study.
       Desktop disables this (below) since the custom cursor + whole-card
       click handler in script.js drives navigation there instead. */
  }
  @media (min-width: 960px) {
    .case__media {
      grid-column: 10 / span 3;
      grid-row: 1 / span 3;     /* span all the rows in the case (label, title, desc) */
      margin-top: 0;
      aspect-ratio: 4 / 3;
      align-self: start;
    }
  }
  .case__media video,
  .case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* CASE — Rosie Match preview: the case study's own "hero splash" logo
     animation (moved here from rosie-match.html's inline style so both
     pages share it, since the home card now reuses the exact same mark). */
  .case__media--rosie { background: #c41f0f; }
  .splash-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .splash-logo {
    width: 55%;
    color: #91a6eb;
    display: block;
    transition: opacity 0.6s ease;   /* eases the whole mark out before each loop reset */
  }
  .splash-logo .sp-O-solo,
  .splash-logo .sp-R,
  .splash-logo .sp-S,
  .splash-logo .sp-IE { opacity: 0; }
  .splash-tag {
    position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); font-weight: 600; opacity: 0;
  }
  .splash-logo.go .sp-O-pos {
    animation: o-pos-home 0.9s cubic-bezier(.4,0,.2,1) 1.7s both;
  }
  @keyframes o-pos-home {
    from { transform: translate(-60px, 82px); }
    to   { transform: translate(0, 0); }
  }
  .splash-logo.go .sp-O-pulse {
    transform-origin: 206px 74px;
    animation: o-pulse 1.4s cubic-bezier(.34,1.2,.45,1) 0.3s both,
               o-settle 0.7s cubic-bezier(.4,0,.2,1) 1.7s both;
  }
  @keyframes o-pulse {
    0%   { transform: scale(0); }
    35%  { transform: scale(1.55); }
    55%  { transform: scale(1.35); }
    75%  { transform: scale(1.5); }
    100% { transform: scale(1.4); }
  }
  @keyframes o-settle {
    from { transform: scale(1.4); }
    to   { transform: scale(1); }
  }
  .splash-logo.go .sp-O-solo { animation: fade-in 0.4s ease 0.3s both; }
  .splash-logo.go .sp-R  { animation: drift-left  0.7s cubic-bezier(.22,.9,.3,1.05) 1.8s both; }
  .splash-logo.go .sp-S  { animation: drift-up    0.7s cubic-bezier(.22,.9,.3,1.05) 2.15s both; }
  .splash-logo.go .sp-IE { animation: drift-right 0.7s cubic-bezier(.22,.9,.3,1.05) 2.45s both; }
  .splash-logo.go ~ .splash-tag { animation: fade-in 1s ease 3.1s both; }
  @keyframes drift-left  { from { transform: translateX(-60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes drift-right { from { transform: translateX(60px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes drift-up    { from { transform: translateY(40px);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes fade-in     { from { opacity: 0; } to { opacity: 1; } }

  /* ============================================================
     CURSOR — simple solid dot.
       default        → 16×16 solid dot, follows cursor everywhere
       .is-grown      → 38×38 (over links/buttons)
       .is-pressed    → quick scale-down click feedback
       .is-expanded   → morphs into the "View case study" pill (over cases)
     ============================================================ */
  .cursor-btn {
    position: fixed;
    top: 0; left: 0;
    z-index: 70;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .cursor-btn.is-visible { opacity: 1; }

  .cursor-btn__dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--fg);
    transform: translate(-50%, -50%) scale(1);
    transition: width var(--dur-2) var(--ease-out),
                height var(--dur-2) var(--ease-out),
                opacity var(--dur-2) var(--ease-out),
                transform var(--dur-1) var(--ease-out);
  }
  /* Grown over links — enlarges and fades to a translucent disk (matches the
     reference's 0.35 opacity), so the link reads through the cursor. */
  .cursor-btn.is-grown .cursor-btn__dot {
    width: 38px; height: 38px;
    opacity: 0.35;
  }
  /* Press feedback — shrinks briefly on mousedown */
  .cursor-btn.is-pressed .cursor-btn__dot {
    transform: translate(-50%, -50%) scale(0.7);
  }
  /* Hidden when morphed into the pill */
  .cursor-btn.is-expanded .cursor-btn__dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  /* The pill — appears only over case studies */
  .cursor-btn__pill {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    background: var(--fg);
    color: var(--bg);
    border-radius: 999px;
    padding: 0.625rem 1.125rem;
    font-size: var(--fs-200);
    font-weight: 500;
    letter-spacing: var(--tr-body);
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }
  .cursor-btn__pill .arrow { display: inline-block; font-size: 0.95em; }
  .cursor-btn.is-expanded .cursor-btn__pill {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  @media (max-width: 1024px), (hover: none) {
    .cursor-btn { display: none !important; }
  }
  /* Hide the native cursor only while the custom one is actually running
     (the JS adds .cursor-active to <html> on desktop). Scoping to the class —
     plus !important — lets it beat UA rules like a[href]{cursor:pointer}, so the
     native cursor never peeks through. No-JS and touch users keep their real one. */
  .cursor-active,
  .cursor-active * { cursor: none !important; }

  /* TENETS */
  @media (min-width: 960px) {
    #tenets { min-height: 88vh; }
  }
  .tenets__copy {
    grid-column: 1 / -1;
  }
  @media (max-width: 959px) {
    /* Mobile: words first, paragraph second */
    .tenets__copy { grid-row: 2; }
  }
  @media (min-width: 960px) {
    .tenets__copy {
      grid-column: 5 / span 4;
      align-self: center;       /* paragraph vertically centered on the word stack */
    }
  }
  .tenets__words {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    gap: var(--space-2);
  }
  @media (max-width: 959px) {
    .tenets__words {
      grid-row: 1;
      margin-bottom: var(--space-6);
    }
  }
  @media (min-width: 960px) {
    .tenets__words {
      grid-column: 10 / span 3;
      align-self: center;        /* words vertically centered in the tall section */
    }
  }
  .tenets__word {
    font-size: var(--fs-display-lg);
    line-height: 1.05;
    letter-spacing: var(--tr-mega);
    font-weight: 500;
    color: var(--fg);
    /* --p drives horizontal offset during the entry phase only.
       JS clamps --p so it reaches 0 once the section is settled in view,
       then stays at 0 no matter how far the user keeps scrolling. */
    --p: 1;
    will-change: transform;
  }
  /* Alternating directions/amplitudes for the entry cascade */
  .tenets__word:nth-child(1) { transform: translate3d(calc(var(--p) *  2.2em), 0, 0); }
  .tenets__word:nth-child(2) { transform: translate3d(calc(var(--p) * -1.4em), 0, 0); }
  .tenets__word:nth-child(3) { transform: translate3d(calc(var(--p) *  1.8em), 0, 0); }
  .tenets__word:nth-child(4) { transform: translate3d(calc(var(--p) * -1.0em), 0, 0); }
  .tenets__word:nth-child(5) { transform: translate3d(calc(var(--p) *  2.4em), 0, 0); }
  @media (max-width: 959px) {
    .tenets__word { font-size: var(--fs-display-md); }
    .tenets__word:nth-child(1) { transform: translate3d(calc(var(--p) *  0.9em), 0, 0); }
    .tenets__word:nth-child(2) { transform: translate3d(calc(var(--p) * -0.6em), 0, 0); }
    .tenets__word:nth-child(3) { transform: translate3d(calc(var(--p) *  0.7em), 0, 0); }
    .tenets__word:nth-child(4) { transform: translate3d(calc(var(--p) * -0.5em), 0, 0); }
    .tenets__word:nth-child(5) { transform: translate3d(calc(var(--p) *  0.9em), 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tenets__word { --p: 0 !important; }
  }

  /* REFERENCES */
  .reference {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .reference + .reference { margin-top: var(--space-9); }
  .reference__quote {
    grid-column: 1 / -1;
    font-size: var(--fs-500);
    line-height: 1.28;
    letter-spacing: -0.018em;
    color: var(--fg);
    font-weight: 400;
  }
  @media (min-width: 960px) {
    .reference__quote {
      grid-column: 5 / span 4;            /* 5–8 */
      font-size: var(--fs-600);
    }
  }
  .reference__attr {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    font-size: var(--fs-200);
    color: var(--fg-tertiary);
    letter-spacing: var(--tr-label);
    font-weight: 500;
    line-height: 1.5;
  }
  @media (min-width: 960px) {
    .reference__attr {
      grid-column: 5 / span 4;             /* the quote's own measure... */
      grid-row: 2;                         /* ...on the row below it, since the
                                              quote leaves the rest of its row
                                              free and the two would otherwise
                                              sit side by side */
      text-align: right;                   /* flush to the quote's right edge:
                                              bottom-right of the block */
      margin-top: var(--space-4);
    }
  }
  .reference__attr strong {
    display: block;
    color: var(--fg);
    font-weight: 500;
    margin-bottom: 0.125rem;
  }

  /* RESUME */
  .resume__title {
    grid-column: 1 / -1;
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-mega);
    font-weight: 500;
  }
  @media (min-width: 960px) {
    .resume__title { grid-column: 5 / span 5; }     /* 5–9 */
  }
  .resume__links {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
    display: flex; flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-400);
    letter-spacing: var(--tr-body);
  }
  @media (min-width: 960px) {
    .resume__links {
      grid-column: 10 / span 3;                     /* 10–12 */
      margin-top: 0;
      align-self: end;
    }
  }
  .resume__links a {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--fg-secondary);
    transition: color var(--dur-2) var(--ease-out);
  }
  .resume__links a:hover { color: var(--fg); }
  .resume__links a .arrow {
    display: inline-block;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .resume__links a:hover .arrow { transform: translate(3px, -3px); }

  /* COLOPHON */
  .colophon {
    grid-column: 1 / -1;
    padding-block: var(--space-7);
    font-size: var(--fs-200);
    color: var(--fg-tertiary);
  }
  @media (min-width: 960px) {
    .colophon { grid-column: 5 / span 8; }
  }
  .colophon__row {
    display: flex; flex-direction: column;
    gap: var(--space-1);
    justify-content: space-between;
  }
  @media (min-width: 768px) {
    .colophon__row { flex-direction: row; }
  }

  /* ============================================================
     REVEAL
     ============================================================ */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  }
  .reveal.is-in { opacity: 1; transform: translateY(0); }
  .reveal--1 { transition-delay: 80ms; }
  .reveal--2 { transition-delay: 160ms; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  /* CASE MEDIA — desktop keeps hover as the trigger, not scroll-stagger.
     Placed after REVEAL so it wins the .reveal.is-in opacity tie (both are
     2-class selectors; this comes later in source order). Same population
     the custom cursor pill targets. */
  @media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .case__media {
      pointer-events: none;   /* whole-card click handler drives nav here */
    }
    .case__media.reveal {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
    }
    .case--hoverable:hover .case__media.reveal,
    .case--hoverable:focus-within .case__media.reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ============================================================
     CASE STUDY — page-specific patterns (shared across all case studies)
     Built from the same tokens/grid as the home page.
     ============================================================ */

  /* Case study uses the same page grid; content sits in cols 5–12 on desktop,
     mirroring the home page's content column start. */
  /* Case-study reading column: a single max-width track.
     Mobile = full width; mid desktop = left-aligned clear of the fixed
     sidebar; wide = centered in the viewport. */
  .cs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: 0;
  }
  @media (min-width: 960px) {
    .cs {
      grid-template-columns: minmax(0, var(--reading-max));
      justify-content: start;
      padding-left: var(--sidebar-reserve);
    }
  }
  @media (min-width: 1280px) {
    .cs {
      justify-content: center;
      padding-left: 0;
    }
  }

  /* Top padding so content clears the fixed brand, same as #hi */
  .cs-hero {
    padding-top: calc(var(--anchor-top) + var(--brand-h) + var(--anchor-gap));
    padding-bottom: var(--space-9);
  }
  @media (max-width: 959px) {
    .cs-hero {
      padding-top: calc(var(--space-3) + var(--brand-h) + var(--space-7));
      padding-bottom: var(--space-8);
    }
  }

  /* Eyebrow label (small-caps meta line) */
  .cs-eyebrow {
    grid-column: 1 / -1;
    font-size: var(--fs-200);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-3);
  }

  /* Hero H1 */
  .cs-title {
    grid-column: 1 / -1;
    font-size: var(--fs-display-md);
    line-height: var(--lh-h1);
    letter-spacing: var(--tr-mega);
    font-weight: 500;
    color: var(--fg);
    max-width: 18ch;
  }

  /* Metadata row (Role / Timeline / Team / Skills) */
  .cs-meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5) var(--gutter);
    margin-top: var(--space-7);
  }
  @media (min-width: 960px) {
    .cs-meta { grid-template-columns: repeat(2, 1fr); }
  }
  .cs-meta__label {
    font-size: var(--fs-200);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }
  .cs-meta__value {
    font-size: var(--fs-300);
    line-height: 1.4;
    color: var(--fg);
  }
  .cs-meta__value span { display: block; color: var(--fg-secondary); }

  /* Generic section block */
  .cs-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .cs-section__eyebrow {
    grid-column: 1 / -1;
    font-size: var(--fs-200);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-4);
  }

  /* Large statement headline within a section */
  .cs-statement {
    grid-column: 1 / -1;
    font-size: var(--fs-700);
    line-height: 1.1;
    letter-spacing: var(--tr-display);
    font-weight: 500;
    color: var(--fg);
    margin-bottom: var(--space-5);
    text-wrap: balance;
  }

  /* Body copy — type in the shared BODY COPY rule above;
     placement in the shared reading-column rule below. */
  .cs-body + .cs-body { margin-top: var(--space-4); }
  .cs-body strong { color: var(--fg); font-weight: 500; }

  /* Media slot — labeled placeholder for screens/artifacts */
  .cs-media {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
    background: rgba(247,248,248,0.04);
    border: 1px solid rgba(247,248,248,0.10);
    border-radius: 4px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-4);
  }
  .cs-media--tall { aspect-ratio: 4 / 3; }
  .cs-media--full { grid-column: 1 / -1 !important; }
  .cs-media__label {
    font-size: var(--fs-200);
    letter-spacing: var(--tr-body);
    color: var(--fg-tertiary);
    max-width: 44ch;
    line-height: 1.5;
  }
  .cs-media img, .cs-media video {
    width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
  }
  .cs-media.has-asset { padding: 0; background: none; border: 0; }
  .cs-media--gap-below { margin-bottom: var(--space-6); }

  /* Carousel — classic slide-through of the three feedback rounds.
     Sits inside a .cs-media frame; images are contained (never cropped)
     so the red annotations stay readable across differing board sizes. */
  .cs-carousel { padding: 0; position: relative; overflow: hidden; aspect-ratio: 768 / 432; }
  .cs-carousel__viewport { width: 100%; height: 100%; }
  .cs-carousel__track {
    list-style: none; margin: 0; padding: 0;
    display: flex; width: 100%; height: 100%;
    transition: transform var(--dur-3, .5s) cubic-bezier(.22,.61,.36,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .cs-carousel__track { transition: none; }
  }
  .cs-carousel__slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    box-sizing: border-box;
  }
  .cs-carousel__slide img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; display: block;
    cursor: zoom-in;
  }

  /* Prev / next arrows */
  .cs-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(22,24,26,0.46);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .2s ease, transform .1s ease, opacity .2s ease;
  }
  .cs-carousel__arrow:hover { background: rgba(22,24,26,0.64); }
  .cs-carousel__arrow:active { transform: translateY(-50%) scale(0.94); }
  .cs-carousel__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .cs-carousel__arrow--prev { left: var(--space-4); }
  .cs-carousel__arrow--next { right: var(--space-4); }
  .cs-carousel__arrow svg { width: 22px; height: 22px; display: block; }

  /* Dots */
  .cs-carousel__dots {
    position: absolute; left: 50%; bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: 2;
    display: flex; gap: 10px;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(22,24,26,0.42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .cs-carousel__dot {
    appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(247,248,248,0.4);
    transition: background .2s ease, transform .2s ease;
  }
  .cs-carousel__dot:hover { background: rgba(247,248,248,0.65); }
  .cs-carousel__dot.is-active { background: #fff; transform: scale(1.25); }
  .cs-carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Lightbox — click a slide to view it large. Built for the wide Round 3
     board: the image renders at full height and scrolls horizontally. */
  .cs-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,11,12,0.92);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--dur-2, .26s) ease;
  }
  .cs-lightbox[hidden] { display: none; }
  .cs-lightbox.is-open { opacity: 1; }
  .cs-lightbox__scroll {
    max-width: 100%; max-height: 100%;
    overflow: auto; -webkit-overflow-scrolling: touch;
    display: flex; align-items: center;
  }
  .cs-lightbox__scroll img {
    display: block;
    height: 92vh; width: auto; max-width: none;
    border-radius: 4px;
    cursor: zoom-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .cs-lightbox { transition: none; }
  }
  .cs-lightbox__close {
    position: fixed; top: var(--space-4); right: var(--space-4);
    z-index: 2;
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(22,24,26,0.46);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .2s ease, transform .1s ease;
  }
  .cs-lightbox__close:hover { background: rgba(22,24,26,0.64); }
  .cs-lightbox__close:active { transform: scale(0.94); }
  .cs-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .cs-lightbox__close svg { width: 20px; height: 20px; display: block; }

  /* Core journey — five phone composites, each paired with a caption */
  .cs-flows {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-7);
    margin-top: var(--space-6);
  }
  .cs-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: end; /* caption bottom-aligns with the image */
  }
  @media (min-width: 960px) {
    .cs-flow { grid-template-columns: 1.35fr 1fr; gap: var(--gutter); }
  }
  .cs-flow__phone {
    position: relative;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    overflow: hidden;
    border-radius: 4px; /* same rounding as .cs-media */
  }
  .cs-flow__phone .cs-flow__shell {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .cs-flow__phone .cs-flow__screen {
    position: absolute;
    left: 33.19%; top: 10.48%;
    width: 33.41%; height: 72.71%;
    object-fit: cover;
    border-radius: 4.1cqw; /* matches the mockup screen's ~38px native corner radius */
    display: block;
  }
  .cs-flow__title {
    font-size: var(--fs-400); /* same size as "Opt-in coverage and balances" */
    line-height: 1.2;
    font-weight: 500;
    color: var(--fg);
  }

  /* Playback controls — fade in over the composite on hover/focus */
  .cs-flow__controls {
    position: absolute;
    bottom: 3.2cqw; right: 3.2cqw;
    z-index: 2;
    display: flex;
    gap: 2cqw;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--dur-2, .26s) ease, transform var(--dur-2, .26s) ease;
    pointer-events: none;
  }
  .cs-flow__phone:hover .cs-flow__controls,
  .cs-flow__phone:focus-within .cs-flow__controls,
  .cs-media--player:hover .cs-flow__controls,
  .cs-media--player:focus-within .cs-flow__controls {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  @media (hover: none) { /* touch: no hover state, so keep them visible */
    .cs-flow__controls { opacity: 1; transform: none; pointer-events: auto; }
  }
  .cs-flow__ctrl {
    appearance: none; -webkit-appearance: none;
    border: 0; padding: 0; cursor: pointer;
    width: clamp(34px, 9cqw, 46px);
    height: clamp(34px, 9cqw, 46px);
    display: grid; place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(22,24,26,0.46);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .2s ease, transform .1s ease;
  }
  .cs-flow__ctrl:hover { background: rgba(22,24,26,0.64); }
  .cs-flow__ctrl:active { transform: scale(0.94); }
  .cs-flow__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .cs-flow__ctrl svg { width: 44%; height: 44%; display: block; }
  .cs-flow__ctrl .icon-play { display: none; }
  .cs-flow__phone.is-paused .cs-flow__ctrl .icon-play,
  .cs-media--player.is-paused .cs-flow__ctrl .icon-play { display: block; }
  .cs-flow__phone.is-paused .cs-flow__ctrl .icon-pause,
  .cs-media--player.is-paused .cs-flow__ctrl .icon-pause { display: none; }

  /* Shipped-demo reel — a .cs-media that hosts the same controls as the flow
     composites. Needs its own containment so the cqw control sizing resolves
     against the video, not the page. */
  .cs-media--player { position: relative; container-type: inline-size; }

  /* 2018-vs-2026 plate — the live recording seated in the empty phone shell
     baked into hb-4.png. The offsets are that shell's glass rect measured off
     the 1536x864 art; containment comes from .cs-media--player above. */
  .cs-shell { overflow: hidden; }
  .cs-shell .cs-shell__screen {
    position: absolute;
    left: 68.40%; top: 8.88%;
    width: 19.90%; height: 76.92%;
    object-fit: cover;
    border-radius: 2.47cqw; /* matches the shell's ~38px screen corner radius */
  }

  /* Media pair — two side by side */
  .cs-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
    margin-top: var(--space-6);
  }
  @media (min-width: 960px) {
    .cs-pair { grid-template-columns: 1fr 1fr; }
  }
  .cs-pair .cs-media { grid-column: 1 / -1 !important; margin-top: 0; }

  /* Stat strip */
  .cs-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6) var(--gutter);
    margin-top: var(--space-7);
  }
  @media (min-width: 960px) {
    .cs-stats { grid-template-columns: repeat(2, 1fr); }
  }
  .cs-stat__num {
    font-size: var(--fs-600);
    line-height: 1;
    letter-spacing: var(--tr-display);
    font-weight: 500;
    color: var(--fg);
    margin-bottom: var(--space-2);
  }
  .cs-stat__desc {
    font-size: var(--fs-200);
    line-height: 1.45;
    color: var(--fg-secondary);
    letter-spacing: var(--tr-body);
  }

  /* Decision callout — two options side by side */
  .cs-decision {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
    margin-top: var(--space-6);
  }
  @media (min-width: 960px) {
    .cs-decision { grid-template-columns: 1fr 1fr; }
  }
  .cs-option {
    padding: var(--space-4);
    border-radius: 4px;
    border: 1px solid rgba(247,248,248,0.10);
  }
  .cs-option--shipped { border-color: rgba(247,248,248,0.30); }
  .cs-option__tag {
    font-size: var(--fs-100);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }
  .cs-option--shipped .cs-option__tag { color: var(--fg); }
  .cs-option__title {
    font-size: var(--fs-400);
    line-height: 1.2;
    color: var(--fg);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }
  .cs-option__body {
    font-size: var(--fs-200);
    line-height: 1.5;
    color: var(--fg-secondary);
    letter-spacing: var(--tr-body);
  }

  /* Ordered POV list ("What I'd change") */
  .cs-points {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
    counter-reset: pt;
    list-style: none;
    padding: 0;
  }
  .cs-point { margin-bottom: var(--space-6); }
  .cs-point__head {
    font-size: var(--fs-500);
    line-height: 1.2;
    letter-spacing: var(--tr-display);
    color: var(--fg);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }
  .cs-point__head::before {
    counter-increment: pt;
    content: counter(pt) ". ";
    color: var(--fg-tertiary);
  }

  /* Inline pull quote / note */
  .cs-quote {
    grid-column: 1 / -1;
    font-size: var(--fs-500);
    line-height: 1.3;
    letter-spacing: var(--tr-display);
    color: var(--fg);
    font-weight: 500;
    margin: var(--space-5) 0;
  }
  .cs-quote__attr {
    display: block;
    font-size: var(--fs-200);
    letter-spacing: var(--tr-body);
    color: var(--fg-tertiary);
    font-weight: 400;
    margin-top: var(--space-3);
  }

  /* Shared placement: every reading block fills the single reading-column track. */
  .cs-eyebrow, .cs-title, .cs-section__eyebrow, .cs-statement, .cs-body,
  .cs-media, .cs-pair, .cs-stats, .cs-decision, .cs-meta, .cs-points, .cs-quote {
    grid-column: 1 / -1;
  }

  /* Case footer / pager — rides the same reading column as .cs */
  .cs-footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--gutter);
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  @media (min-width: 960px) {
    .cs-footer {
      grid-template-columns: minmax(0, var(--reading-max));
      justify-content: start;
      padding-left: var(--sidebar-reserve);
    }
  }
  @media (min-width: 1280px) {
    .cs-footer {
      justify-content: center;
      padding-left: 0;
    }
  }
  .cs-footer__back {
    grid-column: 1 / -1;
    font-size: var(--fs-300);
    color: var(--fg-secondary);
    transition: color var(--dur-1) var(--ease-out);
  }
  .cs-footer__back:hover { color: var(--fg); }
  .cs-footer__next {
    grid-column: 1 / -1;
    margin-top: var(--space-5);
    font-size: var(--fs-700);
    line-height: 1.05;
    letter-spacing: var(--tr-mega);
    font-weight: 500;
    color: var(--fg);
    transition: opacity var(--dur-1) var(--ease-out);
  }
  @media (min-width: 960px) {
    .cs-footer__next { justify-self: end; text-align: right; }
  }
  .cs-footer__next:hover { opacity: 0.7; }
  .cs-footer__next span {
    display: block;
    font-size: var(--fs-200);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }