:root {
    --ink: #1A1830;          /* primary dark */
    --ink-deep: #12111f;     /* footer dark */
    --ink-panel: #232245;    /* WORKS panel */
    --purple: #6E00A0;
    --cyan: #00DEF2;
    --teal: #0C93A4;         /* legible cyan for CTAs on light backgrounds */
    --mist: #ABCDCF;
    --riverbed: #345065;
    --cream: #F2F0EB;        /* the single light tint */
    --white: #FFFFFF;
    --hairline-dark: rgba(171,205,207,0.15);
    --hairline-light: rgba(26,24,48,0.1);
    --pad-sec: clamp(76px, 9vw, 112px);
    --r-media: 16px;         /* shared radius for framed photographs */

    /* ---- Font family: Montserrat throughout. --font-head is the single lever
       if headings ever need a distinct display face; today both resolve to Montserrat. ---- */
    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* ---- Type scale: THE STANDARD. Always use these tokens for font-size;
       never hand-pick a px value. Body/UI steps are fixed; headings are
       responsive (clamp). ---- */
    --fs-eyebrow: 11px;   /* uppercase eyebrows, tiny labels */
    --fs-xs: 12px;        /* meta, footer print, tags */
    --fs-sm: 13px;        /* small meta, captions, chips */
    --fs-nav: 14px;       /* nav, arrow-links, small body */
    --fs-body: 15px;      /* body copy */
    --fs-body-lg: 16px;   /* larger body */
    --fs-lead: 18px;      /* leads / intros */
    --fs-xl: 20px;        /* standfirst / large body */
    --fs-h4: clamp(20px, 2.4vw, 25px);
    --fs-h3: clamp(22px, 2.8vw, 30px);
    --fs-h2: clamp(28px, 3.8vw, 40px);
    --fs-h1: clamp(34px, 4.8vw, 54px);
    --fs-display: clamp(40px, 6vw, 64px);   /* big statements */
    /* every page hero headline resolves to this one value, so no page shouts
       louder than another. Set once here; pages must not override it. */
    --fs-hero: clamp(40px, 5.2vw, 68px);
    /* one hero depth, so the pages feel like one site rather than six */
    --hero-pad-top: 176px;
    --hero-pad-bottom: 96px;
    --hero-min: 700px;

    /* ---- Weight scale: THE STANDARD. Use these four, never a raw number.
       Brand statements & section headings = --fw-bold (700). ---- */
    --fw-regular: 400;
    --fw-medium: 500;      /* leads, softer statements */
    --fw-semibold: 600;    /* sub-headings, strong labels */
    --fw-bold: 700;        /* section headings + brand statements (the default heavy) */
    --fw-extrabold: 800;   /* reserved: metric numerals only */

    /* ---- Line-height scale: pick the nearest; don't hand-pick a decimal. ---- */
    --lh-tight: 1.1;       /* headings & statements */
    --lh-snug: 1.3;        /* short multi-line statements */
    --lh-normal: 1.5;      /* dense UI text */
    --lh-relaxed: 1.65;    /* body copy, leads */

    /* ---- Letter-spacing (tracking) scale. ---- */
    --ls-tight: -0.02em;   /* large headings & statements */
    --ls-flat: 0;          /* body & leads */
    --ls-caps: 0.16em;     /* uppercase eyebrows & labels */

    /* ---- Spacing scale: THE STANDARD. Every margin, padding and gap picks a
       step from this closed set; never invent a value outside it.

       The scale documents the rhythm the design was already built on — a 2px
       step through the micro range, widening as the numbers grow. That fine
       micro step is deliberate and load-bearing: it's what lets a text block
       group tightly while sections stay generous. Don't "tidy" it to a 4px
       grid — rounding the micro steps up flattens the contrast between tight
       and loose, and the whole page reads softer and less crisp.

       The rule that matters is proximity: space BETWEEN groups must clearly
       exceed space WITHIN them.

       MICRO — inside a component (label→value, icon→text, card padding).
       MID   — between blocks within a section (heading→grid, card→card).
       MACRO — section padding and page-level air. ---- */
    --sp-4: 4px;      /* MICRO */
    --sp-6: 6px;
    --sp-8: 8px;
    --sp-10: 10px;
    --sp-12: 12px;
    --sp-14: 14px;
    --sp-16: 16px;
    --sp-18: 18px;
    --sp-20: 20px;
    --sp-22: 22px;
    --sp-24: 24px;
    --sp-26: 26px;
    --sp-28: 28px;
    --sp-30: 30px;
    --sp-32: 32px;
    --sp-34: 34px;
    --sp-36: 36px;    /* MID */
    --sp-38: 38px;
    --sp-40: 40px;
    --sp-44: 44px;
    --sp-48: 48px;
    --sp-52: 52px;
    --sp-56: 56px;
    --sp-60: 60px;
    --sp-64: 64px;
    --sp-72: 72px;    /* MACRO */
    --sp-76: 76px;
    --sp-80: 80px;
    --sp-92: 92px;
    --sp-96: 96px;
    /* Above 96px the values are one-offs belonging to specific heroes and
       bands (108/110/160/172/178) — they stay literal, like clamp() endpoints.
       Also literal by design: sub-4px optical nudges (underline offsets,
       hairline corrections) and the 15px border compensation on .btn-ghost /
       .cc-form inputs, which keeps them the same outer size as a borderless
       .btn beside them. */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  main { display: block; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; }

  /* ---- Layout ---- */
  .wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--sp-56); padding-right: var(--sp-56); }
  .section { padding: var(--pad-sec) 0; }

  /* ---- Type system ----
     Headlines, display type and statements take the serif (--font-head);
     everything else stays on the sans body font. Optical sizing on. */
  h1, h2, h3, .big-statement, .def-word, .works .mark, .metric .num, .diff-row .pos, .quote p.q, .q-row p, .works-hero .q-line {
    font-family: var(--font-head); font-optical-sizing: auto;
  }
  h2 {
    font-weight: var(--fw-semibold); font-size: var(--fs-h2);
    letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink);
    text-wrap: balance;
  }
  /* No italics site-wide — key points are accented by colour alone
     (Tanya, 2026-08-06). <em> keeps its semantic meaning for screen
     readers; it just doesn't slant. */
  em { font-style: normal; }
  .on-dark h2 { color: var(--white); }
  /* Section intros are 16px site-wide (Tanya, 2026-08-04) — The challenge,
     What we do and Dime difference all read as one voice. */
  .lead { margin-top: var(--sp-20); max-width: 56ch; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--riverbed); }

  .eyebrow {
    position: relative; display: inline-block; margin-bottom: var(--sp-26); padding-top: var(--sp-18);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple);
  }
  .eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: currentColor; border-radius: 2px; }
  .on-dark .eyebrow { color: var(--cyan); }

  /* ---- Buttons / links ---- */
  .btn {
    display: inline-block; text-decoration: none; text-align: center;
    font-size: var(--fs-body); font-weight: var(--fw-bold); border-radius: 999px; border: 0;
    padding: var(--sp-16) var(--sp-34); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn-primary { background: var(--cyan); color: var(--ink); border: 1px solid transparent; }
  .btn-primary:hover { background: var(--white); border-color: rgba(26,24,48,0.38); }
  .btn-ghost { color: var(--white); border: 1.5px solid rgba(171,205,207,0.5); padding: 15px var(--sp-32); }
  .btn-ghost:hover { border-color: var(--white); color: var(--white); }
  /* Links are neutral: the text colour of their background (ink on light,
     white on dark). Cyan/teal is reserved for buttons — the actions.
     The .purple / .cyan modifiers on links are now inert (kept in markup;
     colour is driven by background via .on-dark).
     Premium hover: a faint resting underline that a solid line sweeps over
     from the left, while the arrow (a CSS ::after) nudges forward. */
  .arrow-link {
    position: relative;
    display: inline-block; font-size: var(--fs-nav); font-weight: var(--fw-bold); text-decoration: none;
    padding-bottom: 5px; white-space: nowrap;
    color: var(--ink); border-bottom: 2px solid rgba(26, 24, 48, 0.28);
  }
  .arrow-link::before {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .arrow-link::after {
    content: "\2192"; display: inline-block; margin-left: 0.5em;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .arrow-link:hover::before { transform: scaleX(1); }
  .arrow-link:hover::after { transform: translateX(6px); }
  .on-dark .arrow-link { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.32); }
  @media (prefers-reduced-motion: reduce) {
    .arrow-link::before, .arrow-link::after { transition: none; }}
  .tm { font-size: 0.6em; vertical-align: super; }

  /* ---- Section head (heading + side link) ---- */
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-40); }

  /* ---- Nav ---- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: transparent;
    transition: background .3s ease;
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto; padding: var(--sp-20) var(--sp-56);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-28);
  }
  .brand { display: flex; align-items: center; gap: var(--sp-12); text-decoration: none; }
  /* The mark's triangle carries the brand accent, per Tanya's logo artwork
     (2026-08-07): cyan on dark grounds, purple on light. Everything else in
     the mark stays currentColor, so the lockup inverts as a whole. */
  .mk-accent { fill: var(--cyan); }
  /* Stacked lockup, per Tanya's logo artwork (2026-08-07): DIME solid over a
     letterspaced LEADERSHIP, the two set to the artwork's ~1.6:1 width ratio.
     Sizes are hand-set rather than tokenised — a logo is drawn artwork, and
     the type scale doesn't govern it (sanctioned exception). */
  .brand .wordmark, .footer-brand .wordmark {
    display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
    text-transform: uppercase; white-space: nowrap;
  }
  .wm-name { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: 0.04em; line-height: 1.05; color: var(--white); }
  /* -0.30em cancels the trailing letter-space, so the block ends on the P */
  .wm-sub { font-size: 9.5px; font-weight: var(--fw-medium); letter-spacing: 0.30em; margin-right: -0.30em; line-height: 1.4; color: var(--mist); }
  .nav-links { display: flex; gap: var(--sp-28); align-items: center; }
  .nav-links a { font-size: var(--fs-sm); color: var(--mist); text-decoration: none; transition: color .2s ease; }
  .nav-links a:hover { color: var(--cyan); }
  .nav-cta { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink) !important; background: var(--cyan); border-radius: 999px; padding: var(--sp-8) var(--sp-20); }
  .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--sp-8); align-items: center; }
  .nav-cta:hover { background: var(--white); }

  /* ---- Nav dropdown: the buying language, held above the fold on every page.
     The main nav names the journey ("What we do"); the menu names the things a
     client already knows how to ask for. Trigger stays a real link, so the
     overview page is reachable without opening the menu. ---- */
  .nav-item { position: relative; display: flex; align-items: center; }
  .nav-caret { margin-left: var(--sp-6); opacity: .7; transition: transform .2s ease; }
  .nav-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(var(--sp-6));
    min-width: 244px; padding: var(--sp-10) 0;
    background: var(--ink); border: 1px solid var(--hairline-dark);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item:hover .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-links .nav-menu a {
    display: block; padding: var(--sp-10) var(--sp-24);
    font-size: var(--fs-nav); color: var(--white);
  }
  .nav-links .nav-menu a:hover { color: var(--cyan); background: rgba(255,255,255,0.04); }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu, .nav-caret { transition: none; }}

  /* ---- Hero ---- */
  .hero { position: relative; overflow: hidden; background: var(--ink); padding: 178px 0 108px; }
  .photo-texture {
    position: absolute; left: 0; right: 0; top: -80px; bottom: -80px;
    background: url("../assets/hero-dusk.jpg") center / cover no-repeat var(--ink);
    will-change: transform;
  }
  /* hero photograph: moody lobby (brand-purple armchairs), lightly graded */
  .hero .photo-texture {
    background: url("../assets/lobby-conversation.jpg") center 52% / cover no-repeat var(--ink);
    filter: saturate(0.92) brightness(0.94) contrast(1.03);
  }
  .hero-scrim {
    position: absolute; inset: 0;
    background:
      /* Lightened from 72% rightwards so the seated figure reads as a person
         rather than a shadow, and the chairs and glass gain depth. The mobile
         override below keeps its deeper scrim, where the copy sits over the
         busiest part of the frame. */
      linear-gradient(103deg, rgba(18,17,31,0.90) 0%, rgba(18,17,31,0.72) 40%, rgba(18,17,31,0.32) 74%, rgba(18,17,31,0.16) 100%),
      linear-gradient(180deg, rgba(110,0,160,0.10) 0%, rgba(26,24,48,0) 55%, rgba(26,24,48,0.24) 100%);
  }
  .hero .wrap { position: relative; z-index: 2; }
  .pill {
    display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--white);
  }
  @media (max-width: 560px) {
    .pill { letter-spacing: 0.12em; line-height: 1.5; }}
  .hero h1 {
    margin-top: var(--sp-30); max-width: 20ch; font-weight: var(--fw-bold); line-height: 1.04; letter-spacing: -0.02em; color: var(--white);
    font-size: var(--fs-display);
  }
  .hero h1 .accent { color: var(--cyan); }
  /* Rotating hero headline: "Turning" and "into" hold; the two slots cross-fade
     through the pairs. Reserve height so the lede below doesn't jump. */
  .hero h1.hero-rotate { min-height: 2.2em; }
  /* Cycle shortened to four seconds, so the fades have to be quicker or the
     next swap starts before the last one has finished arriving. */
  .hero-rotate .rot { display: inline-block; transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
  /* the second word (and its full stop) still trail the first, just by less */
  .hero-rotate .ry, .hero-rotate .rp { transition-duration: 1.3s; }
  @media (prefers-reduced-motion: reduce) { .hero-rotate .rot { transition: none; }}
  .hero .lede { margin-top: var(--sp-24); max-width: 48ch; font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: 1.6; color: var(--white); text-shadow: 0 1px 26px rgba(10,9,20,0.55); }
  .hero-ctas { margin-top: var(--sp-34); display: flex; gap: var(--sp-14); flex-wrap: wrap; }

  /* ---- Trust: proof + video as one moment ---- */
  .trust { background: var(--white); padding: var(--sp-56) 0 var(--pad-sec); }
  .logo-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24) var(--sp-40); flex-wrap: wrap;
    padding-bottom: var(--sp-48); border-bottom: 1px solid var(--hairline-light);
  }
  .logo-row .label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: #9aa0ac; }
  .logo-row .logos { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-34); align-items: center; }
  .logo-row .logos span { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink); opacity: 0.6; }
  .metrics { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: var(--sp-30) var(--sp-60); margin-top: var(--sp-40); }
  .metric { text-align: center; }
  .metric .num { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--ink); line-height: 1; }
  .metric .num span { color: var(--purple); }
  .metric .lbl { margin: var(--sp-10) auto 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--riverbed); max-width: 20ch; }
  /* The Dime difference lifts onto its own dark band — the light→dark turn is
     the crescendo of the problem argument. Each row sets a quiet negation
     against the statement it resolves into; the payoff clause glows cyan. */
  /* Horizontal triptych: the three run across in slim columns divided by fine
     rules, each a dimmed lead-in over a medium-weight affirmation. Reads as one
     composed set rather than stacked blocks; emphasis by brightness, not cyan. */
  .difference { background: var(--cream); padding: calc(clamp(56px, 7vw, 72px) + 50px) 0 clamp(72px, 8vw, 96px); }
  .difference .eyebrow { display: block; padding-top: 0; margin: 0; }
  .difference .eyebrow::before { display: none; }
  /* two-column: intro + CTA left, the four statements 2x2 right */
  .diff-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 5vw, 64px); align-items: center; }
  .diff-intro h2 { margin-top: var(--sp-14); max-width: 17ch; }
  .diff-intro h2 .hl { color: var(--purple); }
  .diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0; row-gap: var(--sp-38); margin-top: 0; }
  .diff-row { padding: 2px 0 2px var(--sp-30); border-left: 1px solid var(--hairline-light); }
  .diff-row:nth-child(odd) { padding-left: 0; padding-right: var(--sp-30); border-left: 0; }
  .diff-row .neg {
    display: block; margin-bottom: var(--sp-16);
    font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal);
    color: rgba(52,80,101,0.72);
    transition: color 0.45s cubic-bezier(.22,.61,.36,1);
  }
  /* the trigger is the whole row, not the 19px line of text: hovering anywhere
     in the row lifts its "we don't" line to full ink */
  .diff-row:hover .neg { color: var(--ink); }
  .diff-row .pos {
    margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-medium);
    line-height: var(--lh-snug); letter-spacing: var(--ls-flat); color: var(--ink);
  }
  .diff-row .pos .em { color: inherit; }
  .diff-row .pos .cy { color: var(--purple); }

  /* ---- Approach: title over the photograph, steps beneath ---- */
  .approach-hero {
    position: relative; min-height: 480px; overflow: hidden;
    display: flex; align-items: flex-end;
    background: var(--ink-panel);
  }
  .approach-hero .parallax-media {
    position: absolute; left: 0; right: 0; top: -130px; bottom: -130px; z-index: 0;
    background: url("../assets/atrium-hero.jpg") center 40% / cover no-repeat;
    will-change: transform;
    filter: saturate(0.66) contrast(1.04) brightness(0.9);
  }
  .approach-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(160deg, rgba(110,0,160,0.22) 0%, rgba(110,0,160,0) 46%),
      linear-gradient(180deg, rgba(26,24,48,0.44) 0%, rgba(26,24,48,0.70) 58%, rgba(26,24,48,0.94) 100%);
  }
  .approach-hero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: var(--sp-56); }
  .approach-hero .eyebrow { color: var(--cyan); }
  .approach-hero h2 { color: var(--white); max-width: 26ch; }
  /* Problem band: same treatment as the Approach band, different photo; highlight reads cyan on the dark image */
  .approach-hero.problem-hero .parallax-media {
    background-image: url("../assets/glass-floors.jpg"); background-position: center 45%;
  }
  .problem-hero h2 .hl { color: var(--cyan); }
  .cols3 { margin-top: var(--sp-56); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-40); }
  /* Our approach — dark two-column: orbital graphic + numbered list */
  .method { position: relative; overflow: hidden; background: var(--ink); padding: clamp(36px, 4vw, 52px) 0; }
  .method-veil {
    position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(120deg, rgba(90,0,140,0.55) 0%, rgba(26,24,48,0.90) 44%, rgba(20,19,31,0.985) 100%),
      url("../assets/glass-floors.jpg") right top / cover no-repeat;
    filter: saturate(0.5) brightness(0.85);
  }
  .method-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: start; }
  /* left: eyebrow + heading + rings */
  .method-intro { display: flex; flex-direction: column; align-items: flex-start; }
  .method-intro h2 { color: var(--white); max-width: 18ch; font-size: var(--fs-h2); margin-top: var(--sp-8); }
  /* right: numbered steps */
  .method-steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; border-top: 1px solid var(--hairline-dark); }
  .mstep { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-20); align-items: baseline; padding: var(--sp-14) 0; border-bottom: 1px solid var(--hairline-dark); }
  .ms-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--cyan); }
  .ms-text h3 { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--white); }
  .ms-text p { margin-top: 5px; max-width: 52ch; font-size: var(--fs-body); line-height: 1.5; color: var(--mist); }
  .method-main .method-cta { margin-top: var(--sp-24); display: inline-block; color: var(--cyan); border-bottom-color: rgba(0,222,242,0.4); }

  /* ---- What we do ---- */
  /* What we do — copy left, image collage right (labels + hover zoom) */
  .whatwedo { background: var(--white); padding-bottom: clamp(36px, 4vw, 48px); }
  .ww-foot { margin-top: clamp(24px, 3vw, 32px); display: flex; align-items: center; justify-content: flex-start; }

  /* ---- Outcomes / the shift ---- */
  .outcomes { background: var(--cream); }
  .outcomes .sec-head h2 { max-width: 18ch; }
  .quote { border-top: 2px solid var(--purple); padding-top: var(--sp-24); }
  .quote p.q { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: 1.45; color: var(--ink); }
  .quote p.attr { margin-top: var(--sp-16); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--riverbed); }

  /* ---- Founder ---- */
  .founder { background: var(--white); }
  .founder-split { display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: clamp(48px, 6vw, 84px); align-items: center; }
  .founder h2 { margin-top: var(--sp-20); max-width: 17ch; font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); }
  .founder h2 .hl { color: var(--purple); }
  .founder-meta { margin-top: clamp(28px, 4vw, 38px); padding-top: var(--sp-24); border-top: 1px solid rgba(26,24,48,0.08); }
  .founder .name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--ink); }
  .founder .role { margin-top: var(--sp-8); max-width: 40ch; font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-normal); letter-spacing: 0; text-transform: none; color: var(--riverbed); }
  .founder .network { margin-top: var(--sp-16); max-width: 46ch; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--riverbed); }
  .founder .arrow-link { margin-top: var(--sp-22); }
  .founder-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: saturate(0.82) contrast(1.03); border-radius: var(--r-media); }
  @media (max-width: 760px) {
    .founder-split { grid-template-columns: 1fr; }
    .founder-portrait { max-width: 280px; }}

  /* ---- WORKS teaser ---- */
  .works { position: relative; overflow: hidden; background:
    radial-gradient(115% 90% at 85% 18%, rgba(110,0,160,0.34), rgba(110,0,160,0) 55%),
    radial-gradient(85% 75% at 6% 96%, rgba(0,222,242,0.10), rgba(0,222,242,0) 60%),
    var(--ink-panel); }
  .works .wrap { position: relative; z-index: 2; }
  .works-grid { display: grid; grid-template-columns: 1.15fr 440px; gap: clamp(48px, 6vw, 88px); align-items: center; }
  .works-eyebrow { display: flex; align-items: center; gap: var(--sp-22); }
  .works .mark { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
  .works .mark .tm { color: var(--cyan); font-size: 0.5em; vertical-align: super; }
  .works-eyebrow .rule { flex: 1; height: 1px; background: rgba(171,205,207,0.25); }
  .works h2 { margin-top: var(--sp-22); max-width: 18ch; font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.02em; color: var(--white); }
  .works h2 .em { color: var(--cyan); }
  .works .def { margin-top: var(--sp-20); max-width: 46ch; font-size: var(--fs-body-lg); line-height: 1.65; color: var(--mist); }
  .works .capture { display: flex; flex-direction: column; gap: var(--sp-12); }
  .works .capture input {
    width: 100%; font: inherit; font-size: var(--fs-nav); color: var(--white);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(171,205,207,0.3); padding: var(--sp-16) var(--sp-18);
  }
  .works .capture input::placeholder { color: rgba(171,205,207,0.6); }
  .works .capture button { width: 100%; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); background: var(--cyan); border: 1px solid transparent; padding: var(--sp-16) var(--sp-34); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
  .works .capture button:hover { background: var(--white); border-color: rgba(26,24,48,0.38); }
  .works-foot { margin-top: var(--sp-16); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20); }
  .works .reassure { margin: 0; font-size: var(--fs-sm); color: rgba(171,205,207,0.55); }
  .works-foot .arrow-link { margin-top: 0; }
  @media (max-width: 860px) {
    .works-grid { grid-template-columns: 1fr; gap: var(--sp-36); }
    .works h2 { max-width: none; }}

  /* ---- Closing: bookend echo of the hero ---- */
  .closing {
    position: relative; overflow: hidden; text-align: center;
    background: var(--white); border-top: 1px solid var(--hairline-light);
    padding: clamp(96px, 11vw, 140px) 0;
  }
  /* closing bands: solid, no background photograph */
  .closing .photo-texture { display: none; }
  .closing .wrap { position: relative; z-index: 2; }
  .contact-grid { display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: var(--sp-72); align-items: start; text-align: left; }
  .closing h2 { max-width: 17ch; color: var(--ink); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
  .closing h2 .accent { color: var(--purple); }
  .closing p.sub { margin-top: var(--sp-18); max-width: 44ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--riverbed); }
  .ladder { margin-top: var(--sp-32); list-style: none; display: flex; flex-direction: column; gap: var(--sp-14); }
  .ladder li { display: flex; gap: var(--sp-16); align-items: baseline; font-size: var(--fs-body); color: var(--riverbed); }
  .ladder .n { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--purple); }
  .closing .micro { margin-top: var(--sp-30); font-size: var(--fs-sm); color: var(--riverbed); }
  .closing .micro a { color: var(--purple); font-weight: var(--fw-semibold); }
  /* light form: filled fields with a focus underline, no card */
  .contact-card { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-22); }
  .contact-card label {
    display: flex; flex-direction: column; gap: var(--sp-8);
    font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--riverbed);
  }
  /* font: inherit pulls the label's uppercase bold down into the field. Size,
     tracking and case were reset here but weight was not, so what people typed
     came out bold (Tanya, 2026-08-17). */
  .contact-card input, .contact-card textarea {
    font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular);
    letter-spacing: normal; text-transform: none; color: var(--ink);
    background: transparent; border: 1px solid rgba(26,24,48,0.20); border-radius: 0;
    padding: var(--sp-14) var(--sp-16); resize: vertical; transition: border-color .2s ease, box-shadow .2s ease;
  }
  .contact-card input::placeholder, .contact-card textarea::placeholder { color: rgba(26,24,48,0.4); }
  .contact-card input:hover, .contact-card textarea:hover { border-color: rgba(26,24,48,0.38); }
  .contact-card input:focus, .contact-card textarea:focus {
    outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,222,242,0.14);
  }
  /* Full width, matching the fields above it. Tried at the standard inline
     size and then centred (Tanya, 2026-08-17); full width was the one she
     kept. The 1px transparent border stays so the hover outline can colour
     in without the button changing size. */
  .contact-card .btn { border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: var(--fw-bold); font-size: var(--fs-body); width: 100%; margin-top: var(--sp-8); }
  /* .contact-card .btn and .btn-primary:hover have equal specificity, and this
     one comes later, so its transparent border silently won and the hover
     outline never appeared. Restated here rather than reordered.
     The grey is the same one the fields take on hover, so the button and the
     fields above it answer the pointer identically (Tanya, 2026-08-17). */
  .contact-card .btn:hover { border-color: rgba(26,24,48,0.38); }
  .contact-card .conf { font-size: var(--fs-sm); color: var(--riverbed); text-align: center; }

  /* ---- Footer ---- */
  .footer { background: var(--ink-deep); padding: var(--sp-48) 0 var(--sp-40); }
  .footer .wrap { display: block; }
  .footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-20) var(--sp-40); flex-wrap: wrap; padding-bottom: var(--sp-26); border-bottom: 1px solid rgba(171,205,207,0.12); }
  .footer-brand { display: flex; align-items: center; gap: var(--sp-12); text-decoration: none; }
  /* the lockup's own sizes govern here — see .wm-name / .wm-sub */
  .footer-brand .wm-name { color: var(--white); }
  .footer-brand .wm-sub { color: var(--mist); }
  .footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-10) var(--sp-26); }
  .footer-nav a { font-size: var(--fs-sm); color: var(--mist); text-decoration: none; }
  .footer-nav a:hover, .footer-links a:hover { color: var(--cyan); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-18) var(--sp-40); flex-wrap: wrap; padding-top: var(--sp-26); }
  .footer-legal { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 66ch; }
  .footer-legal .copyright { font-size: var(--fs-sm); color: var(--mist); }
  .footer-legal .entity { font-size: var(--fs-xs); line-height: 1.6; color: rgba(171,205,207,0.55); }
  .footer-links { display: flex; gap: var(--sp-22); align-items: center; flex-wrap: wrap; }
  .footer-links a { font-size: var(--fs-sm); color: var(--mist); text-decoration: none; white-space: nowrap; }

  /* ---- Legal pages (privacy, cookies) ---- */
  .legal-hero { padding: 160px 0 var(--sp-60); }
  .legal-hero .lede { max-width: 62ch; }
  .legal-jump-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: #948FA0; }
  .legal-jump { margin: var(--sp-12) 0 var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-10) var(--sp-22); }
  .legal-jump a { font-size: var(--fs-nav); font-weight: var(--fw-semibold); color: var(--teal); text-decoration: none; border-bottom: 1px solid transparent; }
  .legal-jump a:hover { border-bottom-color: var(--teal); }
  .legal-body { max-width: 760px; margin-top: var(--sp-40); }
  .legal-body h2 { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); letter-spacing: -0.01em; color: var(--ink); margin-top: var(--sp-8); }
  .legal-body h3 { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); margin-top: var(--sp-34); }
  .legal-body p { font-size: var(--fs-body-lg); line-height: 1.72; color: var(--riverbed); margin-top: var(--sp-14); }
  .legal-body ul { margin-top: var(--sp-14); padding-left: var(--sp-20); }
  .legal-body li { font-size: var(--fs-body-lg); line-height: 1.68; color: var(--riverbed); margin-top: var(--sp-8); }
  .legal-body a { color: var(--teal); }
  .legal-meta { font-size: var(--fs-sm) !important; color: #948FA0 !important; margin-top: var(--sp-8) !important; }
  .legal-notice + .legal-notice { margin-top: var(--sp-64); padding-top: var(--sp-56); border-top: 1px solid var(--hairline-light); }
  .legal-foot { margin-top: var(--sp-56); padding-top: var(--sp-28); border-top: 1px solid var(--hairline-light); font-size: var(--fs-body) !important; }

  /* ---- Motion: scroll reveals (active only when JS tags <html>) ---- */
  .js-anim [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--rd, 0ms);
  }
  .js-anim [data-reveal].revealed { opacity: 1; transform: none; }
  /* The difference band reveals as a pure fade — no rise, just an opacity ramp. */
  .js-anim .difference [data-reveal] { transform: none; transition-duration: 1.6s; }

  /* ---- Responsive ---- */
  @media (max-width: 900px) {
    .wrap, .nav-inner { padding-left: var(--sp-28); padding-right: var(--sp-28); }
    .nav-toggle { display: inline-flex; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0; display: none;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--ink-deep); padding: var(--sp-10) var(--sp-28) var(--sp-22);
      border-bottom: 1px solid var(--hairline-dark);
    }
    .nav.open .nav-links { display: flex; }
    .nav-links a { padding: var(--sp-12) 0; font-size: var(--fs-body); }
    .nav-links a.nav-cta { margin-top: var(--sp-12); text-align: center; padding: var(--sp-12) var(--sp-20); }
    /* On mobile there is no hover, so the services sit open as an indented
       list rather than hiding behind a second tap. */
    .nav-item { flex-direction: column; align-items: stretch; }
    .nav-caret { display: none; }
    .nav-menu {
      position: static; transform: none; min-width: 0; padding: 0 0 var(--sp-8);
      background: none; border: 0;
      opacity: 1; visibility: visible; pointer-events: auto;
    }
    .nav-links .nav-menu a {
      padding: var(--sp-8) 0 var(--sp-8) var(--sp-16);
      font-size: var(--fs-nav); color: var(--mist);
      border-left: 1px solid var(--hairline-dark);
    }
    .cols3 { grid-template-columns: 1fr; }
    .cols3 { margin-top: var(--sp-40); }
    .method-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
    .method-intro h2 { max-width: none; }
    .mstep { grid-template-columns: 48px 1fr; gap: var(--sp-16); padding: var(--sp-22) 0; }
    .ww-foot { justify-content: flex-start; }
    .founder img { width: 100%; max-width: 360px; height: 420px; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
    .diff-split { grid-template-columns: 1fr; gap: var(--sp-34); }
    .diff-grid { grid-template-columns: 1fr; margin-top: var(--sp-24); gap: var(--sp-22); }
    .diff-row, .diff-row:nth-child(odd) { padding: 0 0 var(--sp-22); border-left: 0; border-bottom: 1px solid var(--hairline-light); }
    .diff-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .approach-hero { min-height: 440px; }
    .approach-hero .wrap { padding-bottom: var(--sp-40); }
    .contact-grid { grid-template-columns: 1fr; gap: var(--sp-44); }
    .contact-card { padding: var(--sp-32) var(--sp-24) var(--sp-28); }
  }
  @media (max-width: 520px) {
    .wrap, .nav-inner { padding-left: var(--sp-20); padding-right: var(--sp-20); }
    .logo-row { flex-direction: column; align-items: flex-start; gap: var(--sp-18); }
    .works .capture input { min-width: 0; }}

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn:hover { transform: none; }}

