:root {
    --stone: #F2E7D7;
    --stone-2: #E9DCC7;
    --paper: #FBF6EA;
    --rule: rgba(44, 35, 24, .16);
    --rule-strong: rgba(44, 35, 24, .32);
    --ink: #2C2318;
    --ink-soft: #675C4B;
    --gold: #785D37;
    --gold-hi: #B8976A;

    --display: "Marcellus", "Optima", "Palatino Linotype", Georgia, serif;
    --letter: "EB Garamond", "Iowan Old Style", Georgia, serif;
    --body: "EB Garamond", "Iowan Old Style", Georgia, serif;

    /* Type scale: ratio ~1.333 from a 19px text size (EB Garamond's small x-height needs it). */
    --fs-hero: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);
    --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
    --fs-h3: clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
    --fs-lead: clamp(1.3rem, 1.1rem + .6vw, 1.5rem);
    --fs-body: 1.1875rem;
    --fs-text-sm: 1.0625rem;
    --fs-small: 1rem;
    --fs-label: .8125rem;

    --wrap: 1240px;
    --gutter: clamp(20px, 5vw, 56px);
    --section: clamp(88px, 12vw, 168px);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    margin: 0;
    background: var(--stone);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.55;
    font-kerning: normal;
    font-variant-numeric: oldstyle-nums;
    text-rendering: optimizeLegibility;
  }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; }
  p { margin: 0; }
  h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.1; text-wrap: balance; letter-spacing: 0; font-variant-numeric: lining-nums; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

  .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .label {
    font-family: var(--display);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .prose { display: grid; gap: 1em; max-width: 64ch; color: var(--ink-soft); }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose a, .inline-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
  .prose a:hover, .inline-link:hover { color: var(--gold); }

  .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 600; text-decoration: none; }
  .skip:focus { top: 12px; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: .7em;
    font-family: var(--body); font-weight: 500; font-size: var(--fs-text-sm); letter-spacing: 0;
    padding: .95em 1.5em; text-decoration: none;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    transition: background .25s, color .25s, border-color .25s;
  }
  .btn:hover { background: #40331F; border-color: #40331F; }
  .btn .arrow { transition: transform .25s; }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
  .btn--ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
  .btn--ink { background: var(--gold); border-color: var(--gold); color: #FFFBF1; }
  .btn--ink:hover { background: #7E561A; border-color: #7E561A; }

  /* ---------- Top bar ---------- */
  .topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    transition: background .35s, border-color .35s, backdrop-filter .35s;
    border-bottom: 1px solid transparent;
  }
  .topbar.is-solid { background: rgba(var(--stone-rgb), .94); border-bottom-color: var(--rule); }
  .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
  .wordmark {
    font-family: var(--display); font-weight: 400; font-size: 1.04rem; letter-spacing: .16em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .topbar nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
  .topbar nav a:not(.btn) {
    font-size: var(--fs-text-sm); font-weight: 400; text-decoration: none; color: var(--ink); opacity: .82;
    background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px;
    padding-bottom: 3px; transition: opacity .2s, background-size .3s;
  }
  .topbar nav a:not(.btn):hover { opacity: 1; background-size: 100% 1px; }
  .topbar .btn { padding: .5em 1.1em; font-size: var(--fs-small); }
  @media (max-width: 780px) {
    .topbar__inner { height: auto; flex-wrap: wrap; row-gap: 10px; padding-top: 14px; padding-bottom: 12px; }
    .wordmark { font-size: .86rem; letter-spacing: .16em; }
    .topbar nav { width: 100%; justify-content: space-between; gap: 10px; }
    .topbar nav a:not(.btn) { font-size: var(--fs-small); opacity: 1; }
    .topbar .btn { padding: .45em .9em; font-size: var(--fs-small); }
    /* The bar is taller here, so content starts lower. */
    .hero__body { padding-top: 138px; }
    .pagehead { padding-top: 150px; }
    html { scroll-padding-top: 124px; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; min-height: clamp(700px, 100svh, 1040px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; background: var(--stone) url("media/part-1-poster-mirrored.jpg") center / cover no-repeat; }
  /* The footage is shown mirrored left to right (a GPU transform, no re-encode). */
  .hero__media { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .9s linear; transform: scaleX(-1); }
  .hero__media.is-entering { z-index: -2; }
  .hero__media.is-waiting { opacity: 0; transition-duration: 0s; }
  .hero__shade {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(ellipse 62% 44% at 50% 30%, rgba(var(--stone-rgb), .8) 0%, rgba(var(--stone-rgb), .46) 55%, rgba(var(--stone-rgb), 0) 100%),
      linear-gradient(180deg, rgba(var(--stone-rgb), .5) 0%, rgba(var(--stone-rgb), .12) 30%, rgba(var(--stone-rgb), 0) 52%, rgba(var(--stone-rgb), .42) 80%, var(--stone) 100%);
  }
  .hero__body { align-self: start; justify-items: center; text-align: center; padding-top: clamp(104px, 13vh, 148px); padding-bottom: 24px; display: grid; gap: 24px; }
  .hero h1 { display: grid; gap: .28em; justify-self: stretch; }
  .hero h1 .claim { font-size: var(--fs-hero); line-height: .98; text-wrap: wrap; text-shadow: 0 1px 18px rgba(var(--paper-rgb), .95), 0 1px 3px rgba(var(--paper-rgb), .75); }
  .hero__sub { max-width: 60ch; margin-inline: auto; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
  /* Key points: a plain list, each item marked with a yellow plus sign. */
  .hero__points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; justify-items: start; }
  .hero__points li { display: inline-flex; align-items: baseline; gap: 14px; font-size: var(--fs-body); line-height: 1.4; color: var(--ink); text-align: left; }
  .hero__points li::before { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--gold), var(--gold)) center / 100% 3px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 3px 100% no-repeat; transform: translateY(1px); }
  .hero__points .nowrap { white-space: nowrap; }
  @media (max-width: 700px) {
    .hero__points { justify-items: start; }
    .hero__points li { font-size: var(--fs-text-sm); }
  }

  /* Honest labelling: the header footage shows proposed architecture, not a built town. */
  .hero__caption { margin: 14px 0 18px; text-align: right; font-family: var(--letter); font-style: italic; font-size: 1rem; color: var(--ink-soft); }
  @media (max-width: 860px) { .hero__caption { text-align: left; } }
  .doors { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; border-top: 1px solid var(--rule-strong); }
  .door {
    position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
    padding: 26px 28px 30px 0; text-decoration: none;
  }
  .door + .door { padding-left: 28px; border-left: 1px solid var(--rule); }
  .door::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .door + .door::before { left: 0; }
  .door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
  .door > div { display: grid; gap: 8px; }
  .door h2 { font-size: var(--fs-h3); font-weight: 400; }
  .door p { color: var(--ink-soft); font-size: var(--fs-text-sm); line-height: 1.45; max-width: 34ch; }
  .door .go { font-family: var(--letter); font-size: var(--fs-text-sm); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .25em; display: inline-flex; gap: .45em; align-items: center; }
  .door .go span { transition: transform .3s; }
  .door:hover .go span { transform: translateX(5px); }

  /* The centre door is lifted out of the row: a paper card that rises above the rule. */
  .door--featured,
  .door + .door.door--featured {
    padding: 30px 32px 32px; margin-top: -30px; border-left: 0;
    background: var(--paper); border-top: 2px solid var(--gold);
    box-shadow: 0 28px 56px -30px rgba(var(--shadow-rgb), .5), 0 2px 6px -2px rgba(var(--shadow-rgb), .12);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1);
  }
  .door--featured::before { display: none; }
  .door--featured + .door { border-left: 0; }
  .door--featured h2 { font-size: clamp(1.8rem, 2.7vw, 2.4rem); }
  .door--featured p { color: var(--ink); }
  .door--featured:hover, .door--featured:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 40px 70px -32px rgba(var(--shadow-rgb), .55), 0 2px 8px -2px rgba(var(--shadow-rgb), .14);
  }

  @media (max-width: 860px) {
    .doors { grid-template-columns: 1fr; }
    .door, .door + .door { padding: 22px 0; border-left: 0; }
    .door + .door { border-top: 1px solid var(--rule); }
    .door--featured, .door + .door.door--featured { margin: 10px 0; padding: 24px 22px 26px; border-top: 2px solid var(--gold); }
    .door--featured + .door { border-top: 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero h1 .claim, .hero__sub, .hero__points, .doors { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
    /* No transform animation on the video itself: it keeps the compositor busy every frame. */
    .hero h1 .claim { animation-delay: .05s; }
    .hero__sub { animation-delay: .28s; }
    .hero__points { animation-delay: .4s; }
    .doors { animation-delay: .45s; }
    /* "backwards", not "both": a held end state would override the hover lift. */
    .door--featured { animation: surface 1.3s cubic-bezier(.16,.84,.24,1) .95s backwards; }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes surface {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Sections ---------- */
  section { padding-block: var(--section); }
  .section-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); }
  .section-head h2 { font-size: var(--fs-h2); max-width: 18ch; }

  figure { margin: 0; }
  figcaption { margin-top: 12px; font-family: var(--letter); font-style: italic; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }

  /* Why */
  .why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .stat { display: grid; gap: 18px; }
  .stat__figure { font-family: var(--display); font-weight: 400; font-size: clamp(5rem, 11vw, 9.5rem); line-height: .8; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums; }
  .stat__figure sup { font-size: .38em; vertical-align: top; position: relative; top: .12em; margin-left: .04em; color: var(--gold); letter-spacing: 0; }
  /* A short phrase in the display slot instead of a number. */
  .stat__figure--words { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .95; letter-spacing: 0; }
  .stat__text { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; max-width: 22ch; text-wrap: balance; }
  .stat__text em { font-style: normal; color: var(--ink-soft); }
  .why__after { margin-top: 30px; font-family: var(--letter); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
  .why__after strong { font-style: italic; font-weight: 400; color: var(--ink); }
  /* AI concept renders. The files are already softened; the veil on top keeps them
     reading as an impression of a place rather than a photograph to be scrutinised. */
  .render { position: relative; overflow: hidden; background: var(--stone-2); }
  .render img { width: 100%; object-fit: cover; }
  .render::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--stone-rgb), .14) 0%, rgba(var(--stone-rgb), .22) 55%, rgba(var(--stone-rgb), .62) 100%); }
  .render figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 1; margin: 0; opacity: 1;
    font-family: var(--letter); font-style: italic; font-size: 1rem; color: var(--ink); }
  .why figure img { aspect-ratio: 4 / 5; }
  /* Before / after slider: the conventional building (left) is wiped over the One City Foundry one. */
  .compare .compare__before { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .compare__tag { position: absolute; top: 16px; z-index: 2; padding: .45em .7em; background: rgba(var(--paper-rgb), .88);
    font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
  .compare__tag { max-width: calc(50% - 28px); line-height: 1.5; }
  .compare__tag--before { left: 16px; }
  .compare__tag--after { right: 16px; text-align: right; }
  .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 3px; margin-left: -1.5px; background: var(--gold); pointer-events: none; }
  .compare__handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: var(--paper); color: var(--ink); font-family: var(--letter); font-size: 1.3rem; line-height: 1; letter-spacing: .12em;
    box-shadow: 0 6px 18px -8px rgba(var(--shadow-rgb), .55); }
  .compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
  .compare:has(.compare__range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
  .compare figcaption { z-index: 2; }
  @media (max-width: 900px) { .why__grid { grid-template-columns: 1fr; } }

  /* Commitments */
  .commitments { background: var(--stone-2); }
  .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); }
  .pillar { padding: 28px 28px 8px 0; display: grid; align-content: start; gap: 14px; }
  .pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--rule); }
  .pillar h3 { font-size: var(--fs-h3); }
  .pillar p { color: var(--ink-soft); font-size: var(--fs-text-sm); line-height: 1.5; }
  @media (max-width: 980px) {
    .pillars { grid-template-columns: repeat(2, 1fr); }
    .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
    .pillar:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 20px; }
  }
  @media (max-width: 560px) {
    .pillars { grid-template-columns: 1fr; }
    .pillar, .pillar + .pillar { padding: 24px 0 8px; border-left: 0; }
    .pillar + .pillar { border-top: 1px solid var(--rule); margin-top: 16px; }
  }

  .inscription { margin-top: clamp(80px, 10vw, 136px); padding-top: 44px; border-top: 1px solid var(--rule); display: grid; gap: 30px; }
  .inscription ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .inscription li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; row-gap: 6px; }
  .inscription .word {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.9rem, 5vw, 4.4rem); line-height: 1; letter-spacing: .06em;
    color: var(--ink);
    text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: .07em;
  }
  .inscription .note { font-family: var(--letter); font-style: italic; font-size: 1rem; color: var(--ink-soft); }

  /* Approach */
  .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
  .way { display: grid; align-content: start; gap: 18px; padding-top: 26px; border-top: 2px solid var(--gold); }
  .way h3 { font-size: var(--fs-h3); }
  .way .prose { font-size: var(--fs-text-sm); }
  @media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

  /* Residents */
  .residents { background: var(--stone-2); }
  .residents__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .residents figure { position: sticky; top: 108px; }
  .residents figure img { width: 100%; aspect-ratio: 3 / 4; }
  .letter {
    background: var(--paper); color: var(--ink);
    padding: clamp(32px, 5vw, 72px) clamp(26px, 5vw, 76px);
    font-family: var(--letter); font-weight: 400; font-size: var(--fs-body); line-height: 1.6;
    display: grid; gap: 1.2em;
    box-shadow: 0 30px 60px -38px rgba(var(--shadow-rgb), .4);
  }
  .letter .salutation { font-weight: 600; font-size: 1.15em; }
  .letter .pull { font-weight: 600; font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.3; letter-spacing: 0; padding: .5em 0; border-block: 1px solid rgba(var(--shadow-rgb), .18); text-wrap: balance; }
  .letter .turn { font-weight: 600; font-size: 1.1em; }
  .letter .sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: .6em; padding-top: 1.4em; border-top: 1px solid rgba(var(--shadow-rgb), .18); }
  .letter .sign p { font-family: var(--letter); font-style: italic; font-size: var(--fs-body); color: var(--ink-soft); }
  @media (max-width: 900px) { .residents__grid { grid-template-columns: 1fr; } .residents figure { position: relative; top: auto; } }

  /* Partners: a briefing. One row structure, Marcellus for titles and figures, EB Garamond for sentences. */
  .brief { padding-block: clamp(24px, 3vw, 40px) clamp(72px, 9vw, 120px); }
  .brief-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
  .brief-row:first-child { border-top: 0; }
  .brief-row > .label { margin: .45em 0 0; }
  .brief-body { display: grid; gap: 28px; max-width: 700px; }
  .brief-body > p { font-family: var(--letter); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
  .brief-body em { font-style: italic; }
  .brief-body .btn { margin-top: 4px; }

  /* The value chain as a layer stack: 01 at the foundation, the finished product on top. */
  .layers { list-style: none; margin: 0; padding: 0 0 0 38px; position: relative; display: flex; flex-direction: column-reverse; gap: 8px; counter-reset: step; max-width: 520px; }
  .layers::before { content: ""; position: absolute; left: 12px; top: 14px; bottom: 18px; width: 1px; background: var(--rule-strong); }
  .layers::after { content: ""; position: absolute; left: 8px; top: 8px; width: 9px; height: 9px; border-left: 1px solid var(--ink-soft); border-top: 1px solid var(--ink-soft); transform: rotate(45deg); }
  .layers li { counter-increment: step; display: grid; gap: 2px; padding: 14px 20px; border: 1px solid var(--rule); background: var(--paper); }
  .layers .step { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; color: var(--ink-soft); }
  .layers .step::before { content: counter(step, decimal-leading-zero) " / 05"; }
  .layers h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2; }

  /* "…what makes people love their" runs straight into the rising words. */
  .brief-body > p.recipe { margin-bottom: -18px; }
  .ladder { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .32em; row-gap: .1em; margin: 0; font-family: var(--display); line-height: 1.1; color: var(--ink); }
  .ladder span:nth-child(1) { font-size: clamp(1.3rem, 1.6vw, 1.45rem); }
  .ladder span:nth-child(2) { font-size: clamp(1.6rem, 2.1vw, 1.9rem); }
  .ladder span:nth-child(3) { font-size: clamp(2rem, 2.8vw, 2.5rem); }
  .ladder span:nth-child(4) { font-size: clamp(2.4rem, 3.6vw, 3.2rem); }
  .ladder span:nth-child(5) { font-size: clamp(2.9rem, 4.8vw, 4.2rem); color: var(--gold); }

  @media (max-width: 760px) {
    .brief-row { grid-template-columns: 1fr; gap: 14px; }
  }

  /* Careers */
  .careers { background: var(--stone-2); }
  .careers__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
  .careers__intro .fact { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.2; text-wrap: balance; }
  .careers__intro .fact span { color: var(--gold); }
  @media (max-width: 900px) { .careers__intro { grid-template-columns: 1fr; } }

  .roles { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule-strong); }
  .roles__head, .role { display: grid; grid-template-columns: minmax(0, 2.8fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.5fr); gap: 28px; align-items: start; }
  .roles__head { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .roles__head span { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
  .role { padding: 32px 0; border-bottom: 1px solid var(--rule); }
  .role h3 { font-size: var(--fs-h3); line-height: 1.15; }
  .role__main { display: grid; gap: 12px; }
  .role__teaser { font-family: var(--letter); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }
  .role__request { justify-self: start; font-family: var(--letter); font-size: var(--fs-body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .25em; }
  .role__request:hover { text-decoration-color: var(--gold); }
  .role__request span { display: inline-block; transition: transform .3s; }
  .role__request:hover span { transform: translateX(4px); }
  .role span { font-family: var(--body); font-size: var(--fs-text-sm); line-height: 1.45; color: var(--ink-soft); font-variant-numeric: lining-nums; }
  .role span b { display: none; font-family: var(--display); font-weight: 400; color: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label); }
  @media (max-width: 820px) {
    .roles__head { display: none; }
    .role { grid-template-columns: 1fr; gap: 6px; }
    .role h3 { margin-bottom: 6px; }
    .role span b { display: inline; margin-right: .8em; }
  }
  .roles__foot { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
  .roles__foot p { color: var(--ink-soft); max-width: 56ch; }

  /* Footer */
  footer { padding-top: clamp(80px, 10vw, 140px); padding-bottom: 36px; overflow: hidden; }
  .footer__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-bottom: clamp(56px, 7vw, 96px); }
  .footer__cta h2 { font-size: var(--fs-h2); max-width: 16ch; }
  @media (max-width: 760px) { .footer__cta { grid-template-columns: 1fr; } }
  .footer__mark {
    font-family: var(--display); font-weight: 400; text-transform: uppercase; white-space: nowrap;
    font-size: clamp(1.5rem, 5.6vw, 5.8rem); letter-spacing: .06em; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(154, 107, 34, .6);
    padding-block: 26px; border-block: 1px solid var(--rule);
    text-align: center;
  }
  .footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; padding-top: 26px; font-size: var(--fs-small); color: var(--ink-soft); }
  .footer__meta nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
  .footer__meta a { text-decoration: none; }
  .footer__meta a:hover { color: var(--gold); }
  .footer__credits { font-family: var(--body); font-size: .9375rem; opacity: .8; }

  /* ---------- Compact header for the audience pages ---------- */
  .pagehead { position: relative; border-bottom: 1px solid var(--rule); padding-top: clamp(112px, 14vh, 156px); padding-bottom: clamp(40px, 5vw, 64px); background: var(--stone-2); }
  .pagehead__inner { display: grid; gap: 20px; }
  .pagehead h1 { font-size: var(--fs-h2); max-width: 20ch; }
  .pagehead__proof { margin-top: 4px; font-family: var(--letter); font-size: var(--fs-text-sm); line-height: 1.45; color: var(--ink); }
  .pagehead .lede { font-family: var(--letter); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-soft); max-width: 54ch; }
  .backhome { display: inline-flex; align-items: center; gap: .6em; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
  .backhome:hover { color: var(--ink); }
  .topbar nav a[aria-current="page"] { opacity: 1; background-size: 100% 1px; }
  /* On the audience pages the bar is on stone from the start. */
  .topbar--solid { background: rgba(var(--stone-rgb), .94); border-bottom-color: var(--rule); }

  /* Larger running text for statements that open a section. */
  .prose--lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
  .stack { display: grid; gap: clamp(40px, 5vw, 64px); }

  /* Two hard numbers that back the speed claim. */
  .stack-sm { display: grid; gap: 28px; align-content: start; }
  .proof { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .proof li { display: grid; gap: 8px; align-content: start; font-family: var(--letter); font-size: var(--fs-text-sm); line-height: 1.45; color: var(--ink-soft); }
  .proof strong { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--ink); }

  /* Founder, on the careers page. */
  .founder { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--rule-strong); }
  .founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .founder__text { display: grid; gap: 14px; max-width: 62ch; }
  .founder__name { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
  .founder__bio { font-family: var(--letter); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); }
  @media (max-width: 700px) { .founder { grid-template-columns: 1fr; } .founder img { max-width: 220px; } }

  /* Home: one closing action per audience, in menu order, candidates first. */
  .endcta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 7vw, 96px); }
  .endcta__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding-top: 26px; border-top: 1px solid var(--rule-strong); }
  .endcta__item--primary { border-top: 2px solid var(--gold); }
  .endcta__item h3 { font-size: var(--fs-h3); }
  .endcta__item p:not(.label) { color: var(--ink-soft); max-width: 34ch; }
  .endcta__item .btn { justify-self: start; margin-top: 8px; }
  @media (max-width: 860px) { .endcta { grid-template-columns: 1fr; } }

  /* ---------- Thesis: plain reading, nothing in the way ---------- */
  .pagehead--plain { padding-bottom: clamp(24px, 3vw, 36px); }
  /* Opportunity page: the argument sits on a paper sheet over the Tuff band, like the founder's letter. */
  .opportunity { background: var(--stone-2); padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 120px); }
  .opportunity .letter { max-width: 76ch; margin-inline: auto; }
  .opportunity .plain-next { margin-top: .6em; padding-top: 1.4em; border-top: 1px solid rgba(var(--shadow-rgb), .18); }
  .plain { max-width: calc(68ch + 2 * var(--gutter)); padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(64px, 8vw, 104px); }
  .plain-list { margin: 0; padding-left: 1.5em; display: grid; gap: 1.15em; font-family: var(--letter); font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
  .plain-list > li { padding-left: .3em; }
  .plain-list > li > .label { display: block; margin-bottom: .3em; }
  .plain-list li::marker { color: var(--ink-soft); }
  .plain-list ol { margin: .45em 0 0; padding-left: 1.4em; display: grid; gap: .15em; }
  .plain-next { margin-top: 2.4em; font-family: var(--letter); font-size: var(--fs-body); color: var(--ink-soft); }
  /* Four page links on a phone: the Contact button stays in the footer and on-page actions. */
  @media (max-width: 780px) { .topbar .btn--ghost { display: none; } }

  /* One party holds every layer: a single panel spanning the full height of the stack. */
  .deliver { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 520px); align-items: stretch; }
  .deliver .layers { max-width: none; }
  .deliver__one { display: grid; align-content: center; gap: 10px; padding: 22px 18px; background: var(--gold); color: var(--ink); text-align: center; }
  .deliver__name { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; }
  .deliver__note { font-family: var(--letter); font-style: italic; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); }
  @media (max-width: 600px) {
    .deliver { grid-template-columns: 1fr; gap: 10px; }
    .deliver__one { text-align: left; }
  }


