/* ============================================================
   CYBERSAFE — THE STORY  ·  cinematic full-bleed scroll sequence.
   Each scene blows up (Ken Burns), a card explains, and every
   chapter converges on one call to action. Built on DS tokens.
   ============================================================ */

.st { position: fixed; inset: 0; overflow: hidden; background: var(--ink-1000); font-family: var(--font-sans); }

/* the scrolling track */
.st__cab { position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.st__cab::-webkit-scrollbar { width: 0; height: 0; }

/* a scene = one viewport */
.scene { position: relative; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }

/* full-bleed art with a slow blow-up when the scene is active */
.scene__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.scene[data-active="true"] .scene__bg { animation: st-kenburns 18s var(--ease-out) forwards; will-change: transform; }
@keyframes st-kenburns { from { transform: scale(1.04); } to { transform: scale(1.10); } }

/* directional scrim keeps the card legible */
.scene__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene__scrim--right { background: linear-gradient(270deg, rgba(8,7,5,.38) 0%, rgba(8,7,5,.15) 26%, rgba(8,7,5,.01) 52%, transparent 70%), linear-gradient(0deg, rgba(8,7,5,.12), transparent 38%); }
.scene__scrim--left  { background: linear-gradient(90deg, rgba(8,7,5,.38) 0%, rgba(8,7,5,.15) 26%, rgba(8,7,5,.01) 52%, transparent 70%), linear-gradient(0deg, rgba(8,7,5,.12), transparent 38%); }
.scene__scrim--center{ background: radial-gradient(110% 90% at 50% 50%, rgba(8,7,5,.04), rgba(8,7,5,.26) 92%), linear-gradient(0deg, rgba(8,7,5,.2), transparent 42%); }
.scene__scrim--bottom{ background: linear-gradient(0deg, rgba(8,7,5,.58) 0%, rgba(8,7,5,.26) 22%, rgba(8,7,5,.02) 46%, transparent 62%); }

.scene__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(8,7,5,.22) 1px, transparent 1.4px); background-size: 4px 4px; opacity: .3; mix-blend-mode: multiply; }

/* the explainer card */
.scene__card { position: absolute; z-index: 4; top: 50%; width: min(440px, 82vw); transform: translateY(-50%);
  max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: rgba(10,8,6,.6); backdrop-filter: var(--blur-md);
  border: 1.5px solid rgba(214,181,102,.42); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(243,231,196,.14); padding: 32px 32px 34px; }
.scene__card--right  { right: 6vw; }
.scene__card--left   { left: 6vw; }
.scene__card--center { left: 50%; transform: translate(-50%, -50%); text-align: center; }
.scene__card--bottom { left: 5vw; right: auto; top: auto; bottom: 6vh; width: min(560px, 84vw); transform: translateY(22px); text-align: left; padding: 24px 32px 28px; }
/* Lobby (Regine) — keep the card compact so it never crosses the host */
.scene[data-screen-label="Lobby"] .scene__card { width: min(560px, 84vw); }
.scene[data-screen-label="Lobby"] .scene__card--right { right: 3vw; }
.scene__card--bottom .scene__title { font-size: clamp(1.7rem, 2.7vw, 2.4rem); margin-bottom: 12px; }
.scene__card--bottom .scene__body { font-size: 15px; }
/* Board Room (Vanessa) — sit the card lower in the frame */
.scene[data-screen-label="The alarm"] .scene__card--bottom { bottom: 3vh; }
/* AI floor (ACES) — sit the base card low & centred over the coffee table to cover the cropped legs */
.scene[data-screen-label="The AI question"] .scene__card--bottom { left: 50%; right: auto; bottom: 4.5vh; width: min(600px, 82vw); text-align: center; transform: translate(-50%, 22px); }
.scene[data-screen-label="The AI question"] .scene__card--bottom .scene__chapline { justify-content: center; }
.scene[data-screen-label="The AI question"][data-active="true"] .scene__card--bottom { transform: translate(-50%, 0); }

.scene__chapline { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-300); margin-bottom: 16px; }
.scene__chapline::before { content: ""; width: 24px; height: 2px; background: var(--red-400); }
.scene__card--center .scene__chapline { justify-content: center; }

.scene__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.0; color: var(--bone); margin: 0 0 16px; }
.scene__title em { font-style: italic; color: var(--gold-300); }
.scene__body { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.62; color: var(--ink-100); margin: 0; }

/* radar ornament */
.scene__radar { position: absolute; right: -24px; bottom: -24px; width: 72px; height: 72px; border-radius: 999px; border: 1px solid rgba(214,181,102,.3); background: rgba(10,8,6,.72); backdrop-filter: var(--blur-sm); }
.scene__radar::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: conic-gradient(from 0deg, rgba(197,48,34,.5), transparent 30%); animation: st-sweep 3.4s linear infinite; }
.scene__radar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 999px; background: var(--red-500); transform: translate(-50%,-50%); box-shadow: 0 0 10px var(--red-500); }
@keyframes st-sweep { to { transform: rotate(360deg); } }

/* brass nameplate */
.scene__plate { position: absolute; z-index: 4; bottom: 7vh; display: flex; flex-direction: column; gap: 1px; padding: 7px 13px; background: linear-gradient(180deg, var(--gold-200), var(--gold-500)); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.scene__plate--left { left: 6vw; }
.scene__plate--right { right: 6vw; }
.scene__plate-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--red-600); line-height: 1.05; }
.scene__plate-role { font-family: var(--font-sans); font-weight: 700; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-900); }

/* reveal animations gated on active */
.scene__card, .scene__plate { opacity: 0; transform: translateY(22px); }
.scene__card--center { transform: translate(-50%, calc(-50% + 22px)); }
.scene__card { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.scene__plate { transition: opacity .7s var(--ease-out) .12s, transform .7s var(--ease-out) .12s; }
.scene[data-active="true"] .scene__card { opacity: 1; transform: translateY(-50%); }
.scene[data-active="true"] .scene__card--center { opacity: 1; transform: translate(-50%, -50%); }
.scene[data-active="true"] .scene__card--bottom { opacity: 1; transform: translateY(0); }
.scene[data-active="true"] .scene__plate { opacity: 1; transform: none; }

/* ===== FINAL CTA scene ===== */
.scene--cta { background: radial-gradient(120% 120% at 50% 30%, #1b1410, var(--ink-1000) 70%); }
.scene__cta { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 0 8vw; }
.scene__cta-seal { width: 78px; height: 78px; border-radius: 999px; display: grid; place-items: center; background: var(--gilt-face); border: 2px solid var(--ink-1000); box-shadow: var(--shadow-lg); font-family: var(--font-display); font-weight: 700; font-size: 42px; color: var(--ink-1000); }
.scene__cta-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-300); }
.scene__cta-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.0; color: var(--bone); margin: 0; }
.scene__cta-title em { font-style: italic; color: var(--gold-300); }
.scene__cta-sub { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6; color: var(--ink-200); max-width: 54ch; margin: 0; }
.scene__cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.scene__cta-logo { width: auto; height: 40px; max-width: 80%; object-fit: contain; margin-top: 8px; }
.scene__cta-direct { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); }
.scene__cta-direct a { color: var(--gold-300); }
.scene--cta .scene__cta > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.scene--cta[data-active="true"] .scene__cta > * { opacity: 1; transform: none; }
.scene--cta[data-active="true"] .scene__cta > *:nth-child(2) { transition-delay: .08s; }
.scene--cta[data-active="true"] .scene__cta > *:nth-child(3) { transition-delay: .16s; }
.scene--cta[data-active="true"] .scene__cta > *:nth-child(4) { transition-delay: .24s; }
.scene--cta[data-active="true"] .scene__cta > *:nth-child(5) { transition-delay: .32s; }

/* ===== chapter indicator (top center) ===== */
.st__indicator { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: rgba(12,10,8,.6); backdrop-filter: var(--blur-sm); border: 1px solid rgba(214,181,102,.35); border-radius: var(--radius-coin); }
.st__indicator-no { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--gold-200); }
.st__indicator-name { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.st__progress { width: 70px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.st__progress-fill { height: 100%; background: var(--red-500); transition: width .5s var(--ease-out); }

/* ===== chapter dots (right edge) ===== */
.st__dots { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; }
.st__dot { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 5px; background: none; border: 0; cursor: pointer; }
.st__dot::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.28); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.st__dot:hover::after, .st__dot:focus-visible::after { background: var(--gold-300); }
.st__dot.is-active::after { background: var(--red-500); box-shadow: 0 0 0 4px rgba(197,48,34,.22); }
.st__dot-label { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--bone); background: rgba(12,10,8,.74); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border: 1px solid rgba(214,181,102,.4); border-radius: var(--radius-coin); padding: 5px 11px; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.st__dot:hover .st__dot-label, .st__dot:focus-visible .st__dot-label { opacity: 1; transform: translateX(0); }

/* first-run coachmark */
.st__coach { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; background: rgba(8,7,5,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) { .st__coach { animation: st-coach-in .5s var(--ease-out); } }
@keyframes st-coach-in { from { opacity: 0; } to { opacity: 1; } }
.st__coach-card { pointer-events: none; background: var(--paper-50); border: 2px solid var(--ink-1000); box-shadow: var(--shadow-xl); border-radius: var(--radius-md); padding: 32px 36px 30px; max-width: min(460px, 88vw); text-align: center; }
.st__coach-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--red-600); margin-bottom: 12px; }
.st__coach-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--ink-1000); margin-bottom: 22px; }
.st__coach-cues { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; text-align: left; }
.st__coach-cue { display: flex; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--ink-800); }
.st__coach-ico { flex: none; width: 48px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--red-600); }
.st__coach-reassure { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-700); margin: -6px 0 24px; text-align: left; }
.st__coach-reassure strong { color: var(--ink-900); font-weight: 700; }
.st__coach-reassure--hint { margin-top: -12px; }
.st__coach-btn { pointer-events: auto; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); background: var(--red-500); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-sm); padding: 13px 26px; cursor: pointer; box-shadow: var(--shadow-ink-sm); transition: background var(--dur-fast); }
.st__coach-btn:hover { background: var(--red-600); }

/* elevator floor dial (top centre) */
.st__dial { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 280px; height: 150px; z-index: 40; pointer-events: none; }
.st__dial > * { pointer-events: auto; }
.st__dial-face { position: absolute; left: 16px; top: 10px; width: 248px; height: 124px; border: 2px solid var(--ink-1000); border-bottom: 0; border-radius: 124px 124px 0 0; background: radial-gradient(125% 135% at 50% 100%, var(--paper-0), var(--paper-100) 66%, var(--paper-200)); box-shadow: inset 0 0 0 6px var(--gold-500), inset 0 0 0 7px var(--ink-1000), var(--shadow-lg); pointer-events: none; }
.st__dial-no { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 22px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; color: var(--ink-800); transition: color .2s var(--ease-out), transform .2s var(--ease-out); }
.st__dial-no:hover { color: var(--red-600); }
.st__dial-no.is-active { color: var(--red-600); transform: translate(-50%, -50%) scale(1.3); }
.st__dial-needle { position: absolute; width: 5px; height: 94px; transform-origin: bottom center; background: linear-gradient(180deg, var(--gold-200), var(--gold-600)); border: 1px solid var(--ink-1000); clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .7s var(--ease-out); }
.st__dial-hub { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 999px; background: var(--gilt-face); border: 2px solid var(--ink-1000); box-shadow: var(--shadow-sm); }
.st__dial-name { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); background: rgba(12,10,8,.72); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border: 1px solid rgba(214,181,102,.4); border-radius: var(--radius-coin); padding: 4px 12px; }
@media (prefers-reduced-motion: reduce) { .st__dial-needle { transition: none; } }
@media (max-width: 760px) { .st__dial { transform: translateX(-50%) scale(.78); transform-origin: top center; top: 2px; } }

