/* ============================================================
   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; }

/* 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;
}
.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;
}
/* 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(1.2rem, 2.4vh, 1.7rem); }
/* 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; }
}

/* ============================================================
   TRANSFORMATION STORY — one property becoming the kit (#offer)
   Market chips up top; a single connecting rail threads five stages
   (send → become → film → site → numbers). 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 five 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;
}
.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; }
}

/* ============================================================
   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; }

/* 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);
}

/* 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; }

/* 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 — deliverables + pricing (ends the transformation story)
   An invoice-style deliverables list beside one simple pricing block.
   Lives at the tail of #offer; the pricing carries the #pricing anchor.
   ============================================================ */
.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; }