/* ==========================================================================
   CRESSCIT — Main stylesheet
   All raw values come from css/tokens.css custom properties.
   Order: reset · base · utilities · grain · nav · hero · stats · pillars ·
          work · steps · service-area · pricing · faq · finale · footer ·
          reduced-motion
   ========================================================================== */

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: var(--lh-snug); font-weight: 400; }

::selection { background: var(--emerald); color: var(--ink); }

/* ---- Utilities ---------------------------------------------------------- */
/* Screen-reader-only: visually hidden but present in the accessibility tree. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* @component: skip-link */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-3);
  background: var(--emerald);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Shared buttons ----------------------------------------------------- */
/* @component: btn */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-300);
  letter-spacing: .01em;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  will-change: transform;
}
.btn--pill {
  background: var(--emerald);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-200);
}
.btn--pill:hover { box-shadow: 0 0 0 4px var(--emerald-glow); transform: translateY(-1px); }

.btn--primary {
  background: var(--emerald);
  color: var(--ink);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px var(--emerald-glow), 0 0 0 4px var(--emerald-glow);
}
.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(244, 239, 228, .4);
}
.btn--outline:hover { background: var(--cream); color: var(--ink); }

/* @component: grain (film-grain overlay) ---------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  animation: grain-shift 700ms steps(8) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  12.5%{ transform: translate(-4%, 3%); }
  25%  { transform: translate(5%, -6%); }
  37.5%{ transform: translate(-6%, 4%); }
  50%  { transform: translate(4%, 5%); }
  62.5%{ transform: translate(-3%, -5%); }
  75%  { transform: translate(6%, 2%); }
  87.5%{ transform: translate(-5%, -3%); }
  100% { transform: translate(0, 0); }
}

/* @component: nav --------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              backdrop-filter var(--dur-mid) var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(10, 10, 12, .72);
  border-bottom-color: rgba(244, 239, 228, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
}
.nav__links {
  margin-left: auto;
  display: flex;
  gap: var(--space-5);
}
.nav__links a {
  font-size: var(--fs-200);
  color: var(--cream-dim);
  letter-spacing: .02em;
  transition: color var(--dur-base) var(--ease-out);
}
.nav__links a:hover { color: var(--cream); }

@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .btn--pill { margin-left: auto; }
}

/* @component: hero-monolith ----------------------------------------------- */
.hero {
  position: relative;
  height: 300vh;                 /* long scroll range drives the orbit */
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero__bloom {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  background:
    radial-gradient(60% 55% at 42% 46%, var(--emerald-glow), transparent 60%),
    radial-gradient(40% 40% at 62% 60%, rgba(11, 145, 89, .22), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.hero__bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 45% at 46% 48%, rgba(25, 224, 140, .18), transparent 70%);
  mix-blend-mode: screen;
}
.hero__scene { position: absolute; inset: 0; z-index: var(--z-scene); }

/* THE CONTINUOUS WORLD LAYER.
   The canvas is a FIXED full-viewport layer behind ALL content — it renders
   one persistent 3D world for the whole page, not just the hero. It sits below
   every section (z-index below --z-content), is aria-hidden and non-interactive.
   The poster fallback stays inside the hero (absolute) — it only ever needs to
   cover the hero framing while the scene lazy-loads or when WebGL is absent. */
.hero__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: var(--z-base);        /* behind all sections (--z-content = 2) */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.webgl-ready .hero__canvas { opacity: 1; }

/* Poster / fallback monolith — VISIBLE BY DEFAULT while three.js lazy-loads
   (and permanently under `.no-webgl` or reduced motion, where the scene is
   never initialized). Absolutely positioned inside the pinned hero, so
   showing/hiding it causes zero layout shift. */
.hero__fallback {
  display: grid;
  position: absolute;
  inset: 0;
  place-items: center;
  opacity: 1;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.webgl-ready .hero__fallback { opacity: 0; }
.no-webgl .hero__canvas { display: none; }

/* ── THE WORLD SHOWING THROUGH THE PAGE ───────────────────────────────────
   Only once `.webgl-ready` (WebGL live): the opaque section backgrounds become
   translucent ink scrims so the continuous 3D world glows THROUGH the content
   while text keeps its contrast. Without WebGL (or reduced motion) the sections
   stay fully opaque exactly as shipped — this is progressive enhancement only.

   Scrims are tuned per section: bands that must own the frame (stats numbers,
   pricing text) keep a heavier veil; the void sections (hero, pillars, finale)
   go fully transparent so the world reads at full strength. The body stays ink
   (the base coat behind the fixed canvas). Zero layout change — background only. */
.webgl-ready .stats { background: rgba(10, 10, 12, .62); }
.webgl-ready .work { background: rgba(10, 10, 12, .5); }
.webgl-ready .steps { background: rgba(10, 10, 12, .58); }
.webgl-ready .service-area { background: rgba(16, 16, 20, .66); }
.webgl-ready .pricing { background: rgba(16, 16, 20, .66); }
.webgl-ready .faq { background: rgba(10, 10, 12, .58); }
.webgl-ready .pillars,
.webgl-ready .finale { background: transparent; }
/* Cards keep their own panel fill so mockups stay legible over the world. */
.webgl-ready .footer { background: rgba(10, 10, 12, .7); }
.hero__slab {
  width: min(38vw, 320px);
  aspect-ratio: 2.2 / 3.4;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, #14141a 0%, #0b0b0e 55%, #050507 100%);
  transform: perspective(1400px) rotateY(24deg) rotateX(4deg);
  box-shadow:
    -2px 0 0 var(--emerald),
    0 40px 120px -30px rgba(0, 0, 0, .9),
    0 0 90px -10px var(--emerald-glow);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  color: var(--cream);
  display: flex;
  justify-content: center;
  gap: .015em;
  text-shadow: 0 0 60px rgba(0, 0, 0, .6);
}
.hero__title span {
  display: inline-block;
  transform: translateY(1.1em);
  filter: blur(14px);
  opacity: 0;
  will-change: transform, filter, opacity;
}
.hero__subtitle {
  margin-top: var(--space-4);
  font-size: var(--fs-400);
  color: var(--cream-dim);
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.hero__hint {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.hero__hint-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--cream-dim), transparent);
  animation: hint-pulse 1.8s var(--ease-in-out) infinite;
}
.hero__hint-label {
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-dim);
}
@keyframes hint-pulse {
  0%, 100% { opacity: .4; transform: scaleY(.7); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* @component: stats ------------------------------------------------------- */
.stats {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink);
  padding: var(--space-7) var(--gutter);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.stats__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--space-4);
  border-right: var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--cream);
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.stat__num { font-variant-numeric: tabular-nums; }
.stat__unit {
  font-size: .5em;
  color: var(--emerald);
  margin-left: .04em;
}
.stat__suffix {
  font-size: var(--fs-200);
  color: var(--cream);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stat__label {
  font-size: var(--fs-200);
  color: var(--cream-dim);
}
@media (max-width: 720px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  .stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 420px) {
  .stats__inner { grid-template-columns: 1fr 1fr; }
}

/* @component: pillars-forge ----------------------------------------------- */
.pillars {
  position: relative;
  height: 300vh;
  background: var(--ink);
}
.pillars__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
}

