/* ============================================================
   COMPEO — index (main marketing page)
   White paper hero with a mouse-reactive amber flow field, the
   lens-morph logo film as the hero moment, IntersectionObserver
   scroll reveals, an entry count-up stats band, and a liquid-glass
   property trio with 3D pop-out.

   Native scroll only — no Lenis, no ScrollTrigger, no pinning.
   Index-only: base.css + property pages are untouched.
   ============================================================ */

:root {
  --paper: #FCFBF8;          /* hero base — a hair warm so the film's cream blends */
  --paper-2: #F4F1E9;        /* alternating section wash */
  --paper-3: #EFEBE1;        /* deepest light tone */
  --ink: #1E1B17;            /* headings on light */
  --ink-2: #55504733;        /* hairline rules (33 = alpha) */
  --ink-soft: #5a5349;       /* body copy on light */
  --ink-faint: #726c5c;      /* captions / meta on light — AA (>=4.5:1) on paper & paper-2 */
  --amber-ink: #A55828;      /* deeper amber for SMALL amber TEXT on light — AA >=4.5:1 */
  --line: rgba(30, 27, 23, 0.10);
  --line-2: rgba(30, 27, 23, 0.16);
  --green: #4f7132;          /* illustrative-graph accent — AA (5.3:1) on paper for small text */
  --green-2: #6f9a4a;        /* lighter graph fill / bar top — vibrant, not for text */
}

/* ============================================================
   ACCESSIBILITY (index-only; base.css / property pages untouched)
   ============================================================ */
/* visually-hidden but screen-reader-available */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* skip-to-content — first thing a keyboard user tabs to */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 1000;
  transform: translateY(-120%);
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* consistent, visible amber focus ring on every interactive element.
   Non-text UI contrast: --amber is >=3:1 on both paper (3.37) and the dark
   footer (5.26). Mouse users never see this — :focus-visible is keyboard-only. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
/* the glass cards provide their own amber ring on the inner pane — suppress
   the outer link's duplicate ring */
.glass:focus-visible { outline: none; }

/* forced-colors (Windows High Contrast): the big +21% figure uses a clipped
   gradient with transparent text-fill, which would render invisible. Restore
   a solid system color there so the number never vanishes. */
@media (forced-colors: active) {
  .earn__num {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
  .skip-link { border: 1px solid CanvasText; }
}

/* ---- page-level: flip the shared dark base to a light stage ---- */
body { background: var(--paper); color: var(--ink); }

/* full-height baseline so the hero can never come up short */
html, body { min-height: 100%; }

/* native smooth-scroll anchor jumps (#how, #work, #contact…) land clear of the
   fixed header instead of hidden beneath it */
html { scroll-padding-top: 80px; }

/* D-7 (2026-08-05): .eyebrow is 10.5-12.8px and base.css paints it --amber
   (#C8743C = 3.37:1 on cream — fails AA for small text). Every page that
   loads index.css is a light page, so the small-text uses switch to
   --amber-ink (#A55828 = 4.68:1). The dark property pages load listing.css,
   not this file, so their amber-on-charcoal eyebrows are untouched.
   Large display amber (.pricing__amount b at 25.6px+, .contact__title em at
   32px+, .slate__amp inside a 24px+ title) keeps the brighter amber: those
   clear the AA large-text threshold at 3:1. */
.eyebrow { color: var(--amber-ink); }

/* the scroll-progress track reads better as a faint ink line here */
.scroll-progress { background: rgba(30, 27, 23, 0.06); }

/* ============================================================
   MONOCHROME LOGO (index only) — the original vector lockup
   (assets/brand/compeo-wordmark.svg) painted as a single solid
   colour via CSS mask, so wordmark AND aperture read as one flat
   mark. Black on the white header, cream on the dark footer.
   ============================================================ */
.brandmark--logo {
  display: block;
  height: 1.6rem;
  aspect-ratio: 1821.5 / 500.4;   /* exact viewBox ratio of the lockup */
  background-color: currentColor;
  color: var(--ink);
  -webkit-mask: url("../assets/brand/compeo-wordmark.svg") center / contain no-repeat;
  mask: url("../assets/brand/compeo-wordmark.svg") center / contain no-repeat;
}
.footer__brand .brandmark--logo-footer { height: 1.95rem; color: var(--cream); }

/* ============================================================
   HEADER — light variant (index only)
   ============================================================ */
.siteheader .brandmark { color: var(--ink); }
.siteheader__link { color: var(--ink-soft); }
.siteheader__link:hover { color: var(--ink); }
.siteheader__cta {
  color: var(--paper); background: var(--ink);
  min-height: 44px;
}
.siteheader__cta:hover { background: var(--amber); color: #fff; }
.siteheader--solid {
  background: rgba(252, 251, 248, 0.72);
  /* blur kept at 10: a fixed backdrop-filter re-blurs the whole page behind it
     on every scroll frame, so a smaller kernel is a continuous scroll win. */
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom-color: var(--line);
}

/* ---- nav menu wrapper: transparent on desktop, dropdown panel on mobile ----
   display:contents dissolves the wrapper so the three links stay direct flex
   children of the nav (desktop layout unchanged). The hamburger is
   desktop-hidden. */
.siteheader__menu { display: contents; }
.navtoggle { display: none; }

/* ============================================================
   SHARED SECTION SCAFFOLD
   ============================================================ */
.section-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.35rem); line-height: 1.03;
  letter-spacing: -0.025em; color: var(--ink);
  margin-top: 0.55rem;
}
.eyebrow { color: var(--amber-ink); }

.wrap { max-width: 1240px; margin: 0 auto; }

/* ============================================================
   HERO — flow field + lens-morph film
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  /* progressive-enhancement height chain: dvh wins where supported,
     svh is the safe floor, and the last vh keeps very old engines full */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

/* the living current — canvas painted by js/flow-hero.js */
.hero__flow {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  /* Gentle sub-pixel soften to melt dye-texel steps. Dropped 0.4→0.22px in
     v2: at dye 1280 + dpr 2 the field is sharp on its own, and the old 0.4px
     was reading as the "low quality" muddiness. Just enough to kill aliasing. */
  filter: blur(0.22px);
  pointer-events: none;
}
/* Voronoi hero variant (.hero[data-bg="voronoi"]): the ink seams must stay
   crisp, so drop the flow field's sub-pixel blur. Unlike the flow field, keep
   the canvas visible under reduced motion so voronoi-hero.js's single static
   frame shows (the flow field hides its canvas and falls back to the amber
   wash). Scoped to the voronoi variant only — the flow default is untouched. */
.hero[data-bg="voronoi"] .hero__flow { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero[data-bg="voronoi"] .hero__flow { display: block; }
}

/* soft top + bottom fade so the current melts into the page seams */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--paper) 0%, transparent 16%, transparent 78%, var(--paper) 100%);
}

.hero__stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 3.4rem clamp(1.2rem, 6vw, 4rem) 3.9rem;
  width: 100%;
  max-width: 100%;
}

/* the lens-morph film — the dominant element of the opening screen. Primary
   path is a real alpha-keyed VP9 WebM: the cream frame is gone, so the logo
   floats directly over the flow field with no rectangle. The layer is fully
   click-through so the pointer stirs the fluid even over the logo. Height is
   capped to the viewport so the headline and scroll cue still clear it. */
.hero__film {
  width: min(94vw, 1240px);
  aspect-ratio: 16 / 9;
  /* capped so the eyebrow + headline + sub + primary CTA all clear the pinned
     scroll cue at laptop heights (≈900px) without overlap */
  max-height: 47vh;
  position: relative;
  margin-bottom: 0.4rem;
  margin-top: -1.5rem;
  pointer-events: none;   /* never block the fluid sim behind it */
  /* Pre-promote to its own compositor layer so the light scroll parallax
     (translate + opacity) is a pure composite — no re-raster of the video
     texture per scroll frame, and no layer-promotion hitch on first scroll. */
  will-change: transform, opacity;
  transform: translateZ(0);
}
.hero__film video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* fallback path for browsers without VP9-alpha (they load the opaque mp4).
   Blend the cream frame into the paper with multiply + a feathered radial
   mask so no hard rectangle shows. Applied by JS only when the active source
   is the mp4. */
.hero__film.is-fallback video {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 56%, rgba(0,0,0,0.5) 74%, transparent 90%);
  mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 56%, rgba(0,0,0,0.5) 74%, transparent 90%);
}

.hero__eyebrow {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(0.62rem, 1.2vw, 0.74rem);
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--amber-ink);
  margin-bottom: 0.2rem;
}
/* RETIRED 2026-07-29: .hero__line / .hero__sub no longer render on index —
   the headline block was replaced by the kit spread below. The h1 survives as
   sr-only text. Rules kept (not deleted) so restoring the headline is a markup
   change only; other pages are free to reuse them. */
.hero__line {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.7vw, 1.9rem); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink);
  max-width: 20ch; margin: 0.5rem auto 0;
}
.hero__line em { font-style: normal; color: var(--amber); }
.hero__sub {
  margin-top: 0.9rem; color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.7vw, 1.12rem); line-height: 1.5;
  max-width: 48ch;
}
/* ============================================================
   HERO KIT SPREAD — gallery row (founder pick: lab variant 2)
   Four equal pieces, zero rotation, labels beneath the cards,
   hover lift. Replaced the fanned geometry 2026-08-05.
   Each .kitpiece is a bare wrapper; .kitpiece__frame carries the
   card chrome so the label can sit outside it. --h is the single
   size lever and is tuned so the CTA clears a 900px viewport.
   ============================================================ */
.kitspread {
  --h: clamp(80px, 10vw, 104px);
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(0.55rem, 1.6vw, 1.15rem);
  width: 100%; max-width: min(960px, 96vw);
  margin: clamp(0.6rem, 1.6vh, 1rem) auto 0;
  padding: clamp(0.2rem, 0.6vw, 0.4rem) 0;
}
.kitpiece {
  position: relative; margin: 0; flex: 0 0 auto;
  width: calc(var(--h) * 1.34);
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.35s var(--ease);
}
.kitpiece__frame {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: var(--h);
  border-radius: 14px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(30,27,23,0.17), 0 2px 6px rgba(30,27,23,0.07);
  transition: box-shadow 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .kitpiece:hover { transform: translateY(-8px); }
  .kitpiece:hover .kitpiece__frame { box-shadow: 0 26px 52px rgba(30,27,23,0.26); }
}
.kitpiece__media {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}

/* label sits UNDER the card now, so it is plain text, not a pill */
.kitpiece__tag {
  display: block; margin-top: 0.38rem; text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(0.52rem, 0.85vw, 0.58rem);
  line-height: 1.15;                    /* pinned: inheriting 1.5 cost ~7px/row */
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}

/* --- FILM: poster + a quiet play affordance --- */
.kitpiece__play {
  position: absolute; inset: 0; z-index: 3; margin: auto;
  width: calc(var(--h) * 0.3); height: calc(var(--h) * 0.3);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(247,242,234,0.92); color: var(--ink);
  box-shadow: 0 4px 14px rgba(30,27,23,0.3);
}
.kitpiece__play svg { width: 52%; height: 52%; margin-left: 6%; }

/* --- PHOTOS: two real delivered frames. In the gallery row they stack
       square-on rather than fanning, so the back print is a thin reveal. --- */
.kitprint {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.kitprint--back  { transform: translate(-4%, -5%) scale(0.99); opacity: 0.55; }
.kitprint--front { z-index: 2; }

/* --- WEBSITE: real screenshot under CSS browser chrome --- */
.kitpiece--site .kitpiece__frame { padding-top: calc(var(--h) * 0.13); }
.kitpiece__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: calc(var(--h) * 0.13);
  display: flex; align-items: center; gap: calc(var(--h) * 0.026);
  padding-inline: calc(var(--h) * 0.05);
  background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.kitpiece__bar i {
  width: calc(var(--h) * 0.032); height: calc(var(--h) * 0.032);
  border-radius: 50%; background: var(--line-2);
}
.kitpiece__media--site { border-radius: 0; object-position: top center; }

/* --- ROI: the one-pager, rebuilt small from the #roi numbers --- */
.kitpiece--roi .kitpiece__frame { background: linear-gradient(168deg, #fff, var(--paper-2)); }
.kitdoc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--h) * 0.085) calc(var(--h) * 0.08);
  text-align: left;
}
.kitdoc__brand {
  font-family: var(--display); font-weight: 800;
  font-size: calc(var(--h) * 0.098); letter-spacing: 0.08em; line-height: 1.2;
  color: var(--ink); margin-bottom: calc(var(--h) * 0.07);
}
.kitdoc__brand i {
  font-style: normal; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.kitdoc__rows { display: flex; flex-direction: column; gap: calc(var(--h) * 0.045); }
.kitdoc__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--h) * 0.05);
  font-size: calc(var(--h) * 0.095); line-height: 1.2;
  padding-bottom: calc(var(--h) * 0.04);
  border-bottom: 1px solid var(--line);
}
.kitdoc__row i { font-style: normal; color: var(--ink-soft); }
.kitdoc__row b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.kitdoc__row--sum { border-bottom: 0; border-top: 1.5px solid var(--ink); padding-top: calc(var(--h) * 0.05); }
.kitdoc__row--sum b { color: var(--green); }