/* ================= Inner pages ================= */
.nav-links a.current { color: var(--cyan); }

/* subpage hero */
.page-hero { position: relative; overflow: hidden; background: var(--ink); padding: 172px 0 var(--sp-92); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--cyan); }
.page-hero .eyebrow::before { background: var(--cyan); }
.page-hero h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; color: var(--white); max-width: 24ch; text-wrap: balance; }
.page-hero h1 em, .page-hero .accent { color: var(--cyan); }
.page-hero .lede { margin-top: var(--sp-24); max-width: 56ch; font-size: var(--fs-lead); line-height: 1.7; color: rgba(255,255,255,0.92); }
.page-hero.works-hero { background:
  radial-gradient(120% 95% at 80% 24%, rgba(110,0,160,0.28) 0%, rgba(35,34,69,0) 56%),
  radial-gradient(110% 90% at 55% 75%, rgba(0,222,242,0.10) 0%, rgba(35,34,69,0) 52%),
  var(--ink-panel); }
/* brand-led hero (Approach): dark, purple glow, the turn-rings carry it */
.page-hero.hero-brand {
  background:
    radial-gradient(120% 95% at 80% 24%, rgba(110,0,160,0.30) 0%, rgba(26,24,48,0) 56%),
    radial-gradient(110% 90% at 55% 75%, rgba(0,222,242,0.10) 0%, rgba(26,24,48,0) 52%),
    var(--ink);
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-10); }
.chip { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--riverbed); border: 1px solid rgba(26,24,48,0.22); padding: var(--sp-8) var(--sp-16); }
.def-word { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: var(--ink); }
.def-word .phon { font-weight: var(--fw-medium); font-size: 0.55em; color: var(--riverbed); margin-left: var(--sp-10); }