/* ===== scroll hint (first scene) ===== */
.st__hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-200); pointer-events: none; transition: opacity .4s; }
.st__hint.is-hidden { opacity: 0; }
.st__hint-m { width: 22px; height: 34px; border: 2px solid var(--gold-400); border-radius: 12px; position: relative; }
.st__hint-m::before { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; background: var(--gold-300); border-radius: 2px; transform: translateX(-50%); animation: st-wheel 1.4s var(--ease-inout) infinite; }
@keyframes st-wheel { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,12px); } }

/* ===== top brand + skip ===== */
.st__top { position: absolute; top: 18px; left: 28px; right: 28px; z-index: 59; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.st__top-actions { pointer-events: none; display: flex; align-items: center; gap: 10px; }
.st__brand { display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out); }
.st__brand-logo { height: 30px; width: auto; display: block; }
.st__brand.is-hidden { opacity: 0; pointer-events: none; }
.st__brand--subtle .st__brand-logo { height: 22px; }
.st__brand--standard .st__brand-logo { height: 40px; }
.st__brand--bold .st__brand-logo { height: 46px; }
.st__brand--plate { padding: 8px 16px; background: rgba(12,10,8,.62); backdrop-filter: var(--blur-sm); border: 1.5px solid rgba(214,181,102,.4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* opening logo lockup (welcome scene = centered title card) */
.st__lockup { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; pointer-events: none; width: max-content; max-width: 88vw; padding: 48px 64px; }
.st__lockup-logo { width: min(440px, 60vw); filter: drop-shadow(0 4px 16px rgba(0,0,0,.38)); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.st__lockup-tag { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-200); opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease-out) .18s, transform 1s var(--ease-out) .18s; }
.st__lockup-line { margin: 4px 0 0; max-width: 30ch; font-family: var(--font-display, Georgia, serif); font-size: clamp(15px, 2.4vw, 19px); line-height: 1.45; color: var(--bone, #e8e2d6); text-wrap: balance; opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease-out) .32s, transform 1s var(--ease-out) .32s; }
.scene[data-active="true"] .st__lockup-logo,
.scene[data-active="true"] .st__lockup-tag,
.scene[data-active="true"] .st__lockup-line { opacity: 1; transform: none; }
.scene__countries--center { display: flex; flex-direction: column; align-items: center; border-top: 0; padding-top: 4px; margin-top: 4px; opacity: 0; transition: opacity 1s var(--ease-out) .34s; }
.scene[data-active="true"] .scene__countries--center { opacity: 1; }
.scene__countries--center .scene__countries-row { justify-content: center; max-width: 520px; }

/* countries we serve (welcome card) */
.scene__countries { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(214,181,102,.25); }
.scene__countries-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.scene__countries-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red-500); box-shadow: 0 0 0 3px rgba(197,48,34,.25); }
.scene__countries-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.scene__country { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; color: var(--bone-dim); background: rgba(255,255,255,.06); border: 1px solid rgba(214,181,102,.3); border-radius: var(--radius-coin); padding: 3px 10px; }

/* regions — classy inline, dot-separated */
.scene__regions { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(214,181,102,.25); display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-200); }
.scene__region { white-space: nowrap; }
.scene__regions-sep { color: var(--red-400); font-weight: 400; transform: translateY(-1px); }
.scene__regions--center { justify-content: center; border-top: 0; padding-top: 4px; opacity: 0; transition: opacity 1s var(--ease-out) .34s; }
.scene[data-active="true"] .scene__regions--center { opacity: 1; }

/* calm motion — no blow-up */
.st[data-motion="calm"] .scene[data-active="true"] .scene__bg { animation: none; transform: scale(1.08); }
.st__brand-seal { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--gilt-face); border: 1.5px solid var(--ink-1000); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-1000); }
.st__brand-wm { font-family: var(--font-sans); font-weight: 800; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone); }
.st__skip { pointer-events: auto; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); background: rgba(12,10,8,.5); border: 1px solid rgba(214,181,102,.3); border-radius: var(--radius-coin); padding: 8px 16px; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); }
.st__skip:hover { color: var(--gold-200); border-color: var(--gold-500); }

/* ===== floor navigator (replaces skip-to-contact) ===== */
.st__nav-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone);
  background: rgba(12,10,8,.55); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(214,181,102,.4); border-radius: var(--radius-coin); padding: 9px 16px 9px 13px;
  transition: color var(--dur-fast), border-color var(--dur-fast); }
.st__nav-toggle:hover { color: #fff; border-color: var(--gold-400); }
.st__nav-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 15px; height: 12px; }
.st__nav-bars i { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 1px; transition: transform .26s var(--ease-out), opacity .18s var(--ease-out); }
.st__nav-toggle.is-open .st__nav-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.st__nav-toggle.is-open .st__nav-bars i:nth-child(2) { opacity: 0; }
.st__nav-toggle.is-open .st__nav-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.st__nav { position: fixed; inset: 0; z-index: 56; pointer-events: none; }
.st__nav.is-open { pointer-events: auto; }
.st__nav-scrim { position: absolute; inset: 0; background: rgba(8,7,5,.55); opacity: 0; transition: opacity .4s var(--ease-out); }
.st__nav.is-open .st__nav-scrim { opacity: 1; }
.st__nav-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(372px, 88vw);
  background: rgba(14,10,8,.95); -webkit-backdrop-filter: var(--blur-md); backdrop-filter: var(--blur-md);
  border-left: 1.5px solid rgba(214,181,102,.32); box-shadow: -26px 0 70px rgba(0,0,0,.5);
  padding: 84px 26px 30px; overflow-y: auto; scrollbar-width: none;
  transform: translateX(100%); transition: transform .44s var(--ease-out); }
.st__nav-panel::-webkit-scrollbar { width: 0; }
.st__nav.is-open .st__nav-panel { transform: translateX(0); }
.st__nav-head { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--red-400, #e0584f); margin: 0 0 16px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.12); }
.st__nav-list { list-style: none; margin: 0; padding: 0; }
.st__nav-item { width: 100%; display: flex; align-items: baseline; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 11px 10px; border-radius: 4px; transition: background var(--dur-fast); }
.st__nav-item:hover { background: rgba(214,181,102,.09); }
.st__nav-item:hover .st__nav-nm { color: #fff; }
.st__nav-no { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--gold-400, #d6b566); }
.st__nav-nm { font-family: var(--font-sans); font-weight: 600; font-size: 18.5px; letter-spacing: -.005em; line-height: 1.28; color: var(--bone, #fbf6ea); transition: color var(--dur-fast); }
.st__nav-item.is-active .st__nav-no, .st__nav-item.is-active .st__nav-nm { color: var(--red-400, #e0584f); }

/* quick crossfade veil — used when an in-room CTA jumps to another floor */
.st__fade { position: fixed; inset: 0; z-index: 70; background: var(--ink-1000, #14110c); opacity: 0; pointer-events: none; transition: opacity .24s var(--ease-out); }
.st__fade.is-on { opacity: 1; pointer-events: auto; }

/* ============================================================
   THE DOORS  ·  swipe affordances at the edges of each floor.
   Right = what we do (+ CTA). Left = the proof / the stakes.
   ============================================================ */
.st__door { position: fixed; top: 50%; z-index: 45; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px;
  padding: 20px 11px 18px; cursor: pointer;
  background: var(--paper-100); color: var(--ink-900);
  border: 1.5px solid var(--ink-1000);
  transition: transform .34s var(--ease-out), opacity .34s var(--ease-out), background .2s; }
.st__door--right { right: 0; border-right: 0; border-radius: 8px 0 0 8px; box-shadow: var(--shadow-ink); }
.st__door--left  { left: 0;  border-left: 0;  border-radius: 0 8px 8px 0; box-shadow: -4px 4px 0 0 var(--ink-1000); }
.st__door:hover { background: var(--paper-50); }
.st__door--right:hover { transform: translate(-5px, -50%); }
.st__door--left:hover  { transform: translate(5px, -50%); }
.st__door.is-hidden { opacity: 0; pointer-events: none; }
.st__door--right.is-hidden { transform: translate(40px, -50%); }
.st__door--left.is-hidden  { transform: translate(-40px, -50%); }
.st__door-arrow { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--red-500); }
@media (prefers-reduced-motion: no-preference) {
  .st__door--left .st__door-arrow { animation: st-arrow-l 1.5s var(--ease-inout) infinite; }
  .st__door--right .st__door-arrow { animation: st-arrow-r 1.5s var(--ease-inout) infinite; }
}
@keyframes st-arrow-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes st-arrow-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.st__door--return .st__door-arrow { animation: none; }
.st__door-kicker { writing-mode: vertical-rl; font-family: var(--font-sans); font-weight: 700; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-700); }
.st__door-label { writing-mode: vertical-rl; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-900); }
.st__door--left .st__door-kicker, .st__door--left .st__door-label { transform: rotate(180deg); }
.st__door--soon { cursor: default; }
.st__door--soon:hover { transform: translateY(-50%); background: var(--paper-100); }
.st__door--soon .st__door-label { color: var(--ink-500); }

/* ============================================================
   THE ROOMS  ·  cream comic-panel pages that slide in.
   ============================================================ */
.st__rooms { position: fixed; inset: 0; z-index: 50; pointer-events: none; perspective: 2400px; }
.st__scrim { position: absolute; inset: 0; background: rgba(12,10,8,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out); }
.st__rooms[data-open="left"] .st__scrim, .st__rooms[data-open="right"] .st__scrim { opacity: 1; pointer-events: auto; }

.st__room { position: absolute; top: 0; bottom: 0; width: min(760px, 94vw);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(36px, 5vw, 76px); overflow-y: auto; pointer-events: none;
  background-color: var(--paper-100); background-image: var(--halftone); background-size: var(--halftone-size);
  box-shadow: 0 26px 70px rgba(8,7,5,.5); backface-visibility: hidden;
  transition: transform .72s var(--ease-out); }
.st__room--right { right: 0; border-left: 2px solid var(--ink-1000); transform-origin: right center; transform: rotateY(-112deg); }
.st__room--left  { left: 0;  border-right: 2px solid var(--ink-1000); transform-origin: left center;  transform: rotateY(112deg); }
.st__rooms[data-open="right"] .st__room--right { transform: rotateY(0deg); pointer-events: auto; }
.st__rooms[data-open="left"]  .st__room--left  { transform: rotateY(0deg); pointer-events: auto; }
.st__room::before { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; }
.st__room--right::before { right: 0; background: linear-gradient(270deg, rgba(8,7,5,.16), transparent); }
.st__room--left::before  { left: 0;  background: linear-gradient(90deg, rgba(8,7,5,.16), transparent); }

.rm__inner { width: 100%; max-width: 480px; margin: auto; }
.rm__crumb { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; padding: 0;
  background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); transition: color var(--dur-fast); }
.rm__crumb:hover { color: var(--red-600); }
.rm__crumb-arrow { font-family: var(--font-display); font-size: 16px; line-height: 1; }
.rm__floor { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--gold-700); margin-bottom: 18px; }
.rm__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-600); margin-bottom: 14px; }
.rm__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red-500); }
.rm__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1.02; color: var(--ink-1000); margin: 0 0 18px; }
.rm__title em { font-style: italic; color: var(--red-600); }
.rm__lead { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink-700); margin: 0 0 24px; text-wrap: pretty; }

