/* Orsely public website. Built from the Fable 5 master contract, revised per the repair round. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --pine: #13524A;
  --pine-deep: #0C3A34;
  --mint: #E6F0EC;
  --mint-soft: #F1F7F4;
  --mint-bright: #7FE3BE;
  --mint-bright-2: #52C99A;
  --surface: #FFFFFF;
  --ink: #16201E;
  --ink-soft: #5E6E69;
  --line: #E2EAE7;
  --good: #2FA77B;
  --warm-amber: #E08A2B;
  --coral: #E2674F;
  --dark-bg: #0E1513;
  --dark-surface: #18211E;
  --dark-line: #2A3833;
  --dark-ink: #EAF4F0;
  --dark-muted: #9FBCB3;
  --font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease-premium: cubic-bezier(0.22, 0.9, 0.3, 1);
  --wrap: min(1120px, 92vw);
}

/* Semantic theme tokens. Light is the default; html[data-theme] is set before first paint. */
:root, html[data-theme="light"] {
  --bg: var(--mint-soft);
  --surface-1: var(--surface);
  --band-alt: var(--mint);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --line-c: var(--line);
  --header-bg: rgba(241, 247, 244, 0.88);
  --header-line: rgba(226, 234, 231, 0.7);
  --link: var(--pine);
  --link-hover: var(--pine-deep);
  --cta-bg: var(--pine);
  --cta-bg-hover: var(--pine-deep);
  --cta-text: #FFFFFF;
  --card-shadow: 0 24px 60px rgba(19, 82, 74, 0.08);
  --intro-glow: rgba(246, 240, 224, 0.9);
  /* phone story surfaces */
  --ph-bg1: #F4FAF7;
  --ph-bg2: #E6F0EC;
  --ph-text: #16201E;
  --ph-head: #0C3A34;
  --ph-muted: #4E5E59;
  --ph-em: #1E7A5F;
  --ph-card: #FFFFFF;
  --ph-card-line: #DCE8E3;
  --ph-row: rgba(19, 82, 74, 0.07);
  --ph-option-bg: #FFFFFF;
  --ph-option-line: #CBDDD6;
  --ph-ring-bg: rgba(19, 82, 74, 0.15);
  --ph-scroll: rgba(19, 82, 74, 0.38);
  --ph-fill: var(--mint-bright-2);
}
html[data-theme="dark"] {
  --bg: var(--dark-bg);
  --surface-1: #131B18;
  --band-alt: #16211D;
  --text: var(--dark-ink);
  --text-soft: var(--dark-muted);
  --line-c: var(--dark-line);
  --header-bg: rgba(14, 21, 19, 0.86);
  --header-line: rgba(42, 56, 51, 0.8);
  --link: var(--mint-bright);
  --link-hover: #FFFFFF;
  --cta-bg: var(--mint-bright);
  --cta-bg-hover: var(--mint-bright-2);
  --cta-text: #06302A;
  --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --intro-glow: rgba(19, 82, 74, 0.4);
  --ph-bg1: #13524A;
  --ph-bg2: #0C3A34;
  --ph-text: #EAF4F0;
  --ph-head: #FFFFFF;
  --ph-muted: #9FBCB3;
  --ph-em: var(--mint-bright);
  --ph-card: #18211E;
  --ph-card-line: #2A3833;
  --ph-row: rgba(14, 21, 19, 0.55);
  --ph-option-bg: rgba(24, 33, 30, 0.9);
  --ph-option-line: #2A3833;
  --ph-ring-bg: rgba(230, 240, 236, 0.18);
  --ph-scroll: rgba(234, 244, 240, 0.4);
  --ph-fill: var(--mint-bright);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
noscript { display: none; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--mint-bright-2); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--pine); color: #fff; padding: 10px 18px; border-radius: 999px;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: #fff; }

.sr-only, .sr-live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: flex; align-items: center; gap: 20px;
  padding: 10px clamp(14px, 3vw, 34px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  transition: transform 0.4s var(--ease-premium), opacity 0.4s;
}
body.header-hidden .site-header { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand strong { font-family: var(--font-head); font-size: 20px; letter-spacing: 0.01em; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--text-soft); font-size: 15px; padding: 8px 2px; }
.site-nav a:hover { color: var(--link); }
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: var(--cta-text); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 24px; border-radius: 999px;
  border: 1.5px solid var(--cta-bg); text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 1.2;
  transition: transform 0.25s var(--ease-premium), background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.btn-primary { background: var(--cta-bg); color: var(--cta-text); }
.btn-primary:hover {
  background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-text);
  transform: translateY(-1px); box-shadow: 0 8px 22px rgba(12, 58, 52, 0.28);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid var(--warm-amber); outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--link); border-color: var(--link); }
.btn-ghost:hover { background: var(--band-alt); color: var(--link-hover); }
.site-nav .btn { min-height: 42px; padding: 8px 20px; }
.theme-control select, .compact-select {
  background: var(--surface-1); color: var(--text); border: 1px solid var(--line-c);
  border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14px; min-height: 40px; cursor: pointer;
}


/* Mobile navigation (hamburger + dropdown panel) */
.nav-toggle {
  display: none; margin-left: 6px;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-c); background: var(--surface-1); color: var(--text);
  align-items: center; justify-content: center;
}
.nav-toggle[aria-expanded="true"] { background: var(--band-alt); color: var(--link); }
.mobile-nav {
  position: absolute; top: calc(100% + 8px); right: 10px; z-index: 130;
  display: flex; flex-direction: column; min-width: 230px;
  background: var(--surface-1); border: 1px solid var(--line-c); border-radius: 18px;
  box-shadow: var(--card-shadow); padding: 10px; gap: 2px;
}
.mobile-nav a {
  text-decoration: none; color: var(--text); font-size: 16px; font-weight: 500;
  padding: 11px 14px; min-height: 44px; border-radius: 12px; display: flex; align-items: center;
}
.mobile-nav a:hover { background: var(--band-alt); color: var(--link); }
.mobile-nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px 6px; margin-top: 4px; border-top: 1px solid var(--line-c);
  color: var(--text-soft); font-size: 14px;
}