/* works: question rows */
.q-rows { margin-top: var(--sp-44); max-width: 820px; }
.q-row { display: flex; gap: var(--sp-22); align-items: baseline; padding: var(--sp-22) 0; border-top: 1px solid var(--hairline-light); }
.q-row:last-child { border-bottom: 1px solid var(--hairline-light); }
.q-row p { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.5; color: var(--ink); }

/* works: article rows */
.article-rows { margin-top: var(--sp-44); }
.works-hero .q-line { margin-top: var(--sp-18); font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--white); }
.works-hero .sub-line { margin-top: var(--sp-12); font-size: var(--fs-body-lg); color: var(--mist); }
.big-statement { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.35; color: var(--white); max-width: 30ch; }
.big-statement strong { font-weight: var(--fw-bold); color: var(--cyan); }
.book-callout { margin-top: var(--sp-48); padding: var(--sp-26) var(--sp-30); border-left: 3px solid var(--purple); }
.book-callout .cb-label { display: block; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); margin-bottom: var(--sp-8); }
.book-callout p { font-size: var(--fs-lead); color: var(--ink); }
/* the title was the one italic doing structural work — colour carries it now */
.book-callout em { color: var(--purple); }

/* compact closing for subpages */
.closing-simple { position: relative; overflow: hidden; background: var(--white); border-top: 1px solid var(--hairline-light); padding: clamp(88px, 10vw, 124px) 0; text-align: center; }
.closing-simple .wrap { position: relative; z-index: 2; }
.closing-simple h2 { color: var(--ink); font-size: var(--fs-h2); max-width: 22ch; margin: 0 auto; }
.closing-simple h2 em { color: var(--purple); }
.closing-simple p { margin: var(--sp-18) auto 0; max-width: 54ch; font-size: var(--fs-body-lg); line-height: 1.65; color: var(--riverbed); }
.closing-simple .big-statement { color: var(--white); }
.closing-simple .btn { margin-top: var(--sp-32); }
.car-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.see-work { margin: 0; font-size: var(--fs-body); color: var(--riverbed); }
.see-work a { color: var(--purple); font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 1px solid rgba(110,0,160,0.3); transition: color .2s ease, border-color .2s ease; }
.see-work a:hover { color: var(--ink); border-color: var(--ink); }

/* Proof band — sectors line under the shared logo row */
.proof .proof-sectors { margin: var(--sp-34) 0 0; padding-top: var(--sp-30); border-top: 1px solid var(--hairline-light); font-size: var(--fs-body-lg); line-height: 1.7; color: var(--riverbed); max-width: 96ch; }

/* ============================================================
   Approach — 2026-08 redesign
   definition band (moved from About) · progress rail ·
   two-column idea · proof band · next-steps · split closing
   ============================================================ */

/* Visually-hidden live region for the turn announcer */
.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; }

/* The name: dime definition band on ink-panel + photo */
.def-approach { position: relative; overflow: hidden; background: var(--ink-panel); padding: clamp(72px, 9vw, 92px) 0; }
/* light variant (Approach): the definition sits on cream, no photograph */
.def-light { background: var(--cream); }
/* both need .def-approach too: the dark band's cyan eyebrow rule is declared
   further down, and would otherwise win on source order */
.def-approach.def-light .eyebrow { color: var(--purple); }
.def-approach.def-light .eyebrow::before { background: var(--purple); }
.def-light .def-word { color: var(--ink); }
.def-light .def-word .phon { color: var(--riverbed); }
.def-light .def-statement { color: var(--ink); }
.def-light .def-statement em { color: var(--purple); }
.def-approach .wrap { position: relative; z-index: 1; }
.def-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-80); align-items: center; }
.def-approach .eyebrow { color: var(--cyan); }
.def-word { font-size: var(--fs-display); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; line-height: 1; color: var(--white); margin-top: var(--sp-6); }
.def-word .phon { font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--mist); margin-left: var(--sp-10); }
.def-rule { display: block; width: 56px; height: 3px; background: var(--purple); border-radius: 2px; margin-top: var(--sp-26); }
.def-statement { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.5; color: var(--white); max-width: 46ch; }
.def-statement em { color: var(--cyan); }

/* Proof band — logo row + two metrics */
/* Proof-band logos read too faint on the sparser inner-page bands — lift them
   (the homepage trust strip keeps its lighter treatment). */
.proof .logo-row .label { color: var(--riverbed); }
.proof .logo-row .logos span { opacity: 0.82; }

@media (max-width: 900px) {
  .def-cols { grid-template-columns: 1fr; gap: var(--sp-32); }}
.works-hero .q-line { margin-top: var(--sp-20); font-size: clamp(26px, 4vw, 40px); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; color: var(--cyan); max-width: 24ch; }
.works-hero .sub-line { margin-top: var(--sp-12); font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--white); }
.works-hero .force-line { margin-top: var(--sp-26); padding-top: var(--sp-22); border-top: 1px solid rgba(171,205,207,0.22); max-width: 70ch; font-size: var(--fs-lead); line-height: 1.9; letter-spacing: 0.02em; color: var(--mist); }

/* Why WORKS — questions as a ruled list */
/* Why WORKS — purple ground, outlined mark in its own column (Tanya, 2026-08-06) */
.why-works { background:
  radial-gradient(105% 90% at 80% 12%, rgba(110,0,160,0.52) 0%, rgba(26,24,48,0) 60%),
  radial-gradient(95% 80% at 12% 92%, rgba(110,0,160,0.30) 0%, rgba(26,24,48,0) 58%), var(--ink); }
.why-works .eyebrow { color: var(--cyan); }
.why-works .eyebrow::before { background: var(--cyan); }
.why-works h2 { max-width: 30ch; color: var(--white); }
.whyq-intro { margin-top: var(--sp-20); max-width: 56ch; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--mist); }
.whyq-grid { margin-top: var(--sp-44); padding-top: var(--sp-32); border-top: 1px solid rgba(255,255,255,0.22);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-22); align-items: start; }
/* Tanya's spec (2026-08-07): 0.64 line-height to pull the glyph box tight, 600
   weight, 2px white stroke. Sized and pinned so the painted mark runs from the
   top of the first question to the top of the last (Tanya, 2026-08-07):
   - the `?` paints 0.71em tall, and that span measures 390px, hence 549px;
   - padding-top drops it by the q-row's own top padding (so it tracks the rows
     if that changes) plus 0.044em, the amount the glyph overshoots its line box
     at 0.64 line-height;
   - -0.031em is the glyph's measured left side bearing, cancelled so the
     painted stem, not the em box, lines up with the eyebrow and heading. */
.whyq-mark { justify-self: start; margin-left: -0.031em; padding-top: calc(var(--sp-22) + 0.044em);
  font-size: 549px; font-weight: var(--fw-semibold);
  line-height: 0.64; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.14); }
/* 560px is the measure that holds Tanya's wrapping (2026-08-07): the grief
   question to two lines, 'resilience becomes resistance' to one. The longest
   single-line question sets the floor at 533px; 560 leaves it a little air. */
.why-works .q-rows { margin-top: 0; max-width: 560px; }
.why-works .q-row { display: block; padding: var(--sp-22) 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.why-works .q-row:last-child { border-bottom: 0; }
/* 20px (Tanya, 2026-08-07) */
.why-works .q-row p { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--white); }
.whyq-out { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 64ch; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--mist); }
/* Stacks at 1023px, not 860: below ~1000px the mark squeezes the question
   column under 560px and the wrapping above breaks. Stacked, the questions
   get the full measure and the mark drops to its unpinned mobile size. */
@media (max-width: 1023px) {
  .whyq-grid { grid-template-columns: 1fr; gap: var(--sp-24); }
  .whyq-mark { justify-self: start; padding-top: 0; font-size: 220px; }
}

/* Featured thinking: lead feature card + the coming-soon rows */
.featured-thinking h2 { margin-bottom: var(--sp-44); }
.feature-card { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-64); align-items: center; }
.feature-card .fc-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--cream); }
.feature-card .fc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); }
.fc-kicker { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); }
.fc-kicker .tm { font-size: 0.7em; vertical-align: super; }
.feature-card .fc-body h3 { margin-top: var(--sp-14); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.fc-flag { display: inline-block; margin-top: var(--sp-18); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: #9aa0ac; }
.featured-thinking .article-rows { margin-top: var(--sp-56); border-top: 2px solid var(--ink); }
.featured-thinking .article-row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-24); align-items: center; padding: var(--sp-24) 0; border-bottom: 1px solid rgba(26,24,48,0.12); }
.featured-thinking .article-row:last-child { border-bottom: 0; }
.featured-thinking .article-row .num { font-size: var(--fs-nav); font-weight: var(--fw-extrabold); color: #9aa0ac; }
.featured-thinking .article-row .title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: rgba(26,24,48,0.45); }
.featured-thinking .article-row .fc-flag { margin-top: 0; }

/* Email capture band */
/* Scoped to the section deliberately. The homepage WORKS teaser has a
   <form class="capture"> inside it, which was picking this gradient up and
   painting a hard-edged purple rectangle behind the input and button
   (Tanya spotted it on the live site, 2026-08-17). */
section.capture { position: relative; overflow: hidden; background:
  linear-gradient(100deg, var(--ink-panel) 0%, var(--ink-panel) 55%, rgba(110,0,160,0.42) 100%); }
.capture-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-72); align-items: center; }
.capture .eyebrow { color: var(--cyan); }
.capture-h { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--white); }
.capture-form .cf-row { display: flex; gap: var(--sp-12); }
.capture-form input[type="email"] { flex: 1; min-width: 0; background: rgba(255,255,255,0.07); border: 1px solid rgba(171,205,207,0.3); border-radius: var(--r-media); padding: var(--sp-16) var(--sp-18); font: inherit; font-size: var(--fs-body-lg); color: var(--white); }
.capture-form input[type="email"]::placeholder { color: rgba(171,205,207,0.65); }
.capture-form input[type="email"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); }
.capture-form .btn { white-space: nowrap; }
.capture-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.capture-form .cf-note { margin-top: var(--sp-14); font-size: var(--fs-nav); line-height: 1.55; color: rgba(171,205,207,0.8); }
.capture-form .cf-status { margin-top: var(--sp-12); font-size: var(--fs-body); color: var(--cyan); min-height: 1.2em; }

/* The seven streams — promoted lead + ruled list */
.streams .stream-lead { margin-top: var(--sp-52); padding: var(--sp-36) var(--sp-40); background: var(--white); border-left: 4px solid var(--purple); border-radius: 0 var(--r-media) var(--r-media) 0; scroll-margin-top: var(--sp-96); }
.streams .stream-lead h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink); }
.streams .stream-lead p { margin-top: var(--sp-12); max-width: 64ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--riverbed); }
.streams .stream-list { margin-top: var(--sp-44); border-top: 2px solid var(--ink); }
.streams .stream-row { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-40); align-items: baseline; padding: var(--sp-26) 0; border-bottom: 1px solid rgba(26,24,48,0.12); scroll-margin-top: var(--sp-96); }
.streams .stream-row:last-child { border-bottom: 0; }
.streams .stream-row h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink); }
.streams .stream-row p { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--riverbed); }
.streams h3 .tm { font-size: 0.5em; vertical-align: super; color: var(--purple); }

/* Speaking — two columns, ruled list (not chips) */
.speaking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-80); align-items: start; }
.speaking-copy h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); }
.speaking-copy .btn { margin-top: var(--sp-32); }
.speaking-list { border-top: 2px solid var(--ink); }
.sp-row { padding: var(--sp-20) 0; border-bottom: 1px solid rgba(26,24,48,0.12); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--ink); }
.sp-row:last-child { border-bottom: 0; }
.sp-row em { color: var(--purple); }

@media (max-width: 900px) {
  .feature-card { grid-template-columns: 1fr; gap: var(--sp-26); }
  .capture-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .capture-form .cf-row { flex-direction: column; }
  .streams .stream-row { grid-template-columns: 1fr; gap: var(--sp-8); }
  .speaking-grid { grid-template-columns: 1fr; gap: var(--sp-40); }}

/* ============================================================
   About — 2026-08 redesign
   founder to top (full-bleed) · promoted agenda quote · lifted
   network · re-grounded discretion · ruled Story/Purpose/Legacy ·
   demoted firm · signed closing
   ============================================================ */

