:root {
  --taupe: #f0eee9;
  --panel: #ffffff;
  --line: #d8d3ca;
  --charcoal: #26262a;
  --ink: #212125;
  --muted: #8e8b86;
  --accent: #3a3a40;
  --soft: #c7c2b9;
  --progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--taupe); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--taupe); font-family: "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: inherit; }

.chrome { position: fixed; z-index: 70; top: 0; left: 0; display: grid; width: 100%; height: 86px; padding: 0 34px; align-items: center; grid-template-columns: 1fr; pointer-events: none; }
.chrome a { pointer-events: auto; }
.brand { width: 154px; }
.brand img { display: block; width: 100%; }
.chapters { display: flex; gap: 8px; padding: 5px; border: 1px solid rgba(38,38,42,.14); border-radius: 99px; background: rgba(240,238,233,.62); backdrop-filter: blur(18px); }
.chapters a { display: flex; padding: 10px 14px; gap: 8px; border-radius: 99px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: .25s ease; }
.chapters a span { opacity: .55; }
.chapters a.is-active { color: white; background: var(--charcoal); }
.scroll-progress { position: fixed; z-index: 75; top: 50%; left: 24px; width: 1px; height: 190px; overflow: hidden; background: rgba(38,38,42,.17); transform: translateY(-50%); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--charcoal); transform: scaleY(var(--progress)); transform-origin: top; }