/* One short line between the logo and the spread (founder 2026-07-29;
   D-1 price added 2026-08-05). Wide enough to hold one line on desktop. */
.hero__pitch {
  margin-top: clamp(0.5rem, 1.3vh, 0.9rem);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink); max-width: 56ch;
}

/* the composition is static; only the hover lift is motion */
@media (prefers-reduced-motion: reduce) {
  .kitpiece { transition: none; }
  .kitpiece:hover { transform: none; }
}

/* Primary hero CTA — sits under the sub; clears the scroll cue at every width
   (the cue is pinned to the hero's bottom edge, this stays in the centred stack). */
.hero__cta { margin-top: clamp(0.7rem, 1.4vh, 1.1rem); }
/* down-nudge for the fan CTAs' ↓ arrow (they anchor down to the trio) */
.btn__arrow--down { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow--down,
.fan-card:hover .btn__arrow--down { transform: translateY(3px); }

/* scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint);
}
.hero__cue-rail {
  width: 1px; height: 46px; overflow: hidden;
  background: rgba(30, 27, 23, 0.12);
}
.hero__cue-rail::after {
  content: ""; display: block; width: 100%; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--amber));
  animation: cueRun 2s var(--ease) infinite;
}
@keyframes cueRun {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ============================================================
   STRATA SEAM — torn-paper section break (canvas 2D)
   A slim full-width band between hero and offer. Top edge is
   --paper (hero base), bottom edge is --paper (offer/body base),
   so it reads as torn cream/amber paper strata bridging the two.
   Animation lives in js/strata-seam.js (IO-gated, dpr-aware,
   reduced-motion = static). --paper base is the graceful floor
   if JS never runs — an invisible seam, no broken layout.
   ============================================================ */
.strata-seam {
  position: relative;
  width: 100%;
  height: clamp(140px, 18vh, 200px);
  overflow: hidden;
  background: var(--paper);
}
.strata-seam__canvas {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
}

/* ============================================================
   MARKETS — card fan (#markets)
   Three market cards fanned like a hand. CSS owns all geometry via
   per-card custom props (--offset / --depth / --order) + the
   .is-featured state; initFan() re-derives those on interaction.
   Degrades to a static stack with no JS; collapses to a vertical
   tap-accordion under 768px.
   ============================================================ */
.markets {
  padding: clamp(4.5rem, 10vh, 7rem) clamp(1.2rem, 4vw, 4rem) clamp(5rem, 12vh, 8rem);
  background:
    radial-gradient(75% 36% at 50% 0%, rgba(200, 116, 60, 0.08), transparent 72%),
    var(--paper);
}
.markets__head {
  max-width: 780px; margin: 0 auto clamp(3rem, 7vh, 5rem);
  text-align: center;
}
.markets__sub {
  max-width: 58ch; margin: 1rem auto 0;
  color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.55;
}
/* ---- Card fan: fanned hand of three market photo-cards ----
   Rest state is deliberately near-empty (the lab's clean aesthetic): a big
   photo, a wax-seal identity mark and the market label. Hover / keyboard-focus
   lifts the card forward and reveals the full copy; the whole card is one link.
   Geometry is static per card via inline --offset / --depth / --order. */
.fan {
  max-width: 1180px; margin: 0 auto;
}
.fan__deck {
  position: relative;
  width: min(1040px, 100%); height: min(72vh, 660px); min-height: 600px;
  margin: 0 auto; perspective: 1600px;
}
.fan-card {
  --offset: 0; --depth: 0; --order: 1;
  --x: calc(var(--offset) * 24%);
  position: absolute; inset: 0 12%;
  z-index: var(--order);
  overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px;
  background: var(--tint);
  box-shadow: 0 30px 70px rgba(30, 27, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  text-align: left;
  transform:
    translate3d(var(--x), calc(var(--depth) * -6px), calc(var(--depth) * -150px))
    rotate(calc(var(--offset) * 7deg))
    scale(calc(1 - var(--depth) * 0.06));
  transform-origin: 50% 128%;
  transition:
    transform 0.5s var(--ease), filter 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
/* side cards sit a touch quieter than the forward centre card */
.fan-card:not(.is-featured) { filter: brightness(0.82) saturate(0.94); }
.fan-card.is-featured {
  transform: translate3d(0, 18px, 0) rotate(0deg) scale(1.02);
  box-shadow: 0 44px 90px rgba(30, 27, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* the market chosen in the kit section below is mirrored back here as a
   non-geometric accent ring — never touches the fan's authored transforms */
.fan-card.is-picked::after {
  content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  pointer-events: none; box-shadow: inset 0 0 0 2.5px rgb(var(--accent)); opacity: 0.9;
}

/* Reveal + lift: hover, keyboard focus, or an opened touch card. The card
   lifts straight up out of its OWN slot (keeps var(--x)), comes upright and
   full-bright, and rises above its neighbours — no jump to centre, so a side
   card never lands on top of the featured card. Reverses cleanly to rest. */
.fan-card:hover,
.fan-card:focus-within,
.fan-card.is-open {
  z-index: 20; filter: none;
  transform: translate3d(var(--x), -10px, 80px) rotate(0deg) scale(1.05);
  box-shadow: 0 54px 110px rgba(30, 27, 23, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Full-card link — covers everything, carries the accessible name. */
.fan-card__hit {
  position: absolute; inset: 0; z-index: 6; border-radius: inherit;
}
.fan-card__hit:focus-visible {
  outline: 3px solid var(--amber-ink); outline-offset: 4px;
}

.fan-card__media { position: absolute; inset: 0; z-index: 0; }
.fan-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-card--hosts .fan-card__media img { object-position: 48% center; }
.fan-card--managers .fan-card__media img { object-position: center 58%; }
.fan-card__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23, 20, 15, 0.28) 0%, transparent 24%),
    linear-gradient(0deg, rgba(23, 20, 15, 0.52) 0%, transparent 34%);
}

/* Wax-seal identity mark — frosted disc, accent aperture ring, market glyph.
   Echoes the Compeo lens/aperture; each market reads at a glance. Stays put
   when the copy reveals, so the card is never anonymous. */
.fan-card__seal {
  position: absolute; z-index: 4; top: 16px; left: 16px;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--ink-accent);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 18px rgba(30, 27, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}
.fan-card__seal::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px solid rgb(var(--accent)); opacity: 0.5;
}
.fan-card__mark { width: 22px; height: 22px; display: block; }
/* the right card fans to the right, so keep its identity on the exposed edge */
.fan-card--managers .fan-card__seal { left: auto; right: 16px; }
.fan-card--managers .fan-card__label { justify-content: flex-end; text-align: right; }

/* Always-visible market label — film-slate style: an accent index chip + name. */
.fan-card__label {
  position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap;
  margin: 0; color: var(--cream);
  font-family: var(--sans); font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  transition: opacity 0.32s var(--ease), transform 0.42s var(--ease);
}
.fan-card__idx {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em;
  padding: 0 0.4em; border-radius: 6px;
  background: rgb(var(--accent)); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.fan-card__body {
  position: absolute; z-index: 3; inset: 34% 0 0 0;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.3rem) clamp(1.5rem, 3.4vw, 2.6rem);
  background: linear-gradient(180deg, transparent 0%, var(--tint) 16%, var(--tint) 100%);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
/* reveal the copy / retire the label when the card comes forward */
.fan-card:hover .fan-card__body,
.fan-card:focus-within .fan-card__body,
.fan-card.is-open .fan-card__body { opacity: 1; transform: none; }
.fan-card:hover .fan-card__label,
.fan-card:focus-within .fan-card__label,
.fan-card.is-open .fan-card__label { opacity: 0; transform: translateY(6px); }

/* Featured (centre) card previews its copy AT REST — no hover needed; side
   cards stay clean until hover/focus. Desktop fan only (mobile keeps the
   tap-accordion, where an opened card shows its copy). */
@media (min-width: 768px) {
  .fan-card.is-featured .fan-card__body { opacity: 1; transform: none; }
  .fan-card.is-featured .fan-card__label { opacity: 0; }
}

.fan-card__kicker {
  margin-bottom: 0.55rem; color: rgb(var(--accent));
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.24em; line-height: 1.3; text-transform: uppercase;
}
.fan-card--hosts .fan-card__kicker { color: #4f7132; }
.fan-card--agents .fan-card__kicker { color: #9a6121; }
.fan-card--managers .fan-card__kicker { color: #315f9f; }
.fan-card__title {
  max-width: 18ch; color: var(--ink);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem); line-height: 1.03; letter-spacing: -0.03em;
}
.fan-card__lines {
  display: grid; gap: 0.42rem; list-style: none;
  max-width: 46ch; margin: clamp(0.85rem, 1.8vh, 1.2rem) 0 0; padding: 0;
}
.fan-card__lines li {
  position: relative; padding-left: 1.3rem;
  color: var(--ink-soft); font-size: clamp(0.82rem, 1vw, 0.95rem); line-height: 1.4;
}
.fan-card__lines li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.46rem; height: 0.26rem;
  border-left: 2px solid var(--amber-ink); border-bottom: 2px solid var(--amber-ink);
  transform: rotate(-45deg);
}
.fan-card__roi {
  display: inline-block; max-width: 50ch; margin-top: clamp(0.85rem, 1.8vh, 1.2rem);
  padding: 0.55rem 0.8rem; border: 1px solid rgba(var(--accent), 0.3);
  border-radius: 12px; background: rgba(255, 255, 255, 0.68);
  color: var(--ink); font-family: var(--display); font-size: 0.84rem; font-weight: 700; line-height: 1.32;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.fan-card__note {
  max-width: 55ch; margin-top: 0.5rem;
  color: var(--ink-faint); font-size: 0.7rem; line-height: 1.42;
}
/* CTA is a visual affordance; the full-card link above it does the navigating */
.fan-card__cta { margin-top: auto; align-self: flex-start; pointer-events: none; }
.fan-card__body > .fan-card__cta:first-child { margin-top: 1rem; }

/* Narrow desktop / tablet: tighten the fan spread. */
@media (max-width: 980px) and (min-width: 768px) {
  .fan__deck { width: 100%; height: min(68vh, 620px); }
  .fan-card { inset-inline: 8%; }
  .fan-card__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
}

/* Mobile <768: vertical tap-accordion — no fan, no absolute geometry.
   Rest cards stay simple (photo + seal + label); a tap opens the copy. */
@media (max-width: 767px) {
  .markets { padding-inline: clamp(1rem, 4vw, 1.4rem); }
  .markets__head { margin-bottom: 2.2rem; }
  .fan__deck {
    display: flex; flex-direction: column; gap: 0.85rem;
    width: 100%; height: auto; min-height: 0; perspective: none;
  }
  .fan-card {
    position: relative; inset: auto; z-index: auto;
    height: auto;
    transform: none !important; filter: none !important;
    box-shadow: 0 16px 40px rgba(30, 27, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  .fan-card__media { position: relative; inset: auto; height: 132px; }
  .fan-card.is-open .fan-card__media { height: 178px; }
  .fan-card__body {
    position: relative; inset: auto;
    opacity: 1; transform: none;
    padding: clamp(1.3rem, 5vw, 1.8rem);
    background: var(--tint);
    height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
    transition: none;
  }
  .fan-card.is-open .fan-card__body {
    height: auto; padding: clamp(1.3rem, 5vw, 1.8rem);
  }
  .fan-card__title { max-width: 20ch; font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
  .fan-card__lines li { font-size: 0.92rem; }
}

/* Reduced motion: no easing; the forward card shows its copy at rest and any
   reveal is instant, so the text is never gated behind a hover animation. */
@media (prefers-reduced-motion: reduce) {
  .fan-card, .fan-card__body, .fan-card__label, .fan-card__seal { transition: none !important; }
  .fan-card.is-featured .fan-card__body { opacity: 1; transform: none; }
  .fan-card.is-featured .fan-card__label { opacity: 0; }
}

/* ============================================================
   WHAT'S IN THE KIT — at-a-glance (#kit)
   The thinnest band on the page: four tiles, each an icon, a word
   and one meta. Static markup, no JS. A paper-2 wash separates it
   from the markets fan above and the story below.
   ============================================================ */
.glance {
  padding: clamp(3rem, 8vh, 5rem) clamp(1.2rem, 6vw, 6rem);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.glance__head { max-width: 760px; margin: 0 auto clamp(1.8rem, 4vh, 2.6rem); text-align: center; }

.glance__grid {
  display: grid; gap: clamp(0.7rem, 1.8vw, 1.1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 940px; margin: 0 auto; padding: 0; list-style: none;
}
.glance__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: clamp(1.1rem, 3vw, 1.7rem) 0.75rem;
  text-align: center;
  background: linear-gradient(168deg, #fff, var(--paper-2));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(30, 27, 23, 0.06);
}
.glance__icon {
  display: block; width: clamp(1.7rem, 4vw, 2.1rem); height: clamp(1.7rem, 4vw, 2.1rem);
  color: var(--amber-ink); margin-bottom: 0.25rem;
}
.glance__icon svg { display: block; width: 100%; height: 100%; }
.glance__word {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1rem, 2.2vw, 1.22rem); letter-spacing: -0.012em; line-height: 1.12;
}
.glance__meta { color: var(--ink-faint); font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.005em; }
.glance__cue {
  margin: clamp(1.3rem, 3vh, 1.9rem) auto 0; text-align: center;
  color: var(--ink-faint); font-size: 0.88rem; letter-spacing: 0.01em;
}

/* Full kit spec — collapsed by default so the glance stays a glance.
   Native <details>, no JS, same accordion language as the FAQ. */
.kitspec { max-width: 720px; margin: clamp(1rem, 2.5vh, 1.5rem) auto 0; }
.kitspec__summary {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: pointer; list-style: none; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-ink);
  padding: 0.7rem 1rem; border: 1px dashed rgba(200, 116, 60, 0.5);
  border-radius: 999px; background: #fff;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.kitspec__summary::-webkit-details-marker { display: none; }
.kitspec__summary:hover { border-color: var(--amber-ink); background: var(--paper-3); }
.kitspec__summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.kitspec__icon {
  width: 0.62rem; height: 0.62rem; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.kitspec[open] .kitspec__icon { transform: translateY(1px) rotate(-135deg); }
.kitspec__body {
  margin-top: 0.9rem; padding: clamp(1rem, 2.6vw, 1.5rem);
  background: linear-gradient(168deg, #fff, var(--paper-2));
  border: 1px solid var(--line); border-radius: 18px;
}
.kitspec__list { margin: 0; }
.kitspec__row {
  display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem 1rem;
  padding: 0.6rem 0; border-bottom: 1px dashed var(--line);
  font-size: 0.94rem; line-height: 1.45;
}
.kitspec__row:last-child { border-bottom: 0; }
.kitspec__row dt {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: 0.76rem; letter-spacing: 0.11em; text-transform: uppercase;
  padding-top: 0.15rem;
}
.kitspec__row dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 620px) {
  .kitspec__row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.7rem 0; }
}

/* "No card, no obligation." — sits directly under every primary CTA */
.ctanote {
  margin-top: 0.6rem; color: var(--ink-faint);
  font-size: 0.82rem; letter-spacing: 0.02em;
}

/* ============================================================
   TRANSFORMATION STORY — one property becoming the kit (#offer)
   Market chips up top; a single connecting rail threads four stages
   (send → become → film → site). The numbers stage moved out to #roi
   (homepage-flow-v2). Each stage's media swaps per market.
   IO-gated reveals; reduced motion shows resolved states.
   ============================================================ */
.story { padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 6vw, 6rem); }
.story__head { max-width: 820px; margin: 0 auto clamp(2.4rem, 6vh, 3.8rem); text-align: center; }

/* market chips (tablist) — accent per market, matching the fan */
.kit__chips {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.kit-chip {
  --acc: var(--amber-ink); --acc-rgb: 165, 88, 40;
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.01em;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.5rem 1.05rem;
  min-height: 44px;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.kit-chip--hosts    { --acc: #4f7132; --acc-rgb: 112, 142, 78; }
.kit-chip--agents   { --acc: #9a6121; --acc-rgb: 210, 150, 72; }
.kit-chip--managers { --acc: #315f9f; --acc-rgb: 78, 134, 214; }
.kit-chip:hover { color: var(--ink); border-color: rgba(var(--acc-rgb), 0.6); }
.kit-chip[aria-selected="true"] {
  color: #fff; background: var(--acc); border-color: var(--acc);
  box-shadow: 0 8px 20px rgba(var(--acc-rgb), 0.32);
}
.kit-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.story__title { transition: color 0.3s var(--ease); }
.story__echo {
  margin: 0.6rem auto 0; max-width: 60ch;
  font-family: var(--display); font-weight: 600; font-style: italic;
  font-size: clamp(0.92rem, 2.2vw, 1.08rem);
  color: var(--amber-ink); letter-spacing: 0.005em;
}

/* ---- the flow: a single connecting rail threading four numbered stages ---- */
.story__flow {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1000px; position: relative;
  display: grid; gap: clamp(2.4rem, 6vh, 4rem);
}
/* the rail — one vertical thread down the left through every numbered node */
.story__flow::before {
  content: ""; position: absolute; z-index: 0;
  left: 21px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg,
    rgba(200,116,60,0) 0%, rgba(200,116,60,0.5) 6%,
    rgba(200,116,60,0.5) 94%, rgba(200,116,60,0) 100%);
}

.stage {
  position: relative; margin: 0;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem); align-items: start;
}
.stage__mark {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--amber-ink); color: var(--amber-ink);
  box-shadow: 0 6px 16px rgba(30,27,23,0.10);
}
.stage__num { font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1; }
.stage__panel { min-width: 0; padding-top: 0.15rem; }

.stage__cap { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
.stage__step {
  font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-ink);
}
.stage__desc { color: var(--ink); font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.4; max-width: 48ch; }

/* ---- Stage 1: the dull phone frames you send ---- */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.55rem, 1.8vw, 1rem); }
.frames--become { gap: clamp(0.6rem, 2vw, 1.1rem); }
.frame { margin: 0; min-width: 0; }
.frame--send { position: relative; }
.frame--send img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: 7px; border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(30,27,23,0.16);
  /* deliberately plain — a touch flat + cool, like an unedited phone capture */
  filter: saturate(0.8) brightness(0.99) contrast(0.95);
}
.frame--send:nth-child(1) { transform: rotate(-1.4deg); }
.frame--send:nth-child(2) { transform: rotate(0.7deg); }
.frame--send:nth-child(3) { transform: rotate(-0.5deg); }

/* ---- Stage 2: the SAME frames, wiped to their delivered versions ---- */
.frame--become {
  position: relative; overflow: hidden; border-radius: 11px;
  aspect-ratio: 3 / 2; background: #14110d; cursor: default;
  box-shadow: 0 12px 30px rgba(30,27,23,0.16); border: 1px solid var(--line-2);
}
.frame--become:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.frame--become img, .frame__before img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* the "before" layer covers, then wipes left to reveal the delivered "after" */
.frame__before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 0 0 0); }
.frame__before img { filter: saturate(0.8) brightness(0.99) contrast(0.95); }
.frame--become.is-resolved .frame__before { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease); }

.frame__badge {
  position: absolute; top: 0.5rem; z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.22rem 0.48rem; border-radius: 999px;
  transition: opacity 0.5s var(--ease);
}
.frame__badge--before { left: 0.5rem; background: rgba(30,27,23,0.66); color: rgba(247,242,234,0.94); opacity: 1; }
.frame__badge--after  { right: 0.5rem; background: var(--amber-ink); color: var(--cream); opacity: 0; }
.frame--become.is-resolved .frame__badge--before { opacity: 0; }
.frame--become.is-resolved .frame__badge--after  { opacity: 1; }
.frame__name {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
  padding: 1.6rem 0.6rem 0.5rem;
  font-family: var(--display); font-weight: 700; font-size: 0.72rem; color: var(--cream);
  background: linear-gradient(to top, rgba(20,17,13,0.9), transparent);
}
.frames__note { margin-top: 0.85rem; color: var(--ink-faint); font-size: 0.84rem; line-height: 1.45; font-style: italic; }

/* ---- Stage 3: the property film in a cinematic frame ---- */
.filmframe {
  position: relative; margin: 0; max-width: 760px; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
  background: #14110d; border: 1px solid var(--line-2);
  box-shadow: 0 22px 50px rgba(30,27,23,0.18);
}
.filmframe__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.filmframe__play {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 0; color: var(--cream);
  background: radial-gradient(60% 60% at 50% 46%, rgba(30,27,23,0.30), rgba(30,27,23,0.55));
  transition: opacity 0.35s var(--ease);
}
.filmframe__play svg {
  width: 30px; height: 30px; padding: 0.85rem; box-sizing: content-box;
  background: rgba(247,242,234,0.16); border: 1.5px solid rgba(247,242,234,0.7);
  border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.filmframe:hover .filmframe__play svg { transform: scale(1.06); background: rgba(200,116,60,0.5); }
.filmframe__play-label {
  font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.filmframe__play:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }
.filmframe.is-playing .filmframe__play { opacity: 0; pointer-events: none; }
.filmframe__tag {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.2em;
  padding: 0.24rem 0.5rem; border-radius: 5px;
  background: rgba(30,27,23,0.72); color: var(--cream);
}

/* ---- Stage 4: the delivered single-property site, browser-framed ---- */
.siteframe {
  display: block; margin: 0; max-width: 760px; text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--line-2); box-shadow: 0 22px 50px rgba(30,27,23,0.16);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.siteframe:hover { border-color: rgba(200,116,60,0.45); box-shadow: 0 28px 60px rgba(30,27,23,0.22); }
.siteframe:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.siteframe__bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.7rem; background: var(--paper-3); border-bottom: 1px solid var(--line);
}
.siteframe__dots { display: inline-flex; gap: 0.3rem; }
.siteframe__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.siteframe__dots i:nth-child(1) { background: #d98b6a; }
.siteframe__dots i:nth-child(2) { background: #dcc178; }
.siteframe__dots i:nth-child(3) { background: #8fae7a; }
.siteframe__url {
  flex: 1; text-align: center; font-family: var(--sans); font-size: 0.7rem;
  color: var(--ink-faint); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.18rem 0.7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.siteframe__shotwrap { position: relative; overflow: hidden; }
.siteframe__shot {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9.4;
  object-fit: cover; object-position: top center; transition: transform 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .siteframe:hover .siteframe__shot { transform: scale(1.03); } }
.siteframe__go {
  position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: var(--amber-ink); color: var(--cream);
}

/* ---- Stage 5: the ROI one-pager as a real-looking paper document ---- */
.roidoc { margin: 0; max-width: 440px; }
.roidoc__paper {
  position: relative; padding: clamp(1.3rem, 3.4vw, 1.9rem);
  background: linear-gradient(180deg, #fffef9, #faf7ef);
  border: 1px solid var(--line-2); border-radius: 6px;
  box-shadow: 0 26px 56px rgba(30,27,23,0.16), inset 0 1px 0 rgba(255,255,255,0.8);
}
.roidoc__paper::after {   /* a soft dog-eared corner to read as paper */
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--paper-3) 0 50%, transparent 50%);
  border-bottom-left-radius: 4px;
}
.roidoc__masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding-bottom: 0.7rem; margin-bottom: 0.9rem; border-bottom: 2px solid var(--ink);
}
.roidoc__brand {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.18em; color: var(--ink);
}
.roidoc__kicker {
  font-family: var(--sans); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.roidoc__title {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--ink); margin-bottom: 0.9rem;
}
.roidoc__rows { margin: 0; }
.roidoc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px dashed var(--line);
}
.roidoc__row dt { color: var(--ink-soft); font-size: 0.96rem; }
.roidoc__row dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.roidoc__row--sum { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 0.2rem; padding-top: 0.75rem; }
.roidoc__row--sum dt { color: var(--ink); font-weight: 700; }
.roidoc__row--sum dd { color: var(--green); font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
.roidoc__foot {
  margin-top: 1rem; color: var(--ink-faint); font-size: 0.8rem; line-height: 1.45;
}
.roidoc__foot b { color: var(--green); font-weight: 800; }
.roidoc__cap {
  margin-top: 0.8rem; color: var(--ink-faint); font-size: 0.84rem; font-style: italic; line-height: 1.4;
}

/* ---- flash pulse: a ripple down the numbered marks on market switch ---- */
@keyframes markPulse {
  0%   { box-shadow: 0 6px 16px rgba(30,27,23,0.10), 0 0 0 0 rgba(200,116,60,0.55); }
  40%  { box-shadow: 0 6px 16px rgba(30,27,23,0.10), 0 0 0 9px rgba(200,116,60,0); }
  100% { box-shadow: 0 6px 16px rgba(30,27,23,0.10), 0 0 0 0 rgba(200,116,60,0); }
}
.story__flow.is-flash .stage__mark { animation: markPulse 0.9s var(--ease) both; }
.story__flow.is-flash .stage:nth-child(2) .stage__mark { animation-delay: 0.08s; }
.story__flow.is-flash .stage:nth-child(3) .stage__mark { animation-delay: 0.16s; }
.story__flow.is-flash .stage:nth-child(4) .stage__mark { animation-delay: 0.24s; }
.story__flow.is-flash .stage:nth-child(5) .stage__mark { animation-delay: 0.32s; }

/* ---- market-swap crossfade of stage media ---- */
.frame img, .filmframe__video, .siteframe__shot { transition: opacity 0.32s var(--ease); }
.story__flow.is-swapping .frame img,
.story__flow.is-swapping .filmframe__video,
.story__flow.is-swapping .siteframe__shot { opacity: 0; }

/* ============================================================
   HOW IT WORKS — film-slate three beats
   Restrained clapper chrome; each slate stamps in on scroll.
   ============================================================ */
.how {
  padding: clamp(4rem, 10vh, 7rem) clamp(1.2rem, 6vw, 6rem);
  max-width: 1240px; margin: 0 auto;
}

/* ============================================================
   FAQ — native <details> accordion (index)
   ============================================================ */
.faq {
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.2rem, 6vw, 6rem);
  max-width: 900px; margin: 0 auto;
}
.faq__head { max-width: 720px; margin: 0 auto clamp(1.8rem, 4vh, 2.6rem); text-align: center; }
.faq__list { display: grid; gap: 0.85rem; }
.faq__item {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(168deg, #fff, var(--paper-2));
  box-shadow: 0 10px 28px rgba(30,27,23,0.05);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.faq__item[open] { border-color: rgba(200,116,60,0.35); box-shadow: 0 18px 44px rgba(30,27,23,0.09); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1rem, 1.9vw, 1.16rem); color: var(--ink);
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--amber-ink); }
.faq__item[open] .faq__q { color: var(--amber-ink); }
.faq__q:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: -3px; border-radius: 12px; }
/* plus/minus glyph, built from two bars; the vertical bar hides when open */
.faq__icon {
  flex: none; position: relative; width: 18px; height: 18px; color: var(--amber-ink);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.faq__icon::before { top: 8px; left: 1px; width: 16px; height: 2px; }
.faq__icon::after {
  top: 1px; left: 8px; width: 2px; height: 16px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.faq__item[open] .faq__icon::after { opacity: 0; transform: rotate(90deg); }
.faq__a {
  padding: 0 1.35rem 1.25rem;
  color: var(--ink-soft); font-size: clamp(0.95rem, 1.5vw, 1.02rem); line-height: 1.6;
}
.faq__a p { margin: 0; }
.faq__a b { color: var(--ink); font-weight: 600; }
.faq__was { text-decoration: line-through; color: var(--ink-faint); margin-right: 0.15em; font-weight: 500; }
.how__head { max-width: 720px; margin-bottom: clamp(2.2rem, 5vh, 3.2rem); }
.how__slates {
  list-style: none; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.slate {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.7rem 1.7rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(168deg, #fff, var(--paper-2));
  box-shadow: 0 16px 40px rgba(30,27,23,0.07);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.slate:hover { border-color: rgba(200,116,60,0.35); box-shadow: 0 24px 52px rgba(30,27,23,0.11); }
/* restrained clapper stripe — a thin diagonal-bar rail along the top edge */
.slate__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background:
    repeating-linear-gradient(-52deg, var(--ink) 0 12px, var(--paper) 12px 24px);
  opacity: 0.9;
}
.slate__num {
  display: inline-block; margin-top: 0.4rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; color: var(--amber-ink);
}
.slate__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink);
  margin: 0.7rem 0 0.7rem;
}
.slate__amp { color: var(--amber); font-weight: 600; }
.slate__line { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; max-width: 34ch; }

/* stamp-in on scroll — armed by initSlates(); default is fully visible */
.slate.is-armed { opacity: 0; transform: translateY(16px) scale(1.04) rotate(-0.6deg); }
.slate.is-armed.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.slate.is-armed[data-slate-delay="1"].is-in { transition-delay: 0.12s; }
.slate.is-armed[data-slate-delay="2"].is-in { transition-delay: 0.24s; }

/* ============================================================
   EARNINGS PAYOFF — one fused green figure (#stats)
   A self-drawing green earnings line rises across the plot and
   TERMINATES at the giant +21% (the number is the line's destination);
   bookings bars share the same baseline. One green palette, one
   attribution. Draw + count-up on scroll entry (initEarn), reduced-safe.
   ============================================================ */
.earn { max-width: 1040px; margin: clamp(3rem, 8vh, 5.5rem) auto 0; text-align: center; }

.earn__plot { position: relative; max-width: 980px; margin: 0 auto; }

/* the graph carries the line, its baseline, the bars and the end dot */
.earn__graph { position: relative; width: 100%; aspect-ratio: 100 / 40; }
.earn__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.earn__base { stroke: var(--green); stroke-width: 2; opacity: 0.26; }
.earn__line {
  fill: none; stroke: var(--green); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* bookings bars — share the graph baseline (bottom), sit on the low-left */
.earn__bars {
  position: absolute; left: 0.5%; bottom: 10%; width: 45%; height: 40%;
  display: flex; align-items: flex-end; gap: 3%; z-index: 1;
}
.earn__bars span {
  flex: 1 1 0; height: var(--h, 50%); min-height: 5px;
  border-radius: 4px 4px 1px 1px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--green-2), var(--green)); opacity: 0.82;
}
.earn__barlabel {
  position: absolute; left: 0.5%; bottom: 1%; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
}
.earn__barlabel b { font-weight: 800; }

/* the line's end dot — the hand-off point where the number begins */
.earn__dot {
  position: absolute; left: 59.7%; top: 11.3%; width: 15px; height: 15px;
  transform: translate(-50%, -50%); border-radius: 999px;
  background: var(--green); box-shadow: 0 0 0 5px rgba(111,154,74,0.22); z-index: 3;
}

/* the giant number — GREEN, the line's destination */
.earn__figure { position: absolute; left: 56.5%; top: 0; width: 43%; text-align: left; z-index: 3; }
.earn__num {
  display: block; font-family: var(--display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.2rem, 12vw, 8.5rem); line-height: 0.82; letter-spacing: -0.03em;
  background: linear-gradient(155deg, var(--green-2) 0%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.earn__cap {
  display: block; margin-top: 0.5rem;
  color: var(--ink-soft); font-weight: 600; font-size: clamp(0.9rem, 2vw, 1.15rem); line-height: 1.28;
}

/* armed (motion OK): line hidden, bars flat, dot hidden → draw on entry.
   Not armed (reduced motion / no JS) = complete, no transition. */
.earn__plot.is-armed .earn__bars span { transform: scaleY(0); }
.earn__plot.is-armed .earn__dot { opacity: 0; }
.earn__plot.is-armed.is-drawn .earn__line { transition: stroke-dashoffset 1.5s var(--ease); }
.earn__plot.is-armed.is-drawn .earn__bars span { transform: scaleY(1); transition: transform 0.7s var(--ease); }
.earn__plot.is-armed.is-drawn .earn__bars span:nth-child(1) { transition-delay: 0.60s; }
.earn__plot.is-armed.is-drawn .earn__bars span:nth-child(2) { transition-delay: 0.70s; }
.earn__plot.is-armed.is-drawn .earn__bars span:nth-child(3) { transition-delay: 0.80s; }
.earn__plot.is-armed.is-drawn .earn__bars span:nth-child(4) { transition-delay: 0.90s; }
.earn__plot.is-armed.is-drawn .earn__bars span:nth-child(5) { transition-delay: 1.00s; }
.earn__plot.is-armed.is-drawn .earn__dot { opacity: 1; transition: opacity 0.4s var(--ease) 1.2s; }

.earn__attrib {
  margin: clamp(1.2rem, 3.5vh, 2rem) auto 0; max-width: 52ch;
  color: var(--ink-faint); font-size: clamp(0.86rem, 1.7vw, 0.98rem); line-height: 1.45;
}
.earn__cite { color: var(--ink-faint); }

/* narrow: number drops below the graph, centered; line still climbs to its dot */
@media (max-width: 620px) {
  .earn__graph { aspect-ratio: 100 / 50; }
  .earn__figure { position: static; width: auto; text-align: center; margin-top: 0.4rem; }
  .earn__cap { max-width: 26ch; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   THE ROI — payback section (#roi)
   The one-pager document beside the green earnings figure. Both were
   moved here from #offer; this block only lays them out side by side
   and cancels the standalone top margin .earn carried on its own.
   ============================================================ */
.roi {
  padding: clamp(4rem, 10vh, 6.5rem) clamp(1.2rem, 6vw, 6rem);
  max-width: 1240px; margin: 0 auto;
}
.roi__head { max-width: 780px; margin: 0 auto clamp(2.2rem, 5vh, 3.2rem); text-align: center; }
.roi__sub {
  margin-top: 1rem; margin-inline: auto; max-width: 52ch;
  color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.55;
}
.roi__body {
  display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  max-width: 1120px; margin: 0 auto;
}
.roi__body .roidoc { margin-inline: auto; }
.roi__body .earn { margin-top: 0; }
@media (max-width: 940px) {
  .roi__body { grid-template-columns: minmax(0, 1fr); }
  .roi__body .earn { margin-top: clamp(1.6rem, 4vh, 2.4rem); }
}

/* ============================================================
   PROPERTY TRIO — liquid-glass buttons w/ 3D pop-out.
   overflow:visible lets the trio3d.js GLB canvas overflow the pane
   on pop-out; the CSS photo pop-out below is the graceful fallback
   for any button whose GLB fails to load.
   ============================================================ */
.trio {
  padding: clamp(4.5rem, 11vh, 7.5rem) clamp(1.2rem, 6vw, 6rem) clamp(5rem, 12vh, 8rem);
  max-width: 1320px; margin: 0 auto;
}
.trio__head { max-width: 760px; margin: 0 auto clamp(3rem, 7vh, 4.5rem); text-align: center; }
.trio__sub { margin-top: 1rem; color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.2rem); }

.trio__row {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* headroom above the cards so the hover pop-out (tallest = the tower) rises into
   empty space, never over the section headline. Desktop / hover-capable only —
   on touch the media is a static poster, so no headroom is needed. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .trio__row { margin-top: clamp(2.25rem, 5.5vw, 5.25rem); }
}

/* the glass button — perspective host + clickable link */
.glass {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 4 / 5; min-height: 360px;
  perspective: 1100px;
  border-radius: 26px;
  overflow: visible;   /* let the 3D pop-out overflow the pane */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.glass__scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

/* the frosted pane (the "button" you see at rest) */
.glass__pane {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden;
  /* per-property hue: a super-light tint bloom sits over the frost so the
     glass still reads as glass. --tint is set per button in index.html. */
  background:
    radial-gradient(125% 100% at 50% 12%, var(--tint, transparent), transparent 72%),
    linear-gradient(155deg, rgba(255,255,255,0.62), rgba(255,255,255,0.26) 46%, rgba(255,255,255,0.42));
  /* blur kept at 10: three panes re-blur their backdrop as the trio scrolls
     through the viewport; the Apple-glass look holds at 10. */
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -26px 44px rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(200,116,60,0.06),
    0 26px 54px rgba(30,27,23,0.16);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  transform: translateZ(0);
}
/* faint tinted photo living under the glass so you know the space */
.glass__fill {
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover; background-position: center;
  opacity: 0.16; filter: saturate(0.9) contrast(1.02);
  transition: opacity 0.5s var(--ease);
}
/* gradient rim light along the top-left */
.glass__pane::before {
  content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), transparent 34%);
  mix-blend-mode: screen; opacity: 0.7;
}
/* specular highlight that tracks the pointer */
.glass__spec {
  position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: radial-gradient(220px circle at var(--sx, 30%) var(--sy, 22%), rgba(255,255,255,0.85), transparent 60%);
  opacity: 0.55; mix-blend-mode: screen;
  transition: opacity 0.5s var(--ease);
}

/* ============================================================
   COOLER-CARD treatments (video trio). Three premium cues, all
   transform/opacity only, that make the glass feel alive and sell
   the building "stepping out" on hover:
     (a) .glass__bloom  — per-property hue halo that blooms on hover
     (b) .glass__ground — contact shadow that spreads as the home lifts
     (c) .glass__sheen  — slow idle light-sweep across the glass (IO-gated)
   ============================================================ */

/* (a) hue bloom — soft coloured halo around the card, keyed to --tint */
.glass__bloom {
  position: absolute; inset: -16%; z-index: 0; pointer-events: none;
  clip-path: inset(16%);
  background: radial-gradient(58% 50% at 50% 46%, var(--tint, rgba(200,116,60,0.14)), transparent 72%);
  opacity: 0.4; filter: blur(16px); transform: scale(0.92);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  will-change: opacity, transform;
}

/* (b) ground shadow — lives on the glass under the building's base; widens,
   softens and fades as the home rises, reading as a genuine liftoff shadow */
.glass__ground {
  position: absolute; left: 50%; bottom: 33%; z-index: 1; pointer-events: none;
  width: 58%; height: 13%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(30,27,23,0.32), transparent 72%);
  transform: translate(-50%, 50%) scaleX(0.82);
  opacity: 0.5; filter: blur(3px);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease);
  will-change: transform, opacity;
}

/* (c) idle sheen — a single soft light streak sweeps the glass, then rests.
   Only runs while the card is on screen (.glass--live, set by trio-video.js). */
.glass__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(114deg, transparent 40%, rgba(255,255,255,0.42) 50%, transparent 60%);
  transform: translateX(-130%); opacity: 0; mix-blend-mode: screen;
}
.glass--live .glass__sheen {
  opacity: 0.55;
  animation: glassSheen 7s var(--ease) infinite;
}
@keyframes glassSheen {
  0%   { transform: translateX(-130%); }
  22%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* the title plate — name + tagline, anchored to the bottom of the glass */
.glass__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.5rem 1.5rem 1.6rem;
  transform: translateZ(24px);
  transition: transform 0.5s var(--ease);
}
/* the category pill now rides at the TOP-LEFT of the card, clear of the
   building — an editorial eyebrow tag. Later in DOM than the media, so it
   always stays legible even as the building grows up behind it on hover. */
.glass__kind {
  position: absolute; top: 1.35rem; left: 1.45rem; z-index: 5;
  display: inline-block; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: #fff; background: var(--amber-ink); font-weight: 600;
  padding: 0.36rem 0.72rem; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(200,116,60,0.3);
  transform: translateZ(24px);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.glass__name {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink);
  text-shadow: 0 1px 10px rgba(252,251,248,0.6);
}
.glass__tag {
  display: block; margin-top: 0.6rem; max-width: 22ch;
  font-size: clamp(0.82rem, 1.5vw, 0.92rem); line-height: 1.3;
  color: var(--ink-soft); text-shadow: 0 1px 8px rgba(252,251,248,0.6);
}
.glass__go {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--amber-ink);
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* the photo that pops OUT of the glass on hover */
.glass__pop {
  position: absolute; left: 8%; right: 8%; top: 9%; z-index: 3;
  aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background-image: var(--img); background-size: cover; background-position: center;
  box-shadow: 0 2px 6px rgba(30,27,23,0.18);
  opacity: 0; transform: translateZ(2px) scale(0.9) rotateX(6deg);
  transform-origin: 50% 60%;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform, opacity;
}
/* a second, offset parallax plate for layered depth */
.glass__pop2 {
  position: absolute; left: 14%; right: 14%; top: 15%; z-index: 2;
  aspect-ratio: 4 / 3; border-radius: 14px;
  background: linear-gradient(160deg, rgba(200,116,60,0.5), rgba(221,137,79,0.2));
  opacity: 0; transform: translateZ(1px) scale(0.86);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* ---- HOVER / FOCUS: pop the property out in 3D ---- */
.glass:hover .glass__pop,
.glass:focus-visible .glass__pop {
  opacity: 1; transform: translateZ(72px) scale(1.06) rotateX(-7deg);
  box-shadow: 0 40px 60px rgba(30,27,23,0.32), 0 8px 18px rgba(30,27,23,0.18);
}
.glass:hover .glass__pop2,
.glass:focus-visible .glass__pop2 {
  opacity: 0.85; transform: translateZ(40px) scale(0.98) translateY(6px);
}
.glass:hover .glass__pane,
.glass:focus-visible .glass__pane {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -26px 44px rgba(255,255,255,0.32),
    inset 0 0 0 1px rgba(200,116,60,0.14),
    0 40px 78px rgba(30,27,23,0.22);
}
.glass:hover .glass__fill,
.glass:focus-visible .glass__fill { opacity: 0.08; }
.glass:hover .glass__go,
.glass:focus-visible .glass__go { opacity: 1; transform: translateY(0); }
.glass:hover .glass__label,
.glass:focus-visible .glass__label { transform: translateZ(44px); }

/* cooler-card cues intensify on hover/focus */
.glass:hover .glass__bloom,
.glass:focus-visible .glass__bloom { opacity: 0.92; transform: scale(1.06); }
.glass:hover .glass__ground,
.glass:focus-visible .glass__ground {
  transform: translate(-50%, 50%) scaleX(1.28) scaleY(0.82);
  opacity: 0.3; filter: blur(7px);
}
.glass:hover .glass__kind,
.glass:focus-visible .glass__kind {
  transform: translateZ(52px);
  box-shadow: 0 8px 22px rgba(200,116,60,0.42);
}
/* the "Enter the experience" arrow nudges forward */
.glass__go span { display: inline-block; transition: transform 0.4s var(--ease); }
.glass:hover .glass__go span,
.glass:focus-visible .glass__go span { transform: translateX(4px); }

/* keyboard focus ring (the button is a real link) */
.glass:focus-visible .glass__pane {
  border-color: var(--amber);
  outline: 2px solid var(--amber); outline-offset: 3px;
}

/* when a GLB loads, the live model takes over and the CSS photo pop-out
   steps aside (kept as fallback for buttons whose GLB 404s) */
.glass__model { border-radius: 26px; }
.glass--3d .glass__pop,
.glass--3d .glass__pop2 { display: none; }
.glass--3d .glass__fill { opacity: 0.09; }

/* when the hover-scrub turntable VIDEO takes over (trio-video.js), the CSS
   photo pop-out steps aside exactly like the GLB viewer does. The alpha
   webm/poster overflows the pane and carries the turn + pop itself. */
.glass--video .glass__pop,
.glass--video .glass__pop2 { display: none; }
.glass--video .glass__fill { opacity: 0.09; }
.glass__poster, .glass__video { border-radius: 26px; }

/* STRUCTURAL FIX (R4) for the SkyNine hover "cut-off" at devicePixelRatio 2:
   flatten the 3D context ONLY on video/poster cards. The scene still tilts in
   the .glass perspective (rotateX/rotateY from js/index.js reads fine) and the
   turntable media tilts with it, but no descendant lives in a preserve-3d
   context — so a per-frame `translate` (the apex float) can no longer make
   Chromium recompute a too-small cull rect and clip the tower. The photo/GLB
   pop-out plates (which needed translateZ depth) are display:none on these
   cards anyway, so nothing 3D is lost. Non-video cards keep preserve-3d. */
.glass--video .glass__scene { transform-style: flat; }

/* R5 HARDENING (belt-and-suspenders on top of the R4 flatten above) for the
   dpr2 SkyNine slice. The apex float writes `translate` to .glass__vidwrap
   every frame, re-rasterizing that composited layer; pinning both the wrapper
   and the <video> to a stable backing (backface-visibility:hidden — a promotion
   hint that adds NO transform and NOTHING visible) keeps their compositing
   layer + interest-rect stable across those per-frame writes, so Chromium can't
   latch a too-small cull rect mid-float. Behaviour/geometry unchanged; this is
   pure layer-stability insurance. See the ?trio debug block in js/trio-video.js. */
.glass--video .glass__vidwrap,
.glass--video .glass__video {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* R6 STRUCTURAL FIX (see js/trio-video.js R6 block): while a card is hovered/
   focused the building wrapper is re-parented into this document-level overlay,
   so its compositing-layer ancestor bounds are the WHOLE document — no small
   transformed/clipping ancestor remains, so a compositor cull rect can never
   land mid-building (the dpr2 SkyNine slice becomes structurally impossible).
   The overlay itself MUST stay free of transform/filter/clip/3D so it can never
   re-introduce a bounded interest rect; it sits below the site header (z 90). */
#trio-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  pointer-events: none; z-index: 40;
  transform: none; filter: none; perspective: none;
  overflow: visible; contain: none; clip-path: none;
}
#trio-overlay .glass__vidwrap,
#trio-overlay .glass__video {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* R6: while hovered the pill + name/tag label ride the overlay alongside the
   building (so they keep out-painting the popped tower — their z 5/4 beats the
   wrapper's z 3). Out there the card's :hover descendant rules no longer reach
   them, so re-key the two hover cues that live inside the label/pill onto state
   classes trio-video.js toggles directly on those elements. */
.glass__label--hi .glass__go { opacity: 1; transform: translateY(0); }
.glass__kind--hi {
  transform: translateZ(52px);
  box-shadow: 0 8px 22px rgba(200,116,60,0.42);
}

/* ============================================================
   PANE VARIANTS — founder QC switcher (?panes=a|b|c|d|e)
   Default (.trio with no .panes-* class) is 100% untouched — every
   rule below is scoped under a .panes-* class, so the live page keeps
   the approved look unless a param is present.

   Each card keeps a PER-PROPERTY colour identity. Card order is fixed
   in index.html, so nth-of-type keys the hue:
     1 = The Birchwood  (residential) — amber / dusk-rose
     2 = Sky Nine       (high-rise)   — blue  / indigo
     3 = The Birch Loft (cabin)       — forest / ember
   Hues are stored as space-separated RGB triplets so each variant can
   dial its own alpha via rgb(var(--h) / <a>). The building video/poster
   is alpha (transparent around the home) and sits ABOVE the pane, so the
   pane treatment shows around the building — that's what makes it pop.
   ============================================================ */
.trio[class*="panes-"] .glass:nth-of-type(1) { --h: 214 142 54;  --h2: 201 123 132; }  /* amber  -> dusk rose */
.trio[class*="panes-"] .glass:nth-of-type(2) { --h: 78 134 214;  --h2: 84 88 176;   }  /* blue   -> indigo    */
.trio[class*="panes-"] .glass:nth-of-type(3) { --h: 112 142 78;  --h2: 201 113 60;  }  /* forest -> ember     */

/* ---- A. Saturated bloom — same design, tint ~4x stronger + deeper hue.
   The building keeps its clean glass but the property colour reads clearly. */
.trio.panes-a .glass__pane {
  background:
    radial-gradient(125% 100% at 50% 12%, rgb(var(--h) / 0.44), transparent 70%),
    linear-gradient(155deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 46%, rgba(255,255,255,0.34));
}
.trio.panes-a .glass__bloom {
  background: radial-gradient(58% 50% at 50% 46%, rgb(var(--h) / 0.55), transparent 72%);
  opacity: 0.6;
}
.trio.panes-a .glass:hover .glass__bloom,
.trio.panes-a .glass:focus-visible .glass__bloom { opacity: 1; }

/* ---- B. Duotone gradient — a rich two-stop diagonal per property.
   Medium opacity over a thin white glass wash so the frost still reads;
   a soft light foot behind the label keeps the ink name legible. */
.trio.panes-b .glass__pane {
  background:
    linear-gradient(158deg, rgb(var(--h) / 0.62) 0%, rgb(var(--h2) / 0.66) 100%),
    linear-gradient(155deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14));
}
.trio.panes-b .glass__bloom {
  background: radial-gradient(58% 50% at 50% 46%, rgb(var(--h) / 0.5), transparent 72%);
  opacity: 0.55;
}
/* legibility foot: a soft light scrim under the title plate */
.trio.panes-b .glass__label,
.trio.panes-d .glass__label {
  background: linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0.32) 46%, transparent);
  border-radius: 0 0 26px 26px;
  padding-top: 2.4rem;
}
.trio.panes-b .glass__name { text-shadow: 0 1px 12px rgba(252,251,248,0.9); }

/* ---- C. Dark ink pane — deep charcoal glass with the property hue as a
   glow halo behind the building; dusk homes + warm windows pop hard.
   Label / go colours FLIP to cream so text stays legible on the dark pane. */
.trio.panes-c .glass__pane {
  background:
    radial-gradient(120% 82% at 50% 6%, rgb(var(--h) / 0.5), transparent 60%),
    linear-gradient(160deg, #211d18, #14110d 72%);
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -30px 50px rgba(0,0,0,0.4),
    0 26px 54px rgba(0,0,0,0.5);
}
.trio.panes-c .glass:hover .glass__pane,
.trio.panes-c .glass:focus-visible .glass__pane {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -30px 50px rgba(0,0,0,0.45),
    0 40px 78px rgba(0,0,0,0.55);
}
.trio.panes-c .glass__bloom {
  background: radial-gradient(58% 50% at 50% 40%, rgb(var(--h) / 0.7), transparent 70%);
  opacity: 0.7;
}
.trio.panes-c .glass:hover .glass__bloom,
.trio.panes-c .glass:focus-visible .glass__bloom { opacity: 1; }
.trio.panes-c .glass__fill { opacity: 0.2; filter: saturate(1.05) contrast(1.05) brightness(1.08); }
.trio.panes-c .glass:hover .glass__fill,
.trio.panes-c .glass:focus-visible .glass__fill { opacity: 0.1; }
.trio.panes-c .glass__pane::before { opacity: 0.28; }       /* dim the white top rim on dark */
.trio.panes-c .glass__spec { opacity: 0.3; }
.trio.panes-c .glass__name { color: var(--paper); text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.trio.panes-c .glass__tag  { color: rgba(247,242,234,0.78); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.trio.panes-c .glass__go   { color: var(--amber-hi); }
.trio.panes-c .glass__kind { box-shadow: 0 4px 14px rgba(0,0,0,0.45); }

/* ---- D. Sky wash — a soft VERTICAL atmospheric gradient per property, as if
   the home sits in its own light: warm dusk / blue hour / golden forest. */
.trio.panes-d .glass:nth-of-type(1) .glass__pane {
  background:
    linear-gradient(180deg, rgba(243,217,176,0.72) 0%, rgba(233,181,126,0.66) 46%, rgba(217,140,106,0.6) 100%),
    linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
}
.trio.panes-d .glass:nth-of-type(2) .glass__pane {
  background:
    linear-gradient(180deg, rgba(203,217,240,0.72) 0%, rgba(143,169,218,0.66) 46%, rgba(92,111,176,0.6) 100%),
    linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
}
.trio.panes-d .glass:nth-of-type(3) .glass__pane {
  background:
    linear-gradient(180deg, rgba(232,228,184,0.72) 0%, rgba(185,199,126,0.64) 46%, rgba(134,162,78,0.6) 100%),
    linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
}
.trio.panes-d .glass__bloom {
  background: radial-gradient(58% 50% at 50% 30%, rgb(var(--h) / 0.4), transparent 72%);
  opacity: 0.5;
}
.trio.panes-d .glass__name { text-shadow: 0 1px 12px rgba(252,251,248,0.9); }

/* ---- E. Edge-lit frame + base uplight (studio idea).
   Pop the colour on the FRAME, not the fill: a vivid per-property gradient
   ring plus a coloured uplight pooled at the base. The pane centre stays
   clean frosted glass, so the building + text read crisp while the card
   still carries a strong colour identity. */
.trio.panes-e .glass__pane {
  background:
    radial-gradient(82% 55% at 50% 108%, rgb(var(--h) / 0.5), transparent 68%),
    linear-gradient(155deg, rgba(255,255,255,0.6), rgba(255,255,255,0.28) 46%, rgba(255,255,255,0.4));
  border-color: transparent;
}
/* the gradient ring — repurpose the pane's rim pseudo as a masked border */
.trio.panes-e .glass__pane::before {
  background: linear-gradient(150deg, rgb(var(--h) / 0.95), rgb(var(--h2) / 0.95));
  mix-blend-mode: normal; opacity: 1;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.trio.panes-e .glass__bloom {
  background: radial-gradient(60% 46% at 50% 82%, rgb(var(--h) / 0.55), transparent 70%);
  opacity: 0.55;
}
.trio.panes-e .glass:hover .glass__bloom,
.trio.panes-e .glass:focus-visible .glass__bloom { opacity: 0.95; }
.trio.panes-e .glass__name { text-shadow: 0 1px 12px rgba(252,251,248,0.85); }

/* ============================================================
   CONTACT — the booking destination (#contact). Emotional lead-in
   + two action cards (free-sample email / 15-min call) + a small
   reassurance row. Carries the spinning-aperture signature.
   ============================================================ */
.contact {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 14vh, 9rem) clamp(1.2rem, 6vw, 6rem);
  background:
    radial-gradient(80% 120% at 50% 118%, rgba(200,116,60,0.16), transparent 60%),
    var(--paper);
  border-top: 1px solid var(--line);
}
.contact__aperture {
  position: absolute; top: 42%; left: 50%; width: min(74vw, 620px);
  max-width: 100%;
  transform: translate(-50%, -50%); opacity: 0.05; z-index: 0; pointer-events: none;
  color: var(--amber);
  animation: spin 70s linear infinite;
}
.contact__aperture .brandmark__svg { width: 100%; height: auto; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.contact__inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; }
.contact__head { text-align: center; max-width: 720px; margin: 0 auto; }
.contact__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 3.9rem); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); margin: 0.7rem 0 1.1rem;
}
.contact__title em { font-style: normal; color: var(--amber); }
.contact__sub {
  color: var(--ink-soft); font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  max-width: 50ch; margin: 0 auto;
}

/* two action cards side by side */
/* PASTE BAR — the primary conversion object: a big URL-styled field + one
   action that opens the founder's inbox with the pasted link prefilled. */
.paste {
  max-width: 760px; margin: clamp(2.4rem, 6vh, 3.4rem) auto 0;
  text-align: center;
}
.paste__label {
  display: block; margin-bottom: 0.7rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber-ink);
}
.paste__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px;
  box-shadow: 0 18px 44px rgba(30,27,23,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.paste__bar:focus-within {
  border-color: rgba(200,116,60,0.6);
  box-shadow: 0 22px 52px rgba(200,116,60,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
.paste__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-faint); }
.paste__icon svg { width: 1.25rem; height: 1.25rem; }
.paste__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: clamp(0.95rem, 2vw, 1.08rem); color: var(--ink);
  padding: 0.55rem 0.3rem;
}
.paste__input::placeholder { color: var(--ink-faint); }
.paste__btn { flex: 0 0 auto; white-space: nowrap; }
.paste__hint {
  min-height: 1.2rem; margin-top: 0.7rem;
  color: var(--amber-ink); font-size: 0.84rem; line-height: 1.3;
}
.paste__hint:empty { min-height: 0; margin-top: 0; }
.paste__note { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.92rem; }

/* D-4 form additions (2026-08-05): two labelled fields, reason-per-field
   microcopy, inline errors, off-screen honeypot. The .paste__bar look is
   unchanged — it just repeats once per field now. */
.paste__field { margin-bottom: 1.1rem; text-align: left; }
.paste__field:last-of-type { margin-bottom: 1.3rem; }
.paste__why {
  margin: 0.15rem 0 0.5rem; color: var(--ink-faint);
  font-size: 0.84rem; line-height: 1.45;
}
.paste__err {
  min-height: 1.15rem; margin-top: 0.35rem;
  color: #a3341f; font-size: 0.84rem; line-height: 1.4;
}
.paste__input.is-invalid { outline: 2px solid #a3341f; outline-offset: 1px; }
.paste__btn.is-sending { opacity: 0.72; pointer-events: none; }
.paste__btn[disabled] { opacity: 0.72; pointer-events: none; }
/* honeypot — off screen, never focusable, never read out */
.paste__hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* SECONDARY — a quiet single-line call link, clearly subordinate */
.contact__alt {
  text-align: center; margin: clamp(1.6rem, 4vh, 2.2rem) auto 0;
  color: var(--ink-faint); font-size: 0.95rem;
}
.contact__alt-link {
  font-weight: 600; color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line-2); transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact__alt-link span { display: inline-block; transition: transform 0.3s var(--ease); }
.contact__alt-link:hover { color: var(--amber-ink); border-color: rgba(200,116,60,0.5); }
.contact__alt-link:hover span { transform: translateX(3px); }

/* reassurance row */
.contact__reassure {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.55rem 1.4rem;
  margin: clamp(2rem, 5vh, 2.8rem) auto 0; padding: 0;
}
.contact__reassure-item {
  position: relative; color: var(--ink-soft);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
}
.contact__reassure-item + .contact__reassure-item::before {
  content: ""; position: absolute; left: -0.76rem; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--amber);
}

/* ============================================================
   LAB HARVEST — tasteful upgrades ported from the component lab.
   All native-scroll, transform/opacity only, IO-gated, no new WebGL.
   ============================================================ */

/* ---- 1. Split-word headline reveal (masked rise) ----
   Words rise from behind a clip mask. Only [data-split] headings (hero line
   + two chapter titles) are armed by index.js; unarmed markup shows normally,
   so no-JS and reduced-motion users get plain, fully-visible headings. */
.rsplit__w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* pad + pull so ascenders/descenders/italics clear the clip edge */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.rsplit__i {
  display: inline-block;
  will-change: transform;
}
.rsplit__i--em { color: var(--amber); font-style: normal; }
/* armed: words tucked below the mask until the section scrolls in */
.rsplit.is-armed .rsplit__i {
  transform: translateY(112%);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsplit.is-armed.is-in .rsplit__i { transform: translateY(0); }

/* ---- 2. Before / After grade slider — the tools-grid HERO tile ----
   The craft proof: same room, straight-off-camera vs Compeo grade. Lives as a
   full-width first tile inside .improve__grid (drag / keyboard to compare). */
.mtile-hero {
  grid-column: 1 / -1;
  margin: 0 0 clamp(0.2rem, 1vw, 0.6rem);
}
.mtile-hero__cap {
  margin-top: 0.85rem; text-align: center;
  color: var(--ink-faint); font-size: 0.86rem; line-height: 1.55;
  max-width: 60ch; margin-left: auto; margin-right: auto;
}
.ba__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 66px rgba(30, 27, 23, 0.16);
  touch-action: pan-y;             /* vertical swipes scroll; horizontal drags the seam */
  cursor: ew-resize;
  background: var(--paper-3);
  isolation: isolate;
}
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}
/* the ungraded layer sits above the graded one, clipped to the left of the seam */
.ba__before {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}
/* grade removed: flatter contrast, cooler + slightly hazy, muted colour —
   a credible straight-off-the-camera capture, not a cartoon desaturation */
.ba__before .ba__img { filter: saturate(0.6) contrast(0.9) brightness(1.07); }
.ba__before::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(176, 188, 208, 0.16), rgba(150, 160, 178, 0.10) 60%),
    rgba(146, 158, 180, 0.06);
}

/* seam + handle */
.ba__divider {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--pos); width: 2px; margin-left: -1px;
  background: rgba(252, 251, 248, 0.92);
  box-shadow: 0 0 0 1px rgba(30, 27, 23, 0.12);
  pointer-events: none;
}
.ba__handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(252, 251, 248, 0.92);
  border: 1px solid rgba(30, 27, 23, 0.14);
  box-shadow: 0 6px 18px rgba(30, 27, 23, 0.22);
  color: var(--amber-ink);
  display: grid; place-items: center;
  cursor: ew-resize;
  pointer-events: auto;            /* focusable target for keyboard users */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ba__handle svg { width: 18px; height: 18px; display: block; }