/* The founder — full-bleed portrait, ungraded */
.founder-full { display: grid; grid-template-columns: 560px 1fr; align-items: stretch; background: var(--white); }
.founder-full .ff-body { align-self: center; padding: var(--sp-96) var(--sp-60) var(--sp-96) var(--sp-76); max-width: 720px; }
.founder-full h2 { margin-top: var(--sp-6); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); }
.founder-full .role { margin-top: var(--sp-12); font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--purple); }
.founder-full .bio { margin-top: var(--sp-20); max-width: 52ch; font-size: var(--fs-body-lg); line-height: 1.75; color: var(--riverbed); }
.founder-full .bio-lead { color: var(--ink); font-weight: var(--fw-medium); }
/* the label column was `auto` with an 11ch cap on its contents, which let the
   track collapse and the title ran back over the label. A fixed minimum on the
   track holds it open and lets the label wrap inside it. */
.book-callout { margin-top: var(--sp-44); padding: var(--sp-32) var(--sp-36); background: var(--white); border-left: 4px solid var(--purple); border-radius: 0 var(--r-media) var(--r-media) 0; display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: var(--sp-36); align-items: center; }
.book-callout .cb-label { margin: 0; }
.book-callout p { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--ink); }

/* Who we work with — logos legible (match the inner proof bands) */
.who-logos { margin-top: var(--sp-48); padding-top: var(--sp-36); border-top: 1px solid var(--hairline-light); }
.who-logos .label { color: var(--riverbed); }
.who-logos .logos span { opacity: 0.82; }

/* Split band (network) */
.nb-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-80); align-items: center; }
.network-band .nb-head h2 { font-size: var(--fs-h2); }
.network-band .nb-grid .lead { margin-top: 0; font-size: var(--fs-body-lg); line-height: 1.75; }

@media (max-width: 900px) {
  .founder-full { grid-template-columns: 1fr; }
  .founder-full .ff-body { padding: var(--sp-40) var(--sp-24); }
  .nb-grid { grid-template-columns: 1fr; gap: var(--sp-24); }
  .book-callout { grid-template-columns: 1fr; gap: var(--sp-14); }}
/* the hero is light here, so the nav cannot be transparent over it */
.nav-solid { background: var(--ink); }
.ah-grid { margin-top: var(--sp-24); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-64); align-items: start; }
.ah-stack p, .ah-stack span { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); }
.ah-stack p.accent, .ah-stack span.accent { color: var(--purple); }
.ah-method { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--riverbed); max-width: 46ch; }

/* How we work + What changes */
.wc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-72); align-items: start; }
.work-changes .eyebrow { color: var(--purple); }
.work-changes .eyebrow::before { background: var(--purple); }
.how-list { margin: var(--sp-24) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.how-list li { position: relative; padding: var(--sp-22) 0 var(--sp-22) var(--sp-28); border-bottom: 1px solid var(--hairline-light);
  font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink); }
.how-list li::before { content: ""; position: absolute; left: 0; top: 30px; width: 7px; height: 7px; background: var(--purple); }
.chg-list { margin-top: var(--sp-24); border-top: 2px solid var(--ink); }
.chg { padding: var(--sp-22) 0; border-bottom: 1px solid var(--hairline-light); }
.chg h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-flat); color: var(--ink); }
.chg p { margin-top: var(--sp-8); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); }

/* Close */
.approach-close { background: var(--ink); }
.ac-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-64); align-items: center; }
.approach-close h2 { color: var(--white); max-width: 16ch; }
.approach-close p { margin-top: var(--sp-16); max-width: 46ch; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--mist); }
.ac-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
@media (max-width: 900px) {
  .ah-grid, .wc-cols, .ac-grid { grid-template-columns: 1fr; gap: var(--sp-32); }}

@media (max-width: 900px) {
  .tc-over { padding-bottom: var(--sp-32); }}
/* The moments and their closing line used to sit inside the hero, which pushed
   it to ~960px — half again the height of every other page hero. They read as
   their own beat on the same dark ground, two-up on the full content rail, so
   the hero keeps to eyebrow + statement + lede like the rest of the site. */
/* The hero and the moments are painted as one ground here, not two: the
   gradients are sized to the pair, so nothing seams where the hero ends and
   the moments begin, and the section reads as the hero running on (Tanya,
   2026-08-07 — the join, not the arrangement, was what jarred). */
.wwd-top {
  background:
    radial-gradient(120% 95% at 80% 15%, rgba(110,0,160,0.30) 0%, rgba(26,24,48,0) 56%),
    radial-gradient(110% 90% at 55% 62%, rgba(0,222,242,0.10) 0%, rgba(26,24,48,0) 52%),
    var(--ink);
}
/* --rail-pad is the distance from the viewport edge to the page's content
   rail — the same expression .wwd-copy uses, so the closing line starts under
   the hero heading and the list stops at the rail on the right. */
/* the atrium photograph sits behind the moments band, with a scrim heavy on
   the left where the heading and lede sit and easing right so the space reads
   (Tanya, Aug 2026). The wrapper gradient still covers the hero above. */
.wwd-moments { position: relative; isolation: isolate;
  background-image:
    linear-gradient(100deg, rgba(18,17,31,0.90) 0%, rgba(18,17,31,0.83) 45%, rgba(18,17,31,0.76) 72%, rgba(18,17,31,0.79) 100%),
    url("../assets/atrium.jpg");
  background-size: cover, cover; background-position: center, 50% 42%;
  background-repeat: no-repeat, no-repeat;
  padding: var(--sp-56) 0 var(--sp-80);
  --rail-pad: max(var(--sp-56), calc((100vw - 1200px) / 2 + var(--sp-56))); }
/* Closing line in the left column, moments in the right (Tanya, 2026-08-07),
   at the size and weight of the founders note. The list keeps its place in
   the source ahead of the line that refers back to it; only the painted
   columns swap. */
/* the same 6fr/4fr split as the hero above, so the list's rules begin exactly
   where the first panel's left edge falls (Tanya, 2026-08-07) */
.wwd-moments-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: start; }
.wwd-moments .moment-list { grid-column: 2; grid-row: 1; margin-top: 0; max-width: none;
  padding-right: var(--rail-pad); }
/* each moment lifts to white on hover, its rule with it — slow enough to read
   as a settle rather than a flick (Tanya, 2026-08-07) */
.wwd-moments .moment-list li { transition: color 0.45s ease, border-top-color 0.45s ease; }
.wwd-moments .moment-list li:hover { color: var(--white); border-top-color: rgba(255,255,255,0.34); }
.wwd-moments .wwd-close { grid-column: 1; grid-row: 1; margin-top: 0; border-top: 0; max-width: none;
  padding: 0 var(--sp-56) 0 var(--rail-pad);
  font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--white); }

@media (max-width: 900px) {
  /* stacked, the moments lead again — the closing line refers back to them */
  .wwd-moments-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .wwd-moments .moment-list { grid-column: 1; grid-row: 1; padding: 0 var(--rail-pad); }
  .wwd-moments .wwd-close { grid-column: 1; grid-row: 2; max-width: none; padding: 0 var(--rail-pad); }}

.proof-slim .proof-h { max-width: 24ch; }
.proof-slim .logo-row { margin-top: var(--sp-32); }
.proof-slim .proof-sectors { margin: var(--sp-16) 0 0; max-width: 72ch; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); border: 0; padding: 0; }
.proof-slim .proof-metric { margin: var(--sp-28) 0 0; font-size: var(--fs-body); color: var(--riverbed); }
.proof-slim .proof-metric b { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--purple); margin-right: var(--sp-8); }

.closing-wwd { background: var(--white); text-align: left; }
.cw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: start; }
.closing-wwd h2 { max-width: 16ch; }
.closing-wwd .cw-main p { margin-top: var(--sp-16); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); max-width: 54ch; }
/* keep clear air around the call to action */
.closing-wwd .cw-side { padding-top: var(--sp-8); }
.btn-purple { background: var(--purple); color: var(--white); }
.btn-purple:hover { background: #58007f; }

@media (max-width: 900px) {
  .cw-cols { grid-template-columns: 1fr; gap: var(--sp-32); }}

/* ============================================================
   Thinking (WORKS) — 2026-08 redesign
   ghost wordmark hero · numbered force streams
   ============================================================ */
.works-ghost {
  position: absolute; right: -2%; top: var(--sp-40); z-index: 0; pointer-events: none;
  font-size: clamp(120px, 17vw, 260px); font-weight: var(--fw-extrabold); letter-spacing: -0.03em;
  line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(171,205,207,0.22);
}
.works-hero .wrap { position: relative; z-index: 1; }
.works-hero .eyebrow { color: var(--cyan); }
.works-hero .q-line { margin-top: var(--sp-20); font-size: clamp(30px, 4.4vw, 46px); font-weight: var(--fw-bold); letter-spacing: -0.025em; line-height: 1.12; color: var(--white); max-width: 20ch; }
.works-hero .q-line em { color: var(--cyan); }
.works-hero .sub-line { margin-top: var(--sp-18); font-size: var(--fs-body-lg); font-weight: var(--fw-regular); color: var(--mist); }
/* the forces read as a spaced row, no punctuation between them */
.works-hero .force-line {
  margin-top: var(--sp-56); padding-top: var(--sp-24); border-top: 1px solid rgba(171,205,207,0.22);
  max-width: none; display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-32);
  font-size: var(--fs-body); letter-spacing: 0.02em; color: var(--mist);
}

.streams-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: start; }
.streams-head h2 { max-width: 18ch; }
.streams-head .lead { margin-top: 0; }
/* every stream carries its number; 01 leads full width, the rest run two-up */
.streams .s-num { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--purple); }
.streams .stream-lead {
  margin-top: var(--sp-52); padding: var(--sp-32) 0 0; background: none; border-left: 0; border-radius: 0;
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); align-items: start;
}
.streams .stream-lead h3 { font-size: var(--fs-h3); }
.streams .stream-lead p { margin-top: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.streams .stream-list { margin-top: 0; border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-64); }
.streams .stream-row {
  padding: var(--sp-28) 0 var(--sp-24); border-top: 1px solid rgba(26,24,48,0.2);
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-8) var(--sp-16); align-items: baseline;
}
.streams .stream-row h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink); }
.streams .stream-row p { grid-column: 2; margin-top: var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); }

@media (max-width: 900px) {
  .works-ghost { display: none; }
  .streams-head { grid-template-columns: 1fr; gap: var(--sp-24); }
  .streams .stream-lead { grid-template-columns: 44px 1fr; }
  .streams .stream-lead p { grid-column: 2; margin-top: var(--sp-10); }
  .streams .stream-list { grid-template-columns: 1fr; }}

/* ============================================================
   About — 2026-08 redesign
   split hero with byline · founder flipped, quote folded in ·
   two-column close
   ============================================================ */
.about-hero { padding: 0; overflow: hidden; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(420px, 42vw, 540px); }
.ab-copy {
  align-self: center; min-width: 0;
  padding: var(--sp-96) var(--sp-56) var(--sp-96) max(var(--sp-56), calc((100vw - 1200px) / 2 + var(--sp-56)));
}
.ab-byline {
  margin-top: var(--sp-40); padding-top: var(--sp-20); border-top: 1px solid rgba(171,205,207,0.24);
  display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-40);
  font-size: var(--fs-sm); color: var(--mist);
}
.ab-byline b { color: var(--white); font-weight: var(--fw-semibold); }
.ab-portrait { position: relative; overflow: hidden; }
.ab-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* the fixed nav sits over this corner — darken the top so the links stay legible */
.ab-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,24,48,0.72) 0%, rgba(26,24,48,0.30) 14%, rgba(26,24,48,0) 30%);
}

/* founder: copy left, portrait right, with the quote closing the column */
.founder-flip { grid-template-columns: 1fr 560px; }
/* the base rule caps ff-body at 720px; with the gutter-aligned left padding
   that left the copy squeezed into a sliver of a much wider column */
/* the column fills the grid, but the measure is held to a readable width */
.founder-flip .ff-body h2 { max-width: 14ch; }
.founder-flip .ff-body .role { max-width: 44ch; }
.founder-flip .ff-body .bio { max-width: 58ch; }
.founder-flip .ff-body { max-width: none; padding: var(--sp-96) var(--sp-76) var(--sp-96) max(var(--sp-56), calc((100vw - 1200px) / 2 + var(--sp-56))); }

.closing-about { background: var(--ink); text-align: left; }
.ca-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: start; }
.closing-about h2 { color: var(--white); max-width: 18ch; }
.closing-about .ca-main p { margin-top: var(--sp-16); font-size: var(--fs-lead); color: var(--mist); }

@media (max-width: 900px) {
  .ab-grid { grid-template-columns: 1fr; min-height: 0; }
  .ab-copy { padding: var(--sp-96) var(--sp-56) var(--sp-48); }
  .ab-portrait { min-height: 340px; }
  .founder-flip { grid-template-columns: 1fr; }
  .founder-flip .ff-body { padding: var(--sp-40) var(--sp-24); }
  .ca-cols { grid-template-columns: 1fr; gap: var(--sp-32); }}

/* the moments read as a ruled set — light by default, inverted in the hero */
.moment-list { margin: var(--sp-24) 0 0; padding: 0; list-style: none; max-width: 46ch; }
.moment-list li { padding: var(--sp-10) 0; border-top: 1px solid var(--hairline-light);
  font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--riverbed); }
.wwd-moments .moment-list li { border-top-color: rgba(255,255,255,0.18); color: var(--mist); }
.wwd-close { margin-top: var(--sp-28); padding-top: var(--sp-20); border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 52ch; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--mist); }

/* What we do — Our difference: the six interventions as a ruled three-up */
.diff-lead { margin-top: var(--sp-32); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: start; }
.diff-lead .dl-a { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink); }
.diff-lead .dl-a b { font-weight: var(--fw-semibold); color: var(--purple); }
.diff-lead .dl-b { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); }
.int-label { margin-top: var(--sp-48); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--riverbed); }
.int-grid { margin-top: var(--sp-20); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-32) var(--sp-48); }
.int { padding-top: var(--sp-18); border-top: 2px solid var(--purple); }
.int h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink); }
.int p { margin-top: var(--sp-8); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); }
.int-close { margin-top: var(--sp-48); padding-top: var(--sp-24); border-top: 1px solid rgba(26,24,48,0.2);
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--riverbed); max-width: 64ch; }
.int-close b { color: var(--ink); font-weight: var(--fw-semibold); }
@media (max-width: 900px) {
  .diff-lead, .int-grid { grid-template-columns: 1fr; gap: var(--sp-32); }}

/* ---- What we do (Tanya, Aug 2026). The old pane stacked two taxonomies: a
   photo collage captioned with audiences above an index naming services. This
   is one image and one list. The two facing chairs are the point of the
   headline, so the picture is structural rather than decorative. ---- */
.wwB-split { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  gap: clamp(40px, 5vw, 72px); align-items: center; }
/* --r-media is the site's shared radius for framed photographs, used on the
   Approach cards, the pathway images and Tanya's portrait. */
/* A soft shadow rather than a larger radius: the harsh edge comes from the
   bright window in the top corners meeting a white page, and a shadow makes
   the picture rest on the page instead of reading as a hole cut in it. The
   site already uses this device on the Approach cards, more lightly. */
.wwB-media { margin: 0; overflow: hidden; border-radius: var(--r-media);
  aspect-ratio: 3 / 4; max-width: 360px;
  box-shadow: 0 18px 48px rgba(26,24,48,0.14), 0 3px 10px rgba(26,24,48,0.06); }