/* ---------- Intro ---------- */
.intro {
  min-height: 88vh;
  display: grid; place-content: center; text-align: center;
  padding: 120px 20px 60px;
  position: relative; z-index: 1;
  background: transparent;
}
.eyebrow {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.22em;
  color: var(--good); font-weight: 600; margin-bottom: 18px;
}
html[data-theme="dark"] .eyebrow { color: var(--mint-bright); }
.intro h1 { font-size: clamp(42px, 6.2vw, 84px); font-weight: 600; color: var(--text); max-width: 12ch; margin-inline: auto; }
.intro .lede { font-size: clamp(17px, 1.6vw, 21px); color: var(--text-soft); max-width: 46ch; margin: 18px auto 34px; }
.intro-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.intro-hint { margin-top: 46px; color: var(--text-soft); font-size: 14px; }

/* Hero entrance choreography (full motion only): ribbons -> headline -> copy -> cue */
.hl-a, .hl-b { display: block; }
body:not(.motion-reduced) .hl-a { animation: hero-rise 0.7s var(--ease-premium) 0.7s both; }
body:not(.motion-reduced) .hl-b { animation: hero-rise 0.7s var(--ease-premium) 1.1s both; }
body:not(.motion-reduced) .intro .lede,
body:not(.motion-reduced) .intro-actions { animation: hero-rise 0.6s var(--ease-premium) 1.45s both; }
body:not(.motion-reduced) .hero-cue { animation: hero-rise 0.6s var(--ease-premium) 1.75s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Refined scroll cue: text, slim mint line, gently drifting dot */
.hero-cue {
  margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-soft); font-size: 13.5px; letter-spacing: 0.06em;
}
.hc-line {
  position: relative; width: 2px; height: 44px; border-radius: 999px;
  background: color-mix(in srgb, var(--mint-bright-2) 45%, transparent); overflow: hidden;
}
.hc-dot {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint-bright-2);
  animation: hc-drift 2.4s var(--ease-premium) infinite;
}
html[data-theme="dark"] .hc-dot { background: var(--mint-bright); }
@keyframes hc-drift { 0%, 12% { top: -8px; opacity: 0; } 35% { opacity: 1; } 72% { top: 38px; opacity: 1; } 100% { top: 44px; opacity: 0; } }

/* ---------- Ambient background layer (heroRich / cinematicHidden / contentAmbient / footerHidden) ---------- */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  contain: strict; overflow: hidden;
}
.ambient[data-state="hero"] { opacity: 1; transform: none; transition: opacity 0.6s linear, transform 0.6s var(--ease-premium); }
.ambient[data-state="guide"] { opacity: 1; transform: none; transition: opacity 0.6s linear, transform 0.6s var(--ease-premium); }
.ambient[data-state="cinematic"] { opacity: 0; transform: translateY(16px); transition: opacity 1.1s ease, transform 1.1s var(--ease-premium); }
.ambient[data-state="content"] { opacity: 0.42; transform: none; transition: opacity 1.2s ease; }
.ambient[data-state="footer"] { opacity: 0; transform: none; transition: opacity 0.45s linear; }
.amb-parallax { position: absolute; inset: 0; }
.amb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.amb-mobile { display: none; }

/* Aurora curtains — matched to the approved reference frame: soft wispy streams
   entering from the outer left and right, a curl near the top-left crest, an
   S-curtain on the right, and a dark clear centre. Six composited layers total
   across both sides; static gradients inside each layer; transforms only. */