.rm__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rm__item { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.45; color: var(--ink-900); padding: 13px 0 13px 26px; position: relative; border-top: 1px solid var(--line-default); }
.rm__item:last-child { border-bottom: 1px solid var(--line-default); }
.rm__item::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 9px; background: var(--red-500); border: 1.5px solid var(--ink-1000); }

.rm__steps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rm__step { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.4; color: var(--ink-900); }
.rm__step-no { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--bone); background: var(--ink-1000); padding: 4px 7px; border-radius: var(--radius-sm); letter-spacing: .02em; }

.rm__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 26px; }

/* logo placeholder grid (e.g. the proof / accolades panel) */
.pc__logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin: 2px 0 22px; }
.pc__logo { aspect-ratio: 16 / 7; background: rgba(255,255,255,.06); border: 1.5px dashed rgba(214,181,102,.5); border-radius: var(--radius-sm); display: grid; place-items: center; }
.pc__logo::after { content: "LOGO"; font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: .2em; color: rgba(214,181,102,.7); }

/* The proof room — Regine (Variation B). CREST + Cyber Trust in full colour on a cream
   band (they're drawn for light grounds), then the other marks whitened on a 3×2 grid. */
.pc__proof { margin: 4px 0 2px; }
.pc__proof-band { background: var(--paper-100, #f4eddc); border: 1.5px solid var(--ink-1000, #14110c); border-radius: 6px; box-shadow: 5px 5px 0 0 rgba(20,17,12,.85); display: flex; align-items: center; justify-content: center; gap: 30px; padding: 20px 26px; margin-bottom: 20px; }
.pc__proof-hero { display: block; width: auto; object-fit: contain; }
.pc__proof-hero--crest { height: 104px; }
.pc__proof-hero--ct { height: 62px; }
.pc__proof-div { width: 1.5px; align-self: stretch; background: rgba(20,17,12,.18); }
.pc__proof-white { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; align-items: center; justify-items: center; }
.pc__pw-cell { width: 100%; height: 46px; display: grid; place-items: center; }
.pc__pw { max-height: 34px; max-width: 100%; object-fit: contain; opacity: .85; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.pc__pw--ddas { max-height: 46px; }
.pc__pw--aais { max-height: 40px; }
.pc__pw--bizsafe { max-height: 38px; }
.pc__pw--pwm { max-height: 40px; }
.pc__pw--partner, .pc__pw--nsmark { max-height: 25px; }

/* centre the proof panel's heading like Variation B, and keep it compact */
.scene__pcard:has(.pc__proof) { text-align: center; }
.scene__pcard:has(.pc__proof) .pc__eyebrow { justify-content: center; }
.scene__pcard:has(.pc__proof) .pc__title { font-size: clamp(1.6rem, 2.2vw, 2.05rem); line-height: 1.04; margin-bottom: 9px; }
.scene__pcard:has(.pc__proof) .pc__lead { font-size: 13.5px; line-height: 1.45; margin: 0 auto 18px; max-width: 42ch; }

/* (legacy bullet-honours styling — retained harmlessly for other panels) */
.pc__cred-label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red-400, #e0584f); margin: 0 0 2px; }
.pc__honours { margin: 6px 0 4px; }
.pc__honour + .pc__honour { margin-top: 16px; }
.pc__mark-note { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--bone-dim, rgba(251,246,234,.62)); margin: 13px 0 0; }
.rm__stat { display: flex; flex-direction: column; gap: 5px; padding: 18px 18px 16px; background: var(--paper-0); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink-sm); }
.rm__stat-v { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--red-600); }
.rm__stat-k { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; letter-spacing: .04em; line-height: 1.3; color: var(--ink-600); }

.rm__cta { margin-top: 4px; }

.rm__wip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 11px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-900); background: var(--paper-200); border: 1.5px dashed var(--ink-700); border-radius: var(--radius-coin); }
.rm__wip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--status-watch); }

.rm__form { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; }
.rm__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-500); text-wrap: pretty; }

/* slim the rail when a room is open so scrolling doesn't fight the read */
.st__cab[data-locked="true"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .st__door, .st__room { transition: none !important; }
  .scene__bg { animation: none !important; }
  .scene__card, .scene__plate, .scene--cta .scene__cta > * { opacity: 1 !important; transform: translateY(-50%) !important; }
  .scene__card--center { transform: translate(-50%, -50%) !important; }
  .scene__card--bottom { transform: translateY(0) !important; }
  .scene[data-screen-label="The AI question"] .scene__card--bottom { transform: translate(-50%, 0) !important; }
  .scene__plate, .scene--cta .scene__cta > * { transform: none !important; }
  .st__cab { scroll-behavior: auto; }
  .scene__radar::before { animation: none; }
}

/* ============================================================
   RESPONSIVE — PHONE / SMALL TABLET  (≤ 768px)
   See the breakpoint note at the foot of this file. This tier turns the
   edge-anchored cinematic layout into a centred, viewport-safe one:
   the top bar stops colliding, every explainer card becomes a contained
   bottom sheet, and multi-column proof grids collapse.
   ============================================================ */
@media (max-width: 768px) {
  /* --- top bar: brand + actions only; the centred floor pill has no room here
         (the Menu drawer is the wayfinder on small screens) --- */
  .st__indicator { display: none; }
  /* clear notches / rounded corners under viewport-fit=cover */
  .st__top { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  .st__brand-logo,
  .st__brand--subtle .st__brand-logo,
  .st__brand--standard .st__brand-logo,
  .st__brand--bold .st__brand-logo { height: 26px; }
  .st__brand--plate { padding: 6px 12px; }
  .st__top-actions { gap: 8px; }
  .st__nav-toggle { padding: 10px 14px; min-height: 44px; }
  .st__help-toggle { padding: 10px 12px; }

  /* --- ART-FIRST base explainer card ---
     Compact + bottom-anchored so the illustration reads in the top ~half of the frame
     (the phone shows the pano's full height; only the lower slice was being covered).
     !important is deliberate: it beats the per-scene desktop positions ([data-screen-label]
     …, 0-2-0 but non-important) AND the reduced-motion transform overrides earlier in the
     file. Room-open .scene__pcard sheets are intentional reading and handled separately. */
  .scene__card,
  .scene__card--left, .scene__card--right, .scene__card--center, .scene__card--bottom {
    left: 50% !important; right: auto !important; top: auto !important;
    bottom: calc(2.5vh + 96px) !important;   /* clears the brass nameplate docked below (up to 4 lines) */
    /* narrow enough to sit BETWEEN the centred edge room-tabs (~40px each) so they
       never overlap the card — ~52px clear margin each side */
    width: min(440px, calc(100vw - 104px)) !important; max-width: calc(100vw - 104px);
    max-height: 48dvh !important; overflow-y: auto;
    transform: translate(-50%, 12px) !important; text-align: left;
    background: rgba(10,8,6,.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .scene[data-active="true"] .scene__card,
  .scene[data-active="true"] .scene__card--left, .scene[data-active="true"] .scene__card--right,
  .scene[data-active="true"] .scene__card--center, .scene[data-active="true"] .scene__card--bottom {
    transform: translateX(-50%) !important; }
  /* brass nameplate → docked centred at the very bottom, clear of the card (was overlapping it) */
  .scene__plate--left, .scene__plate--right {
    left: 50% !important; right: auto !important; top: auto !important; bottom: 2.5vh !important;
    transform: translateX(-50%) !important; }
  .scene[data-active="true"] .scene__plate--left, .scene[data-active="true"] .scene__plate--right {
    transform: translateX(-50%) !important; }

  /* --- panorama cards → centred bottom sheet. !important intentionally beats the
         many per-scene / per-variant desktop overrides (--sz-xl, --align-side,
         [data-screen-label] …) so no card is ever pinned half-off-screen. --- */
  .scene__pcard {
    left: 50% !important; right: auto !important; margin: 0 !important;
    top: auto !important; bottom: 12vh !important;
    width: min(460px, 92vw) !important; max-width: 92vw !important;
    max-height: 74dvh !important; padding: 24px 22px 26px !important;
    transform: translate(-50%, 14px) !important;
    background: rgba(12,9,7,.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .scene[data-active="true"] .scene__pcard { transform: translateX(-50%) !important; }
  /* stepped ACES card sits above the fixed step bar */
  .scene__pcard--stepped { bottom: 19vh !important; max-height: 60dvh !important; }
  .scene[data-screen-label="The AI question"] .scene__pcard--stepped { bottom: 19vh !important; }
  /* pen-testing panel: drop the reserved space for the side emblem */
  .scene[data-screen-label="The watch"] .scene__pcard--right { padding-right: 22px !important; }

  /* --- multi-column proof/stat grids collapse --- */
  .pc__proof-white { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .pc__proof-band { gap: 18px; padding: 16px 18px; }
  .rm__stats { grid-template-columns: 1fr 1fr; }
  .pc__list--links { grid-template-columns: 1fr 1fr; }

  /* --- final CTA: stack full-width buttons so the "Opening soon" chip can't clip --- */
  .scene__cta { padding: 0 20px; gap: 18px; }
  .scene__cta-seal { width: 60px; height: 60px; font-size: 32px; }
  .scene__cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .scene__cta-row > .cs-btn { width: 100%; }
  .scene__cta-direct { gap: 6px 22px; }

  /* welcome floor: lift the "Scroll to begin" hint clear of the docked nameplate */
  .st__hint { bottom: calc(2.5vh + 70px); }

  /* --- room + door affordances --- */
  .st__dots { right: 10px; }
  .scene__radar { display: none; }
  .st__room { width: 100vw; }
  .st__door { gap: 8px; padding: 16px 12px; min-width: 40px; }
  .st__door-kicker { display: none; }
  .st__door-label { font-size: 11px; }
  /* the edge "Back to the floor" return tab overlaps the centred bottom sheet and
     clips its text; every open card already has its own close (X / step-bar Back /
     Esc / swipe), so drop the redundant tab on phones. */
  .st__door--return { display: none; }
}

/* ============================================================
   PANORAMA FLOOR  ·  doors pan the camera across a wide scene.
   ============================================================ */
.scene__pano { position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.scene[data-active="true"] .scene__pano { will-change: opacity, transform; }
.scene__pano[data-on="true"] { opacity: 1; transform: scale(1); }
.scene__pano--c { transform-origin: center 24%; }
/* The threat (Yeap) — zoom the eye pano so it can pan left, clear of the card */
.scene[data-screen-label="The threat"] .scene__pano--c { background-size: 135% auto; }
/* The conversation (Kelly) — zoom & pan her left so the card never crosses her */
.scene[data-screen-label="The conversation"] .scene__pano--c { background-size: 120% auto; }
@media (max-width: 760px) {
  .scene[data-screen-label="The conversation"] .scene__pano--c { background-size: cover; background-position: 42% 22% !important; }
}
.scene[data-active="true"] .scene__pano--c { animation: st-kenburns 20s var(--ease-out) forwards; }
.st[data-motion="calm"] .scene[data-active="true"] .scene__pano--c { animation: none; transform: scale(1.08); }
.scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .5s var(--ease-out); }
.scene__video[data-on="true"] { opacity: 1; }
.scene__video-poster { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s var(--ease-out); }
.scene__video-poster[data-on="true"] { opacity: 1; }

.scene__pcard { position: absolute; z-index: 6; top: 50%; width: min(460px, 84vw); transform: translateY(-50%);
  background: rgba(12,9,7,.82); -webkit-backdrop-filter: var(--blur-md); backdrop-filter: var(--blur-md);
  border: 1.5px solid rgba(214,181,102,.42); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); padding: 30px 32px 34px; max-height: 86vh; overflow-y: auto; }
.scene__pcard--right { right: 6vw; }
.scene__pcard--left  { left: 6vw; }
.scene__pcard--sz-lg { width: min(560px, 88vw); padding: 36px 40px 42px; }
.scene__pcard--sz-sm { width: min(400px, 86vw); padding: 30px 30px 34px; }
.scene__pcard--sz-xl { left: 0; right: 0; width: min(720px, 86vw); margin: 0 auto; padding: 46px 52px 50px; }
.scene__pcard--sz-xl .pc__title { font-size: clamp(2.4rem, 3.8vw, 3.6rem); }
.scene__pcard--sz-xl .pc__lead { font-size: 17.5px; }
.scene__pcard--sz-xl.scene__pcard--align-side.scene__pcard--right { left: auto; right: 4vw; margin: 0; }
.scene__pcard--sz-xl.scene__pcard--align-side.scene__pcard--left { right: auto; left: 4vw; margin: 0; }

/* shorter laptop screens (e.g. MacBook 16:10) — keep the read-panels compact and contained */
@media (max-height: 860px) {
  .scene__pcard { padding: 22px 26px 26px; max-height: 90vh; }
  .scene__pcard--sz-lg { padding: 24px 30px 30px; }
  .scene__pcard--sz-xl { padding: 26px 34px 30px; }
  .scene__pcard .pc__title { font-size: clamp(1.7rem, 2.5vw, 2.3rem); margin-bottom: 10px; }
  .scene__pcard--sz-xl .pc__title { font-size: clamp(1.9rem, 3vw, 2.7rem); }
  .scene__pcard .pc__lead { font-size: 14.5px; margin-bottom: 14px; }
  .scene__pcard .pc__list li { padding: 8px 0 8px 24px; font-size: 14px; }
  .scene__pcard .pc__list li::before { top: 13px; }
}
.pc__back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-200); transition: color var(--dur-fast); }
.pc__back:hover { color: var(--red-300); }
.pc__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-300); margin-bottom: 14px; }
.pc__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red-400); }
.pc__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.02; color: var(--bone); margin: 0 0 14px; }
.pc__title em { font-style: italic; color: var(--gold-300); }
.pc__lead { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-100); margin: 0 0 18px; text-wrap: pretty; }
.pc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pc__list li { position: relative; padding: 11px 0 11px 24px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.4; color: var(--bone-dim); border-top: 1px solid rgba(255,255,255,.12); }
.pc__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.pc__list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; background: var(--red-500); border: 1.5px solid var(--bone); }
.pc__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pc__steps li { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.4; color: var(--bone-dim); }
.pc__no { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-1000); background: var(--gold-300); padding: 3px 6px; border-radius: var(--radius-sm); }
.pc__cta { margin-top: 18px; }
.pc__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.18); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-200); text-wrap: pretty; }
.pc__stepbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(20px, 4vw, 56px) 22px; background: linear-gradient(0deg, rgba(8,7,5,.82), rgba(8,7,5,.2) 58%, transparent); }
.pc__stepbar-mid { display: flex; align-items: center; gap: 16px; }
.pc__roomtick { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,246,234,.62); white-space: nowrap; }
.pc__step-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; border-radius: var(--radius-md); cursor: pointer; color: var(--bone); background: rgba(255,255,255,.07); border: 1.5px solid rgba(214,181,102,.42); transition: background .2s var(--ease-out), border-color .2s var(--ease-out), opacity .2s var(--ease-out); }
.pc__step-btn:hover { background: rgba(255,255,255,.14); border-color: var(--gold-400); }
.pc__step-btn:disabled { opacity: .34; cursor: default; }
.pc__step-btn--next { background: var(--red-500); border-color: var(--ink-1000); }
.pc__step-btn--next:hover { background: var(--red-400); border-color: var(--ink-1000); }
.pc__dots { display: flex; align-items: center; gap: 8px; }
.pc__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.26); transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
.pc__dot.is-on { background: var(--gold-300); transform: scale(1.25); }
.pc__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; font-family: var(--font-sans); font-size: 15px; line-height: 1; color: var(--bone); background: rgba(255,255,255,.08); border: 1.5px solid rgba(214,181,102,.42); transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); z-index: 3; }
.pc__close:hover { background: var(--red-500); border-color: var(--ink-1000); transform: scale(1.06); }
.rm__close { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; font-family: var(--font-sans); font-size: 16px; line-height: 1; color: var(--ink-900); background: var(--paper-0); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink-sm); transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); z-index: 3; }
.rm__close:hover { background: var(--red-500); color: var(--bone); transform: scale(1.06); }

