/* ============================================================================
   websites.css — ZXY /websites hero
   Ported 1:1 from the approved Claude Design source ("Websites Hero").
   Visual values (colors, gradients, clamps, transforms, z-layers) are verbatim
   from the design. The only intentional deviation is the fallback bloom, which
   is STATIC + low-intensity per the acceptance criteria (reduced-motion/mobile).
   ============================================================================ */

/* ===== DESIGN TOKENS ======================================================
   Single source of truth for the page palette + layout rhythm. The *-rgb
   triplets exist so alpha variants stay derivable: rgba(var(--purple-rgb),.6).
   Engine-local colors (fluid JS #B833FF, fallback bloom rgba(120,90,220,…))
   deliberately stay literal — they are sim-side, not UI-side. */
:root {
  --bg: #020204;          --bg-rgb: 2,2,4;
  --red: #ff4438;         --red-rgb: 255,68,56;
  --blue: #2b7fd4;        --blue-rgb: 43,127,212;
  --purple: #9166e8;      --purple-rgb: 145,102,232;
  --gutter: clamp(26px, 3.6vw, 52px);
  --z-section: 1;
  --z-decor: 3;
  --z-pill: 6;
  --z-nav: 7;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { font-family: 'Archivo', sans-serif; color: #fff; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.websites-page {
  position: relative;
  width: 100%;
  height: 100vh; /* pinned: the hero is exactly one viewport; sections are siblings below */
  overflow: hidden;
  margin: 0;
  background: var(--bg);
  font-family: 'Archivo', sans-serif;
  color: #fff;
}

/* ---- keyframes ---------------------------------------------------------- */
@keyframes zxy-ret   { 0% { transform: scale(1); opacity: .9 } 70% { transform: scale(2.6); opacity: 0 } 100% { opacity: 0 } }
@keyframes zxy-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes zxy-cta {
  0%, 100% { box-shadow: 0 14px 50px -10px rgba(255,68,56,.5), 0 10px 44px -12px rgba(43,127,212,.45) }
  50%      { box-shadow: 0 16px 62px -8px rgba(255,68,56,.66), 0 12px 54px -10px rgba(43,127,212,.6) }
}

/* ===== LIVE WEBGL FLUID CANVAS ===========================================
   Hidden until fluid-hero.js confirms the sim painted (body.fluid-active),
   then crossfades in over the static fallback. */
#fluid-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}
/* --fluid-fade: scroll-linked (site.js) — 1 in the hero, eases to 0 over its last
   20vh so the reducer's pause always freezes an invisible frame. */
.fluid-active #fluid-canvas { opacity: var(--fluid-fade, 1); pointer-events: auto; }
/* after the 1.1s reveal crossfade, drop the transition so the fade tracks scroll 1:1 */
.fluid-revealed #fluid-canvas { transition: none; }

/* ===== FALLBACK BLOOM (reduced-motion / mobile / no-WebGL) ================
   STATIC, low-intensity. Shown by default; faded out once the canvas is live. */
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.1s ease;
}
.fluid-active .hero-fallback { opacity: 0; }

.hero-fallback .bloom { position: absolute; z-index: 0; pointer-events: none; }
.bloom.red-main   { left: -10%; top: 8%;     width: 62%; height: 78%; background: radial-gradient(closest-side, rgba(255,68,56,.24), rgba(255,68,56,.06) 55%, transparent 78%); }
.bloom.red-low    { left: -14%; bottom: -12%; width: 42%; height: 48%; background: radial-gradient(closest-side, rgba(255,68,56,.14), transparent 70%); }
.bloom.blue-main  { right: -12%; top: 2%;    width: 64%; height: 82%; background: radial-gradient(closest-side, rgba(43,127,212,.26), rgba(43,127,212,.07) 52%, transparent 78%); }
.bloom.blue-low   { right: -8%; bottom: -14%; width: 46%; height: 52%; background: radial-gradient(closest-side, rgba(43,127,212,.16), transparent 70%); }
.bloom.purple-mid { right: 14%; top: 24%;    width: 34%; height: 46%; background: radial-gradient(closest-side, rgba(120,90,220,.18), transparent 72%); }
.hero-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-wash.red  { background: radial-gradient(48% 62% at 12% 46%, rgba(255,68,56,.18), transparent 70%); }
.hero-wash.blue { background: radial-gradient(52% 66% at 90% 42%, rgba(43,127,212,.20), transparent 72%); }

/* ===== VIGNETTE + TEXT SCRIM ============================================= */
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 42%, transparent 52%, rgba(2,2,4,.55) 100%);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(58% 72% at 27% 55%, rgba(2,2,4,.62) 0%, rgba(2,2,4,.4) 42%, rgba(2,2,4,0) 78%),
    linear-gradient(90deg, rgba(2,2,4,.7) 0%, rgba(2,2,4,0) 46%),
    linear-gradient(0deg, rgba(2,2,4,.72) 0%, rgba(2,2,4,0) 30%),
    linear-gradient(180deg, rgba(2,2,4,.5) 0%, rgba(2,2,4,0) 22%);
}

/* ===== FLOATING CONTRACTOR MOCKUP ======================================== */
.hero-mockup {
  position: absolute;
  right: clamp(16px, 4vw, 84px);
  top: 50%;
  transform: translateY(-50%) perspective(1900px) rotateY(-15deg) rotateX(4deg) rotate(-1.4deg);
  width: clamp(380px, 40vw, 580px);
  z-index: 3;
  pointer-events: none;
  border-radius: 11px;
  overflow: hidden;
  background: #0b0c10;
  box-shadow: 0 60px 110px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px -20px rgba(43,127,212,.4);
}
.mockup-chrome {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: #16181d;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mockup-traffic { display: flex; gap: 7px; }
.mockup-traffic span { width: 10px; height: 10px; border-radius: 50%; }
.mockup-traffic .r { background: #ff5f56; }
.mockup-traffic .y { background: #ffbd2e; }
.mockup-traffic .g { background: #27c93f; }
.mockup-urlwrap { flex: 1; display: flex; justify-content: center; }
.mockup-url {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.52);
  background: #0c0d11; border: 1px solid rgba(255,255,255,.07); padding: 5px 18px; border-radius: 20px;
}
.mockup-url .dot { width: 6px; height: 6px; border-radius: 50%; background: #27c93f; }
.mockup-chrome .spacer { width: 34px; }

.mockup-site { position: relative; height: clamp(250px, 26vw, 372px); overflow: hidden; }
.mockup-site .bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(86% 80% at 72% 16%, rgba(102,114,134,.58), rgba(10,12,16,0) 60%),
    radial-gradient(60% 60% at 14% 92%, rgba(255,68,56,.24), transparent 62%),
    radial-gradient(60% 72% at 95% 86%, rgba(43,127,212,.3), transparent 60%),
    linear-gradient(180deg, #1c1f27, #0a0b0e);
}
.mockup-site .overlay {
  position: absolute; inset: 0; z-index: 1;
  /* was a flat 74% floor dim (tuned for the CSS scene) — it buried the real
     photo's sunset. Now: local scrim under the copy, gentle global wash. */
  background:
    radial-gradient(60% 55% at 18% 88%, rgba(8,9,12,.55), transparent 70%),
    linear-gradient(180deg, rgba(8,9,12,.02) 0%, rgba(8,9,12,.36) 100%);
}
.mockup-nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
}
/* Boréal's brand look — its OWN identity (amber + grotesk), not ZXY's red/blue */
.mockup-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.2px; white-space: nowrap; }
.mockup-brand .dot { color: #f0a648; }
.accent-dot { color: #ff4438; } /* the ZXY nav logo dot keeps the house red */
.mockup-navlinks {
  display: flex; align-items: center; gap: 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px; color: rgba(255,255,255,.62);
}
.mockup-navlinks .quote { padding: 5px 10px; background: #e08b2d; color: #1c1206; border-radius: 1px; white-space: nowrap; }
.mockup-hud {
  position: absolute; right: 16px; top: 58px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.18); padding: 4px 8px;
}
.mockup-hud .dot { width: 6px; height: 6px; border-radius: 50%; background: #f0a648; }
.mockup-copy { position: absolute; left: 18px; right: 18px; bottom: 20px; z-index: 2; }
.mockup-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(240,198,132,.92); margin-bottom: 9px; }
.mockup-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: .94; letter-spacing: -.5px; color: #fff; }
.mockup-h1 .grad { background: linear-gradient(95deg, #f0a648, #ffe9c4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== CORNER BRACKETS + RETICLE ========================================= */
.corner { position: absolute; width: 26px; height: 26px; z-index: 6; pointer-events: none; }
.corner.tl { top: 22px; left: 22px;  border-left: 1px solid rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.3); }
.corner.tr { top: 22px; right: 22px; border-right: 1px solid rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.3); }
.corner.bl { bottom: 22px; left: 22px;  border-left: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); }
.corner.br { bottom: 22px; right: 22px; border-right: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); }

.reticle { position: absolute; top: 40%; left: 46%; z-index: 4; width: 9px; height: 9px; pointer-events: none; }
.reticle .core { position: absolute; inset: 0; border-radius: 50%; background: #ff4438; }
.reticle .ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255,68,56,.5); animation: zxy-ret 2.8s ease-out infinite; }

/* ===== CONTENT LAYER ===================================================== */
.hero-content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  pointer-events: none;
}
.hero-content > * { pointer-events: auto; }