.ba__handle:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* labels */
.ba__tag {
  position: absolute; bottom: 0.9rem; z-index: 3;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.34rem 0.62rem; border-radius: 999px;
  pointer-events: none;
}
.ba__tag--after { right: 0.9rem; background: var(--amber-ink); color: #fff; }
.ba__tag--before {
  left: 0.9rem; z-index: 3;
  background: rgba(30, 27, 23, 0.72); color: var(--paper);
  transition: opacity 0.25s var(--ease);
}
/* hide the "ungraded" chip once the seam has swept almost fully across */
.ba__stage.is-graded .ba__tag--before { opacity: 0; }

/* ---- 5. Primary-CTA specular sweep (one slow reflection per hover) ---- */
.paste__btn,
.siteheader__cta { position: relative; overflow: hidden; }
.paste__btn::before,
.siteheader__cta::before {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-200%) skewX(-16deg);
  pointer-events: none;
}
.paste__btn:hover::before,
.siteheader__cta:hover::before {
  transform: translateX(360%) skewX(-16deg);
  transition: transform 0.9s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .hero__film { width: min(92vw, 560px); }
  .hero__stage { padding-top: 6rem; }
  .glass { aspect-ratio: 4 / 4.4; min-height: 320px; }

  /* before/after: a taller frame reads better in a narrow column */
  .ba__stage { aspect-ratio: 4 / 3; }

  /* transformation story: tighten the rail and stack film/site/roi cleanly */
  .stage { grid-template-columns: 34px minmax(0, 1fr); gap: 0.9rem; }
  .story__flow::before { left: 16px; }
  .stage__mark { width: 34px; height: 34px; }
  .stage__num { font-size: 0.92rem; }
  .frames { gap: 0.4rem; }
  .frame__name { font-size: 0.62rem; padding: 1.2rem 0.45rem 0.4rem; }

  /* contact: paste bar stacks (input over button), reassurance goes vertical */
  .paste__bar { flex-wrap: wrap; border-radius: 22px; padding: 0.7rem; }
  .paste__input { flex: 1 1 100%; text-align: center; padding: 0.4rem 0.3rem 0.6rem; }
  .paste__btn { flex: 1 1 100%; justify-content: center; }
  .contact__reassure { flex-direction: column; gap: 0.7rem; }
  .contact__reassure-item + .contact__reassure-item::before { display: none; }

  /* ---- mobile header: compact CTA + hamburger, links drop into a panel ---- */
  .siteheader__nav { gap: 0.55rem; }
  .siteheader__cta { padding: 0.5rem 0.9rem; font-size: 0.8rem; }

  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--line-2);
    border-radius: 12px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .navtoggle__bars,
  .navtoggle__bars::before,
  .navtoggle__bars::after {
    content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .navtoggle__bars { position: relative; }
  .navtoggle__bars::before { position: absolute; left: 0; top: -6px; }
  .navtoggle__bars::after  { position: absolute; left: 0; top: 6px; }
  /* morph to an X when open */
  .navtoggle.is-open .navtoggle__bars { background: transparent; }
  .navtoggle.is-open .navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .navtoggle.is-open .navtoggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

  /* the dropdown panel — overrides base.css's ≤720 rule that hides the links */
  .siteheader__menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: 0.4rem clamp(1.1rem, 4vw, 2.8rem) 1rem;
    background: rgba(252, 251, 248, 0.97);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(30, 27, 23, 0.10);
  }
  .siteheader__menu.is-open { display: flex; }
  .siteheader__menu.is-open .siteheader__link {
    display: block; padding: 0.95rem 0.2rem; font-size: 1.02rem;
    color: var(--ink-soft); border-bottom: 1px solid var(--line);
  }
  .siteheader__menu.is-open .siteheader__link:last-child { border-bottom: 0; }
  /* the animated underline pseudo isn't meaningful stacked — hide it */
  .siteheader__menu.is-open .siteheader__link::after { display: none; }
}