.wwB-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wwB h2 { max-width: 20ch; margin-top: var(--sp-14); font-size: var(--fs-h2); }
.wwB-sub { margin-top: var(--sp-18); max-width: 52ch; font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--riverbed); }
.wwB .wwr-list { margin-top: var(--sp-30); border-top: 1px solid var(--hairline-light); }
.wwB .wwr { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-24);
  padding: var(--sp-18) 0; border-bottom: 1px solid var(--hairline-light); text-decoration: none; }
.wwB .wwr-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--purple); letter-spacing: .08em; }
.wwB .wwr-name { display: block; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--ink); }
.wwB .wwr:hover .wwr-name { color: var(--purple); }
/* With the picture reduced, the text column widened enough for the
   descriptions to run past a comfortable measure, so they are capped. */
.wwB .wwr-note { display: block; margin-top: var(--sp-6); max-width: 62ch;
  font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--riverbed); }
.wwB .ww-foot { margin-top: var(--sp-26); }
@media (max-width: 900px) {
  .wwB-split { grid-template-columns: 1fr; gap: var(--sp-30); }
  .wwB-media { aspect-ratio: 4 / 3; }}

/* The trust band moves to cream so it does not run into the white services
   pane beneath it. The page now steps dark, cream, white, dark. */
.trust { background: var(--cream); }

/* Dropdown panel needs to lift off the hero photograph behind it. */
.nav-menu { box-shadow: 0 18px 40px rgba(0,0,0,0.38); }
@media (max-width: 900px) { .nav-menu { box-shadow: none; }}
@media (max-width: 700px) {
  .logo-row .logos { gap: var(--sp-16) var(--sp-24); }}

/* ---- Hero accent: the logo wedge, not the concentric rings (Tanya, Aug 2026).
   The rings read as generic consulting furniture and had no relationship to the
   mark. This is the same triangle as the logo's cyan accent, oversized and
   cropped at the bottom-right so only the diagonal and the vertical edge show. ---- */
.hero .turn-mark {
  position: absolute; right: -70px; bottom: -90px;
  width: 560px; height: 700px;
  z-index: 1; pointer-events: none;
}
.hero .turn-mark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .hero .turn-mark { right: -90px; bottom: -70px; width: 340px; height: 430px; opacity: 0.8; }}

/* ---- The Dime difference, trimmed (Tanya, Aug 2026). The standfirst was
   restating the headline, and the fourth row repeated the Change &
   Transformation service two panes above. With three rows left, the grid
   drops to a single stacked column so there is no orphaned cell, and the
   headline sits level with them rather than floating at the top. ---- */
.difference .diff-grid { grid-template-columns: 1fr; row-gap: 0; }
.difference .diff-split { align-items: center; }
/* Stacked now, so the old two-column divider becomes a rule above each row.
   The first row keeps no rule, so the set reads as a list rather than a box. */
.difference .diff-row,
.difference .diff-row:nth-child(odd) {
  max-width: 48ch; padding: var(--sp-26) 0 0; border-left: 0;
  border-top: 1px solid var(--hairline-light);
}
.difference .diff-row:first-child { padding-top: 0; border-top: 0; }
.difference .diff-row + .diff-row { margin-top: var(--sp-26); }
@media (max-width: 900px) {
  .difference .diff-row, .difference .diff-row:nth-child(odd) { max-width: none; }}

/* The Approach standfirst sat level with the first line of the stacked
   headline, leaving a tall empty block beneath it. Centring it against the
   three-line headline puts it in the middle of that space. */
.ah-grid { align-items: center; }
@media (max-width: 900px) { .ah-grid { align-items: start; }}

/* ---- BUG FIX: .why-works was written for the purple band on the Thinking
   page and sets headings to white. The Approach page reuses the class over a
   white background, so its h2 has been invisible. Scope the white to the dark
   band only, and let the light version inherit the normal ink heading. ---- */
.why-works:not([style*="--white"]) h2 { color: var(--white); }
/* Keep the breaks at every width. Hiding them collapses the space either side
   and runs the sentences together. */

/* ---- Hero fixes (Aug 2026) ----
   1. The ghost button's border was a 1.5px line at 50% opacity sitting over a
   photograph, so it dropped below the 3:1 contrast an interface boundary needs
   wherever the image behind it is light. Scoped to the hero so the same button
   on the Thinking page, which sits on flat colour, is untouched. */
.hero .btn-ghost {
  border-color: rgba(255,255,255,0.85);
  background: rgba(18,17,31,0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero .btn-ghost:hover { background: rgba(18,17,31,0.55); border-color: var(--white); }

/* 2. On a phone the crop put the lede and both buttons over the table, the
   orchid and the pale floor, which is the busiest part of the picture. Shifting
   the focal point puts the plain glass wall behind the text, and the scrim is
   deepened through the lower half as a second line of defence. */
@media (max-width: 700px) {
  .hero .photo-texture { background-position: 38% 24%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(18,17,31,0.72) 0%, rgba(18,17,31,0.78) 45%, rgba(18,17,31,0.88) 100%),
      linear-gradient(180deg, rgba(110,0,160,0.10) 0%, rgba(26,24,48,0) 60%);
  }
}

/* The Challenge prose and the Dime difference were both cream with nothing
   between them. The photograph and the prose above are one idea, so they keep
   the shared ground; the difference is a new idea and takes white. */
.difference { background: var(--white); }

/* ---- The shift (Aug 2026). Three changes: the section link moves under the
   heading like every other one on the site; the attributions align on a shared
   baseline instead of floating wherever each quote happens to end; and they
   step back in tone so the quote leads. The grey is #5F6A7A rather than the
   lighter tone first previewed, which measured 2.7:1 on cream and would have
   failed WCAG AA. This measures 4.8:1. ---- */
.outcomes .sec-head { display: block; }
.outcomes .sec-head .arrow-link { display: inline-block; margin-top: var(--sp-26); }
.outcomes .cols3 { margin-top: var(--sp-44); }
.outcomes .quote { display: flex; flex-direction: column; height: 100%; }
.outcomes .quote p.attr {
  margin-top: auto; padding-top: var(--sp-16);
  font-weight: var(--fw-semibold); color: #5F6A7A;
}

/* The label above the closing paragraph: .eyebrow is inline-block by default,
   which let it sit alongside the text. Forced to its own line here. */
.wwd-moments .wwd-close .eyebrow { display: block; width: fit-content; color: var(--cyan); }
.wwd-moments .wwd-close > p { margin: 0; }

/* The moments block now leads with a heading rather than closing with a
   paragraph, so the copy column comes first and the list sits opposite it. */
.wwd-moments .wwd-close h2 { margin-top: var(--sp-14); max-width: 16ch;
  font-size: var(--fs-h2); color: var(--white); }
.wwd-moments .wwd-close > p { margin-top: var(--sp-20); max-width: 46ch;
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--mist); }

/* The list is placed into column two explicitly, which on a single-column
   mobile layout put it above the heading. Reset the placement below 900px so
   the heading leads on a phone as it does on a desktop. */
@media (max-width: 900px) {
  .wwd-moments .moment-list { grid-column: 1; grid-row: 2; padding-right: 0; }
  .wwd-moments .wwd-close { grid-column: 1; grid-row: 1; }
}

/* The service-emphasis rules above are more specific than the older
   .group-word .gw-service mobile rule, so they cancelled it and the label ran
   the full width of a phone. Restored here: stacked, and back to small. */
@media (max-width: 640px) {
  .pl-a .gw-service, .org-band .gw-service {
    display: block; margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: var(--sp-6); font-size: var(--fs-sm); letter-spacing: 0.1em;
  }
}

/* The WORKS trademark mark in the nav: raised and reduced so it reads as a
   mark rather than a character, and does not lift the item off the baseline. */
.nav-links a sup { font-size: 0.58em; top: -0.5em; margin-left: 1px; letter-spacing: 0; }

/* The What We Do closing is now two lines and a button, so the generous
   padding it inherited from the full-length version is cut back. The h2 also
   inherits a centred 22ch rule from .closing-simple, which in this two-column
   layout wrapped it to four lines and pushed it out of line with the
   paragraph beneath. */
.closing-wwd { padding: 72px 0; }
.closing-wwd .cw-main h2 { margin: 0; max-width: 26ch; }
.closing-wwd .cw-main p { margin: var(--sp-18) 0 0; max-width: 46ch; }

/* ================================================================
   APPROACH PAGE, rebuilt Aug 2026. One methodology, explained once.
   Read the moment, Make the turn, Build momentum. Everything else on
   the page supports it rather than competing with it. Built from the
   existing design vocabulary: the two-column pane shape from What We
   Do, the ruled lists, the dark band, the existing close.
   ================================================================ */

/* --- the three stages --- */
.stages-band { padding-top: 88px; padding-bottom: 88px; }
.stage { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
  padding: var(--sp-56) 0; border-top: 1px solid var(--hairline-light); }
/* no rule above the first stage (Tanya, Aug 2026): the section already reads as
   a new block, and the heavy line was doing nothing the white space did not.
   The light rules between stages 02 and 03 stay, since those do separate. */
.stage:first-child { border-top: 0; padding-top: 0; }
.stage:last-child { border-bottom: 1px solid var(--hairline-light); }
.stage-n { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; color: var(--purple); }
.stage-lead h2, .stage-lead h3 { margin-top: var(--sp-10); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); max-width: 12ch; }
.stage-head { margin-top: var(--sp-14); font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold); color: var(--purple); max-width: 24ch; }
.stage-copy { font-size: var(--fs-body); line-height: var(--lh-relaxed);
  color: var(--riverbed); max-width: 62ch; }
/* the concluding thought sits above the body copy without competing with the heading */
.stage-close { margin-top: var(--sp-20); font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold); line-height: var(--lh-relaxed); color: var(--ink); max-width: 52ch; }
/* deliberately light and scannable rather than a second block of copy */
.stage-inc { margin-top: var(--sp-30); padding-top: var(--sp-20);
  border-top: 1px solid var(--hairline-light); }
.stage-inc-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--riverbed); }
/* the same chip treatment the services use on What We Do, so the two pages
   name the work in one visual language */
.stage-inc .chips { margin-top: var(--sp-16); display: flex; flex-wrap: wrap; gap: var(--sp-10); }

/* --- why coaching-led --- */
.why-coaching { position: relative; overflow: hidden; background: var(--ink);
  padding: 96px 0; }
.why-coaching-bg { position: absolute; inset: -8% 0;
  background: url("../assets/coaching-room.jpg") center 42% / cover no-repeat;
  filter: saturate(0.55) brightness(0.42); }
.why-coaching-scrim { position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(18,17,31,0.93) 0%, rgba(18,17,31,0.80) 52%, rgba(110,0,160,0.30) 100%); }
.wc-inner { position: relative; z-index: 1; }
.why-coaching h2 { margin-top: var(--sp-14); max-width: 22ch;
  font-size: var(--fs-h2); color: var(--white); }
.why-coaching h2 .hl { color: var(--cyan); }
.why-coaching p { margin-top: var(--sp-22); max-width: 58ch;
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--mist); }

/* --- close --- */
/* reads as a secondary headline beneath "Ready to move forward?", not as an
   eyebrow or supporting note */
.approach-close .ac-second { margin-top: var(--sp-16); max-width: 22ch;
  font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  letter-spacing: var(--ls-flat); color: var(--cyan); }
.approach-close .ac-second + p { margin-top: var(--sp-18); }

@media (max-width: 900px) {
  .stages-band { padding-top: 64px; padding-bottom: 64px; }
  .stage { grid-template-columns: 1fr; gap: var(--sp-26); padding: var(--sp-38) 0; }
  .stage-lead h2, .stage-lead h3, .stage-head { max-width: none; }
  .why-coaching { padding: 64px 0; }}


/* ---- Founder portrait is a cut-out on a transparent ground (Aug 2026), so it
   stands on the cream rather than sitting in a frame: no crop, no radius, no
   shadow, no saturation filter. The earlier file was cut with a hard horizontal
   edge across the hem and needed a fade to hide it; the replacement tapers
   naturally, so the fade is gone. ---- */
.founder-portrait img {
  aspect-ratio: auto; height: auto; object-fit: contain;
  border-radius: 0; box-shadow: none; filter: none;
}


/* ================================================================
   SELECTED WORK, built to the handover (Aug 2026).
   Rules held to: only white and cream on light, ink or ink-deep on
   dark; cyan on dark grounds and buttons, purple for labels, accents
   and quotes on light; no two consecutive cases share a treatment
   (full-bleed, split, statement, quiet); photography is full-bleed or
   a full column, never an inset card; no italics anywhere.
   ================================================================ */

/* preserves the anchors other pages already link to, without moving them */
.anchor-alias { display: block; height: 0; scroll-margin-top: 96px; }
.cs { scroll-margin-top: 96px; }

/* --- 1. Hero --- */
.sw-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 5vw, 88px); align-items: start; }
.sw-hero h1 { max-width: 13ch; font-size: clamp(44px, 5.4vw, 78px); line-height: 0.98; }
.sw-hero h1 .hl { color: var(--cyan); }
.sw-hero .lede { margin-top: var(--sp-26); max-width: 44ch; }
.sw-hero-index { padding-top: var(--sp-14); }
.hx-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: var(--sp-20); }
.hx-row { display: grid; grid-template-columns: 52px 1fr; align-items: baseline;
  padding: var(--sp-18) 0; border-top: 1px solid var(--hairline-dark); text-decoration: none; }
.hx-row:last-child { border-bottom: 1px solid var(--hairline-dark); }
/* small numbers: one size across the page, cyan on dark and purple on light */
.hx-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--cyan); }
.hx-client { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--white); }
.hx-eng { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--mist); }
.hx-row:hover .hx-client { color: var(--cyan); }

/* --- 2. Credentials --- */
.sw-cred { background: var(--ink); padding: 0 0 var(--sp-72); }
.sw-cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--hairline-dark); }
.cred { padding: var(--sp-38) var(--sp-30) var(--sp-30) 0; border-right: 1px solid var(--hairline-dark); }
.cred:last-child { border-right: 0; }
.cred + .cred { padding-left: var(--sp-30); }
/* matched to the homepage trust band so the same four figures read as the same
   claim on both pages: same size token, same weight, same tracking. Only the
   ground differs, so the numerals are white here and ink there. */
.cred-n { display: block; font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight); line-height: 1; color: var(--white); }
.cred-plus { color: var(--cyan); }
.cred-t { display: block; margin-top: var(--sp-12); font-size: var(--fs-sm); color: var(--mist); }

/* --- shared case furniture --- */
.cs-ident { display: grid; grid-template-columns: auto auto 1fr; gap: clamp(20px, 2vw, 30px); align-items: center; }
/* the one large number treatment on the page, and the only one at this scale.
   Cyan is the dark-ground accent; on the cream split it measured 1.45:1 against
   the background, well under the 3.0 large-text minimum, and it disagreed with
   its own headline accent two lines below. Light grounds take purple. */