/* nav — fixed top bar. Transparent with a top scrim over the hero (legibility over
   bright fluid bloom); flips to solid black once scrolled past the hero (.scrolled). */
.hero-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 2vw, 26px) var(--gutter);
  background: linear-gradient(180deg, rgba(2,2,4,.66) 0%, rgba(2,2,4,.3) 55%, rgba(2,2,4,0) 100%);
  border-bottom: 1px solid transparent;
  transition: background .5s ease, padding .4s ease, border-color .5s ease, backdrop-filter .4s ease;
  pointer-events: auto;
}
.hero-nav.scrolled {
  background: rgba(2,2,4,.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-top: clamp(12px, 1.4vw, 18px); padding-bottom: clamp(12px, 1.4vw, 18px);
}
/* HOME — purple return button (this page's return signature: realtor=red / creator=blue
   / websites=purple). Reads in both transparent and solid states. */
.btn-home {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(var(--purple-rgb),.6); border-radius: 2px;
  background: rgba(var(--purple-rgb),.12); color: #d3c2f7;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
  padding: 8px 13px; text-decoration: none; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-home::before { content: '←'; opacity: .85; }
.btn-home:hover { background: rgba(var(--purple-rgb),.24); border-color: rgba(var(--purple-rgb),.95); color: #fff; }
.hero-nav .brand { display: flex; align-items: center; gap: 14px; }
.hero-logo {
  font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: 1px; color: #fff; line-height: 1;
  padding: 7px 11px; border: 1px solid rgba(255,255,255,.2);
}
.hero-section-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.48); }
.hero-nav .links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.hero-nav .menu { display: flex; gap: clamp(14px, 1.6vw, 24px); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.62); }
.hero-nav .menu a { color: inherit; text-decoration: none; cursor: pointer; transition: color .2s ease; }
.hero-nav .menu a:hover { color: #fff; }
.hero-nav .menu a:focus-visible, .btn-nav-cta:focus-visible, .btn-home:focus-visible,
.btn-lang:focus-visible, .nav-mobile summary:focus-visible, .nav-mobile-panel a:focus-visible {
  outline: 1px solid rgba(var(--purple-rgb),.9); outline-offset: 3px;
}
.btn-lang {
  display: inline-flex; align-items: center; gap: 7px; background: transparent;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.82);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; padding: 8px 12px; cursor: pointer; border-radius: 2px;
}
.btn-lang .dot { width: 6px; height: 6px; border-radius: 50%; background: #2b7fd4; }
.btn-nav-cta {
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; padding: 9px 16px; cursor: pointer; border-radius: 2px; white-space: nowrap;
  text-decoration: none;
}

/* ===== MOBILE DISCLOSURE NAV (≤820px) ====================================
   Zero-JS <details>/<summary>; JS only closes it after a tap. Desktop: hidden. */
.nav-mobile { display: none; position: relative; }
.nav-mobile summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #fff;
  border: 1px solid rgba(255,255,255,.32); border-radius: 2px; padding: 9px 14px;
  white-space: nowrap;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] summary { background: rgba(255,255,255,.08); }