/* --- floating holographic windows (the forge) --- */
.forge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
/* When the WebGL world is live, the 3D forge field replaces this DOM layer —
   retire it so the two don't double up. (Reduced motion already hides it.) */
.webgl-ready .forge { display: none; }
.forge__window {
  --z: 0px; --x: 0%; --y: 0%; --s: 1; --delay: 0s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  border-radius: var(--radius-md);
  background: rgba(16, 16, 20, .55);
  border: 1px solid rgba(25, 224, 140, .35);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transform:
    translate(-50%, -50%)
    translate3d(var(--x), var(--y), var(--z))
    scale(var(--s));
  animation: win-drift 14s var(--ease-in-out) infinite;
  animation-delay: var(--delay);
}
.win__bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(25, 224, 140, .18);
}
.win__bar span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(244, 239, 228, .28);
}
.win__bar span:first-child { background: rgba(25, 224, 140, .6); }
.win__body { padding: 14px 12px; display: grid; gap: 9px; }
.win__body i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(244,239,228,.10), rgba(244,239,228,.22), rgba(244,239,228,.10));
  background-size: 200% 100%;
  animation: skeleton 2.6s linear infinite;
}
.win__body i:nth-child(2) { animation-delay: .3s; }
.win__body i:nth-child(3) { animation-delay: .6s; }
.win__block {
  height: 42px !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, rgba(25,224,140,.10), rgba(25,224,140,.22), rgba(25,224,140,.10)) !important;
  background-size: 200% 100% !important;
  animation-delay: .9s !important;
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes win-drift {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -18px; }
}