/* ================= Palette: Tuff + pop yellow =================
   Signature yellow #FFC006 = OKLCH(0.842 0.172 84.4): Giallo Modena hue, lightness halfway between safety yellow and
   Giallo Modena, maximum in-gamut chroma. A fill, never text. Ink on it is 10.6:1. */
:root {
  /* Tuff: warm volcanic stone neutrals (OKLCH hue 76–84, on the warm side of the yellow so nothing reads olive). */
  --stone: #F4E8D5;
  --stone-2: #EAD8C0;
  --paper: #FBF6EC;
  --ink: #1C1A16;
  --ink-soft: #5F4F41;
  --rule: rgba(28, 26, 22, .16);
  --rule-strong: rgba(28, 26, 22, .32);
  --gold: #FFC006;
  --gold-hi: #FFD24D;
  /* Channel versions of the neutrals, for veils and glows that need transparency. */
  --stone-rgb: 244, 232, 213;
  --paper-rgb: 251, 246, 236;
  --shadow-rgb: 44, 35, 24;
}
:focus-visible { outline-color: var(--ink); }

/* Buttons: yellow with ink text. */
.btn, .btn--ink { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn:hover, .btn--ink:hover { background: #EFB404; border-color: #EFB404; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Links: ink text, yellow underline strong enough to see. */
.prose a, .inline-link, .role__request, .door .go { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.prose a:hover, .inline-link:hover, .footer__meta a:hover { color: var(--ink); }
.topbar nav a:not(.btn) { background-size: 0 2px; }
.topbar nav a:not(.btn):hover, .topbar nav a[aria-current="page"] { background-size: 100% 2px; }

/* The pop: yellow fields carrying ink text. */
.door--featured, .door + .door.door--featured { background: var(--gold); border-top-color: var(--ink); }
.door--featured p { color: var(--ink); }
.door--featured .label { color: var(--ink); }
.endcta__item--primary { border-top-color: var(--gold); border-top-width: 4px; }

/* Former brass text accents become ink with a yellow highlighter mark. */
.stat__figure sup { color: var(--ink); }
.careers__intro .fact span, .ladder span:nth-child(5) { color: var(--ink); background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 92%, transparent 92%); }
.why__after strong { background: linear-gradient(transparent 60%, var(--gold) 60%, var(--gold) 92%, transparent 92%); }

/* Stone walls (stones.js): courses of 2:1 blocks laid from the bottom up, behind the inner-page banners
   and in the footer wordmark band, where the letters are cut out of the wall. */
.pagehead, .footer__mark { position: relative; overflow: hidden; isolation: isolate; }
.stones { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.footer__mark { -webkit-text-stroke-color: rgba(28, 26, 22, .45); }
/* Once the wall is drawn, the canvas carries the name (one stone per letter) and sets the band's height. */
.footer__mark.has-stones { padding-block: 0; font-size: 0; line-height: 0; color: transparent; -webkit-text-stroke-width: 0; }

/* Hero: the people groups in a quiet antique gold (5.6:1 on the stone), set in italic. */
.hero__group { font-style: italic; color: #7A5406; }

/* Phones: the hero text fills the first screen, so the separator above the doors sits near the bottom
   edge; the footage is lifted by a quarter so the town, not the sky, is behind the text. */
@media (max-width: 700px) {
  .hero { background: var(--stone); }
  .hero__body { min-height: calc(100svh - 56px); align-content: start; }
  /* The footage covers the first screen only, lifted by a quarter of the screen height. */
  .hero__media { top: -25svh; bottom: auto; height: 125svh; }
  /* Fade the footage into the stone just above the doors. */
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(var(--stone-rgb), 0) calc(100svh - 220px), var(--stone) calc(100svh - 20px)),
      radial-gradient(ellipse 90% 40% at 50% 28%, rgba(var(--stone-rgb), .78) 0%, rgba(var(--stone-rgb), .4) 60%, rgba(var(--stone-rgb), 0) 100%),
      linear-gradient(180deg, rgba(var(--stone-rgb), .5) 0%, rgba(var(--stone-rgb), .1) 30%, rgba(var(--stone-rgb), 0) 52%);
  }
}