/* ==========================================================================
   Radon Explorer — styles.css
   Design tokens → base → layout → journey (scroll story) → sections → forms
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Depth palette — the ground beneath the house */
  --depth-950: #050708;
  --depth-900: #0A0D0F;
  --depth-800: #11161A;
  --depth-700: #1A2126;
  --depth-600: #2A343B;

  /* Surface palette — warm neutrals, never pure white or pure black.
     Semantic names first; the older token names alias onto them so every
     existing rule follows the theme without being rewritten. */
  --page-bg: #F2EFE8;
  --surface: #FAF8F3;
  --surface-muted: #E8E3DA;
  --surface-sunk: #DFD9CE;
  --text-primary: #171B1E;
  --text-secondary: #596168;
  --text-muted: #7A838A;
  --border: rgba(23, 27, 30, 0.12);

  /* Material accents. These are the artwork's colours, not the page theme's —
     they stay the same in light and dark mode. This block was lost in the theme
     refactor, which left var(--amber) undefined and painted the booking buttons
     transparent. */
  --amber: #E39B3C;
  --amber-lo: #B87B25;
  --amber-hi: #F7D8A4;
  --mineral: #A6AEB3;
  --mineral-hi: #D6DCE0;
  --uranium: #2FA96A;
  --uranium-hi: #63E4A0;
  --assay: #4E82B4;
  --assay-hi: #9CC4E4;

  /* Primary call to action — deliberately identical in both themes */
  --cta-bg: #E99A22;
  --cta-bg-hover: #F2AA34;
  --cta-text: #17130C;
  --cta-border: rgba(255, 190, 85, 0.8);
  --cta-shadow: 0 8px 28px rgba(219, 132, 19, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  --paper: var(--page-bg);
  --paper-2: var(--surface-muted);
  --paper-3: var(--surface-sunk);

  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --rule: var(--border);
  --rule-dark: rgba(214, 220, 224, 0.16);

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);

  --shell: min(1180px, 92vw);
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

/* Dark theme. The cinematic story section is dark in both modes; this changes
   the reading sections around it. */
html[data-theme="dark"] {
  --page-bg: #0D1215;
  --surface: #141B1F;
  --surface-muted: #1B2429;
  --surface-sunk: #101619;
  --text-primary: #F3F0E9;
  --text-secondary: #ABB4B8;
  --text-muted: #8A9398;
  --border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }
a { color: inherit; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

:focus-visible {
  outline: 3px solid var(--assay);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .journey :focus-visible, .site-footer :focus-visible { outline-color: var(--amber-hi); }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.shell { width: var(--shell); margin-inline: auto; }
.measure { max-width: 62ch; }

/* Utility labels — the instrument voice of the site */
.eyebrow {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: 0.7;
}
.on-dark .eyebrow { color: var(--mineral); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background-color: var(--cta-bg);          /* solid colour, never a bare var() */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.08) 100%);
  color: var(--cta-text);
  border: 1px solid var(--cta-border);
  box-shadow: var(--cta-shadow);
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}
.btn--primary:hover { background-color: var(--cta-bg-hover); box-shadow: 0 12px 34px rgba(219, 132, 19, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.34); }
.btn--primary:focus-visible { outline: 3px solid var(--cta-text); outline-offset: 3px; }
/* the CTA must not be dimmed by the theme, the sky state, or any ancestor */
html[data-theme="dark"] .btn--primary { background-color: var(--cta-bg); color: var(--cta-text); }
.book-dock, .header-cta { opacity: 1; }
.btn--ghost {
  background: rgba(10, 13, 15, 0.42);
  color: #F3F1EC;
  border-color: rgba(243, 241, 236, 0.32);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(243, 241, 236, 0.7); background: rgba(10, 13, 15, 0.6); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #000; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 0.6rem 1.05rem; min-height: 42px; font-size: 0.9rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(5, 7, 8, 0.72), rgba(5, 7, 8, 0));
  transition: background-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 0;
}
.site-header.is-solid {
  background-image: none;
  background-color: rgba(246, 244, 239, 0.93);
  backdrop-filter: blur(12px) saturate(1.1);
}
.header-inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; gap: 1.4rem; }

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.brand__logo { display: block; width: 190px; height: auto; max-width: none; }
.brand__logo--dark { display: none; }
.site-header.is-solid .brand__logo--light { display: none; }
.site-header.is-solid .brand__logo--dark { display: block; }
html[data-theme="dark"] .site-header.is-solid .brand__logo--light { display: block; }
html[data-theme="dark"] .site-header.is-solid .brand__logo--dark { display: none; }

.site-nav { display: flex; gap: 1.35rem; }
.site-nav a {
  color: #E7E4DE; text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 0.35rem 0; border-bottom: 1px solid transparent;
}
.is-solid .site-nav a { color: var(--ink-2); }
.site-nav a:hover { border-bottom-color: currentColor; }

.theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(243, 241, 236, 0.35);
  color: #F3F1EC; border-radius: 8px; width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
}
.is-solid .theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.is-solid .nav-toggle { color: var(--ink); border-color: var(--rule); }