.pillars__stage {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
}
/* @component: pillar */
/* Directional crossfade — exactly ONE pillar readable at any scroll position
   (stacked 25%-dim ghosts read as a triple exposure; see round-3 QA).
   States, driven by the thirds logic in js/main.js:
     (base)      not yet reached — waiting below at +shift, invisible
     .is-active  on stage — full opacity, translateY(0)
     .is-past    scrolled past — exits upward toward -shift while fading
   Opacity/transform only (no layout); visibility flips AFTER the fade so
   outgoing text never lingers, and inactive pillars are non-interactive. */
.pillar {
  position: absolute;
  max-width: 720px;
  text-align: center;
  opacity: 0;
  transform: translateY(var(--shift-pillar));
  visibility: hidden;                 /* flips only after the fade completes */
  pointer-events: none;
  transition: opacity var(--dur-xfade) var(--ease-out),
              transform var(--dur-xfade) var(--ease-out),
              visibility 0s linear var(--dur-xfade);
  will-change: opacity, transform;
}
.pillar.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-xfade) var(--ease-out),
              transform var(--dur-xfade) var(--ease-out),
              visibility 0s;
}
.pillar.is-past {
  transform: translateY(calc(var(--shift-pillar) * -1));
}
.pillar__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-ghost);
  line-height: .8;
  color: rgba(244, 239, 228, .05);
  letter-spacing: .02em;
  margin-bottom: -.12em;   /* ghost sits behind the headline (desktop art) */
}
/* Narrow screens (QA item 10): the ghost numeral must not obstruct pillar
   text — shrink it and lift it clear of the headline (no negative overlap).
   Hiding inactive pillars now happens at ALL widths via the base rules above
   (round-3), so no extra visibility overrides are needed here. */
@media (max-width: 480px) {
  .pillar__num {
    font-size: var(--fs-ghost-sm);
    margin-bottom: var(--space-2);
  }
}
.pillar__head {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--cream);
}
.pillar__body {
  margin: var(--space-4) auto 0;
  max-width: 34ch;
  color: var(--cream-dim);
  font-size: var(--fs-400);
}

/* @component: work-cards -------------------------------------------------- */
.work {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink);
  padding: var(--space-8) var(--gutter);
}
.work__inner { max-width: var(--maxw); margin: 0 auto; }
.work__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.work__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  letter-spacing: .01em;
}
.work__note { color: var(--cream-dim); font-size: var(--fs-200); max-width: 34ch; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 860px) { .work__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* @component: work-card */
.card {
  background: var(--ink-2);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.card__screen {
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 50% 0%, var(--ink-3), var(--ink));
  border: 1px solid rgba(244, 239, 228, .08);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--space-3);
  transition: filter var(--dur-mid) var(--ease-out);
}
.card:hover .card__screen { filter: brightness(1.18); }
.card__meta { padding: var(--space-4) var(--space-2) var(--space-2); }
.card__name {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.card__line { margin-top: var(--space-2); color: var(--cream-dim); font-size: var(--fs-200); }
.card__vertical {
  margin-top: var(--space-2);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-dim);
}
/* @component: tag (Concept pill) */
.tag {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--emerald);
  border: 1px solid var(--emerald);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  line-height: 1.4;
}

/* --- pure-CSS mini mockups --- */
.mock { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.mock__band {
  height: 38%;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--emerald-deep), rgba(25, 224, 140, .25));
}
.mock__rows { display: grid; gap: 6px; flex: 1; }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock__row em { display: block; height: 7px; border-radius: 4px; background: rgba(244, 239, 228, .35); }
.mock__row b { display: block; width: 22px; height: 7px; border-radius: 4px; background: rgba(25, 224, 140, .5); }
.mock__cta {
  align-self: flex-start;
  font-size: 10px;
  color: var(--ink);
  background: var(--emerald);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-weight: 600;
}
.mock__cta--wide { align-self: stretch; text-align: center; }

.mock--contractor .mock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
}
.mock--contractor .mock__grid span {
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(244,239,228,.16), rgba(244,239,228,.06));
}