.nav-mobile-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 230px; padding: 10px;
  background: rgba(var(--bg-rgb),.97);
  border: 1px solid rgba(255,255,255,.1); border-radius: 3px;
}
.nav-mobile-panel a {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2px;
  color: rgba(255,255,255,.82); text-decoration: none; padding: 12px; border-radius: 2px;
}
.nav-mobile-panel a:hover, .nav-mobile-panel a:focus-visible { background: rgba(255,255,255,.07); color: #fff; }
.nav-mobile-panel a.cta { color: #fff; background: linear-gradient(95deg, rgba(var(--red-rgb),.85), rgba(var(--blue-rgb),.85)); margin-top: 6px; }

/* headline */
.hero-headline-block { max-width: 680px; }
.hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1vw, 13px); letter-spacing: 3.5px; color: rgba(255,255,255,.66); margin-bottom: clamp(16px, 1.8vw, 26px); }
.hero-headline {
  font-family: 'Anton', sans-serif; font-size: clamp(52px, 7.4vw, 112px); line-height: .88; letter-spacing: .5px;
  margin: 0; color: #f4f5f7; white-space: nowrap; text-shadow: 0 2px 40px rgba(0,0,0,.6);
}
.hero-headline span { display: block; }
.hero-headline .grad {
  background: linear-gradient(95deg, var(--red) 0%, #ff5a3d 26%, var(--purple) 56%, var(--blue) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== THE GLASS FRAME — brand signature device ==========================
   Zay's hero directive: FRAME as a 3D glass object, title outline in the
   version colors. This page: red→purple→blue gradient stroke, purple/white
   secondary. PORTABLE: the recipe reads --frame-accent / --frame-accent-2 —
   the realtor page sets both to its red (#d63030), creators to its blue
   (#2b8ae0), and the gradient collapses to a solid. Font-agnostic.
   Layers, back to front:
     backdrop-filter pane (refracts the LIVE FLUID behind the glass)
     → ::before gradient ring (mask-composite; solid purple ring fallback)
     → border = white inner hairline · box-shadow bevels (lit tl / shaded br)
     → ::after L-bracket corner ticks (the shared ZXY bracket grammar)
     → .fw-specular one-shot sheen sweep
     → .framed-word-text glass glyphs (gradient stroke, frosted fill).
   Degrades: no canvas → pane blurs the static bloom; no mask-composite →
   solid purple ring; no background-clip:text → solid purple stroke. */
.hero-headline .hl-frameline { display: block; white-space: nowrap; padding: .04em 0; }
.hero-headline .hl-frameline > span { display: inline; }
.hero-headline .hl-frameline > .framed-word { display: inline-block; }
.framed-word {
  --frame-accent: var(--red);
  --frame-accent-2: var(--blue);
  position: relative;
  display: inline-block;
  padding: 0 .16em .02em;
  margin: 0 .04em;
  /* borderless glass slab (Zay: no box around FRAME) — the glass reads through
     the blur boundary + soft glow, not through an outline */
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(var(--purple-rgb),.07));
  box-shadow:
    0 22px 64px -18px rgba(0,0,0,.7),               /* grounded drop shadow */
    0 12px 48px -12px rgba(var(--purple-rgb),.5);   /* ambient purple glow */
  -webkit-backdrop-filter: blur(9px) saturate(1.4) brightness(1.12);
  backdrop-filter: blur(9px) saturate(1.4) brightness(1.12);
  /* resting 3D angle — same perspective language as the floating mockup */
  transform: perspective(900px) rotateY(-8deg) rotateX(2.5deg);
  transform-style: preserve-3d;
  will-change: transform;
}
/* 3D OUTLINED LETTERS (Zay's reference: classic extruded block lettering) —
   the border sits ON the glyphs (gradient stroke), the faces are frosted
   near-white, and a hard stacked-shadow extrusion gives each letter physical
   depth. The GLASS lives on the pane behind them. em-based so it scales. */
.framed-word-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  -webkit-text-stroke: .042em transparent;   /* the colored border lives ON the letters — heavier now the box is gone */
  background: linear-gradient(95deg, var(--frame-accent), var(--purple) 52%, var(--frame-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(246,247,249,.88);   /* frosted-white letter FACES — solid enough to sit on the extrusion */
  transform: translateZ(14px);
  /* hard extrusion walls, receding down-right (matches bevel light + drop shadow) */
  text-shadow:
    .008em .010em 0 rgba(22,17,46,.94),
    .016em .020em 0 rgba(26,19,54,.92),
    .024em .030em 0 rgba(30,21,62,.90),
    .032em .040em 0 rgba(34,23,70,.88),
    .040em .050em 0 rgba(38,25,78,.86),
    .048em .060em 0 rgba(42,27,86,.84),
    .056em .070em 0 rgba(46,29,94,.80),
    .064em .080em 0 rgba(50,31,102,.76),
    .072em .090em 0 rgba(54,33,110,.72),
    .080em .100em 0 rgba(58,35,118,.66),
    .088em .110em 0 rgba(62,37,126,.58),
    .096em .120em 0 rgba(66,39,134,.48),
    .12em .17em .11em rgba(2,2,4,.55);   /* soft ground shadow cast by the extrusion */
}
@supports not (-webkit-background-clip: text) {
  .framed-word-text {
    background: none;
    -webkit-text-stroke: .042em var(--purple);
    color: rgba(246,247,249,.88);
  }
}
/* one-shot specular sweep across the pane after the reveal */
.fw-specular {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fw-specular::before {
  content: '';
  position: absolute; top: -22%; bottom: -22%; left: 0; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.30) 46%, rgba(255,255,255,.06) 58%, transparent);
  transform: translateX(-140%) skewX(-18deg);
}
@keyframes fw-specular { to { transform: translateX(340%) skewX(-18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .fw-specular::before { animation: fw-specular 1.5s cubic-bezier(.5, .1, .3, 1) 1.7s 1 both; }
}
/* sentinel tier-down: the pane blur is this page's heaviest decorative layer */
.perf-tier-down .framed-word { -webkit-backdrop-filter: none; backdrop-filter: none; }

.hero-tagline { font-family: 'Archivo', sans-serif; font-weight: 300; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: .4px; color: rgba(255,255,255,.74); margin: clamp(18px, 2vw, 28px) 0 0; max-width: 440px; }

.hero-cta-row { display: flex; align-items: center; gap: 16px; margin-top: clamp(24px, 2.8vw, 38px); flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(95deg, var(--red), var(--blue)); border: none; color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(13px, 1.25vw, 16px); font-weight: 500; letter-spacing: 2.5px;
  padding: clamp(16px, 1.5vw, 21px) clamp(26px, 2.4vw, 38px); cursor: pointer; border-radius: 3px; white-space: nowrap;
  animation: zxy-cta 3.6s ease-in-out infinite; text-decoration: none;
}
.btn-primary .arrow { font-family: 'Archivo', sans-serif; font-size: 1.25em; line-height: 0; }
.btn-secondary {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85);
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1vw, 13px); letter-spacing: 2px;
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px); cursor: pointer; border-radius: 3px; white-space: nowrap; text-decoration: none;
}

/* bottom row — pinned to the hero floor (nav left the flex flow, so the headline
   block now centers and this is positioned independently). */
.hero-bottom {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.hero-bottom .left { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.scroll-label { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.5); }
.scroll-label .blink { animation: zxy-blink 2.4s ease-in-out infinite; }
.scroll-label .line { width: 52px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
/* ===== AXES MARK (bottom-right, replaces FLUID · LIVE) ===================
   Simplified red-Z / blue-X / grey-Y glyph. Lines draw in once on load (.ax-animate
   added by JS), labels fade in after, then it holds static — no looping state. */
.hero-cornermark { display: flex; flex-direction: column; align-items: flex-end; } /* the glyph stands alone — the words it carried were repetition */
.axis-glyph { display: block; width: clamp(96px, 8vw, 124px); height: auto; overflow: visible; }
.axis-glyph text { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; letter-spacing: 1px; }

.ax-line { fill: none; }
.ax-z { stroke-dasharray: 66; stroke-dashoffset: 66; }
.ax-x { stroke-dasharray: 80; stroke-dashoffset: 80; }
.ax-y { stroke-dasharray: 54; stroke-dashoffset: 54; }
.axis-glyph.ax-animate .ax-z { animation: ax-draw .6s ease forwards; }
.axis-glyph.ax-animate .ax-x { animation: ax-draw .6s ease .45s forwards; }
.axis-glyph.ax-animate .ax-y { animation: ax-draw .6s ease .9s forwards; }
@keyframes ax-draw { to { stroke-dashoffset: 0; } }

.ax-dot { opacity: 0; transition: opacity .3s ease .1s; }
.axis-glyph.ax-animate .ax-dot { opacity: 1; }
.ax-label { opacity: 0; transition: opacity .35s ease; }
.axis-glyph.ax-animate .ax-z-label { transition-delay: .55s; opacity: 1; }
.axis-glyph.ax-animate .ax-x-label { transition-delay: 1s;    opacity: 1; }
.axis-glyph.ax-animate .ax-y-label { transition-delay: 1.45s; opacity: 1; }

.atag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,.6);
}
.atag .adot { width: 6px; height: 6px; border-radius: 50%; }
.adot.red    { background: var(--red); box-shadow: 0 0 6px rgba(var(--red-rgb),.6); }
.adot.blue   { background: var(--blue); box-shadow: 0 0 6px rgba(var(--blue-rgb),.6); }
.adot.purple { background: var(--purple); box-shadow: 0 0 6px rgba(var(--purple-rgb),.6); }

/* ===== PAGE SECTIONS (stubs — content lands P4–P8) =======================
   Body-level siblings after .websites-page. Opaque bg covers the fixed z0
   canvas; the top hairline is the blueprint seam between chapters. */
/* Every section is a STYLE DEMO (Zay: colors + fonts per section, like heroes
   of differently-styled sites). The tokens below are the switchboard — each
   .style-* class overrides them, and every section component reads them. */
/* P8: one visible keyboard ring, re-inked per room via --s-focus */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--s-focus, #c9b3ff); outline-offset: 3px;
}
.page-section {
  --s-bg: var(--bg);
  --s-ink: #f4f5f7;
  --s-focus: #c9b3ff;
  --s-body: rgba(255,255,255,.68);
  --s-dim: rgba(255,255,255,.5);
  --s-line: rgba(255,255,255,.08);
  --s-line-strong: rgba(255,255,255,.45);
  --s-card-bg: rgba(255,255,255,.02);
  --s-accent-rgb: var(--purple-rgb);
  --s-font-display: 'Anton', sans-serif;
  position: relative;
  z-index: var(--z-section);
  background: var(--s-bg);
  color: var(--s-ink);
  padding: clamp(72px, 10vh, 130px) var(--gutter);
  min-height: 40vh; /* stub height only — replaced by real content per phase */
  scroll-margin-top: 100px;
  border-top: 1px solid var(--s-line);
  /* content-visibility:auto removed: its intrinsic-size guess broke anchor
     jumps (#preview links land mid-section while heights resolve). Five
     sections don't need paint-skipping — the GPU cost is the canvas, and
     the reducer already pauses that. */
}
.section-chapter {
  margin: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px;
  color: var(--s-dim);
}
.section-title {
  display: inline-block;             /* transform hugs the text, not the row */
  margin: clamp(18px, 2.4vh, 30px) 0 0;
  font-family: var(--s-font-display);
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: .94;
  letter-spacing: .5px;
  color: var(--s-ink);
  transform-origin: left 78%;
}
/* Zay's direction: titles grow under the cursor (desktop, motion allowed) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .js .section-title.in-view, html:not(.js) .section-title { transition: transform .45s cubic-bezier(.22, .9, .32, 1); }
  .section-title:hover { transform: scale(1.08); }
}

/* ===== SECTION STYLE DEMOS ================================================
   Zay's direction: each section's backdrop demos a website STYLE ZXY builds —
   the page is the portfolio. All backdrops end in solid var(--bg) (the fixed
   canvas sits below); pattern layers are whisper-alpha so copy stays king. */
.style-chip {
  position: absolute; top: clamp(28px, 4vh, 48px); right: var(--gutter);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: var(--s-dim);
  border: 1px solid var(--s-line-strong); border-radius: 2px; padding: 5px 9px;
}

/* — STYLE 01 · WARM (Zay's spec: beige + orange — pushed to the "Alex Morgan"
   light-editorial register: cream field, soft peach blobs, badge pill, mixed-case
   serif headline with a hand-drawn orange underline, soft rounded cards) ------ */
.style-warm {
  --s-bg: #f7efe2;
  --s-focus: #b8490f;
  --s-ink: #261e15;
  --s-body: rgba(38,30,21,.75);
  --s-dim: rgba(38,30,21,.55);
  --s-line: rgba(38,30,21,.14);
  --s-line-strong: rgba(38,30,21,.45);
  --s-card-bg: #fffdf9;
  --s-accent-rgb: 217,90,23;            /* orange */
  --s-font-display: 'Fraunces', Georgia, serif;
  background:
    radial-gradient(44% 50% at 88% 8%, rgba(244,150,88,.34), transparent 70%),
    radial-gradient(26% 30% at 68% 0%, rgba(217,90,23,.12), transparent 70%),
    radial-gradient(30% 36% at 4% 96%, rgba(244,150,88,.16), transparent 72%),
    #f7efe2;
}
.style-warm .section-title {
  letter-spacing: 0; font-weight: 700;
  font-size: clamp(40px, 5.2vw, 84px); line-height: 1.04;
  isolation: isolate; /* keeps the highlight bar's z-index:-1 inside the title */
}
/* the accent word — orange, with a marker-stroke bar behind the baseline */
.why-hl { position: relative; white-space: nowrap; color: #d95a17; }
.why-hl::after {
  content: ''; position: absolute; z-index: -1;
  left: -.05em; right: -.03em; bottom: .02em; height: .14em;
  background: rgba(217,90,23,.26);
  border-radius: .09em .04em .11em .05em / .11em .06em .04em .09em;
  transform: skewY(-1.1deg) rotate(-.5deg);
}

/* — STYLE 02 · EDITORIAL (JLM-style brutalist grid: flat cream, ink rules
   painted through 2px gaps, stacked massive title, mono caption bars) ------- */
.style-gallery {
  --s-bg: #f2ede3;
  --s-focus: #141311;
  --s-ink: #141311;
  --s-body: rgba(20,19,17,.78);
  --s-dim: rgba(20,19,17,.55);
  --s-line: rgba(20,19,17,.16);
  --s-line-strong: #141311;
  --s-card-bg: #f2ede3;
  --s-accent-rgb: var(--blue-rgb);
  --s-font-display: 'Space Grotesk', sans-serif;
  background: #f2ede3;
}
.style-gallery .section-title {
  display: block; margin: 0;
  font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(38px, 4.3vw, 82px); line-height: .84;
  text-transform: uppercase;
}
/* the massive stacked title would burst the panel if it grew — no hover scale */
.style-gallery .section-title:hover { transform: none; }
.jlm-line { display: block; }

/* — STYLE 03 · BLUEPRINT (dark instrument — the ZXY grid) ------------------- */
.style-blueprint {
  --s-font-display: 'JetBrains Mono', monospace;
  background:
    linear-gradient(rgba(var(--blue-rgb),.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--blue-rgb),.055) 1px, transparent 1px),
    linear-gradient(rgba(var(--blue-rgb),.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--blue-rgb),.03) 1px, transparent 1px),
    var(--bg);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
}
.style-blueprint .section-title { font-size: clamp(26px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.5px; }

/* — STYLE 04 · STATEMENT ("Maya Chen": one burnt-orange field, elegant serif
   sentence, tiers as fine-footer columns, the $0 card as the sole protagonist.
   #bd4a24 floor is AA-checked against the cream body — don't lighten it.) --- */
.style-minimal {
  --s-bg: #bd4a24;
  --s-focus: #fdf6ee;
  --s-ink: #fdf6ee;
  --s-body: rgba(255,248,240,.92);
  --s-dim: rgba(255,244,235,.8);
  --s-line: rgba(253,246,238,.22);
  --s-line-strong: rgba(253,246,238,.55);
  --s-card-bg: transparent;
  --s-font-display: 'Fraunces', Georgia, serif;
  background: radial-gradient(120% 130% at 30% 0%, #c8552e 0%, #b04220 100%);
}
.style-minimal .section-title {
  font-weight: 600; letter-spacing: 0;
  font-size: clamp(40px, 5.6vw, 92px); line-height: 1.04;
  max-width: 18ch; /* sized for the FR sentence */
}
.pricing-zero { font-style: italic; }
/* purple is off-palette in this room — every accent re-inks to cream */
.style-minimal .adot { background: #fdf6ee; box-shadow: none; }

/* — STYLE 05 · SPOTLIGHT ("PromptMaster": one lamp over a centered stage.
   Gradients only — nothing here for perf-tier-down to manage, and the static
   image IS the reduced-motion state. Layers top-down: beam fade, hot core,
   16° visible cone, ambient purple wash, floor pool, solid floor. ----------- */
.style-cinematic {
  background:
    linear-gradient(180deg, rgba(190,170,255,.05), transparent 34%),
    radial-gradient(38% 26% at 50% -6%, rgba(230,220,255,.22), transparent 70%),
    conic-gradient(at 50% -6%, transparent 172deg, rgba(190,170,255,.13) 180deg, transparent 188deg),
    radial-gradient(72% 55% at 50% 6%, rgba(var(--purple-rgb),.10), transparent 74%),
    radial-gradient(48% 22% at 50% 98%, rgba(var(--purple-rgb),.08), transparent 78%),
    #050308;
  text-align: center; /* the whole stage centers under the lamp… */
}
.style-cinematic .preview-grid { text-align: left; } /* …but the working area reads left-to-right */
/* P10 · THE CONFLUENCE — while the sim is live (body.confluence-on, set by
   fluid-hero.js), the spotlight's solid floor becomes a dark SCRIM WINDOW, not a
   hole-punch: the fixed canvas glows through the whole section, dimmed enough
   that the copy stays king. Red arrives from the left, blue from the right, and
   the purple is born exactly where the visitor signs. Kill-switch: CONFLUENCE =
   false in fluid-hero.js → the class never lands → this block is inert and the
   section keeps its opaque floor (the standing every-section-ends-opaque rule). */
.confluence-on .style-cinematic {
  background:
    linear-gradient(180deg, rgba(190,170,255,.05), transparent 34%),
    radial-gradient(38% 26% at 50% -6%, rgba(230,220,255,.22), transparent 70%),
    conic-gradient(at 50% -6%, transparent 172deg, rgba(190,170,255,.13) 180deg, transparent 188deg),
    radial-gradient(72% 55% at 50% 6%, rgba(var(--purple-rgb),.10), transparent 74%),
    radial-gradient(48% 22% at 50% 98%, rgba(var(--purple-rgb),.08), transparent 78%),
    linear-gradient(rgba(5,3,8,.84), rgba(5,3,8,.84));
}
.style-cinematic .section-title { max-width: 20ch; transform-origin: 50% 78%; }
.style-cinematic .preview-sub { margin-left: auto; margin-right: auto; }
.preview-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: clamp(18px, 2.4vh, 28px);
}
.p-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px;
  color: rgba(235,228,255,.85);
  background: rgba(190,170,255,.06);
  border: 1px solid rgba(190,170,255,.35); border-radius: 999px;
  padding: 7px 14px;
}

/* ===== REVEAL PRIMITIVE (site.js) =========================================
   Content is visible by default. The hidden state only exists when JS is
   running (html.js) AND motion is allowed — no-JS and reduced-motion users
   see everything immediately. Stagger siblings with --i. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .32, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].in-view { opacity: 1; transform: none; }
  /* whole-section fade on entry (Zay: ~0.4s per section) — layers under the
     staggered child reveals */
  .js .page-section, .js .site-footer { opacity: 0; transition: opacity .4s ease; }
  .js .page-section.in-view, .js .site-footer.in-view { opacity: 1; }
}
.site-footer {
  position: relative;
  z-index: var(--z-section);
  background: var(--bg);
  padding: clamp(40px, 6vh, 72px) var(--gutter);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid { margin-top: 14px; display: grid; gap: 9px; }
.footer-line { margin: 0; font-weight: 300; font-size: 14px; color: rgba(255,255,255,.66); }
.footer-contact { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; }
.footer-contact a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-contact a:hover, .footer-contact a:focus-visible { color: #fff; }
.footer-contact .sep { color: rgba(255,255,255,.3); }
.footer-legal { margin: 4px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.4); }

/* ===== #WHY — promise cards + proof ====================================== */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(30px, 4vh, 52px);
}
.why-card {
  position: relative;
  padding: clamp(22px, 2.2vw, 32px);
  background: var(--s-card-bg);
  border: 1px solid rgba(38,25,14,.07);
  border-radius: 18px;
  /* editorial-soft: a contact shadow plus a wide warm ambient one */
  box-shadow: 0 1px 2px rgba(38,25,14,.05), 0 14px 34px rgba(38,25,14,.08);
}
.why-card h3 { margin: 14px 0 10px; font-family: var(--s-font-display); font-size: clamp(20px, 1.8vw, 27px); letter-spacing: .4px; color: var(--s-ink); }
.why-card p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--s-body); }
.page-section .atag { color: var(--s-dim); }   /* the hero .atag is white-scaled; sections re-ink it */
/* solid orange pill — #b8490f (not the display orange) holds AA at 11px on white */
.toggle-proof {
  margin-top: 16px;
  background: #b8490f;
  border: 1px solid #b8490f; border-radius: 999px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px;
  padding: 11px 18px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.toggle-proof:hover, .toggle-proof:focus-visible { background: #9d3d0a; border-color: #9d3d0a; }
@keyframes tp-pulse { from { box-shadow: 0 0 0 0 rgba(var(--s-accent-rgb),.7); } to { box-shadow: 0 0 0 26px rgba(var(--s-accent-rgb),0); } }
.toggle-proof.pulse { animation: tp-pulse .9s ease-out 1; }
/* ghost twin of the solid pill */
.why-link {
  display: inline-block; margin-top: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px;
  color: #b8490f; text-decoration: none;
  border: 1px solid rgba(var(--s-accent-rgb),.5); border-radius: 999px;
  padding: 10px 18px;
  transition: background .25s ease, border-color .25s ease;
}
.why-link:hover, .why-link:focus-visible { background: rgba(var(--s-accent-rgb),.12); border-color: #b8490f; }
/* R1.1: the warm room's editorial footer — words left, photograph right (whole cup) */
.why-foot {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(26px, 3.5vh, 44px);
}
.why-foot-copy { display: grid; align-content: center; }
.why-foot .why-moat { margin-top: 0; } /* the split owns the spacing now */
.why-figure {
  position: relative;
  margin: 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(38,25,14,.05), 0 14px 34px rgba(38,25,14,.08);
}
.why-figure img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; object-position: 50% 50%; /* Zay's grade centres the cup in its vignette */
}
@media (max-width: 820px) {
  .why-foot { grid-template-columns: 1fr; }
  .why-figure img { aspect-ratio: 3 / 2; }
}
.why-moat {
  margin: clamp(26px, 3.5vh, 40px) 0 0;
  max-width: 640px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5;
  color: var(--s-body);
}
.why-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 80px); margin-top: clamp(26px, 3.5vh, 44px); }
.stat { display: grid; gap: 6px; }
.stat-n { font-family: var(--s-font-display); font-size: clamp(38px, 4vw, 60px); line-height: 1; color: var(--s-ink); }
.stat-l { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: var(--s-dim); }
/* purple emergence seam — red + blue overlap; purple is never painted.
   screen-blend births it on dark styles, multiply on light ones. */
