/* css/pages/home.css : Home, the flagship (jury round 4, 2026-09-29). Linked after site.css and unlayered on purpose, so it
   sits above every site.css layer and above the runtime :where() base styles.
   ONE scroll story (the storyboard is at the top of js/pages/home.js). Rhythm, bone with four ink moments: hero film >
   his line (the words fill with ink) > the map (pinned; INK: its blue hour) > INK: the receipts (a light walks across
   the figures) + the review rail > meet me (the arch opens) > how I fight (pinned X-ray, results on the object) > INK:
   the ride along (pinned, full-bleed footage) > five doors > what's your home worth > INK: back to your door (the
   shared text-me ending in a lit doorway) > footer. */

/* ------------------------------------------------------------------ shared type on this page */
.home .cine-h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(2.75rem, 6.2vw, 6rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.home .cine-h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; font-size: calc(var(--em-optical) * 1em); line-height: 0; }
.home .caps { color: var(--muted); }
.home [data-tc-rest] { transition-delay: .3s; }

/* ------------------------------------------------------------------ 1 · hero: the 4243 Serenity Trail walk-out, one screen */
.home-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden; background: var(--paper-2); color: #fff; }
.home-hero__film { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); transform-origin: 50% 40%; will-change: transform; }
.home-hero__poster, .home-hero__poster img, .home-hero__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.home-hero__film video { opacity: 0; transition: opacity .9s var(--ease-out); filter: saturate(.96) contrast(1.03); }
.home-hero__film.is-playing video { opacity: 1; }
/* a warm ink shade under the copy only (left and low); the rest of the frame stays daylight */
.home-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(21, 19, 17, .66) 0%, rgba(21, 19, 17, .44) 24%, rgba(21, 19, 17, .1) 46%, rgba(21, 19, 17, 0) 58%),
              linear-gradient(to top, rgba(21, 19, 17, .42) 0%, rgba(21, 19, 17, 0) 36%); }