.mock--clinic .mock__calm { display: grid; gap: 12px; flex: 1; align-content: center; }
.mock--clinic .mock__line { display: block; height: 8px; border-radius: 4px; background: rgba(244, 239, 228, .28); }
.mock__pill {
  align-self: center;
  font-size: 10px;
  color: var(--emerald);
  border: 1px solid var(--emerald);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-weight: 600;
}

/* Entrance reveal (shared observer adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 90ms; }
.reveal:nth-child(3) { transition-delay: 180ms; }

/* @component: steps ------------------------------------------------------- */
.steps {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink);
  padding: var(--space-7) var(--gutter);
  border-top: var(--hairline);
}
.steps__inner { max-width: var(--maxw); margin: 0 auto; }
.steps__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  margin-bottom: var(--space-6);
}
.steps__rail {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 720px) { .steps__rail { grid-template-columns: 1fr; gap: var(--space-4); } }
.step {
  padding-top: var(--space-3);
  border-top: 2px solid rgba(25, 224, 140, .3);
}
.step__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--emerald);
  line-height: 1;
}
.step__name { font-size: var(--fs-400); font-weight: 600; margin-top: var(--space-2); }
.step__line { margin-top: var(--space-2); color: var(--cream-dim); font-size: var(--fs-200); }

/* @component: service-area ------------------------------------------------ */
/* Quiet band, pricing-like (ink-2). Static, crawlable copy — the cities are
   subtly emphasized (full cream vs cream-dim body). Reveal-on-scroll via the
   shared .reveal observer, consistent with the steps/cards entrance. */
.service-area {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink-2);
  padding: var(--space-7) var(--gutter);
  border-top: var(--hairline);
}
.service-area__inner {
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  text-align: center;
}
.service-area__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.02;
  letter-spacing: .01em;
}
.service-area__body {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  font-size: var(--fs-400);
  color: var(--cream-dim);
}
.service-area__city { color: var(--cream); }
.service-area__micro {
  margin-top: var(--space-4);
  color: var(--cream-dim);
  font-size: var(--fs-200);
}

/* @component: pricing ----------------------------------------------------- */
.pricing {
  background: var(--ink-2);
  padding: var(--space-8) var(--gutter);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.pricing__inner { max-width: var(--maxw-narrow); margin: 0 auto; text-align: center; }
.pricing__lede {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.02;
  letter-spacing: .01em;
}
.pricing__detail { margin-top: var(--space-4); font-size: var(--fs-400); color: var(--cream-dim); }
.pricing__actions { margin-top: var(--space-6); display: flex; justify-content: center; }
.pricing__micro { margin-top: var(--space-4); color: var(--cream-dim); font-size: var(--fs-200); }

/* @component: faq ----------------------------------------------------------
   Native <details>/<summary> — crawlable, zero-JS, keyboard-accessible.
   Brand styling only: hairline dividers, body-font 600 summaries with a
   CSS-only emerald +/− indicator (details[open] flips it), cream-dim answers,
   generous padding (40px+ tap targets). Items reveal via the shared observer. */
.faq {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink);
  padding: var(--space-8) var(--gutter);
}
.faq__inner { max-width: var(--maxw-narrow); margin: 0 auto; }
.faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  letter-spacing: .01em;
  margin-bottom: var(--space-6);
}
.faq__item { border-top: var(--hairline); }
.faq__item:last-child { border-bottom: var(--hairline); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;                 /* hide the native disclosure triangle */
  cursor: pointer;
  min-height: var(--space-5);       /* 40px+ tap target (padding grows it) */
  padding: var(--space-4) 0;
  font-weight: 600;
  font-size: var(--fs-300);
  color: var(--cream);
  transition: color var(--dur-base) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--emerald); }
.faq__q:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Emerald +/− indicator — pure CSS, keyed off details[open]. */
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: 1;
  color: var(--emerald);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__q::after { content: "\2212"; }   /* minus sign */
.faq__a {
  padding: 0 0 var(--space-4);
  max-width: 60ch;
  color: var(--cream-dim);
}

/* @component: ph (placeholder chip) */
.ph {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--emerald);
  background: transparent;
  border: 1px dashed var(--emerald);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* @component: cta-finale -------------------------------------------------- */