.amb-wash {
  position: absolute; inset: -8%;
  background:
    radial-gradient(34% 52% at 2% 40%, var(--wash-a), transparent 70%),
    radial-gradient(30% 46% at 98% 30%, var(--wash-b), transparent 72%);
}
.rib-body { filter: url(#bodyBlur); }
.rib-soft { filter: url(#softBlur); }
.rib-wash { filter: url(#washBlur); }
.amb-mobile .rib-body { filter: url(#bodyBlurM); }
.amb-mobile .rib-wash { filter: url(#washBlurM); }
.rib { will-change: transform; transform-box: view-box; transform-origin: center; }
/* Slow independent atmospheric waves. Each stream bends and drifts on its own
   12–20 s reversible cycle (alternate direction = no visible reset); negative
   delays desynchronise the strands. No pointer input, no JS animation loop. */
body:not(.motion-reduced) .rib {
  animation: var(--sway) var(--dur, 16s) ease-in-out var(--del, 0s) infinite alternate;
}
body:not(.motion-reduced) .rib-wash {
  animation: aur-shimmer var(--rim, 9s) ease-in-out infinite alternate;
}
body:not(.motion-reduced) .amb-svg { animation: amb-fade-in 1.2s linear both; }
/* The whole decorative system pauses while the tab is hidden. */
body.amb-paused .ambient * { animation-play-state: paused !important; }
.rib-l1 { --sway: aur-l1; --dur: 16s; --rim: 9.5s; }
.rib-l2 { --sway: aur-l2; --dur: 13s; --del: -7s; }
.rib-l3 { --sway: aur-l3; --dur: 19s; --del: -11s; }
.rib-r1 { --sway: aur-r1; --dur: 14.5s; --del: -4s; --rim: 8s; }
.rib-r2 { --sway: aur-r2; --dur: 20s; --del: -13s; }
.rib-r3 { --sway: aur-r3; --dur: 12s; --del: -2s; }
@keyframes aur-l1 {
  0% { transform: translate3d(-16px, 6px, 0) skewX(-0.6deg) scaleY(1); }
  50% { transform: translate3d(6px, -8px, 0) skewX(0.5deg) scaleY(1.035); }
  100% { transform: translate3d(20px, 3px, 0) skewX(-0.2deg) scaleY(0.99); }
}
@keyframes aur-l2 {
  0% { transform: translate3d(15px, -5px, 0) skewX(0.5deg) scaleY(1.02); }
  55% { transform: translate3d(-4px, 6px, 0) skewX(-0.4deg) scaleY(0.995); }
  100% { transform: translate3d(-18px, -8px, 0) skewX(0.3deg) scaleY(1.03); }
}
@keyframes aur-l3 {
  0% { transform: translate3d(-10px, 10px, 0) scaleY(1); }
  100% { transform: translate3d(13px, -9px, 0) scaleY(1.04); }
}
@keyframes aur-r1 {
  0% { transform: translate3d(18px, 0, 0) skewX(0.7deg) scaleY(1); }
  45% { transform: translate3d(-3px, -7px, 0) skewX(-0.3deg) scaleY(1.04); }
  100% { transform: translate3d(-22px, 5px, 0) skewX(-0.6deg) scaleY(0.985); }
}
@keyframes aur-r2 {
  0% { transform: translate3d(9px, 11px, 0) scaleY(1.03); }
  100% { transform: translate3d(-13px, -10px, 0) scaleY(0.99); }
}
@keyframes aur-r3 {
  0% { transform: translate3d(-12px, -4px, 0) skewX(-0.4deg); }
  100% { transform: translate3d(16px, 6px, 0) skewX(0.5deg); }
}
@keyframes aur-shimmer {
  0% { transform: translate3d(-11px, 0, 0) skewX(0.4deg); }
  100% { transform: translate3d(13px, 3px, 0) skewX(-0.5deg); }
}
@keyframes amb-fade-in { from { opacity: 0; } }

/* Circular glowing motes: fixed pool of at most 20, JS-cycled (fade in, glow, fade out, relocate) */
.amb-motes { position: absolute; inset: 0; }
.amb-mote {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--mote-core) 0%, var(--mote-core) 22%, var(--mote-halo) 44%, transparent 72%);
}

/* Aurora palette (dark-only site) */
:root {
  --mote-core: #A9EFD2;
  --mote-halo: rgba(127, 227, 190, 0.38);
  --wash-a: rgba(127, 227, 190, 0.07);
  --wash-b: rgba(53, 181, 147, 0.08);
}
.st-teal { stop-color: #2AA88F; stop-opacity: 0.32; }
.st-teal-soft { stop-color: #2AA88F; stop-opacity: 0.18; }
.st-emerald { stop-color: #34C79A; stop-opacity: 0.26; }
.st-mint { stop-color: #8FE7C6; stop-opacity: 0.40; }
.st-sage { stop-color: #A6D8A4; stop-opacity: 0.38; }
.st-fade { stop-color: #2AA88F; stop-opacity: 0; }
.st-wash1 { stop-color: #7FE3BE; stop-opacity: 0.46; }
.st-wash2 { stop-color: #35B593; stop-opacity: 0; }
/* contentAmbient: the aurora and motes continue behind ordinary sections at
   reduced intensity; sections themselves never paint a background. */
.ambient[data-state="content"] .amb-wash { opacity: 0.42; }
.ambient[data-state="content"] .amb-svg { opacity: 0.38; }
.ambient[data-state="content"] .amb-motes { opacity: 0.35; }
.ambient[data-state="guide"] .amb-wash { opacity: 1; }
.ambient[data-state="guide"] .amb-svg { opacity: 1; }
.ambient[data-state="guide"] .amb-motes { opacity: 1; }

/* Approved ambient renderer. A single hardware-decodable video replaces the
   former duplicate full-screen raster animation. The poster is always a safe
   first paint and is the permanent experience for reduced-motion/save-data. */
.ambient { background: #0e191a; }
.amb-parallax { overflow: hidden; background: #0e191a; }
.aurora-fallback,
.aurora-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.aurora-fallback {
  background: #0e191a url("../assets/ambient/aurora_poster.webp") center / cover no-repeat;
  transition: filter 0.6s linear;
}
.aurora-video {
  object-fit: cover;
  border: 0;
  opacity: 1;
  transition: opacity 0.25s linear, filter 0.6s linear;
}
.ambient.is-static .aurora-video { opacity: 0; }
.aurora-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 68% at 50% 50%,
    transparent 0%, transparent 72%, rgba(6, 18, 24, 0.08) 100%);
}
.ambient[data-state="content"] .aurora-fallback,
.ambient[data-state="content"] .aurora-video {
  filter: brightness(0.56) saturate(0.82) contrast(1.06);
}
.ambient[data-state="guide"] .aurora-fallback,
.ambient[data-state="guide"] .aurora-video {
  filter: none;
}
.ambient[data-state="content"] .aurora-vignette {
  background:
    linear-gradient(180deg, rgba(6, 15, 17, 0.28), rgba(6, 15, 17, 0.52)),
    radial-gradient(ellipse 82% 78% at 50% 42%,
      rgba(6, 15, 17, 0.62) 0%,
      rgba(6, 15, 17, 0.48) 48%,
      rgba(6, 15, 17, 0.34) 100%);
}
.ambient[data-state="guide"] .aurora-vignette {
  background: radial-gradient(ellipse 50% 68% at 50% 50%,
    transparent 0%, transparent 72%, rgba(6, 18, 24, 0.08) 100%);
}
body.motion-reduced .aurora-video { display: none; }
@media (max-width: 640px) {
  .aurora-fallback { background-size: 100% 100%; }
  .aurora-video { object-fit: fill; }
  .aurora-vignette {
    background: radial-gradient(ellipse 76% 64% at 50% 49%,
      transparent 0%, transparent 74%, rgba(6, 18, 24, 0.10) 100%);
  }
}

/* ---------- Living room scene ---------- */
.room-track { position: relative; z-index: 1; }
.choose-intro {
  width: var(--wrap); margin-inline: auto; text-align: center;
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px);
  scroll-margin-top: 76px;
}
.choose-intro h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; max-width: 18ch; margin-inline: auto; }
.choose-intro .sub { color: var(--text-soft); font-size: clamp(16px, 1.5vw, 19px); max-width: 52ch; margin: 10px auto 0; }
.choose-intro .eyebrow { margin-bottom: 12px; }
/* While the story runs, the page is locked; the story controller owns navigation. */
body.story-locked { overflow: hidden; }
html.story-locked { overflow: hidden; }
body.story-locked .room-stage { touch-action: pinch-zoom; }
.room-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--pine-deep);
}
/* Story-completion exit: the stage becomes a fixed cinematic layer that crossfades
   away over the ordinary page. Removed again at the exit commit. */
.room-stage.exit-fixed { position: fixed; inset: 0; z-index: 124; }
.camera { position: absolute; inset: 0; will-change: transform; }
.room-space {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.683vh); height: max(56.28vw, 100vh);
  transform: translate(-50%, -50%);
}
.room-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
}
.guide { position: absolute; }
/* Filter-free glow: a soft mint-white halo on a pseudo-element BEHIND the artwork.
   No CSS filter ever touches the transformed PNG or a transformed ancestor. */
.guide::before {
  content: ""; position: absolute; inset: -8% -14%; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 44% at 50% 52%, rgba(214, 255, 238, 0.55) 0%, rgba(127, 227, 190, 0.3) 42%, rgba(127, 227, 190, 0) 72%);
  opacity: 0; transition: opacity 0.3s var(--ease-premium);
}
.guide.hit-hover::before, .guide:focus-within::before, .guide.armed::before, .guide.selected::before { opacity: 1; }
body.story-active .guide.selected::before { opacity: 0; transition: opacity 1.1s linear; }
.guide-btn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; display: block; position: relative; z-index: 1;
  transform-origin: 50% 93%;
  pointer-events: none; /* pointer input is handled by silhouette hit testing on the scene */
  transition: transform 0.26s var(--ease-premium), opacity 0.26s var(--ease-premium);
}
.guide-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; image-rendering: auto; }
/* hover / keyboard focus / armed: gentle 1.08 growth; the glow lives on .guide::before */
.guide.hit-hover .guide-btn, .guide .guide-btn:focus-visible, .guide.armed .guide-btn {
  transform: scale(1.08);
}
.guide.hit-hover, .guide:focus-within, .guide.armed { z-index: 6; }
.guide .guide-btn:focus-visible { outline: none; }
.room-space.someone-focused .guide:not(.hit-hover):not(:focus-within) .guide-btn { opacity: 0.88; }
/* selection: movement is script-driven; no filter is applied to the moving artwork */
.guide.selected { z-index: 8; }
.guide.selected .guide-btn { transform: none; }

.stage-veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(8, 24, 21, 0.5) 100%), rgba(8, 24, 21, 0.22);
}

.room-ui {
  position: absolute; inset: auto 0 0 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; text-align: center;
}
.room-ui > * { pointer-events: auto; }
.room-explore { margin: 0; text-align: center; }
.room-explore a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px;
  color: #EAF4F0; font-size: clamp(14px, 1.4vw, 16px);
  background: rgba(12, 58, 52, 0.62); backdrop-filter: blur(6px); border-radius: 999px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.room-explore a:hover { color: #fff; background: rgba(12, 58, 52, 0.85); }

/* Mobile carousel bar (hidden on desktop) */
.car-bar {
  display: none; position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 22;
  align-items: center; gap: 4px; padding: 4px 6px;
  background: rgba(12, 58, 52, 0.68); backdrop-filter: blur(8px);
  border: 1px solid rgba(127, 227, 190, 0.22); border-radius: 999px;
}
.car-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: transparent; color: #EAF4F0;
}
.car-arrow:hover { color: var(--mint-bright); }
.car-arrow[disabled] { opacity: 0.28; pointer-events: none; }
.car-mid { display: flex; flex-direction: column; align-items: center; gap: 0; }
.car-dots { display: flex; align-items: center; }
.car-dot {
  width: 26px; height: 30px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; border-radius: 999px;
}
.car-dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(234, 244, 240, 0.45); transition: background 0.2s, transform 0.2s, width 0.2s, border-radius 0.2s;
}
.car-dot[aria-current="true"]::after { background: var(--mint-bright); width: 18px; border-radius: 999px; }
.car-index { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: rgba(234, 244, 240, 0.8); line-height: 1; padding-bottom: 3px; font-variant-numeric: tabular-nums; }

/* Armed two-tap confirmation announcement */
.arm-note {
  position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 22;
  margin: 0; max-width: 88vw; text-align: center;
  background: rgba(241, 247, 244, 0.95); color: var(--pine-deep);
  font-weight: 600; font-size: 15px; line-height: 1.35;
  padding: 10px 20px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(8, 24, 21, 0.35);
}
/* selection prep: gentle pulse while the hi-res master decodes */
.guide.preparing .guide-btn { animation: guide-pulse 0.9s ease-in-out infinite; }
@keyframes guide-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.84; } }
body.is-selected .car-bar, body.story-active .car-bar,
body.is-selected .arm-note, body.story-active .arm-note { display: none !important; }
.pill-btn {
  background: rgba(241, 247, 244, 0.94); color: var(--pine); border: 1.5px solid var(--mint);
  min-height: 44px; padding: 9px 20px; border-radius: 999px; font-weight: 600;
  transition: background 0.25s, transform 0.25s var(--ease-premium);
}
.pill-btn:hover { background: #fff; transform: translateY(-1px); }
.skip-story {
  position: fixed; top: 14px; right: 14px; z-index: 130;
  background: rgba(14, 21, 19, 0.6); color: var(--dark-ink);
  border: 1px solid var(--dark-line); border-radius: 999px;
  min-height: 44px; padding: 8px 18px; font-weight: 500; font-size: 14px;
  backdrop-filter: blur(8px);
}
.skip-story:hover { background: rgba(14, 21, 19, 0.9); }
/* Explicit story navigation: restrained Back (from step 2 on) and a continue cue */
.story-back {
  position: fixed; bottom: 14px; left: 14px; z-index: 130;
  background: rgba(14, 21, 19, 0.6); color: var(--dark-ink);
  border: 1px solid var(--dark-line); border-radius: 999px;
  min-height: 44px; padding: 8px 18px; font-weight: 500; font-size: 14px;
  backdrop-filter: blur(8px);
}
.story-back:hover { background: rgba(14, 21, 19, 0.9); }
.story-cue {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 130;
  background: rgba(12, 58, 52, 0.85); color: var(--mint-bright);
  border: 1px solid rgba(127, 227, 190, 0.35); border-radius: 999px;
  min-height: 44px; padding: 9px 22px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  animation: cue-bob 2.2s var(--ease-premium) infinite;
}
.story-cue:hover { background: rgba(12, 58, 52, 0.97); color: #fff; }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.story-cue .cue-touch { display: none; }
@media (pointer: coarse) {
  .story-cue .cue-pointer { display: none; }
  .story-cue .cue-touch { display: inline; }
}
/* persistent small logo chip during the cinematic */
.story-logo {
  position: fixed; top: 14px; left: 14px; z-index: 130;
  display: flex; align-items: center; gap: 9px;
  padding: 6px 16px 6px 7px; border-radius: 999px;
  background: rgba(14, 21, 19, 0.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 16px;
}
.story-logo img { width: 30px; height: 30px; border-radius: 8px; }
.room-noscript {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: rgba(12, 58, 52, 0.9); color: #fff; padding: 10px 18px; border-radius: 12px;
  font-size: 14px; max-width: 90vw; text-align: center;
}

/* ---------- Phone unit (inside the selected guide) ---------- */
.phone-unit { position: absolute; pointer-events: none; z-index: 3; }
.phone-frame { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.phone-screen {
  position: absolute; overflow: hidden; opacity: 0; pointer-events: auto;
  background: linear-gradient(180deg, var(--ph-bg1) 0%, var(--ph-bg2) 100%);
}
.screen-scaler { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; }
body.debug-calibrate .phone-frame { outline: 2px solid red; opacity: 0.4; }
body.debug-calibrate .phone-screen { outline: 2px solid yellow; opacity: 0.4; }

/* ---------- Phone story UI ---------- */
.phone-app {
  position: absolute; inset: 0; font-family: var(--font-body);
  color: var(--ph-text); background: linear-gradient(180deg, var(--ph-bg1) 0%, var(--ph-bg2) 100%);
  display: flex; flex-direction: column;
}

/* Fixed in-app chrome: simulated status row, Orsely app row, story progress. */
.phone-chrome {
  flex: 0 0 auto; position: relative; z-index: 6;
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 18px 9px;
  background: var(--ph-bg1);
  border-bottom: 1px solid var(--ph-card-line);
}
.status-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--ph-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.st-icons { display: flex; align-items: center; gap: 6px; color: var(--ph-text); }
.st-icons svg { display: block; fill: currentColor; }
.st-icons .st-wifi { fill: none; }
.st-batt { display: inline-flex; align-items: center; gap: 4px; }
.st-batt-pct { font-size: 11.5px; font-weight: 600; }
.app-row { display: flex; align-items: center; justify-content: space-between; min-height: 28px; position: relative; }
.app-brand { display: inline-flex; align-items: center; gap: 7px; }
.app-brand img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.app-name { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--ph-head); letter-spacing: 0.01em; }
.phone-menu-btn {
  width: 44px; height: 44px; margin: -8px -10px -8px 0;
  display: grid; place-items: center; border: 0; border-radius: 12px;
  background: transparent; color: var(--ph-text);
}
.phone-menu-btn:hover { background: var(--ph-row); }
.phone-menu-btn[aria-expanded="true"] { background: var(--ph-row); color: var(--ph-em); }
.phone-menu {
  position: absolute; top: calc(100% + 6px); right: -6px; z-index: 40;
  display: flex; flex-direction: column; min-width: 190px; padding: 7px;
  background: var(--ph-card); border: 1px solid var(--ph-card-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(5, 18, 15, 0.3);
}
.pm-item {
  text-align: left; border: 0; background: transparent; color: var(--ph-text);
  font-size: 14.5px; font-weight: 500; padding: 11px 12px; min-height: 44px; border-radius: 9px;
}
.pm-item:hover { background: var(--ph-row); color: var(--ph-em); }
.pm-item[disabled] { opacity: 0.4; pointer-events: none; }
.progress-row { display: flex; align-items: center; gap: 9px; }
.sp-track {
  flex: 1 1 auto; height: 4px; border-radius: 999px;
  background: var(--ph-ring-bg); overflow: hidden;
}
.sp-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--ph-fill);
  transition: width 0.45s var(--ease-premium);
}
.sp-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--ph-muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em; line-height: 1;
}

.panel-viewport { position: relative; flex: 1 1 auto; min-height: 0; }

.phone-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 15px 20px 26px; opacity: 0; pointer-events: none;
  transition: opacity 0.45s linear;
  overflow-y: auto; /* safety net only: every scene is composed to fit without it */
  scrollbar-width: thin; scrollbar-color: var(--ph-scroll) transparent;
}
.phone-panel:focus { outline: none; }
.phone-panel::-webkit-scrollbar { width: 5px; }
.phone-panel::-webkit-scrollbar-track { background: transparent; }
.phone-panel::-webkit-scrollbar-thumb { background: var(--ph-scroll); border-radius: 999px; }
.phone-panel.active { opacity: 1; pointer-events: auto; z-index: 2; }
.phone-entry { text-align: center; justify-content: center; align-items: center; gap: 18px; }
.phone-entry img { width: 88px; height: 88px; border-radius: 22px; animation: logo-breathe 3.4s ease-in-out infinite; }
@keyframes logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.phone-entry p { margin: 0; font-size: 17px; color: var(--ph-text); }
.ring { width: 44px; height: 44px; animation: ring-spin 1.4s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.ring circle { fill: none; stroke-width: 4; }
.ring .ring-bg { stroke: var(--ph-ring-bg); }
.ring .ring-fg { stroke: var(--mint-bright-2); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 34; }

/* Scene grid: art zone + copy zone, tunable per panel via --art-h and --copy-gap */
.scene-art {
  position: relative; flex: 0 0 auto; width: 100%; align-self: stretch;
  height: var(--art-h, 50%); margin-bottom: var(--copy-gap, 18px);
}
.scene-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(5, 18, 15, 0.28));
}
.bulb {
  position: absolute; z-index: 2; transform: translate(-50%, -60%);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFE3B8 0 32%, var(--warm-amber) 58%, transparent 70%);
  box-shadow: 0 0 22px 8px rgba(224, 138, 43, 0.28), 0 0 46px 18px rgba(127, 227, 190, 0.14);
  opacity: 0; transition: opacity 0.8s linear; pointer-events: none;
}
.bulb::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 13px; height: 7px; border-radius: 3px; background: #C9B695;
}
.phone-panel.active .bulb { opacity: 1; }
.scene-copy {
  flex: 1 0 auto; display: flex; flex-direction: column;
  justify-content: flex-start; gap: 6px; padding-top: var(--copy-top, 0px);
  max-width: var(--copy-max, 100%);
}
.scene-copy.scrollable { overflow: visible; }
.scene-copy h3 {
  font-size: clamp(23px, 6.6vw, 27px); line-height: 1.16; color: var(--ph-head);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.scene-copy p { font-size: 15.5px; line-height: 1.55; color: var(--ph-muted); margin-bottom: 10px; max-width: 34ch; }
.scene-copy p strong, .scene-copy .em { color: var(--ph-em); font-weight: 650; }
.scene-copy .em-amber { color: var(--warm-amber); font-weight: 650; }
.center-copy { justify-content: center; text-align: left; }
.beat { opacity: 0; transform: translateY(10px); transition: opacity 0.5s linear, transform 0.5s var(--ease-premium); }
.beat.shown { opacity: 1; transform: none; }

.q-block { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.q-label {
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ph-em); font-family: var(--font-head); font-weight: 600; margin: 0 0 2px;
}
.q-option {
  text-align: left; border: 1px solid var(--ph-option-line); border-radius: 14px;
  background: var(--ph-option-bg); color: var(--ph-text);
  padding: 11px 14px; min-height: 44px; font-size: 14.5px; line-height: 1.35;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-premium);
}
.q-option:hover { border-color: var(--mint-bright-2); transform: translateY(-1px); }
.q-option[aria-pressed="true"] { border-color: var(--mint-bright-2); background: rgba(82, 201, 154, 0.14); }
.q-response { border-left: 3px solid var(--mint-bright-2); padding-left: 12px; color: var(--ph-text); }
.q-continue {
  align-self: flex-start; margin-top: 6px;
  background: var(--cta-bg); color: var(--cta-text); border: 1.5px solid var(--cta-bg);
  border-radius: 999px; min-height: 44px; padding: 9px 26px; font-weight: 600; font-size: 14.5px;
  transition: background 0.2s, transform 0.2s var(--ease-premium);
}
.q-continue:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); transform: translateY(-1px); }