@media (max-width: 900px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: rgba(246, 244, 239, 0.985);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 4vw 1.2rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .site-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { color: var(--ink); padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 1.02rem; }
  .theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* ---------- Sticky booking control ---------- */
.book-dock {
  position: fixed; z-index: 85;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 0.6rem; align-items: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.book-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.book-dock.is-suppressed { opacity: 0; transform: translateY(14px); pointer-events: none; }
.book-dock .btn { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6); }
.back-to-top {
  position: fixed; z-index: 88; left: auto; right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.65rem 0.9rem;
  border: 1px solid rgba(233, 230, 224, 0.3); border-radius: 999px;
  background: rgba(10, 13, 15, 0.82); color: #F5F1E9; backdrop-filter: blur(10px);
  font: 600 0.72rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transform: translateY(12px); pointer-events: none; cursor: pointer;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), border-color 0.2s var(--ease);
}
.back-to-top > span:first-child { font-size: 1rem; line-height: 0.8; }
.back-to-top:hover { border-color: rgba(233, 230, 224, 0.75); }
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 700px) {
  .book-dock {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  }
  .book-dock .btn { width: 100%; }
  .back-to-top {
    left: auto; right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   THE JOURNEY — scroll-driven cross-section
   ========================================================================== */
.journey { position: relative; background: var(--depth-950); }

.stage {
  background-color: transparent;   /* nothing to fill: the camera reaches the edges */
  position: sticky; top: 0;
  /* Cover the LARGEST viewport: with 100svh the artwork stops short of the
     bottom once a mobile URL bar retracts, exposing the layer beneath it. */
  height: 100vh; height: 100lvh;
  /* `hidden` creates a programmatically scrollable box; hash navigation was
     silently setting stage.scrollTop and lifting the artwork off the bottom.
     `clip` keeps the camera contained without creating that inner scroller. */
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(120% 80% at 50% 8%, #2A3138 0%, #10151A 45%, #050708 100%);
}

/* Camera box is sized in JS to the image "cover" rectangle */
/* Falls back to a full-bleed static frame if JS never runs */
.camera {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  transform: none;
}
.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.layer img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A single uncut master avoids duplicated path lanterns and raster seams. */
.layer--house { clip-path: none; }

/* Sky plate: a real animated layer painted behind the cut-out house.
   It reaches well above the artwork and stops at the tree line. */
.sky-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}

/* The camera is clamped to the artwork's own bounds (see story.js), so no
   filler layer is needed below the image and no seam can appear. */

/* Uranium and radium glows are no longer CSS bands. They are drawn per deposit
   in image space by story.js (drawMinerals), so there is no straight horizontal
   edge and the rock texture underneath is preserved. */

/* Lighting + material overlays (all inside the camera) */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx--vignette {
  background: radial-gradient(78% 60% at 50% 42%, rgba(0, 0, 0, 0) 40%, rgba(3, 5, 6, 0.55) 78%, rgba(3, 5, 6, 0.9) 100%);
  /* release the deposit band so the mineral glow is never vignetted away */
  mask-image: linear-gradient(180deg, black 84%, rgba(0,0,0,0.35) 91%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, black 84%, rgba(0,0,0,0.35) 91%, transparent 98%);
  opacity: 0.35;
}
.fx--underground {
  background: linear-gradient(180deg,
    rgba(4, 6, 8, 0) 58%, rgba(4, 6, 8, 0.5) 74%, rgba(4, 6, 8, 0.6) 86%,
    rgba(4, 6, 8, 0.28) 93%, rgba(4, 6, 8, 0.1) 100%);
  opacity: 0;
}
/* Glow that follows the deposits instead of a rectangle:
   a blurred, screen-blended duplicate of the deposit band itself. */
/* A soft lift, clipped to the same band so it can never wash across the soil */
.fx--shafts {
  background: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 46px);
  mask-image: linear-gradient(180deg, transparent 62%, black 78%, transparent 99%);
  -webkit-mask-image: linear-gradient(180deg, transparent 62%, black 78%, transparent 99%);
  opacity: 0;
}
/* The spotlight sits above the complete visual-effects stack (including the
   particle canvas) but below the story copy. The opening remains crisp; outside
   it the live scene is strongly darkened, desaturated and blurred instead of
   being replaced by flat black. */
.fx--stage-focus {
  z-index: 3; opacity: 0; mix-blend-mode: normal;
  background: rgba(1, 5, 8, 0.55);
  backdrop-filter: blur(8px) brightness(0.46) saturate(0.45);
  -webkit-backdrop-filter: blur(8px) brightness(0.46) saturate(0.45);
  /* A long, evenly graded falloff rather than a short knee. The clear core is
     unchanged; everything past it eases into the darkened scene over roughly
     three times the previous distance, so the opening reads as light falling
     away rather than as a cut-out. */
  mask-image: radial-gradient(
    ellipse var(--spot-rx, 1px) var(--spot-ry, 1px)
    at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(0, 0, 0, 0) 0 38%,
    rgba(0, 0, 0, 0.06) 48%,
    rgba(0, 0, 0, 0.16) 58%,
    rgba(0, 0, 0, 0.32) 68%,
    rgba(0, 0, 0, 0.52) 78%,
    rgba(0, 0, 0, 0.72) 88%,
    rgba(0, 0, 0, 0.88) 100%,
    rgba(0, 0, 0, 0.97) 118%,
    #000 140%
  );
  -webkit-mask-image: radial-gradient(
    ellipse var(--spot-rx, 1px) var(--spot-ry, 1px)
    at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(0, 0, 0, 0) 0 38%,
    rgba(0, 0, 0, 0.06) 48%,
    rgba(0, 0, 0, 0.16) 58%,
    rgba(0, 0, 0, 0.32) 68%,
    rgba(0, 0, 0, 0.52) 78%,
    rgba(0, 0, 0, 0.72) 88%,
    rgba(0, 0, 0, 0.88) 100%,
    rgba(0, 0, 0, 0.97) 118%,
    #000 140%
  );
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: opacity 0.7s var(--ease);
  will-change: opacity;
}
.fx--interior {
  background:
    radial-gradient(4.5% 9% at 43% 34%, rgba(250, 219, 165, 0.78), transparent 72%),
    radial-gradient(4.5% 9% at 57% 32%, rgba(250, 219, 165, 0.72), transparent 72%),
    radial-gradient(4% 8% at 44% 18%, rgba(250, 219, 165, 0.66), transparent 72%),
    radial-gradient(4% 8% at 57% 17%, rgba(250, 219, 165, 0.62), transparent 72%),
    radial-gradient(3.5% 7% at 41% 52%, rgba(250, 219, 165, 0.55), transparent 72%),
    radial-gradient(3% 6% at 53% 50%, rgba(250, 219, 165, 0.45), transparent 72%);
  mix-blend-mode: screen; opacity: 0;
}
/* Exterior + interior lighting responses to the sky */
.fx--daylight {
  background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0) 58%);
  mix-blend-mode: soft-light; opacity: 0;
}
.fx--moonlight {
  background:
    radial-gradient(46% 34% at 78% 6%, rgba(188, 208, 240, 0.5), rgba(188,208,240,0) 70%),
    linear-gradient(200deg, rgba(158, 186, 226, 0.22) 0%, rgba(158,186,226,0) 46%);
  mix-blend-mode: screen; opacity: 0;
}
.fx--night {
  background: linear-gradient(180deg, rgba(18, 30, 58, 0.96) 0%, rgba(20, 32, 56, 0.88) 46%, rgba(14, 22, 40, 0.72) 100%);
  mix-blend-mode: multiply; opacity: 0;
}
.fx--indoor-haze {
  /* masked to the rooms: a soft haze above the interiors, never a fog bank */
  background: radial-gradient(16% 34% at 49.5% 44%, rgba(198, 214, 222, 0.34) 0%, rgba(198, 214, 222, 0.16) 55%, rgba(198, 214, 222, 0) 100%);
  mask-image: linear-gradient(180deg, transparent 8%, black 22%, black 62%, transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, black 22%, black 62%, transparent 68%);
  opacity: 0;
}

/* Entry-path SVG (inside the camera, so it scales cleanly) */
.entry-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke; }
/* Programmatic stage glides hide straight annotations until the camera parks. */
html[data-stage-scrolling="true"] .entry-paths,
html[data-stage-scrolling="true"] .fx--shafts { opacity: 0 !important; }
/* Deliberately restrained: these annotate the entry routes, they do not compete
   with the artwork. Thin, semi-transparent, no heavy bloom. */
/* Legible over both the pale slab and the dark soil, with a soft glow rather
   than a hard neon line. A slow travelling dash draws the eye along the route. */