.finale {
  position: relative;
  height: 160vh;
  background: var(--ink);
}
.finale__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.finale__inner {
  max-width: var(--maxw);
  padding: 0 var(--gutter);
  text-align: center;
}
.finale__line {
  font-family: var(--font-display);
  font-size: var(--fs-finale);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .22em;
}
.finale__line .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  will-change: opacity, transform;
}
.finale__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.finale__micro { margin-top: var(--space-4); color: var(--cream-dim); font-size: var(--fs-200); }

/* @component: footer ------------------------------------------------------ */
.footer {
  background: var(--ink);
  border-top: var(--hairline);
  padding: var(--space-6) var(--gutter);
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--cream-dim);
  font-size: var(--fs-200);
}
.footer__social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer .ph { font-size: .78rem; }
.footer__credit { font-size: var(--fs-100); }

/* @component: preview-machine ----------------------------------------------
   Overlay dialog + mock browser frame for js/preview-machine.js (lazy module).
   Mini-site theming uses SCOPED custom properties on .pm-site[data-vertical]
   per the preview-machine spec — global brand tokens stay untouched. */
.pm-lock { overflow: hidden; }

.pm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.pm-overlay[hidden],
.pm-overlay [hidden] { display: none !important; }
.pm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pm-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - (2 * var(--space-4)));
  overflow-y: auto;
  background: var(--ink-2);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-card);
  animation: pm-pop var(--dur-mid) var(--ease-out);
}
@keyframes pm-pop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.pm-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--cream-dim);
  font-size: var(--fs-400);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pm-close:hover { color: var(--cream); border-color: rgba(244, 239, 228, .4); }
.pm-headline {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  letter-spacing: .02em;
  color: var(--cream);
}
.pm-subline {
  margin-top: var(--space-2);
  color: var(--cream-dim);
  font-size: var(--fs-200);
}