.home-hero__copy { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--max-wide)) / 2)); bottom: clamp(44px, 9vh, 96px); width: min(820px, 58vw); display: grid; justify-items: start; gap: clamp(14px, 2.2vh, 22px); will-change: transform, opacity; }
.home-hero h1 { font-weight: 300; font-size: clamp(3rem, min(6.4vw, 10.6vh), 6.75rem); line-height: .9; letter-spacing: -.05em; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .28); }
.home-hero h1 .kicker { display: block; font-weight: 500; letter-spacing: .32em; color: rgba(255, 255, 255, .84); margin-bottom: clamp(12px, 2vh, 22px); }
.home-hero h1 .h1-main { display: block; }
.home-hero h1 em { display: inline-block; color: var(--blue-on-night); padding-right: .08em; }
.home-hero__note { max-width: 40ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.home-hero__proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.home-hero__proof li { display: inline-flex; align-items: center; min-height: 28px; }
.home-hero__proof li + li::before { content: ""; width: 1px; height: 12px; margin: 0 14px; background: currentColor; opacity: .5; }
.home-hero__proof a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.home-hero__proof .stars { color: var(--blue-on-night); gap: 1px; }
.home-hero__proof .stars svg { width: 12px; height: 12px; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.home-hero__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.home-hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(21, 19, 17, .22); }
.home-hero .btn--ghost:hover { border-color: #fff; }
.home-hero__pause { position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - var(--max-wide)) / 2)); top: calc(var(--header-h) + 18px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .4); background: rgba(21, 19, 17, .3); }
.home-hero__pause:hover { color: #fff; border-color: #fff; }
@media (max-width: 767px) {
  /* phones: the film on top (under the transparent header), the copy on bone below; one screen in all */
  .home-hero { height: auto; min-height: 0; max-height: none; overflow: visible; background: var(--paper); color: var(--ink); }
  .home-hero__film { position: relative; inset: auto; height: 50svh; min-height: 300px; max-height: 520px; }
  .home-hero__poster img, .home-hero__film video { object-position: 53% 50%; }
  .home-hero__shade { display: none; }
  .home-hero__copy { position: relative; left: auto; bottom: auto; width: auto; padding: 22px var(--gutter) 30px; gap: 12px; }
  .home-hero h1 { font-size: clamp(2.6rem, 11.6vw, 3.4rem); color: var(--ink); text-shadow: none; }
  .home-hero h1 .kicker { font-size: 11px; letter-spacing: .26em; color: var(--muted); }
  .home-hero h1 em { color: var(--blue-text); }
  .home-hero__note { font-size: 1rem; color: var(--ink-2); text-shadow: none; }
  .home-hero__proof { font-size: 11px; letter-spacing: .14em; column-gap: 18px; color: var(--ink-2); text-shadow: none; }
  .home-hero__proof li + li::before { display: none; }
  .home-hero__proof a { color: var(--ink); }
  .home-hero__proof .stars { color: var(--blue-text); }
  .home-hero__ctas { width: 100%; }
  .home-hero__ctas .btn { flex: 1 1 0; padding: 0 12px; min-height: 50px; }
  .home-hero .btn--ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
  .home-hero__pause { top: calc(var(--header-h) + 10px); right: var(--gutter); min-height: 40px; }
}
/* the smallest phones (320): the two calls stack full width, so neither label wraps */
@media (max-width: 359px) {
  .home-hero__ctas { flex-direction: column; gap: 10px; }
  .home-hero__ctas .btn { flex: 0 0 auto; width: 100%; white-space: nowrap; }
}
/* the entrance: CSS only, so nothing flashes before the module runs. The film rises from a mask and settles; the lines
   follow. Reduced motion and the global pause show the end state. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero__film { animation: hh-reveal 1.5s var(--ease-cine) .05s both; }
  .home-hero__poster img, .home-hero__film video { animation: hh-settle 2.8s var(--ease-out) both; }
  .home-hero h1 .kicker, .home-hero h1 .h1-main, .home-hero h1 em, .home-hero__note, .home-hero__proof, .home-hero__ctas { animation: hh-rise 1.1s var(--ease-out) both; }
  .home-hero h1 .kicker { animation-delay: .3s; } .home-hero h1 .h1-main { animation-delay: .42s; } .home-hero h1 em { animation-delay: .56s; }
  .home-hero__note { animation-delay: .72s; } .home-hero__proof { animation-delay: .82s; } .home-hero__ctas { animation-delay: .92s; }
}
@keyframes hh-reveal { from { clip-path: inset(0 0 22% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hh-settle { from { transform: scale(1.09); } to { transform: none; } }
@keyframes hh-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
:root[data-motion="paused"] .home-hero *, :root[data-motion="paused"] .home-hero__film { animation: none !important; }

/* ------------------------------------------------------------------ 2 · his line, on bone (half a screen) */
.home-epigraph { position: relative; display: grid; justify-items: center; padding-block: clamp(48px, 9vh, 104px) clamp(56px, 11vh, 120px); text-align: center; background: var(--paper); }
.home-epigraph__rule { display: block; width: 2px; height: clamp(44px, 7vh, 80px); margin-bottom: clamp(22px, 3.6vh, 36px); overflow: visible; }
.home-epigraph__rule path { fill: none; stroke: var(--blue-fill); stroke-width: 2; }
.home-epigraph__q { margin: 0 auto; }
.home-epigraph__q p { max-width: 21ch; margin-inline: auto; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: 1.12; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.home-epigraph__q em { color: var(--blue-text); }
/* the words fill with ink as the line scrolls up (home.js initEpigraph sets --k per word; no --k = ink) */
.home-epigraph .ep-w { opacity: calc(.13 + .87 * var(--k, 1)); }
.home-epigraph__q em .ep-w { display: inline-block; transform: translate3d(0, calc((1 - var(--k, 1)) * .18em), 0); }

/* ------------------------------------------------------------------ 3 · the map: see the MAP r2 block at the end of this file */

/* ------------------------------------------------------------------ 4 · the receipts: a paper plate where a light walks across
   the figures (home.js initReceipts: --lx/--ly place the light, --lo its strength, .is-lit per figure), then a review rail.
   The headline sits top left beside the figures (jury round 4: no empty corner above it). */
.home-proof { padding-block: clamp(64px, 8vw, 112px) clamp(44px, 5vw, 72px); }
.home-proof__plate { position: relative; overflow: hidden; display: grid; gap: clamp(22px, 3vw, 36px); padding: clamp(26px, 4vw, 56px); background: var(--paper-2); border-top: 3px solid var(--ink); }
.home-proof__plate > :not(.home-proof__light) { position: relative; }
.home-proof__lead { display: grid; gap: clamp(14px, 1.8vw, 22px); align-content: start; }
.home-proof__light { position: absolute; inset: 0; pointer-events: none; opacity: var(--lo, 0); transition: opacity .6s var(--ease-out);
  background: radial-gradient(34% 58% at var(--lx, 18%) var(--ly, 34%), rgba(236, 240, 255, .12) 0%, rgba(236, 240, 255, .045) 42%, rgba(236, 240, 255, 0) 72%); }
.home .home-proof__eyebrow { color: var(--blue-text); letter-spacing: .28em; }
.home-proof__h { font-weight: 300; font-size: clamp(1.9rem, 3.5vw, 3.4rem); line-height: 1.03; letter-spacing: -.045em; max-width: 17ch; text-wrap: balance; }
.home-proof__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.home-proof__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.home-proof__stats li { display: grid; gap: 8px; align-content: start; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.home-proof__stats li:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
.home-proof__stats li:nth-child(even) { padding-left: clamp(16px, 2.4vw, 32px); }
.home-proof__n { font-weight: 300; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.home-proof__n--word { font-size: clamp(1.75rem, 3vw, 2.9rem); line-height: 1.08; letter-spacing: -.04em; }
.home-proof__n--word em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.home-proof__link { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.home-proof__link .home-proof__n { display: flex; align-items: flex-start; gap: .08em; white-space: nowrap; }
.home-proof__out { flex: none; width: .3em; height: .3em; margin-top: .06em; color: var(--blue-text); transition: transform var(--dur-3, .3s) var(--ease-out); }
.home-proof__link:hover .home-proof__out, .home-proof__link:focus-visible .home-proof__out { transform: translate(2px, -2px); }
.home-proof__link:hover .home-proof__l { color: var(--ink); }
.home-proof__l { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* the light walks: a figure waits dim until the light reaches it, then lights and counts (and stays lit) */
.home-proof__plate.is-armed [data-stat] .home-proof__n, .home-proof__plate.is-armed [data-stat] .home-proof__l { transition: opacity .7s var(--ease-out), text-shadow .9s var(--ease-out); }
.home-proof__plate.is-armed [data-stat]:not(.is-lit) .home-proof__n { opacity: .22; }
.home-proof__plate.is-armed [data-stat]:not(.is-lit) .home-proof__l { opacity: .45; }
.home-proof__plate.is-armed [data-stat].is-lit .home-proof__n { text-shadow: 0 0 34px rgba(236, 240, 255, .18); }
@media (min-width: 1000px) {
  .home-proof__plate { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
  .home-proof__stats li:nth-last-child(-n+2) { border-bottom: 0; }
}
.home-rail { margin-top: clamp(28px, 3.6vw, 48px); border-block-color: var(--line); }
.home-rail .marquee__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.home-rail .marquee__track { gap: 0; padding: 0; align-items: stretch; }
.home-rail .marquee__item { display: grid; align-content: space-between; gap: 20px; width: clamp(300px, 34vw, 520px); padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 44px); white-space: normal; border-right: 1px solid var(--line); font-family: var(--sans); font-style: normal; font-size: 1rem; letter-spacing: 0; }
.home-rail .marquee__item::after { display: none; }
.home-rail blockquote { margin: 0; }
.home-rail blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.home-quote__who { display: flex; align-items: center; gap: 12px; }
.home-quote__who .avatar { width: 36px; height: 36px; }
.home-quote__who cite { font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.home-quote__who .stars { color: var(--blue-text); gap: 1px; }
.home-quote__who .stars svg { width: 12px; height: 12px; }
.avatar--initial { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.home-rail .marquee__pause { align-self: stretch; margin: 0; width: 56px; height: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
.home-rail.is-static .marquee__viewport { scrollbar-width: none; }
.home-rail.is-static .marquee__item { width: min(84vw, 460px); max-width: none; }
.home-proof__foot { margin-top: clamp(22px, 3vw, 34px); }
.home-proof__fine { display: grid; gap: 6px; max-width: 84ch; }
.home-proof__fine .fine { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------ 5 · meet me: the family photo ALWAYS shows (never faded, no
   lazy load). As the frame comes up the screen it opens from an arched doorway (the arch trims the top corners and a
   sliver of the sides, never the family) to the full frame, and the photo settles from 1.14x and drifts (home.js
   initMeet: --mo 0..1, --md the drift past centre). No --mo (T0, the fail-safe): simply the photo. */
.home-hi { padding-block: clamp(72px, 8vw, 120px) clamp(40px, 4vw, 64px); }
.home-hi .home-hi__photo { background: #CFC7BA; box-shadow: 0 40px 80px -48px rgba(21, 19, 17, .55);
  clip-path: inset(calc((1 - var(--mo, 1)) * 4%) calc((1 - var(--mo, 1)) * 7%) 0 round calc((1 - var(--mo, 1)) * 50%) calc((1 - var(--mo, 1)) * 50%) 0 0 / calc((1 - var(--mo, 1)) * 30%) calc((1 - var(--mo, 1)) * 30%) 0 0); }
.home-hi .home-hi__photo { transform: translate3d(0, var(--mp, 0px), 0); }
.home-hi .home-hi__photo img { opacity: 1 !important; transform: translate3d(0, calc(var(--md, 0) * -5%), 0) scale(calc(1 + (1 - var(--mo, 1)) * .14 + var(--mz, 0) * .07)); transform-origin: 50% 45%; }
/* the personal lines light one after another as they cross the screen (home.js --lk; no --lk = ink) */
.home-hi.is-meet .meet-line { position: relative; opacity: calc(.14 + .86 * var(--lk, 1)); transform: translate3d(0, calc((1 - var(--lk, 1)) * 18px), 0); }
.home-hi.is-meet .home-hi__beats > .meet-line::before { content: ""; position: absolute; left: -18px; top: .78em; width: 10px; height: 1px; background: var(--blue-fill); transform-origin: 100% 50%; transform: scaleX(var(--lk, 1)); }
@media (max-width: 599px) { .home-hi.is-meet .home-hi__beats > .meet-line::before { display: none; } }
.home-hi .home-hi__photo figcaption { padding: 72px 22px 20px; font-size: clamp(1.125rem, 1.6vw, 1.375rem); text-wrap: balance; transform: translate3d(0, calc((1 - var(--mo, 1)) * 48px), 0); }
.home-hi .home-hi__k { color: var(--blue-text); letter-spacing: .26em; }
.home-hi .hiyall__h2 { margin-top: 14px; font-weight: 300; font-size: clamp(3rem, 7vw, 6.5rem); }
.home-hi .hiyall__h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
@media (min-width: 1000px) { .home-hi .hiyall__portrait { aspect-ratio: 4 / 5; } }
.home-hi .hiyall__intro { color: var(--ink); }

/* ------------------------------------------------------------------ 7 · how I fight for you: the X-ray house and my calls
   Desktop (1100+): the heading and lede share a row, then the porcelain model gets the full width (2.35:1), the four
   calls under it, the lenders' words, then the lines and the CTA in one row. Below 1100 it stacks (2:1, phones 2:3).
   The real wins are not listed here: the competitor board right after says them once (feedback #44 to #46). */
.repairs.scene--bone { border-top: 1px solid var(--line); }
.repairs__head .cine-h2 { margin-top: 16px; font-size: clamp(2.75rem, 5.4vw, 5.25rem); }
.repairs .repairs__lede { color: var(--ink-2); }
.repairs .repairs__lines { color: var(--ink); }
.repairs .repairs__lines span + span { color: var(--blue-text); }
.repairs__cta { margin-top: clamp(4px, 1vw, 12px); }
@media (max-width: 599px) { .repairs__cta { width: 100%; justify-content: center; padding-inline: 16px; white-space: nowrap; letter-spacing: 0; } }
/* the stacked grid's one column never grows past the gutters (at 320 the nowrap CTA pushed it to a 1px right edge) */
@media (max-width: 1099px) { .repairs__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) { .repairs__cta { padding-inline: 12px; font-size: .9375rem; white-space: normal; text-align: center; } }
@media (min-width: 1100px) {
  .repairs__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; row-gap: clamp(36px, 4vw, 56px); }
  .repairs__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: end; }
  .repairs__head .caps { grid-column: 1 / -1; }
  .repairs__head .repairs__lede { margin: 0 0 .5em; justify-self: end; }
}
/* the sheet is 2.35:1 from tablets up (2:3 on phones), the two aspects the model's prints are rendered at. It sizes
   from its column alone: site.css .stage keeps a 70svh floor for other stages, which (before house.js loads, or with it
   blocked) widened this sheet past its column and jumped its height on load (jury round 5). */
.repairs .xray .stage { min-height: 0; aspect-ratio: 2 / 3; }
@media (min-width: 768px) { .repairs .xray .stage { aspect-ratio: 2.35 / 1; } }
/* the fail-safe (no house.js): the film is still a framed print on the sheet (house.js's base styles only add the
   same), and the four calls read as a list */
.repairs .xray .xr-frame { position: absolute; margin: 0; overflow: hidden; left: 5%; top: 13%; height: 70%; aspect-ratio: 9 / 16; background: #E8E8E5; }
.repairs .xr-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .repairs .xr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; } }
.repairs .xr-list > li { border-bottom: 1px solid var(--line); }
.repairs .xr-list > li:not(:has(.xr-list__btn)) { padding: 14px 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
/* (the sheet is always the light studio grey on Home, with or without house.js: its hairline and the example tag stay light, and the
   film's pause waits for film.js to give it its icon) */
.repairs .xray .xray__stage { border-color: #E3E2DF; }
.repairs .xray .xray__badge { background: rgba(245, 245, 243, .94); color: #45433F; border-color: #E3E2DF; box-shadow: none; }
.repairs .xray .xray__badge::before { background: #2852E5; }
.repairs .xray .xr-film__pause:empty { display: none; }
/* the "Representative example" tag: top left on the sheet, above the film print, so the model's close-ups never pass
   under it */
.repairs .xray .xray__badge { left: 12px; right: auto; top: 12px; }
@media (max-width: 767px) {
  /* phones: a 2:3 sheet laid out like a page. Top left, the fist-bump film as a print 38% of the sheet wide (big enough
     to read); top right, the example tag and the colour key (the legend, moved onto the sheet); the model takes the
     full width below them (house.js BOX.tall) and the controls sit under the model. While live, only the toured or
     open hotspot shows its label (the list below names all four). */
  .repairs .xray .stage { aspect-ratio: 2 / 3; }
  .repairs .xray .xr-frame { left: 4.5%; top: 3%; width: 38%; height: auto; }
  .repairs .xray .xray__badge { left: auto; right: 10px; top: 10px; max-width: calc(100% - 38% - 4.5% - 28px); min-height: 26px; padding: 4px 8px; font-size: 12px; }
  .repairs .xray .xr-legend { position: absolute; z-index: 3; top: 62px; right: 14px; flex-direction: column; align-items: flex-start; gap: 9px; margin: 0; font-size: 11px; }
  .repairs .xray .stage.is-live .xr-hot:not(.is-touring):not(.is-active) .xr-hot__label { opacity: 0; }
}
/* The model's prints (poster, T1 scene, T0 still): one sprite of real WebGL frames at the rest pose
   (assets/renders/house-teaser-paper, 2000 x 3052; re-rendered 2026-09-29 from the realistic model, and again on
   2026-09-30 on the studio grey #F5F5F3 for the white site, same framing): the solid house and
   the glass x-ray model for the 2.35:1 sheet
   (2000 x 851 each, stacked) and for the 2:3 phone sheet (900 x 1350 each, side by side below). Each print fills the
   sheet, which has the same aspect, so house.js lands the hotspot buttons on them 1:1. */
.xray .xr-print { position: absolute; inset: 0; background-color: #F5F5F3; background-image: url("../../assets/renders/house-teaser-paper.webp"); /* (jury round 4: the lateral ends at the plinth's edge, as live) */
  background-repeat: no-repeat; background-size: 100% 358.637%; background-position: 0 0; }
.xray .xr-print--xray { background-position: 0 38.664%; }
@media (max-width: 767px) {
  .xray .xr-print { background-size: 222.222% 226.074%; background-position: 0 100%; }
  .xray .xr-print--xray { background-position: 81.818% 100%; }
}
/* T1 (no WebGL): the porcelain print pushes in a touch, then a soft blue scan wipes the frosted x-ray print across it */
.xray .xr-t1--print { background: #F5F5F3; }
.xray .xr-t1--print.is-in .xr-t1__a { animation: xr-push 5.5s var(--ease-out) both; }
.xray .xr-t1--print.is-in .xr-t1__b { animation: xr-sweep 2.4s cubic-bezier(.65, 0, .35, 1) .9s forwards; }
.xray .xr-t1--print.is-in .xr-t1__scan { animation: xr-scan 2.4s cubic-bezier(.65, 0, .35, 1) .9s forwards; }
@keyframes xr-push { from { transform: scale(1.035); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .xray .xr-t1--print .xr-t1__a, .xray .xr-t1--print .xr-t1__b, .xray .xr-t1--print .xr-t1__scan { animation: none !important; } .xray .xr-t1--print .xr-t1__b { clip-path: none; } }
/* the studio-grey sheet the model sits on (house.js clears the WebGL region to the same #F5F5F3); a hairline, no box */
.xray__stage[data-stage] { background: #F5F5F3; }
.repairs .xray.xr--paper .xray__stage { border-color: color-mix(in srgb, #DCDBD7 80%, transparent); }
/* hotspots on the model: a blue enamel pin with a light ring, the label a small frosted chip with a hairline */
.repairs .xr--paper .xr-hot__label { padding: 5px 9px 4px; font-size: 11px; letter-spacing: .16em; color: #151311; background: rgba(250, 250, 249, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(21, 19, 17, .1), 0 8px 18px -12px rgba(21, 19, 17, .45); }
.repairs .xr--paper .xr-hot.is-touring .xr-hot__label, .repairs .xr--paper .xr-hot.is-active .xr-hot__label { color: #fff; background: #2852E5; box-shadow: 0 10px 22px -12px rgba(40, 82, 229, .8); }
.xray .xr-hot.is-touring::before { background: #151311; transform: scale(1.2); box-shadow: 0 0 0 3px #F5F5F3, 0 0 0 7px rgba(40, 82, 229, .3); }
.xray .xr-hot.is-touring::after { border-color: #2852E5; }
.xray .xr-hot.is-touring .xr-hot__label { opacity: 1; }
.xray .xr-hots.is-pins-all .xr-hot:not(.is-active) .xr-hot__label { opacity: 0; } /* house.js: a 320px close-up with no clean spot */
/* a chip stepped a row off its pin keeps a hairline leader to it (house.js is-below / is-above) */
.repairs .xr--paper .xr-hot__label::before { border-color: rgba(21, 19, 17, .34); }
.repairs .xr--paper .xr-hot.is-touring .xr-hot__label::before, .repairs .xr--paper .xr-hot.is-active .xr-hot__label::before { border-color: #2852E5; }
/* phones: during a close-up only one system shows and its chip names it, so the colour key steps aside and the model
   may rise beside the film print (house.js frameShots) */
@media (max-width: 767px) { .repairs .xray.xr-closeup .xr-legend { opacity: 0; } }
/* site.css (layered) parks the HVAC label on the left, but house.js's unlayered base keeps left:34px, so the chip
   collapsed; on Home every label sits right of its pin unless house.js flips it at the stage edge */
.repairs .xray .xr-hot[data-hotspot="hvac"]:not(.is-flip) .xr-hot__label { left: 34px; right: auto; }
/* controls: quiet frosted pills on the sheet */
.repairs .xr--paper .stage__replay, .repairs .xr--paper .xr-turn__btn { min-height: 40px; font-size: 12px; letter-spacing: .04em; color: #151311; background: rgba(250, 250, 249, .8); border-color: rgba(21, 19, 17, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.repairs .xr--paper .xr-turn__btn { width: 40px; height: 40px; }
.repairs .xr--paper .stage__replay:hover, .repairs .xr--paper .xr-turn__btn:hover { border-color: #151311; }
.xray .xr-list li { transition: background-color .5s, box-shadow .5s; }
.xray .xr-list li.is-lit { background: linear-gradient(90deg, color-mix(in srgb, var(--blue-fill) 9%, transparent), transparent 85%); box-shadow: inset 2px 0 0 var(--blue-fill); }
.xray .xr-list li.is-lit .xr-list__btn { padding-left: 12px; }
.xray .xr-list__btn { transition: padding-left .5s var(--ease-out); }
/* the sewer-scope fist-bump clip: a framed print on the sheet (hairline in his blue, a soft neutral shadow) */
.repairs .xr-frame { z-index: 3; box-shadow: 0 0 0 1px #2852E5, 0 26px 44px -24px rgba(21, 19, 17, .5), 0 4px 10px -4px rgba(21, 19, 17, .22); }
.repairs .xr-film__film { position: absolute; inset: 0; }
.repairs .xr-film__film .film__video, .repairs .xr-film__film .film__poster img { object-position: 50% 40%; }
/* its pause: a small frosted square in the top corner (never a big grey block over the print); with a fine pointer it
   waits for hover or focus, or shows once paused, like the path cards. The caption stays screen-reader only. */
.repairs .xray .xr-film__pause { top: 6px; right: 6px; bottom: auto; width: 30px; height: 30px; background: rgba(21, 19, 17, .38); border-color: rgba(255, 255, 255, .45); }
.repairs .xray .xr-film__pause svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .repairs .xray .xr-film__pause { opacity: 0; transition: opacity .3s var(--ease-out); }
  .repairs .xray .xr-film:hover .xr-film__pause, .repairs .xray .xr-film__pause:focus-visible, .repairs .xray .xr-film__film[data-film-state="paused"] .xr-film__pause { opacity: 1; }
}
@media (max-width: 767px) {
  .repairs .xray .xr-film__pause { top: 4px; right: 4px; width: 26px; height: 26px; }
  .repairs .xray .xr-film__pause svg { width: 11px; height: 11px; }
}

/* ---- the pinned beat (home.js initRepairs arms it at T1/T2; T0 is the static print above with the four calls and the
   lenders' words under it). The sheet sticks; the scroll drives the scan and the stops (house.js driven). Desktop: the
   heading row, then the 2.35:1 sheet as large as the screen allows, the panel on the sheet's left 25% (where the film
   print stood) with my call for each stop, then the lenders' words (the sewer-scope clip rides with the sewer-line
   call). Phones: the heading scrolls away (a negative sticky top), the 2:3 sheet fills the width and the call lands on
   a strip under it. The four calls fold into the panel and the model's chips. */
.repairs__track { position: relative; }
/* one column in every mode: site.css names grid areas (head / xray / quote / foot) this page no longer uses */
.home .repairs__grid > .repairs__head, .home .repairs__grid > .xray { grid-area: auto; grid-column: 1 / -1; }
.repairs.is-armed { overflow: visible; overflow: clip; padding-top: 0; padding-bottom: clamp(40px, 4vw, 64px); } /* clip (or visible where clip is unknown), never hidden: hidden would trap the sticky sheet */
.repairs.is-armed .repairs__track { height: 320vh; height: 320svh; } /* paced (js/core/pace.js): 0.4 screen per beat weight (5.5) */
.repairs.is-armed .repairs__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h, 64px) + 10px) 0 16px; }
/* a sticky box is its own stacking context: it sits above the page's WebGL canvas (z-index 2, like the map's), and the
   live sheet is transparent so the canvas (which clears the same studio grey) shows through under the panel and the chips */
.repairs.is-armed .repairs__sticky { z-index: 2; }
.repairs.is-armed .xray__stage.is-live { background: transparent !important; }
/* T1 (the print): the push-in toward each system (home.js pushIn); the pins ride with the print */
.repairs.is-armed .xr-t1, .repairs.is-armed .xray__stage:not(.is-live) .xr-hots { transition: transform 1.3s var(--ease-cine, cubic-bezier(.7, 0, .2, 1)); }
@media (prefers-reduced-motion: reduce) { .repairs.is-armed .xr-t1, .repairs.is-armed .xr-hots { transition: none; } }
.repairs.is-armed .repairs__grid { row-gap: clamp(12px, 2vh, 24px); grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
.repairs.is-armed .repairs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
.repairs.is-armed .repairs__head .caps { grid-column: 1 / -1; }
.repairs.is-armed .repairs__head .cine-h2 { margin-top: 10px; font-size: clamp(2.4rem, min(4.4vw, 7.4vh), 4.4rem); }
/* his example under the heading (Ashton, 2026-09-30): a readable lede, the two key moves in ink */
.repairs__note { max-width: 31ch; margin: 12px 0 0; font-size: clamp(1rem, 1.2vw, 1.1875rem); font-weight: 400; line-height: 1.42; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.repairs__note strong { font-weight: 600; color: var(--ink); }
.repairs.is-armed .repairs__note { margin: 0 0 .55em; text-align: left; }
@media (max-width: 767px) {
  .repairs.is-armed .repairs__head { grid-template-columns: minmax(0, 1fr); }
  .repairs__note, .repairs.is-armed .repairs__note { max-width: 36ch; margin: 10px 0 0; }
}
.repairs.is-armed .xray .stage { width: min(100%, calc((100svh - var(--header-h, 64px) - 190px) * 2.35)); margin-inline: auto; }
.repairs.is-armed .xr-list, .repairs.is-armed .xr-legend, .repairs.is-armed .stage__controls, .repairs.is-armed .xr-leader { display: none !important; }
/* the sewer-scope clip on the sheet (phones): only during the plumbing beat, where it rises in and plays on a loop
   (home.js syncFilm); every other beat it steps aside (jury round 6: it sat there paused and read as a still) */
.repairs.is-armed .stage__overlay .xr-frame { opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0) scale(.96); clip-path: inset(0 0 100% 0);
  transition: opacity .45s var(--ease-out), transform .8s var(--ease-out), clip-path .8s var(--ease-out), visibility 0s linear .8s; }
.repairs.is-armed[data-xr-stop="sewer"] .stage__overlay .xr-frame { opacity: 1; visibility: visible; transform: none; clip-path: inset(0); transition-delay: .1s, .1s, .1s, 0s; }
@media (prefers-reduced-motion: reduce) { .repairs.is-armed .stage__overlay .xr-frame { transition: none; } }
.repairs.is-armed .xray__badge { left: auto; right: 12px; }
/* Skip (a pin taller than 150vh gets one, guide 11 S12): a bone pill, bottom right while the sheet holds */
.repairs__skip { display: none; }
.repairs.is-armed .repairs__skip { display: inline-flex; position: absolute; z-index: 5; right: 12px; bottom: 12px; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font-size: 12px; letter-spacing: .06em; text-decoration: none; color: var(--ink); border: 1px solid rgba(21, 19, 17, .24); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.repairs.is-armed .repairs__skip:hover { border-color: currentColor; }
@media (max-width: 767px) { .repairs.is-armed .repairs__skip { right: 8px; bottom: 8px; min-height: 34px; padding: 0 12px; } }
.repairs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: clamp(28px, 4vw, 56px); }
.repairs.is-armed .repairs__foot { padding-top: clamp(18px, 3vw, 40px); }
.repairs__foot .repairs__lines { color: var(--ink); }
.repairs__foot .repairs__lines span + span { color: var(--blue-text); }

/* the panel. Unarmed (T0, the fail-safe): only the lenders' words, under the four calls (home.js builds the slides but
   they stay hidden, so the calls are never listed twice). Armed: one call at a time on the sheet, then their words. */
.xr-results { display: grid; gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.xr-result__big em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.xr-results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.repairs:not(.is-armed) .xr-results__list { display: none; }
.xr-result { display: grid; gap: 8px; align-content: start; }
.xr-result__big { font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.02; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.xr-result__line { font-size: 1rem; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.xr-results__quote, .xr-result__quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.35; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
/* armed: the panel. The slides share one grid cell; the one on (.is-on) rises from a mask, the others wait below it */
.repairs.is-armed .xr-results { margin: 0; padding: 0; border: 0; gap: 0; pointer-events: none; }
.repairs.is-armed .xr-results.theme-light { background: transparent; } /* light tokens for the text only; the sheet shows through */
.repairs.is-armed .xr-results__quote { display: none; } /* armed, their words are the rest slide */
.repairs.is-armed .xr-results__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.repairs.is-armed .xr-result { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 26px, 0); clip-path: inset(0 0 100% 0);
  transition: opacity .5s var(--ease-out), transform .9s var(--ease-out), clip-path .9s var(--ease-out), visibility 0s linear .9s; }
.repairs.is-armed .xr-result.is-on { opacity: 1; visibility: visible; transform: none; clip-path: inset(-10% -10% -30% -10%); transition-delay: .12s, .12s, .12s, 0s; }
.repairs.is-armed .xr-result__big { font-size: clamp(2.2rem, min(3.3vw, 6vh), 3.4rem); }
.repairs.is-armed .xr-result__quote { font-size: clamp(1rem, min(1.95vw, 3.6vh), 1.9rem); line-height: 1.28; max-width: 20ch; } /* sized with the sheet: it fits the panel from a portrait tablet (16px) up */
.xr-results__rail { list-style: none; display: flex; gap: 6px; margin: 0 0 16px; padding: 0; }
.xr-results__rail li { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2852E5 calc(var(--rk, 0) * 100%), rgba(21, 19, 17, .14) 0); }
.xr-results__k { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #2852E5; transition: opacity .4s var(--ease-out); }
.xr-results[data-stop="intro"] .xr-results__k, .xr-results[data-stop="rest"] .xr-results__k { opacity: 0; }
/* the sewer-scope clip rides with the sewer-line call (desktop) */
.repairs.is-armed .xr-result .xr-frame { position: relative; left: auto; top: auto; bottom: auto; width: min(46%, 150px); height: auto; aspect-ratio: 9 / 16; margin-top: 14px; }
@media (min-width: 768px) {
  .repairs.is-armed .xr-results { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: 25%; display: flex; flex-direction: column; padding: clamp(24px, 3.2vh, 40px) 0 clamp(20px, 3vh, 34px) clamp(22px, 2.3vw, 34px); }
  /* a soft studio-grey scrim behind the panel, in the close-ups only: there the realistic model (brick, shingles, lawn)
     passes under the result, and the words stay legible (the intro and the rest beat keep the bare sheet) */
  .repairs.is-armed .xr-results::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 150%; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease-out);
    background: linear-gradient(90deg, rgba(245, 245, 243, .94) 0%, rgba(245, 245, 243, .86) 50%, rgba(245, 245, 243, .5) 76%, rgba(245, 245, 243, 0) 100%); }
  .repairs.is-armed .xr-results:not([data-stop="intro"]):not([data-stop="rest"])::before { opacity: 1; }
}
@media (max-width: 767px) {
  /* phones: the heading scrolls away first (a negative sticky top: --rh-head is the heading's height, home.js), then
     the 2:3 sheet and the result strip under it hold the screen */
  .repairs.is-armed .repairs__track { height: calc(400vh + var(--rh-head, 150px)); height: calc(400svh + var(--rh-head, 150px)); } /* the sheet + 3 small screens of paced travel (0.5 per beat weight; the lenders' words weigh 1.25 on phones) */
  .repairs.is-armed .repairs__sticky { top: calc(-1 * var(--rh-head, 150px)); height: calc(100svh + var(--rh-head, 150px)); justify-content: flex-start; padding: 12px 0 calc(12px + var(--bar-space, 0px)); }
  .repairs.is-armed .repairs__head { grid-template-columns: minmax(0, 1fr); }
  .repairs.is-armed .repairs__head .cine-h2 { font-size: clamp(2.3rem, 10vw, 2.8rem); }
  .repairs.is-armed .repairs__note { text-align: left; margin: 2px 0 0; }
  .repairs.is-armed .xray .stage { width: min(100%, calc((100svh - var(--header-h, 56px) - var(--bar-space, 64px) - 200px) / 1.5)); }
  .repairs.is-armed .xr-results { position: relative; min-height: 150px; margin-top: 12px; }
  .repairs.is-armed .xr-results__rail { margin-bottom: 10px; }
  .repairs.is-armed .xr-results__k { margin-bottom: 6px; }
  .repairs.is-armed .xr-result { row-gap: 4px; }
  .repairs.is-armed .xr-result__big { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .repairs.is-armed .xr-result__line { font-size: .95rem; max-width: none; }
  /* the lenders' words, the rest stop's slide: the full width of the strip */
  .repairs.is-armed .xr-result__quote { max-width: none; font-size: clamp(1.05rem, 4.6vw, 1.25rem); line-height: 1.34; }
  @media (max-width: 359px) { .repairs.is-armed .xr-result__quote { font-size: 1rem; } }
  .repairs__foot { padding-top: 22px; }
  .repairs.is-armed .repairs__foot { position: relative; z-index: 3; margin-top: calc(-1 * var(--rh-gap, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .repairs.is-armed .xr-result { transition: none; } }

/* ------------------------------------------------------------------ 6 · ride along: his day, big, as a documentary cut
   (home.js initRide; jury round 6 retired the phone mockup; round 7 made every transition face-safe). Unarmed (T0, the
   pause, the fail-safe): the heading and four still posters in a row (2 x 2 on phones). Armed: a tall track with a
   sticky full-bleed stage on ink. 'tri' (desktop, landscape tablets): three clips side by side edge to edge with
   hairline seams (the fourth dissolves in over the middle one); 'solo' (phones, portrait tablets): one clip fills the
   screen at a time. home.js frames each cut on its faces (--ox/--oy object-position, --tox/--toy the push-in's
   origin), and sets the arched doorway's clip-path (the first clip only), each cut's opacity, --dim (the ink it lights
   out of, or rests in), --s (push-in) and --tx/--ty (the doorway following his face, and the drift). No wipes. */
.ride { position: relative; }
.ride__track { position: relative; }
.ride__sticky { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 120px); }
.ride__head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(30px, 4vw, 52px); }
.ride__head .cine-h2 { font-size: clamp(2.5rem, 5vw, 4.75rem); }
.ride__lede { max-width: 30ch; font-size: clamp(1.0625rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.ride__cuts { list-style: none; margin: 0; padding: 0 max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.ride__cut { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #1B1A18; }
.ride__cut picture, .ride__cut img, .ride__cut video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); }
.ride__cut video { opacity: 0; transition: opacity .5s var(--ease-out); }
.ride__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(22px, 3vw, 36px); padding-inline: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); }
.ride__more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.ride__more .icon { transition: transform .4s var(--ease-out); }
.ride__more:hover .icon { transform: translateX(3px); }
.ride__ctl { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.ride__pause, .ride__skip { display: none; }
@media (max-width: 767px) { .ride__cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* armed: the pinned full-bleed stage */
.ride.is-armed .ride__track { height: 300vh; height: 300svh; } /* paced (js/core/pace.js): five cuts, 0.4 screen each */
.ride.is-armed .ride__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; background: #0D0C0B; }
.ride.is-armed .ride__cuts { position: absolute; inset: 0; display: block; padding: 0; }
.ride.is-armed .ride__cut { position: absolute; top: 0; bottom: 0; left: 0; right: 0; aspect-ratio: auto; background: #0D0C0B; opacity: 0; }
.ride.is-armed .ride__cut > picture, .ride.is-armed .ride__cut > video { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--s, 1)); transform-origin: var(--tox, 50%) var(--toy, 45%); will-change: transform; }
.ride.is-armed .ride__cut video.is-on { opacity: 1; }
/* the ink a panel lights up out of (and dims back into while it rests): a flat overlay, never an edge across a face */
.ride.is-armed .ride__cut::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #0D0C0B; opacity: var(--dim, 0); }
/* the split screen: thirds with hairline ink seams; the fourth clip dissolves in over the middle one */
.ride.is-armed[data-layout="tri"] [data-cut="sign"] { right: auto; width: calc(100% / 3 - 1px); }
.ride.is-armed[data-layout="tri"] [data-cut="walk"], .ride.is-armed[data-layout="tri"] [data-cut="gift"] { left: calc(100% / 3 + 1px); right: calc(100% / 3 + 1px); }
.ride.is-armed[data-layout="tri"] [data-cut="broker"] { left: calc(200% / 3 + 1px); }
.ride.is-armed [data-cut="gift"] { z-index: 1; }
.ride.is-armed[data-layout="solo"] [data-cut="gift"] { display: none; }
.ride.is-armed[data-layout="solo"] [data-cut="sign"] { z-index: 1; }
.ride.is-armed[data-layout="solo"] [data-cut="broker"] { z-index: 2; }
/* the heading holds the left third (tri) or the top of the screen (solo) on ink while the first clip opens */
.ride.is-armed .ride__head { position: absolute; z-index: 3; margin: 0; max-width: none; will-change: transform, opacity; }
.ride.is-armed[data-layout="tri"] .ride__head { left: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); top: 50%; width: calc(100% / 3 - max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))) - 28px); padding: 0; translate: 0 -50%; }
.ride.is-armed[data-layout="tri"] .ride__head .cine-h2 { font-size: clamp(3rem, min(5vw, 10.5vh), 6.25rem); line-height: .92; }
.ride.is-armed[data-layout="solo"] .ride__head { left: 0; right: 0; top: calc(var(--header-h, 56px) + clamp(14px, 3svh, 28px)); gap: 8px; }
.ride.is-armed[data-layout="solo"] .ride__head .cine-h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.ride.is-armed[data-layout="solo"] .ride__lede { font-size: 1rem; max-width: 26ch; }
/* the controls sit on the footage's foot, over a soft shade (--foot: 0 on ink, 1 once the footage fills the stage) */
.ride.is-armed .ride__sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 3; pointer-events: none; opacity: var(--foot, 0);
  background: linear-gradient(to top, rgba(10, 9, 8, .34), rgba(10, 9, 8, 0)); }
.ride.is-armed .ride__bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(20px, 4svh, 36px); margin: 0; }
.ride.is-armed .ride__more { padding: 0 16px; border-radius: 999px; font-size: 11.5px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .36); background: rgba(18, 17, 16, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ride.is-armed .ride__more:hover { border-color: #FFFFFF; }
.ride.is-armed .ride__pause { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #FFFFFF;
  background: rgba(18, 17, 16, .42); border: 1px solid rgba(255, 255, 255, .36); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ride.is-armed .ride__pause[hidden] { display: none; }
.ride.is-armed .ride__skip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; letter-spacing: .06em; text-decoration: none; color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .36); background: rgba(18, 17, 16, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ride.is-armed .ride__skip:hover { border-color: #FFFFFF; }
@media (max-width: 767px) {
  .ride.is-armed .ride__track { height: 320vh; height: 320svh; } /* phones: four cuts, 0.55 small screen each */
  .ride.is-armed .ride__bar { bottom: calc(14px + var(--bar-space, 0px)); }
  .ride.is-armed .ride__more { min-height: 40px; padding: 0 14px; font-size: 10.5px; letter-spacing: .16em; }
  .ride.is-armed .ride__pause { width: 40px; height: 40px; }
  .ride.is-armed .ride__skip { min-height: 40px; padding: 0 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ride__cut video { transition: none; } }

/* ------------------------------------------------------------------ 9 · paths: five doors in one row (one screen)
   Desktop (900+): the doors share the row; the one in the light (home.js initPaths: .is-on, --pk 0..1 for the light
   passing) opens wider, brightens and plays or pushes in. Arched tops: the door motif of the hero and the ending.
   Phones: a swipe rail of five doors (it drifts with the scroll until touched). T0: still doors, no light. */
.home-paths { padding-block: clamp(72px, 8vw, 120px) clamp(64px, 7vw, 104px); }
.home-paths__h { margin-bottom: clamp(26px, 3.4vw, 48px); }
.paths { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.1vw, 16px); }
.path { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow .95s var(--ease-cine, cubic-bezier(.7, 0, .2, 1)); }
.path__link { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.path__link:focus-visible { outline: none; }
.path__link:focus-visible .path__media { outline: 3px solid var(--ring, var(--blue-fill)); outline-offset: 3px; }
.path__media { position: relative; display: block; height: clamp(300px, 54vh, 540px); overflow: hidden; background: #D9D1C4;
  border-radius: 50% 50% 14px 14px / 110px 110px 14px 14px; box-shadow: 0 40px 70px -46px rgba(21, 19, 17, .55); isolation: isolate; }
.path__media picture, .path__media img, .path__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.path__media img { transform: scale(1.02); transition: transform 7s cubic-bezier(.2, .6, .2, 1), filter .9s var(--ease-out); filter: saturate(calc(.78 + .22 * var(--pk, 1))) brightness(calc(.93 + .07 * var(--pk, 1))); }
.path__media video { opacity: 0; transition: opacity .6s var(--ease-out); }
.path.is-on .path__media video.is-playing { opacity: 1; }
.path.is-on .path__media img { transform: scale(1.1); }
/* the light on the door: a soft sheen crosses as it arrives */
.path__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(var(--pk, 0) * .9);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, 0) 64%); }
.path__text { display: grid; gap: 6px; padding-inline: 4px; }
.path__k { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.path__t { font-weight: 300; font-size: clamp(1.35rem, 1.9vw, 2rem); line-height: 1.02; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.path__t em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.path__l { font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.path.is-on .path__k { color: var(--blue-text); }
.path:hover .path__t, .path.is-on .path__t { color: var(--ink); }
/* the Search door: a crafted phone on a soft stage */
.path__media--stage { display: grid; place-items: center; background: radial-gradient(64% 70% at 50% 56%, color-mix(in srgb, var(--paper) 72%, #fff) 0%, var(--paper) 68%, var(--paper-2) 100%); box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -46px rgba(21, 19, 17, .35); }
.path__media--stage > .search-phone { position: relative; height: 78%; width: auto; aspect-ratio: 540 / 840; transform: translate3d(0, calc((1 - var(--pk, 1)) * 18px), 0) scale(calc(.94 + .06 * var(--pk, 1))); transition: transform .9s var(--ease-out); }
@media (min-width: 900px) {
  .path.is-on { flex-grow: 2.1; }
  .path__l { opacity: calc(.35 + .65 * var(--pk, 1)); transition: opacity .6s var(--ease-out); }
}
@media (max-width: 899px) {
  /* phones and small tablets: a swipe rail of five doors */
  .paths { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; gap: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .paths::-webkit-scrollbar { display: none; }
  .path { flex: 0 0 min(62vw, 300px); }
  .path__media { height: auto; aspect-ratio: 4 / 5; border-radius: 50% 50% 12px 12px / 88px 88px 12px 12px; }
  .path__t { font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  .path__l { font-size: .875rem; }
  /* the rail fades at the screen's edges, so a door cut by the edge reads as the next one waiting */
  .paths { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) + 6px), #000 calc(100% - var(--gutter) - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) + 6px), #000 calc(100% - var(--gutter) - 22px), transparent 100%); }
  /* a door cut by the screen's edge keeps its words back (home.js .is-cut, at every tier), so a title is never sliced
     by the edge (round 7); a swipe snaps a door to the centre, whole (home.js glides the rail door to door with the
     page's scroll until it is touched: .is-drift; after a touch the rail is the visitor's for good) */
  .paths { scroll-snap-type: x mandatory; }
  .paths.is-drift { scroll-snap-type: none; }
  .path { scroll-snap-align: center; }
  .path__text { transition: opacity .35s var(--ease-out); }
  .path.is-cut .path__text { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .path, .path__media img, .path__media--stage > .search-phone { transition: none; } .path__media img { transform: none; } }
:root[data-motion="paused"] .path__media img { transform: none; }

/* the Search door's crafted phone (one inline SVG: a porcelain map, the search bar, pins dropping in, then the new-match
   alert; home.js arms it and runs it when its door takes the light). A pearl body with a hairline bezel and a glass sheen. */
.search-phone { position: relative; display: block; border-radius: 13% / 8.4%; background: linear-gradient(150deg, #FFFFFF 0%, #EEEDEA 48%, #F8F7F4 100%);
  box-shadow: 0 0 0 1px rgba(21, 19, 17, .14), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 2px rgba(255, 255, 255, .55), 0 34px 60px -36px rgba(21, 19, 17, .55), 0 6px 14px -8px rgba(21, 19, 17, .2); }
.search-phone::after { content: ""; position: absolute; inset: 3.4%; border-radius: 10% / 6.4%; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 34%); box-shadow: inset 0 0 0 1px rgba(21, 19, 17, .1); }
.search-phone__screen { position: absolute; inset: 3.4%; display: block; width: auto; height: auto; border-radius: 10% / 6.4%; }
.search-phone .sp-lake path { fill: #E1E5E7; stroke: rgba(42, 39, 35, .22); stroke-width: .6; }
.search-phone .sp-lake .sp-ct { fill: none; stroke: rgba(42, 39, 35, .1); }
.search-phone .sp-lots rect { fill: rgba(255, 255, 255, .5); stroke: rgba(42, 46, 54, .14); stroke-width: .6; }
.search-phone .sp-roads path { fill: none; stroke: #1D2026; stroke-opacity: .16; stroke-width: 1.1; stroke-linecap: round; }
.search-phone .sp-roads--major path { stroke-opacity: .4; stroke-width: 2.1; }
.search-phone .sp-road-blue { fill: none; stroke: #2852E5; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 26 34 100; }
.search-phone .sp-sh { fill: #24221F; fill-opacity: .16; }
.search-phone .sp-pin { fill: #FBFAF8; stroke: rgba(42, 46, 54, .42); stroke-width: .9; }
.search-phone .sp-pin__in { fill: #9AA0A9; }
.search-phone .sp-new__disc { fill: #2852E5; stroke: #FFFFFF; stroke-width: 2.2; }
.search-phone .sp-new__hi { fill: #FFFFFF; }
.search-phone .sp-pulse { fill: none; stroke: #2852E5; stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.search-phone .sp-bar, .search-phone .sp-card { fill: rgba(255, 255, 255, .92); stroke: rgba(21, 19, 17, .1); stroke-width: .8; filter: drop-shadow(0 5px 7px rgba(21, 19, 17, .12)); }
.search-phone .sp-glass { fill: none; stroke: #4B453D; stroke-width: 1.6; stroke-linecap: round; }
.search-phone .sp-chip { fill: rgba(255, 255, 255, .78); stroke: rgba(21, 19, 17, .16); stroke-width: .8; }
.search-phone .sp-chip--on { fill: #2852E5; stroke: #2852E5; }
.search-phone .sp-t { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: #2A2723; letter-spacing: -.01em; }
.search-phone .sp-t--chip { font-size: 11px; fill: #4B453D; }
.search-phone .sp-t--on { fill: #FFFFFF; }
.search-phone .sp-t--b { font-size: 14.5px; font-weight: 600; fill: #151311; }
.search-phone .sp-t--s { font-size: 11px; font-weight: 400; fill: #6A6257; }
.search-phone .sp-alert__ic { fill: #E8EDFC; }
.search-phone .sp-alert__home { fill: none; stroke: #2852E5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.search-phone .sp-drop { transition: opacity .5s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 120ms + 250ms); }
.search-phone .sp-alert { transition: opacity .7s var(--ease-out), transform 1s var(--ease-out); transition-delay: 1.35s; }
.search-phone.is-armed:not(.is-in) .sp-drop { opacity: 0; transform: translateY(-18px); transition: none; }
.search-phone.is-armed:not(.is-in) .sp-alert { opacity: 0; transform: translateY(22px); transition: none; }
.search-phone.is-in .sp-pulse { animation: sp-pulse 2.4s var(--ease-out) 1.2s 3; }
@keyframes sp-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
:root[data-motion="paused"] .search-phone .sp-pulse { animation: none; }

/* ------------------------------------------------------------------ 10 · what's your home worth (bone, before the ending)
   home.js initWorth: "Hand-priced by me, not a website." fills word by word (--k per word), a hand-drawn blue rule draws
   under the heading (--wr), the request card rises into place (--wc). No vars (T0, the fail-safe): all simply there. */
.home-worth { padding-block: clamp(56px, 6vw, 96px) clamp(60px, 6.5vw, 104px); border-top: 1px solid var(--line); }
.home-worth__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .home-worth__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(48px, 6vw, 120px); } }
.home-worth__copy { display: grid; gap: clamp(14px, 2vw, 22px); justify-items: start; }
.home .home-worth__k { color: var(--blue-text); letter-spacing: .26em; }
.home-worth__h { max-width: 10ch; font-size: clamp(2.75rem, 5.6vw, 5.5rem); }
.home-worth__rule { display: block; width: min(62%, 300px); height: 12px; margin-top: -4px; overflow: visible; }
.home-worth__rule path { fill: none; stroke: var(--blue-fill); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--wr, 1)); vector-effect: non-scaling-stroke; }
.home-worth__lede { max-width: 26ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.28; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.home-worth__lede .ep-w { opacity: calc(.16 + .84 * var(--k, 1)); }
.home-worth__card { opacity: calc(.2 + .8 * var(--wc, 1)); transform: translate3d(0, calc((1 - var(--wc, 1)) * 64px), 0); will-change: transform; }
.home-worth .hv { box-shadow: 0 50px 90px -60px rgba(21, 19, 17, .55); background: color-mix(in srgb, var(--paper) 60%, #FFFFFF); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-worth .hv { background: var(--paper-2); box-shadow: 0 50px 90px -60px rgba(0, 0, 0, .8); } }
:root[data-theme="dark"] .home-worth .hv { background: var(--paper-2); box-shadow: 0 50px 90px -60px rgba(0, 0, 0, .8); }
.home-worth .hv__house { width: clamp(120px, 30%, 180px); }
@media (max-width: 767px) { .home-worth .hv__top { align-items: center; } .home-worth .hv__house { width: 116px; } }
@media (prefers-reduced-motion: reduce) { .home-worth__card { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ 11 · back to your door: the ending (the shared text-me)
   css/site.css .textme is the component (feedback #32); this block makes Home's door a REAL lit doorway (round 7:
   "a headshot in an arch" with a bronze rim). The door opens onto light: a bright warm-WHITE field (the interior,
   .home-end__glow) fills the doorway, and his photo (assets/photos/home-door-light, the headshot relit offline so its
   studio wall IS that light, with a soft wrap of it round his hair and shoulders) stands in it. Everything keys off
   --door (home.js initFinal scrubs it 0..1 as the doorway climbs the screen; T0 and the fail-safe hold it at 1):
   the ink leaf swings open on its left hinge into the room (0..100 deg) and light pours through the widening gap;
   only once the leaf has swung past his face (about 70 deg, where it covers the hinge-side quarter at most) does he
   appear in the light (--him), so the leaf never covers half his face. Light spills from the threshold across the
   floor toward the visitor, and a halo of the same light blooms on the ink round the frame. The light is warm WHITE
   only (#FFF8F0 family, under 10% saturation over the ink); no #FFC98A, gold or bronze anywhere in this chapter (the
   hue test: under 0.5% of pixels at hue 25-55 deg with saturation over .35). */
.home-end { --door: 1; --him: clamp(0, calc((var(--door) - .7) / .15), 1); }
.home-end .textme__reveal { clip-path: none; z-index: 1; border-radius: inherit; overflow: hidden; opacity: var(--him); }
.home-end .textme__reveal::after { background: linear-gradient(to bottom, rgba(18, 17, 16, 0) 72%, rgba(18, 17, 16, .32)); }
.home-end .textme__photo { object-position: 50% 30%; transform: translate3d(0, calc((1 - var(--him)) * 2.5%), 0) scale(calc(1.03 + (1 - var(--him)) * .04)); transform-origin: 50% 40%; }
.home-end .textme__door { overflow: hidden; background: #0B0A09; perspective: 900px; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 250, 244, calc(.16 + .34 * var(--door))),
              0 0 42px 2px rgba(255, 248, 240, calc(var(--door) * .34)),
              0 0 140px 24px rgba(255, 248, 240, calc(var(--door) * .13)),
              0 60px 120px -50px rgba(0, 0, 0, .9); }
.home-end .textme__door::after { z-index: 3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.14 + .3 * var(--door))), inset 0 0 36px -6px rgba(255, 250, 244, calc(var(--door) * .55)); }
/* the interior: light, brightest behind his head (the same field his relit photo carries, so he steps into it) */
.home-end__glow { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: clamp(0, calc(var(--door) * 8), 1); /* on as the latch gives */
  background: radial-gradient(62% 75% at 46% 30%, #FFFBF5 0%, #FBF5EE 45%, #F3EBE1 100%); }
/* the door leaf: ink lacquer with two raised panels, hinged on the left; it swings into the room, its latch edge catching
   the light as the gap opens */
.home-end__leaf { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; transform-origin: 0 50%;
  transform: rotateY(calc(var(--door) * 100deg)); backface-visibility: hidden;
  background: linear-gradient(90deg, #1C1B19 0%, #121110 55%, #0B0A09 100%);
  box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .1), inset -10px 0 22px -12px rgba(255, 250, 244, calc(.2 + var(--door) * .8));
  opacity: clamp(0, calc((1 - var(--door)) * 5), 1); }
.home-end__leaf i { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 8%; display: block;
  background: linear-gradient(#171614, #171614) 0 0 / 100% 44% no-repeat, linear-gradient(#171614, #171614) 0 100% / 100% 50% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .07); }
.home-end__leaf i::before, .home-end__leaf i::after { content: ""; position: absolute; left: 0; right: 0; border: 1px solid rgba(237, 231, 220, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.home-end__leaf i::before { top: 0; height: 44%; border-radius: 999px 999px 4px 4px / 60px 60px 4px 4px; }
.home-end__leaf i::after { bottom: 0; height: 50%; border-radius: 4px; }
/* the threshold: a bright line of light at the door's foot */
.home-end__jamb { position: absolute; z-index: 2; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; pointer-events: none; }
.home-end__jamb::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -1px; height: 3px; border-radius: 3px; opacity: var(--door);
  background: linear-gradient(90deg, rgba(255, 250, 244, 0), #FFFCF8 18%, #FFFCF8 82%, rgba(255, 250, 244, 0)); box-shadow: 0 0 18px 4px rgba(255, 248, 240, .45), 0 0 60px 10px rgba(255, 248, 240, .16); }
/* the spill: light falls out of the doorway and fans across the floor toward the visitor, brightest at the threshold
   (soft gradients only, so it never reads as a slab) */
.home-end__floor { position: absolute; z-index: -1; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; pointer-events: none; }
.home-end__floor::before { content: ""; position: absolute; left: -55%; right: -55%; top: 100%; height: 78%; opacity: var(--door); transform-origin: 50% 0; transform: scale(calc(.4 + .6 * var(--door)), calc(.55 + .45 * var(--door)));
  background: radial-gradient(34% 100% at 50% 0%, rgba(255, 248, 240, .5) 0%, rgba(255, 248, 240, .26) 32%, rgba(255, 248, 240, .09) 66%, rgba(255, 248, 240, 0) 100%);
  -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000 0 40%, transparent 100%), linear-gradient(to bottom, transparent, #000 16%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(60% 100% at 50% 0%, #000 0 40%, transparent 100%), linear-gradient(to bottom, transparent, #000 16%); mask-composite: intersect; }
.home-end__floor::after { content: ""; position: absolute; left: -12%; right: -12%; top: 94%; height: 16%; border-radius: 50%; opacity: var(--door);
  background: radial-gradient(closest-side, rgba(255, 250, 244, .42), rgba(255, 248, 240, .12) 62%, rgba(255, 248, 240, 0)); }
/* the room's light on the ink wall round the door (warm white; the shared lamp's amber is not used here) */
.home-end .textme__lamp { background: radial-gradient(closest-side, rgba(255, 248, 240, .13), rgba(255, 248, 240, .045) 42%, transparent 72%); }
.home-end .textme__lede .ep-w { opacity: calc(.28 + .72 * var(--k, 1)); }
/* the stage leaves room under the door for the light on the floor (desktop: the text card sits on it) */
@media (min-width: 1100px) { .home-end .textme__stage { padding-bottom: 10%; } }
@media (max-width: 767px) {
  .home-end .textme__stage { padding-bottom: 150px; }
  .home-end .textme__door { perspective: 600px; }
  /* phones: the text card hangs over the threshold, so the spill runs longer and wider, out past the card's foot */
  .home-end__floor::before { left: -30%; right: -30%; height: 132%; background: radial-gradient(44% 100% at 50% 0%, rgba(255, 248, 240, .52) 0%, rgba(255, 248, 240, .3) 34%, rgba(255, 248, 240, .12) 68%, rgba(255, 248, 240, 0) 100%); }
} /* (a narrower door foreshortens the same: the leaf clears his face at the same angle) */
@media (prefers-reduced-motion: reduce) { .home-end__leaf { display: none; } }

/* ------------------------------------------------------------------ the contrast rhythm: white, with hints of black
   (Ashton, 2026-09-30: "have the background be white too with some hints of black some places"). Three ink moments: the
   map's blue hour, the ride-along cinema and the final call sit on ink (#121110; .theme-dark re-points the tokens
   inside, and data-header="night" darkens the header over them), each with white on both sides. The map's morning and
   the X-ray sheet are the soft studio grey the 3D lands on (--stage-paper). The split-flap board left Home on
   2026-09-30. In dark mode the chapters go one step deeper, so they still read as moments. */
.home .ink-band { background: #121110; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home .ink-band { background: #080807; --paper: #080807; --paper-2: #151412; } }
:root[data-theme="dark"] .home .ink-band { background: #080807; --paper: #080807; --paper-2: #151412; }
.home .ink-band + .ink-band { border-top-color: rgba(237, 231, 220, .08); }
/* the chapter seams (home.js initSeams): an ink chapter rises as a rounded plate a gutter in from the edges and opens to
   full bleed; leaving, its foot rounds and draws in. clip-path only, never past the gutter. */
.home .ink-band.is-seam, .home .cmp.is-seam, .home .textme.is-seam { clip-path: inset(0 var(--seam-x, 0px) round var(--seam-rt, 0px) var(--seam-rt, 0px) var(--seam-rb, 0px) var(--seam-rb, 0px)); }
/* the receipts: a charcoal plate with a bone rule, the figures in bone, the reviews on a hairline rail */
.home-proof.ink-band { padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4.4vw, 64px); }
.home-proof.ink-band .home-proof__plate { background: #1B1A18; border-top-color: #EDE7DC; box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9); }
.home-proof.ink-band .home-proof__stats, .home-proof.ink-band .home-proof__stats li { border-color: rgba(237, 231, 220, .14); }
.home-proof.ink-band .home-rail { border-block-color: rgba(237, 231, 220, .12); }
.home-proof.ink-band .home-rail .marquee__item { border-right-color: rgba(237, 231, 220, .12); }
.home-proof.ink-band .home-rail .marquee__pause { border-left-color: rgba(237, 231, 220, .12); }
/* the receipts on bone (2026-09-29): a paper plate under an ink rule, lifted by a soft shadow; the light that walks the
   figures is a warm-white sheen raking across the paper (on ink it was a cool glow) */
.home-proof:not(.ink-band) .home-proof__plate { box-shadow: 0 44px 80px -64px rgba(21, 19, 17, .5); }
.home-proof:not(.ink-band) .home-proof__light { background: radial-gradient(34% 58% at var(--lx, 18%) var(--ly, 34%), rgba(255, 253, 249, .92) 0%, rgba(255, 253, 249, .4) 42%, rgba(255, 253, 249, 0) 72%); }
.home-proof:not(.ink-band) .home-proof__plate.is-armed [data-stat].is-lit .home-proof__n { text-shadow: none; }
/* dark mode: the plate is dark paper there, so the light goes back to the cool glow it had on ink */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-proof:not(.ink-band) .home-proof__light { background: radial-gradient(34% 58% at var(--lx, 18%) var(--ly, 34%), rgba(236, 240, 255, .12) 0%, rgba(236, 240, 255, .045) 42%, rgba(236, 240, 255, 0) 72%); } }
:root[data-theme="dark"] .home-proof:not(.ink-band) .home-proof__light { background: radial-gradient(34% 58% at var(--lx, 18%) var(--ly, 34%), rgba(236, 240, 255, .12) 0%, rgba(236, 240, 255, .045) 42%, rgba(236, 240, 255, 0) 72%); }
/* a light crosses "referral" as the plate comes up (home.js --rs; without it the word is simply blue) */
.home-proof .home-proof__h em { color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-size: 300% 100%;
  background-image: linear-gradient(100deg, var(--blue-text) 0 42%, color-mix(in srgb, var(--blue-text), #FFFFFF 62%) 50%, var(--blue-text) 58% 100%); background-position: calc(100% - var(--rs, 1) * 100%) 0; padding-right: .06em; }
@media (forced-colors: active) { .home-proof .home-proof__h em { color: CanvasText; background: none; } }
.home-proof.ink-band .avatar--initial { background: #24221F; box-shadow: inset 0 0 0 1px rgba(237, 231, 220, .16); }
.ride.ink-band { border-top: 0; }

/* the footer on phones, Home only (jury round 4: it was about 1.8 screens): tighter type and spacing in the TREC block,
   every notice and license line still there at full wording */
@media (max-width: 767px) {
  .home .footer__main { padding-block: 22px 14px; gap: 14px; }
  .home .footer__col a { min-height: 30px; font-size: .875rem; }
  .home .footer__settings { padding-top: 6px; }
  .home .trec__inner { padding-block: 22px calc(22px + env(safe-area-inset-bottom)); gap: 14px; }
  .home .trec__links a { min-height: 40px; font-size: 14px; line-height: 1.35; } /* IABS and CPN stay at 14px (TREC: 10 pt or larger) */
  .home .trec__grid { gap: 14px; }
  .home .trec__marks svg { height: 48px; width: auto; }
  .home .trec__license, .home .trec__fh, .home .trec__fine { font-size: 12.5px; line-height: 1.5; }
  .home .trec__fine { gap: 6px; padding-top: 14px; }
  .home .trec__copy { font-size: 12.5px; }
}

/* == MAP r2 == (home-map engineer, 2026-09-29, round 8; append-only block, the rest of this file belongs to the Home page).
   "BLUE HOUR TO MORNING" (#dfw-experience, js/scenes/pinmap.js): a porcelain model on a floating plinth, flown in one
   pinned track. Everything on it is painted from the scroll progress by pinmap.js: --mapa-day (0 blue hour .. 1 morning),
   --mapa-dawn (the terminator's sweep), --mapa-p (progress), --mapa-veil (paper under the payoff copy), --mapa-shine (the
   light across "Hundreds"). Performance (feedback item 33): pinmap.js writes each of these only when it changes, and on
   the element that reads it (--mapa-day on the section, --mapa-dawn and --mapa-veil on .mapa__scrim, --mapa-p and
   --mapa-dawn on the stills, --mapa-shine on the headline, --mapa-rday on the rail), so a frame restyles what moved and
   never the whole section: --mapa-day (the section's own background) is registered as NOT inherited, so the dawn no
   longer restyles the section's ~270 descendants every frame (nothing below the section reads it; the rail reads its own
   --mapa-rday). A town label moves as one layer (the label; its dot, leader and box ride inside it).
   The defaults below still hold wherever nothing is written. .is-day flips the type and the scrims between light-on-ink and
   ink-on-paper at a threshold with a short cross-fade, so nothing ever sits at a grey midpoint. Unarmed (T0: reduced
   motion or paused, and if the module never runs) the section is the final frame on bone with every word and the route
   listed below it. .is-armed (T2 .is-live / .is-wait, T1 .is-poster) pins the 370svh track (470svh on phones: the
   pacer, js/core/pace.js, gives each of the flight's beats its share of the scroll). */
@property --mapa-day { syntax: "<number>"; inherits: false; initial-value: 1; }
.mapa {
  --mapa-day: 1; --mapa-dawn: 1; --mapa-veil: 1;
  --m-ink: #0E1628; --m-bone: var(--stage-paper, var(--paper)); /* the map lands on the studio grey (look.js pagePaper()) */
  --m-fg: #EEF1F7; --m-fg-2: #B6C0D3; --m-acc: #93A8FF; --m-halo: rgba(9, 14, 26, .88); --m-line: rgba(238, 241, 247, .3);
  --m-pad: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter)));
  position: relative; background: color-mix(in srgb, var(--m-ink), var(--m-bone) calc(var(--mapa-day) * 100%)); color: var(--m-fg);
}
.mapa.is-day, .mapa:not(.is-armed) { --m-fg: var(--ink); --m-fg-2: var(--ink-2); --m-acc: var(--blue-text); --m-halo: var(--m-bone); --m-line: rgba(21, 19, 17, .22); }
.mapa.is-armed { --mapa-day: 0; --mapa-dawn: 0; --mapa-veil: 0; }
.mapa__track { position: relative; }
.mapa__night { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; visibility: hidden; }
.mapa__sticky { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.mapa__stage { position: absolute; inset: 0; background: transparent; }

/* the stills (T1, T0): one sprite (assets/renders/pinmap-stills.webp) = desktop blue hour, desktop morning (1600 x 1000
   each), then the phone blue hour and morning (720 x 1560 each, side by side); each frame covers the stage like cover.
   Rendered from this scene (?mapshot=night|day), so the placeholder, T1 and T0 match the live model. */
.mapa__fallback { position: absolute; inset: 0; overflow: hidden; display: none; background: var(--m-bone); }
/* (shown at T1 and T0, and before the module runs only where it can't arm: reduced motion or the fail-safe, so a T2
   visit never downloads the stills) */
.mapa.is-static .mapa__fallback, .mapa.is-poster .mapa__fallback, .mapa.is-wait .mapa__fallback, .mapa.is-live .mapa__fallback:not([hidden]), html.is-failsafe .mapa:not(.is-armed) .mapa__fallback { display: block; }
/* T2: the stills stand in while WebGL loads, then fade out over its first frame (pinmap.js syncStills) */
.mapa__fallback { transition: opacity .9s var(--ease-out); }
.mapa__fallback.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mapa:not(.is-armed) .mapa__fallback { display: block; } }
.mapa__fb { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.mapa__fb > i { position: absolute; left: 50%; top: 50%; width: max(100cqw, 160cqh); aspect-ratio: 1.6; translate: -50% -50%;
  background: url(../../assets/renders/pinmap-stills.webp) no-repeat; background-size: 100% 356%; }
.mapa__fb--night > i { background-position: 0 0; transform: scale(calc(1.18 - .18 * min(1, var(--mapa-p, 0) * 3.2))); transform-origin: 62% 42%; }
.mapa__fb--day > i { background-position: 0 39.0625%; transform: scale(calc(1.12 - .12 * min(1, max(0, (var(--mapa-p, 1) - .3) * 2.6)))); transform-origin: 58% 40%; } /* the morning still settles as the flight climbs */
.mapa__fb--night { display: none; }
.mapa.is-poster .mapa__fb--night, .mapa.is-wait .mapa__fb--night, .mapa.is-live .mapa__fb--night { display: block; }
.mapa.is-poster .mapa__fb--day, .mapa.is-wait .mapa__fb--day, .mapa.is-live .mapa__fb--day { -webkit-mask-image: linear-gradient(to left, #000 calc(var(--mapa-dawn) * 140% - 40%), transparent calc(var(--mapa-dawn) * 140%)); mask-image: linear-gradient(to left, #000 calc(var(--mapa-dawn) * 140% - 40%), transparent calc(var(--mapa-dawn) * 140%)); }
.mapa__fb-rim { display: none; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to left, transparent calc(var(--mapa-dawn) * 140% - 26%), rgba(236, 240, 255, .5) calc(var(--mapa-dawn) * 140% - 6%), transparent calc(var(--mapa-dawn) * 140% + 2%));
  opacity: calc(min(var(--mapa-dawn), 1 - var(--mapa-dawn)) * 3); }
.mapa.is-poster .mapa__fb-rim, .mapa.is-wait .mapa__fb-rim { display: block; }
@media (max-width: 767px) {
  .mapa__fb > i { width: max(100cqw, 46.154cqh); aspect-ratio: 720 / 1560; background-size: 222.222% 228.205%; }
  .mapa__fb--night > i { background-position: 0 100%; transform-origin: 58% 46%; }
  .mapa__fb--day > i { background-position: 81.818% 100%; }
}

.mapa__frame { display: none; }
/* legibility: an ink-blue scrim at the blue hour, paper by morning (cross-faded at the .is-day threshold); at the payoff
   the paper also veils the model under the headline. The lower band stays quiet so the supers never touch the model. */
.mapa__scrim { position: absolute; inset: 0; pointer-events: none; }
.mapa__scrim::before, .mapa__scrim::after { content: ""; position: absolute; inset: 0; transition: opacity .5s var(--ease-out); }
.mapa__scrim::before { background:
    linear-gradient(to top, rgba(9, 14, 26, .92) 0, rgba(9, 14, 26, .7) 17%, rgba(9, 14, 26, .28) 30%, rgba(9, 14, 26, 0) 42%),
    linear-gradient(to bottom, rgba(9, 14, 26, .55), rgba(9, 14, 26, 0) 20%); }
.mapa__scrim::after { opacity: 0; background:
    radial-gradient(40% 30% at 17% 25%, color-mix(in srgb, var(--m-bone) calc(var(--mapa-veil) * 82%), transparent) 0 38%, transparent 82%), /* a soft halo behind the words only (jury round 4: the old veil fogged the left third) */
    linear-gradient(to top, color-mix(in srgb, var(--m-bone) 95%, transparent) 0, color-mix(in srgb, var(--m-bone) 80%, transparent) 15%, color-mix(in srgb, var(--m-bone) 34%, transparent) 28%, transparent 40%); }
.mapa__scrim::before { opacity: calc(1 - var(--mapa-dawn, 0)); } /* the ink scrim thins as first light crosses */
.mapa.is-day .mapa__scrim::before { opacity: 0; }
.mapa.is-day .mapa__scrim::after { opacity: 1; }

/* the blue-hour open and the route supers (film location supers: a small caps kicker, a large Bodoni italic line) */
.mapa__open { display: none; position: absolute; top: calc(var(--header-h, 56px) + clamp(24px, 5svh, 52px)); left: 0; right: 0; padding-inline: var(--m-pad); pointer-events: none; }
.mapa .caps { color: var(--m-fg-2); transition: color .45s; }
.mapa__beats { display: none; position: absolute; left: 0; right: 0; bottom: clamp(36px, 8svh, 84px); margin: 0; padding: 0 var(--m-pad); list-style: none; pointer-events: none; }
.mapa__beat { position: absolute; left: inherit; bottom: 0; padding-inline: inherit; width: 100%; opacity: 0; visibility: hidden; }
.mapa__beat-in { max-width: min(760px, 88vw); }
.mapa__beat-k { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--m-fg-2); transition: color .45s; }
.mapa__beat-k::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--m-acc), transparent); }
.mapa__beat-v { margin-top: 14px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -.012em; color: var(--m-fg); text-wrap: balance;
  text-shadow: 0 2px 28px var(--m-halo); transition: color .45s, text-shadow .45s; }
.mapa__beat-v span { color: var(--m-acc); font-style: normal; padding-inline: .1em; opacity: .85; transition: color .45s; }
.mapa__beat:first-child .mapa__beat-v { font-size: clamp(2.6rem, 6.4vw, 5.6rem); letter-spacing: -.02em; }
.mapa__beat-k, .mapa__beat-v { will-change: transform; }

/* the payoff */
.mapa__copy { position: relative; z-index: 1; padding-top: calc(var(--header-h, 56px) + clamp(28px, 6svh, 64px)); pointer-events: none; color: var(--ink); transition: opacity .35s var(--ease-out); }
.mapa__copy .caps { width: fit-content; color: var(--muted); }
.mapa__copy h2 { margin-top: 18px; max-width: 7.6em; width: fit-content; font-weight: 300; letter-spacing: -.05em; color: var(--ink); }
.mapa__copy h2 em { color: var(--blue-text); }
.mapa.is-armed .mapa__copy h2 em { color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-size: 280% 100%;
  background-image: linear-gradient(100deg, var(--blue-text) 0 40%, color-mix(in srgb, var(--blue-text), #FFFFFF 58%) 50%, var(--blue-text) 60% 100%);
  background-position: calc(100% - var(--mapa-shine, 0) * 100%) 0; }
@media (forced-colors: active) { .mapa.is-armed .mapa__copy h2 em { color: CanvasText; background: none; } }
.mapa__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; line-height: 1.02; }
.mapa__w > span { display: inline-block; transform: translate3d(0, 108%, 0); will-change: transform; transition: transform .38s cubic-bezier(.4, 0, 1, 1); }
/* the rise plays on ENTER (pinmap.js .is-h2 once the flight reaches the payoff), staggered word by word, and never
   rests half-masked (jury round 6: a scrubbed mask could stop with the words sliced mid-letter) */
.mapa.is-h2 .mapa__w > span { transform: none; transition: transform 1s cubic-bezier(.16, .8, .16, 1); transition-delay: calc(var(--wi, 0) * 75ms); }
@media (prefers-reduced-motion: reduce) { .mapa__w > span, .mapa.is-h2 .mapa__w > span { transition: none; } }
.mapa__w em { line-height: 1; }
.mapa__sub { margin-top: 14px; width: fit-content; font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--ink-2); letter-spacing: -.01em; }

.mapa__foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; padding-bottom: clamp(18px, 3.5svh, 32px); color: var(--ink); }
.mapa.is-armed .mapa__foot:not(.is-on) { pointer-events: none; }
.mapa__cities-title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mapa__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* a chip is a small enamel control: a ring grows in on hover or focus, the blue rule sweeps under it, it lifts */
.mapa__chips .chip { --fg: var(--ink); --ctl: var(--line-strong); gap: 0; color: var(--ink); background-color: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background-image: linear-gradient(var(--blue-fill), var(--blue-fill)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  transition: background-color .45s var(--ease-out), background-size .7s var(--ease-out), border-color .35s var(--ease-out), color .35s, box-shadow .6s var(--ease-out), transform .6s var(--ease-out); }
.mapa__chip-dot { display: inline-block; width: 0; height: 7px; margin-right: 0; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--blue-fill); transform: scale(0); flex: none;
  transition: width .45s var(--ease-out), margin .45s var(--ease-out), transform .45s var(--ease-out), background-color .3s, border-color .3s; }
.mapa__chips .chip.is-home::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .mapa__chips .chip:hover { background-size: 100% 2px; border-color: color-mix(in srgb, var(--blue-fill) 60%, var(--line-strong)); transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(21, 23, 27, .5); }
  .mapa__chips .chip:hover .mapa__chip-dot { width: 7px; margin-right: 8px; transform: scale(1); }
}
.mapa__chips .chip:focus-visible .mapa__chip-dot { width: 7px; margin-right: 8px; transform: scale(1); }
.mapa__chips .chip[aria-pressed="true"] { background-color: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); background-size: 100% 2px; box-shadow: 0 16px 30px -18px rgba(40, 82, 229, .6); }
.mapa__chips .chip[aria-pressed="true"] .mapa__chip-dot { width: 7px; margin-right: 8px; transform: scale(1); border-color: var(--on-fill); background: var(--on-fill); }
.mapa__chips .chip[aria-pressed="true"].is-home::after { background: var(--on-fill); }
.mapa__chips .chip:active { transform: scale(.97); transition-duration: .12s; }
.mapa__ask { margin-top: 12px; font-size: var(--fs-label); color: var(--ink-2); }
.mapa__caption { max-width: 46ch; font-size: var(--fs-label); line-height: 1.55; color: var(--muted); }
@media (min-width: 1000px) {
  .mapa__foot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; column-gap: 48px; }
  .mapa__notes { justify-self: end; text-align: right; }
}

/* the picked town: a slim card (desktop: top right, beside the model; phones: in the headline's place) */
.mapa__card { position: absolute; z-index: 3; right: var(--m-pad); top: calc(var(--header-h, 56px) + clamp(20px, 4.5svh, 48px)); width: min(360px, calc(100% - 2 * var(--gutter)));
  padding: 22px 22px 18px; background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-top: 2px solid var(--blue-fill); box-shadow: 0 30px 60px -36px rgba(21, 23, 27, .45); color: var(--ink); }
.mapa__card[hidden] { display: none; }
.mapa__card.is-in { animation: mapa-card .62s var(--ease-out) both; }
.mapa__card.is-in > * { animation: mapa-card-in .6s var(--ease-out) both; }
.mapa__card.is-in > :nth-child(3) { animation-delay: .06s; } .mapa__card.is-in > :nth-child(4) { animation-delay: .1s; } .mapa__card.is-in > :nth-child(5) { animation-delay: .14s; }
@keyframes mapa-card { from { opacity: 0; transform: translate3d(0, 14px, 0); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes mapa-card-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.mapa__card-x { position: absolute; top: 6px; right: 6px; }
.mapa__card .caps { color: var(--blue-text); }
.mapa__card-name { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 2.1rem; line-height: 1.05; letter-spacing: -.015em; }
.mapa__card-line { margin-top: 10px; color: var(--ink-2); font-size: .98rem; }
.mapa__card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }

/* town labels: architectural callouts (a ring on the place, a hairline leader out to clear plinth, the name) */
.mapa__labels { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mapa.is-live .mapa__labels { display: block; }
.mapa__lab { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; color: var(--m-fg); transition: color .45s; }
.mapa__lab-dot, .mapa__lab-lead, .mapa__lab-box { position: absolute; left: 0; top: 0; }
.mapa__lab-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-halo) 70%, transparent); }
.mapa__lab-lead { width: 20px; height: 1px; margin-top: -.5px; transform-origin: 0 50%; background: currentColor; opacity: .6; }
.mapa__lab-box { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 0 2px var(--m-halo), 0 0 6px var(--m-halo), 0 0 14px var(--m-halo); }
.mapa__lab-box b { font-weight: 600; }
.mapa__lab--home .mapa__lab-box { gap: 10px; }
.mapa__lab-t { display: grid; justify-items: start; }
.mapa__lab--home.is-left .mapa__lab-box { flex-direction: row-reverse; }
.mapa__lab--home.is-left .mapa__lab-t { justify-items: end; text-align: right; }
.mapa__lab--home b { color: var(--m-acc); font-size: 9.5px; letter-spacing: .24em; }
.mapa__lab--home em { margin-top: 2px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -.01em; text-transform: none; color: var(--m-fg); }
.mapa__lab--home .mapa__lab-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-color: var(--m-acc); }
.mapa__face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px color-mix(in srgb, var(--blue-fill) 70%, transparent), 0 10px 22px -10px rgba(21, 23, 27, .5); }
.mapa__lab.is-hi { color: var(--blue-text); }
.mapa__lab.is-hi .mapa__lab-box { font-size: 11.5px; }

/* the flight's chapters (desktop): a hairline that fills as you travel */
.mapa__rail { display: none; position: absolute; right: var(--m-pad); top: 50%; transform: translateY(-50%); pointer-events: none; }
.mapa__rail-line { position: absolute; right: 3px; top: 4px; bottom: 4px; width: 1px; background: var(--m-line); transition: background-color .45s; }
.mapa__rail-fill { position: absolute; inset: 0; background: var(--m-acc); transform-origin: 50% 0; transform: scaleY(0); transition: background-color .45s; }
.mapa__rail ul { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.mapa__rail li { display: flex; justify-content: flex-end; }
.mapa__rail { --mapa-rday: 0; }
.mapa__rail li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--m-line); background: color-mix(in srgb, var(--m-ink), var(--paper) calc(var(--mapa-rday) * 100%)); transition: background-color .5s var(--ease-out), border-color .5s; }
.mapa__rail li.is-on::after { background: var(--m-acc); border-color: transparent; }

/* Skip the map: a solid glass pill at the blue hour, a bone pill by morning (switched at the threshold, cross-faded) */
.mapa__skip { display: none; position: absolute; right: var(--m-pad); bottom: clamp(24px, 5svh, 44px); align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font-size: 13px; letter-spacing: .06em; text-decoration: none; color: #EEF1F7;
  border: 1px solid rgba(238, 241, 247, .34); background: rgba(9, 14, 26, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .35s, background-color .35s, border-color .35s; }
.mapa.is-day .mapa__skip { color: var(--ink); border-color: rgba(21, 19, 17, .28); background: color-mix(in srgb, var(--paper) 90%, transparent); }
.mapa__skip:hover { border-color: currentColor; }
.mapa__skip:focus-visible, .mapa__chips .chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the route, listed (unarmed only: the flight shows it as supers) */
.mapa__route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 36px; margin: 0 auto; padding-top: 28px; padding-bottom: 72px; list-style: none; border-top: 1px solid var(--line); }
.mapa__route li { display: grid; gap: 6px; }
.mapa__route b { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.mapa__route span { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }

/* ---------------------------------------------------------------- armed: the pinned flight (T2 live or waiting, T1) */
.mapa.is-armed .mapa__track { height: 370vh; height: 370svh; } /* pacing plan (2026-10-01): 0.4 screen per beat weight (6.75) */
.mapa.is-armed .mapa__sticky { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; min-height: 0; }
.mapa.is-armed .mapa__open, .mapa.is-armed .mapa__beats { display: block; }
.mapa.is-armed .mapa__skip { display: inline-flex; }
.mapa.is-armed .mapa__copy { position: absolute; top: 0; left: 0; right: 0; }
.mapa.is-armed .mapa__copy .caps, .mapa.is-armed .mapa__sub, .mapa.is-armed .mapa__foot { opacity: 0; }
.mapa.is-armed .mapa__route { display: none; }
@media (min-width: 1100px) { .mapa.is-armed .mapa__rail { display: block; } }

/* QA only (?mapshot=night|day): the bare model for the T1/T0 stills (the page chrome steps aside too) */
html.mapa-shot [data-site-header], html.mapa-shot [data-bottombar], html.mapa-shot .back-btn { visibility: hidden !important; }
.mapa--shot .mapa__open, .mapa--shot .mapa__beats, .mapa--shot .mapa__beat, .mapa--shot .mapa__lab, .mapa--shot .mapa__copy, .mapa--shot .mapa__foot, .mapa--shot .mapa__labels, .mapa--shot .mapa__rail, .mapa--shot .mapa__skip, .mapa--shot .mapa__scrim, .mapa--shot .mapa__frame { visibility: hidden !important; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
  .mapa.is-armed .mapa__track { height: 470vh; height: 470svh; } /* phones: 0.55 small screen per beat weight */
  .mapa__beats { bottom: calc(clamp(72px, 12svh, 104px) + var(--bar-space, 0px)); }
  .mapa__beat-v { font-size: clamp(1.45rem, 7vw, 2rem); }
  .mapa__beat:first-child .mapa__beat-v { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .mapa__skip { left: var(--gutter); right: auto; bottom: calc(14px + var(--bar-space, 0px)); min-height: 40px; font-size: 12px; }
  .mapa__copy { padding-top: calc(var(--header-h, 56px) + 20px); }
  .mapa__copy h2 { font-size: clamp(2.1rem, 10.4vw, 2.7rem); max-width: 8em; }
  .mapa__sub { margin-top: 8px; font-size: 1.05rem; }
  .mapa__foot { gap: 10px; padding-top: 30px; padding-bottom: calc(16px + var(--bar-space, 0px)); }
  .mapa__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent); }
  .mapa__chips::-webkit-scrollbar { display: none; }
  .mapa__chips li { flex: none; }
  .mapa__ask { margin-top: 8px; }
  .mapa__caption { font-size: 12.5px; line-height: 1.45; }
  /* the card takes the headline's place while it's open, so the chips and the caption stay free to tap and read */
  .mapa__card { top: calc(var(--header-h, 56px) + 12px); bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; padding: 18px 18px 16px; }
  .mapa__card-name { font-size: 1.8rem; }
  .mapa.is-card .mapa__copy { opacity: 0; }
  .mapa__lab--home em { font-size: 18px; }
  .mapa__face { width: 32px; height: 32px; }
  .mapa__lab-box { font-size: 9.5px; letter-spacing: .16em; }
  .mapa__route { grid-template-columns: minmax(0, 1fr); }
  /* the supers sit on a deeper scrim; at the payoff the model melts into the paper under the headline and above the chips */
  .mapa__scrim::before { background:
    linear-gradient(to top, rgba(9, 14, 26, .95) 0, rgba(9, 14, 26, .82) 24%, rgba(9, 14, 26, .35) 38%, rgba(9, 14, 26, 0) 50%),
    linear-gradient(to bottom, rgba(9, 14, 26, .55), rgba(9, 14, 26, 0) 20%); }
  .mapa__scrim::after { background:
    linear-gradient(to bottom, color-mix(in srgb, var(--m-bone) calc(var(--mapa-veil) * 100%), transparent) 0, color-mix(in srgb, var(--m-bone) calc(var(--mapa-veil) * 100%), transparent) calc(var(--header-h, 56px) + 165px), transparent calc(var(--header-h, 56px) + 250px)),
    linear-gradient(to top, color-mix(in srgb, var(--m-bone) 98%, transparent) 0, color-mix(in srgb, var(--m-bone) 90%, transparent) 26%, color-mix(in srgb, var(--m-bone) 40%, transparent) 38%, transparent 50%); }
}
@media (prefers-reduced-motion: reduce) { .mapa__chips .chip, .mapa__chip-dot { transition: background-color .2s, border-color .2s, color .2s; transform: none !important; } .mapa__card.is-in, .mapa__card.is-in > * { animation: none; } }
:root[data-motion="paused"] .mapa__chips .chip { transform: none; }
:root[data-motion="paused"] .mapa__card.is-in, :root[data-motion="paused"] .mapa__card.is-in > * { animation: none; }

/* ------------------------------------------------------------------ title cards on this page: the words wait fully under
   their mask (at 112% the tallest ascenders and the i-dots peeked out as a row of dashes before the rise) */
.home .tc-armed:not(.is-in) [data-split] .wi { transform: translateY(140%); }