.cs-n { font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight); line-height: 1; color: var(--purple); }
.cs-photo-cap .cs-n, .cs-quiet-open .cs-n { color: var(--cyan); }
.cs-rule { width: 1px; height: 56px; background: rgba(26,24,48,0.22); }
/* over a photograph the rule needs to read against a dark ground instead */
.cs-photo-cap .cs-rule, .cs-quiet-open .cs-rule { background: rgba(171,205,207,0.45); }
/* these are spans inside .cs-who, so they need to be blocks to stack */
.cs-who { display: block; }
.cs-client { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--ink); }
.cs-eng { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--riverbed); }
.cs-photo-cap .cs-client, .cs-quiet-open .cs-client { color: var(--white); }
.cs-photo-cap .cs-eng, .cs-quiet-open .cs-eng { color: var(--mist); }
.cs-title { margin-top: clamp(28px, 3vw, 44px); max-width: 18ch;
  font-size: clamp(34px, 4.4vw, 60px); font-weight: var(--fw-bold);
  line-height: 1.04; letter-spacing: -0.025em; color: var(--ink); }
.cs-title .hl { color: var(--purple); }
.cs-title-over { color: var(--white); }
.cs-title-over .hl { color: var(--cyan); }

.cs-body { padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 96px); }
.cs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 64px; }
.cs-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--purple); }
.cs-block .p-lead { margin-top: var(--sp-18); font-size: var(--fs-lead);
  line-height: var(--lh-relaxed); color: var(--ink); }
.cs-block p:not(.cs-label):not(.p-lead) { margin-top: var(--sp-16); font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--riverbed); }

/* the shift: a four-panel strip on a hairline grid, so results are scannable */
.cs-shift { margin-top: clamp(48px, 6vw, 72px); }
.shift-strip { margin-top: var(--sp-22); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px; background: var(--hairline-light); border: 2px solid var(--hairline-light); }
.sp { background: var(--cream); padding: var(--sp-30) var(--sp-26); }
.sp-n { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--purple); }
.sp p { margin-top: var(--sp-14); font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--ink); }

/* centred, and held at a measure that keeps it on three lines (Tanya, Aug 2026):
   the quote is the only element in a case that stands alone rather than
   belonging to a column, so it closes the case on the centre line */
.cs-pull { margin: clamp(56px, 7vw, 88px) 0 0; text-align: center; }
.cs-pull blockquote { margin: 0 auto; max-width: 20ch; font-size: clamp(28px, 3.4vw, 44px);
  font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.02em; color: var(--purple); }
.cs-pull blockquote::before { content: "\201C"; }
.cs-pull blockquote::after { content: "\201D"; }
.cs-pull figcaption { margin-top: var(--sp-22); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--riverbed); }

/* --- cases 01 and 03: full-bleed photo hero --- */
.cs-bleed { background: var(--white); }
.cs-photo { position: relative; margin: 0; height: max(440px, 62vh); overflow: hidden; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-photo-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(18,17,31,0.94), rgba(18,17,31,0.72) 46%, rgba(18,17,31,0.18)); }
.cs-photo-cap { position: absolute; left: 0; right: 0; bottom: clamp(36px, 5vw, 64px); }
.cs-photo-cap .cs-title { max-width: 16ch; }

/* --- case 02: split, image a full column --- */
.cs-split { background: var(--cream); }
.cs-split .sp { background: var(--white); }
.cs-split-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch; }
.cs-split-photo { margin: 0; min-height: 560px; overflow: hidden; }
.cs-split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --rail-pad is scoped to a What We Do element, so on this page the variable
   was undefined, which invalidated the whole padding shorthand and collapsed it
   to zero: the copy sat flush against the photograph edge. Self-contained now. */
.cs-split-lead { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 5vw, 88px) clamp(40px, 4vw, 72px) clamp(48px, 5vw, 88px) clamp(48px, 5.5vw, 96px); }

/* --- 5. Partnership statement, the lead-in to case 03 --- */
.sw-partnership { background: var(--ink-deep); padding: clamp(72px, 9vw, 112px) 0; }
.sw-partnership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(36px, 5vw, 80px); align-items: center; }
.sp-figures { font-size: clamp(30px, 3.6vw, 46px); font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em; line-height: 1.1; color: var(--white); }
.sp-figures .hl { color: var(--cyan); }
.sp-note { max-width: 46ch; font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--mist); }

/* --- case 04: quiet. Typographic opener, then a wide short band --- */
.cs-quiet { background: var(--cream); }
.cs-quiet-open { background: var(--ink-deep); padding: clamp(64px, 8vw, 96px) 0; }
.cs-quiet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end; }
.cs-quiet-eng { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mist); }
.cs-band { margin: 0; height: clamp(240px, 30vw, 380px); overflow: hidden; }
.cs-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-quiet .sp { background: var(--white); }

/* --- 8. Other moments --- */
.sw-other { background: var(--white); padding: clamp(72px, 9vw, 100px) 0; }
.so-head { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); }
.so-grid { margin-top: var(--sp-44); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(40px, 5vw, 88px);
  align-items: start; }
.so { border-top: 3px solid var(--purple); padding-top: var(--sp-26); }
.so h3 { margin-top: var(--sp-22); max-width: 20ch; font-size: var(--fs-h4);
  font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--ink); }
.so > p:not(.cs-client):not(.cs-eng):not(.so-proof) { margin-top: var(--sp-16);
  max-width: 50ch; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--riverbed); }
.so-proof { margin-top: var(--sp-26); font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--purple); }
.so-quote { margin: var(--sp-30) 0 0; }
.so-quote blockquote { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--purple); }
.so-quote blockquote::before { content: "\201C"; }
.so-quote blockquote::after { content: "\201D"; }
.so-quote figcaption { margin-top: var(--sp-16); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--riverbed); }

/* --- 9. Closing --- */
.sw-close { background: var(--ink); padding: clamp(72px, 9vw, 104px) 0; }
.sw-close-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(36px, 5vw, 72px); align-items: center; }
.swc-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan); }
.sw-close h2 { margin-top: var(--sp-18); max-width: 16ch; color: var(--white); }
.swc-note { margin-top: var(--sp-22); max-width: 46ch; font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--mist); }
.swc-action { display: flex; justify-content: flex-start; }

/* reveal: fade up as blocks enter the viewport */
[data-reveal-target] { opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal-target].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-target] { opacity: 1; transform: none; transition: none; }}

@media (max-width: 900px) {
  .cs-photo { height: max(340px, 50vh); }
  .cs-split-photo { min-height: 340px; }
  .cs-split-lead { padding: var(--sp-40) 0 var(--sp-10); }
  .cs-cols { gap: var(--sp-34); }
  .cs-title, .cs-photo-cap .cs-title { max-width: none; }
  .cred { border-right: 0; border-bottom: 1px solid var(--hairline-dark);
    padding: var(--sp-26) 0; }
  .cred + .cred { padding-left: 0; }
  .cs-rule { height: 38px; }
  .sw-cred { padding-bottom: var(--sp-44); }}

/* ---- What We Do hero on ink (Aug 2026), per the handover. The photographic
   hero moved to the top of the Approach page; this one carries the headline
   and lede on two columns, with the four ways in continuous beneath it. ---- */
.wwd-ink-hero { background: var(--ink); padding: 170px 0 var(--sp-64); }
.wih-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: clamp(36px, 5vw, 80px); align-items: end; }
.wwd-ink-hero .eyebrow { color: var(--cyan); }
.wwd-ink-hero .eyebrow::before { background: var(--cyan); }
.wwd-ink-hero h1 { margin-top: var(--sp-18); max-width: 14ch;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.0; color: var(--white); }
.wwd-ink-hero .lede { max-width: 44ch; color: var(--mist); }

.wwd-ways { background: var(--ink); padding: 0 0 var(--sp-72); }
/* the rule above the routes used to be the "Four ways in" label's bottom
   border; the label was removed, so it now belongs to the row itself, matching
   the credentials band on Selected Work */
.ww-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--hairline-dark); }
/* hairlines sit on the cells, never as a grid gap over the ink, so a wrap
   cannot expose the parent as an empty coloured block */
.ww { display: block; padding: var(--sp-30) var(--sp-26) var(--sp-26) 0;
  border-left: 1px solid var(--hairline-dark); text-decoration: none; }
.ww:first-child { border-left: 0; padding-left: 0; }
.ww:not(:first-child) { padding-left: var(--sp-26); }
.ww-n { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--cyan); }
.ww-name { display: block; margin-top: var(--sp-14); font-size: var(--fs-h4);
  font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--white); }
.ww-svc { display: block; margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--mist); }
.ww:hover .ww-name { color: var(--cyan); }

/* ---- Approach hero: the photograph that used to open What We Do, now carrying
   the headline as it did there. Copy inverts to the dark-ground accents. ---- */
.approach-hero-photo { position: relative; overflow: hidden; background: var(--ink);
  padding: 186px 0 110px; }
.aph-bg { position: absolute; inset: -6% 0;
  background: url("../assets/p2-two-women.jpg") 64% 26% / cover no-repeat; }
/* lighter on the right than an architectural scrim, so the faces are not swallowed */
/* deepened right-hand side (Tanya, Aug 2026): the lede sits over the brightest
   part of the frame, and at the old values it measured only 4.78:1, barely
   clearing the 4.5 minimum and failing at the brightest points */
.aph-scrim { position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(18,17,31,0.95) 0%, rgba(18,17,31,0.90) 38%, rgba(18,17,31,0.82) 72%, rgba(18,17,31,0.78) 100%),
  linear-gradient(180deg, rgba(26,24,48,0.28) 0%, rgba(26,24,48,0.48) 100%); }
/* the lede goes white rather than mist here: it sits over the busiest part of
   the frame, and the pale blue-grey was reading as recessive against the jacket
   even once the ground behind it measured comfortably */
.approach-hero-photo .ah-method { color: var(--white); }
.aph-inner { position: relative; z-index: 1; }
.approach-hero-photo .eyebrow { color: var(--cyan); }
.approach-hero-photo .eyebrow::before { background: var(--cyan); }
.approach-hero-photo .ah-stack p, .approach-hero-photo .ah-stack span { color: var(--white); }
.approach-hero-photo .ah-stack p.accent, .approach-hero-photo .ah-stack span.accent { color: var(--cyan); }

@media (max-width: 900px) {
  .approach-hero-photo { padding: 140px 0 72px; }
  .aph-bg { background-position: 58% 22%; }}

@media (max-width: 900px) {
  .wwd-ink-hero { padding: 130px 0 var(--sp-44); }
  .ww { border-left: 0; border-top: 1px solid var(--hairline-dark);
    padding: var(--sp-24) 0 !important; }
  .ww:first-child { border-top: 0; }}

/* ---- About credentials (Aug 2026). Three areas mirroring the founder bio's
   claim in the same order: the strategic eye of an MBA, the precision of a
   business psychologist, the emotional intelligence of a coach. Headings name
   the discipline; the marks sit beneath as evidence. Board positions moved
   under business psychology, since both bodies are psychology bodies. ---- */
.cred-marks { margin-top: var(--sp-40); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 2px solid var(--ink); }
.cm { padding: var(--sp-32) var(--sp-30) var(--sp-30) 0;
  border-right: 1px solid var(--hairline-light); }
.cm:last-child { border-right: 0; }
.cm:not(:first-child) { padding-left: var(--sp-30); }
.cm-k { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold);
  line-height: 1.15; color: var(--ink); }
.cm-d { display: block; margin-top: var(--sp-14); font-size: var(--fs-body);
  line-height: var(--lh-relaxed); color: var(--riverbed); }
@media (max-width: 900px) {
  .cm { border-right: 0; border-bottom: 1px solid var(--hairline-light);
    padding: var(--sp-26) 0 !important; }}

/* ================================================================
   WHAT WE DO offerings, built to the handover (Aug 2026).
   Governing principle: all four are structurally identical, and only
   tone, accent and photography vary. Sameness of anatomy is what makes
   a set legible; distinctness comes from the frame.
   Anatomy, in order: header (numbered square, audience, service),
   headline, promise, trigger list, photo filling the right column,
   then a tinted footer bar carrying the work and the actions.
   ================================================================ */
.offering { background: var(--white); padding: 0 0 var(--sp-40); }
.offering:first-of-type { padding-top: var(--sp-72); }

/* two explicit tracks, not auto-fit: with three children (text, media, footer)
   auto-fit produced a third column and the footer sat beside the photograph
   instead of spanning beneath both. The media query below does the collapsing. */
.op-panel { max-width: 1240px; border: 1px solid var(--hairline-light);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; position: relative; background: var(--white); }
/* the 4px accent bar across the top of every panel */
.op-panel::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: 4px; background: var(--op-accent); }
.op-purple { --op-accent: var(--purple); }
.op-teal { --op-accent: var(--teal, #0C93A4); }
.op-riverbed { --op-accent: var(--riverbed); }
.op-cyan { --op-accent: var(--cyan); }

.op-text { padding: clamp(40px, 4.4vw, 64px); }
.op-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-20); align-items: center; }
/* the number sits in a bordered square in the offering's accent */
.op-n { display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--op-accent); color: var(--op-accent);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.op-audience { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--op-accent); }
.op-service { display: block; margin-top: var(--sp-6); font-size: var(--fs-body);
  font-weight: var(--fw-semibold); color: var(--ink); }
.op-title { margin-top: var(--sp-30); max-width: 17ch;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: var(--fw-bold);
  line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); }
.op-title .hl { color: var(--op-accent); }
.op-promise { margin-top: var(--sp-26); font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--ink); }
.op-promise-b { margin-top: var(--sp-12); font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--riverbed); }
.op-triggers { margin: var(--sp-32) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hairline-light); }
.op-triggers li { padding: var(--sp-16) 0; border-bottom: 1px solid var(--hairline-light);
  font-size: var(--fs-body); color: var(--riverbed); }

/* photography fills the whole column, edge to edge, never an inset card */
/* the figure must fill its whole grid track, so the image stretches to the
   column rather than sizing to its own intrinsic width */
.op-media { margin: 0; min-height: 420px; overflow: hidden; position: relative;
  border-left: 1px solid var(--hairline-light); }
.op-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }

/* the footer bar spans the full panel width beneath both columns */
.op-foot { grid-column: 1 / -1; background: var(--cream);
  border-top: 1px solid var(--hairline-light);
  padding: var(--sp-30) clamp(40px, 4.4vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-30); align-items: center; }
.op-work-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--op-accent); margin-bottom: var(--sp-16); }
.op-basis { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--op-accent); }
.op-foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24); }
.op-links .see-work { margin: 0; }
.op-links .see-work + .see-work { margin-top: var(--sp-8); }

/* 04 inverts to dark: private, by introduction, without breaking the pattern */
.op-dark { background: var(--ink); }
.op-dark .op-panel { background: var(--ink); border-color: rgba(171,205,207,0.22); }
.op-dark .op-service, .op-dark .op-title, .op-dark .op-promise { color: var(--white); }
.op-dark .op-promise-b, .op-dark .op-triggers li { color: var(--mist); }
.op-dark .op-triggers, .op-dark .op-triggers li { border-color: rgba(171,205,207,0.2); }
.op-dark .op-media { border-left-color: rgba(171,205,207,0.22); }
.op-dark .op-foot { background: var(--ink-deep); border-top-color: rgba(171,205,207,0.22); }
/* the see-work links default to purple, which is unreadable on ink */
.op-dark .op-links .see-work { color: var(--mist); }
.op-dark .op-links .see-work a { color: var(--cyan); text-decoration-color: rgba(0,222,242,0.45); }
.op-dark .op-basis { color: var(--cyan); }