/* ============================================================
   TOUCH + REDUCED MOTION — degrade the pop-out to a simple lift
   ============================================================ */
@media (hover: none) {
  .glass__scene { transition: transform 0.4s var(--ease); }
  .glass:active .glass__pane,
  .glass:focus-visible .glass__pane { transform: translateZ(0) translateY(-4px); }
  .glass__pop, .glass__pop2 { display: none; }
  .glass__go { opacity: 1; transform: none; }
  /* touch: calm card — no idle sweep, no lift shadow (poster is static) */
  .glass__sheen { display: none; }
  .glass__ground { display: none; }
}

/* ============================================================
   FLOW FALLBACK — WebGL2 unavailable: static soft amber wash
   (js/flow-hero.js adds .no-flow to <html> and hides the canvas)
   ============================================================ */
.no-flow .hero__flow { display: none; }
.no-flow .hero {
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(221,137,79,0.20), transparent 56%),
    radial-gradient(90% 80% at 18% 72%, rgba(200,116,60,0.12), transparent 60%),
    var(--paper);
}

/* ============================================================
   REDUCED MOTION — hold everything still
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__flow { display: none; }
  .hero { background:
      radial-gradient(120% 90% at 50% 30%, rgba(221,137,79,0.22), transparent 55%),
      radial-gradient(90% 80% at 20% 70%, rgba(200,116,60,0.12), transparent 60%),
      var(--paper); }
  .hero__cue-rail::after, .contact__aperture { animation: none; }
  .glass__scene { transition: none; }
  .glass__pop, .glass__pop2 { display: none; }
  .glass:hover .glass__pane, .glass:focus-visible .glass__pane { transform: translateY(-4px); }
  .glass__go { opacity: 1; transform: none; }
  /* reduced motion: no idle sweep (belt-and-suspenders; JS also skips it) */
  .glass__sheen { display: none; animation: none; }

  /* lab-harvest additions: hold still */
  .rsplit__i { transform: none !important; transition: none !important; }
  .paste__btn::before, .siteheader__cta::before { display: none; }
  .slate.is-armed, .slate.is-armed.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* transformation story: no crossfade dip, no wipe, no flash pulse */
  .frame img, .filmframe__video, .siteframe__shot { transition: none !important; opacity: 1 !important; }
  .frame--become .frame__before { transition: none !important; }
  .story__flow.is-flash .stage__mark { animation: none !important; }
  /* earnings figure: everything static and complete */
  .earn__plot.is-armed .earn__bars span { transform: scaleY(1) !important; }
  .earn__plot.is-armed .earn__dot { opacity: 1 !important; }
  .earn__line { transition: none !important; }
}