/* (purple seam removed 2026-07-09 — read as out-of-place on the light section;
   the emergence moment returns properly with the live fluid in the Confluence) */
@media (max-width: 820px) {
  .why-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .toggle-proof.pulse { animation: none; }
}

/* ===== #EXAMPLES — THE FRAME GALLERY ====================================
   Brutalist editorial frame. Real proof only: the composed Boréal concept
   (labeled), ZXY's own two frames (real screenshots), and the Empty Frame —
   the zero-client honesty gap converted into the section's strongest CTA.
   Grid technique: .jlm-frame and .gallery-grid paint INK; children paint
   cream; the 2px gaps become the rules — no border-collapse math ever. */
.jlm-frame {
  display: grid; grid-template-columns: minmax(320px, 5fr) 7fr;
  gap: 2px;
  margin-top: clamp(30px, 4vh, 52px);
  background: var(--s-ink);
  border: 2px solid var(--s-ink);
}
.jlm-panel { background: var(--s-bg); padding: clamp(20px, 2.4vw, 36px); }
.jlm-panel-in { position: sticky; top: 96px; } /* title keeps you company down the tall rail */
.jlm-swatches { display: flex; gap: 8px; margin-top: clamp(24px, 4vh, 44px); }
.jlm-swatches .sw { width: 15px; height: 15px; }
.jlm-swatches .sw.red    { background: var(--red); }
.jlm-swatches .sw.blue   { background: var(--blue); }
.jlm-swatches .sw.purple { background: var(--purple); }
.gallery-sub {
  max-width: 42ch; margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .4px; line-height: 1.7;
  color: var(--s-body);
}
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--s-ink); }
.build-card {
  display: flex; flex-direction: column;
  background: var(--s-card-bg);
  text-decoration: none; color: inherit;
}
.build-shot { position: relative; aspect-ratio: 1200 / 644; overflow: hidden; background: #0d0f14; }
.build-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* P6: photographs breathe on inspect — contained by the shots' overflow:hidden */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .build-shot img, .why-figure img { transition: transform .55s cubic-bezier(.22,.9,.32,1); }
  .build-card:hover .build-shot img, .build-card:focus-visible .build-shot img,
  .why-figure:hover img { transform: scale(1.04); }
  .btn-primary, .form-submit { transition: transform .18s ease-out; }
}
/* mono caption bar — inverts to ink on inspect (no transforms in this room) */
.build-placard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px clamp(14px, 1.6vw, 20px);
  border-top: 2px solid var(--s-ink);
  transition: background .2s ease;
}
.build-placard h3 {
  margin: 0; flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--s-ink);
  transition: color .2s ease;
}
@media (hover: hover) {
  .build-card:hover .build-placard, .build-card:focus-visible .build-placard { background: var(--s-ink); }
  .build-card:hover .build-placard h3, .build-card:focus-visible .build-placard h3,
  .build-card:hover .build-placard .atag, .build-card:focus-visible .build-placard .atag { color: #f2ede3; }
  .build-card:hover .build-placard .build-badge.own,
  .build-card:focus-visible .build-placard .build-badge.own { color: rgba(242,237,227,.75); border-color: rgba(242,237,227,.5); }
}
/* ===== R1.2 · TILE TEMPLATES ==============================================
   Every frame in the gallery is its own template language — the rail's ink
   lines hold six DIFFERENT frames, not one card repeated. T1 Boréal keeps the
   browser chrome + lens; the empty frame keeps its silence. */
/* — THE MATTE (framed print) — */
.tile-matte { background: #faf7f0; padding: clamp(14px, 2vw, 26px); }
.matte-frame { border: 1px solid #141311; }
.matte-frame img { display: block; width: 100%; height: auto; }
.matte-caption { text-align: center; padding: clamp(12px, 1.6vw, 20px) 8px 4px; }
.matte-caption h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px); color: #141311;
}
.matte-caption h3::before { content: ''; display: inline-block; width: 9px; height: 9px; background: var(--red); margin-right: 10px; vertical-align: 6%; }
.matte-sub { margin: 7px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 2px; color: var(--s-dim); }
.matte-sub .sep { margin: 0 8px; }
/* — THE CINEMA (title card) — */
.tile-cinema { background: #08090d; }
.cinema-shot { position: relative; }
.cinema-shot img { display: block; width: 100%; height: auto; }
.cinema-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb),.35), inset 0 -70px 90px -60px rgba(var(--blue-rgb),.30); }
.cinema-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,5,9,.82)); }
.cinema-caption {
  position: absolute; left: clamp(14px, 1.8vw, 22px); right: clamp(14px, 1.8vw, 22px); bottom: clamp(12px, 1.6vw, 18px);
  display: flex; align-items: center; gap: 12px;
}
.cinema-caption .atag { color: rgba(255,255,255,.75); }
.cinema-caption h3 { margin: 0; flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.cinema-caption .build-badge.own { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.4); }
/* the cinema room keeps round glowing dots — squares are the cream rail's accent
   (extra class beats the later .style-gallery .adot square rule) */