/* compact app rows inside the phone so every scene fits the safe area */
.phone-panel .demo-row { padding: 8px 10px; font-size: 13px; }
.phone-panel .demo-card { padding: 12px; gap: 8px; }

/* small app demos inside the phone */
.demo-card {
  background: var(--ph-card); border: 1px solid var(--ph-card-line); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.demo-title { font-family: var(--font-head); font-size: 15px; color: var(--ph-head); margin: 0; }
.demo-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--ph-row); border-radius: 12px; padding: 10px 12px; font-size: 13.5px;
}
.demo-row .t { color: var(--ph-muted); font-variant-numeric: tabular-nums; min-width: 46px; }
.demo-row .n { color: var(--ph-text); flex: 1; }
.chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.chip-good { background: rgba(47, 167, 123, 0.18); color: var(--good); }
html[data-theme="dark"] .chip-good { color: var(--mint-bright); }
.chip-due { background: rgba(224, 138, 43, 0.18); color: #B96F1E; }
html[data-theme="dark"] .chip-due { color: #F4B770; }
.chip-quiet { background: rgba(94, 110, 105, 0.14); color: var(--ph-muted); }
.demo-actions { display: flex; gap: 8px; }
.demo-actions button {
  flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--ph-option-line);
  background: var(--ph-option-bg); color: var(--ph-text); font-size: 13.5px; font-weight: 600;
}
.demo-actions button:hover { border-color: var(--mint-bright-2); }
.demo-actions .primary { background: var(--mint-bright-2); border-color: var(--mint-bright-2); color: #06302A; }
.snooze-note { display: none; }
.snooze-note.shown { display: block; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline .demo-row { border-left: 2px solid var(--ph-card-line); border-radius: 0 12px 12px 0; margin-left: 8px; background: transparent; }
.lock-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lock-demo .lock-text { font-size: 13px; color: var(--ph-muted); }
.toggle {
  width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--ph-card-line);
  background: var(--mint-bright-2); position: relative; flex: 0 0 auto;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 25px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: left 0.2s var(--ease-premium);
}
.toggle[aria-pressed="false"] { background: var(--ph-card-line); }
.toggle[aria-pressed="false"]::after { left: 3px; }
.steps3 { display: flex; flex-direction: column; gap: 8px; }
.steps3 .step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ph-text); }
.steps3 .dot {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(47, 167, 123, 0.16); color: var(--ph-em);
  display: grid; place-items: center; font-family: var(--font-head); font-size: 13px; font-weight: 600;
}
.join-final .scene-copy { text-align: center; align-items: center; }
.join-final .scene-copy p { margin-inline: auto; }
.join-final .btn { margin-top: 8px; }