/* ---- Form ---- */
.pm-form { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.pm-label {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-dim);
}
.pm-input {
  font-family: var(--font-body);
  font-size: var(--fs-300);   /* ≥16px — prevents mobile zoom-on-focus */
  color: var(--cream);
  background: var(--ink);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 100%;
}
.pm-input::placeholder { color: rgba(185, 180, 166, .55); }
.pm-input:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.pm-verticals { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.pm-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pm-chip { position: relative; cursor: pointer; }
.pm-chip__radio {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pm-chip__text {
  display: inline-block;
  font-size: var(--fs-200);
  color: var(--cream-dim);
  border: 1px solid rgba(244, 239, 228, .25);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.pm-chip:hover .pm-chip__text { color: var(--cream); }
.pm-chip__radio:checked + .pm-chip__text {
  color: var(--ink);
  background: var(--emerald);
  border-color: var(--emerald);
  font-weight: 600;
}
.pm-chip__radio:focus-visible + .pm-chip__text {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}
.pm-build { justify-self: start; margin-top: var(--space-2); }

/* ---- Stage: status, device toggle, browser frame ---- */
.pm-status { min-height: 1.6em; color: var(--cream-dim); font-size: var(--fs-200); }
.pm-devicebar { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.pm-device {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid rgba(244, 239, 228, .25);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.pm-device.is-on { color: var(--ink); background: var(--cream); border-color: var(--cream); }

.pm-frame {
  width: 100%;
  margin: var(--space-3) auto 0;
  border: 1px solid rgba(244, 239, 228, .16);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: var(--shadow-card), 0 0 60px -30px var(--emerald-glow);
  transition: width var(--dur-mid) var(--ease-out);
}
.pm-frame--phone { width: min(270px, 100%); }
.pm-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(244, 239, 228, .06);
  border-bottom: 1px solid rgba(244, 239, 228, .08);
}
.pm-dots { display: inline-flex; gap: 5px; }
.pm-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 239, 228, .25);
}
.pm-dots i:first-child { background: var(--emerald); }
.pm-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--cream-dim);
  background: rgba(10, 10, 12, .6);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Mini-site: scoped theme properties per vertical ---- */
.pm-site {
  --pm-bg: var(--ink);
  --pm-surface: var(--ink-3);
  --pm-ink: var(--cream);
  --pm-muted: var(--cream-dim);
  --pm-accent: var(--emerald);
  --pm-accent-ink: var(--ink);
  --pm-font-display: var(--font-body);
  background: var(--pm-bg);
  color: var(--pm-ink);
  font-family: var(--font-body);
  padding: 12px 14px 10px;
  display: grid;
  gap: 10px;
  min-height: 300px;
  align-content: start;
}
.pm-site[data-vertical="restaurant"] {
  --pm-bg: #f7efdd;
  --pm-surface: #fffaf0;
  --pm-ink: #38251a;
  --pm-muted: #8a6f5b;
  --pm-accent: #bd4f1c;
  --pm-accent-ink: #fff6ec;
  --pm-font-display: Georgia, 'Times New Roman', serif;
}
.pm-site[data-vertical="trades"] {
  --pm-bg: #232932;
  --pm-surface: #2d3641;
  --pm-ink: #edf2f8;
  --pm-muted: #94a2b4;
  --pm-accent: #2f7bdb;
  --pm-accent-ink: #f2f7ff;
  --pm-font-display: var(--font-body);
}
.pm-site[data-vertical="clinic"] {
  --pm-bg: #f2f7f5;
  --pm-surface: #ffffff;
  --pm-ink: #24403a;
  --pm-muted: #7d968f;
  --pm-accent: #3f8f7d;
  --pm-accent-ink: #f2fbf7;
  --pm-font-display: var(--font-body);
}

/* Assembly pieces + FORGE scanline landing sweep */
.pm-piece {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.pm-piece.pm-in { opacity: 1; transform: none; position: relative; }
.pm-piece.pm-in::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    transparent 0%, var(--emerald-glow) 44%,
    rgba(25, 224, 140, .55) 50%,
    var(--emerald-glow) 56%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 300%;
  animation: pm-scan 550ms var(--ease-out) forwards;
}
@keyframes pm-scan {
  from { background-position: 0 -160%; opacity: 1; }
  to   { background-position: 0 160%;  opacity: 0; }
}

/* Mini-site building blocks (skeleton shapes + short copy strings) */
.pm-bar {
  display: inline-block;
  height: 6px;
  width: 40px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pm-muted) 45%, transparent);
}
.pm-bar--accent { background: var(--pm-accent); }
.pm-mini-nav,
.pm-mini-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pm-mini-nav { padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--pm-muted) 30%, transparent); }
.pm-mini-footer { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--pm-muted) 30%, transparent); }
.pm-mini-brand {
  font-family: var(--pm-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-mini-brand--sm { font-size: 11px; color: var(--pm-muted); }
.pm-mini-links { display: inline-flex; gap: 8px; align-items: center; }
.pm-mini-navbtn {
  width: 44px;
  height: 16px;
  border-radius: 8px;
  background: var(--pm-accent);
}
.pm-mini-hero {
  background: var(--pm-surface);
  border-radius: 8px;
  padding: 16px 14px;
  display: grid;
  gap: 7px;
  justify-items: start;
}
.pm-mini-headline {
  font-family: var(--pm-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}
.pm-mini-name { color: var(--pm-accent); }
.pm-mini-sub { font-size: 11px; color: var(--pm-muted); }
.pm-mini-cta {
  width: 74px;
  height: 18px;
  border-radius: 9px;
  background: var(--pm-accent);
}
.pm-mini-section { display: grid; gap: 7px; }
.pm-mini-label {
  font-family: var(--pm-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pm-ink);
}
.pm-mini-body { display: grid; gap: 6px; justify-items: start; }
.pm-mini-btn {
  display: inline-block;
  width: 58px;
  height: 16px;
  border-radius: 8px;
  background: var(--pm-accent);
}
/* restaurant */
.pm-menurow { display: flex; align-items: center; gap: 8px; width: 100%; }
.pm-leader { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--pm-muted) 55%, transparent); }
.pm-slotrow { display: inline-flex; gap: 6px; }
.pm-slot {
  width: 34px !important;
  height: 14px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--pm-muted) 30%, transparent);
}
.pm-slot--on { background: var(--pm-accent) !important; }
/* trades */
.pm-photogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
}
.pm-photo {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pm-muted) 55%, transparent),
    color-mix(in srgb, var(--pm-muted) 25%, transparent));
}
.pm-quoterow { display: flex; align-items: center; gap: 8px; width: 100%; }
.pm-field { height: 14px !important; border-radius: 7px; }
.pm-map {
  display: block;
  width: 100%;
  height: 26px;
  border-radius: 5px;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--pm-accent) 26%, transparent) 0 6px,
    color-mix(in srgb, var(--pm-muted) 18%, transparent) 6px 12px);
}
/* clinic */
.pm-servicerow { display: flex; align-items: center; gap: 8px; width: 100%; }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pm-accent); flex: none; }
.pm-bookpill {
  display: inline-block;
  width: 92px;
  height: 20px;
  border-radius: 10px;
  border: 1.5px solid var(--pm-accent);
  background: color-mix(in srgb, var(--pm-accent) 16%, transparent);
}
.pm-teamrow { display: inline-flex; gap: 8px; }
.pm-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pm-accent) 45%, var(--pm-surface));
}
/* other */
.pm-cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.pm-minicard {
  display: block;
  height: 30px;
  border-radius: 5px;
  background: var(--pm-surface);
  border: 1px solid color-mix(in srgb, var(--pm-muted) 30%, transparent);
}