.entry-paths path {
  fill: none; stroke: rgba(145, 220, 255, 0.96); stroke-width: 4.2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  filter: drop-shadow(0 0 5px rgba(135, 215, 255, 0.95)) drop-shadow(0 0 13px rgba(80, 170, 230, 0.72));
}
.entry-paths circle {
  fill: rgba(205, 242, 255, 1);
  stroke: rgba(95, 190, 240, 0.85); stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(175, 235, 255, 1)) drop-shadow(0 0 16px rgba(85, 180, 235, 0.85));
  opacity: 0.84;
}
html[data-motion="reduced"] .entry-paths circle { animation: none; opacity: 0.82; }

/* Resolution-independent grain, in screen space so it never scales.
   Fades in as the camera zooms, masking softness in the source artwork. */
.fx--grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Localized darkening behind the active copy only — never the whole frame */
.fx--read-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: background-position 0.4s var(--ease);
  background: radial-gradient(ellipse 55% 90% at 22% 60%, rgba(3, 6, 9, 0.9) 0%, rgba(3,6,9,0.45) 45%, rgba(3,6,9,0) 76%);
}
.fx--read-dim[data-align="right"] { background: radial-gradient(ellipse 55% 90% at 78% 60%, rgba(3,6,9,0.9) 0%, rgba(3,6,9,0.45) 45%, rgba(3,6,9,0) 76%); }
.fx--read-dim[data-align="center"] { background: radial-gradient(ellipse 62% 80% at 50% 52%, rgba(3,6,9,0.86) 0%, rgba(3,6,9,0.42) 48%, rgba(3,6,9,0) 78%); }

/* The artwork camera establishes z-index:1. The effect canvas needs its own
   level or browsers paint it underneath the camera even though it appears
   later in the markup. */
.particles {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: normal;
}

/* Readability scrim behind scene copy */
.stage-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 8, 0.3) 0%, rgba(5, 7, 8, 0.04) 22%, rgba(5, 7, 8, 0) 52%, rgba(5, 7, 8, 0.24) 84%, rgba(5, 7, 8, 0.5) 100%);
}

/* ---------- Story copy ----------
   The copy lives inside the sticky stage and is switched by opacity, so it is
   pinned by the very element that pins the artwork. Previously it was a second,
   nested sticky panel, which is why the text could drift out of step with the
   camera in some browsers. One sticky element now, one clock. */
.stage__copy {
  position: absolute; inset: 0; z-index: 4;
  display: grid;
  /* One row, the height of the stage. Without this the row grows to the tallest
     card and align-self centres against that instead of against the viewport,
     which pushed the Stage 6 panel off the bottom on short screens. */
  grid-template-rows: minmax(0, 1fr);
  padding: calc(var(--header-h) + 2rem) calc((100% - var(--shell)) / 2) clamp(3rem, 12vh, 8rem);
  pointer-events: none;
}
.scene-card {
  grid-area: 1 / 1;                 /* every card shares one cell and cross-fades */
  align-self: end; justify-self: start;
  position: relative;
  isolation: isolate;
  max-width: 32rem;
  color: #F1EFEA;
  pointer-events: auto;
  will-change: opacity, transform;
}
.scene-card[data-align="right"] { justify-self: end; }
.scene-card[data-align="center"] { justify-self: center; text-align: center; align-self: center; }
.scene-card[data-align="center"] .eyebrow { justify-content: center; }
.scene-card[data-align="center"] .note { margin-inline: auto; }
.scene-card--hero { align-self: center; max-width: 38rem; }
/* The proof line used to sit on a flat rectangle, which cut a visible box out of
   the artwork behind it. It now carries a scrim that fades to nothing on every
   side, so the note settles into the scene while the text stays legible. */
.scene-card--hero .hero-proof {
  position: relative;
  max-width: 34rem; margin: 0.9rem 0 1.05rem;
  padding: 0.6rem 0.85rem 0.62rem 0.9rem;
  color: #E8E4DB; font-size: 0.86rem; line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
}
.scene-card--hero .hero-proof::before {
  content: "";
  position: absolute; inset: -0.5rem -2.8rem -0.55rem -1rem;
  z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(4, 7, 9, 0) 0%, rgba(4, 7, 9, 0.7) 10%, rgba(4, 7, 9, 0.66) 44%,
    rgba(4, 7, 9, 0.4) 70%, rgba(4, 7, 9, 0.12) 88%, rgba(4, 7, 9, 0) 100%);
  mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 22%, #000 34%,
    #000 66%, rgba(0, 0, 0, 0.74) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 22%, #000 34%,
    #000 66%, rgba(0, 0, 0, 0.74) 80%, rgba(0, 0, 0, 0) 100%);
}
/* The amber rule stays, but its ends fade out instead of stopping square. */
.scene-card--hero .hero-proof::after {
  content: "";
  position: absolute; left: 0; top: 0.08rem; bottom: 0.08rem; width: 3px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(227, 155, 60, 0) 0%, var(--amber) 20%, var(--amber) 80%,
    rgba(227, 155, 60, 0) 100%);
}
.scene-card--hero .hero-proof strong { color: var(--amber-hi); }

/* Stage 6 keeps clear of the house so the interior, the lighting and the gas
   stay visible. Right-hand column on anything wide enough; on a phone it moves
   into the sky above the artwork instead of covering it. */
.scene-card--variation {
  justify-self: end; align-self: center;
  width: min(26vw, 24rem); max-width: 24rem;
  text-align: left;
  margin-right: clamp(6rem, 12vw, 15rem);
}
.scene-card--variation[data-align="right"] .eyebrow { justify-content: flex-start; }
@media (max-width: 1100px) {
  .scene-card--variation { width: min(34vw, 22rem); font-size: 0.94em; margin-right: clamp(1rem, 7vw, 5rem); }
}
@media (max-width: 760px) {
  /* above the artwork, never over it */
  .scene-card--variation { align-self: start; justify-self: stretch; width: auto; margin: 0; }
}

/* Local scrim: a soft gradient that travels with the copy, not a box */
/* The previous single radial gradient was still at ~40% opacity where the box
   ended, so its rounded rectangle was visible against the artwork. The fill now
   fades to nothing horizontally and is feathered vertically by a mask, which
   leaves no edge for the eye to catch in any direction. */