/* ---------- Normal website ---------- */
.section {
  padding: clamp(64px, 9vw, 120px) 0; scroll-margin-top: 72px; position: relative; z-index: 1;
  content-visibility: auto; contain-intrinsic-size: auto 760px;
}
.wrap { width: var(--wrap); margin-inline: auto; }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; }
.section-head .sub { color: var(--text-soft); font-size: clamp(16px, 1.4vw, 19px); }

/* One continuous dark page: full-width sections carry no background of their own.
   Boundaries come from spacing and typography, never from color bands. */
.band-white, .band-mint { background: transparent; }
.band-pine { background: transparent; color: var(--dark-ink); }
.band-pine h2, .band-pine h3 { color: #fff; }
.band-pine .sub, .band-pine p { color: var(--dark-muted); }
.band-pine .eyebrow { color: var(--mint-bright); }
.band-pine a { color: var(--mint-bright); }
.band-pine a:hover { color: #fff; }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.rev { grid-template-columns: 0.95fr 1.05fr; }
.split h3 { font-size: clamp(24px, 2.6vw, 34px); }
.split p { color: var(--text-soft); font-size: 17px; }
.band-pine .split p { color: var(--dark-muted); }
.split ul { color: var(--text-soft); font-size: 16.5px; padding-left: 20px; display: grid; gap: 8px; margin: 0 0 1em; }
.band-pine .split ul { color: var(--dark-muted); }
.feature-visual {
  border-radius: 24px; border: 1px solid rgba(120, 220, 185, 0.15); background: rgba(15, 30, 25, 0.72);
  padding: 22px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}
.feature-visual .demo-card { border-radius: 14px; background: rgba(10, 21, 17, 0.55); border-color: rgba(120, 220, 185, 0.12); }
.feature-visual .demo-title { color: var(--text); }
.feature-visual .demo-row { background: rgba(13, 27, 22, 0.7); }
.feature-visual .demo-row .n { color: var(--text); }
.feature-visual .demo-row .t { color: var(--text-soft); }
.feature-visual .steps3 .step { color: var(--text); }
.feature-visual .steps3 .dot { background: rgba(47, 167, 123, 0.14); color: var(--good); }
.feature-visual .demo-actions button { background: rgba(13, 27, 22, 0.7); color: var(--text); border-color: rgba(120, 220, 185, 0.15); }
.feature-visual .lock-demo .lock-text { color: var(--text-soft); }
.stack-gap { display: grid; gap: clamp(48px, 7vw, 96px); }

.origin p { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-soft); max-width: 62ch; }
.origin .big-quote { font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); color: var(--text); line-height: 1.3; max-width: 24ch; margin-bottom: 24px; }