.host-plate { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 26px; padding: 11px 18px; background: linear-gradient(180deg, var(--gold-200), var(--gold-500)); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-sm); box-shadow: var(--shadow-ink-sm); }
.host-plate__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--red-600); line-height: 1.05; }
.host-plate__role { font-family: var(--font-sans); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-900); }

.pc__cta-block { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.pc__chips-label { display: block; margin-bottom: 11px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-200); }
.pc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc__chip { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--bone-dim); background: rgba(255,255,255,.06); border: 1.5px solid rgba(214,181,102,.34); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.pc__chip:hover { border-color: var(--gold-300); color: var(--bone); }
.pc__chip.is-on { background: var(--red-500); border-color: var(--red-500); color: var(--bone); box-shadow: 0 0 0 3px rgba(197,48,34,.25); }
.pc__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pc__btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .01em; border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 13px 22px; cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.pc__btn--lg { font-size: 16.5px; padding: 17px 30px; }
.pc__btn--crimson { background: var(--red-500); color: var(--bone); border-color: var(--ink-1000); box-shadow: var(--shadow-ink-sm); }
.pc__btn--crimson:hover { background: var(--red-600); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--ink-1000); }
.pc__btn--crimson:active { transform: translateY(1px); box-shadow: 2px 2px 0 0 var(--ink-1000); }
.pc__btn--gold, .pc__btn--secondary { background: transparent; color: var(--gold-200); border-color: var(--gold-500); }
.pc__btn--gold:hover, .pc__btn--secondary:hover { background: rgba(214,181,102,.12); color: var(--bone); border-color: var(--gold-300); }
.pc__btn-arrow { font-family: var(--font-display); transition: transform .2s var(--ease-out); }
.pc__btn:hover .pc__btn-arrow { transform: translateX(4px); }

/* --- honestly-disabled CTA ("Opening soon"): muted, no arrow, not clickable --- */
.pc__btn--soon, .cs-btn[disabled] { cursor: default; }
.pc__btn--soon { background: transparent; color: var(--ink-300); border-color: rgba(255,255,255,.16); box-shadow: none; opacity: .85; }
.pc__btn--soon:hover { background: transparent; color: var(--ink-300); transform: none; box-shadow: none; border-color: rgba(255,255,255,.16); }
.pc__btn-soon { margin-left: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--ink-200); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.cs-btn .pc__btn-soon { background: rgba(26,22,17,.08); color: var(--text-secondary); border-color: rgba(26,22,17,.16); }

/* --- form fallback (no backend yet): disabled field + working links --- */
.rm__form--fallback { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; }
.rm__form-lbl { font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); }
.rm__form-input { width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: var(--radius-sm); border: 1.5px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); color: var(--ink-300); font: inherit; opacity: .6; pointer-events: none; }
.rm__form-fbk { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.rm__form-ok { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--gold-200); margin: 8px 0 0; }

