/* The 91 project pages. Two <style> blocks, concatenated in
   the order they appeared, so the cascade is unchanged. */

    @view-transition { navigation: auto; }
    :root {
      --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
      --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
      --ease-curtain:   cubic-bezier(0.76, 0, 0.24, 1);
      --accent:         #4B0082;
      --bg:             #F5F3ED;
      --accent-soft:    #555555;
      --wash:           var(--bg);
      --ink:            #1A1A1A;
      --muted:          #6B6B6B;
      --hairline:       rgba(0, 0, 0, 0.08);
      --hairline-strong:rgba(0, 0, 0, 0.18);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; overflow-x: clip; overscroll-behavior-x: none; }

    body { font-family: 'Satoshi', sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; overflow-x: clip; }
    h1, h2, h3 { text-wrap: balance; margin: 0; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
    ::selection { background: var(--accent); color: #FFFFFF; }
    .tabular { font-variant-numeric: tabular-nums; }
    .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 2.5rem); }

    /* ───── Nav (homepage-aligned, two-state) ───── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      padding: max(1.4rem, env(safe-area-inset-top, 0px)) clamp(1.5rem, 3.5vw, 3rem);
      display: flex; justify-content: center;
      pointer-events: none;
      opacity: 1;
      transition: padding 450ms var(--ease-out-expo);
    }
    .nav-pill {
      pointer-events: auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 2.5rem;
      width: 100%; max-width: none;
      padding: 0.3rem 0;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      backdrop-filter: blur(0px) saturate(1);
      -webkit-backdrop-filter: blur(0px) saturate(1);
      box-shadow: 0 0 0 rgba(0,0,0,0);
      transition:
        max-width 600ms var(--ease-out-expo),
        padding 450ms var(--ease-out-expo),
        gap 450ms var(--ease-out-expo),
        background 350ms ease,
        border-color 350ms ease,
        backdrop-filter 350ms ease,
        -webkit-backdrop-filter 350ms ease,
        box-shadow 350ms ease;
    }
    .nav.is-scrolled { padding: max(1rem, env(safe-area-inset-top, 0px)) 2rem; }
    .nav.is-scrolled .nav-pill {
      max-width: 720px;
      padding: 0.5rem 0.55rem 0.5rem 1.2rem;
      gap: 1.5rem;
      background: rgba(255,255,255,0.55);
      border-color: rgba(255,255,255,0.5);
      backdrop-filter: blur(22px) saturate(1.8);
      -webkit-backdrop-filter: blur(22px) saturate(1.8);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 8px 32px rgba(0,0,0,0.10),
        0 1px 2px rgba(0,0,0,0.06);
    }
    .nav-mark { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
    .nav-mark img {
      height: 48px; width: auto; display: block;
      filter: brightness(0) invert(1);
      transition: height 350ms var(--ease-out-expo), filter 350ms ease;
    }
    .nav.is-scrolled .nav-mark img { height: 42px; filter: none; }
    .nav-links { display: flex; gap: 1.4rem; align-items: center; }
    .nav-link {
      position: relative;
      font-size: 0.78rem; font-weight: 400;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--bg); text-decoration: none;
      padding: 0.25rem 0;
      transition: color 250ms var(--ease-out-quart);
    }
    .nav.is-scrolled .nav-link { color: var(--ink); }
    .nav-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
      height: 1px; background: currentColor; opacity: 0.65;
      transform: scaleX(0); transform-origin: left center;
      transition: transform 350ms var(--ease-out-expo);
    }
    .nav-link.is-active::after,
    .nav-link:hover::after { transform: scaleX(1); }
    .nav-link.is-active { color: var(--accent); }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 0.55rem;
      background: transparent; color: var(--bg);
      border: 1px solid rgba(255,255,255,0.55);
      padding: 0.7rem 1.4rem;
      border-radius: 999px;
      font-size: 0.82rem; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      text-decoration: none;
      box-shadow: none;
      transition: transform 250ms var(--ease-out-quart),
                  box-shadow 350ms var(--ease-out-quart),
                  background-color 250ms var(--ease-out-quart),
                  border-color 350ms ease,
                  color 250ms var(--ease-out-quart);
    }
    .nav.is-scrolled .nav-cta {
      background: var(--ink); color: #FFFFFF;
      border-color: var(--ink);
      box-shadow: 0 12px 28px -16px rgba(0,0,0,0.35);
    }
    .nav-cta:active { transform: scale(0.97); }
    .nav-cta .dot { width: 6px; height: 6px; background: #FFFFFF; border-radius: 999px; transition: background 250ms var(--ease-out-quart); }
    @media (hover: hover) {
      .nav-cta:hover { transform: scale(1.02); background: var(--accent); color: #FFFFFF; box-shadow: 0 18px 36px -16px rgba(0,0,0,0.45); }
      .nav-cta:hover .dot { background: #FFFFFF; }
    }

    /* Mobile burger — homepage pattern */
    .nav-burger {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border: 1px solid rgba(255,255,255,0.55);
      background: transparent;
      border-radius: 999px;
      cursor: pointer;
      position: relative;
      padding: 0;
      transition: border-color 250ms var(--ease-out-quart);
    }
    .nav.is-scrolled .nav-burger { border-color: var(--hairline-strong); }
    .nav-burger:hover { border-color: var(--accent); }
    .nav-burger span {
      position: absolute;
      left: 50%; top: 50%;
      width: 16px; height: 1px;
      background: var(--bg);
      transition: transform 350ms var(--ease-out-quart),
                  opacity 200ms var(--ease-out-quart),
                  background 250ms ease;
    }
    .nav.is-scrolled .nav-burger span { background: var(--ink); }
    .nav-burger span:nth-child(1) { transform: translate(-50%, -4px); }
    .nav-burger span:nth-child(2) { transform: translate(-50%, 4px); }
    .nav-burger.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
    .nav-burger.is-open span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* Full-screen nav overlay */
    .nav-overlay {
      position: fixed; inset: 0;
      background: var(--bg);
      z-index: 60;
      display: grid; place-items: center;
      opacity: 0; pointer-events: none;
      transition: opacity 350ms var(--ease-out-expo);
    }
    .nav-overlay.is-open { opacity: 1; pointer-events: auto; }
    .nav-overlay-close {
      position: absolute;
      top: 1.5rem; right: 2rem;
      width: 44px; height: 44px;
      border: 1px solid var(--hairline-strong);
      background: transparent;
      border-radius: 999px;
      font-size: 1.5rem; font-family: inherit;
      cursor: pointer; color: var(--ink);
      display: inline-flex; align-items: center; justify-content: center;
      line-height: 1;
      transition: border-color 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart);
    }
    .nav-overlay-close:hover { border-color: var(--accent); color: var(--accent); }
    .nav-overlay-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: clamp(2rem, 6vw, 5rem);
      width: min(1100px, 90vw);
    }
    .nav-overlay-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .nav-overlay-list li {
      opacity: 0; transform: translateY(20px);
      transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
    }
    .nav-overlay.is-open .nav-overlay-list li { opacity: 1; transform: none; }
    .nav-overlay.is-open .nav-overlay-list li:nth-child(1) { transition-delay: 100ms; }
    .nav-overlay.is-open .nav-overlay-list li:nth-child(2) { transition-delay: 160ms; }
    .nav-overlay.is-open .nav-overlay-list li:nth-child(3) { transition-delay: 220ms; }
    .nav-overlay.is-open .nav-overlay-list li:nth-child(4) { transition-delay: 280ms; }
    .nav-overlay-list a {
      display: flex; flex-direction: row-reverse;
      justify-content: flex-end; align-items: baseline;
      gap: clamp(1rem, 4vw, 2rem);
      font-size: clamp(1rem, 3.2vw, 1.15rem);
      font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--ink); text-decoration: none;
      padding: 0.4rem 0;
      transition: color 280ms var(--ease-out-quart), transform 350ms var(--ease-out-expo);
    }
    .nav-overlay-list a .num {
      font-family: 'Satoshi', sans-serif;
      font-feature-settings: 'tnum';
      font-size: clamp(3.5rem, 14vw, 5.5rem);
      font-weight: 300;
      letter-spacing: -0.02em;
      color: var(--accent);
      line-height: 1; flex-shrink: 0;
    }
    @media (hover: hover) {
      .nav-overlay-list a:hover { color: var(--accent); transform: translateX(8px); }
    }
    .nav-overlay-preview {
      width: 240px; aspect-ratio: 4 / 5;
      overflow: hidden; border-radius: 2px;
      background: var(--wash);
      opacity: 0;
      transition: opacity 400ms var(--ease-out-expo);
    }
    .nav-overlay-preview.is-shown { opacity: 1; }
    .nav-overlay-preview img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 700px) {
      .nav-overlay-inner { grid-template-columns: 1fr; }
      .nav-overlay-preview { display: none; }
    }

    /* Mobile nav — homepage pattern (full-width strip at rest, pill on scroll) */
    @media (max-width: 1023px) {
      .nav .nav-pill {
        background: transparent;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        max-width: 100%;
        padding: 0.85rem 1.25rem;
        gap: 1rem;
      }
      .nav.is-scrolled .nav-pill {
        background: rgba(255,255,255,0.55);
        border-color: rgba(255,255,255,0.5);
        backdrop-filter: blur(22px) saturate(1.8);
        -webkit-backdrop-filter: blur(22px) saturate(1.8);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.6),
          0 8px 32px rgba(0,0,0,0.10),
          0 1px 2px rgba(0,0,0,0.06);
        max-width: calc(100% - 2.5rem);
        margin: 0 1.25rem;
        padding: 0.5rem 0.55rem 0.5rem 1.2rem;
        border-radius: 999px;
      }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .nav-burger { display: inline-flex; }
      .nav-mark img { height: 34px; }
      /* ria-logo-mobile-align — the logo PNG carries 347px of transparent
         padding on its left edge (25% of a 1400px canvas), so the mark rendered
         25.7px right of the {.container} gutter. Nav gutter is pulled to the
         container's 1.25rem and the mark is offset back by the dead pixels. */
      .nav { max-width: 100%; padding-left: 0; padding-right: 0; }
      .nav .nav-pill { padding-left: 1.25rem; padding-right: 1.25rem; }
      .nav-mark { margin-left: -25.7px; }

    }
    @media (min-width: 769px) {
      .nav-burger { display: none; }
    }
    /* Reveal */
    [data-reveal] { opacity: 0; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-size: 100% 200%; mask-size: 100% 200%; -webkit-mask-position: 0 120%; mask-position: 0 120%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 0.6s var(--ease-out-quart), -webkit-mask-position 1.1s var(--ease-curtain), mask-position 1.1s var(--ease-curtain); transition-delay: calc(var(--i, 0) * 0.08s); }
    [data-reveal].is-in { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
    [data-reveal-img] { position: relative; overflow: hidden; }
    [data-reveal-img]::before { content: ''; position: absolute; inset: 0; background: var(--wash); z-index: 5; transform: translateY(0%); transition: transform 1.1s var(--ease-curtain); pointer-events: none; }
    [data-reveal-img].is-in::before { transform: translateY(-102%); }

    /* ──────────────────────────────────────────────────────────────
       Detail hero — 100vh, photo + title overlay bottom-left
       ────────────────────────────────────────────────────────────── */
    .detail-hero {
      width: 100vw; height: 100vh; min-height: 600px;
      overflow: hidden; position: relative;
      background: var(--ink);
      view-transition-name: project-hero;
    }
    .detail-hero__img { position: absolute; inset: 0; }
    /* The resting overscan is declared here, at one class plus a descendant,
       because the hero is a <picture> and the site-wide parallax rule that was
       meant to carry it selects `.detail-hero__img > img`. That child combinator
       never matched, so the hero rendered at a plain cover crop while the zoom's
       end frame, the `--hero-lq` backing below and the reduced-motion override
       were all written against 1.06. The picture therefore shrank 6% the moment
       the destination took over, which is the snap the client reported. */
    .detail-hero__img img {
      width: 100%; height: 100%; object-fit: cover;
      --ps: 1.06;
      transform: translate(0, var(--py, 0px)) scale(var(--ps, 1.06));
      transition: --ps 1800ms var(--ease-out-expo);
    }
    .detail-hero__scrim {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
      pointer-events: none;
    }
    .detail-hero__titlewrap {
      position: absolute;
      inset: auto 0 clamp(2rem, 6vh, 5rem) 0;
      padding: 0 clamp(1.5rem, 4vw, 2.5rem);
      max-width: 1400px; margin: 0 auto;
      color: var(--bg);
      z-index: 2;
    }
    .detail-hero__eyebrow {
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.82);
      margin: 0 0 clamp(0.8rem, 1.5vh, 1.4rem);
      font-variant-numeric: tabular-nums;
    }
    .detail-hero__title {
      font-size: clamp(3.2rem, 9.5vw, 9.5rem);
      font-weight: 500;
      line-height: 0.92;
      letter-spacing: -0.04em;
      max-width: 22ch;
    }
    .detail-hero__scrollcue {
      position: absolute; bottom: clamp(1.4rem, 3vh, 2.4rem); right: clamp(1.5rem, 4vw, 2.5rem);
      display: flex; align-items: center; gap: 0.65rem;
      font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.72);
      z-index: 2;
    }
    .detail-hero__scrollcue::before {
      content: ''; width: 1px; height: 28px;
      background: rgba(255,255,255,0.72);
    }

    /* ──────────────────────────────────────────────────────────────
       Tagline — poetic 1-sentence stop
       ────────────────────────────────────────────────────────────── */
    .tagline {
      padding: clamp(7rem, 12vh, 10rem) 0 clamp(5rem, 9vh, 7rem);
      border-bottom: 1px solid var(--hairline);
    }
    .tagline__row {
      display: grid;
      grid-template-columns: minmax(0, 0.3fr) minmax(0, 1.7fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: start;
    }
    .tagline__caption {
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted);
      padding-top: 0.6rem;
    }
    .tagline__text {
      font-size: clamp(1.8rem, 3.5vw, 3.2rem);
      font-weight: 400;
      line-height: 1.18;
      letter-spacing: -0.025em;
      color: var(--ink);
      max-width: 32ch;
    }

    /* ──────────────────────────────────────────────────────────────
       Meta row — facts (Sector / Location / Built area / Year)
       ────────────────────────────────────────────────────────────── */
    .meta {
      padding: clamp(4rem, 7vh, 5.5rem) 0;
      border-bottom: 1px solid var(--hairline);
    }
    .meta-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }
    .meta-cell {
      display: flex; flex-direction: column;
      gap: clamp(0.5rem, 1vh, 0.8rem);
      padding-top: 0.85rem;
      border-top: 1px solid var(--hairline-strong);
    }
    .meta-label {
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted);
    }
    .meta-value {
      font-size: clamp(1.05rem, 1.25vw, 1.25rem);
      font-weight: 500;
      color: var(--ink);
      letter-spacing: -0.005em;
    }
    .meta-value.tabular { font-variant-numeric: tabular-nums; }


    /* ──────────────────────────────────────────────────────────────
       Project band — sits between the image groups so a project page
       is never an unbroken run of renders.
       ────────────────────────────────────────────────────────────── */
    .pband {
      padding: clamp(4.5rem, 9vh, 8rem) 0;
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
    }
    .pband__label {
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted);
    }
    .pband__title {
      margin: clamp(1rem, 2.5vh, 1.8rem) 0 clamp(2rem, 4vh, 3.2rem);
      font-size: clamp(2rem, 5.2vw, 4.2rem);
      font-weight: 500; line-height: 1.02; letter-spacing: -0.03em;
      max-width: 18ch;
    }
    .pband__desc {
      max-width: 62ch;
      margin: 1.4rem 0 0;
      font-size: clamp(1rem, 1.35vw, 1.15rem);
      line-height: 1.62;
      color: var(--muted);
    }
    /* The band ran title and description down the left half and left the right
       half of the page empty. Above 900px the description moves across into
       that space and sits alongside the title, so the section is read in two
       columns and nothing is stranded. Below 900px it stacks as before. */
    @media (min-width: 900px) {
      .pband > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2.5rem, 5vw, 5.5rem);
        align-items: start;
      }
      .pband__label { grid-column: 1; grid-row: 1; }
      .pband__title { grid-column: 1; grid-row: 2; margin-bottom: 0; }
      .pband__desc  {
        grid-column: 2; grid-row: 2;
        max-width: 46ch;
        /* pulls the first line down onto the title's cap height rather than
           its line box, so the two columns start on the same optical line */
        margin: clamp(1.4rem, 3vh, 2.1rem) 0 0;
      }
      .pband__facts { grid-column: 1 / -1; grid-row: 3; }
    }
    .pband__facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
      /* .pband__desc's last line was landing right on .pband__cell's border-top,
         its descenders touching the rule. Clear air above the facts row instead. */
      margin-top: clamp(2.25rem, 4.5vh, 3.5rem);
    }
    .pband__cell {
      display: flex; flex-direction: column; gap: 0.55rem;
      padding-top: 0.85rem;
      border-top: 1px solid var(--hairline-strong);
    }
    .pband__k {
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
    }
    .pband__v {
      font-size: clamp(1.05rem, 1.25vw, 1.25rem);
      font-weight: 500; color: var(--ink);
    }
    @media (max-width: 720px) {
      .pband__facts { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
      .pband__title { max-width: none; }
    }
    /* ──────────────────────────────────────────────────────────────
       Walk-through gallery — stacked full-bleed images
       ────────────────────────────────────────────────────────────── */
    .walk {
      padding: clamp(5rem, 9vh, 8rem) 0;
    }
    .walk-img {
      width: 100%;
      background: var(--wash);
      overflow: hidden;
      position: relative;
      margin-bottom: clamp(2.5rem, 5vh, 4rem);
    }
    .walk-img:last-child { margin-bottom: 0; }
    /* Every figure used to be forced into a fixed ratio and the render cropped
       to fill it, which threw away a quarter of the average image and up to
       two thirds of the worst: portrait elevations were being squeezed into
       16/9, and panoramas into a square. The image now sets its own height and
       nothing is cropped. The width/height attributes on each <img> give the
       intrinsic ratio before the file arrives, so the reserved space is exact
       and there is no layout shift. The variants below only decide how wide a
       figure runs and which side it sits on, which is what keeps the column
       from becoming a single unbroken stack. */
    .walk-img img {
      display: block;
      width: 100%; height: auto;
    }
    /* Anything not wide pairs up two to a row rather than sitting alone against
       half a page of nothing. A wide figure always takes the full row. A figure
       that is the only one in its group also takes the full row, capped and
       centred, so it does not read as a column that lost its partner. */
    @media (min-width: 721px) {
      .walk > .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 3vw, 2.5rem);
        align-items: start;
      }
      .walk-img { margin-bottom: 0; }
      .walk-img.is-wide { grid-column: 1 / -1; }
      .walk-img:only-child {
        grid-column: 1 / -1;
        max-width: min(100%, 1040px);
        margin-left: auto; margin-right: auto;
      }
    }
    .walk-img figcaption {
      padding: 0.85rem 0.1rem 0;
      display: flex; justify-content: space-between;
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    /* ──────────────────────────────────────────────────────────────
       Narrative — 3-paragraph design copy
       ────────────────────────────────────────────────────────────── */
    .narrative {
      padding: clamp(5rem, 9vh, 8rem) 0;
      border-top: 1px solid var(--hairline);
    }
    .narrative__head {
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: clamp(2rem, 4vh, 3rem);
    }
    .narrative__body {
      max-width: 64ch;
      margin-left: auto; margin-right: auto;
      font-size: clamp(1.1rem, 1.3vw, 1.3rem);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
    .narrative__body p { margin: 0 0 1.4em; }
    .narrative__body p:last-child { margin-bottom: 0; }
    .narrative__body p:first-child::first-letter {
      font-size: 2.6em;
      font-weight: 500;
      float: left;
      line-height: 0.95;
      margin: 0.05em 0.12em 0 -0.04em;
      letter-spacing: -0.04em;
    }

    /* ──────────────────────────────────────────────────────────────
       Next project
       ────────────────────────────────────────────────────────────── */
    .next {
      padding: clamp(6rem, 10vh, 9rem) 0;
      border-top: 1px solid var(--hairline);
    }
    .next__caption {
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: clamp(1.5rem, 3vh, 2.4rem);
    }
    .next__row {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: end;
    }
    .next__title {
      font-size: clamp(2.4rem, 6vw, 6rem);
      font-weight: 500;
      line-height: 0.96;
      letter-spacing: -0.035em;
      color: var(--ink);
      transition: color 250ms var(--ease-out-quart);
    }
    .next__title:hover { color: var(--accent); }
    .next__title .arr {
      display: inline-block;
      margin-left: 0.45rem;
      transition: transform 350ms var(--ease-out-quart);
    }
    .next__title:hover .arr { transform: translateX(0.6rem); }
    .next__media {
      width: 100%;
      aspect-ratio: 5 / 4;
      background: var(--wash);
      overflow: hidden;
      position: relative;
    }
    .next__media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: --ps 1.4s var(--ease-curtain);
    }
    .next:hover .next__media img { --ps: 1.10; }

    /* Footer (verbatim) */
    .site-foot { position: relative; padding: clamp(5rem, 9vw, 7.5rem) 0 1.5rem; border-top: 1px solid var(--hairline); background: var(--bg); overflow: hidden; }
    .foot-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-bottom: clamp(3rem, 5vw, 4rem); border-bottom: 1px solid var(--hairline); }
    .foot-mark { display: flex; flex-direction: column; gap: 0.85rem; max-width: 32ch; }
    .foot-mark-logo img { height: 50px; width: auto; display: block; }
    .foot-mark-tag { font-weight: 300; font-size: 1rem; color: var(--muted); margin: 0; line-height: 1.5; }
    .foot-cta { justify-self: end; display: inline-flex; align-items: center; gap: 0.65rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: transform 250ms var(--ease-out-quart), background 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart); }
    .foot-cta .dot { width: 6px; height: 6px; background: var(--accent-soft); border-radius: 999px; }
    @media (hover: hover) { .foot-cta:hover { background: var(--accent); color: #FFFFFF; } .foot-cta:hover .dot { background: #FFFFFF; } }
    .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(3rem, 5vw, 4rem) 0; }
    .foot-col-head { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.5rem; }
    .foot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
    .foot-link { position: relative; display: inline-block; font-size: 0.95rem; font-weight: 400; color: var(--ink); padding: 0.05rem 0; transition: color 250ms var(--ease-out-quart); }
    .foot-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--ease-out-expo); }
    .foot-link.is-phone { color: var(--accent); }
    .foot-link .arr { display: inline-block; margin-left: 0.25rem; transition: transform 300ms var(--ease-out-quart); }
    @media (hover: hover) { .foot-link:hover { color: var(--accent); } .foot-link:hover::after { transform: scaleX(1); } .foot-link:hover .arr { transform: translateX(4px); } }
    .foot-static { font-size: 0.95rem; font-weight: 300; color: var(--muted); margin: 0; line-height: 1.5; }
    .foot-megamark { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); padding: 0 1.5rem; overflow: hidden; pointer-events: none; user-select: none; line-height: 0.85; }
    .foot-megamark span { display: block; font-weight: 400; font-size: clamp(2.5rem, 12.4vw, 12rem); letter-spacing: -0.055em; color: rgba(0, 0, 0, 0.05); white-space: nowrap; text-align: center; clip-path: inset(0 60% 0 60%); transition: clip-path 1100ms var(--ease-out-expo); }
    .foot-megamark.is-in span { clip-path: inset(0 0 0 0); }

    /* ───────── Footer geographies (client brief 13 Aug, section 8) ───────── */
    .foot-geo { padding: clamp(2rem, 4vh, 3rem) 0 0; border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vh, 3rem); }
    .foot-geo__head { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.6rem; }
    .foot-geo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
    .foot-geo__country { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 1rem; color: var(--ink); }
    .foot-geo__office + .foot-geo__office { margin-top: 1.1rem; }
    .foot-geo__label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
    .foot-geo__addr { font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin: 0; }
    .foot-geo__tel { display: inline-block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
    .foot-geo__tel:hover { border-color: var(--accent); color: var(--accent); }
    @media (max-width: 900px) { .foot-geo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .foot-geo__grid { grid-template-columns: 1fr; gap: 1.8rem; } }
    .foot-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); font-size: 0.8rem; font-weight: 300; /* --muted is 4.04:1 here, under the 4.5 floor for text this size.
         Darkened in the footer only, so the token stays put. */
      color: #6b6b6b; }
    .foot-bottom .left { justify-self: start; }
    .foot-bottom .center { justify-self: center; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
    .foot-bottom .right { justify-self: end; }

    /* Cursor */
    .cursor { position: fixed; top: 0; left: 0; width: 11px; height: 11px; border-radius: 999px; background: rgba(26, 26, 26, 0.7); box-shadow: 0 0 0 1px rgba(245, 243, 237, 0.6); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 280ms var(--ease-out-expo), height 280ms var(--ease-out-expo), background 200ms var(--ease-out-quart), opacity 200ms ease; display: none; align-items: center; justify-content: center; opacity: 0; }
    .cursor.is-armed { opacity: 1; }
    .cursor::before { content: none; }
    .cursor.is-link { width: 7px; height: 7px; background: var(--accent); box-shadow: none; }
    .cursor.is-view { width: 7px; height: 7px; background: var(--accent); box-shadow: none; }

    /* ───────── Media protection (client brief 13 Aug, section 7) ─────────
       Images and video are not offered for download: no context menu, no drag,
       no long-press save sheet, no native video download button. This stops
       casual saving. It cannot stop a determined visitor, because the browser
       must receive the file in order to display it. */
    img, video { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; }
    img, video { -webkit-touch-callout: none; }
    .cursor.is-media { width: 40px; height: 40px; background: rgba(26,26,26,0.72); box-shadow: none; }
    .cursor.is-media .cursor-arrow { display: none; }
    .cursor.is-media .cursor-label { opacity: 0; }
    .cursor__media-icon { display: none; width: 15px; height: 15px; color: #FFFFFF; fill: currentColor; }
    .cursor.is-media .cursor__media-icon { display: block; }

    .cursor-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #FFFFFF; opacity: 0; transition: opacity 200ms var(--ease-out-quart); }
    /* No word under the cursor: the client asked for the ring alone. */
    .cursor.is-view .cursor-label { opacity: 0; }
    @media (hover: hover) and (pointer: fine) { .cursor { display: inline-flex; } body { cursor: none; } a, button { cursor: none; } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.001ms !important; }
      [data-reveal] { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; }
      [data-reveal-img]::before { transform: translateY(-100%) !important; }
      .cursor { display: none !important; }
      body { cursor: auto !important; }
      .detail-hero__img img { transform: none !important; }
    }

    /* Mobile */
    @media (max-width: 720px) {
      /* The hero is full-bleed here exactly as it is on a desktop, and that is
         deliberate: a project is arrived at by zooming into its photograph, and
         the push ends on a picture filling the screen. A phone layout that put
         the render in a short band at the top meant the page the visitor landed
         on did not match the frame the animation had just finished on, so the
         image appeared to snap smaller the moment the page took over. One
         layout at every width is what makes the arrival seamless. */
      .detail-hero { min-height: 480px; }
      /* No scroll cue: at this width it sits under the browser's own chrome. */
      .detail-hero__scrollcue { display: none; }
      /* Lifted clear of the chat button, which at this width sits in the same
         corner the last line of a long title reaches. */
      .detail-hero__titlewrap { padding: 0 1.25rem; inset: auto 0 5.5rem 0; }
      /* Sized against the longest single word in the set, "Multispeciality",
         because a name has nowhere to break and the hero clips. Fifteen
         characters have to fit 340px of usable width. */
      /* Two classes deep on purpose: the 899px block below declares this same
         property at one class, and it comes later in the file. */
      .detail-hero .detail-hero__title {
        font-size: clamp(1.9rem, 8.4vw, 3.2rem);
        max-width: 100%;
        overflow-wrap: anywhere;
      }
    }

    @media (max-width: 899px) {
      .detail-hero__title { font-size: clamp(2.6rem, 15vw, 5.3rem); }
      .tagline__row { grid-template-columns: 1fr; gap: 1rem; }
      .tagline__caption { padding-top: 0; }
      .meta-row { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
      .walk-img.is-tall, .walk-img.is-portrait, .walk-img.is-square { max-width: 100%; margin: 0; }
      .next__row { grid-template-columns: 1fr; gap: 1.5rem; }
      .next__title { font-size: clamp(2rem, 11vw, 3.6rem); }
      .narrative__body p:first-child::first-letter { font-size: 2.2em; }
      .foot-top { grid-template-columns: 1fr; gap: 1.5rem; }
      .foot-cta { justify-self: start; }
      .foot-cols { grid-template-columns: 1fr 1fr; }
      .foot-bottom { grid-template-columns: 1fr; gap: 0.4rem; text-align: left; }
      .foot-bottom .left, .foot-bottom .center, .foot-bottom .right { justify-self: start; }
    }
  
    /* ───── Page transition cross-fade ───── */
    body {
      opacity: 1;
      transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    html[data-curtain-up] body { opacity: 0; transition: none; }
    body.is-leaving { opacity: 0; transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1); }
    html[data-curtain-up] [data-reveal] {
      opacity: 0 !important;
      -webkit-mask-position: 0 120% !important;
              mask-position: 0 120% !important;
    }
    html[data-curtain-up] [data-reveal-img]::before {
      transform: translateY(0%) !important;
    }
    @media (prefers-reduced-motion: reduce) {
      body, body.is-leaving { opacity: 1 !important; transition: none !important; }
    }

    /* Mobile pass 2026-07-25 — overflow, tap targets, type floor. */
    /* UA default figure margin (1em 40px) pushed media 40px past the
       container and got clipped — every figure here is meant to be flush. */
    figure { margin: 0; }

    @media (max-width: 899px) {
      .nav-burger { width: 44px; height: 44px; }
      .nav-mark { min-height: 44px; }
      .foot-cta { min-height: 44px; }
      .foot-list { gap: 0.1rem; }
      .foot-link { padding: 0.85rem 0; min-width: 44px; }
      .foot-link::after { bottom: calc(0.85rem - 2px); }
      /* Breadcrumb links sat at 13px tall — inline-block + padding without
         shifting the crumb's baseline against the page title. */
      .page-head__crumb a, .open__crumb a, .direct__crumb a {
        display: inline-block; padding: 1rem 0;
      }
      .page-head__crumb, .open__crumb, .direct__crumb { margin-block: -1rem; }
    }
    /* A page opened cold starts 4% wide and settles, which is a good opening on
       its own. A page arrived at by zooming out of the work grid must not: the
       push ends on the photograph, and any settle after that reads as the
       picture zooming back out. So a landing starts at the resting scale and
       stays there, and the plate's end frame is computed against this value. */
    html.is-zoom-landing .detail-hero__img img {
      --ps: 1.06;
      transition: none;
    }

    /* What sits behind the hero on a zoom landing is the thumbnail the visitor
       was looking at a second ago, not the hero's near-black backing.

       The push warms the full hero before it hands over, so in the ordinary
       case the picture is decoded on arrival and this is never seen. On a slow
       connection it cannot be: a 140KB hero over a poor link outlasts any
       sensible hold on the outgoing page, and something has to be under the
       image while it arrives. Ink was the wrong something, and that black frame
       is what the client kept catching at the end of the animation. The card's
       own thumbnail is already in cache, is the same photograph, and costs no
       request. It is scaled to 1.06 to sit exactly where the hero will, so the
       hero replacing it does not shift.

       Declared only under `.is-zoom-landing`, so a page opened cold never
       fetches it. --hero-lq is set per page, beside the hero's preload. */
    html.is-zoom-landing .detail-hero::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background-image: var(--hero-lq);
      background-size: cover; background-position: center;
      transform: scale(1.06);
    }

    /* Nor does a landing cross-fade. The picture is already on screen when the
       page arrives, so fading it up from the paper is a second transition on
       top of the one that just finished. Leaving still fades, as it always
       did, which is why the leaving state is spared here. */
    html.is-zoom-landing body:not(.is-leaving) { transition: none; }