.faq {
  max-width: 800px;
  background: rgba(15, 30, 25, 0.72); border: 1px solid rgba(120, 220, 185, 0.15); border-radius: 24px;
  padding: clamp(10px, 2.4vw, 26px) clamp(18px, 3vw, 32px);
}
.faq details { position: relative; padding: 6px 0; }
.faq details:not(:last-child)::after {
  content: ""; position: absolute; left: 32px; right: 0; bottom: 0;
  border-bottom: 1px solid rgba(120, 220, 185, 0.14);
}
.faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 18px;
  display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 14px 4px; list-style: none; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; width: 0; height: 0; margin-top: 0.52em;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor;
  transform-origin: 45% 50%; transition: transform 0.18s var(--ease-premium);
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary:hover { color: var(--link); }
.faq details p { color: var(--text-soft); padding: 0 4px 14px 32px; max-width: 68ch; }

.safety-note {
  border: 1px solid rgba(120, 220, 185, 0.15); background: rgba(15, 30, 25, 0.72); border-radius: 18px;
  padding: 22px 26px; color: var(--text-soft); font-size: 15.5px; max-width: 820px;
}

.join-band { text-align: center; }
.join-band .wrap {
  background: var(--pine-deep); border-radius: 32px;
  padding: clamp(48px, 7vw, 88px) clamp(22px, 5vw, 72px);
}
.join-band h2 { font-size: clamp(34px, 4.4vw, 58px); color: #fff; }
.join-band p { color: var(--dark-muted); font-size: clamp(17px, 1.6vw, 20px); max-width: 40ch; margin-inline: auto; }
.join-band .btn-primary { background: var(--mint-bright); border-color: var(--mint-bright); color: #06302A; font-size: 18px; padding: 14px 36px; }
.join-band .btn-primary:hover { background: var(--mint-bright-2); border-color: var(--mint-bright-2); }
.replay-row { margin-top: 26px; }
.replay-row button { background: none; border: none; color: var(--mint-bright); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; min-height: 44px; }
.replay-row button:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-bg); color: var(--dark-muted); padding: clamp(48px, 6vw, 80px) 0 40px; font-size: 15px; position: relative; z-index: 1; }
.site-footer a { color: var(--dark-ink); }
.site-footer a:hover { color: var(--mint-bright); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.35fr 0.72fr 0.72fr 1.05fr; gap: clamp(24px, 3.4vw, 48px); }
.footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-mark { display: flex; align-items: center; gap: 12px; }
.footer-mark img { width: 44px; height: 44px; border-radius: 12px; }
.footer-mark strong { font-family: var(--font-head); font-size: 22px; color: var(--dark-ink); letter-spacing: 0.01em; }
.footer-brand .motto {
  margin: 2px 0 0; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.32; color: #FFFFFF; text-wrap: balance;
}
.footer-brand .tag { color: var(--dark-muted); font-size: 15px; margin: 0; }
.footer-contact { display: grid; gap: 12px; align-content: start; }
.contact-row {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--dark-surface); border: 1px solid var(--dark-line); border-radius: 14px;
  padding: 10px 14px;
  transition: border-color 0.2s, transform 0.2s var(--ease-premium);
}
.contact-row:hover { border-color: var(--mint-bright-2); transform: translateY(-1px); }
.contact-row .c-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--mint-bright); background: rgba(127, 227, 190, 0.1);
}
.contact-row .c-body { display: grid; gap: 1px; min-width: 0; }
.contact-row .c-primary { color: var(--dark-ink); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.contact-row:hover .c-primary { color: var(--mint-bright); }
.contact-row .c-helper { color: var(--dark-muted); font-size: 12.5px; }
.site-footer h4 { color: var(--dark-ink); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-controls { display: grid; gap: 14px; align-content: start; }
.footer-controls h4 { margin-bottom: 0; }
.footer-controls label { display: grid; gap: 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-controls select {
  background: var(--dark-surface); color: var(--dark-ink); border: 1px solid var(--dark-line);
  border-radius: 10px; padding: 10px 12px; font: inherit; min-height: 44px; cursor: pointer;
  transition: border-color 0.2s;
}
.footer-controls select:hover { border-color: var(--mint-bright-2); }
.footer-safety { border-top: 1px solid var(--dark-line); margin: 40px 0 0; padding-top: 22px; font-size: 13.5px; color: var(--dark-muted); max-width: 82ch; }
.footer-bottom { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .split.rev { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .site-nav a:not(.btn) { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 1100px), (pointer: coarse) and (max-width: 1366px) {
  .section {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.58), 0 1px 2px rgba(0, 0, 0, 0.78);
  }
  .section h2,
  .section h3,
  .section h4,
  .origin .big-quote,
  .faq summary,
  .join-band h2 {
    color: #FFFFFF;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.68), 0 1px 3px rgba(0, 0, 0, 0.84);
  }
  .section p,
  .section li,
  .section .sub,
  .split p,
  .split ul,
  .origin p,
  .faq details p,
  .safety-note,
  .join-band p {
    color: #D8E9E3;
  }
  .eyebrow,
  .band-pine .eyebrow {
    color: #8FF0CB;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.72);
  }
  .feature-visual,
  .faq,
  .safety-note,
  .join-band .wrap {
    text-shadow: none;
  }
  .btn,
  .nav-toggle,
  .mobile-nav,
  .car-bar,
  .footer-controls select,
  .theme-control select,
  .compact-select,
  .phone-unit {
    text-shadow: none;
  }
  .intro,
  .choose-intro {
    isolation: isolate;
  }
  .intro > *,
  .choose-intro > * {
    position: relative;
    z-index: 1;
  }
  .intro::before,
  .choose-intro::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(92vw, 760px);
    height: min(56vh, 520px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
      radial-gradient(ellipse 68% 58% at 50% 50%,
        rgba(3, 13, 15, 0.64) 0%,
        rgba(3, 13, 15, 0.46) 42%,
        rgba(3, 13, 15, 0.20) 66%,
        rgba(3, 13, 15, 0) 100%);
  }
  .choose-intro { position: relative; }
  .choose-intro::before {
    top: 48%;
    height: min(34vh, 340px);
    background:
      radial-gradient(ellipse 68% 58% at 50% 50%,
        rgba(3, 13, 15, 0.56) 0%,
        rgba(3, 13, 15, 0.38) 46%,
        rgba(3, 13, 15, 0.16) 70%,
        rgba(3, 13, 15, 0) 100%);
  }
  .intro h1,
  .choose-intro h2 {
    color: #FFFFFF;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 1px 3px rgba(0, 0, 0, 0.86);
  }
  .intro .lede,
  .intro-hint,
  .hero-cue,
  .choose-intro .sub {
    color: #D8E9E3;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.82);
  }
  .intro .eyebrow,
  .choose-intro .eyebrow {
    color: #8FF0CB;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.72);
  }
  .intro-actions .btn-ghost {
    background: rgba(3, 13, 15, 0.36);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  }
}
@media (max-width: 720px), (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  :root { --wrap: min(1120px, calc(100vw - 48px)); }
  html { scroll-padding-top: 76px; }
  .section { padding: clamp(56px, 14vw, 72px) 0; scroll-margin-top: 68px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: clamp(27px, 7.6vw, 34px); }
  .feature-visual { padding: 18px; }
  .safety-note { padding: 20px; }
  .faq summary { font-size: 16.5px; padding: 13px 2px; }
  .join-band .wrap { border-radius: 26px; }

  /* Phone and portrait-tablet character selection: one large Orselyna at a time. */
  .room-space { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
  .room-bg { object-fit: cover; object-position: 50% 42%; opacity: 0.55; filter: none; }
  .room-stage { background: var(--pine-deep); }
  .car-bar { display: flex; }
  .mobile-guides { position: absolute; inset: 0; }
  .guide {
    position: absolute !important;
    left: 7% !important; top: 17% !important;
    width: 86% !important; height: 65% !important;
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s var(--ease-premium), visibility 0.28s;
  }
  .guide.car-active { opacity: 1; visibility: visible; }
  body.story-active .guide { transition: none; }
  .guide-btn { min-width: 48px; min-height: 48px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .site-footer nav[aria-label="Footer"] { grid-column: 1; }
  .site-footer nav[aria-label="Footer, more"] { grid-column: 2; }
  .footer-controls {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px;
    border: 1px solid var(--dark-line); border-radius: 18px; padding: 16px;
  }
  .footer-controls h4 { flex: 1 1 100%; margin: 0; }
  .footer-controls label { flex: 1 1 150px; }
  .intro h1 { font-size: clamp(36px, 11vw, 52px); }
  .intro-hint { display: none; }
  .hero-cue { margin-top: 34px; }
  .amb-desktop { display: none; }
  .amb-mobile { display: block; }
  .amb-parallax { transform: none !important; }
}
@media (min-width: 1101px), (min-width: 721px) and (orientation: landscape) {
  .mobile-guides { display: contents; }
  .car-bar { display: none !important; }
  .arm-note { display: none !important; }
}
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  :root { --wrap: min(1120px, calc(100vw - 72px)); }
  .section { padding-block: clamp(72px, 9vw, 104px); }
  .section-head h2 { font-size: clamp(34px, 5.2vw, 48px); }
  .guide { left: 14% !important; top: 15% !important; width: 72% !important; height: 68% !important; }
  .faq { max-width: 760px; }
  .ambient[data-state="guide"] { opacity: 1; }
  .ambient[data-state="guide"] .aurora-fallback,
  .ambient[data-state="guide"] .aurora-video {
    filter: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
  .story-cue { animation: none; }
  .phone-entry img { animation: none; }
  .ring { animation: none; }
  .sp-fill { transition: none; }
  .guide-btn, .guide, .btn, .camera { transition-duration: 0.01ms !important; }
  .ambient *, .hl-a, .hl-b, .intro .lede, .intro-actions, .hero-cue, .hc-dot { animation: none !important; }
}
body.motion-reduced .ambient * { animation: none !important; }
body.motion-reduced .hc-dot { animation: none; top: 18px; }
body.motion-reduced .amb-parallax { transform: none !important; }
body.motion-reduced .scroll-cue { animation: none; }
body.motion-reduced .story-cue { animation: none; }
body.motion-reduced .phone-entry img { animation: none; }
body.motion-reduced .ring { animation: none; }
body.motion-reduced .sp-fill { transition: none; }
body.motion-reduced .guide.preparing .guide-btn { animation: none; }
body.motion-reduced .guide.hit-hover .guide-btn, body.motion-reduced .guide .guide-btn:focus-visible { transform: none; }

@media print {
  .site-header, .skip-story, .story-back, .story-cue, .story-logo, .room-ui { display: none; }
}