.scene__pcard { opacity: 0; transform: translate(0, calc(-50% + 14px)); }
@media (prefers-reduced-motion: no-preference) { .scene__pcard { transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } }
.scene[data-active="true"] .scene__pcard { opacity: 1; transform: translateY(-50%); }
/* stepped right rooms (floor 7 / ACES) — each step re-rises like entering a new room */
@keyframes pcRise { from { opacity: 0; transform: translateY(calc(-50% + 22px)); } to { opacity: 1; transform: translateY(-50%); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) { .scene__pcard--stepped { animation: pcRise .5s cubic-bezier(.16, 1, .3, 1) both; } }
/* bottom-anchored stepped rooms (ACES / variant B) rise from below on each step */
@keyframes pcRiseBottom { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) { .scene[data-screen-label="The AI question"] .scene__pcard--stepped { animation: pcRiseBottom .5s cubic-bezier(.16, 1, .3, 1) both; } }
/* ACES floor (variant B) — use the same glass box as every other floor */
.scene[data-screen-label="The AI question"] .scene__pcard { max-height: 84vh; }
/* Left room (Why ACES) — centre the glass box over the coffee table and
   bottom-anchor it, so its lower edge hides the table's cropped legs (same
   fix the base floor card uses). This is the only --right pcard on the floor.
   Box position is centred; text stays left-aligned for readability. */
.scene[data-screen-label="The AI question"] .scene__pcard--right {
  left: 50%; right: auto; top: auto; bottom: 4.5vh;
  transform: translate(-50%, 14px); }
.scene[data-screen-label="The AI question"][data-active="true"] .scene__pcard--right { transform: translateX(-50%); }
.scene[data-screen-label="The AI question"] .scene__pcard .pc__eyebrow,
.scene[data-screen-label="The AI question"] .scene__pcard .pc__title,
.scene[data-screen-label="The AI question"] .scene__pcard .pc__lead,
.scene[data-screen-label="The AI question"] .scene__pcard .pc__list li,
.scene[data-screen-label="The AI question"] .scene__pcard .pc__steps li,
.scene[data-screen-label="The AI question"] .scene__pcard .pc__cobrand-k { text-shadow: 0 2px 22px rgba(0,0,0,.82), 0 1px 3px rgba(0,0,0,.55); }
.scene[data-screen-label="The AI question"] .pc__close { top: -52px; left: 0; right: auto; }
.scene__pcard--stepped .pc__close { display: none; }
/* variant B rooms — the board art already lists the points, so drop the card's bullet lists */
.scene[data-screen-label="The AI question"] .scene__pcard--stepped .pc__list,
.scene[data-screen-label="The AI question"] .scene__pcard--stepped .pc__steps { display: none; }
/* stepped rooms (variant B) — anchor the text block to the lower-left, clear of the bottom bar */
.scene[data-screen-label="The AI question"] .scene__pcard--stepped { top: auto; bottom: 16vh; transform: none; max-height: 76vh; }
.scene[data-screen-label="The AI question"][data-active="true"] .scene__pcard--stepped { transform: translateY(0); }
.pc__cobrand { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.pc__cobrand-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-300); margin-bottom: 12px; }
.pc__cobrand-row { display: flex; align-items: center; gap: 18px; }
.pc__cobrand-cs { height: 22px; width: auto; display: block; }
.pc__cobrand-cs--strike { height: 16px; }
.pc__cobrand-div { flex: 0 0 auto; width: 1px; height: 24px; background: rgba(255,255,255,.24); }
/* partnership room (variant B) — centred CyberSafe × CrowdStrike lockup above the handshake, lobby-style */
.pc__brandlock { position: absolute; z-index: 7; top: 27%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; pointer-events: none; }
@keyframes pcBrandIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: no-preference) { .pc__brandlock { animation: pcBrandIn .75s var(--ease-out) .1s both; } }
.pc__brandlock-k { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-200); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.pc__brandlock-row { display: flex; align-items: center; gap: 38px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)); }
.pc__brandlock-cs { height: 62px; width: auto; display: block; }
.pc__brandlock-strike { height: 44px; width: auto; display: block; }
.pc__brandlock-x { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--gold-300); opacity: .7; }
/* Step 3 brandmark — CrowdStrike logo stacked over the Project QuiltWorks wordmark */
.pc__brandmark { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 13px; }
.pc__brandmark-logo { height: 20px; width: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)); }
.pc__brandmark-name { font-family: var(--font-sans); font-weight: 800; font-size: 22px; letter-spacing: -.015em; line-height: 1; color: var(--bone); text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.pc__badge { display: block; height: 52px; width: auto; margin: 4px 0 2px; filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.pc__badges { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 6px 0 2px; }
.pc__badges .pc__badge { height: 46px; margin: 0; }
/* ACES brand lockup — oversized cursive "Our ACES" watermark on the 7th-floor hero */
.aces-lockup { position: absolute; z-index: 5; top: 17%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.aces-word { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(64px, 10vw, 168px); line-height: .92; letter-spacing: 0; color: var(--bone); opacity: .58; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: no-preference) { .scene[data-active="true"] .aces-lockup { animation: pcBrandIn .8s var(--ease-out) .15s both; } }
.pc__brandmark--center { position: absolute; z-index: 7; top: 44%; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; gap: 13px; margin: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .pc__brandmark--center { animation: pcBrandIn .75s var(--ease-out) .1s both; } }
.pc__brandmark--center .pc__brandmark-logo { height: 30px; }
.pc__brandmark--center .pc__brandmark-name { font-size: 40px; }
.pc__brandmark--out { position: absolute; z-index: 7; left: 50%; top: 33%; transform: translateX(-50%); align-items: center; text-align: center; gap: 10px; margin: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .pc__brandmark--out { animation: pcRiseBottom .7s var(--ease-out) .1s both; } }
.pc__brandmark--out .pc__brandmark-logo { height: 28px; }
.pc__brandmark--out .pc__brandmark-name { font-size: 32px; }
/* Board Room (Vanessa) — bottom-anchor the room card to the brass-plate line so it clears the painting */
.scene[data-screen-label="The alarm"] .scene__pcard { top: auto; bottom: 7vh; transform: translateY(14px); }
.scene[data-screen-label="The alarm"][data-active="true"] .scene__pcard { transform: translateY(0); }

/* The conversation (Kelly) — enlarge & drop the Our-method panel so it clears her */
.scene[data-screen-label="The conversation"] .scene__pcard--right.scene__pcard--sz-lg { width: min(660px, 92vw); padding: 42px 48px 48px; top: 62%; }
.scene[data-screen-label="The conversation"] .scene__pcard--right.scene__pcard--sz-lg .pc__title { font-size: clamp(2.3rem, 3.4vw, 3.1rem); }
.scene[data-screen-label="The conversation"] .scene__pcard--right.scene__pcard--sz-lg .pc__lead { font-size: 16.5px; }

/* The watch · pen-testing panel — make the CREST crest a prominent emblem on the
   right, and lower/lengthen the panel so it clears the illustration. */
.scene[data-screen-label="The watch"] .scene__pcard--right {
  top: 56%; max-height: 88vh; padding-right: 208px;
}
.scene[data-screen-label="The watch"][data-active="true"] .scene__pcard--right { transform: translateY(-50%); }
/* The watch · SOC panel (swipe-right room) — float it across the top-centre,
   wider and clear of the analysts seated below so it never covers a face. */
.scene[data-screen-label="The watch"] .scene__pcard--left {
  left: 50%; right: auto; top: 3vh; bottom: auto; margin: 0;
  width: min(980px, 94vw); max-height: 60vh; padding: 30px 48px 34px;
  transform: translate(-50%, 14px);
}
.scene[data-screen-label="The watch"][data-active="true"] .scene__pcard--left { transform: translateX(-50%); }
.scene[data-screen-label="The watch"] .scene__pcard--left .pc__title { font-size: clamp(2rem, 3vw, 2.9rem); margin-bottom: 10px; }
.scene[data-screen-label="The watch"] .scene__pcard--left .pc__lead { max-width: 64ch; }
.scene[data-screen-label="The watch"] .scene__pcard--right .pc__badges {
  position: absolute; top: 50%; right: 40px; transform: translateY(-50%);
  width: 152px; margin: 0; justify-content: center;
}
.scene[data-screen-label="The watch"] .scene__pcard--right .pc__badges::before {
  content: ""; position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 1.5px; height: 64%; background: rgba(214,181,102,.32);
}
.scene[data-screen-label="The watch"] .scene__pcard--right .pc__badge {
  height: 154px; filter: drop-shadow(0 6px 22px rgba(0,0,0,.6));
}
@media (max-width: 980px) {
  .scene[data-screen-label="The watch"] .scene__pcard--right { padding-right: 52px; }
  .scene[data-screen-label="The watch"] .scene__pcard--right .pc__badges {
    position: static; transform: none; width: auto; justify-content: flex-start; margin: 6px 0 2px;
  }
  .scene[data-screen-label="The watch"] .scene__pcard--right .pc__badges::before { display: none; }
  .scene[data-screen-label="The watch"] .scene__pcard--right .pc__badge { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__pano, .scene__pcard { transition: none !important; }
  .scene__pano--c { animation: none !important; }
}

/* ============================================================
   EASTER EGG  ·  the lucky cat → a hidden house secret.
   ============================================================ */
.scene__egg { position: absolute; z-index: 7; width: 64px; height: 64px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.scene__egg-ring { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(214,181,102,.5), 0 0 18px 3px rgba(214,181,102,.32); }
@media (prefers-reduced-motion: no-preference) {
  .scene__egg-ring { animation: st-egg-pulse 2.8s var(--ease-inout) infinite; }
}
@keyframes st-egg-pulse { 0%, 100% { opacity: .28; transform: scale(.86); } 50% { opacity: .85; transform: scale(1.05); } }
.scene__egg:hover .scene__egg-ring, .scene__egg:focus-visible .scene__egg-ring { animation: none; opacity: 1; box-shadow: 0 0 0 2px var(--gold-300), 0 0 28px 5px rgba(214,181,102,.6); }
.scene__egg-hint { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-1000); background: var(--gold-300); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-coin); padding: 5px 11px; opacity: 0; pointer-events: none; box-shadow: var(--shadow-sm); transition: opacity .2s var(--ease-out); }
.scene__egg:hover .scene__egg-hint, .scene__egg:focus-visible .scene__egg-hint { opacity: 1; }

.scene__secret { position: absolute; inset: 0; z-index: 50; overflow: hidden; cursor: pointer; }
.scene__secret-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 42%; transform: scale(1.0); }
.scene__secret-veil { position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(6,5,4,.88) 0%, rgba(6,5,4,.4) 30%, rgba(6,5,4,.04) 54%, transparent 72%),
  radial-gradient(130% 100% at 72% 36%, transparent 46%, rgba(6,5,4,.42)); }
@media (prefers-reduced-motion: no-preference) {
  .scene__secret { animation: st-fade-in .35s var(--ease-out); }
  .scene__secret-img { animation: st-secret-push 6s var(--ease-out) forwards; }
}
@keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-secret-push { from { transform: scale(1.085); } to { transform: scale(1.0); } }
.scene__secret-close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(12,10,8,.62); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border: 1px solid rgba(214,181,102,.45); border-radius: var(--radius-sm); color: var(--bone-dim); font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.scene__secret-close:hover { background: rgba(12,10,8,.85); color: var(--bone); }
.scene__secret-hint { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim, rgba(251,246,234,.62)); pointer-events: none; animation: secret-hint-pulse 2.6s var(--ease-inout) infinite; }
@keyframes secret-hint-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .scene__secret-hint { animation: none; opacity: .55; } }
@media (max-width: 520px) { .scene__secret-hint { font-size: 9px; letter-spacing: .14em; max-width: 84vw; text-align: center; } }
.scene__secret-caption { position: absolute; z-index: 2; left: 6vw; right: 6vw; bottom: 8vh; max-width: 600px; }
.scene__secret-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 14px; }
.scene__secret-eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--gold-500); }
.scene__secret-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.0; color: var(--bone); margin: 0 0 16px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.scene__secret-title em { font-style: italic; color: var(--gold-300); }
.scene__secret-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.62; color: var(--ink-100); margin: 0 0 20px; max-width: 48ch; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.scene__secret-sign { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--red-300); }
.scene__secret-cobrand { display: flex; align-items: center; gap: 22px; margin: 6px 0 4px; }
.scene__secret-cs { height: 30px; width: auto; display: block; filter: drop-shadow(0 3px 14px rgba(0,0,0,.55)); }
.scene__secret-cs--strike { height: 22px; }
.scene__secret-cobrand-div { flex: 0 0 auto; width: 1px; height: 28px; background: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: no-preference) {
  .scene__secret-caption > * { opacity: 0; animation: st-cap-in .7s var(--ease-out) forwards; }
  .scene__secret-caption > *:nth-child(1) { animation-delay: .28s; }
  .scene__secret-caption > *:nth-child(2) { animation-delay: .4s; }
  .scene__secret-caption > *:nth-child(3) { animation-delay: .52s; }
  .scene__secret-caption > *:nth-child(4) { animation-delay: .64s; }
}
@keyframes st-cap-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================
   INDUSTRY drill-down — clickable sector list (the compliance pcard)
   ============================================================ */
/* The alarm (Vanessa) — centre the compliance picker on the right, regal & tightened */
.scene[data-screen-label="The alarm"] .scene__pcard--right {
  top: 50%; bottom: auto; left: auto; right: 3vw; width: min(520px, 40vw);
  padding: 26px 34px 28px; transform: translate(0, calc(-50% + 14px)); text-align: center; }
.scene[data-screen-label="The alarm"][data-active="true"] .scene__pcard--right { transform: translateY(-50%); }
.scene[data-screen-label="The alarm"] .scene__pcard--right .pc__eyebrow { justify-content: center; margin-bottom: 10px; }
.scene[data-screen-label="The alarm"] .scene__pcard--right .pc__title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.02; margin-bottom: 6px; }
.scene[data-screen-label="The alarm"] .scene__pcard--right .pc__lead { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }

/* sector picker — compact gilt plaques that fit the panel with no scroll */
.pc__list--links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc__list--links li { margin: 0; padding: 0; border: 0; }
.pc__list--links li:last-child { border-bottom: 0; }
.pc__list--links li::before { display: none; content: none; }
.pc__linkrow { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer; text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .015em; line-height: 1.2;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(214,181,102,.10), rgba(214,181,102,.03));
  border: 1px solid rgba(214,181,102,.38); border-radius: 5px;
  padding: 13px 11px 12px;
  transition: color .15s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out); }
.pc__linkrow:hover { color: #fff; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--red-500); border-color: var(--gold-400);
  background: linear-gradient(180deg, rgba(214,181,102,.17), rgba(214,181,102,.05)); }