@media (max-width: 800px) {
  .offering { padding-bottom: var(--sp-30); }
  .op-panel { grid-template-columns: 1fr; }
  /* photo above text on a phone */
  .op-media { order: -1; min-height: 260px; border-left: 0;
    border-bottom: 1px solid var(--hairline-light); }
  .op-dark .op-media { border-bottom-color: rgba(171,205,207,0.22); }
  .op-text, .op-foot { padding-left: 24px; padding-right: 24px; }
  .op-title { max-width: none; }
  .op-foot { grid-template-columns: 1fr; }
  .op-foot-act { flex-direction: column; align-items: flex-start; }}

/* ---- About founder pane (Aug 2026). The second portrait came out, so the
   column it left is now a dark aside carrying the pull quote at display scale.
   It also gives About a tonal change in the middle of the page, which it had
   nowhere between the navy hero and the navy close. ---- */
.founder-full { grid-template-columns: 1fr 460px; }
.ff-aside { display: flex; align-items: center; background: var(--ink);
  padding: var(--sp-96) var(--sp-60); }
.ff-quote-lg { margin: 0; max-width: 14ch; font-size: clamp(28px, 3vw, 42px);
  font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.02em; color: var(--white); }
.ff-quote-lg em { font-style: normal; color: var(--cyan); }
@media (max-width: 900px) {
  .founder-full { grid-template-columns: 1fr; }
  .ff-aside { padding: var(--sp-52) var(--sp-24); }}

/* ================================================================
   HERO CONSISTENCY PASS (Aug 2026). Measured across the six pages,
   headline sizes ranged 46px to 78px and hero depths 563px to 751px,
   which read as different websites. Every hero headline now resolves
   to --fs-hero and every hero to one padding pair. Pages keep their
   own ground, photography and layout; only scale is unified.
   ================================================================ */
.hero h1,
.wwd-ink-hero h1,
.sw-hero h1,
.about-hero h1,
.ah-stack p,
.ah-stack span,
.works-hero .q-line {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
/* About's headline is the longest on the site (13 words against three or four
   elsewhere). Its copy column is half the grid with 232px of side padding, so
   at the shared size it ran to five lines and pushed the hero 128px taller.
   Giving the copy column more of the split brings it to four lines. */
.about-hero h1 { max-width: none; }
.about-hero .ab-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
/* the rotating homepage headline needs a little more leading, since two lines
   swap in and out and a tight measure makes the swap look like a jump */
.hero h1.hero-rotate { line-height: 1.06; }

.hero,
.wwd-ink-hero,
.sw-hero,
.approach-hero-photo,
.works-hero,
.about-hero {
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
  /* a floor rather than a fixed height: pages that say more stay taller, but
     none opens shallower than the rest */
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
}
/* the split About hero manages its own columns, so it keeps the floor but not
   the flex centring, which would collapse its two-column grid */
/* The heroes above are flex containers, and a flex child will not shrink below
   its own min-content. Any hero holding a multi-column grid therefore forced its
   wrap wider than a phone viewport (Selected Work's was 760px inside 390px, so
   the four-engagement index sat off-screen). This lets the child shrink. */
.hero > .wrap, .wwd-ink-hero > .wrap, .sw-hero > .wrap,
.approach-hero-photo > .wrap, .works-hero > .wrap { min-width: 0; width: 100%; }

/* About's hero is a split grid with the portrait filling one column, so the
   padding lives on the copy column and the portrait runs full bleed. The
   column already carried its own generous shorthand, so the block padding is
   replaced rather than added to, and the grid's own min-height is released. */
.about-hero { display: block; padding-top: 0; padding-bottom: 0; }
.about-hero .ab-grid { min-height: 0; }
.about-hero .ab-copy { padding-block: var(--hero-pad-top) var(--hero-pad-bottom); }
/* About's hero is a split ground with the portrait filling one column, so its
   spacing is handled inside the columns rather than on the section. */
.about-hero .ab-copy { padding-top: var(--hero-pad-top); padding-bottom: var(--hero-pad-bottom); }

@media (max-width: 900px) {
  :root { --hero-pad-top: 132px; --hero-pad-bottom: 64px; }}

/* ---- Short screens (Tanya, 2026-08-17, 14in Windows laptop at 1280x551).
   Every hero reserves 176px above the headline, which is generous on the
   1512x860 the site was designed against and a fifth of the screen on a
   laptop running Windows display scaling. On What we do, Approach and About
   the headline ran past the fold and the visitor landed on a sentence cut
   off mid-word.

   Height, not width: the type is already at its ceiling by 1308px wide, so
   --fs-hero is identical on both machines and never the variable. What
   differs is the room to put it in. The type is therefore left alone and
   the empty space above it gives way instead, which is the right order --
   on a short screen the headline is what the reader came for and the air
   around it is what they can spare.

   min-height goes to a share of the viewport rather than a fixed 700px,
   which on a 551px screen was taller than the screen itself.

   The padding is written as the nav's own height plus a gap, not as a plain
   number. The nav is fixed and sits over the hero, so the first job of that
   padding is to clear it and only what is left over is breathing space. The
   first attempt cut it to a flat 64px, which is less than the 78px nav is
   tall, and the eyebrow came out level with the menu (Tanya, same evening).
   Written this way the clearance is structural: the gap can shrink to
   nothing on an absurd screen and the text still cannot reach the nav.
   176px is the design value, which is a 98px gap over a 78px nav. ---- */
@media (min-width: 901px) and (max-height: 780px) {
  :root { --hero-pad-top: calc(var(--nav-h, 78px) + var(--sp-72));
          --hero-pad-bottom: var(--sp-60); --hero-min: 92vh; }}
@media (min-width: 901px) and (max-height: 680px) {
  :root { --hero-pad-top: calc(var(--nav-h, 78px) + var(--sp-48));
          --hero-pad-bottom: var(--sp-44); --hero-min: 94vh;
          /* one step down, so the headline still clears the fold once the
             nav has been given the room it is owed */
          --fs-hero: clamp(36px, 4.6vw, 58px); }}
/* Phones in landscape and the shorter portraits have the same problem for the
   same reason, so the mobile pair gives way too. About is the page that shows
   it: its headline is the longest on the site. */
@media (max-width: 900px) and (max-height: 760px) {
  :root { --hero-pad-top: calc(var(--nav-h, 74px) + var(--sp-44));
          --hero-pad-bottom: var(--sp-52); }}

/* The footer nav carried class="current" but nothing styled it, so the page you
   are on was only indicated in the header. Same cyan, same rule, both places. */
.footer-nav a.current { color: var(--cyan); }


/* Square corners on the homepage "Take a seat" image only (Tanya, Aug 2026).
   The shared --r-media token stays at 16px for everything else. */
.wwB-media { border-radius: 0; }

/* Chairs image enlarged (Tanya, Aug 2026): the photograph keeps its own 3:4
   shape, so both chairs stay in frame and nothing is cropped away. Its column
   takes a larger share of the split to carry the extra size. */
.wwB-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wwB-media { max-width: 470px; }

/* Statement under the four figures in the trust band (Tanya, Aug 2026).
   Headline only, no supporting paragraph, centred beneath the metrics.
   Tried on its own white band and inside the What we do pane; this reads best. */
/* sits between the logo row and the figures, so it needs space on both sides */
.trust-claim { margin: var(--sp-64) auto; max-width: 24ch; text-align: center;
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink); }
.trust-claim .hl { color: var(--purple); }
@media (max-width: 900px) { .trust-claim { margin: var(--sp-44) auto; }}

/* ---- Hover states for the panel trigger lists and the work chips
   (Tanya, Aug 2026). The chips use each panel's own accent, so 01 goes purple,
   02 teal, 03 riverbed. --op-accent is defined only on the panels, and an
   undefined custom property invalidates the whole declaration, so the fallback
   matters: the same chips appear on Approach, outside any panel. ---- */
.op-triggers li {
  transition: color 0.4s cubic-bezier(.22,.61,.36,1),
              border-top-color 0.4s cubic-bezier(.22,.61,.36,1);
}
.op-triggers li:hover { color: var(--ink); border-top-color: rgba(26,24,48,0.28); }
.op-dark .op-triggers li:hover { color: var(--white); border-top-color: rgba(171,205,207,0.45); }

.chip {
  transition: color 0.35s cubic-bezier(.22,.61,.36,1),
              border-color 0.35s cubic-bezier(.22,.61,.36,1);
}
/* border and text only, no fill (Tanya, Aug 2026) */
.chip:hover {
  color: var(--ink);
  border-color: var(--op-accent, var(--purple));
}

/* The lede's last line sits on the same baseline as the headline's last line
   (Tanya, Aug 2026). Done by aligning the two columns to their bottoms rather
   than offsetting the lede by a fixed number of headline lines: the headline
   wraps to four or five lines at narrower widths, and a fixed offset broke
   there. The columns stack on a phone, where bottom alignment has no meaning. */
.approach-hero-photo .ah-grid { align-items: end; }
@media (max-width: 900px) {
  .approach-hero-photo .ah-grid { align-items: start; }
  .approach-hero-photo .ah-method { margin-top: var(--sp-26); }}

/* ---- "What we hold to" list hover (Tanya, Aug 2026): the text lifts to ink.
   These items were already at ink, so there was nothing to lift; the resting
   state now sits at riverbed, the same colour the body copy uses elsewhere on
   the page, and the hover takes them to full ink. Nothing else moves. ---- */
.how-list li { color: var(--riverbed);
  transition: color 0.45s cubic-bezier(.22,.61,.36,1); }
.how-list li:hover { color: var(--ink); }

/* ---- The Shift panels lift on hover (Tanya, Aug 2026). The panels sit on
   cream where the case is on white, and on white where the case is on cream,
   so the hover swaps each panel toward its opposite: the hovered cell always
   separates from its neighbours rather than sinking into them. ---- */
.sp { transition: background-color 0.4s cubic-bezier(.22,.61,.36,1); }
.sp:hover { background: var(--white); }
.cs-split .sp:hover, .cs-quiet .sp:hover { background: var(--cream); }

/* ---- The unseen-forces row lifts word by word on hover (Tanya, Aug 2026).
   Each word is its own span, so the hover is per word rather than per row. ---- */
.works-hero .force-line span {
  transition: color 0.4s cubic-bezier(.22,.61,.36,1);
}
.works-hero .force-line span:hover { color: var(--white); }

/* ---- The homepage WORKS sign-up matches the one on the WORKS page (Tanya,
   Aug 2026): rounded rectangle for the field, pill for the button. It had
   square corners on both, so the two forms did not look like the same thing. ---- */
.works .capture input { border-radius: var(--r-media); }
.works .capture button { border-radius: 999px; }

/* ---- The lead drops to sit level with the heading rather than the eyebrow
   (Tanya, Aug 2026). The eyebrow block is a constant 64px tall at every width,
   so the offset is exactly one --sp-64. On a phone the columns stack, where the
   offset would read as a gap. ---- */
.streams-head .lead { margin-top: var(--sp-64); }
@media (max-width: 900px) { .streams-head .lead { margin-top: 0; }}

/* ---- Contact card fields take the same rounded rectangle as the WORKS sign-up
   field (Tanya, Aug 2026); they had been explicitly set to no radius. ---- */
.contact-card input, .contact-card textarea { border-radius: var(--r-media); }

/* ================================================================
   WORKS streams: Leadership Works is the umbrella over the other six,
   so it is set as a parent rather than a heavier sibling (Tanya, Aug 2026).
   Its title runs at display scale, and the six sit indented beneath a
   vertical spine so they read as belonging to it. Bracketing it with heavy
   rules was tried first and rejected: it made the item look important
   without making it look like a parent.
   ================================================================ */
.streams .stream-lead {
  background: none; border: 0; border-top: 2px solid var(--ink);
  padding: var(--sp-40) 0 var(--sp-44); margin-top: var(--sp-52);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-20) var(--sp-30); align-items: baseline;
}
.streams .stream-lead .s-num { color: var(--purple); font-size: var(--fs-sm); }
.streams .stream-lead h3 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.03em; }
.streams .stream-lead p { grid-column: 2; margin-top: var(--sp-16); max-width: 52ch;
  font-size: var(--fs-lead); line-height: 1.6; }
/* the six sit under the umbrella, held by a spine on the left */
.streams .stream-list { margin-top: 0;
  padding-left: clamp(24px, 4vw, 64px);
  border-left: 1px solid rgba(26,24,48,0.18); }
.streams .stream-list > .stream-row:nth-child(1),
.streams .stream-list > .stream-row:nth-child(2) { border-top: 0; }
@media (max-width: 900px) {
  .streams .stream-list { padding-left: var(--sp-20); }}

/* ---- Client names scroll on hover in the homepage trust band (Tanya, Aug 2026),
   so the row holds more names than fit on a line. The list is duplicated in the
   markup (the second copy aria-hidden) and the track translates exactly half its
   width, which makes the loop seamless. Paused at rest, running on hover.
   Scoped to the trust band: the same class appears on About, untouched. ---- */
/* max-width matters on a phone: .logo-row turns into a column flex container
   with align-items: flex-start, so the viewport sizes to its content (604px on
   a 390px screen) and pushes the whole page sideways. flex and min-width only
   govern the main axis, which is the height once the row is a column. */
.trust .logos-viewport { flex: 1; min-width: 0; max-width: 100%; overflow: hidden; }
.trust .logos-track { flex-wrap: nowrap; width: max-content; }
/* the marquee only exists once the names overflow; the script adds this class */
.trust .logos-viewport.is-scrolling .logos-track {
  animation: logos-scroll 34s linear infinite; animation-play-state: paused; }
.trust .logo-row:hover .is-scrolling .logos-track { animation-play-state: running; }
/* the edge fade is only wanted when there is something running past the edge */
.trust .logos-viewport.is-scrolling {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent 100%); }
@keyframes logos-scroll { to { transform: translateX(-50%); } }

/* no hover on touch, and no animation for anyone who has asked for less motion:
   the row becomes swipeable instead, so the names stay reachable either way */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .trust .logos-viewport { overflow-x: auto; scrollbar-width: none; }
  .trust .logos-viewport::-webkit-scrollbar { display: none; }
  .trust .logos-track { animation: none; }
}

/* ================================================================
   RUNTIME STATE RULES, restored (Aug 2026).
   These were removed by the dead-CSS pass because the classes that
   trigger them are added by JavaScript, so they matched nothing when
   the page was tested at rest. .nav.scrolled is the visible one: the
   header lost its solid background on scroll and the hero copy ran
   through it. Never test for dead CSS without simulating these.
   ================================================================ */