.scene-card::before {
  content: "";
  position: absolute; inset: -3rem -3.4rem;
  z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 10, 14, 0) 0%, rgba(5, 10, 14, 0.8) 15%, rgba(5, 10, 14, 0.86) 38%,
    rgba(5, 10, 14, 0.6) 64%, rgba(5, 10, 14, 0.2) 85%, rgba(5, 10, 14, 0) 100%);
  mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 14%, rgba(0, 0, 0, 0.94) 28%,
    #000 42%, #000 60%, rgba(0, 0, 0, 0.9) 76%, rgba(0, 0, 0, 0.5) 88%,
    rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 14%, rgba(0, 0, 0, 0.94) 28%,
    #000 42%, #000 60%, rgba(0, 0, 0, 0.9) 76%, rgba(0, 0, 0, 0.5) 88%,
    rgba(0, 0, 0, 0) 100%);
}
.scene-card[data-align="right"]::before {
  background: linear-gradient(270deg,
    rgba(5, 10, 14, 0) 0%, rgba(5, 10, 14, 0.8) 15%, rgba(5, 10, 14, 0.86) 38%,
    rgba(5, 10, 14, 0.6) 64%, rgba(5, 10, 14, 0.2) 85%, rgba(5, 10, 14, 0) 100%);
}
.scene-card[data-align="center"]::before {
  background: linear-gradient(90deg,
    rgba(5, 10, 14, 0) 0%, rgba(5, 10, 14, 0.5) 12%, rgba(5, 10, 14, 0.84) 32%,
    rgba(5, 10, 14, 0.84) 68%, rgba(5, 10, 14, 0.5) 88%, rgba(5, 10, 14, 0) 100%);
}
.scene-card h1, .scene-card h2 { color: #FBFAF7; text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.45); }
.scene-card p { color: #D9D5CD; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); text-shadow: 0 1px 4px rgba(0,0,0,0.7); max-width: 58ch; }

/* Scroll length only — these carry no content */
/* Spacers overlay the sticky stage. Without this they intercept every click
   meant for the story controls and the hero buttons underneath. */
.scene-track { position: relative; margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.scene-spacer { height: calc(var(--scene-len, 170) * 1svh); }

/* Copy relocated into normal flow when motion is reduced */
.story-flow { display: none; }
html[data-motion="reduced"] .story-flow {
  display: block; background: var(--depth-900);
  padding: clamp(3rem, 8vh, 5rem) calc((100% - var(--shell)) / 2);
}
html[data-motion="reduced"] .story-flow .scene-card {
  display: block; position: static; max-width: 62ch;
  margin: 0 0 3rem; opacity: 1 !important; visibility: visible !important;
  transform: none !important; text-align: left;
}
html[data-motion="reduced"] .story-flow .scene-card::before { display: none; }
html[data-motion="reduced"] .scene-track { display: none; }
html[data-motion="reduced"] .scroll-hint { display: none; }

/* ---------- Signature element: the depth gauge ---------- */
.gauge {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 80; width: 132px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.gauge.is-active { opacity: 1; pointer-events: auto; }
.gauge__rail {
  position: relative; height: 46svh; width: 1px;
  background: linear-gradient(180deg, rgba(214, 220, 224, 0.08), rgba(214, 220, 224, 0.4) 22%, rgba(99, 228, 160, 0.55));
  margin-left: 14px;
}
.gauge__ticks { list-style: none; margin: 0; padding: 0; }
.gauge__tick {
  position: absolute; left: -14px; right: -104px;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px;                 /* full-row hit area, unchanged visually */
  margin-top: -22px; padding: 0 0 0 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left;
  color: rgba(214, 220, 224, 0.5);
  border-radius: 6px;
  transition: color 0.2s var(--ease);
}
.gauge__tick::before {
  content: ""; flex: none; width: 9px; height: 1px;
  background: rgba(214, 220, 224, 0.45);
  transition: width 0.2s var(--ease), background-color 0.2s var(--ease);
}
.gauge__tick:hover { color: #F2F0EA; }
.gauge__tick:hover::before { width: 16px; background: var(--amber-hi); }
.gauge__tick:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
.gauge__tick[aria-current="step"] { color: #F2F0EA; }
.gauge__tick[aria-current="step"]::before { width: 16px; background: var(--amber); }
.gauge__head {
  /* centred on both axes: JS supplies `top` as a percentage of the rail, and the
     translate takes care of the dot's own width and height */
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px rgba(227, 155, 60, 0.2), 0 0 14px rgba(227, 155, 60, 0.9);
  transition: top 0.25s var(--ease);
  pointer-events: none;
}
.gauge__readout { margin: 0 0 0.75rem 14px;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(214, 220, 224, 0.75); text-transform: uppercase; margin-bottom: 0.75rem;
}
.gauge__readout b { display: block; color: #F2F0EA; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; }
@media (max-width: 900px) { .gauge { display: none; } }

/* Story controls — their own group, opposite corner from the booking dock so
   the two can never collide. Safe-area aware on both axes. */
.story-controls {
  position: absolute; z-index: 8;
  left: calc(22px + env(safe-area-inset-left, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  pointer-events: auto;
}
.chip {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(10, 13, 15, 0.55); color: #E9E6E0; border: 1px solid rgba(233, 230, 224, 0.28);
  border-radius: 999px; padding: 0.55rem 0.95rem; cursor: pointer; text-decoration: none;
  backdrop-filter: blur(6px); min-height: 40px; display: inline-flex; align-items: center;
}
.chip:hover { border-color: rgba(233, 230, 224, 0.7); }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 700px) {
  /* one row above the booking dock, never on top of it */
  .story-controls {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .chip { font-size: 0.62rem; padding: 0.5rem 0.75rem; }
}

@media (max-width: 760px) {
  /* Busy artwork behind small text: use a restrained panel pinned to the bottom */
  .stage__copy { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9.5rem); }
  .scene-card, .scene-card--hero, .scene-card[data-align="right"], .scene-card[data-align="center"] {
    align-self: end; justify-self: stretch;
    max-width: none; margin: 0; text-align: left;
    background: rgba(8, 14, 18, 0.68);
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1.15rem 1.15rem 1.25rem;
    box-shadow: 0 18px 55px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .scene-card::before { display: none; }
  .scene--center .scene-card .eyebrow { justify-content: flex-start; }
  .scene-card .note { max-width: none; }
}

/* Very narrow phones need a tighter header and hero rhythm. Without this the
   190px wordmark competes with both controls, and the tall hero card can rise
   behind the fixed header. */
@media (max-width: 360px) {
  .header-inner { gap: 0.5rem; }
  .brand__logo { width: 132px; }
  .stage__copy {
    padding-top: calc(var(--header-h) + 0.5rem);
    padding-inline: 0.5rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8rem);
  }
  .scene-card--hero { align-self: center; padding: 0.9rem; }
  .scene-card--hero .eyebrow {
    margin-bottom: 0.6rem;
    gap: 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  .scene-card--hero .eyebrow::before { width: 18px; }
  .scene-card--hero h1 { font-size: 2.1rem; margin-bottom: 0.35em; }
  .scene-card--hero p { font-size: 0.92rem; line-height: 1.45; margin-bottom: 0.8rem; }
  .hero-actions { display: grid; gap: 0.45rem; }
  .scene-card--hero .btn {
    width: 100%; min-height: 44px;
    padding: 0.65rem 0.75rem;
    font-size: 0.84rem;
  }
}

/* ==========================================================================
   Standard sections
   ========================================================================== */
.section { padding: clamp(4rem, 10vh, 7.5rem) 0; scroll-margin-top: var(--header-h); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--depth-900); color: #E9E6E0; }
.section--dark h2, .section--dark h3 { color: #FBFAF7; }
.section--dark p { color: #C9C5BD; }
.section__head { max-width: 46rem; margin-bottom: 3rem; }
.section__head p { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; }
.section--dark .section__head p { color: #C3BFB7; }
.mobile-copy { display: none; }
@media (min-width: 980px) {
  .section__head--split {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    gap: 0.8rem clamp(3rem, 8vw, 7rem); align-items: end;
  }
  .section__head--split .eyebrow { grid-column: 1 / -1; }
  .section__head--split h2 { grid-column: 1; margin-bottom: 0; max-width: 15ch; }
  .section__head--split > p:last-child { grid-column: 2; margin: 0; max-width: 50ch; }
}

/* ---------- Service-area story ---------- */
.coverage__intro {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: end; margin-bottom: 2.4rem;
}
.coverage__intro h2 { max-width: 12ch; }
@media (min-width: 1280px) {
  .coverage__intro h2 { max-width: none; white-space: nowrap; }
}
.coverage__number {
  display: block; font-family: var(--data); font-size: clamp(4.8rem, 12vw, 9rem);
  font-weight: 500; line-height: 0.82; letter-spacing: -0.08em; color: var(--assay);
  margin-bottom: 0.22em;
}
.text-link { font-weight: 650; text-underline-offset: 0.22em; }
.coverage__actions { display: grid; gap: 0.65rem; justify-items: start; }
.credential-line { font-family: var(--data); font-size: 0.76rem; letter-spacing: 0.05em; color: var(--ink-3); }
.county-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.county-groups section { padding: 1.35rem 1.4rem 0.35rem 0; border-right: 1px solid var(--rule); }
.county-groups section + section { padding-left: 1.4rem; }
.county-groups section:last-child { border-right: 0; }
.county-groups h3 { font-family: var(--data); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--assay); }
.county-groups p { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.75; }
.travel-note {
  margin-top: 2rem; display: grid; grid-template-columns: minmax(10rem, 0.5fr) minmax(16rem, 0.8fr) minmax(18rem, 1.4fr) auto;
  gap: 1.2rem 2rem; align-items: center; padding: 1.6rem 1.8rem;
  border-radius: var(--radius); background: var(--depth-900); color: #E9E6E0;
}
.travel-note .eyebrow, .travel-note h3, .travel-note p { margin: 0; }
.travel-note .eyebrow { color: var(--assay-hi); }
.travel-note h3 { color: #FBFAF7; }
.travel-note p { color: #C9C5BD; font-size: 0.9rem; }
.travel-note .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .coverage__intro { grid-template-columns: 1fr; align-items: start; }
  .county-groups { grid-template-columns: 1fr; }
  .county-groups section, .county-groups section + section { padding: 1.1rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .county-groups section:last-child { border-bottom: 0; }
  .travel-note { grid-template-columns: 1fr; align-items: start; }
  .travel-note .btn { justify-self: start; white-space: normal; }
}

/* ---------- Radon testing prompt ---------- */
.radon-prompt { background: var(--depth-900); color: #E9E6E0; overflow: hidden; }
.radon-prompt__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.radon-prompt h2 { color: #FBFAF7; max-width: 13ch; }
.radon-prompt p { color: #C9C5BD; max-width: 60ch; }
.radon-prompt .eyebrow { color: var(--assay-hi); }
.radon-prompt__stat { display: block; color: var(--assay-hi); font-family: var(--data); font-size: 0.68em; font-weight: 500; letter-spacing: -0.045em; margin-bottom: 0.16em; }
.radon-prompt__line { color: #FBFAF7 !important; font-size: var(--step-1); font-weight: 650; }
.radon-prompt .source-note { color: #89949B; font-size: 0.74rem; }
.radon-prompt .source-note a { color: #B8C9D7; }
.home-stat { padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid rgba(156, 196, 228, 0.22); border-radius: var(--radius); background: linear-gradient(180deg, #152027, #0A1013); box-shadow: 0 22px 55px rgba(0,0,0,0.25); }
.home-stat__question { margin: 0 0 1.2rem !important; color: #FBFAF7 !important; font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.15; }
.home-stat ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.55rem, 1.7vw, 0.9rem); }
.home-stat li {
  aspect-ratio: 0.88; display: grid; place-items: center; padding-top: 18%;
  clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%);
  background: #27353D; color: #8B989F;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.home-stat[data-revealed="true"] li:not(.is-elevated) { filter: brightness(0.72); }
.home-stat li.is-elevated { background: var(--cta-bg); color: var(--cta-text); filter: none; transform: translateY(-0.28rem); }
.home-stat li span { font-family: var(--data); font-size: clamp(0.75rem, 1.8vw, 1.05rem); font-weight: 600; }
.home-stat__reveal {
  width: 100%; min-height: 46px; margin-top: 1.15rem; padding: 0.7rem 1rem;
  border: 1px solid rgba(156, 196, 228, 0.32); border-radius: 999px;
  background: rgba(156, 196, 228, 0.08); color: #E8F2FA;
  font: 600 0.82rem/1.2 var(--body); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.home-stat__reveal:hover { background: rgba(156, 196, 228, 0.15); border-color: rgba(156, 196, 228, 0.55); transform: translateY(-1px); }
.home-stat__reveal:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 3px; }
.home-stat__legend { display: grid; grid-template-columns: 18px 1fr; gap: 0.75rem; align-items: start; margin-top: 1.35rem; }
.home-stat__legend > span { width: 18px; height: 18px; margin-top: 0.18rem; border-radius: 3px; background: var(--cta-bg); }
.home-stat__legend p { margin: 0; color: #AEB7BC; font-size: 0.82rem; line-height: 1.5; }
.home-stat__legend strong { color: #FBFAF7; }
.home-stat .home-stat__caption { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(156, 196, 228, 0.16); color: #8F9AA0; font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.04em; }
@media (max-width: 800px) {
  .radon-prompt__grid { grid-template-columns: 1fr; }
}

.service-review-note {
  padding: 0.9rem 1rem; border-left: 3px solid var(--assay); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--assay) 8%, var(--surface));
}
.service-review-note strong { font-size: 0.84rem; }
.service-review-note p { margin: 0.2rem 0 0; color: var(--ink-2); font-size: 0.78rem; }

.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card__tag {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--assay); margin-bottom: 0.9rem; display: block;
}
.card--dark { background: var(--depth-800); border-color: var(--rule-dark); }
html[data-theme="dark"] .card { background: var(--surface); }
html[data-theme="dark"] .section--paper2 { background: var(--surface-sunk); }
html[data-theme="dark"] .site-header.is-solid { background-color: rgba(20, 27, 31, 0.94); }
html[data-theme="dark"] .sheet, html[data-theme="dark"] .sheet__head { background: var(--page-bg); }
html[data-theme="dark"] .error-summary { background: #2A1D12; border-color: #8A5A2E; }
html[data-theme="dark"] .error-summary a, html[data-theme="dark"] .error-text { color: #F0B27A; }
html[data-theme="dark"] .form-status[data-state="success"] { background: #16241B; border-color: #3E6B4E; }
html[data-theme="dark"] .form-status[data-state="error"] { background: #2A1D12; border-color: #8A5A2E; }
html[data-theme="dark"] .form-status[data-state="pending"] { background: #16202A; border-color: #35546F; }
html[data-theme="dark"] .field[data-invalid="true"] input, html[data-theme="dark"] .field[data-invalid="true"] select, html[data-theme="dark"] .field[data-invalid="true"] textarea { background: #241A12; }
html[data-theme="dark"] .placeholder { color: var(--assay-hi); background: rgba(156, 196, 228, 0.12); border-color: rgba(156, 196, 228, 0.45); }
html[data-theme="dark"] .scale__mark span { background: rgba(20, 27, 31, 0.9); color: #EDEAE3; }
html[data-theme="dark"] .scale__grip { background: #F3F0E9; border-color: #141B1F; }
html[data-theme="dark"] .scale__needle { background: #F3F0E9; box-shadow: 0 0 0 2px rgba(13,18,21,0.9); }
html[data-theme="dark"] .scale__bubble { background: #F3F0E9; color: #141B1F; }
html[data-theme="dark"] .btn--dark { background: var(--surface-muted); color: var(--text-primary); }
html[data-theme="dark"] .btn--dark:hover { background: #222D33; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Manual explore ---------- */
.explore { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .explore { grid-template-columns: 1fr; } }
.explore__figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--depth-900); border: 1px solid var(--rule-dark);
  aspect-ratio: 3072 / 1024;
}
.explore__figure img { width: 100%; height: 100%; object-fit: contain; }
.hotspot {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(10, 13, 15, 0.5); backdrop-filter: blur(3px);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  font-family: var(--data); font-size: 0.68rem;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.hotspot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse { 0% { transform: scale(0.85); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.hotspot:hover, .hotspot[aria-pressed="true"] { background: var(--amber); color: #21150A; transform: scale(1.1); border-color: var(--amber-hi); }
.explore__panel { background: var(--depth-800); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: 1.7rem; min-height: 14rem; }
.explore__panel h3 { color: #FBFAF7; }
.explore__panel p { color: #C9C5BD; }

/* ---------- Level scale ---------- */
.levels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .levels { grid-template-columns: 1fr; } }

.scale {
  position: relative; height: 84px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #3E6E8F 0%, #4E82B4 18%, #A6AEB3 36%, #D6B87A 55%, #C98B3E 75%, #A9622B 100%);
  border: 1px solid var(--rule);
}
.scale__marks { position: absolute; inset: 0; }
.scale__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.8); }
.scale__mark span {
  position: absolute; top: 6px; left: 7px; white-space: nowrap;
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.06em; color: #10151A;
  background: rgba(255, 255, 255, 0.86); padding: 2px 6px; border-radius: 4px;
}
.scale[data-interactive] { cursor: ew-resize; touch-action: none; }
.scale[data-interactive]:hover .scale__grip { transform: translateX(-50%) scale(1.12); }
.scale__needle {
  position: absolute; top: -8px; bottom: -8px; width: 3px;
  background: var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  transition: left 0.12s var(--ease);
}
.scale.is-dragging .scale__needle { transition: none; }
/* A visible grip: the control has to look draggable, not decorative */
.scale__grip {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: 2px solid #FFFDF9;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.16s var(--ease);
}
.scale__grip::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 9px, rgba(255,255,255,0.85) 9px 10px, transparent 10px 12px,
      rgba(255,255,255,0.85) 12px 13px, transparent 13px 15px, rgba(255,255,255,0.85) 15px 16px, transparent 16px);
}
.scale__bubble {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  font-family: var(--data); font-size: 0.74rem; font-weight: 500;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.scale__hint {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--ink-2);
}
.scale__hint svg { flex: none; margin-top: 0.2rem; color: var(--assay); }
/* The native number spinner sits exactly where the unit goes, so it is removed
   and the unit is a separate element with reserved space behind it. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.unit-input { position: relative; }
.unit-input input[type="number"] {
  padding-right: 4.4rem;              /* room for the unit at any value width */
  font-variant-numeric: tabular-nums;
}
.unit-input span {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-family: var(--data); font-size: 0.8rem; color: var(--ink-3);
  pointer-events: none; user-select: none;
}

.readout {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.5rem; margin-top: 1.5rem;
}
.readout__value { font-family: var(--data); font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; }
.readout__value small { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink-3); margin-left: 0.35rem; }
.readout__band { font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--assay); margin: 0.7rem 0 0.6rem; }
.slider-row { display: flex; align-items: flex-end; gap: 1.2rem; margin-top: 1rem; flex-wrap: wrap; }
input[type="range"] { width: 100%; accent-color: var(--assay); height: 44px; cursor: ew-resize; }

.level-partner,
.level-followup {
  position: relative; overflow: hidden; margin-top: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(78, 130, 180, 0.34); border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, rgba(78, 130, 180, 0.2), transparent 18rem),
    var(--surface);
  box-shadow: 0 16px 38px rgba(22, 27, 30, 0.08);
}
.level-followup { border-color: rgba(92, 137, 118, 0.34); background: radial-gradient(circle at 100% 0, rgba(92, 137, 118, 0.14), transparent 18rem), var(--surface); }
.level-partner::before,
.level-followup::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--assay); }
.level-followup::before { background: #5C8976; }
.level-partner__label,
.level-followup__label { margin: 0 0 0.65rem; color: var(--assay); font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; }
.level-followup__label { color: #477563; }
.level-partner h3,
.level-followup h3 { max-width: 27ch; font-size: var(--step-1); }
.level-partner > p:not(.level-partner__label),
.level-followup > p:not(.level-followup__label) { color: var(--ink-2); font-size: 0.92rem; }
.level-partner__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.band-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.band-list li {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.9rem 0; border-top: 1px solid var(--rule);
}
.band-list b { font-family: var(--data); font-size: 0.86rem; letter-spacing: 0.02em; }
.band-list p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

/* ---------- Result-based next step ---------- */
.decision {
  overflow: hidden; border: 1px solid var(--rule); border-radius: calc(var(--radius) + 0.25rem);
  background: var(--surface); box-shadow: 0 22px 55px rgba(22, 27, 30, 0.08);
}
.decision__intro {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: 1.2rem clamp(3rem, 8vw, 7rem); align-items: end;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 3.25rem) 1.4rem;
}
.decision__intro h2 { margin-bottom: 0.35em; }
.decision__intro > p:last-child { max-width: 50ch; margin: 0 0 0.5rem; color: var(--ink-2); }
.decision__choices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 0 clamp(1.25rem, 5vw, 3.25rem); padding: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden;
}
.decision__choices button {
  min-height: 54px; padding: 0.75rem 0.9rem; border: 0; background: var(--paper2); color: var(--ink-2);
  font: 600 0.86rem/1.25 var(--body); cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.decision__choices button:hover { background: var(--surface); color: var(--ink); }
.decision__choices button[aria-selected="true"] { background: var(--depth-900); color: #FBFAF7; }
.decision__choices button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--assay); outline-offset: -3px; }
.decision__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: 1.5rem clamp(3rem, 8vw, 7rem); align-items: center;
  min-height: 17rem; margin-top: 1.4rem; padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.25rem, 5vw, 3.25rem);
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(circle at 92% 18%, rgba(78, 130, 180, 0.14), transparent 24rem),
    linear-gradient(135deg, var(--surface), var(--paper2));
}
.decision__panel[hidden] { display: none !important; }
.decision__panel::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0.28rem; height: 100%; background: var(--assay);
}
.decision__panel h3 { max-width: 25ch; font-size: var(--step-2); }
.decision__body > p { max-width: 54ch; color: var(--ink-2); }
.decision__step { margin: 0 0 0.7rem; font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--assay); }
.decision__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
@media (max-width: 700px) {
  .decision__intro { grid-template-columns: 1fr; }
  .decision__choices { grid-template-columns: 1fr; }
  .decision__choices button { min-height: 48px; }
  .decision__panel { grid-template-columns: 1fr; min-height: 0; }
}

/* ---------- Numbered footnotes ---------- */
.footnote-ref { margin-left: 0.18em; font-family: var(--data); font-size: 0.62em; font-weight: 500; line-height: 0; vertical-align: super; }
.radon-prompt h2 .footnote-ref,
h1 .footnote-ref,
h2 .footnote-ref,
h3 .footnote-ref {
  display: inline-block; position: relative; top: -0.2em;
  font-size: clamp(0.58rem, 0.2em, 0.76rem); line-height: 1; vertical-align: baseline;
}
.footnote-ref a { color: currentColor; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.footnote-ref a:hover { color: var(--assay); }
.section--dark .footnote-ref a,
.radon-prompt .footnote-ref a { color: var(--assay-hi); }

/* ---------- Process ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.4rem; padding: 1.8rem 0; border-top: 1px solid var(--rule-dark); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--data); font-size: 0.9rem; color: var(--amber); letter-spacing: 0.08em; padding-top: 0.3rem;
}
.steps h3 { margin-bottom: 0.3rem; }

/* ---------- FAQ ---------- */
.faq details {
  border-top: 1px solid var(--rule); padding: 0.3rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-size: var(--step-1); line-height: 1.25; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--data); font-size: 1.3rem; color: var(--ink-3);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.3rem; max-width: 60ch; color: var(--ink-2); }

/* ---------- Booking ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 120; background: rgba(5, 7, 8, 0.66);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 121; right: 0; top: 0; bottom: 0; width: min(560px, 100%);
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 0.32s var(--ease);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.5);
}
.sheet.is-open { transform: none; }
@media (max-width: 700px) {
  .sheet { top: auto; left: 0; right: 0; height: 92svh; width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .sheet.is-open { transform: none; }
}
.sheet__head {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem 1.7rem 1rem; border-bottom: 1px solid var(--rule);
}
.sheet__head h2 { font-size: var(--step-2); margin: 0; }
.sheet__head p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.sheet__close {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; cursor: pointer; font-size: 1.1rem;
}
.sheet__body { padding: 1.6rem 1.7rem 3rem; }

/* Inline booking form stays readable; inside the sheet it fills the panel */
#formHost { max-width: 46rem; margin-inline: auto; }
.form-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 600; }
.field .hint { font-size: 0.76rem; color: var(--ink-3); }
.req { color: #A9622B; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  font: inherit; font-size: 1rem; /* ≥16px prevents iOS zoom */
  padding: 0.75rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); width: 100%; min-height: 48px;
}
textarea { min-height: 108px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--assay); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #A9622B; background: #FFF6EF; }
.error-text { font-size: 0.8rem; color: #8C4A1C; font-weight: 500; }
.contact-preference { border: 0; margin: 0; padding: 0; }
.contact-preference legend { font-size: 0.86rem; font-weight: 600; padding: 0; margin-bottom: 0.6rem; }
.pref-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.pref {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); padding: 0.8rem 0.9rem; cursor: pointer;
  min-height: 56px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pref:hover { border-color: var(--assay); }
.pref input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--assay); }
.pref strong { display: block; font-size: 0.92rem; }
.pref small { display: block; color: var(--ink-3); font-size: 0.78rem; line-height: 1.4; margin-top: 2px; }
.pref:has(input:checked) { border-color: var(--assay); box-shadow: inset 0 0 0 1px var(--assay); }
.pref:has(input:focus-visible) { outline: 3px solid var(--assay); outline-offset: 2px; }
.pref-panel[hidden] { display: none; }
[data-contact-for][hidden] { display: none; }
.checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.88rem; }
.checkbox input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--assay); }
.error-summary {
  border: 1px solid #C2703A; background: #FFF3E9; border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.error-summary h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary a { color: #8C4A1C; }
.form-status { margin-top: 1.2rem; border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; font-size: 0.95rem; }
.form-status[data-state="success"] { background: #EAF3EC; border: 1px solid #7FB295; }
.form-status[data-state="error"] { background: #FFF3E9; border: 1px solid #C2703A; }
.form-status[data-state="pending"] { background: #EEF3F8; border: 1px solid #9CC4E4; }
.form-status:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.netlify-recaptcha { min-height: 78px; overflow-x: auto; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.privacy-line { font-size: 0.8rem; color: var(--ink-3); margin-top: 1rem; }

/* ---------- Contact / footer ---------- */
.contact-compact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem;
  align-items: center; padding-bottom: 2.2rem;
}
.contact-compact h2 { margin-bottom: 0.25em; }
.contact-compact p { margin: 0; max-width: 56ch; }
.contact-compact__actions { display: grid; gap: 0.55rem; justify-items: start; }
.contact-compact__actions a { color: var(--assay-hi); font-size: 0.82rem; }
.sources-drawer { border-top: 1px solid var(--rule-dark); }
.sources-drawer summary {
  padding: 1.1rem 0; cursor: pointer; color: #D6DCE0;
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.sources-drawer > div { padding: 0.5rem 0 0.8rem; max-width: 60rem; }
.sources-drawer .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 2rem; }
@media (max-width: 760px) {
  .contact-compact { grid-template-columns: 1fr; }
  .sources-drawer .refs { grid-template-columns: 1fr; }
}
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list dt, .contact-list b { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: block; }
.contact-list a { font-size: var(--step-1); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-list a:hover { border-bottom-color: currentColor; }

.placeholder {
  font-family: var(--data); font-size: 0.82rem;
  background: rgba(78, 130, 180, 0.12); border: 1px dashed rgba(78, 130, 180, 0.6);
  padding: 0.1em 0.45em; border-radius: 5px; color: #2E5A80; white-space: nowrap;
}
.section--dark .placeholder { color: var(--assay-hi); background: rgba(156, 196, 228, 0.12); border-color: rgba(156, 196, 228, 0.5); }

.refs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.refs li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; font-size: 0.92rem; }
.refs a { color: var(--assay-hi); }
.section--paper .refs a { color: #2E5A80; }

.site-footer { background: var(--depth-950); color: #A7ADB2; padding: 4rem 0 2.5rem; font-size: 0.92rem; }
.site-footer a { color: #D6DCE0; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.footer-grid h3 { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6E7A82; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; font-size: 0.82rem; color: #6E7A82; }
.disclaimer { font-size: 0.85rem; color: #8B9298; max-width: 68ch; margin-top: 1.6rem; }
.site-footnotes { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-dark); }
.site-footnotes h2 { margin: 0 0 1.15rem; color: #879198; font-family: var(--data); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; }
.site-footnotes ol { margin: 0; padding-left: 1.35rem; display: grid; gap: 0.65rem; max-width: 92rem; }
.site-footnotes li { padding-left: 0.35rem; color: #7F898F; font-size: 0.76rem; line-height: 1.55; }
.site-footnotes li::marker { color: #A5ADB2; font-family: var(--data); }
.site-footnotes a { color: #AEBBC3; text-decoration: underline; text-underline-offset: 0.16em; }
.site-footnotes li:target { color: #C8D0D4; }

/* ---------- Legal pages ---------- */
.legal { padding-top: calc(var(--header-h) + 4rem); }
.legal h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.legal p, .legal li { max-width: 68ch; color: var(--ink-2); }

/* Optional gentle proximity snap — enabled from config.js (scene.snap) */
html[data-snap="on"] { scroll-snap-type: y proximity; }
html[data-snap="on"] .scene-spacer { scroll-snap-align: start; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { scroll-behavior: auto; }
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html:not([data-motion="full"]) .scroll-hint::after { animation: none; }
  html:not([data-motion="full"]) .hotspot::after { display: none; }
  html:not([data-motion="full"]) .reveal { opacity: 1; transform: none; }
}
/* and the reverse: an explicit Motion:off must stop things even without the OS flag */
html[data-motion="reduced"] .hotspot::after { display: none; }
html[data-motion="reduced"] .scroll-hint::after { animation: none; }
html[data-motion="reduced"] { scroll-behavior: auto; }
/* Keep one settled gas/mineral frame for reduced motion; story.js stops all
   movement while retaining the explanatory overlays. */
html[data-motion="reduced"] .particles { display: block; }
html[data-motion="reduced"] .fx--grain, html[data-motion="reduced"] .fx--read-dim { opacity: 0 !important; }
/* Static directional haze replaces the moving vapour */
html[data-motion="reduced"] .static-haze { display: none; }
.static-haze {
  display: none;
}
html[data-motion="reduced"] .scene-card { opacity: 1 !important; transform: none !important; }
html[data-motion="reduced"] .entry-paths path { stroke-dashoffset: 0; }
html[data-motion="reduced"] .fx--stage-focus { transition: none !important; }

/* ---------- Stage 6 panel on small screens ----------
   Appended last so it wins on source order over the generic mobile card rules. */
@media (max-width: 760px) {
  /* The artwork is bottom-anchored on a phone, so the copy sits in the sky above
     it: the whole house and the gas animation stay unobstructed. */
  .scene-card--variation[data-align="right"] {
    align-self: start; justify-self: stretch;
    width: auto; margin: calc(var(--header-h) + 0.5rem) 0 0;
    max-height: 44svh; overflow-y: auto;
    font-size: 0.94em;
  }
  .scene-card--variation .note { display: none; }
}

/* Short landscape phones: a narrow right-hand column that scrolls rather than
   overflowing, leaving about two thirds of the width for the house. */
@media (max-height: 560px) and (orientation: landscape) {
  /* reclaim the vertical padding: there is very little height to work with */
  .stage__copy { padding-top: calc(var(--header-h) + 0.4rem); padding-bottom: 3.5rem; }
  .scene-card--hero {
    align-self: start;
    max-width: min(72vw, 36rem);
  }
  .scene-card--hero .eyebrow { display: none; }
  .scene-card--hero h1 { font-size: 2.5rem; margin-bottom: 0.28em; }
  .scene-card--hero p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.65rem; }
  .scene-card--hero .hero-proof { display: none; }
  .scene-card--hero .hero-actions { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
  .scene-card--hero .btn {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .scene-card--variation[data-align="right"] {
    align-self: center; justify-self: end;
    width: min(34vw, 21rem); margin: 0;
    max-height: calc(100svh - var(--header-h) - 4.2rem); overflow-y: auto;
    font-size: 0.85em;
  }
  .scene-card--variation h2 { font-size: 1.45rem; }
  .scene-card--variation .note { display: none; }
}

/* ---------- Simplified mobile opening ----------
   Phones get one calm animated-sky hero and a complete, unzoomed house view.
   The detailed story remains available immediately below through tap targets. */
@media (max-width: 760px) {
  .desktop-copy { display: none !important; }
  .mobile-copy { display: inline; }

  .journey { height: max(620px, 100svh); min-height: 0; }
  .journey .stage { position: relative; top: auto; height: 100%; min-height: 0; }
  .journey .scene-track,
  .journey .story-controls,
  .journey + .story-flow,
  .journey .gauge { display: none !important; }

  .journey .camera {
    left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important;
    width: 175vw !important; height: 58.333vw !important;
    max-height: 42svh; transform: translateX(-50%) !important;
    background: transparent !important;
  }
  .journey .camera .fx,
  .journey .particles,
  .journey .fx--stage-focus,
  .journey .entry-paths { display: none !important; }
  .journey .camera .layer,
  .journey .camera .layer img { width: 100% !important; height: 100% !important; }

  .journey .stage__copy {
    display: grid; align-items: start; padding: calc(var(--header-h) + 1.1rem) 0.8rem 42svh;
  }
  .journey .scene-card:not(.scene-card--hero) { display: none !important; }
  .journey .scene-card--hero {
    display: block !important; align-self: start; justify-self: stretch;
    max-width: none; margin: 0; padding: 1rem 1.05rem 1.1rem;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    background: linear-gradient(180deg, rgba(7, 12, 16, 0.78), rgba(7, 12, 16, 0.58));
    border: 1px solid rgba(255,255,255,0.14); border-radius: 15px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .journey .scene-card--hero .eyebrow,
  .journey .scene-card--hero > p:not(.hero-proof),
  .journey .scene-card--hero .btn--ghost { display: none; }
  .journey .scene-card--hero h1 { max-width: 12ch; font-size: clamp(2.25rem, 11vw, 3.35rem); margin-bottom: 0.35em; }
  .journey .scene-card--hero .hero-proof { display: block; margin: 0.7rem 0 0.9rem; font-size: 0.84rem; }
  .journey .scene-card--hero .hero-actions { display: block; }
  .journey .scene-card--hero .btn--primary { width: 100%; min-height: 48px; }

  .section__head--split { max-width: none; }
}