/* ---- Post-reveal ---- */
.pm-after { margin-top: var(--space-4); display: grid; gap: var(--space-3); justify-items: start; }
.pm-postline { color: var(--cream); font-size: var(--fs-200); max-width: 52ch; }
.pm-micro { color: var(--cream-dim); font-size: var(--fs-100); }
.pm-try {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cream-dim);
  font-size: var(--fs-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pm-try:hover { color: var(--cream); }

@media (max-width: 480px) {
  .pm-panel { padding: var(--space-5) var(--space-3) var(--space-3); }
  .pm-chiprow { gap: var(--space-1); }
  .pm-chip__text { padding: var(--space-1) var(--space-2); }
}

/* @component: quote-form ----------------------------------------------------
   Intake overlay for js/quote-form.js (lazy module, v2 direct submit).
   Reuses the .pm- dialog shell (overlay/backdrop/panel/close/form/chips) —
   only quote-form-specific extensions live here. Chip inputs are radios AND
   checkboxes; the shared .pm-chip__radio rules are input-type-agnostic. */
.qf-form { gap: var(--space-3); }
.qf-notes {
  resize: vertical;
  min-height: calc(3 * var(--space-4));
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.qf-why {
  color: var(--cream-dim);
  font-size: var(--fs-100);
  margin-top: calc(-1 * var(--space-2));
}
/* Inline email validation — friendly, on-palette (no red in the brand set):
   full-cream message + emerald field outline to draw the eye. */
.qf-invalid {
  color: var(--cream);
  font-size: var(--fs-200);
  margin-top: calc(-1 * var(--space-2));
}
.qf-input--invalid {
  border-color: var(--emerald);
  box-shadow: 0 0 0 1px var(--emerald-glow);
}
/* Honeypot: invisible to humans and AT, still submittable by naive bots. */
.qf-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.qf-submit { justify-self: start; margin-top: var(--space-2); }
.qf-submit:disabled { opacity: .6; cursor: default; transform: none; }
.qf-helper {
  color: var(--cream-dim);
  font-size: var(--fs-200);
  max-width: 52ch;
  min-height: 1.6em;
}
.qf-errorrow { display: grid; gap: var(--space-2); justify-items: start; }
.qf-errorline { color: var(--cream); font-size: var(--fs-200); }
.qf-mailto { justify-self: start; }
/* Sent state — replaces the form after a successful delivery. */
.qf-sent { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-5); }
.qf-sent__head {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  letter-spacing: .02em;
  color: var(--cream);
}
.qf-sent__line { color: var(--cream-dim); font-size: var(--fs-200); max-width: 52ch; }

/* ---- Reduced motion: kill kinetics, keep everything readable ------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  /* Render everything in its final, legible state. */
  .hero__title span { transform: none; filter: none; opacity: 1; }
  .hero__subtitle { opacity: 1; transform: none; }
  .hero__hint { opacity: 1; }
  .hero__hint-line { animation: none; }
  /* All three pillars stack vertically in normal flow — no absolute overlap.
     .is-past included at matching specificity so no exit transform applies. */
  .pillar,
  .pillar.is-past,
  .pillar.is-active {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-width: none;
    margin-bottom: var(--space-7);
  }
  .pillars, .finale { height: auto; }
  .pillars__pin, .finale__pin { position: static; height: auto; overflow: visible; }
  .pillars__stage { display: block; height: auto; padding-block: var(--space-8); }
  .forge { display: none; }
  .finale__line .word { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}