.pc__linkrow-l { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
/* medallion = the house gilt coin face (same as the Seal / primary button), icon in ink */
.pc__linkrow-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-coin, 999px);
  border: 1px solid var(--gold-600); background: var(--gilt-face);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5), 0 2px 5px rgba(20,17,12,.35);
  color: var(--ink-1000); transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.pc__linkrow:hover .pc__linkrow-ico { background: linear-gradient(150deg, var(--gold-100), var(--gold-300) 45%, var(--gold-500) 100%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6), 0 3px 8px rgba(20,17,12,.4); }
.pc__linkrow-arrow { display: none; }

/* dossier scroll cue — signals there's more below the fold */
.idsr__more { position: sticky; bottom: 0; z-index: 2; margin: 0 -56px -44px; padding: 40px 56px 16px;
  display: flex; justify-content: center; pointer-events: none;
  background: linear-gradient(to top, var(--paper-100) 34%, rgba(246,240,226,0)); }
.idsr__more span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.idsr__more-chev { font-family: var(--font-sans); font-size: 14px; color: var(--red-500); }
@media (prefers-reduced-motion: no-preference) { .idsr__more-chev { animation: idsr-bob 1.5s var(--ease-inout) infinite; } }
@keyframes idsr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 860px) { .idsr__more { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; } }

/* ============================================================
   INDUSTRY dossier — the full-page sector decision page (Direction B)
   ============================================================ */
.idsr { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--paper-100); color: var(--ink-900); font-family: var(--font-sans); }
.idsr::before { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: var(--halftone-size); opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .idsr { animation: idsr-in .42s var(--ease-out); } }
@keyframes idsr-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.idsr__head { position: relative; z-index: 1; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 56px; }
.idsr__head-l { display: flex; align-items: center; gap: 22px; min-width: 0; }
.idsr__back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-700); white-space: nowrap; }
.idsr__back:hover { color: var(--red-600); }
.idsr__crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idsr__crumb strong { color: var(--ink-900); }
.idsr__next { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--red-600); white-space: nowrap; }
.idsr__next:hover { color: var(--red-500); }

.idsr__body { position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 56px 44px; }
.idsr__hero { max-width: 880px; margin: 0 0 38px; }
.idsr__eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-500); margin-bottom: 16px; }
.idsr__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red-500); }
.idsr__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(2.6rem, 5vw, 4rem); margin: 0 0 18px; }
.idsr__title em { font-style: italic; color: var(--red-500); }
.idsr__intro { font-size: 18px; line-height: 1.55; max-width: 660px; color: var(--ink-700); margin: 0; }

.idsr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1100px; }
.idsr__colhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red-600); margin-bottom: 16px; }
.idsr__reg { background: var(--paper-0); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink-sm); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 14px; }
.idsr__reg-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.1; }
.idsr__reg-note { font-size: 14px; color: var(--ink-600); margin-top: 3px; }
.idsr__svc { display: flex; gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line-default); }
.idsr__svc:first-of-type { border-top: 0; padding-top: 4px; }
.idsr__svc-no { font-family: var(--font-mono); font-size: 11px; opacity: .5; flex: 0 0 26px; }
.idsr__svc-name { font-weight: 700; }
.idsr__svc-note { font-size: 13.5px; color: var(--ink-600); margin-top: 1px; }
.idsr__proof { display: flex; gap: 16px; align-items: center; margin-top: 24px; background: var(--paper-200); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink); border-radius: var(--radius-md); padding: 18px 20px; }
.idsr__seal { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(150deg, var(--gold-200), var(--gold-500)); color: var(--ink-1000); font-family: var(--font-display); font-weight: 700; font-size: 22px; box-shadow: inset 0 0 0 1.5px rgba(74,56,15,.45); }
.idsr__proof-stat { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--red-600); }
.idsr__proof-line { font-size: 13.5px; color: var(--ink-700); margin-top: 4px; }

.idsr__cta { position: relative; z-index: 1; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 56px; background: var(--ink-1000); }
.idsr__cta-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--bone); }
.idsr__cta-sub { font-size: 13px; color: rgba(251,246,234,.6); margin-top: 3px; }
.idsr__cta-actions { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
.idsr__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 26px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.idsr__btn--crimson { background: var(--red-500); color: var(--bone); border-color: var(--red-600); box-shadow: 3px 3px 0 0 #000; }
.idsr__btn--crimson:hover { background: var(--red-600); }
.idsr__btn--gold { background: transparent; color: var(--gold-300); border-color: var(--gold-400); }
.idsr__btn--gold:hover { background: rgba(200,162,74,.12); }

@media (max-width: 860px) {
  .idsr__head, .idsr__body, .idsr__cta { padding-left: 22px; padding-right: 22px; }
  .idsr__cols { grid-template-columns: 1fr; gap: 32px; }
  .idsr__head-l { gap: 14px; }
  .idsr__crumb { display: none; }
  .idsr__cta { flex-direction: column; align-items: flex-start; }
  .idsr__cta-actions { width: 100%; }
  .idsr__btn { flex: 1; padding: 14px 16px; }
}


/* ============================================================
   INDUSTRY dossier V2 — segmented hub + deeper pages (fixed overlay)
   ============================================================ */
.flw { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--paper-100); color: var(--ink-900); font-family: var(--font-sans); }
/* Match the *dynamic* (currently-visible) viewport so the fixed CTA footer and the
   bottom of the scrolling body stay above the browser's collapsible toolbar on
   mobile. inset:0 (== 100vh, the large viewport) is kept as the pre-dvh fallback. */
@supports (height: 100dvh) { .flw { bottom: auto; height: 100dvh; } }
.flw::before { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: var(--halftone-size); opacity: .45; pointer-events: none; }
.flw > * { position: relative; }
@media (prefers-reduced-motion: no-preference) { .flw { animation: idsr-in .4s var(--ease-out); } }

.flw-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 44px; flex: 0 0 auto; }
.flw-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-700); }
.flw-back:hover { color: var(--red-600); }
.flw-crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.flw-crumb b { color: var(--ink-900); }
/* breadcrumb segments are real back-links (click to step back one level) */
.flw-crumb-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-500); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; border-bottom: 1px dotted transparent; }
.flw-crumb-link:hover { color: var(--red-600); border-bottom-color: currentColor; }
.flw-crumb-sep { color: var(--ink-400); }
.flw-head-logo { height: 40px; width: auto; display: block; flex: 0 0 auto; }

.flw-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 6px 44px 20px; min-height: 0; overflow-y: auto; }
.flw-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-500); margin-bottom: 14px; }
.flw-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red-500); }
.flw-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.0; font-size: 56px; margin: 0 0 14px; }
.flw-title em { font-style: italic; color: var(--red-500); }
.flw-intro { font-size: 17px; line-height: 1.5; max-width: 640px; color: var(--ink-700); margin: 0 0 22px; }
.flw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-content: start; }
.flw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr); gap: 44px; align-items: stretch; flex: 0 0 auto; min-height: 0; }
.flw-rows { display: flex; flex-direction: column; min-width: 0; align-content: start; }
.flw-rows .flw-row { align-items: flex-start; }
.flw-rows .flw-row-name, .flw-rows .flw-row-note { white-space: normal; }
.flw-rows .flw-row-arrow { margin-top: 5px; }
.flw-shot { position: relative; border: 1.5px solid var(--ink-1000); border-radius: 8px; overflow: hidden; box-shadow: 4px 4px 0 0 rgba(12, 10, 8, .12); background: var(--paper-200); min-height: 220px; }
.flw-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flw-shot-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.flw-shot-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); }
.flw-shot-h { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink-500); }
.flw-deepcols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; flex: 1 1 auto; }

.flw-seg { display: inline-flex; gap: 4px; background: var(--paper-200); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-md); padding: 4px; margin-bottom: 22px; align-self: flex-start; }
.flw-seg button { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 18px; border: 0; border-radius: 2px; background: transparent; color: var(--ink-600); cursor: pointer; }
.flw-seg button[data-on="1"] { background: var(--ink-1000); color: var(--bone); }

.flw-colhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red-600); margin-bottom: 8px; }
.flw-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--line-default); padding: 13px 2px; font: inherit; transition: padding-left .16s, color .16s; }
.flw-row:hover { padding-left: 8px; color: var(--red-600); }
.flw-row--static, .flw-row--static:hover { cursor: default; padding-left: 2px; color: inherit; }
.flw-row-l { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.flw-pip { flex: 0 0 auto; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); margin-right: 12px; }
.flw-row-tx { min-width: 0; display: flex; flex-direction: column; }
.flw-row-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; white-space: nowrap; }
.flw-row-note { font-size: 12.5px; color: var(--ink-600); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flw-row-arrow { flex: 0 0 auto; color: var(--gold-600); font-size: 16px; }

.flw-seal { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(150deg, var(--gold-200), var(--gold-500)); color: var(--ink-1000); font-family: var(--font-display); font-weight: 700; font-size: 20px; }

.flw-incl { display: flex; flex-direction: column; }
.flw-incl div { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-default); font-size: 15px; }
.flw-incl .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); flex: 0 0 24px; }
.flw-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-800); background: var(--gold-100); border: 1px solid var(--line-gold); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.flw-certs { display: flex; gap: 14px; flex-wrap: wrap; }
.flw-cert { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 102px; height: 102px; border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink-sm); border-radius: var(--radius-md); background: var(--paper-0); }
.flw-cert-badge { width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--gold-600); display: grid; place-items: center; color: var(--gold-700); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.flw-cert-name { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-700); text-align: center; line-height: 1.2; }
.flw-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong, rgba(20,17,12,.16)); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-500); text-wrap: pretty; }
.flw-grants { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.flw-grant { display: flex; gap: 18px; align-items: center; background: var(--paper-200); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink-sm); border-radius: var(--radius-md); padding: 16px 20px; }
.flw-grant-figure { flex: 0 0 auto; min-width: 108px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--red-600); }
.flw-grant-tx { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-700); }
.flw-grant-line { font-size: 13.5px; color: var(--ink-600); }
@media (max-width: 640px) { .flw-grant { flex-direction: column; align-items: flex-start; gap: 6px; } .flw-grant-figure { min-width: 0; } }
.flw-faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 680px; margin: 0 0 26px; background: var(--red-500); border: 1.5px solid var(--red-700); box-shadow: 3px 3px 0 0 #000; border-radius: var(--radius-md); padding: 15px 20px; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--bone); transition: background .2s var(--ease-out); }
.flw-faq-cta:hover { background: var(--red-600); }
.flw-faq-cta strong { color: var(--bone); }
.flw-faq-cta-tx { flex: 1 1 auto; }
.flw-faq-cta-arrow { flex: 0 0 auto; font-size: 18px; color: var(--bone); transition: transform .2s var(--ease-out); }
.flw-faq-cta:hover .flw-faq-cta-arrow { transform: translateX(3px); }
@media (max-width: 640px) { .flw-faq-cta { flex-direction: column; align-items: flex-start; gap: 8px; } }
.flw-faq-list { display: flex; flex-direction: column; }
.flw-faq-item { border-top: 1px solid var(--line-default); }
.flw-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; background: none; border: 0; cursor: pointer; padding: 14px 2px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink-900); }
.flw-faq-q:hover { color: var(--red-600); }
.flw-faq-chev { flex: 0 0 auto; font-size: 16px; color: var(--gold-600); transform: rotate(90deg); transition: transform .2s var(--ease-out); }
.flw-faq-chev.is-open { transform: rotate(-90deg); }
.flw-faq-a { margin: 0 0 16px; padding-right: 28px; font-size: 14px; line-height: 1.6; color: var(--ink-700); }
.flw-prod-mark { width: 96px; height: 96px; border-radius: var(--radius-md); background: var(--ink-1000); color: var(--bone); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 48px; box-shadow: var(--shadow-ink); flex: 0 0 auto; }
.flw-prod-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }

.flw-clients { flex: 0 0 auto; padding: 14px 44px 16px; border-top: 1px solid var(--line-default); overflow: hidden; }
.flw-clients-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.flw-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.flw-track { display: flex; gap: 40px; width: max-content; opacity: .3; animation: flw-scroll 28s linear infinite; }
@keyframes flw-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .flw-track { animation: none; } }
.flw-clogo { flex: 0 0 auto; height: 32px; width: 118px; display: grid; place-items: center; border: 1.5px solid var(--ink-900); border-radius: 4px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-900); }
.flw-track--logos { opacity: 1; gap: 56px; align-items: center; }
.flw-clogo--img { height: 64px; width: 168px; padding: 10px 16px; background: #fff; border-color: var(--ink-900); }
.flw-clogo--img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.flw-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 40px; padding: 2px 0; }
.flw-logo { width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) opacity(.85); mix-blend-mode: multiply; }

.flw-cta { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 44px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--ink-1000); }
.flw-cta-tx { max-width: 58%; }
.flw-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--bone); margin-bottom: 3px; }
.flw-cta-sub { font-size: 12px; color: rgba(251,246,234,.62); }
.flw-actions { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
.flw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; padding: 13px 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.flw-btn--crimson { background: var(--red-500); color: var(--bone); border-color: var(--red-600); box-shadow: 3px 3px 0 0 #000; }
.flw-btn--gold { background: transparent; color: var(--gold-300); border-color: var(--gold-400); }
.flw-btn--wa { background: #25d366; color: var(--ink-1000); border-color: #0f7a45; box-shadow: 3px 3px 0 0 #000; }
.flw-btn--wa:hover { background: #22c15e; }

@media (max-width: 860px) {
  .flw-head, .flw-body, .flw-cta, .flw-clients { padding-left: 22px; padding-right: 22px; }
  .flw-2col, .flw-deepcols { grid-template-columns: 1fr; gap: 0; }
  .flw-split { grid-template-columns: 1fr; gap: 24px; }
  .flw-shot { min-height: 200px; }
  .flw-title { font-size: clamp(2rem, 6vw, 38px); }
  .flw-cta { flex-direction: column; align-items: stretch; }
  .flw-cta-tx { max-width: 100%; }
  .flw-crumb { display: none; }
  /* footer actions: fill the width and share the row so long labels (e.g. "Apply
     for grant") can't spill past the viewport edge */
  .flw-actions { width: 100%; flex-wrap: wrap; }
  .flw-btn { flex: 1 1 auto; justify-content: center; padding: 14px 14px; }
}
@media (max-width: 480px) {
  .flw-actions { flex-direction: column; align-items: stretch; }
  .flw-btn { width: 100%; }
}

/* --- Obligations tab: box each obligation (fills the empty space) --- */
.flw-2col--boxed { grid-template-columns: 1fr 1fr; gap: 14px; }
.flw-2col--boxed .flw-row, .flw-2col--boxed .flw-row--static { border: 1.5px solid var(--line-strong, rgba(20,17,12,.16)); border-radius: 8px; padding: 16px 18px; background: var(--paper-0); box-shadow: var(--shadow-ink-sm); align-items: flex-start; }
.flw-2col--boxed .flw-row-name { white-space: normal; font-size: 18px; line-height: 1.3; }
.flw-2col--boxed .flw-row-note { white-space: normal; overflow: visible; text-overflow: clip; margin-top: 6px; line-height: 1.5; font-size: 13.5px; color: var(--ink-700); }
.flw-2col--boxed .flw-pip { margin-top: 7px; }
.flw-2col--boxed .flw-row:last-child:nth-child(odd),
.flw-2col--boxed .flw-row--static:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .flw-2col--boxed { grid-template-columns: 1fr; } }

/* Sector responsibilities: a couple of bigger, single-column boxes */
.flw-2col--big { grid-template-columns: 1fr; gap: 16px; max-width: 760px; }
.flw-2col--big .flw-row, .flw-2col--big .flw-row--static { padding: 24px 28px; }
.flw-2col--big .flw-row-name { font-size: 23px; line-height: 1.3; }
.flw-2col--big .flw-row-note { font-size: 14.5px; margin-top: 8px; }
.flw-2col--big .flw-pip { margin-top: 9px; }

/* ============================================================
   RESPONSIVE SYSTEM  ·  canonical breakpoints
   ------------------------------------------------------------
   Mobile-first tiers used across story.css / aces-dossiers.css / funding.css:
     ≤ 480px   small phone      (extra type/target tightening)
     ≤ 768px   phone / portrait tablet  (bottom-sheet layout — main block above)
     ≤ 1024px  landscape tablet (dossier/tour grids collapse; existing 860/960 rules)
     ≥ 1025px  desktop          (full cinematic edge-anchored layout)
   Orthogonal:  (max-height:…) short screens · (hover:none) touch devices.
   CSS can't use custom props in @media conditions, so the values are literal
   but applied consistently. Keep new rules on these numbers.
   ============================================================ */

/* ---- small phone (≤480): reclaim width, cap display type ---- */
@media (max-width: 480px) {
  .st__help-toggle .st__nav-toggle-tx { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Guide → icon-only, label kept for a11y */
  .st__help-toggle { padding: 11px; }
  .scene__pcard { width: 92vw !important; padding: 20px 18px 22px !important; }
  .pc__proof-white { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .pc__list--links { grid-template-columns: 1fr; }
  .rm__stats { grid-template-columns: 1fr; }
  .scene__cta-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  /* let the disabled CTA wrap so its honest "Opening soon" chip never clips */
  .scene__cta-row .cs-btn { white-space: normal; flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-left: 16px; padding-right: 16px; }
  .flw-title, .idsr__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .pc__brandlock-x { font-size: clamp(26px, 7vw, 40px); }
  .pc__brandlock-cs { height: 46px; }
  .pc__brandlock-strike { height: 32px; }
  .aces-word { font-size: clamp(48px, 15vw, 96px); }
}

/* ---- short / landscape viewports: keep the bottom sheet on-screen ---- */
@media (max-height: 520px) {
  .scene__pcard { bottom: 6vh !important; max-height: 84dvh !important; padding: 16px 20px 18px !important; }
  .scene__pcard--stepped { bottom: 8vh !important; max-height: 74dvh !important; }
  .scene__pcard .pc__title { font-size: clamp(1.5rem, 4vh, 2rem); margin-bottom: 8px; }
  .scene__pcard .pc__lead { font-size: 14px; margin-bottom: 12px; }
  .st__coach-card { padding: 20px 24px; max-height: 86dvh; overflow-y: auto; }
}
/* landscape phones (short + not-wide): recentre the card so it isn't pinned to a
   desktop edge and clipped. Gated by max-width so short *desktop* windows keep the
   cinematic edge layout. */
@media (max-height: 520px) and (max-width: 950px) {
  .scene__pcard { left: 50% !important; right: auto !important; margin: 0 !important; top: auto !important;
    width: min(560px, 88vw) !important; transform: translate(-50%, 14px) !important; }
  .scene[data-active="true"] .scene__pcard { transform: translateX(-50%) !important; }
}

/* ---- touch devices: no sticky :hover states after a tap ---- */
@media (hover: none) {
  /* Secret rooms off on touch: the egg hotspots are tiny, precisely-placed targets that
     are fiddly to tap. Hiding the hotspot (its only trigger) makes .scene__secret
     unreachable — no JS change needed. Kept on desktop (hover-capable). */
  .scene__egg { display: none; }
  /* …and drop the coachmark's "six hidden rooms" line, since there are none here */
  .st__coach-reassure--hint { display: none; }
  .st__door--right:hover, .st__door--left:hover, .st__door--soon:hover { transform: translateY(-50%); }
  .st__dot:hover .st__dot-label { opacity: 0; transform: translateX(6px); }
  .pc__linkrow:hover { transform: none; box-shadow: none; }
  .pc__btn--crimson:hover { transform: none; box-shadow: var(--shadow-ink-sm); }
  .pc__close:hover, .rm__close:hover { transform: none; }
  .flw-row:hover { padding-left: 2px; }
}

/* Sector-responsibilities / how-we-help layout: boxes left, one persistent case study right */
.flw-sector-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.4fr); gap: 40px; align-items: start; }
.flw-sector-main { min-width: 0; }
@media (max-width: 900px) { .flw-sector-grid { grid-template-columns: 1fr; } .flw-spotlight { height: auto; aspect-ratio: 4 / 3; } }

/* Per-industry sidebar image (replaces the case-study card while that's on hold) */
/* hold the illustration's natural 4:3 proportion so the whole panel shows (no wide crop/stretch) */
.flw-spotlight { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 600px; object-fit: cover; border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink); border-radius: var(--radius-md); }
.flw-spotlight--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background-color: var(--paper-200); background-image: var(--halftone); background-size: var(--halftone-size); font-family: var(--font-sans); font-size: 13px; color: var(--ink-500); }
.flw-spotlight-hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); word-break: break-all; }

/* Service deep-page hero image (alongside the eyebrow/title/intro block) */
/* service deep page: a vertically-centred feature split — content left, large hero
   image right. `margin: auto 0` centres the whole block in the body so short and long
   pages both read as intentional (no dumped bottom void). */
.flw-service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); gap: 56px; align-items: center; margin: auto 0; width: 100%; }
.flw-service-grid--noimg { grid-template-columns: minmax(0, 860px); align-items: start; margin: 8px 0 auto; }
.flw-service-main { min-width: 0; }
.flw-service-aside { min-width: 0; }
.flw-service-title { font-size: clamp(1.9rem, 3.1vw, 2.55rem); line-height: 1.1; margin-bottom: 14px; }
.flw-service-hero { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 68vh; object-fit: cover; border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink); border-radius: var(--radius-md); }
@media (max-width: 860px) { .flw-service-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; margin: 8px 0; } }

/* Case-study proof card */
.flw-proof { display: flex; flex-direction: column; gap: 14px; background: var(--paper-200); border: 1.5px solid var(--ink-1000); box-shadow: var(--shadow-ink); border-radius: var(--radius-md); padding: 22px 26px; }
.flw-proof-kicker { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-600); padding-bottom: 12px; border-bottom: 1px solid var(--line-default); }
.flw-proof-row { display: flex; flex-direction: column; gap: 4px; }
.flw-proof-lbl { flex: none; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.flw-proof-tx { font-size: 14px; line-height: 1.5; color: var(--ink-700); }
.flw-proof-row--outcome { flex-direction: row; align-items: center; gap: 18px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line-default); }
.flw-proof-row--outcome .flw-proof-tx { font-weight: 600; color: var(--ink-900); }
.flw-proof-stat { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--red-600); }

/* ============================================================================
   Media floor — press-wall backdrop (2026-07-17). A dimmed collage of the
   Media & Insights coverage thumbnails; placeholder identity for the floor
   until dedicated art arrives. Rendered by MediaWall in Story.jsx.
   ========================================================================= */
.scene__mediawall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 4px; background: #0b0b0d; }
.scene__mediawall-cell { background-size: cover; background-position: center; filter: grayscale(.72) sepia(.24) brightness(.4) contrast(1.06); }
@media (max-width: 768px) {
  .scene__mediawall { grid-template-columns: repeat(2, 1fr); }
  .scene__mediawall-cell:nth-child(n+9) { display: none; }
}