/* ============================================================
   WHAT WE IMPROVE — magnetic before/after grid  (#tools)
   Top-ranked reviewed transformations. Each tile holds a static
   before/after split at rest and live-wipes on hover / focus (tap
   toggles on touch). Five strongest + a "see N more" tile; expanding
   reveals the rest in place. Tiles rendered from the manifest.
   ============================================================ */
.improve {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.2rem, 6vw, 6rem) clamp(4rem, 10vh, 7rem);
  max-width: 1320px; margin: 0 auto;
}
.improve__head { max-width: 800px; margin: 0 auto clamp(1.8rem, 4vh, 2.6rem); text-align: center; }
.improve__sub { margin-top: 1rem; color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.2rem); }

/* the grid — 5 primary tiles + a "see more" tile, then the rest inline */
.improve__grid {
  display: grid; gap: clamp(0.8rem, 1.8vw, 1.1rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1160px; margin: 0 auto;
}
@media (max-width: 860px) { .improve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a single tile — a magnetic before/after card */
.mtile {
  position: relative; display: block; overflow: hidden;
  border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  border-radius: 16px; background: #14110d;
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 30px rgba(30,27,23,0.16);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mtile:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mtile.is-on { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(30,27,23,0.30); }
}
.mtile.is-on { box-shadow: 0 26px 54px rgba(30,27,23,0.30); }

.mtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the before layer sits above the after, clipped from the right; at rest it
   holds a 50/50 split, and wipes across while the tile is active */
.mtile__before {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.mtile.is-on .mtile__before { animation: mtile-wipe 3.4s var(--ease) infinite; }
/* a thin seam marks the split line at rest */
.mtile__seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 3;
  margin-left: -1px; background: rgba(247,242,234,0.9);
  box-shadow: 0 0 0 1px rgba(30,27,23,0.18);
  opacity: 0.9; transition: opacity 0.3s var(--ease);
}
.mtile.is-on .mtile__seam { opacity: 0; }

.mtile__tag {
  position: absolute; top: 0.55rem; z-index: 4;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.24rem 0.5rem; border-radius: 999px;
}
.mtile__tag--before { left: 0.55rem; background: rgba(30,27,23,0.62); color: rgba(247,242,234,0.92); }
.mtile__tag--after  { right: 0.55rem; background: var(--amber-ink); color: var(--cream); }

/* caption plate — name always shown, promise reveals when active */
.mtile__cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: block; padding: 2.4rem 0.9rem 0.85rem; text-align: left;
  background: linear-gradient(to top, rgba(20,17,13,0.92), rgba(20,17,13,0.28) 62%, transparent);
}
.mtile__name {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.94rem; color: var(--cream); letter-spacing: 0.005em;
}
.mtile__promise {
  display: block; margin-top: 0.15rem; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 0.78rem; line-height: 1.35; color: rgba(247,242,234,0.78);
  transition: max-height 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mtile.is-on .mtile__promise { max-height: 3.2rem; opacity: 1; }

@keyframes mtile-wipe {
  0%, 10%  { clip-path: inset(0 0 0 0); }      /* full before */
  48%, 60% { clip-path: inset(0 100% 0 0); }   /* full after  */
  100%     { clip-path: inset(0 0 0 0); }
}

/* the "see N more" / "show fewer" toggle tile — a paper card, not a photo.
   No fixed aspect-ratio: it stretches to its grid row's height so that when it
   spans a trailing gap (1–2 columns) it stays the same height as the photo
   tiles beside it instead of ballooning. */
.mtile--more {
  min-height: 9rem; align-self: stretch;
  min-width: 0; max-width: 100%; overflow: hidden;   /* clamp to its grid track — never force overflow */
  padding: 0.6rem; text-align: center;
  background: linear-gradient(165deg, #fff, var(--paper-2));
  border: 1px dashed rgba(200,116,60,0.5); box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  color: var(--amber-ink);
}
.mtile--more:hover { border-color: var(--amber-ink); background: linear-gradient(165deg, #fff, var(--paper-3)); }
.mtile--more .mtile__more-n { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.02em; }
.mtile--more .mtile__more-label { font-family: var(--display); font-weight: 600; font-size: 0.9rem; text-align: center; }
.mtile--more .mtile__more-sub { margin-top: 0.15rem; color: var(--ink-faint); font-size: 0.78rem; letter-spacing: 0.01em; }
.mtile--more .mtile__more-icon { width: 1.5rem; height: 1.5rem; transition: transform 0.3s var(--ease); }
.mtile--more:hover .mtile__more-icon { transform: translateY(3px); }
/* expanded, the same tile is the "Show fewer" control — chevron nudges up */
.mtile--more.is-expanded:hover .mtile__more-icon { transform: translateY(-3px); }

/* expandable extra tiles live INLINE in the same grid (no separate row), so
   the grid never leaves a hole. Hidden until the grid is expanded; the
   toggle tile stays in place and spans any trailing gap (set in JS). */
.mtile--extra { opacity: 0; transform: translateY(12px); }
.improve__grid:not(.is-expanded) .mtile--extra { display: none; }
.improve__grid.extras-in .mtile--extra {
  opacity: 1; transform: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

/* the range strip — every named fix from the manifest as one compact row of
   chips, so the whole menu is legible without expanding the grid. Stays
   visible on mobile, where the grid itself is capped at three tiles. */
.improve__range { max-width: 1000px; margin: clamp(1.8rem, 4.5vh, 2.8rem) auto 0; text-align: center; }
.improve__range-label {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-ink);
  margin-bottom: 0.9rem;
}
.improve__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.42rem;
  list-style: none; padding: 0; margin: 0;
}
.improve__chip {
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.005em; color: var(--ink-soft); white-space: nowrap;
}

/* footer note */
.improve__foot { max-width: 800px; margin: clamp(1.6rem, 4vh, 2.4rem) auto 0; text-align: center; }
.improve__note { color: var(--ink-faint); font-size: 0.85rem; line-height: 1.5; }
.improve__link {
  color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}

/* reduced motion: no auto-wipe — hold an honest static split; the extra
   tiles appear without transform */
@media (prefers-reduced-motion: reduce) {
  .mtile.is-on .mtile__before { animation: none; clip-path: inset(0 50% 0 0); }
  .mtile--extra { opacity: 1; transform: none; }
}

/* ============================================================
   CLOSE — trust band + deliverables + pricing (#close)
   The anti-slop trust band, then an invoice-style deliverables list
   beside one simple pricing block. The two-column body and its
   .deliverables / .kit3-m rules were briefly retired during
   homepage-flow-v2 and RESTORED 2026-07-28 at founder request: he
   wants the checklist card standing next to the price. It now lives
   in #close rather than the tail of #offer; the pricing still carries
   the #pricing anchor that the nav, about.html and faq.html link to.
   ============================================================ */
.close {
  padding: clamp(1rem, 3vh, 2rem) clamp(1.2rem, 6vw, 6rem) clamp(4rem, 10vh, 6.5rem);
  max-width: 1080px; margin: 0 auto;
}
.close .truststrip { margin-top: 0; }

.offer-detail__body {
  display: grid; gap: clamp(1.2rem, 3vw, 2.4rem);
  grid-template-columns: 1.35fr 1fr; align-items: stretch;
  max-width: 1080px; margin: clamp(2.6rem, 7vh, 4.5rem) auto 0;
}
@media (max-width: 820px) { .offer-detail__body { grid-template-columns: 1fr; } }

.deliverables {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.1rem);
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(168deg, #fff, var(--paper-2));
  box-shadow: 0 16px 40px rgba(30,27,23,0.06);
}
.deliverables__title {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-ink);
  margin-bottom: 0.9rem;
}
.deliverables__list { list-style: none; margin: 0; padding: 0; }
.deliverables__item {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.72rem 0; border-bottom: 1px dashed var(--line);
  font-size: clamp(0.98rem, 1.9vw, 1.06rem); color: var(--ink);
}
.deliverables__item:last-child { border-bottom: 0; }
.deliverables__tick {
  flex: 0 0 auto; width: 1rem; height: 1rem; align-self: center;
  color: var(--green); transform: translateY(0.05rem);
}
.deliverables__what { flex: 1 1 auto; font-weight: 600; }
.deliverables__meta {
  flex: 0 0 auto; text-align: right;
  color: var(--ink-faint); font-size: 0.86rem; letter-spacing: 0.005em;
}
.deliverables__fine {
  margin-top: 1rem; color: var(--ink-faint);
  font-size: 0.86rem; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600;
}

.pricing {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(1.6rem, 3.4vw, 2.3rem) clamp(1.5rem, 3.2vw, 2.2rem);
  border-radius: 20px; border: 1px solid rgba(200,116,60,0.32);
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(200,116,60,0.10), transparent 60%),
    linear-gradient(168deg, #fff, var(--paper-2));
  box-shadow: 0 20px 48px rgba(30,27,23,0.08);
}
.pricing__eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber-ink);
}
.pricing__amount {
  margin-top: 0.5rem;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--ink);
}
.pricing__amount b { font-weight: 800; color: var(--amber); }
.pricing__free { margin-top: 0.85rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.pricing__pm { margin-top: 0.55rem; color: var(--ink-faint); font-size: 0.92rem; line-height: 1.45; }
.pricing__cta { margin-top: 1.3rem; }

/* ============================================================
   QA FIXES (2026-07-21 sweep): mobile overflow + tap targets
   ============================================================ */
/* 390px horizontal overflow: decorative blooms/stages must never widen the page */
.glass__bloom { overflow: hidden; }
.hero__stage, .contact__aperture { max-width: 100%; }
.glass { overflow: hidden; }
@media (max-width: 480px) {
  .hero__stage, .contact__aperture { overflow-x: clip; }
}
/* Tap targets >= 44px (WCAG 2.5.8) without changing desktop look */
.siteheader__cta, .navtoggle { min-height: 44px; }
.kit-chip { min-height: 44px; }

/* Founder mobile pass 2026-07-22: hero CTA centered on small screens */
@media (max-width: 768px) {
  .hero__cta {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__stage { text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   MOBILE SIMPLE v1 (2026-07-22, founder-directed)
   ≤768px becomes a deliberately simple, numbers-and-visuals page:
   the heavy interactive sections are hidden and replaced by small
   mobile-only condensed blocks. Desktop (≥769px) is untouched — every
   mobile-only block below is display:none by default and only appears
   under the max-width:768px query; every desktop element is hidden
   ONLY inside that same query. birchwood-scroll.html is not affected.
   ============================================================ */

/* mobile-only blocks are hidden on every viewport by default (so desktop
   stays pixel-identical); the query below reveals them ≤768px */
.markets-m,
.ba-m,
.kit3-m,
.trio-m { display: none; }

@media (max-width: 768px) {
  /* ---- HERO: the gallery row collapses to a 2x2 ----
       No overlap and no negative margins anywhere, so it can never push a
       horizontal scrollbar. Kept deliberately compact: the hero also carries
       the logo film, the pitch line, the CTA, the micro-cue and the stat. */
  .kitspread {
    --h: 92px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.44rem; max-width: min(276px, 76vw); padding: 0;
  }
  .kitpiece { width: 100%; }
  .kitpiece__frame { height: auto; aspect-ratio: 16 / 10; }
  .kitpiece--site .kitpiece__frame { padding-top: 11px; }
  .kitpiece__bar { height: 11px; }
  .kitprint--back { display: none; }        /* the offset second print would peek out */
  .kitpiece__tag { font-size: 0.5rem; margin-top: 0.3rem; line-height: 1.15; }
  /* the one-pager's type is sized off --h on desktop; pin it here so the
     numbers stay legible in a short, wide cell */
  .kitdoc { padding: 0.45rem 0.5rem; }
  .kitdoc__brand { font-size: 0.5rem; margin-bottom: 0.3rem; }
  .kitdoc__rows { gap: 0.22rem; }
  .kitdoc__row { font-size: 0.56rem; gap: 0.3rem; padding-bottom: 0.18rem; }
  .kitdoc__row--sum { padding-top: 0.22rem; }
  .hero__pitch { font-size: 0.98rem; max-width: 42ch; }

  /* ---- MARKETS: hide the fan, show the simple 3-row list ---- */
  .markets .fan { display: none; }
  .markets-m {
    display: flex; flex-direction: column; gap: 0.7rem;
    max-width: 560px; margin: 0 auto; padding: 0; list-style: none;
  }
  .market-row { margin: 0; }
  .market-row__link {
    display: flex; align-items: center; gap: 0.9rem;
    min-height: 64px; padding: 0.95rem 1.05rem;
    text-decoration: none;
    background: linear-gradient(168deg, #fff, var(--paper-2));
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 10px 26px rgba(30, 27, 23, 0.07);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .market-row__link:active { border-color: rgba(200, 116, 60, 0.45); }
  .market-row__text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; min-width: 0; }
  .market-row__name {
    font-family: var(--display); font-weight: 700; font-size: 1.08rem;
    letter-spacing: -0.01em; color: var(--ink); line-height: 1.15;
  }
  .market-row__line { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.35; }
  .market-row__go {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--amber-ink); color: #fff; font-size: 1.05rem; line-height: 1;
  }
  .market-row--hosts    .market-row__go { background: #4f7132; }
  .market-row--agents   .market-row__go { background: #9a6121; }
  .market-row--managers .market-row__go { background: #315f9f; }

  /* ---- STORY: hide chips/echo + the 5 interactive stages; show ONE
       before→after visual. The +21% earn figure (kept) is the centerpiece. ---- */
  .story .kit__chips,
  .story__echo,
  .story__flow { display: none; }
  .story { padding-top: clamp(3.5rem, 9vh, 5rem); padding-bottom: clamp(3.5rem, 9vh, 5rem); }
  .story__head { margin-bottom: 1.8rem; }

  .ba-m { display: block; max-width: 520px; margin: 0 auto; }
  .ba-m__fig {
    position: relative; margin: 0; overflow: hidden;
    aspect-ratio: 3 / 2; border-radius: 16px;
    background: #14110d; border: 1px solid var(--line-2);
    box-shadow: 0 18px 44px rgba(30, 27, 23, 0.18);
  }
  .ba-m__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .ba-m__before {
    z-index: 2; filter: saturate(0.8) brightness(0.99) contrast(0.95);
    animation: baMswap 5.2s var(--ease) infinite;
  }
  @keyframes baMswap {
    0%, 40%  { opacity: 1; }
    50%, 90% { opacity: 0; }
    100%     { opacity: 1; }
  }
  .ba-m__tag {
    position: absolute; top: 0.6rem; z-index: 3;
    font-family: var(--display); font-weight: 700; font-size: 0.58rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.24rem 0.5rem; border-radius: 999px;
  }
  .ba-m__tag--before { left: 0.6rem; background: rgba(30, 27, 23, 0.68); color: rgba(247, 242, 234, 0.94); }
  .ba-m__tag--after  { right: 0.6rem; background: var(--amber-ink); color: var(--cream); }
  .ba-m__cap {
    margin: 0.9rem auto 0; text-align: center; max-width: 34ch;
    color: var(--ink-faint); font-size: 0.9rem; line-height: 1.4; font-style: italic;
  }

  /* ---- KIT AT-A-GLANCE: four tiles become a 2x2 ---- */
  .glance { padding-top: clamp(2.6rem, 7vh, 3.6rem); padding-bottom: clamp(2.6rem, 7vh, 3.6rem); }
  .glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }

  /* ---- ROI: the one-pager stacks above the earnings figure ---- */
  .roi { padding-top: clamp(3rem, 8vh, 4.5rem); padding-bottom: clamp(3rem, 8vh, 4.5rem); }
  .roi__sub { font-size: 1rem; }

  /* ---- CLOSE: replace the 5-line deliverables with a 3-item checklist;
       keep pricing, tightened. ---- */
  .close { padding-bottom: clamp(3rem, 8vh, 4.5rem); }
  .offer-detail__body { margin-top: clamp(2rem, 6vh, 3rem); gap: 1.4rem; }
  .deliverables { display: none; }
  .kit3-m {
    display: flex; flex-direction: column; gap: 0.55rem;
    max-width: 520px; margin: 0 auto; padding: 0; list-style: none;
  }
  .kit3-m__item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.85rem 1.1rem; border-radius: 14px;
    background: linear-gradient(168deg, #fff, var(--paper-2));
    border: 1px solid var(--line);
    font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  }
  .kit3-m__tick { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--green); }
  .pricing { align-items: center; text-align: center; }
  .pricing__cta { align-self: stretch; text-align: center; justify-content: center; }

  /* ---- IMPROVE / tools grid: LITE on mobile — top 3 tiles only, no see-more
       (founder 07-22: keep simplicity without losing what we can do) ---- */
  .improve { padding-top: clamp(3rem, 8vh, 4.5rem); padding-bottom: clamp(3rem, 8vh, 4.5rem); }
  .improve__sub { display: none; }
  .improve__grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; max-width: 560px; margin-inline: auto; }
  .improve__grid .mtile:nth-of-type(n + 4) { display: none; }
  .improve__grid .mtile--more { display: none; }
  /* the chip strip STAYS on mobile — with the grid capped at three tiles it is
     the only place the full range is visible */
  .improve__range { margin-top: 1.5rem; }
  .improve__chip { font-size: 0.74rem; padding: 0.34rem 0.7rem; }
  .improve__foot .improve__note { font-size: 0.8rem; }

  /* ---- TRIO: keep the liquid-glass cards WITH the floating houses (posters),
       stacked full-width; houses idle-float so no hover is needed ---- */
  .trio-m { display: none !important; }
  .trio__row {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    max-width: 540px; margin-inline: auto;
  }
  .glass { width: 100%; }
  .glass__poster {
    animation: glassbob 4.2s ease-in-out infinite alternate;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .glass__poster { animation: none; }
  }
  .trio { padding-top: clamp(3.5rem, 9vh, 5rem); padding-bottom: clamp(3.5rem, 10vh, 6rem); }
  .pcard {
    position: relative; display: block; overflow: hidden;
    border-radius: 20px; text-decoration: none;
    background: #14110d; box-shadow: 0 16px 40px rgba(30, 27, 23, 0.18);
  }
  .pcard__img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .pcard__body {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 2.6rem 1.15rem 1.1rem;
    background: linear-gradient(to top, rgba(20, 17, 13, 0.92), rgba(20, 17, 13, 0.28) 62%, transparent);
  }
  .pcard__kind {
    align-self: flex-start; margin-bottom: 0.25rem;
    font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #fff; background: var(--amber-ink); font-weight: 600;
    padding: 0.28rem 0.6rem; border-radius: 999px;
  }
  .pcard__name {
    font-family: var(--display); font-weight: 600; font-size: 1.5rem;
    line-height: 1.05; letter-spacing: -0.02em; color: var(--cream);
  }
  .pcard__line { color: rgba(247, 242, 234, 0.82); font-size: 0.9rem; line-height: 1.35; }
  .pcard__go {
    margin-top: 0.45rem;
    font-family: var(--display); font-weight: 600; font-size: 0.9rem;
    color: var(--amber-hi, #e6a35c);
  }

  /* ---- HOW IT WORKS: the film-slates become 3 plain numbered lines ---- */
  .how__slates { gap: 0; }
  .slate {
    padding: 1.05rem 0.2rem; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: none; box-shadow: none;
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: baseline;
  }
  .how__slates .slate:last-child { border-bottom: 0; }
  .slate__bar { display: none; }
  .slate__num { margin-top: 0; grid-row: 1 / span 2; align-self: center; font-size: 1.1rem; }
  .slate__title { margin: 0; font-size: 1.15rem; text-transform: none; }
  .slate__line { margin-top: 0.15rem; font-size: 0.92rem; }
}

/* mobile before→after crossfade holds still under reduced motion (shows delivered) */
@media (prefers-reduced-motion: reduce) {
  .ba-m__before { animation: none !important; opacity: 0 !important; }
}

/* mobile trio: the idle float for the house posters (outside the media block so
   the keyframes are always defined; only applied ≤768px above) */
@keyframes glassbob {
  from { translate: 0 0; }
  to   { translate: 0 -9px; }
}