.style-gallery .tile-cinema .adot { border-radius: 50%; box-shadow: 0 0 6px rgba(var(--blue-rgb),.6); }
/* — THE POSTER (full portrait, type on sky) — */
.tile-poster { position: relative; background: #141311; }
.poster-img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 46%; }
.poster-type {
  position: absolute; top: clamp(18px, 2.4vw, 32px); left: clamp(18px, 2.4vw, 32px);
  display: grid; gap: 6px; justify-items: start;
}
.poster-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: rgba(255,255,255,.85); text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.poster-no {
  font-family: 'Anton', sans-serif; font-size: clamp(34px, 4.2vw, 62px); line-height: .95;
  color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.55);
}
.poster-square { width: 13px; height: 13px; background: var(--purple); margin-top: 4px; }
/* — THE WARM CARD (editorial concept build) — */
.tile-warmcard { background: #fdf9f1; padding: clamp(16px, 2vw, 28px); }
.warmcard-photo { border-radius: 14px; overflow: hidden; }
/* portrait source, 2:3 — Zay's grade drops the cup lower and vignettes the booth,
   so the window grows to 3:4 (shows ~89% of the frame): logotype keeps the pale
   mural top-left, the spot-lit cup keeps its saucer */
.warmcard-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 60%; }
.warmcard-caption { display: flex; align-items: baseline; gap: 12px; padding: clamp(12px, 1.6vw, 18px) 4px 2px; }
.warmcard-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 2.5px; color: rgba(184,73,15,.9); }
.warmcard-caption h3 {
  flex: 1; margin: 0;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px); color: #2b1d10;
}
.tile-warmcard .build-badge { color: #b8490f; border-color: rgba(184,73,15,.5); border-radius: 999px; }

/* R2 · CORNER MARKS — each frame annotates itself top-left, in its own voice */
.bshot-mark { /* Boréal: a live-site HUD chip, amber like its brand */
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px;
  color: rgba(255,255,255,.88);
  background: rgba(8,10,16,.55); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 4px 9px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  pointer-events: none;
}
.bshot-mark::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #f0a648; box-shadow: 0 0 6px rgba(240,166,72,.8); }
.perf-tier-down .bshot-mark { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Equal Cut fleet: two more tier-down reliefs — the scrolled nav's full-width blur
   resample, and the CTA's endlessly looping box-shadow repaint */
.perf-tier-down .hero-nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }
.perf-tier-down .btn-primary { animation: none; }
.matte-frame { position: relative; }
.matte-mark { /* the print's edition label — bottom-left, like a signed print
                 (top-left collided with the screenshot's own nav bar) */
  position: absolute; bottom: 10px; left: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px;
  color: #141311; background: rgba(250,247,240,.94); border: 1px solid #141311;
  padding: 4px 8px;
}
.cinema-mark { /* the slate line */
  position: absolute; top: 14px; left: clamp(14px, 1.8vw, 22px);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.cinema-mark::before { content: ''; width: 8px; height: 8px; background: var(--blue); }
.warmcard-photo { position: relative; }
.warmcard-mark { /* the café's menu strip — the ENTIRE left third of the photo,
                    stacked logotype on translucent cream so it reads over the
                    pale mural, the dark booth, and the table alike */
  position: absolute; inset: 0 auto 0 0;
  width: 33.4%;
  display: grid; align-content: center;
  padding: 8% 4.5%;
  background: linear-gradient(180deg, rgba(253,249,241,.93), rgba(250,243,230,.82));
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.12;
  color: #2b1d10;
}
@media (max-width: 820px) {
  /* phone-test fix: at 390px the 33.4% strip is ~100px but 8vw type ran ~120px —
     the logotype spilled onto the photo. Widen the board, calm the type. */
  .warmcard-mark { width: 40%; font-size: clamp(20px, 6vw, 46px); }
}

/* per-template hovers — each frame answers differently */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile-matte { transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease; }
  .tile-matte:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -18px rgba(20,19,17,.4); }
  .cinema-shot img, .poster-img { transition: transform .55s cubic-bezier(.22,.9,.32,1); }
  .tile-cinema:hover .cinema-shot img { transform: scale(1.03); }
  .tile-poster:hover .poster-img { transform: scale(1.02); }
  .poster-no { transition: transform .35s cubic-bezier(.22,.9,.32,1); }
  .tile-poster:hover .poster-no { transform: translateX(6px); }
  .tile-warmcard { transition: transform .35s cubic-bezier(.22,.9,.32,1); }
  .tile-warmcard:hover { transform: rotate(.4deg) translateY(-2px); }
}
/* poster/cinema/matte overflow: keep the scaled art inside its frame */
.tile-cinema, .tile-poster, .matte-frame { overflow: hidden; }