/* ============================================================================
   Sitemap floor — building directory under the closing CTA (2026-07-17).
   Rendered by CtaScene in Story.jsx. Rooms are real anchors (crawlable),
   intercepted in-app; floors are buttons (no URLs by design).
   ========================================================================= */
.scene__cta-dir { display: grid; grid-template-columns: auto auto; gap: 8px 72px; margin-top: 14px; padding-top: 22px; border-top: 1px solid rgba(244, 239, 229, .14); text-align: left; }
.scene__cta-dir-col { display: flex; flex-direction: column; gap: 1px; min-width: 220px; }
.scene__cta-dir-head { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-300); margin-bottom: 7px; }
.scene__cta-dir-row { display: flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 3px 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-200); text-decoration: none; cursor: pointer; text-align: left; }
button.scene__cta-dir-row:hover, a.scene__cta-dir-row:hover { color: var(--gold-300); }
.scene__cta-dir-row .n { color: var(--ink-500); font-size: 10px; letter-spacing: .06em; }
.scene__cta-dir-row--here { color: var(--ink-500); cursor: default; }
.scene__cta-dir-row--here em { font-style: italic; color: var(--gold-300); }
@media (max-width: 768px), (max-height: 760px) {
  .scene__cta { justify-content: flex-start; overflow-y: auto; padding-top: max(72px, env(safe-area-inset-top)); padding-bottom: max(36px, env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .scene__cta-dir { grid-template-columns: 1fr; gap: 20px; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   Mobile CTA slimming (2026-07-18, per Dave). On phones each .flw-cta footer
   keeps ONE primary button; secondary actions become slim text links
   (.flw-btn--mbLink) and redundant back buttons hide (.flw-btn--mbHide).
   Desktop is unchanged — both classes are inert above 768px.
   ========================================================================= */
@media (max-width: 768px) {
  .flw-btn--mbHide { display: none !important; }
  .flw-btn--mbLink { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; flex: 0 0 auto !important; align-self: center; padding: 8px 4px !important; font-size: 12px; color: var(--gold-300); text-transform: none; letter-spacing: .03em; text-decoration: underline; text-underline-offset: 3px; }
}

/* ============================================================================
   Mobile copy diet (2026-07-18, per Dave). Floor cards carry an optional
   one-line mobile body (bodyM in Story.jsx SCENES) shown ≤768px in place of
   the full paragraph; filler footer subs hide on phones. Desktop unchanged.
   ========================================================================= */
.scene__body--m { display: none; }
@media (max-width: 768px) {
  .scene__body--m { display: block; }
  /* a bodyM paragraph is always the LAST <p> in the card, so on phones any
     full body that isn't the last <p> has a short sibling replacing it */
  .scene__body--full:not(:last-of-type) { display: none; }
  .flw-cta-sub--mbHide { display: none !important; }
}

/* ============================================================
   MOBILE "SIMPLE READ" — the linear phone layout (Story.jsx MobileStory).
   A calm single column: contained illustration → headline → the floor's content
   INLINE → one clear CTA. Reuses pc__/scene__ text + button styles on the ink
   ground. Engaged only via the touch + small-screen JS branch, so it can't affect
   the desktop cinematic layout. Skill checklist: ≥44px targets, calm (no Ken
   Burns), 4.5:1 text, 150–300ms transitions, reduced-motion respected.
   ============================================================ */
.ms { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  background: var(--ink-1000); color: var(--bone); font-family: var(--font-sans); }

.ms-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: rgba(12,10,8,.9); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border-bottom: 1px solid rgba(214,181,102,.18); }
.ms-top .st__brand-logo { height: 26px; }
.ms-top .st__nav-toggle { min-height: 44px; }

.ms-floor { border-bottom: 1px solid rgba(214,181,102,.14); scroll-margin-top: 65px; } /* clear the sticky bar on menu jumps; matches .ms scroll-padding-top so jumps land on snap points */
.ms-hero { display: block; width: 100%; height: 54vh; max-height: 480px; object-fit: cover; background: var(--ink-900); }
.ms-body { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 36px; }
.ms-title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.05; margin: 0; }
.ms-lead { font-size: 16px; line-height: 1.62; margin: 0; color: var(--ink-100); }
.ms-subtitle { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; margin: 0; }

/* an inlined room (the formerly-hidden offer / proof), and the ACES journey list */
.ms-room, .ms-step { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.ms-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* one clear, full-width CTA per line */
.ms .pc__actions { flex-direction: column; align-items: stretch; }
.ms .pc__btn { width: 100%; justify-content: center; }
.ms .pc__title { color: var(--bone); }

/* final CTA floor: CtaScene is position:absolute by default — let it flow */
.ms-floor--cta .scene__cta { position: static; inset: auto; padding: 40px 20px 52px; gap: 20px; align-items: flex-start; text-align: left; }
.ms-floor--cta .scene__cta > * { opacity: 1 !important; transform: none !important; }
.ms-floor--cta .scene__cta-title { font-size: clamp(2rem, 9vw, 3rem); }
.ms-floor--cta .scene__cta-sub { max-width: none; }
.ms-floor--cta .scene__cta-row { flex-direction: column; align-items: stretch; width: 100%; }
.ms-floor--cta .scene__cta-row > .cs-btn { width: 100%; }
.ms-floor--cta .scene__cta-direct { flex-direction: column; gap: 6px; align-items: flex-start; }
.ms-floor--cta .scene__cta-dir { grid-template-columns: 1fr; gap: 22px; text-align: left; }

/* --- Mobile hero (welcome floor): full-viewport art, lockup + positioning line +
   one live CTA over a darkened lower third. Dave-approved 2026-07-19. --- */
.ms-hero-wrap { position: relative; height: calc(100vh - 64px); height: calc(100svh - 64px); }
.ms-hero--first { height: 100%; max-height: none; }
.ms-hero-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,8,6,.16) 0%, rgba(10,8,6,0) 26%, rgba(10,8,6,.05) 48%, rgba(10,8,6,.78) 74%, rgba(10,8,6,.96) 100%); }
.ms-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 0 20px calc(18px + env(safe-area-inset-bottom)); }
.ms-hero-logo { width: min(230px, 62vw); align-self: flex-start; }
.ms-hero-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-400, #d6b566); }
.ms-hero-line { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--bone, #fbf6ea); max-width: 34ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.ms-hero-overlay .pc__actions { margin-top: 2px; }
.ms-hero-cue { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(251,246,234,.62); }
.ms-hero-cue-m { width: 1px; height: 22px; background: linear-gradient(to bottom, var(--gold-400, #d6b566), transparent); animation: msCue 1.8s ease-in-out infinite; }
@keyframes msCue { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* --- Section covers: every floor opens on a full-viewport art card that gently
   snaps ("locks") to the screen; the floor's content flows below it. --- */
.ms { scroll-snap-type: y mandatory; scroll-padding-top: 65px; } /* hard lock — proximity was imperceptible on real phones (Dave) */
/* MOBILE-UX-HANDOFF P3 (Dave-approved): covers no longer take the full viewport —
   the top of the body peeks below and signals "keep going". Welcome hero unchanged. */
.ms-cover { position: relative; height: min(68vh, 560px); height: min(68svh, 560px); scroll-snap-align: start; scroll-snap-stop: always; }
.ms-cover-img { height: 100%; max-height: none; }
.ms-cover-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 0 20px calc(16px + env(safe-area-inset-bottom)); }
.ms-cover-overlay .ms-title, .ms-cover-overlay .ms-lead { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.ms-hero-wrap { scroll-snap-align: start; scroll-snap-stop: always; }
.ms-floor--cta { scroll-snap-align: start; }

/* "Paged floors": the content of each floor is its own snap stop too — cover →
   content → next cover. Without these, mandatory snapping made any body shorter
   than a viewport unreachable (it always yanked to the nearest cover). Content
   stops deliberately have NO snap-stop:always: a big fling still skips to the
   next floor's cover; a gentle scroll rests on the content. */
.ms-body { scroll-snap-align: start; }
.ms-snap-end { scroll-snap-align: end; height: 1px; margin-top: -1px; }
.ms-cover-cta { margin-top: 4px; }

/* Media floor cover: the media wall stands in for floor art until Dave's imagery lands (P2) */
.ms-cover--media { overflow: hidden; background: var(--ink-1000); }
.ms-cover--media .scene__mediawall { position: absolute; inset: 0; }
.ms-cover--media .ms-hero-veil { background: linear-gradient(to bottom, rgba(10,8,6,.34) 0%, rgba(10,8,6,.22) 34%, rgba(10,8,6,.86) 68%, rgba(10,8,6,.97) 100%); }

/* Hero quick-actions: 2–3 fast doors under the primary CTA (P3, Dave-approved labels) */
.ms-hero-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-hero-quick > * { flex: 1 1 auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px; background: rgba(12,10,8,.55); border: 1px solid rgba(214,181,102,.45); border-radius: 999px;
  color: var(--bone, #fbf6ea); font-family: var(--font-sans); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; }

/* Sitemap floor: the floor directory duplicates the Menu on phones — hidden visually,
   kept in the DOM (crawlable AEO anchors stay). Contact block remains. (P3) */
.ms-floor--cta .scene__cta-dir { display: none; }

/* Short phones: the cover must always fit eyebrow + title + line + button. */
@media (max-height: 700px) {
  .ms-cover-overlay, .ms-hero-overlay { gap: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ms-cover-overlay .ms-hero-cue, .ms-hero-overlay .ms-hero-cue { display: none; }
  .ms-cover-overlay .ms-title { font-size: clamp(1.55rem, 6.8vw, 1.95rem); }
  .ms-hero-logo { width: min(190px, 54vw); }
}

/* --- The eight-step ACES journey (QR landing): horizontal swipe carousel,
   one image per activity, tap a card → its dossier. --- */
.ms-journey { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.ms-journey-hint { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(251,246,234,.62); }
.ms-tour { list-style: none; display: flex; gap: 12px; margin: 4px -20px 0; padding: 2px 20px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.ms-tour::-webkit-scrollbar { display: none; }
.ms-tour-item { flex: 0 0 auto; }
.ms-tour-card { display: flex; flex-direction: column; width: min(78vw, 330px); scroll-snap-align: center;
  background: rgba(255,255,255,.045); border: 1px solid rgba(214,181,102,.28); border-radius: 10px; overflow: hidden;
  padding: 0; cursor: pointer; text-align: left; }
.ms-tour-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ink-900); }
.ms-tour-tx { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px calc(14px + 2px); }
.ms-tour-no { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--gold-400, #d6b566); }
.ms-tour-t { font-family: var(--font-sans); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--bone, #fbf6ea); }
.ms-tour-lead { font-size: 13.5px; line-height: 1.5; color: var(--ink-100, #cfc8ba);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-tour-link { margin-top: 3px; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--gold-400, #d6b566); }

/* --- Menu drawer, phone fixes: the ✕ actually reachable, comfy tap targets --- */
.ms .st__nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms .st__nav-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -10px -6px -6px 0; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(214,181,102,.42); border-radius: 999px; color: var(--bone, #fbf6ea); font-size: 15px; line-height: 1; cursor: pointer; }
.ms .st__nav-item { min-height: 48px; align-items: center; }

@media (prefers-reduced-motion: reduce) { .ms { scroll-behavior: auto; } .ms-hero-cue-m { animation: none; } }