.experience { position: relative; height: 930vh; }
.stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; background: var(--taupe); }
.atmosphere, .grain, .grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atmosphere { z-index: 0; }
.grain { z-index: 3; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.grid { z-index: 2; background-image: linear-gradient(rgba(38,38,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(38,38,42,.05) 1px, transparent 1px); background-size: 10vw 10vw; mask-image: radial-gradient(circle at center, black, transparent 82%); opacity: .45; }

.scene { position: absolute; z-index: 5; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; }
.scene.is-visible { visibility: visible; pointer-events: auto; }
.scene:not(.is-visible) *,
.scene:not(.is-visible)::before,
.scene:not(.is-visible)::after {
  animation-play-state: paused !important;
  will-change: auto !important;
}
.scene-copy { position: absolute; z-index: 8; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
h1, h2 { margin: 0; font-weight: 450; letter-spacing: -.062em; line-height: .94; text-wrap: balance; }
h1 { font-size: clamp(3.5rem, 7.2vw, 7.5rem); }
h2 { font-size: clamp(3.2rem, 6.6vw, 7rem); }
h1 em, h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.lede { max-width: 550px; margin: 28px 0 0; color: var(--muted); font-size: clamp(.96rem, 1.3vw, 1.15rem); line-height: 1.55; }
.primary-cta { display: inline-flex; min-height: 50px; margin-top: 34px; padding: 0 23px; align-items: center; gap: 28px; border: 1px solid var(--charcoal); border-radius: 99px; background: var(--charcoal); color: white; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.primary-cta span { font-size: 16px; }
.chapter-label { position: absolute; z-index: 12; bottom: 34px; left: 34px; display: flex; gap: 11px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.chapter-label span { color: var(--ink); }

.hero-copy { top: 50%; left: 7vw; width: min(880px, 70vw); transform: translateY(-48%); }
.hero-copy .lede { max-width: 520px; }
.hero-orbit { position: absolute; z-index: 4; top: 50%; right: -7vw; width: 42vw; aspect-ratio: 1; border: 1px solid rgba(38,38,42,.15); border-radius: 50%; transform: translateY(-50%); }
.hero-orbit::before, .hero-orbit::after, .orbital { position: absolute; border: 1px solid rgba(38,38,42,.12); border-radius: 50%; content: ""; }
.hero-orbit::before { inset: 14%; }.hero-orbit::after { inset: 29%; }
.orbital--one { inset: -14%; border-style: dashed; animation: spin 30s linear infinite; }.orbital--two { inset: 8%; animation: spin 20s linear infinite reverse; }
.hero-orbit img { position: absolute; top: 50%; left: 50%; width: 16%; transform: translate(-50%,-50%); }
.scroll-cue { position: absolute; right: 35px; bottom: 32px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.scroll-cue span { margin-left: 12px; }

.problem-copy { top: 50%; left: 7vw; width: 45vw; transform: translateY(-50%); }
.message-field { position: absolute; top: 20%; right: 6vw; width: 40vw; height: 65%; }
.message { position: absolute; width: min(390px, 34vw); padding: 20px 22px; border: 1px solid rgba(38,38,42,.12); border-radius: 20px; background: rgba(255,255,255,.75); box-shadow: 0 24px 70px rgba(38,38,42,.08); backdrop-filter: blur(14px); }
.message span, .message i { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.message p { margin: 13px 0 18px; font-size: 16px; line-height: 1.4; }.message i { display: inline-block; padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; }
.message--one { top: 0; right: 0; transform: rotate(2deg); }.message--two { top: 34%; left: 0; transform: rotate(-2deg); }.message--three { right: 4%; bottom: 0; transform: rotate(1deg); }

.scene--flow { color: white; }.scene--flow h2 { color: white; }.scene--flow .eyebrow { color: rgba(255,255,255,.48); }.scene--flow .chapter-label, .scene--flow .chapter-label span { color: rgba(255,255,255,.58); }
.flow-copy { top: 16%; left: 7vw; }
.flow-map { position: absolute; right: 5vw; bottom: 6vh; width: min(1040px, 75vw); height: min(560px, 62vh); }
.flow-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.route { fill: none; stroke: rgba(255,255,255,.26); stroke-width: 1.2; stroke-dasharray: 5 8; }.route--answer { stroke: rgba(255,255,255,.6); }
.flow-node { position: absolute; display: flex; min-width: 170px; padding: 17px 18px; flex-direction: column; gap: 7px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }.flow-node small { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.flow-node strong { font-size: 13px; line-height: 1.35; }.flow-node i { color: rgba(255,255,255,.72); font-size: 9px; font-style: normal; }.flow-node--incoming { top: 25%; left: 0; }.flow-node--threshold { top: 41%; left: 43%; align-items: center; text-align: center; transform: translate(-50%,-50%); }.flow-node--threshold img { width: 32px; height: 32px; }.flow-node--answer { top: 15%; right: 0; }.flow-node--human { right: 0; bottom: 12%; }
.packet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 0 0 16px white; }.packet--one { top: 40%; left: 26%; }.packet--two { top: 29%; right: 25%; }.packet--three { right: 25%; bottom: 27%; }

.dashboard-copy { top: 18%; left: 6vw; width: 38vw; }.dashboard-copy h2 { font-size: clamp(2.8rem, 5vw, 5.6rem); }.dashboard-frame { position: absolute; top: 50%; left: 62%; display: grid; width: min(1120px, 74vw); height: min(690px, 76vh); overflow: hidden; border: 1px solid rgba(38,38,42,.15); border-radius: 22px; background: #faf9f6; box-shadow: 0 40px 120px rgba(38,38,42,.18); grid-template-columns: 185px 1fr; transform: translate(-37%,-42%) rotateY(-8deg) rotateX(3deg); transform-origin: center; }
.dash-side { padding: 24px 18px; border-right: 1px solid var(--line); }.dash-side img { width: 110px; }.dash-nav { display: flex; margin-top: 50px; flex-direction: column; gap: 8px; }.dash-nav span, .dash-nav b { padding: 11px 12px; border-radius: 8px; font-size: 10px; }.dash-nav b { background: var(--charcoal); color: white; }
.dash-main { padding: 25px; overflow: hidden; }.dash-main > header, .dash-quality header, .dash-table header { display: flex; align-items: center; justify-content: space-between; }.dash-main h3 { margin: 4px 0 0; font-size: 24px; }.dash-main small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.dash-main i { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 8px; font-style: normal; }
.dash-metrics { display: grid; margin-top: 22px; gap: 10px; grid-template-columns: repeat(4,1fr); }.dash-metrics article, .dash-quality, .dash-table { border: 1px solid var(--line); border-radius: 12px; background: white; }.dash-metrics article { min-height: 115px; padding: 15px; }.dash-metrics strong { display: block; margin: 18px 0 8px; font-size: 24px; }.dash-metrics span { color: var(--muted); font-size: 8px; }
.dash-quality { margin-top: 10px; padding: 16px; }.dash-quality h3 { font-size: 14px; }.dash-quality > div { display: grid; margin-top: 15px; gap: 8px; grid-template-columns: repeat(3,1fr); }.dash-quality article { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }.dash-quality strong { display: block; margin-top: 10px; font-size: 21px; }
.dash-table { margin-top: 10px; padding: 16px; }.dash-table header b { font-size: 8px; }.dash-table p { display: grid; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; grid-template-columns: 1.5fr 1fr 1fr; }
.metric-caption { position: absolute; display: flex; gap: 12px; font-size: 11px; letter-spacing: .02em; }.metric-caption span { color: var(--muted); }.metric-caption--one { right: 4vw; bottom: 8vh; }.metric-caption--two { right: 22vw; bottom: 4vh; }

.scene--connections { color: white; }.scene--connections h2 { color: white; }.scene--connections .eyebrow, .scene--connections .chapter-label, .scene--connections .chapter-label span { color: rgba(255,255,255,.55); }.connections-copy { top: 19%; left: 7vw; }
.connection-system { position: absolute; right: 5vw; bottom: 5vh; width: min(960px, 70vw); height: min(620px, 68vh); }.connection-system > svg { position: absolute; inset: 0; width: 100%; height: 100%; }.connection-system ellipse { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 4 8; }.connection-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 170px; height: 170px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.07); transform: translate(-50%,-50%); backdrop-filter: blur(16px); }.connection-core img { width: 35px; }.connection-core small { color: rgba(255,255,255,.5); font-size: 8px; }.satellite { position: absolute; z-index: 2; display: flex; width: 108px; height: 108px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }.satellite b { font-size: 18px; }.satellite span { color: rgba(255,255,255,.6); font-size: 8px; }.satellite--wa { top: 5%; left: 25%; }.satellite--ig { top: 17%; right: 9%; }.satellite--intake { bottom: 6%; left: 14%; }.satellite--staff { right: 18%; bottom: 3%; }
.satellite--mindbody { top: 43%; left: 0; }

.safety-mark { position: absolute; top: 50%; left: 18vw; width: 32vw; aspect-ratio: 1; border: 1px solid rgba(38,38,42,.14); border-radius: 50%; transform: translate(-50%,-50%); }.safety-mark::before, .safety-mark::after { position: absolute; border: 1px solid rgba(38,38,42,.12); border-radius: 50%; content: ""; }.safety-mark::before { inset: 15%; }.safety-mark::after { inset: 31%; }.safety-mark img { position: absolute; top: 50%; left: 50%; width: 15%; transform: translate(-50%,-50%); }.safety-copy { top: 50%; right: 8vw; width: 51vw; transform: translateY(-50%); }.safety-points { max-width: 580px; margin-top: 42px; border-top: 1px solid var(--line); }.safety-points p { display: grid; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; grid-template-columns: 48px 1fr; }.safety-points span { color: var(--ink); font-size: 9px; }

.scene--final { color: white; background: var(--charcoal); }.scene--final h2 { color: white; }.scene--final .eyebrow { color: rgba(255,255,255,.55); }.final-copy { top: 48%; left: 50%; width: min(900px,80vw); text-align: center; transform: translate(-50%,-50%); }.primary-cta--light { border-color: white; background: white; color: var(--charcoal); }.final-rings i { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: translate(-50%,-50%); }.final-rings i:nth-child(1){width:45vw;height:45vw}.final-rings i:nth-child(2){width:66vw;height:66vw}.final-rings i:nth-child(3){width:87vw;height:87vw}
.scene--final footer { position: absolute; right: 34px; bottom: 28px; left: 34px; display: flex; align-items: end; justify-content: space-between; }.scene--final footer img { width: 190px; }.scene--final footer p { max-width: 300px; margin: 0; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.5; text-align: right; }

.reduced-story { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .chrome { height: 68px; padding: 0 18px; grid-template-columns: 1fr; }.brand { width: 120px; }.chapters { position: fixed; right: 15px; bottom: 15px; left: 15px; justify-content: space-between; }.chapters a { padding: 10px 9px; font-size: 8px; }.chapters a span { display: none; }.scroll-progress { display: none; }
  .scene-copy { right: 20px; left: 20px; width: auto; }.chapter-label { top: 84px; bottom: auto; left: 20px; }.eyebrow { margin-bottom: 16px; }.lede { font-size: .92rem; }.hero-copy { top: 46%; transform: translateY(-50%); }.hero-copy h1 { font-size: clamp(2.8rem, 13.2vw, 4.4rem); }.hero-orbit { top: 72%; right: -24vw; width: 78vw; opacity: .5; }.scroll-cue { right: 20px; bottom: 85px; }
  h2 { font-size: clamp(2.8rem, 13vw, 4.3rem); }.problem-copy { top: 28%; transform: none; }.message-field { top: 60%; right: 18px; left: 18px; width: auto; height: 27%; }.message { width: 80vw; padding: 14px 16px; }.message p { margin: 8px 0 10px; font-size: 12px; }.message--one { right: 0; }.message--two { top: 34%; left: 0; }.message--three { right: 2%; }
  .flow-copy { top: 14%; }.flow-map { right: 12px; bottom: 12vh; width: calc(100vw - 24px); height: 52vh; }.flow-node { min-width: 120px; padding: 11px; }.flow-node strong { font-size: 10px; }.flow-node--incoming { top: 10%; }.flow-node--threshold { top: 49%; left: 49%; }.flow-node--answer { top: 18%; }.flow-node--human { bottom: 5%; }
  .dashboard-copy { top: 15%; }.dashboard-copy h2 { font-size: 3rem; }.dashboard-copy .lede { display: none; }.dashboard-frame { top: 62%; left: 4%; width: 172vw; height: 55vh; grid-template-columns: 130px 1fr; transform: rotateY(-5deg) rotateX(2deg); }.dash-side { padding: 15px 12px; }.dash-side img { width: 85px; }.dash-nav { margin-top: 25px; }.dash-metrics { grid-template-columns: repeat(4,145px); }.dash-main { padding: 15px; }.metric-caption { display: none; }
  .connections-copy { top: 15%; }.connection-system { right: -35vw; bottom: 7vh; width: 135vw; height: 54vh; }.satellite { width: 84px; height: 84px; }.connection-core { width: 130px; height: 130px; }
  .safety-mark { top: 67%; left: 50%; width: 78vw; opacity: .7; }.safety-copy { top: 18%; transform: none; }.safety-points { margin-top: 28px; }.safety-points p { font-size: 11px; }.final-copy { top: 44%; left: 20px; width: calc(100vw - 40px); transform: translateY(-50%); }.final-copy h2 { font-size: 3.5rem; }.scene--final footer { right: 20px; bottom: 85px; left: 20px; }.scene--final footer img { width: 130px; }.scene--final footer p { display: none; }
}

/* Motion study v6: distinct editorial handoffs, dashboard film and questions. */
.film-layer { background: #171719; }
.film--doorway {
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover !important;
  object-position: 50% 50%;
}
.film--dashboard { object-position: center; }
.scene--hero .hero-copy {
  width: min(850px,68vw);
  padding: clamp(24px,3.3vw,48px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 26px;
  background: rgba(24,24,27,.68);
  backdrop-filter: blur(16px);
}
.scene--hero h1, .scene--hero .eyebrow, .scene--hero .lede { text-shadow: none; }
.scene--problem .problem-copy {
  width: min(650px,46vw);
  padding: clamp(24px,3vw,44px);
  border: 1px solid rgba(38,38,42,.14);
  border-radius: 24px;
  background: rgba(240,238,233,.92);
  backdrop-filter: blur(18px);
}
.scene--problem h2, .scene--problem .eyebrow, .scene--problem .lede { text-shadow: none; }
.scene--problem .lede { color: #4f4e51; }
.scene--problem .chapter-label, .scene--problem .chapter-label span { color: white; }
.message { transform-origin: center; will-change: opacity, translate, scale, rotate; }
.scene--dashboard { color: white; }
.scene--dashboard .chapter-label, .scene--dashboard .chapter-label span { color: rgba(255,255,255,.78); }
.dashboard-status {
  position: absolute;
  z-index: 9;
  right: 34px;
  bottom: 32px;
  display: flex;
  padding: 11px 15px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 99px;
  background: rgba(38,38,42,.66);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.dashboard-status i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.scene--safety .safety-copy {
  padding: clamp(24px,3vw,44px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 25px;
  background: rgba(26,26,29,.72);
  backdrop-filter: blur(18px);
}
.scene--safety .safety-points { border-color: rgba(255,255,255,.22); }
.scene--safety .safety-points p { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.86); }
.scene--safety .safety-points span { color: white; }
.scene--questions { color: var(--ink); background: var(--taupe); }
.questions-shell {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: 7vw;
  left: 7vw;
  display: grid;
  align-items: start;
  gap: clamp(50px,8vw,150px);
  grid-template-columns: minmax(280px,.8fr) minmax(480px,1.2fr);
  transform: translateY(-50%);
}
.questions-intro h2 { font-size: clamp(3rem,5.6vw,6.3rem); }
.question-ping { position: relative; display: block; width: 12px; height: 12px; margin-bottom: 32px; border-radius: 50%; background: var(--accent); }
.question-ping::before, .question-ping::after { position: absolute; inset: -8px; border: 1px solid rgba(58,58,64,.34); border-radius: 50%; content: ""; animation: question-pulse 2.2s ease-out infinite; }
.question-ping::after { animation-delay: 1.1s; }
.questions-list { border-top: 1px solid var(--border, #e2ded6); }
.questions-list details { border-bottom: 1px solid var(--border, #e2ded6); }
.questions-list summary { display: grid; padding: 22px 0; align-items: center; cursor: pointer; font-size: clamp(1rem,1.4vw,1.25rem); font-weight: 600; line-height: 1.3; list-style: none; grid-template-columns: 1fr auto; }
.questions-list summary::-webkit-details-marker { display: none; }
.questions-list summary span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: transform .25s ease; }
.questions-list details[open] summary span { transform: rotate(45deg); }
.questions-list p { max-width: 650px; margin: -4px 52px 22px 0; color: #5d5a57; font-size: 14px; line-height: 1.55; }
@keyframes question-pulse { 0% { opacity: .7; transform: scale(.45); } 100% { opacity: 0; transform: scale(2.2); } }

@media (max-width: 760px) {
  .scene--hero .hero-copy { right: 16px; left: 16px; width: auto; padding: 22px; }
  .scene--problem .problem-copy { top: 20%; right: 16px; left: 16px; width: auto; padding: 20px; }
  .scene--problem .problem-copy h2 { font-size: clamp(2.5rem,11.5vw,3.8rem); }
  .dashboard-status { right: 18px; bottom: 88px; }
  .scene--safety .safety-copy { right: 16px; left: 16px; padding: 22px; }
  .scene--safety .safety-copy h2 { font-size: clamp(2.8rem,12vw,4rem); }
  .questions-shell { top: 47%; right: 20px; left: 20px; display: block; transform: translateY(-50%); }
  .questions-intro h2 { font-size: 3.2rem; }
  .question-ping { margin-bottom: 18px; }
  .questions-list { margin-top: 34px; }
  .questions-list summary { padding: 15px 0; font-size: .9rem; }
  .questions-list p { margin-right: 42px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.experience, .chrome, .scroll-progress { display: none; }.reduced-story { display: block; padding: 24px; }.reduced-story::before { display: block; max-width: 780px; margin: 20vh auto; color: var(--ink); font: 450 clamp(2.5rem,8vw,6rem)/.98 Georgia,serif; letter-spacing: -.05em; white-space: pre-wrap; content: "You don’t have a marketing problem.\A You have an answering problem.\A\A Threshold turns every conversation into visible, accountable work."; }
}

/* Motion study v2: longer chapter holds and a persistent Pear-style story rail. */
.scroll-progress { display: none; }
.chrome { grid-template-columns: 1fr; }
.chapters {
  position: fixed;
  top: 50%;
  left: 28px;
  display: flex;
  width: 142px;
  padding: 0 0 0 15px;
  flex-direction: column;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  transform: translateY(-50%);
}
.chapters::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(38,38,42,.2);
  content: "";
}
.chapters::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: currentColor;
  content: "";
  transform: scaleY(var(--progress));
  transform-origin: top;
  transition: transform .1s linear;
  will-change: transform;
}
.chapters a {
  position: relative;
  width: max-content;
  max-width: 132px;
  padding: 8px 9px;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  opacity: .58;
  transform-origin: left;
  transition: color .35s ease, opacity .35s ease, transform .35s ease;
}
.chapters a::before {
  position: absolute;
  top: 50%;
  left: -15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: translate(-50%,-50%) scale(.2);
  transition: .35s ease;
}
.chapters a.is-active {
  color: var(--ink);
  background: transparent;
  opacity: 1;
  transform: translateX(7px);
}
.chapters a.is-active::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.scene--flow ~ .scene .chapters,
body.is-dark .chapters { color: white; }
body.is-dark .chapters::before { background: rgba(255,255,255,.22); }
body.is-dark .chapters a { color: rgba(255,255,255,.56); }
body.is-dark .chapters a.is-active { color: white; }
body.is-dark .brand img { filter: brightness(0) invert(1); }
body[data-active="hero"] .chapters { opacity: 0; pointer-events: none; transform: translate(-10px,-50%); }
body[data-active="safety"] .chapters { color: white; }
body[data-active="safety"] .chapters::before { background: rgba(255,255,255,.24); }
body[data-active="safety"] .chapters a { color: rgba(255,255,255,.6); }
body[data-active="safety"] .chapters a.is-active { color: white; }
body[data-active="safety"] .brand img { filter: brightness(0) invert(1); }
.chapters { transition: opacity .4s ease, transform .4s ease; }
.problem-copy, .flow-copy, .dashboard-copy, .connections-copy { left: 14vw; }

.hero-copy { width: min(850px, 67vw); }
.hero-copy h1 { font-size: clamp(3.4rem, 6.35vw, 6.65rem); }
.hero-orbit { right: -2vw; width: 46vw; background: radial-gradient(circle at center, rgba(255,255,255,.6), rgba(240,238,233,0) 56%); }
.hero-signal { position: absolute; padding: 9px 12px; border: 1px solid rgba(38,38,42,.15); border-radius: 99px; background: rgba(255,255,255,.66); color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(38,38,42,.08); animation: signal-float 5s ease-in-out infinite; }
.hero-signal--one { top: 13%; left: 3%; }.hero-signal--two { top: 53%; right: 0; animation-delay: -1.7s; }.hero-signal--three { bottom: 10%; left: 18%; animation-delay: -3.2s; }
@keyframes signal-float { 50% { translate: 0 -8px; } }

.dashboard-copy, .dashboard-frame, .metric-caption { will-change: opacity, transform; }
.dashboard-frame { left: 56%; width: min(1180px, 78vw); }
.safety-copy { right: 6vw; width: 48vw; }

@media (max-width: 760px) {
  .chrome { grid-template-columns: 1fr; }
  .chapters { top: auto; right: 15px; bottom: 15px; left: 15px; display: flex; width: auto; padding: 5px; flex-direction: row; justify-content: space-between; gap: 0; border: 1px solid rgba(38,38,42,.14); border-radius: 99px; background: rgba(240,238,233,.78); transform: none; backdrop-filter: blur(18px); }
  .chapters::before, .chapters::after, .chapters a::before { display: none; }
  .chapters a { width: auto; padding: 10px 9px; color: var(--muted); font-size: 8px; opacity: 1; transform: none; }
  .chapters a.is-active { color: white; background: var(--charcoal); transform: none; }
  body.is-dark .chapters { color: var(--ink); background: rgba(240,238,233,.78); }
  body.is-dark .chapters a { color: var(--muted); }
  body.is-dark .chapters a.is-active { color: white; }
  body[data-active="hero"] .chapters { opacity: 1; pointer-events: auto; transform: none; }
  body[data-active="safety"] .chapters { color: var(--ink); background: rgba(240,238,233,.78); }
  body[data-active="safety"] .chapters a { color: var(--muted); }
  body[data-active="safety"] .chapters a.is-active { color: white; }
  .problem-copy, .flow-copy, .dashboard-copy, .connections-copy { left: 20px; }
  .hero-copy h1 { font-size: clamp(2.65rem, 12.4vw, 4.1rem); }
  .hero-orbit { right: -30vw; width: 88vw; }
  .hero-signal { display: none; }
  .problem-copy { top: 24%; }
  .message-field { top: 59%; }
  .dashboard-frame { left: 2%; }
  .safety-copy { top: 43%; }
}

/* Motion study v3: scroll-scrubbed film chapters. */
.film-layer, .sand-particle-wipe { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.film-layer { overflow: hidden; background: transparent; }
.film-layer::after { position: absolute; z-index: 5; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(20,20,22,.24) 100%); content: ""; opacity: var(--film-shade, 0); }
.film-poster { position: absolute; z-index: 0; inset: -1%; width: 102%; height: 102%; opacity: 0; background-position: center; background-size: cover; transition: opacity .18s ease; }
.film-poster--doorway { background-image: url("./assets/01-hero-upscaled-poster.jpg"); filter: saturate(.62) contrast(1.04); }
.film { position: absolute; inset: -1%; width: 102%; height: 102%; object-fit: cover; opacity: 0; filter: saturate(.62) contrast(1.04); will-change: opacity, clip-path, transform; }
.film--doorway { clip-path: inset(50% 50% 50% 50% round 18px); }
.sand-particle-wipe { z-index: 2; }
.grain { z-index: 4; }
.grid { z-index: 3; }

body[data-active="doorway"] .chapters,
body[data-active="fragments"] .chapters,
body[data-active="signals"] .chapters { opacity: 0; pointer-events: none; transform: translate(-10px,-50%); }
body.is-film .brand img { filter: brightness(0) invert(1); }

/* Restore the clean first-prototype problem scene and its three chats. */
.scene--problem { color: var(--ink); }
.scene--problem h2 { color: var(--ink); }
.scene--problem .eyebrow, .scene--problem .lede, .scene--problem .chapter-label { color: var(--muted); }
.scene--problem .chapter-label span { color: var(--ink); }
.scene--problem .message { border-color: rgba(38,38,42,.12); background: rgba(255,255,255,.78); color: var(--ink); box-shadow: 0 24px 70px rgba(38,38,42,.08); }
.scene--problem .message span, .scene--problem .message i { color: var(--muted); }
.scene--problem .message i { border-color: var(--line); }
.problem-copy { left: 14vw; }
.message-field { right: 3vw; width: 36vw; }
.message { width: min(370px,31vw); }

/* The product becomes the entire stage instead of entering as a side card. */
.dashboard-frame {
  top: 50%;
  left: 50%;
  width: min(1380px, 91vw);
  height: min(780px, 82vh);
  transform: translate(-50%,-50%) rotateX(1.5deg);
}
.dashboard-copy { top: 50%; left: 50%; width: min(820px,72vw); text-align: center; transform: translate(-50%,-50%); }
.dashboard-copy .lede { margin-right: auto; margin-left: auto; }
.metric-caption--one { right: 6vw; bottom: 5vh; }.metric-caption--two { right: 27vw; bottom: 5vh; }

/* Connections has two distinct scroll beats: message first, system second. */
.connections-copy { top: 50%; left: 50%; width: min(900px,78vw); text-align: center; transform: translate(-50%,-50%); }
.connection-system { top: 50%; right: auto; bottom: auto; left: 50%; width: min(980px,76vw); height: min(640px,72vh); transform: translate(-50%,-50%); will-change: opacity, transform; }
.satellite { animation: satellite-drift 5.5s ease-in-out infinite; }.satellite--ig { animation-delay: -1.2s; }.satellite--intake { animation-delay: -2.8s; }.satellite--staff { animation-delay: -4s; }
.connection-system svg { animation: orbit-turn 38s linear infinite; transform-origin: center; }
@keyframes satellite-drift { 50% { translate: 0 -12px; } }
@keyframes orbit-turn { to { rotate: 360deg; } }

/* Safety is now played over the organising-dust film. */
.scene--safety { color: white; }
.scene--safety h2 { color: white; }
.scene--safety .eyebrow, .scene--safety .chapter-label, .scene--safety .chapter-label span { color: rgba(255,255,255,.62); }
.safety-copy { top: 50%; right: 2vw; width: min(680px,48vw); transform: translateY(-50%); }
.safety-points { border-color: rgba(255,255,255,.2); }
.safety-points p { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.safety-points span { color: white; }
body[data-active="safety"] .chapters { color: white; }

@media (max-width: 760px) {
  body[data-active="doorway"] .chapters,
  body[data-active="fragments"] .chapters,
  body[data-active="signals"] .chapters { opacity: 1; pointer-events: auto; transform: none; }
  .film { inset: 0; width: 100%; height: 100%; }
  .problem-copy { left: 20px; }
  .message-field { right: 18px; left: 18px; width: auto; }
  .message { width: 80vw; }
  .dashboard-copy { top: 42%; left: 20px; width: calc(100vw - 40px); text-align: left; transform: none; }
  .dashboard-copy .lede { margin-left: 0; }
  .dashboard-frame { top: 53%; left: 50%; width: 172vw; height: 58vh; transform: translate(-50%,-50%) rotateX(1deg); }
  .connections-copy { top: 42%; left: 20px; width: calc(100vw - 40px); text-align: left; transform: none; }
  .connection-system { width: 132vw; height: 58vh; }
  .safety-copy { top: 46%; right: 20px; left: 20px; width: auto; transform: translateY(-50%); }
  .scene--safety .chapters { color: var(--ink); }
}

/* Motion study v4: films are continuous environments, not inserts. */
.film { inset: 0; width: 100%; height: 100%; filter: none; }
.film--doorway { clip-path: none; }
.hero-orbit { display: none; }
.scene--hero h1 { color: white; }
.scene--hero .eyebrow, .scene--hero .lede, .scene--hero .scroll-cue { color: rgba(255,255,255,.72); }
.scene--hero .primary-cta { border-color: white; background: white; color: var(--charcoal); }
.scene--problem { color: white; }
.scene--problem h2 { color: white; }
.scene--problem .eyebrow, .scene--problem .lede, .scene--problem .chapter-label, .scene--problem .chapter-label span { color: rgba(255,255,255,.7); }
.scene--problem .message { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.scene--problem .message span, .scene--problem .message i { color: var(--muted); }
.scene--problem .message i { border-color: var(--line); }
.message { will-change: opacity, translate, scale; }
body[data-active="problem"] .chapters { color: white; }
body[data-active="problem"] .chapters::before { background: rgba(255,255,255,.24); }
body[data-active="problem"] .chapters a { color: rgba(255,255,255,.58); }
body[data-active="problem"] .chapters a.is-active { color: white; }

@media (max-width: 760px) {
  .scene--hero::before, .scene--problem::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(20,20,22,.48), rgba(20,20,22,.18) 60%, rgba(20,20,22,.42)); content: ""; }
  body[data-active="problem"] .chapters { color: var(--ink); background: rgba(240,238,233,.82); }
  body[data-active="problem"] .chapters a { color: var(--muted); }
  body[data-active="problem"] .chapters a.is-active { color: white; }
}

/* Motion study v5: radial field transitions and tunnel-delivered dashboard. */
.sand-particle-wipe { z-index: 6; }
.scene--problem h2 { color: var(--ink); text-shadow: 0 1px 18px rgba(240,238,233,.72); }
.scene--problem .eyebrow { color: var(--accent); text-shadow: 0 1px 12px rgba(240,238,233,.85); }
.scene--problem .lede { color: var(--ink); text-shadow: 0 1px 14px rgba(240,238,233,.8); }
.scene--problem .chapter-label, .scene--problem .chapter-label span { color: rgba(255,255,255,.74); }
body.is-film .chapters { color: white; }
body.is-film .chapters::before { background: rgba(255,255,255,.24); }
body.is-film .chapters a { color: rgba(255,255,255,.56); }
body.is-film .chapters a.is-active { color: white; }
.dashboard-copy { display: none; }
.dashboard-frame { top: 52%; left: 50%; width: min(1220px,84vw); height: min(690px,72vh); transform: translate(-50%,-50%) rotateX(.5deg); transform-origin: center; }
.connection-system { display: none; }
.connections-copy { width: min(880px,76vw); }

@media (max-width: 760px) {
  .scene--problem h2, .scene--problem .lede { color: var(--ink); }
  .dashboard-frame { top: 51%; left: 50%; width: 96vw; height: 47vh; transform: translate(-50%,-50%); }
  body.is-film .chapters { color: var(--ink); background: rgba(240,238,233,.82); }
  body.is-film .chapters a { color: var(--muted); }
  body.is-film .chapters a.is-active { color: white; }
}

/* v6 final cascade overrides */
.film-layer { background: #171719; }
.scene--problem h2, .scene--problem .eyebrow, .scene--problem .lede { text-shadow: none; }
.scene--problem .lede { color: #4f4e51; }
.message { transform-origin: center; will-change: opacity, translate, scale, rotate; }
@media (max-width: 760px) {
}

/* Motion study v7: open type, sand wipe, animated routing and question carousel. */
.scene--hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,17,19,.62) 0, rgba(17,17,19,.2) 58%, transparent 78%);
  content: "";
  pointer-events: none;
}
.scene--hero .hero-copy {
  width: min(880px,70vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  will-change: opacity, translate;
}
.scene--hero .lede { color: rgba(255,255,255,.9); }
.scene--problem::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: transparent;
  content: "";
  pointer-events: none;
}
.scene--problem .problem-copy {
  width: min(650px,47vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.scene--problem h2,
.scene--problem .eyebrow,
.scene--problem .lede {
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 24px rgba(0,0,0,.72);
}
.scene--problem .eyebrow { color: rgba(255,255,255,.78); }
.scene--problem .lede { color: rgba(255,255,255,.84); }

.scene--flow {
  color: var(--ink);
  background: radial-gradient(circle at 78% 38%, rgba(142,139,134,.2), transparent 30%), linear-gradient(135deg, #f0eee9, #e2ded6);
}
.scene--flow::before {
  position: absolute;
  z-index: 0;
  inset: -20%;
  background: radial-gradient(circle at 30% 40%, rgba(58,58,64,.11), transparent 24%), radial-gradient(circle at 70% 64%, rgba(58,58,64,.09), transparent 28%);
  content: "";
  animation: flow-breathe 8s ease-in-out infinite alternate;
}
.scene--flow h2 { color: var(--ink); }
.scene--flow .eyebrow { color: #6c6966; }
.scene--flow .chapter-label, .scene--flow .chapter-label span { color: #5e5b58; }
.scene--flow .route { stroke: rgba(58,58,64,.38); stroke-width: 1.5; stroke-dasharray: none; }
.scene--flow .route--answer { stroke: rgba(38,38,42,.78); }
.scene--flow .flow-node {
  border-color: rgba(38,38,42,.16);
  background: rgba(255,255,255,.66);
  color: var(--ink);
  box-shadow: 0 22px 70px rgba(38,38,42,.09);
}
.scene--flow .flow-node small { color: #77736e; }
.scene--flow .flow-node i { color: #5e5b58; }
.scene--flow .flow-node--threshold { border-color: var(--accent); background: var(--accent); color: white; }
.scene--flow .flow-node--threshold small { color: rgba(255,255,255,.65); }
.scene--flow .packet { background: var(--accent); box-shadow: 0 0 0 8px rgba(58,58,64,.1), 0 0 24px rgba(58,58,64,.3); }
@keyframes flow-breathe { to { transform: translate3d(7%, -5%, 0) scale(1.08); } }

.scene--dashboard { background: transparent; }
.scene--dashboard::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(1160px,85vw);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: 0 36px 110px rgba(0,0,0,.38);
  content: "";
  transform: translate(-50%,-50%);
}
.film--dashboard {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(1100px,80vw);
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 17px;
  object-fit: cover;
  box-shadow: 0 25px 80px rgba(0,0,0,.28);
}
.dashboard-status { right: max(6vw,34px); bottom: 5vh; }

.scene--safety::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0, rgba(20,20,23,.18) 42%, rgba(20,20,23,.72) 100%);
  content: "";
  pointer-events: none;
}
.scene--safety .safety-copy {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.scene--safety .safety-points p { color: rgba(255,255,255,.9); }

.scene--questions {
  overflow: hidden;
  color: white;
  background: radial-gradient(circle at 50% 62%, rgba(142,139,134,.34), transparent 24%), radial-gradient(circle at 14% 20%, rgba(255,255,255,.08), transparent 18%), #26262a;
}
.scene--questions::before, .scene--questions::after {
  position: absolute;
  width: 58vw;
  height: 58vw;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 48% 52% 64% 36%;
  content: "";
  animation: carousel-orbit 18s linear infinite;
}
.scene--questions::before { top: -32vw; left: -15vw; box-shadow: 0 0 0 80px rgba(255,255,255,.015), 0 0 0 170px rgba(255,255,255,.012); }
.scene--questions::after { right: -22vw; bottom: -38vw; animation-direction: reverse; }
.scene--questions .chapter-label, .scene--questions .chapter-label span { color: rgba(255,255,255,.64); }
.questions-shell {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  transform: none;
}
.questions-intro { position: absolute; z-index: 30; top: 10vh; left: 50%; width: min(1050px,82vw); text-align: center; transform: translateX(-50%); }
.questions-intro h2 { color: white; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem,7vw,8rem); font-weight: 400; letter-spacing: -.055em; line-height: .82; }
.questions-intro h2 em { font-weight: 400; }
.question-ping { position: absolute; top: calc(100% + 38px); left: 50%; width: 8px; height: 8px; margin: 0; background: white; transform: translateX(-50%); }
.question-ping::before, .question-ping::after { border-color: rgba(255,255,255,.5); }
.question-carousel { position: absolute; z-index: 12; top: 61%; left: 50%; width: 1px; height: 1px; }
.question-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: min(470px,38vw);
  min-height: 350px;
  padding: clamp(28px,3vw,46px);
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(38,38,42,.34);
  box-shadow: 0 30px 90px rgba(0,0,0,.16);
  transform: translate(-50%,-50%);
  backdrop-filter: blur(4px);
  will-change: opacity, filter, translate, scale;
}
.question-card h3 { max-width: 390px; margin: 0; color: white; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem,3vw,3.2rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; }
.question-card p { max-width: 380px; margin: 60px 0 0; color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.55; opacity: var(--answer-opacity,0); transition: opacity .15s linear; }
.carousel-thread { position: absolute; z-index: 25; top: -185px; left: -2px; width: 1px; height: 370px; background: rgba(255,255,255,.45); rotate: 32deg; transform-origin: center; }
.carousel-spark { position: absolute; z-index: 26; color: white; font-size: 18px; }
.carousel-spark--one { top: -190px; left: -113px; }.carousel-spark--two { right: -115px; bottom: -190px; }
.carousel-count { position: absolute; right: 7vw; bottom: 5vh; margin: 0; color: rgba(255,255,255,.46); font: 600 10px/1 monospace; letter-spacing: .14em; }
.carousel-count b { color: white; }
@keyframes carousel-orbit { to { rotate: 360deg; } }

@media (max-width: 760px) {
  .scene--hero::before { background: linear-gradient(180deg, rgba(17,17,19,.6), rgba(17,17,19,.18) 70%, rgba(17,17,19,.38)); }
  .scene--hero .hero-copy { right: 20px; left: 20px; width: auto; padding: 0; }
  .scene--problem::before { background: linear-gradient(180deg, rgba(240,238,233,.9) 0, rgba(240,238,233,.68) 48%, transparent 76%); }
  .scene--problem .problem-copy { top: 20%; right: 20px; left: 20px; width: auto; padding: 0; }
  .film--dashboard { width: 92vw; }
  .scene--dashboard::before { width: 96vw; }
  .scene--safety::before { background: linear-gradient(180deg, rgba(20,20,23,.2), rgba(20,20,23,.7)); }
  .scene--safety .safety-copy { right: 20px; left: 20px; padding: 0; }
  .questions-intro { top: 13vh; width: 88vw; }
  .questions-intro h2 { font-size: 3.8rem; }
  .question-carousel { top: 61%; }
  .question-card { width: 74vw; min-height: 340px; padding: 26px; }
  .question-card h3 { font-size: 2rem; }
  .question-card p { font-size: 13px; }
}

/* Motion study v8: full-frame entry, live Threshold flow and orbital questions. */
.film-layer { background: var(--line); }
.film--doorway { object-position: 50% 50%; }

.flow-live-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--taupe), var(--line));
}
.scene--flow { background: var(--taupe); }
.scene--flow::before {
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(240,238,233,.8), rgba(240,238,233,.22) 58%, transparent 82%);
  animation: none;
}
.scene--flow .flow-copy, .scene--flow .flow-map, .scene--flow .chapter-label { z-index: 3; }
.scene--flow .flow-node {
  border-color: rgba(255,255,255,.22);
  background: rgba(58,58,64,.94);
  color: white;
  box-shadow: 0 24px 72px rgba(38,38,42,.2);
  backdrop-filter: blur(16px);
}
.scene--flow .flow-node small, .scene--flow .flow-node i { color: rgba(255,255,255,.68); }
.scene--flow .flow-node--threshold { border-color: rgba(255,255,255,.26); background: var(--charcoal); }
.scene--flow .route { stroke: rgba(38,38,42,.5); }
.scene--flow .route--answer { stroke: rgba(38,38,42,.86); }

.flow-title {
  display: grid;
  width: min(940px, 82vw);
}
.flow-title__line {
  grid-area: 1 / 1;
  transform-origin: left center;
  will-change: opacity, transform, clip-path;
}

.scene--questions { overflow: hidden; color: white; background: #171719; }
.scene--questions::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(18,18,21,.68), rgba(18,18,21,.14) 46%, rgba(18,18,21,.5)),
    var(--question-chamber-image, linear-gradient(transparent, transparent)) center / cover no-repeat;
  box-shadow: none;
  content: "";
  animation: chamber-drift 16s ease-in-out infinite alternate;
}
.scene--questions::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 58%, transparent 15%, rgba(18,18,21,.3) 88%);
  content: "";
  animation: none;
}
.questions-shell { z-index: 3; }
.question-card {
  border-color: rgba(255,255,255,.3);
  background: rgba(38,38,42,.7);
  box-shadow: 0 34px 100px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}
.carousel-thread {
  top: -195px;
  left: -235px;
  width: 470px;
  height: 390px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: transparent;
  rotate: 0deg;
}
@keyframes chamber-drift { to { transform: translate3d(-1.5%,1%,0) scale(1.055); } }

.final-rings i { border-style: dashed; animation: final-ring-spin 32s linear infinite; }
.final-rings i:nth-child(2) { animation-duration: 45s; animation-direction: reverse; }
.final-rings i:nth-child(3) { animation-duration: 62s; }
@keyframes final-ring-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 760px) {
  .scene--flow::before { background: linear-gradient(180deg, rgba(240,238,233,.82), rgba(240,238,233,.16) 64%, transparent); }
  .question-card { width: 76vw; }
  .carousel-thread { left: -42vw; width: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .scene--questions::before, .final-rings i { animation: none; }
}

.scene--problem .message { background: #26262a; color: #f0eee9; }
.scene--problem .message span, .scene--problem .message i { color: #f0eee9; }

/* Motion study v9: long-form Ask before booking depth carousel. */
.questions-intro {
  position: absolute;
  z-index: 60;
  top: clamp(70px, 8vh, 104px);
  left: 50%;
  width: min(1180px, 88vw);
  text-align: center;
  transform: translateX(-50%);
}
.questions-intro h2 {
  margin: 0;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6.6vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -.058em;
  line-height: .92;
  white-space: nowrap;
}
.questions-intro h2 > span {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.question-carousel {
  position: absolute;
  z-index: 12;
  top: 64%;
  left: 50%;
  width: 1px;
  height: 1px;
  perspective: 1100px;
}
.question-card {
  width: min(500px, 39vw);
  min-height: min(360px, 43vh);
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 3px;
  background: rgba(24,24,27,.22);
  box-shadow: 0 30px 100px rgba(0,0,0,.24);
  backdrop-filter: blur(7px) saturate(.9);
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: none;
}
.question-card.is-active {
  border-color: rgba(255,255,255,.29);
  background: rgba(26,26,29,.29);
  box-shadow: 0 34px 120px rgba(0,0,0,.34);
}
.question-card h3 {
  max-width: 420px;
  font-size: clamp(1.75rem, 2.7vw, 3.1rem);
}
.question-card p {
  margin-top: 72px;
  color: rgba(255,255,255,.9);
  opacity: var(--answer-opacity, 0);
}
.question-index {
  display: block;
  margin-bottom: 28px;
  color: rgba(255,255,255,.48);
  font: 600 10px/1 monospace;
  letter-spacing: .16em;
}
.question-focus-marker {
  position: absolute;
  top: 50%;
  left: -54px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.84);
  opacity: var(--focus-marker-opacity, 0);
  rotate: 45deg;
  transform: translateY(-50%);
}
.question-focus-marker i {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.62);
  content: "";
  rotate: -45deg;
  transform-origin: left center;
}
.carousel-thread, .carousel-spark { display: none; }
.carousel-count { right: 5vw; bottom: 4vh; }

@media (max-width: 760px) {
  .questions-intro { top: 12vh; width: 94vw; }
  .questions-intro h2 { font-size: clamp(2.5rem, 12vw, 4rem); white-space: normal; }
  .question-carousel { top: 64%; }
  .question-card { width: 72vw; min-height: 330px; padding: 24px; }
  .question-card h3 { font-size: 1.85rem; }
  .question-card p { margin-top: 48px; font-size: 12px; }
  .question-focus-marker { left: -36px; }
  .question-focus-marker i { width: 20px; }
}

/* Motion study v10: true elliptical Ask before booking wheel. */
.scene--questions::before {
  background:
    linear-gradient(90deg, rgba(18,18,21,.46), rgba(18,18,21,.055) 48%, rgba(18,18,21,.27)),
    var(--question-chamber-image, linear-gradient(transparent, transparent)) center / cover no-repeat;
}
.scene--questions::after {
  background: radial-gradient(circle at 50% 60%, transparent 19%, rgba(18,18,21,.18) 92%);
}
.question-carousel {
  top: 65%;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.question-carousel::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: min(1440px, 86vw);
  height: min(320px, 34vh);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 80px rgba(255,255,255,.018);
  pointer-events: none;
}
.question-card {
  width: min(480px, 37vw);
  min-height: min(344px, 41vh);
  border-color: rgba(255,255,255,.14);
  background: rgba(24,24,27,.105);
  box-shadow: 0 24px 80px rgba(0,0,0,.12);
  backdrop-filter: blur(4px) saturate(.88);
  transform: translate(-50%, -50%) rotateY(var(--wheel-turn, 0deg)) translateZ(var(--wheel-radius, 360px)) rotateY(var(--wheel-counter-turn, 0deg)) translateY(var(--wheel-y, 0px)) scale(var(--wheel-scale, 1));
  transform-style: preserve-3d;
  will-change: opacity, translate, scale, transform;
}
.question-card.is-active {
  border-color: rgba(255,255,255,.24);
  background: rgba(25,25,28,.16);
  box-shadow: 0 28px 94px rgba(0,0,0,.18);
}
.question-card p { color: rgba(255,255,255,.82); }
.question-index { color: rgba(255,255,255,.4); }

@media (max-width: 760px) {
  .question-carousel { top: 66%; perspective: 1000px; }
  .question-carousel::before { width: 92vw; height: 190px; }
  .question-card { width: 70vw; min-height: 310px; padding: 23px; }
}

/* Motion study v11: Pear-proportioned portrait wheel and pointer parallax. */
.scene--questions::before {
  animation: none;
  transform: translate3d(var(--questions-bg-x, 0), var(--questions-bg-y, 0), 0) scale(var(--questions-bg-scale, 1.1605));
  will-change: transform;
}
.scene--questions::after {
  background:
    linear-gradient(90deg, rgba(18,18,21,.14), transparent 31%, transparent 69%, rgba(18,18,21,.12)),
    radial-gradient(circle at 50% 59%, transparent 25%, rgba(18,18,21,.1) 100%);
}
.questions-shell { will-change: opacity, translate; }
.question-carousel {
  left: 44%;
  top: 62%;
  transform: rotateX(var(--questions-tilt-x, 0deg)) rotateY(var(--questions-tilt-y, 0deg));
  transform-origin: center;
  transition: transform .12s linear;
}
.question-carousel::before {
  width: min(1420px, 88vw);
  height: min(560px, 64vh);
  border-color: transparent;
  box-shadow: none;
}
.question-card {
  width: min(470px, 36vw);
  min-height: min(560px, 67vh);
  padding: clamp(32px, 3vw, 46px);
  border-color: rgba(255,255,255,.17);
  background: rgba(24,24,27,.045);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
  backdrop-filter: blur(1.5px) saturate(.92);
}
.question-card:not(.is-active) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.question-card.is-active {
  border-color: rgba(255,255,255,.23);
  background: rgba(25,25,28,.075);
  box-shadow: 0 26px 86px rgba(0,0,0,.11);
}
.question-card h3 { font-size: clamp(2rem, 2.65vw, 3.15rem); }
.question-card p {
  max-width: 360px;
  margin-top: auto;
  padding-top: 72px;
  color: rgba(255,255,255,.9);
}

@media (max-width: 760px) {
  .question-carousel { top: 64%; }
  .question-carousel::before { height: 58vh; }
  .question-card { width: 72vw; min-height: min(500px, 64vh); padding: 26px; }
  .question-card p { padding-top: 48px; }
}

/* Flow study: Pear-inspired split visual and editorial rail. */
.scene--flow::before {
  z-index: 1;
  background: linear-gradient(90deg, transparent 0 48%, rgba(240,238,233,.08) 58%, rgba(240,238,233,.3) 100%);
}
.flow-visual {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 100%;
  overflow: hidden;
  background: var(--taupe);
}
.flow-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(240,238,233,.08), transparent 30%, rgba(38,38,42,.06)),
    radial-gradient(circle at 46% 46%, transparent 28%, rgba(38,38,42,.08) 115%);
  content: "";
  pointer-events: none;
}
.scene--flow .flow-live-bg {
  inset: -8%;
  width: 116%;
  height: 116%;
  filter: contrast(1.08) saturate(.78);
}
.scene--flow .flow-copy {
  top: 0;
  right: 0;
  left: 52%;
  width: 48%;
  height: 100%;
  overflow: hidden;
  padding: 0 clamp(38px, 5.2vw, 92px) 0 clamp(48px, 5.6vw, 104px);
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}
.flow-story__track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.flow-story__track::before {
  position: absolute;
  top: -24vh;
  bottom: -330vh;
  left: 0;
  width: 1px;
  background: rgba(38,38,42,.24);
  content: "";
}
.flow-story__step {
  position: absolute;
  left: 44px;
  width: min(440px, calc(100% - 44px));
}
.flow-story__step::before {
  position: absolute;
  top: 12px;
  left: -44px;
  width: 24px;
  height: 1px;
  background: rgba(38,38,42,.48);
  content: "";
}
.flow-story__step--inbox { top: 58vh; }
.flow-story__step--known { top: 116vh; }
.flow-story__step--escalate { top: 174vh; }
.flow-story__step--capture { top: 232vh; }
.flow-story__step--accountable { top: 290vh; }
.flow-story__number {
  display: inline-flex;
  margin: 0 0 17px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #77736e;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  backdrop-filter: none;
}
.flow-story__step h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 3.25vw, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.035em;
}
.flow-story__sub {
  max-width: 410px;
  margin: 22px 0 0;
  color: #6c6966;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 1.12vw, 18px);
  font-weight: 400;
  line-height: 1.45;
}
.flow-live-bg { will-change: transform; }

@media (max-width: 760px) {
  .scene--flow::before {
    background: linear-gradient(90deg, rgba(240,238,233,.24), rgba(240,238,233,.36));
  }
  .flow-visual {
    width: 100%;
    opacity: 1;
  }
  .scene--flow .flow-copy {
    right: 0;
    left: 52px;
    width: calc(100% - 52px);
    padding: 0 22px 0 16px;
  }
  .flow-story__track::before { left: 0; }
  .flow-story__step {
    left: 22px;
    width: calc(100% - 22px);
  }
  .flow-story__step::before {
    left: -22px;
    width: 12px;
  }
  .flow-story__step h2 { font-size: clamp(36px, 11vw, 44px); }
  .flow-story__sub { margin-top: 16px; font-size: 15px; line-height: 1.4; }
  .flow-story__step--inbox { top: 58vh; }
  .flow-story__step--known { top: 116vh; }
  .flow-story__step--escalate { top: 174vh; }
  .flow-story__step--capture { top: 232vh; }
  .flow-story__step--accountable { top: 290vh; }
}

/* Closing zoom film: calm floating copy over the supplied stone-floor dive. */
.scene--final {
  overflow: hidden;
  isolation: isolate;
  background: #26262a url("./assets/07-final-zoom-poster.jpg") center / cover no-repeat;
}
.final-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
}
.final-video-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(38,38,42,.48) 0, rgba(38,38,42,.2) 42%, transparent 70%),
    linear-gradient(rgba(38,38,42,.35), rgba(38,38,42,.15));
  pointer-events: none;
}
.scene--final .final-copy {
  z-index: 2;
  top: 42%;
  width: min(1040px, 84vw);
}
.final-copy__float {
  position: relative;
  opacity: 1;
  transform: translate3d(var(--final-parallax-x, 0), var(--final-parallax-y, 0), 0);
  transform-style: preserve-3d;
  perspective: 900px;
  pointer-events: none;
  will-change: transform;
}
.final-copy__float::before {
  position: absolute;
  z-index: -1;
  inset: -20% -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(18,18,21,.2) 0, rgba(18,18,21,.09) 44%, transparent 73%);
  content: "";
  filter: blur(24px);
  opacity: .82;
  pointer-events: none;
}
.final-entry {
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.final-entry--label > .eyebrow { animation: final-label-float 5.1s ease-in-out infinite; }
.final-entry--headline > h2 { animation: final-headline-float 6.2s ease-in-out -.8s infinite; }
.final-entry--button > .primary-cta { animation: final-button-float 7.1s ease-in-out -1.6s infinite; }
@keyframes final-label-float {
  0%, 100% { transform: translate3d(0, -2px, 0); }
  50% { transform: translate3d(0, 3px, 0); }
}
@keyframes final-headline-float {
  0%, 100% { transform: translate3d(0, 3px, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}
@keyframes final-button-float {
  0%, 100% { transform: translate3d(0, -1px, 0); }
  50% { transform: translate3d(0, 4px, 0); }
}
.scene--final .final-copy .eyebrow,
.reduced-final-copy .eyebrow {
  margin-bottom: 24px;
  color: rgba(240,238,233,.62);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}
.scene--final .final-copy h2,
.reduced-final-copy h2 {
  color: rgba(240,238,233,.9);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 6.7vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  text-shadow: 0 4px 36px rgba(18,18,20,.26);
}
.scene--final .primary-cta--light,
.reduced-final .primary-cta--light {
  border-color: #f0eee9;
  background: #f0eee9;
  color: #26262a;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.scene--final footer { z-index: 2; }
.reduced-final { display: none; }

@media (max-width: 760px) {
  .scene--final .final-copy {
    top: 40%;
    left: 20px;
    width: calc(100vw - 40px);
    transform: translateY(-50%);
  }
  .scene--final .final-copy h2,
  .reduced-final-copy h2 { font-size: clamp(3rem, 12.5vw, 4.25rem); }
  .scene--final .final-copy .eyebrow,
  .reduced-final-copy .eyebrow { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .final-video { display: none; }
  .final-copy__float { opacity: 1; transform: none; }
  .final-entry { filter: none !important; transform: none !important; }
  .final-entry--label { opacity: .62 !important; }
  .final-entry--headline { opacity: .9 !important; }
  .final-entry--button { opacity: 1 !important; }
  .final-entry > * { animation: none !important; transform: none !important; }
  .reduced-final {
    position: relative;
    display: grid;
    min-height: 100svh;
    overflow: hidden;
    padding: 32px;
    align-items: center;
    background: #26262a url("./assets/07-final-zoom-final.jpg") center / cover no-repeat;
  }
  .reduced-final-copy {
    position: relative;
    z-index: 2;
    width: min(1040px, 84vw);
    margin: -12vh auto 0;
    color: #f0eee9;
    text-align: center;
  }
}

/* Restored cinematic carousel proportions and type treatment. */
@media (min-width: 761px) and (pointer: fine) {
  .experience { height: 4800vh; }
}
.question-carousel { top: 62%; left: 50%; }
.questions-intro {
  top: clamp(132px, 21vh, 164px);
}
.questions-intro h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6.6vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.question-card {
  width: min(296px, 23.2vw);
  min-height: min(377px, 52.4vh);
  padding: 34px;
}
.question-index {
  position: absolute;
  top: 20px;
  left: 34px;
  margin: 0;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}
.question-card h3 {
  max-width: 248px;
  margin-top: 14px;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 72;
}
.question-card p {
  max-width: 248px;
  margin-top: auto;
  padding: 0 0 20px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.3vw, 17px);
  line-height: 1.42;
  transition: none;
}
.question-card--long h3 {
  font-size: clamp(1.7rem, 2.15vw, 2.25rem);
  line-height: 1.04;
}
.question-card--long p {
  font-size: 15px;
  line-height: 1.38;
}
.carousel-count,
.scene--questions .chapter-label {
  font-family: "Inter", Helvetica, Arial, sans-serif;
}
.question-card,
.question-card:not(.is-active),
.question-card.is-active {
  border-color: rgb(255 255 255 / calc(.06 + var(--card-focus, 0) * .17));
  background: rgb(25 25 28 / calc(.01 + var(--card-focus, 0) * .065));
  box-shadow: 0 26px 86px rgb(0 0 0 / calc(.025 + var(--card-focus, 0) * .085));
  backdrop-filter: blur(calc(.25px + var(--card-focus, 0) * 1.25px)) saturate(.92);
}

@media (max-width: 760px) {
  .questions-intro { top: 15vh; }
  .questions-intro h2 { font-size: clamp(3rem, 13vw, 4.6rem); }
  .question-carousel { top: 62%; }
  .question-card {
    width: min(76vw, 310px);
    min-height: min(410px, 57vh);
    padding: 30px;
  }
  .question-index { top: 18px; left: 30px; }
  .question-card h3 { max-width: 250px; margin-top: 12px; }
  .question-card p { max-width: 250px; padding-bottom: 14px; font-size: 15px; }
}

/* Pear-style editorial hero, scoped to the doorway scene. */
.scene--hero {
  --hero-gutter: clamp(42px, 7vw, 124px);
  --hero-baseline: clamp(220px, 26vh, 280px);
  --hero-def-gap: clamp(18px, 2vh, 28px);
  --hero-content-inset: 76px;
  color: white;
}
/* Bleed the source frame beyond the viewport so its top ceiling seam never
   lands on the browser edge during the hero's initial paint. */
.film--doorway {
  scale: 1.045;
  transform-origin: center;
}
.scene--hero .hero-copy {
  top: 0;
  bottom: 0;
  left: var(--hero-gutter);
  width: min(1240px, calc(100vw - var(--hero-gutter) * 2));
  padding: 0;
  transform: none;
  isolation: isolate;
}
.scene--hero .hero-copy__main {
  position: absolute;
  z-index: 1;
  top: 39%;
  left: var(--hero-content-inset);
  width: calc(100% - var(--hero-content-inset));
  transform: translateY(-50%);
}
.scene--hero .hero-copy h1 {
  max-width: min(70vw, 16em);
  color: white;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 4.9vw, 5rem);
  font-variation-settings: "opsz" 120;
  font-weight: 300;
  letter-spacing: -.008em;
  line-height: 1;
  text-wrap: initial;
}
.scene--hero .hero-copy h1 > span,
.scene--hero .hero-copy h1 > em {
  display: block;
}
.scene--hero .hero-copy h1 em {
  font-family: inherit;
  font-style: italic;
  font-weight: 300;
}
.scene--hero .hero-copy .lede {
  max-width: 42ch;
  margin-top: clamp(18px, 1.4vw, 22px);
  color: rgba(255,255,255,.74);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
}
.scene--hero .primary-cta {
  margin-top: clamp(22px, 1.8vw, 26px);
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.1);
  color: white;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Lower definition block — anchored BELOW the baseline guide line with a gap. */
.scene--hero .hero-definition {
  position: absolute;
  z-index: 1;
  top: calc(100% - var(--hero-baseline) + var(--hero-def-gap));
  bottom: auto;
  left: var(--hero-content-inset);
  display: grid;
  width: min(880px, 76vw);
  align-items: start;
  gap: clamp(20px, 2.2vw, 34px);
  grid-template-columns: max-content minmax(0, 46ch);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.scene--hero .hero-definition__label {
  display: inline-flex;
  min-height: 28px;
  padding: 0 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  color: rgba(255,255,255,.78);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.scene--hero .hero-definition p {
  max-width: 48ch;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(.8rem, .95vw, .95rem);
  line-height: 1.55;
}
.scene--hero .hero-guides {
  position: absolute;
  z-index: 3;
  inset: 0;
  color: rgba(255,255,255,.18);
  pointer-events: none;
}
.scene--hero .hero-guide {
  position: absolute;
  display: block;
  background: currentColor;
}
.scene--hero .hero-guide--left,
.scene--hero .hero-guide--right {
  top: 0;
  bottom: 0;
  width: 1px;
}
.scene--hero .hero-guide--left { left: var(--hero-gutter); }
.scene--hero .hero-guide--right { right: var(--hero-gutter); }
.scene--hero .hero-guide--baseline {
  right: 0;
  bottom: var(--hero-baseline);
  left: 0;
  height: 1px;
}
.scene--hero .hero-guide-star {
  position: absolute;
  bottom: calc(var(--hero-baseline) - 6px);
  width: 13px;
  height: 13px;
}
.scene--hero .hero-guide-star--left { left: calc(var(--hero-gutter) - 6px); }
.scene--hero .hero-guide-star--right { right: calc(var(--hero-gutter) - 6px); }
.scene--hero .hero-guide-star::before,
.scene--hero .hero-guide-star::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255,255,255,.46);
  content: "";
  transform: translate(-50%,-50%);
}
.scene--hero .hero-guide-star::before { width: 13px; height: 1px; }
.scene--hero .hero-guide-star::after { width: 1px; height: 13px; }
.scene--hero .hero-orbit { display: none; }
.scene--hero .scroll-cue {
  right: 149px;
  color: rgba(255,255,255,.66);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.scene--hero .scroll-cue span {
  display: inline-block;
  margin-left: 16px;
  font-size: 18px;
  line-height: 1;
  animation: hero-scroll-bob 1.9s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(6px); opacity: 1; }
}
@keyframes hero-definition-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  34% { transform: translate3d(3px,-3px,0) rotate(.12deg); }
  68% { transform: translate3d(-2px,2px,0) rotate(-.08deg); }
}
@media (hover: hover) and (pointer: fine) {
  .scene--hero .hero-definition {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
    transform-origin: left center;
  }
  .scene--hero .hero-definition.is-floating {
    animation: hero-definition-float 2.8s ease-in-out infinite;
    will-change: transform;
  }
  .scene--hero .hero-letter {
    display: inline-block;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
  }
  .scene--hero .hero-letter:hover { transform: translate3d(0,-4px,0); }
  .scene--hero .hero-letter--space { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene--hero .scroll-cue span { animation: none; }
  .scene--hero .hero-definition,
  .scene--hero .hero-definition.is-floating,
  .scene--hero .hero-letter,
  .scene--hero .hero-letter:hover {
    animation: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media (max-width: 760px) {
  .scene--hero {
    --hero-gutter: 20px;
    --hero-lower-bottom: 0px;
    --hero-content-inset: 0px;
  }
  .scene--hero .hero-copy {
    top: 92px;
    right: 20px;
    bottom: 84px;
    left: 20px;
    display: flex;
    width: auto;
    flex-direction: column;
    justify-content: center;
  }
  .scene--hero .hero-copy__main {
    position: relative;
    top: auto;
    transform: none;
  }
  .scene--hero .hero-copy h1 {
    width: 100%;
    max-width: none;
    font-size: clamp(2.5rem, 10.5vw, 3.4rem);
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.02;
  }
  .scene--hero .hero-copy .lede {
    max-width: 31ch;
    margin-top: 20px;
    font-size: 1rem;
  }
  .scene--hero .primary-cta { margin-top: 22px; }
  .scene--hero .hero-definition {
    position: relative;
    top: auto;
    bottom: auto;
    left: 0;
    display: block;
    width: auto;
    margin-top: clamp(34px, 6vh, 52px);
  }
  .scene--hero .hero-definition p {
    max-width: 42ch;
    margin-top: 14px;
    font-size: .78rem;
    line-height: 1.48;
  }
  .scene--hero .hero-guide--right,
  .scene--hero .hero-guide-star--right { display: none; }
  .scene--hero .hero-guide--baseline,
  .scene--hero .hero-guide-star { bottom: 74px; }
  .scene--hero .hero-guide-star { transform: translateY(6px); }
  .scene--hero .scroll-cue { bottom: 28px; }
}

@media (max-width: 420px) and (max-height: 760px) {
  .scene--hero .hero-copy { top: 78px; bottom: 58px; }
  .scene--hero .hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 2.85rem); }
  .scene--hero .hero-copy .lede { margin-top: 14px; font-size: .9rem; }
  .scene--hero .primary-cta { min-height: 44px; margin-top: 16px; }
  .scene--hero .hero-definition { margin-top: 22px; }
  .scene--hero .hero-definition p { font-size: .66rem; line-height: 1.42; }
}

/* Sequential Safety → Questions → Final handoff. */
.scene--questions .questions-intro {
  top: calc(clamp(150px, 25vh, 250px) - 76px);
}
.scene--questions .question-carousel {
  top: calc(64% - 76px);
}

@media (max-width: 760px) {
  .scene--questions .questions-intro { top: 12vh; }
  .scene--questions .question-carousel { top: 67%; }
}

.scene--final .footer-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.scene--final .footer-meta p { margin: 0; }
.scene--final .footer-meta nav { display: flex; gap: 16px; }
.scene--final .footer-meta a {
  color: rgba(255,255,255,.62);
  font-size: 9px;
  letter-spacing: .06em;
  text-decoration: none;
}

/* Mobile parity: run the same cinematic stage and Pear scroll timeline as desktop. */
@media (max-width: 760px), (pointer: coarse) {
  html.mobile-cinematic,
  html.mobile-cinematic body {
    overflow-x: clip;
    overflow-y: visible;
    background: #111114;
  }
  html.mobile-cinematic .mobile-story { display: none !important; }
  html.mobile-cinematic .experience {
    display: block !important;
    height: 7300vh;
  }
  html.mobile-cinematic .chrome {
    display: grid !important;
    height: 82px;
    padding: 10px 20px 0 52px;
    grid-template-columns: 1fr;
  }
  html.mobile-cinematic .chrome .brand {
    position: relative;
    width: 124px;
  }
  html.mobile-cinematic .chrome .brand::before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 16px;
    height: 1px;
    background: rgba(232, 230, 225, .24);
    content: "";
    pointer-events: none;
  }
  html.mobile-cinematic .chrome .brand img {
    filter: brightness(0) saturate(100%) invert(94%) sepia(3%) saturate(226%) hue-rotate(345deg) brightness(103%) contrast(91%);
    opacity: 1;
  }
  html.mobile-cinematic .chapters { display: none !important; }
  html.mobile-cinematic .stage { height: 100svh; }
  html.mobile-cinematic .scene-copy { right: 20px; left: 20px; width: auto; }
  html.mobile-cinematic .chapter-label { top: auto; right: auto; bottom: 26px; left: 20px; }
  html.mobile-cinematic .scene--hero::before {
    background: rgba(0, 0, 0, .64);
    opacity: var(--hero-tint-opacity, 1);
  }
  html.mobile-cinematic .scene--hero .hero-copy {
    top: 76px;
    right: 20px;
    bottom: 24px;
    left: 82px;
    display: flex;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: clamp(88px, calc(10.5svh + 20px), 110px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  html.mobile-cinematic .scene--hero .hero-copy__main {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    transform: translate(-14px, -88px);
  }
  html.mobile-cinematic .scene--hero .hero-copy h1 {
    position: relative;
    isolation: isolate;
    max-width: 10.9em;
    color: #e8e6e1;
    font-size: clamp(1.78rem, 7.7vw, 2.2rem);
    letter-spacing: 0;
    line-height: 1.11;
  }
  html.mobile-cinematic .scene--hero .hero-copy h1 > span,
  html.mobile-cinematic .scene--hero .hero-copy h1 > em {
    text-wrap: balance;
  }
  html.mobile-cinematic .scene--hero .hero-copy h1 > em { color: #f1efea; }
  html.mobile-cinematic .scene--hero .hero-copy .lede {
    max-width: 28ch;
    margin-top: 16px;
    color: #d0cec9;
    font-size: .84rem;
    line-height: 1.5;
  }
  html.mobile-cinematic .scene--hero .primary-cta {
    min-height: 46px;
    margin-top: 18px;
    padding: 0 20px;
    gap: 24px;
    border-color: rgba(240, 238, 234, .65);
    background: rgba(12, 13, 14, .08);
    box-shadow: none;
    color: #f0eeea;
  }
  html.mobile-cinematic .scene--hero .primary-cta span {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-variant-emoji: text;
  }
  html.mobile-cinematic .scene--hero .hero-definition {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin-top: 64px;
    transform: none;
  }
  html.mobile-cinematic .scene--hero .hero-definition::after {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: -30px;
    width: 22px;
    height: 1px;
    background: rgba(232, 230, 225, .24);
    content: "";
    pointer-events: none;
  }
  html.mobile-cinematic .scene--hero .hero-definition > * {
    position: relative;
    z-index: 1;
  }
  html.mobile-cinematic .scene--hero .hero-definition p {
    max-width: 31ch;
    margin-top: 11px;
    color: #d2d0cb;
    font-size: clamp(.64rem, 2.55vw, .7rem);
    line-height: 1.5;
  }
  html.mobile-cinematic .scene--hero .hero-definition__label {
    border-color: rgba(231, 229, 224, .3);
    background: transparent;
    color: #d8d6d1;
  }
  html.mobile-cinematic .scene--hero .hero-guides {
    inset: 0 20px;
    color: rgba(232, 230, 225, .24);
  }
  html.mobile-cinematic .scene--hero .hero-guide--left {
    top: 18px;
    bottom: 8px;
    left: 16px;
  }
  html.mobile-cinematic .scene--hero .hero-guide--baseline,
  html.mobile-cinematic .scene--hero .hero-guide-star {
    bottom: 24px;
  }
  html.mobile-cinematic .scene--hero .hero-guide--baseline {
    left: 16px;
  }
  html.mobile-cinematic .scene--hero .hero-guide-star--left {
    left: 6px;
    width: 21px;
    height: 21px;
    transform: translateY(10px);
  }
  html.mobile-cinematic .scene--hero .hero-guide-star--left::before {
    width: 21px;
    background: rgba(232, 230, 225, .34);
  }
  html.mobile-cinematic .scene--hero .hero-guide-star--left::after {
    height: 21px;
    background: rgba(232, 230, 225, .34);
  }
  html.mobile-cinematic .scene--hero .scroll-cue { display: none; }
  html.mobile-cinematic .problem-copy { top: 18%; transform: none; }
  html.mobile-cinematic .scene--problem::before { background: transparent; }
  html.mobile-cinematic .scene--problem .problem-copy h2,
  html.mobile-cinematic .scene--problem .problem-copy .eyebrow,
  html.mobile-cinematic .scene--problem .problem-copy .lede {
    color: #f0eee9;
    text-shadow: 0 2px 18px rgba(12, 13, 15, .56);
  }
  html.mobile-cinematic .scene--problem .problem-copy .eyebrow { color: rgba(240, 238, 233, .74); }
  html.mobile-cinematic .scene--problem .problem-copy .lede {
    color: rgba(240, 238, 233, .9);
    text-shadow: 0 1px 10px rgba(20, 20, 22, .82);
  }
  html.mobile-cinematic .problem-copy h2 { font-size: clamp(3rem, 13vw, 4.4rem); }
  html.mobile-cinematic .message-field { inset: 0; width: auto; height: auto; }
  html.mobile-cinematic .message {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(78vw, 310px);
  }
  html.mobile-cinematic .message--one { top: 54%; right: 10px; }
  html.mobile-cinematic .message--two { top: 66%; left: 18px; }
  html.mobile-cinematic .message--three { top: 78%; right: 16px; }
  html.mobile-cinematic .scene--flow .flow-copy {
    right: 0;
    left: 43%;
    width: 57%;
    padding: 0 18px 0 12px;
  }
  html.mobile-cinematic .flow-story__track::before { left: 0; }
  html.mobile-cinematic .flow-story__step {
    left: 18px;
    width: calc(100% - 18px);
  }
  html.mobile-cinematic .flow-story__step::before {
    left: -18px;
    width: 10px;
  }
  html.mobile-cinematic .flow-story__number {
    margin-bottom: 9px;
    font-size: 8px;
  }
  html.mobile-cinematic .flow-story__step h2,
  html.mobile-cinematic .flow-story__step--capture h2 {
    font-size: clamp(1.45rem, 6.8vw, 1.75rem);
    letter-spacing: -.025em;
    line-height: 1.05;
  }
  html.mobile-cinematic .flow-story__sub {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.38;
  }
  html.mobile-cinematic .flow-map {
    right: 20px;
    bottom: 7svh;
    left: 20px;
    width: auto;
    height: 72svh;
  }
  html.mobile-cinematic .flow-node {
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(240px, 72vw);
    min-width: 0;
    padding: 12px 14px;
    transform: translateX(-50%);
  }
  html.mobile-cinematic .flow-node strong { font-size: 11px; }
  html.mobile-cinematic .flow-node--incoming { top: 2%; }
  html.mobile-cinematic .flow-node--threshold {
    top: 30%;
    align-items: center;
    text-align: center;
    transform: translateX(-50%);
  }
  html.mobile-cinematic .flow-node--answer { top: 61%; }
  html.mobile-cinematic .flow-node--human { top: 82%; }
  html.mobile-cinematic .packet { right: auto; bottom: auto; }
  html.mobile-cinematic .connections-copy {
    top: 15%;
    right: 20px;
    left: 20px;
    width: auto;
    text-align: left;
    transform: none;
  }
  html.mobile-cinematic .connections-copy h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  html.mobile-cinematic .connection-system { width: 148vw; height: 58vh; }
  html.mobile-cinematic .safety-copy { top: 48%; right: 20px; left: 20px; width: auto; }
  html.mobile-cinematic .safety-copy h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  html.mobile-cinematic .questions-intro { top: 13vh; width: 92vw; }
  html.mobile-cinematic .questions-intro h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  html.mobile-cinematic .question-carousel { top: calc(64% - 76px); }
  html.mobile-cinematic .question-card { width: 74vw; min-height: 330px; padding: 24px; }
  html.mobile-cinematic .question-card h3 { font-size: 1.85rem; }
  html.mobile-cinematic .question-card p { font-size: 12px; }
  html.mobile-cinematic .final-copy { top: 43%; right: 20px; left: 20px; width: auto; }
  html.mobile-cinematic .final-copy h2 { font-size: clamp(3rem, 13vw, 4.2rem); }
  html.mobile-cinematic .scene--final footer { right: 20px; bottom: 24px; left: 20px; }
  html.mobile-cinematic .scene--final footer img { width: 128px; }
  html.mobile-cinematic .scene--final footer p { max-width: 142px; font-size: .52rem; }
}