/* brutalist accents: dots become solid squares in this room only */
.style-gallery .adot { border-radius: 0; box-shadow: none; }
.style-gallery .build-badge { border-radius: 0; }
/* keep invert-fade in sync — a snapped-to-cream label on a still-cream bar vanishes */
.style-gallery .atag, .style-gallery .build-badge { transition: color .2s ease, border-color .2s ease; }
/* tiles sit 2px apart — the reveal slide would shove them over the ink rules,
   so in this room they print in place (opacity only, stagger kept) */
.js .style-gallery .build-card[data-reveal] { transform: none; }
.build-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px;
  color: rgba(var(--red-rgb), .95);
  border: 1px solid rgba(var(--red-rgb), .5); border-radius: 2px; padding: 4px 7px;
  white-space: nowrap;
}
.build-badge.own { color: var(--s-dim); border-color: var(--s-line-strong); }
/* the composed Boréal mini-hero inside the shot */
.build-shot .bshot-copy { position: absolute; left: 18px; bottom: 16px; display: grid; gap: 6px; }
.bshot-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -.2px; color: #fff; }
.bshot-brand span { color: #f0a648; }
.bshot-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(21px, 2.1vw, 30px); line-height: .98; letter-spacing: -.5px; color: #fff; }
.bshot-h1 em { font-style: normal; background: linear-gradient(95deg, #f0a648, #ffe9c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the Empty Frame */
.empty-frame .build-shot.empty {
  display: grid; place-content: center; gap: 10px; justify-items: center;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(var(--purple-rgb),.10), transparent 75%),
    #101218;
  border-bottom: 1px dashed rgba(255,255,255,.18);
}
.empty-plus {
  font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 54px; line-height: 1;
  color: rgba(255,255,255,.5);
  transition: transform .3s ease, color .3s ease;
}
.empty-frame:hover .empty-plus { transform: scale(1.18); color: #fff; }
.empty-line { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: rgba(255,255,255,.6); }
.empty-frame .build-placard h3 { color: rgb(var(--s-accent-rgb)); font-size: clamp(14px, 1.2vw, 17px); }
@media (max-width: 820px) {
  .jlm-frame { grid-template-columns: 1fr; } /* gap technique keeps every divider free */
}

/* ===== X-RAY LENS (Boréal tile) ==========================================
   Two stacked copies of the scene; the top one carries the OTHER language and
   is clipped to a reticle circle that follows the pointer. Touch: tap flips
   the whole tile. The bilingual promise, physically demonstrable. */
.lens-host { cursor: crosshair; }
.lens-layer {
  position: absolute; inset: 0;
  clip-path: circle(0px at 50% 50%);
}
.lens-host.lensing .lens-layer {
  clip-path: circle(74px at var(--lx, 50%) var(--ly, 50%));
}
.lens-host.flipped .lens-layer { clip-path: none; }
.lens-ring {
  position: absolute; left: var(--lx, 50%); top: var(--ly, 50%);
  width: 148px; height: 148px; margin: -74px 0 0 -74px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(2,2,4,.45), 0 0 26px rgba(var(--purple-rgb),.55);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.lens-host.lensing .lens-ring { opacity: 1; }
.lens-layer .bshot-h1 { color: #fff; }
.lens-chip {
  position: absolute; top: 10px; left: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px;
  color: #fff; background: rgba(var(--purple-rgb),.85); border-radius: 2px; padding: 3px 7px;
}

/* ===== THE PREVIEW FORGE ==================================================
   Live mini-site beside the form: the business name mirrors into the headline
   and URL, the trade select re-themes the accent. Pure DOM/CSS. */
.forge {
  --f-accent-rgb: var(--purple-rgb);
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8), 0 0 40px -18px rgba(var(--f-accent-rgb),.5),
              0 -20px 50px -22px rgba(190,170,255,.28); /* the lamp catches its top edge */
  transition: box-shadow .4s ease;
}
.forge[data-trade="contractor"] { --f-accent-rgb: 217,90,23; }
.forge[data-trade="realtor"]    { --f-accent-rgb: var(--red-rgb); }
.forge[data-trade="creator"]    { --f-accent-rgb: var(--blue-rgb); }
.forge-site {
  position: relative; aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px;
  background:
    radial-gradient(80% 90% at 82% 0%, rgba(var(--f-accent-rgb),.34), transparent 62%),
    radial-gradient(70% 70% at 10% 100%, rgba(var(--f-accent-rgb),.16), transparent 60%),
    linear-gradient(180deg, #171a22, #0a0b0e);
  transition: background .4s ease;
}
.forge-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.forge-brand { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: .5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.forge-cta { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1px; color: #fff; background: rgb(var(--f-accent-rgb)); border-radius: 1px; padding: 4px 8px; white-space: nowrap; transition: background .4s ease; }
.forge-copy { display: grid; gap: 6px; }
.forge-copy > * { min-width: 0; } /* grid items refuse to shrink below content without this */
.forge-eyebrow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 2px; color: rgba(255,255,255,.62); }
.forge-h1 { font-family: 'Anton', sans-serif; font-size: clamp(20px, 1.9vw, 28px); line-height: .95; color: #fff; overflow-wrap: anywhere; }
.forge-hud {
  display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: rgba(255,255,255,.6);
}

/* ===== BORÉAL DUSK SCENE ==================================================
   CSS-composed "drone shot at dusk" for the concept build — deep sky, warm
   horizon, rooflines, lit windows. Shared by the hero mockup and the tile.
   P2 · THE REAL THING: .boreal-photo carries the dusk aerial — a still cut from
   Zay's graded 0001 clip (2026-07-15; 0057 was unsalvageable, sun beamed out).
   Remove the class anywhere and that element falls back to the CSS scene. */
.boreal-photo.boreal-scene, .mockup-site .bg.boreal-photo.boreal-scene {
  background:
    linear-gradient(180deg, rgba(8,9,14,.08) 42%, rgba(8,9,14,.64) 100%),
    url("assets/dusk-street.jpg") 50% 45% / cover no-repeat,
    #131624;
}
@media (max-width: 820px) {
  .boreal-photo.boreal-scene, .mockup-site .bg.boreal-photo.boreal-scene {
    background:
      linear-gradient(180deg, rgba(8,9,14,.08) 42%, rgba(8,9,14,.64) 100%),
      url("assets/dusk-street-sm.jpg") 50% 45% / cover no-repeat,
      #131624;
  }
}
.boreal-scene, .mockup-site .bg.boreal-scene {
  background:
    /* lit windows */
    radial-gradient(7px 5px at 17% 79%, rgba(255,196,128,.85), transparent 62%),
    radial-gradient(5px 4px at 24% 83%, rgba(255,180,110,.7), transparent 62%),
    radial-gradient(6px 5px at 70% 77%, rgba(255,196,128,.75), transparent 62%),
    radial-gradient(5px 4px at 79% 82%, rgba(255,180,110,.6), transparent 62%),
    radial-gradient(4px 4px at 46% 84%, rgba(255,190,120,.55), transparent 62%),
    /* warm dusk band at the horizon */
    linear-gradient(180deg, transparent 52%, rgba(232,98,29,.30) 70%, rgba(140,58,28,.4) 80%, rgba(20,14,16,0) 92%),
    /* rooflines */
    linear-gradient(135deg, transparent 0 60%, #0c0e13 60.5% 100%) 6% 100% / 30% 42% no-repeat,
    linear-gradient(225deg, transparent 0 60%, #0c0e13 60.5% 100%) 42% 100% / 30% 42% no-repeat,
    linear-gradient(135deg, transparent 0 55%, #0a0c10 55.5% 100%) 78% 100% / 26% 34% no-repeat,
    linear-gradient(180deg, transparent 0 74%, #0a0c11 75% 100%),
    /* deep dusk sky */
    radial-gradient(95% 75% at 68% 8%, #3d4a70 0%, #262e4c 42%, #131624 100%);
}

/* ===== #AERIAL — THE DUSK BAND ============================================
   Full-bleed aerial reveal between the blueprint and the statement rooms.
   The video is decorative (aria-hidden, muted, loop); the poster carries the
   look wherever playback is off. Floor is opaque #0a0d16 (canvas below). */
.style-band {
  --s-focus: #ffffff;
  min-height: 58vh;
  display: grid; align-content: center; justify-items: center;
  text-align: center;
  overflow: hidden;
  background: #0a0d16;
}
.band-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
}
.band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,6,10,.6), rgba(4,6,10,.22) 42%, rgba(4,6,10,.62));
}
.style-band .section-chapter { position: absolute; top: clamp(28px, 4vh, 48px); left: var(--gutter); color: rgba(255,255,255,.6); }
.band-inner { position: relative; display: grid; gap: clamp(16px, 2.4vh, 26px); justify-items: center; }
.band-line {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(26px, 3.8vw, 56px); line-height: 1.15;
  color: #f6f3ee; max-width: 18ch;
  text-shadow: 0 2px 34px rgba(0,0,0,.55);
}

/* ===== #PROCESS — blueprint timeline ===================================== */
.proc-sub { max-width: 520px; margin: 16px 0 0; font-weight: 300; font-size: clamp(14px, 1.1vw, 17px); color: var(--s-body); }
.proc-wrap { position: relative; margin-top: clamp(36px, 5vh, 64px);
  /* one gap source: station i's dot center = i·(100% + gap)/6 + 5.5px (dot is 11px) —
     the carriage keyframes park on these exact points at any viewport width */
  --proc-gap: clamp(10px, 1.4vw, 22px);
  --proc-stop: calc((100% + var(--proc-gap)) / 6);
}
.proc-rail { position: absolute; left: 0; right: 0; top: 46px; width: 100%; height: 4px; }
/* ONE CLOCK: everything below keys to .proc-wrap.in-view (the rail itself entering
   the viewport — NOT the section, whose .in-view fires much earlier) and rides a
   single 4s linear timeline starting .6s in. Stations light every .8s = every 20%
   of the timeline; the scanner travels 16% and dwells 4% on each dot, arriving
   exactly as it lights — a plotter taking a reading. The fill's leading edge
   plateaus on the same schedule (dashoffset ≈ station positions at 6-col layout;
   the carriage glow covers the ±1% viewport drift). Both stop at D7 — the faint
   track past the last station stays unfilled. */
.proc-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.proc-wrap.in-view .proc-line { animation: proc-draw 4.6s linear .6s forwards; }
@keyframes proc-draw {
  0%, 3.5%     { stroke-dashoffset: 99.5; }
  17.4%, 20.9% { stroke-dashoffset: 82.6; }
  34.8%, 38.3% { stroke-dashoffset: 65.6; }
  52.2%, 55.7% { stroke-dashoffset: 48.7; }
  69.6%, 73.1% { stroke-dashoffset: 31.7; }
  87%, 90.4%   { stroke-dashoffset: 14.8; }
  100%         { stroke-dashoffset: 0; }  /* after D7: run out the whole rail */
}
.proc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--proc-gap); }
.proc-step { display: grid; justify-items: start; align-content: start; gap: 8px; }
.proc-day { display: block; height: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.55); }
/* dot centre must sit ON the rail line: wrap-top → day label 16px + grid gap 8px
   + margin-top 18.5px + half-dot 5.5px = 48px = the line's centre (the carriage
   rides the same 48px). All fixed px, so every dot shares the exact same Y. */
.proc-dot { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255,255,255,.8); margin: 18.5px 0 14px; }
.proc-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(var(--blue-rgb),.7); opacity: 0; }
.proc-wrap.in-view .proc-step .proc-dot::after { animation: zxy-ret 2s ease-out 1; animation-delay: calc(.6s + var(--i) * .8s); }
.proc-step h3 { margin: 0; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(12px, 1.05vw, 15px); letter-spacing: 1px; color: #f4f5f7; }
.proc-step p { margin: 0; font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); max-width: 20ch; }
/* THE SLIDER (Zay's directive): a scanner carriage rides the fill's leading edge
   and STOPS at each station — dot lights on arrival, carriage dwells .16s on the
   lit dot, then moves on. Position and opacity are separate animations so the
   carriage can park on D7 for a beat before powering down. */
.proc-carriage {
  position: absolute; top: 48px; left: 0%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(var(--purple-rgb),.85), inset 0 0 7px rgba(var(--purple-rgb),.6);
  opacity: 0;
  pointer-events: none;
}
.proc-carriage::before, .proc-carriage::after { content: ''; position: absolute; background: rgba(255,255,255,.75); }
.proc-carriage::before { left: 50%; top: -7px; bottom: -7px; width: 1px; margin-left: -.5px; }
.proc-carriage::after { top: 50%; left: -7px; right: -7px; height: 1px; margin-top: -.5px; }
@media (prefers-reduced-motion: no-preference) {
  .proc-wrap.in-view .proc-carriage { animation: proc-slide 4.6s linear .6s forwards, proc-fade 4.6s linear .6s forwards; }
  /* stations start dim, power on exactly as the scanner arrives — same clock */
  .js .proc-wrap.in-view .proc-step { opacity: .3; animation: proc-on .45s ease forwards; animation-delay: calc(.6s + var(--i) * .8s); }
  .js .proc-wrap.in-view .proc-dot { animation: proc-dot-fill .4s ease forwards; animation-delay: calc(.6s + var(--i) * .8s); }
}
@keyframes proc-slide {
  0%, 3.5%     { left: 5.5px; }
  17.4%, 20.9% { left: calc(var(--proc-stop) * 1 + 5.5px); }
  34.8%, 38.3% { left: calc(var(--proc-stop) * 2 + 5.5px); }
  52.2%, 55.7% { left: calc(var(--proc-stop) * 3 + 5.5px); }
  69.6%, 73.1% { left: calc(var(--proc-stop) * 4 + 5.5px); }
  87%, 90.4%   { left: calc(var(--proc-stop) * 5 + 5.5px); }
  100%         { left: 100%; } /* the run-out: D7 lit, the scanner rides the rail home */
}
@keyframes proc-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  94%  { opacity: 1; } /* fade only on the run-out's last stretch */
  100% { opacity: 0; }
}
@keyframes proc-on { to { opacity: 1; } }
@keyframes proc-dot-fill { to { background: rgb(var(--purple-rgb)); border-color: #fff; } }
@media (max-width: 820px) {
  /* vertical rail: gradient hairline down the left, stations stack.
     No carriage here — the 0.8s desktop stagger would feel broken, so tighten it. */
  .proc-rail { display: none; }
  .proc-steps { grid-template-columns: 1fr; gap: 22px; border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, var(--red), var(--purple), var(--blue)) 1; padding-left: 22px; }
  .proc-dot { display: none; }
  .proc-carriage { display: none; } /* fleet catch: it was animating over a hidden rail */
  .proc-step p { max-width: none; }
  .js .proc-wrap.in-view .proc-step { animation-delay: calc(.15s + var(--i) * .2s); }
}
@media (prefers-reduced-motion: reduce) {
  /* static-complete = the animation's end state: the full rail, drawn */
  .proc-line { stroke-dashoffset: 0; animation: none !important; }
  .proc-dot::after { animation: none !important; }
  /* static-complete includes the dots' lit end state (review note) */
  .proc-dot { background: rgb(var(--purple-rgb)); border-color: #fff; }
}

/* ===== #PRICING — minimal calipers ======================================= */
.pricing-sub { max-width: 640px; margin: 18px 0 0; font-weight: 300; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; color: var(--s-body); }
/* tiers demoted to fine-footer columns above a cream hairline — the em-dash
   placeholders whisper; the $0 protagonist above them does the talking */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(26px, 3.4vh, 44px);
  border-top: 1px solid var(--s-line-strong);
  padding-top: clamp(20px, 2.6vh, 32px);
}
.tier-card { position: relative; background: transparent; padding: 0; }
.tier-pop {
  display: inline-block; margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 1.5px;
  color: var(--s-ink); background: transparent;
  border: 1px solid var(--s-line-strong); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
}
.tier-card h3 { margin: 0; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 2.5px; color: var(--s-dim); }
/* the calipers: brackets slide in and "measure" the unfinished number */
.tier-price { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.tier-num { font-family: var(--s-font-display); font-weight: 600; font-size: clamp(28px, 2.4vw, 40px); line-height: 1; color: var(--s-ink); }
.cal { width: 11px; height: 26px; }
.cal-l { border-left: 2px solid #fdf6ee; border-top: 2px solid #fdf6ee; border-bottom: 2px solid #fdf6ee; }
.cal-r { border-right: 2px solid #fdf6ee; border-top: 2px solid #fdf6ee; border-bottom: 2px solid #fdf6ee; }
@media (prefers-reduced-motion: no-preference) {
  .js .tier-card .cal-l { transform: translateX(-14px); opacity: 0; transition: transform .5s cubic-bezier(.22,.9,.32,1) .35s, opacity .4s ease .35s; }
  .js .tier-card .cal-r { transform: translateX(14px); opacity: 0; transition: transform .5s cubic-bezier(.22,.9,.32,1) .35s, opacity .4s ease .35s; }
  .js .tier-card.in-view .cal { transform: none; opacity: 1; }
}
.tier-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tier-card li { font-weight: 300; font-size: 14px; color: var(--s-body); padding-left: 16px; position: relative; }
.tier-card li::before { content: '—'; position: absolute; left: 0; color: rgba(255,244,235,.75); }
/* the one real number — a deep ink-purple island in the orange field */
.tier-zero {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 3.2vh, 40px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 32px);
  border-radius: 16px;
  background: #1a1028;
  box-shadow: 0 24px 60px -18px rgba(26,16,40,.55);
  text-decoration: none; color: inherit;
  transition: background .25s ease, transform .25s ease;
}
.tier-zero:hover { background: #221537; transform: translateY(-2px); }
.tz-price { font-family: var(--s-font-display); font-weight: 600; font-size: clamp(44px, 4.2vw, 64px); line-height: 1; color: #fdf6ee; }
.tz-copy { display: grid; gap: 4px; flex: 1; }
.tz-copy strong { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 2.5px; color: #fdf6ee; }
.tz-copy span { font-weight: 300; font-size: 14px; color: rgba(253,246,238,.8); }
.tz-arrow { font-size: 26px; color: #c9b3ff; transition: transform .25s ease; }
.tier-zero:hover .tz-arrow { transform: translateX(6px); }
.tier-includes { margin: clamp(20px, 2.6vh, 32px) 0 0; display: grid; gap: 6px; }
.tier-includes strong { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: 2.5px; color: var(--s-dim); }
.tier-includes span { font-weight: 300; font-size: 14px; color: var(--s-body); }
@media (max-width: 820px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-card + .tier-card { border-top: 1px solid var(--s-line); padding-top: 20px; }
  .tier-zero { flex-wrap: wrap; }
}

/* ===== INSTRUMENT TELEMETRY ==============================================
   Page-wide narration: progress hairline under the nav, scroll-spy state on
   the menu. (The fixed section readout was retired 2026-07-15 — it duplicated
   the chapter labels already on screen.) */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 1);
  background: linear-gradient(90deg, var(--red), var(--purple), var(--blue));
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.hero-nav .menu a { position: relative; padding-bottom: 4px; }
.hero-nav .menu a[aria-current="true"] { color: #fff; }
.hero-nav .menu a[aria-current="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgb(var(--purple-rgb)); border-radius: 1px;
}

/* ===== PREVIEW / CONVERSION ============================================== */
.preview-sub {
  max-width: 520px; margin: 18px 0 0;
  font-weight: 300; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: rgba(255,255,255,.72);
}
.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(240px, 380px);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  justify-content: center; /* the stage sits under the lamp */
  margin-top: clamp(28px, 4vh, 48px);
}
.preview-form { display: grid; gap: 16px; }
.preview-form .hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.field { display: grid; gap: 7px; }
.field label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.72); }
.field label .opt { font-style: normal; color: rgba(255,255,255,.35); letter-spacing: 1.5px; }
.field label .opt[hidden] { display: none; }
.field input, .field select {
  width: 100%;
  background: #0b0c10;
  border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); /* lit from above */
  color: #fff; font-family: 'Archivo', sans-serif; font-size: 16px; /* ≥16px: no iOS zoom */
  padding: 13px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: rgba(var(--purple-rgb),.85);
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb),.55), 0 0 24px -8px rgba(var(--purple-rgb),.5);
}
.field input::placeholder { color: rgba(255,255,255,.3); }
.form-submit { justify-content: center; width: 100%; border: none; }
.form-note { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: rgba(255,255,255,.7); }
.preview-aside { display: grid; gap: 12px; align-content: start; padding-top: 26px; }
.aside-label { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: rgba(255,255,255,.45); }
.contact-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2px;
  color: #fff; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.contact-chip:hover, .contact-chip:focus-visible { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.4); }
.contact-chip .chip-num { margin-left: auto; color: rgba(255,255,255,.55); letter-spacing: 1px; }
.aside-note { margin: 0; font-weight: 300; font-size: 13px; color: rgba(255,255,255,.7); }
@media (max-width: 820px) {
  .preview-grid { grid-template-columns: 1fr; }
  /* UX pass (Zay-approved 2026-07-17): on phones the forge sits below the form,
     so its build-as-you-type payoff never fires — it only pushed the TEXT/CALL
     chips a screen further down. The style chips and axis glyph are house
     jargon/branding that competes with the message at 390px. */
  .forge, .forge-hud { display: none; }
  .style-chip { display: none; }
  .hero-cornermark { display: none; }
}

/* ===== STICKY SMS PILL (mobile conversion) ================================
   Phone-first buyer: appears once the hero exits, hides while #preview is on
   screen (one dominant conversion element per viewport). Desktop: never. */
.sms-pill {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: var(--z-pill);
  display: none;
  align-items: center; gap: 9px;
  background: linear-gradient(95deg, var(--red), var(--blue));
  color: #fff; text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
  padding: 13px 20px; border-radius: 30px;
  box-shadow: 0 10px 34px -10px rgba(0,0,0,.7);
  transform: translate(-50%, 140%);
  transition: transform .45s cubic-bezier(.22, .9, .32, 1);
}
.sms-pill .adot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sms-pill.on { transform: translate(-50%, 0); }
@media (max-width: 820px) {
  .sms-pill { display: inline-flex; }
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .sms-pill { transition: none; }
}

/* ===== RESPONSIVE / MOBILE =============================================
   Fluid runs the LITE tier below 820px (Equal Cut; static fallback only for
   reduced-motion / no-WebGL / MOBILE_FLUID=false). Reflow the
   absolute hero into a readable stacked column; drop the floating mockup. */
@media (max-width: 820px) {
  /* mobile hero flows in-document (hero-content is position:relative below) —
     height must be content-driven or overflow:hidden clips it */
  .websites-page { height: auto; min-height: 100svh; }
  .hero-mockup, .reticle { display: none; }
  .hero-headline { white-space: normal; font-size: clamp(44px, 13vw, 72px); }
  .hero-headline .hl-frameline { white-space: normal; }
  /* fixed nav stays; clear it with top padding and let the bottom row sit in flow */
  .hero-content { position: relative; min-height: 100svh; justify-content: flex-start; gap: 40px; padding: 96px 24px 28px; }
  .hero-bottom { position: static; left: auto; right: auto; bottom: auto; }
  .hero-nav .menu { display: none; }
  /* desktop CTA yields to the disclosure menu (which carries the CTA link);
     the hero's primary CTA button remains on screen */
  .hero-nav .btn-nav-cta { display: none; }
  .nav-mobile { display: block; }
  .hero-scrim { background: linear-gradient(180deg, rgba(2,2,4,.55), rgba(2,2,4,.85)); }
}
@media (max-width: 600px) {
  /* nav compression — the logo IS the home link, so the HOME button yields;
     row is logo + FR + MENU with ample headroom at 390px */
  .hero-section-tag { display: none; }
  .btn-home { display: none; }
  .hero-nav { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .hero-nav .links { gap: 8px; }
  /* first taps on the page — meet the 44px finger, not the 30px mouse */
  .btn-lang { padding: 12px 11px; }
  .nav-mobile summary { padding: 12px 12px; }
  .hero-logo { font-size: 20px; padding: 6px 9px; }
}
@media (max-width: 420px) {
}

@media (prefers-reduced-motion: reduce) {
  .reticle .ring, .btn-primary, .scroll-label .blink { animation: none !important; }
  #fluid-canvas, .hero-fallback, .hero-nav { transition: none !important; }
  .axis-glyph .ax-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .axis-glyph .ax-dot, .axis-glyph .ax-label { opacity: 1 !important; transition: none !important; }
}