.nav.scrolled, .nav.open { background: var(--ink); }
.nav-item.open > a .nav-caret { transform: rotate(180deg); }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .nav-item.open .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.hero-rotate.swapping .rot { opacity: 0; transition-duration: 0.6s; }
.js-anim .diff-row .arrow svg path:first-child { stroke-dasharray: 70; stroke-dashoffset: 70; }
.js-anim .diff-row.revealed .arrow svg path:first-child { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1) .25s; }
.js-anim .diff-row .arrow svg path:last-child { opacity: 0; transition: opacity .3s ease .95s; }
.js-anim .diff-row.revealed .arrow svg path:last-child { opacity: 1; }
.js-anim .def-arc path.draw { stroke-dasharray: 900; stroke-dashoffset: 900; }
.js-anim .def-arc.revealed path.draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) .2s; }
.js-anim .def-arc path.head { opacity: 0; transition: opacity .4s ease 1.9s; }
.js-anim .def-arc.revealed path.head { opacity: 1; }
.capture-form .cf-status.is-error { color: #ff9db0; }
.trust .logo-row:hover .is-scrolling .logos-track, .trust .logos-viewport.is-scrolling:focus-within .logos-track { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .diff-row .arrow svg path:first-child { stroke-dashoffset: 0 !important; }
  .js-anim .diff-row .arrow svg path:last-child { opacity: 1 !important; }
  .js-anim .def-arc path.draw { stroke-dashoffset: 0 !important; }
  .js-anim .def-arc path.head { opacity: 1 !important; }}
/* ---- The Shift panels: one height for every strip on the page (Tanya, Aug 2026).
   Panels within a strip already stretch to match each other, but the strips
   differed from one another, because case 01's fourth panel carries the longest
   line and wraps further than the rest. A floor makes all four strips equal.
   It is set per breakpoint because the wrap point moves with the column width:
   the longest panel runs to four lines on a wide screen and five as it narrows. ---- */
/* rows within a strip match each other in pure CSS; the script equalises
   across strips by setting --sp-min, and falls back to a sensible floor. */
.shift-strip { grid-auto-rows: 1fr; }
.sp { min-height: var(--sp-min, 200px); }
@media (max-width: 640px) { .sp { min-height: 0; } }

/* ---- Case photography takes the site's standard treatment (Tanya, Aug 2026).
   The founder portrait and the WORKS feature card already use saturate(0.82)
   with a touch of contrast; the case images carried no filter at all, so the
   split on case 02, the only one not sitting behind a scrim, read as untouched
   beside the rest. Case 02 stays the lighter moment on the page by design; this
   settles its tone rather than trying to match the scrimmed cases. ---- */
.cs-photo img,
.cs-split-photo img,
.cs-band img { filter: saturate(0.82) contrast(1.04); }


/* ---- Founder portrait sits in a cream panel (Tanya, Aug 2026). The cut-out
   ends on a hard edge at the hem, and with white beneath it she read as severed
   in mid-air rather than cropped. The panel makes that edge the frame's edge,
   which is a normal thing for a photograph to do, and gives the pane a second
   ground so the portrait belongs to the composition rather than floating beside
   it. Cream picks up the trust band above, so no new colour is introduced.
   A fade was tried first and rejected: it looked like a funeral order of service. ---- */
.founder-portrait { background: var(--cream); padding: var(--sp-40) var(--sp-30) 0; }
.founder-portrait img { display: block; }
@media (max-width: 900px) {
  .founder-portrait { padding: var(--sp-26) var(--sp-20) 0; }
}

/* ---- What We Do proof band: the figure and the sectors as one row (Tanya,
   Aug 2026). Both lines previously rendered at 15px, left-aligned, beneath a
   rule that closed the logo row, so they read as an orphaned footnote. The
   figure also appeared here at 15px where the same claim renders at --fs-h2 on
   the homepage and Selected Work. It now takes that same treatment, with the
   sectors opposite, so the band has three full-width tiers. ---- */
/* No rule of its own. .logo-row above already carries a border-bottom, so this
   border-top gave the proof band two hairlines 34px apart with nothing between
   them: two components each bringing a divider for the same join
   (Tanya, 2026-08-17). The one above the names is kept. */
.proof .pf-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: baseline;
  margin-top: var(--sp-40); }
.proof .pf-fig b { display: block; font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.proof .pf-fig .pl { color: var(--purple); }
.proof .pf-fig .pf-lbl { display: block; margin-top: var(--sp-8);
  font-size: var(--fs-sm); color: var(--riverbed); }
.proof .pf-sectors { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed);
  color: var(--riverbed); max-width: 50ch; }
@media (max-width: 700px) {
  .proof .pf-row { grid-template-columns: 1fr; gap: var(--sp-24); }
}

/* ---- Supplied logo lockup replaces the built SVG mark plus stacked wordmark
   (Tanya, Aug 2026). It is a white-only PNG at 2012x332, so it works on the
   nav and footer, both of which are dark, and would be invisible on a light
   ground. Height-driven so the aspect ratio holds. ---- */
.brand-lockup { display: block; height: 30px; width: auto; color: var(--white); }
/* inlined rather than an <img>: an SVG loaded through <img> cannot reach the
   page's webfont, so the wordmark fell back to a system sans. Inlined it
   inherits Montserrat, and currentColor lets it invert for a light ground. */
.on-light .brand-lockup { color: var(--ink); }
.brand-lockup.foot { height: 26px; }
@media (max-width: 900px) {
  .brand-lockup { height: 24px; }
  .brand-lockup.foot { height: 22px; }
}


/* The Approach hero stack is now an h1 with span lines, and the WORKS hero
   line is an h1; both were paragraphs, so neither page had a top-level
   heading. These keep the appearance identical (Aug 2026). */
.ah-stack { margin: 0; }
.ah-stack span { display: block; }

/* The four "Dime at a glance" metrics sit in one auto row with a 60px gutter,
   which needs about 700px. Below that the fourth number ran 3px past the
   viewport and put a horizontal scrollbar on the homepage. Two-by-two from
   here down (Aug 2026). */
@media (max-width: 700px) {
  .metrics { grid-template-columns: repeat(2, auto); gap: var(--sp-32) var(--sp-44); }
}

/* The Netlify honeypot is a real labelled field that only a bot will fill, so
   it must be removed from the page for people without being display:none,
   which some bots check for (Aug 2026). */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================================================================
   WHAT WE DO: sticky index for the four offerings (Aug 2026).
   The four blocks are deliberately identical in anatomy, which makes the
   set legible but makes a reader's position in it hard to feel. The rail
   sticks under the site nav for the length of .op-set and only that far,
   because a sticky element cannot escape its parent.
   ================================================================ */
/* A strip that is hidden must collapse, not merely fade. Fading only the inner
   left the bar holding its height and painting an empty band between the
   section above and the first block (Tanya, 2026-08-17). The border width goes
   with it, or its 1px draws a line of its own. */
.op-rail {
  position: sticky; top: var(--nav-h, 72px); z-index: 8;
  background: var(--cream); border-bottom: 0 solid var(--hairline-light);
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,.61,.36,1);
}
.op-rail.is-shown { max-height: var(--sp-80); border-bottom-width: 1px; }
@media (prefers-reduced-motion: reduce) { .op-rail { transition: none; } }
.op-rail-inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.op-rail-inner::-webkit-scrollbar { display: none; }
.op-rail-item {
  flex: 1 0 auto; display: flex; align-items: baseline; gap: var(--sp-8);
  padding: var(--sp-14) var(--sp-18); text-decoration: none; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--riverbed);
  border-bottom: 2px solid transparent;
  transition: color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.op-rail-item .orn { font-size: var(--fs-xs); font-weight: var(--fw-regular); opacity: 0.55; }
/* weight arrives only on hover; at rest the rail stays quiet */
.op-rail-item:hover { color: var(--ink); font-weight: var(--fw-semibold); }
/* One accent, not four. Colour-coding each item to its block was the first
   attempt, but the four block accents cannot all be legible on one ground:
   purple needs a light ground and cyan needs a dark one, and cyan on cream
   measures 1.45:1 against the 3.0 minimum. Purple is the light-ground accent,
   and the underline, number and position already say which block you are in. */
.op-rail-item.is-current { color: var(--purple); border-bottom-color: var(--purple); font-weight: var(--fw-bold); }
.op-rail-item.is-current .orn { opacity: 1; }
.op-rail-item:focus-visible { outline: 2px solid var(--purple); outline-offset: -3px; }

/* jumping should land the heading below both the nav and the rail */
.op-set .offering { scroll-margin-top: calc(var(--nav-h, 72px) + 52px); }

@media (max-width: 700px) {
  .op-rail-item { padding: var(--sp-12) var(--sp-14); font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) { .op-rail-item { transition: none; } }

/* ---- Above 1360 the rail leaves the flow and stands in the left gutter as
   four numerals, the block you are in keeping its name open beside it.
   Numerals alone would say which of four you are in but not what it is,
   which is half the problem the rail exists to solve (Tanya's design,
   2026-08-17).
   height:0 keeps the sticky element out of the flow so nothing shifts.

   One threshold, not two. It began at 1024 with the names revealed on hover,
   on the reasoning that a name overlapping the panel for the moment you hover
   it was tolerable because it carried its own ground behind it. That ground
   was then removed (Tanya, same day) and the reasoning went with it, but the
   threshold stayed: on her 14in laptop at 1280 the hovered name sat directly
   on the writing. Measured across widths, the hovered name always ends at
   166px while the panel copy begins at 105px at 1100, 153px at 1280, 197px at
   1360 and 277px at 1512. So 1360 is where the gutter genuinely starts, and
   the gutter treatment now starts there too.
   Below it the horizontal strip takes over, as it always did under 1024:
   the same component, sticky under the nav, which is also what Selected Work
   uses at every width. ---- */
@media (min-width: 1360px) {
    /* Sits just under the nav, so the set is indexed from its top rather than
     from the middle of the viewport. Hidden until the reader is properly
     inside the first block, rather than announcing itself the instant the
     set begins (Tanya, 2026-08-17). */
  .op-set .op-rail { background: none; border-bottom: 0; height: 0; max-height: none; overflow: visible;
    top: calc(var(--nav-h, 72px) + var(--sp-56)); }
  .op-set .op-rail-inner {
    position: absolute; left: var(--sp-24); max-width: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--sp-8); overflow: visible;
  }
  .op-set .op-rail-item {
    flex: none; align-items: center; gap: var(--sp-12);
    padding: var(--sp-4) 0; border-bottom: 0; font-size: var(--fs-xs);
  }
  .op-set .op-rail-item .orn {
    opacity: 1; font-size: var(--fs-xs); color: var(--riverbed);
    transition: color .3s cubic-bezier(.22,.61,.36,1);
  }
  /* the name is measured out by max-width so it can animate; the chip keeps it
     legible where it overlaps the panel to its right */
  .op-set .op-rail-item .ort {
    max-width: 0; overflow: hidden; opacity: 0; padding: var(--sp-4) 0;
    transition: max-width .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease, padding .32s ease;
  }
  .op-set .op-rail-item:hover .ort,
  .op-set .op-rail-item:focus-visible .ort { max-width: 15rem; opacity: 1; padding: var(--sp-4) var(--sp-12); }
  /* the current block carries weight as well as colour, so it reads at a
     glance without hovering (Tanya, 2026-08-17) */
  .op-set .op-rail-item.is-current { color: var(--purple); font-weight: var(--fw-bold); }
  .op-set .op-rail-item.is-current .orn { color: var(--purple); font-weight: var(--fw-bold); }
  .op-set .op-rail-item.is-current .ort { color: var(--purple); font-weight: var(--fw-bold); }
  .op-set .op-rail-item:hover .orn { color: var(--ink); }
  .op-set .op-rail-item:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 4px; }
}
@media (min-width: 1360px) and (prefers-reduced-motion: reduce) {
  .op-set .op-rail-item .ort { transition: none; }
}


/* The current block's name stands open rather than waiting for hover. Same
   threshold as the gutter itself now, so wherever the rail is in gutter mode
   this holds: there is no width at which the numerals stand alone. */
@media (min-width: 1360px) {
  .op-set .op-rail-item.is-current .ort { max-width: 15rem; opacity: 1; padding: var(--sp-4) var(--sp-12); }
}

/* ---- 00 is a way back to the top rather than a fifth service, so it is set
   apart by a rule and never takes the current mark. ---- */
@media (min-width: 1360px) {
  .op-set .op-rail-top { padding-bottom: var(--sp-10); margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--hairline-light); }
  .op-set .op-rail-top .orn { opacity: 0.5; }
  .op-set .op-rail-top:hover .orn { opacity: 1; }
}

/* ---- The Founders block is full-bleed ink, so the rail sits on a dark ground
   for its whole length and riverbed numerals disappear into it. site.js flags
   this and the rail inverts. Cyan for the mark here, not purple: purple on ink
   fails the same contrast rule that keeps cyan off cream. ---- */
@media (min-width: 1360px) {
  /* Per item, not per rail. The rail is tall enough to straddle the seam where
     the ink Founders panel begins, so its top items can be on white while its
     lower ones are on ink. Each item is told which ground it is actually on. */
  .op-set .op-rail-item.on-dark,
  .op-set .op-rail-item.on-dark .orn { color: var(--mist); }
  .op-set .op-rail-item.on-dark .ort { color: var(--white); }
  /* hover otherwise turns the text ink, which is invisible on this ground */
  .op-set .op-rail-item.on-dark:hover,
  .op-set .op-rail-item.on-dark:hover .orn,
  .op-set .op-rail-item.on-dark:hover .ort { color: var(--white); }
  .op-set .op-rail-item.on-dark.is-current,
  .op-set .op-rail-item.on-dark.is-current .orn,
  .op-set .op-rail-item.on-dark.is-current .ort { color: var(--cyan); font-weight: var(--fw-bold); }
  .op-set .op-rail-top.on-dark { border-bottom-color: rgba(171,205,207,0.22); }
  .op-set .op-rail-item.on-dark:focus-visible { outline-color: var(--cyan); }
}

/* Every rail waits until the reader is inside its set. Without this a sticky
   rail rides up from the bottom of the screen as its wrapper scrolls into
   view, so it hangs over the section above. Applies to both rails at every
   width. site.js adds .is-shown; with no JavaScript the rail is simply always
   visible, which is the safe direction to fail in. */
.js-anim .op-rail-inner { opacity: 0; visibility: hidden;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), visibility .45s; }
.js-anim .op-rail.is-shown .op-rail-inner { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .op-rail-inner { transition: none; }
}

/* ---- Selected Work: the same rail, kept horizontal at every width.
   The gutter treatment used on What we do cannot work here. Three of the four
   cases sit on full-bleed photography, and a photograph is not a ground the
   rail can detect and invert against the way it does the ink panel; the case
   copy also sits 120px from the edge at 1440 against 176px there, and 40px at
   1280. A strip carries its own ground, so what is behind it stops mattering
   (Tanya's call to compare the two, 2026-08-17). ---- */
/* Ink, matching the nav it sits under, so the two read as one piece of
   navigation rather than a pale band laid over the photography (Tanya,
   2026-08-17). Cyan for the mark, which is the accent this ground takes.
   It also collapses when hidden: with only the inner faded out, the bar kept
   its height and painted an empty strip between the section above and the
   first case. */
.cs-rail {
  top: var(--nav-h, 72px);
  background: var(--ink); border-bottom-color: var(--hairline-dark);
}
.cs-rail.is-shown { border-bottom-width: 1px; }
.cs-rail .op-rail-item { flex: 0 0 auto; color: var(--mist); }
.cs-rail .op-rail-item .orn { color: var(--mist); }
.cs-rail .op-rail-item:hover,
.cs-rail .op-rail-item:hover .orn { color: var(--white); }
.cs-rail .op-rail-item.is-current,
.cs-rail .op-rail-item.is-current .orn {
  color: var(--cyan); border-bottom-color: var(--cyan); font-weight: var(--fw-bold);
}
.cs-rail .op-rail-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
/* 00 is a way back rather than a fifth case: ruled off, and it never marks */
.cs-rail .op-rail-top { border-right: 1px solid var(--hairline-dark); margin-right: var(--sp-8); }
@media (prefers-reduced-motion: reduce) { .cs-rail { transition: none; } }

/* Tanya's own LinkedIn, closing her introduction on About. Placed after the
   bio rather than beside the role line: a reader checks who someone is before
   deciding to look them up, and putting it above the bio would have split the
   name from the story it introduces. The footer link is the company page and
   stays as it is. */
.founder-full .ff-connect { margin-top: var(--sp-32); }