/* ============================================================================
   Kestrel Automotive Intelligence · site.css
   The page's own styles. scrollcraft.css owns the floor and the devices; this
   file owns the rooms, the door, the desk, the office, the corridor, and the
   front desk. Do not restyle .sc-stage, .sc-copy or any [data-sc-*].
   ========================================================================== */

/* ------------------------------------------------------------ tokens ------ */
:root {
  /* Night: the fascia, the back office, the front desk. */
  --sc-canvas:      #0e1822;
  --sc-surface:     #253746;
  --sc-ink:         #f3f6f9;
  --sc-ink-soft:    #a7b4c0;
  --sc-accent:      #e0004d;
  --sc-accent-ink:  #ffffff;
  --sc-shadow-color: 208 40% 4%;

  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;

  --sc-r-sm: 8px; --sc-r-md: 10px; --sc-r-lg: 14px;

  --night: #0e1822;
  --slate: #253746;
  --accent: #e0004d;
  --accent-deep: #c4003f;

  --bar-h: 5.75rem;
}

/* Painted grounds per room. No drift: a room change is a hard edge. */
.room { position: relative; background: var(--sc-canvas); color: var(--sc-ink); }
.room--night { --sc-canvas: #0e1822; --sc-surface: #1a2937; --sc-ink: #f3f6f9; --sc-ink-soft: #a7b4c0; --sc-accent: #e0004d; }
.room--slate { --sc-canvas: #253746; --sc-surface: #2f4455; --sc-ink: #f3f6f9; --sc-ink-soft: #b7c4cf; --sc-accent: #ff2e6e; --sc-shadow-color: 208 40% 8%; }
.room--light { --sc-canvas: #eef2f5; --sc-surface: #ffffff; --sc-ink: #142c41; --sc-ink-soft: #4f6273; --sc-accent: #c4003f; --sc-accent-ink: #ffffff; --sc-shadow-color: 208 30% 30%; }
.room--paper { --sc-canvas: #f7f9fb; --sc-surface: #ffffff; --sc-ink: #142c41; --sc-ink-soft: #4f6273; --sc-accent: #c4003f; --sc-accent-ink: #ffffff; --sc-shadow-color: 208 30% 30%; }
.room--light, .room--paper { color: var(--sc-ink); }

/* Light text on dark wants a touch more air and weight. */
.room--night .sc-body, .room--slate .sc-body { line-height: 1.68; letter-spacing: 0.002em; }

/* ------------------------------------------------------------ shared ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: 0.005em; line-height: 1;
  padding: 0.95em 1.45em; border-radius: var(--sc-r-md);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px rgb(224 0 77 / 0.55), var(--sc-edge); }
.btn--accent:hover { background: #ea1a5f; box-shadow: 0 10px 24px -8px rgb(224 0 77 / 0.6), var(--sc-edge); }
.btn[disabled] { opacity: 0.7; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none;
  color: var(--sc-ink); padding: 0.95em 0.2em;
  border-bottom: 1px solid var(--sc-hairline-strong);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.link-arrow::after { content: "→"; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.link-arrow:hover { border-color: var(--sc-ink); }
.link-arrow:hover::after { transform: translateX(3px); }

h2.sc-display, h3 { text-wrap: balance; }
.room-ask { margin: var(--sc-6) 0 0; }
.room-ask .link-arrow { padding-inline: 0; }

/* --------------------------------------------------------------- bar ------ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
  color: #f3f6f9;
  transition: color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(14 24 34 / 0.75), rgb(14 24 34 / 0));
  opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
body.is-scrolled .bar::before { opacity: 1; }
body[data-room="showroom"] .bar, body[data-room="service"] .bar, body[data-room="agent"] .bar, body[data-room="why"] .bar, body.is-inside .bar { color: #142c41; }
body[data-room="showroom"] .bar::before, body[data-room="service"] .bar::before, body[data-room="agent"] .bar::before, body[data-room="why"] .bar::before, body.is-inside .bar::before {
  background: linear-gradient(to bottom, rgb(238 242 245 / 0.92), rgb(238 242 245 / 0));
}
.bar__mark { display: block; line-height: 0; }
.bar__logo { height: 5rem; width: auto; }
.bar__logo--dark { display: none; }
body[data-room="showroom"] .bar__logo--light, body[data-room="service"] .bar__logo--light, body[data-room="agent"] .bar__logo--light, body[data-room="why"] .bar__logo--light, body.is-inside .bar__logo--light { display: none; }
body[data-room="showroom"] .bar__logo--dark, body[data-room="service"] .bar__logo--dark, body[data-room="agent"] .bar__logo--dark, body[data-room="why"] .bar__logo--dark, body.is-inside .bar__logo--dark { display: block; }

.bar__rooms { display: flex; justify-content: center; gap: var(--sc-6); font-size: var(--sc-t-sm); }
.bar__rooms a {
  position: relative; text-decoration: none; opacity: 0.78; padding: 0.4em 0;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.bar__rooms a::before {
  content: ""; position: absolute; left: -0.9em; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translateY(-50%) scale(0); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.bar__rooms a:hover { opacity: 1; }
.bar__rooms a[aria-current="location"] { opacity: 1; }
.bar__rooms a[aria-current="location"]::before { transform: translateY(-50%) scale(1); }
.bar__cta { justify-self: end; }

/* ------------------------------------------------------------ 1 · door ---- */
.door-stage {
  background: var(--night);
  --door-w: min(46vw, 760px);
  --door-h: min(74vh, 74svh, 900px);
  --door-cx: 63%;
  --door-bottom: 6vh;
  isolation: isolate;
}
.door-scene {
  position: absolute; inset: 0;
  perspective: 1500px;
  transform-origin: var(--door-cx) 55%;
  will-change: transform;
}
.door-interior {
  position: absolute;
  left: calc(var(--door-cx) - var(--door-w) * 1.15);
  bottom: calc(var(--door-bottom) - var(--door-h) * 0.55);
  width: calc(var(--door-w) * 2.3);
  height: calc(var(--door-h) * 1.9);
  will-change: transform;
  transform-origin: 50% 60%;
}
.interior { width: 100%; height: 100%; }

.door-frame {
  position: absolute;
  left: calc(var(--door-cx) - var(--door-w) / 2);
  bottom: var(--door-bottom);
  width: var(--door-w); height: var(--door-h);
  /* the wall: everything outside the opening */
  box-shadow: 0 0 0 300vmax var(--night), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transform-style: preserve-3d;
}
.door-frame::before {
  /* head of the frame */
  content: ""; position: absolute; left: -14px; right: -14px; top: -14px; height: 14px;
  background: #182634; box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset;
}
.door-frame::after {
  content: ""; position: absolute; top: -14px; bottom: 0; width: 14px; left: -14px;
  background: #182634; box-shadow: 0 0 0 0 transparent, calc(var(--door-w) + 14px) 0 0 0 #182634;
}
.door-sill { position: absolute; left: -14px; right: -14px; bottom: -6px; height: 6px; background: #0a121a; }

.door-sign {
  position: absolute; left: 50%; bottom: calc(100% + 14px + min(4vh, 2.5rem));
  translate: -50% 0; width: clamp(3.2rem, 5.2vw, 5rem); line-height: 0;
  filter: drop-shadow(0 0 22px rgb(255 255 255 / 0.28));
}
.door-sign img { width: 100%; height: auto; opacity: 0.95; }

.door-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  overflow: hidden;
  backface-visibility: visible;
  will-change: transform;
  box-shadow: inset 0 0 0 5px #1a2733;
  background: linear-gradient(160deg, rgb(37 55 70 / 0.62), rgb(20 34 48 / 0.46) 55%, rgb(37 55 70 / 0.58));
}
.door-leaf--l { left: 0; transform-origin: 0 50%; }
.door-leaf--r { right: 0; transform-origin: 100% 50%; }
.door-glass {
  position: absolute; inset: 5px;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.02) 22%, transparent 40%, rgb(255 255 255 / 0.06) 70%, transparent 100%);
  backdrop-filter: blur(1.5px) saturate(0.85);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.85);
}
.door-etch {
  position: absolute; top: 50%; width: 112%; translate: 0 -50%;
  opacity: 0.32; line-height: 0; pointer-events: none;
}
.door-leaf--l .door-etch { left: 44%; }
.door-leaf--r .door-etch { left: -56%; }
.door-etch img { width: 100%; height: auto; filter: grayscale(1) brightness(1.6); }
.door-handle {
  position: absolute; top: 34%; height: 30%; width: 7px; border-radius: 4px;
  background: linear-gradient(to right, #dfe7ee, #9fb0bf); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.door-leaf--l .door-handle { right: 18px; }
.door-leaf--r .door-handle { left: 18px; }
.door-stage.is-open .door-leaf { transition: none; }

.hero-scrim { z-index: 2; }
/* The host breathes while the door is on screen. */
.doorman__body { transform-box: fill-box; transform-origin: 50% 100%; }
.door-stage.is-live .doorman__body { animation: doorman-breathe 3.4s ease-in-out infinite; }
@keyframes doorman-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(1.008); } }
@media (prefers-reduced-motion: reduce) { .door-stage.is-live .doorman__body { animation: none; } }
.door-floorfade {
  position: absolute; inset: auto 0 0 0; height: 220px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, #eef2f5);
  opacity: 0; will-change: opacity;
}

.hero-copy { max-width: min(36rem, 38vw); z-index: 4; }
.hero-copy .sc-display--xl { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); max-width: 14ch; }
.hero-copy__lede { margin-top: var(--sc-5); max-width: 36ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.hero-copy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); margin-top: var(--sc-6); }
.hero-beat { color: #142c41; z-index: 4; }
.hero-beat .sc-display { font-size: var(--sc-t-4xl); }

/* ------------------------------------------------------------ 2 · floor --- */
.room--after-pin { padding-block: clamp(3rem, 6vw, 6rem) var(--sc-section); }
.floor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8) var(--sc-9); align-items: end; }
.floor__head .sc-display--lg { max-width: 18ch; }
.floor__body { padding-bottom: 0.3rem; }
.floor__body .sc-lede { color: var(--sc-ink); }
.floor__body .sc-body { margin-top: var(--sc-5); }

/* ------------------------------------------------------------ 3 · desk ---- */
.desk { background: var(--sc-canvas); }
.desk__grid {
  height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--sc-6) var(--sc-9);
}
.desk__front, .desk__back { display: flex; flex-direction: column; min-height: 0; }
/* The conversation lives in a window and scrolls up as it grows, the way a
   real chat does, so it fits whatever height the room has. */
.chat-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%); }
.chat { will-change: transform; padding-top: var(--sc-5); }
.desk__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-3) var(--sc-6); }
.desk__head .sc-display--md { max-width: 24ch; }
.desk__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.desk__side { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }

.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); align-content: start; }
.chat__msg { max-width: 38rem; padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-lg); }
.chat__msg--cust { background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge); justify-self: start; border-bottom-left-radius: 4px; }
.chat__msg--agent { background: #142c41; color: #f3f6f9; justify-self: end; border-bottom-right-radius: 4px; box-shadow: var(--sc-e2); }
.chat__who { display: block; font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.35em; }
.chat__msg--agent .chat__who { color: #ff5c8d; opacity: 1; }
.chat__text { margin: 0; font-size: var(--sc-t-base); line-height: 1.5; text-wrap: pretty; }
/* The conversation plays itself once the room is on screen (site.js). */
.chat__msg { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); transition: opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out); }
.chat__msg.is-on { opacity: 1; transform: none; }
.chat__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.5em; }
.chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: chat-dot 900ms infinite; }
.chat__dots i:nth-child(2) { animation-delay: 150ms; } .chat__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.ledger { margin: 0; display: grid; gap: var(--sc-3); align-content: start; }
.ledger__row { padding: var(--sc-4) 0 var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 480ms var(--sc-ease-out), transform 480ms var(--sc-ease-out); }
.ledger__row.is-on { opacity: 1; transform: none; }
.ledger__row dt { font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ledger__row dd { margin: 0.35em 0 0; font-size: var(--sc-t-base); line-height: 1.5; font-variant-numeric: tabular-nums; }
.ledger__row--accent dt { color: var(--sc-accent); }

/* ------------------------------------------------------------ 4 · bay ----- */
#service { padding-block: var(--sc-section); }
.bay { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.bay__copy .sc-display--lg { max-width: 16ch; }
.cap { margin: var(--sc-8) 0 0; display: grid; }
.cap__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-4); padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline-strong); }
.cap__row:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.cap__row dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug); }
.cap__row dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

.bay__fig { margin: 0; position: sticky; top: calc(var(--bar-h) + var(--sc-6)); }
/* A dark panel in a light room: the mark reads, and the wiring draws itself
   from --sc-p as the section scrolls in (lines 0.10 → 0.34, nodes after). */
.wiring { width: 100%; height: auto; background: #14212d; border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.06); padding: var(--sc-5); }
.wiring__lines path { stroke: #7f95a8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--sc-ease-out); will-change: stroke-dashoffset; }
.bay__fig.sc-in .wiring__lines path { stroke-dashoffset: 0; }
.wiring__lines path:nth-child(1) { transition-delay: 300ms; } .wiring__lines path:nth-child(2) { transition-delay: 380ms; }
.wiring__lines path:nth-child(3) { transition-delay: 700ms; } .wiring__lines path:nth-child(4) { transition-delay: 780ms; }
.wiring__lines path:nth-child(5) { transition-delay: 860ms; } .wiring__lines path:nth-child(6) { transition-delay: 940ms; }
.wiring__node rect { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.14); }
.wiring__node text { fill: #f3f6f9; font-family: var(--sc-font-text); font-size: 15px; font-weight: 500; }
.wiring__node { opacity: 0; transition: opacity 500ms var(--sc-ease-out); transition-delay: calc(500ms + var(--n) * 110ms); }
.bay__fig.sc-in .wiring__node { opacity: 1; }
.wiring__core circle { fill: #253746; stroke: rgb(255 255 255 / 0.1); }
.wiring__core text { fill: #a7b4c0; font-family: var(--sc-font-text); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.bay__fig figcaption { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ 5 · office -- */
.office { background: var(--sc-canvas); }
.office__grid {
  height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-9); align-items: center;
}
.office__copy .sc-display--lg { max-width: 12ch; }
.office__copy .sc-lede { margin-top: var(--sc-6); color: var(--sc-ink); }
.office__copy .sc-body { margin-top: var(--sc-5); }
.office__panel {
  background: #14212d; border-radius: var(--sc-r-lg); padding: var(--sc-6) var(--sc-7); box-shadow: var(--sc-e3), var(--sc-edge);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6) var(--sc-8);
}
.office__label { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.bi h3 { margin: 0 0 var(--sc-4); font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.bi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.bi li { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: var(--sc-3); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.bi li i { display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.08); overflow: hidden; position: relative; }
.bi li i::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--sc-accent); transform-origin: 0 50%;
  /* grows once its group has arrived, each bar a beat after the last */
  transform: scaleX(0); transition: transform 900ms var(--sc-ease-out);
  will-change: transform;
}
.bi.sc-in li i::after { transform: scaleX(var(--v)); }
.bi li:nth-child(1) i::after { transition-delay: 120ms; } .bi li:nth-child(2) i::after { transition-delay: 220ms; }
.bi li:nth-child(3) i::after { transition-delay: 320ms; } .bi li:nth-child(4) i::after { transition-delay: 420ms; }
.bi li b { font-weight: 500; color: var(--sc-ink); text-align: right; font-variant-numeric: tabular-nums; }
.bi--target { grid-column: 1 / -1; padding-top: var(--sc-5); border-top: 1px solid rgb(255 255 255 / 0.08); }
.target { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-6); align-items: center; }
.target__bar { height: 12px; border-radius: 6px; background: rgb(255 255 255 / 0.08); overflow: hidden; position: relative; }
.target__bar i { position: absolute; inset: 0; border-radius: 6px; background: var(--sc-accent); transform-origin: 0 50%;
  transform: scaleX(0); transition: transform 1100ms var(--sc-ease-out) 160ms; will-change: transform; }
.bi--target.sc-in .target__bar i { transform: scaleX(var(--v)); }
.target__nums { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; }
.target__nums b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); color: var(--sc-ink); letter-spacing: var(--sc-track-snug); margin-right: 0.25em; }
@media (prefers-reduced-motion: reduce) { .bi li i::after, .target__bar i { transform: scaleX(var(--v)) !important; transition: none !important; } }

/* ------------------------------------------------------------ 6 · corridor */
.corridor { background: var(--sc-canvas); display: flex; align-items: center; }
.rail { gap: var(--sc-6); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: 0 0 auto; width: clamp(18rem, 26vw, 26rem); align-self: center; padding-right: var(--sc-6); }
.rail__lead .sc-body { margin-top: var(--sc-5); }
.rail__end { flex: 0 0 auto; width: clamp(16rem, 22vw, 22rem); align-self: center; padding-inline: var(--sc-6); }
.moment {
  flex: 0 0 auto; width: clamp(17rem, 21vw, 22rem); align-self: center;
  padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
  display: grid; gap: var(--sc-4); align-content: start; min-height: 17rem;
}
.moment time { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.moment blockquote { margin: 0; font-size: var(--sc-t-base); line-height: 1.4; color: var(--sc-ink); text-wrap: pretty; }
.moment p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
/* Staggered settle: items arrive in sequence as the rail is pulled. */
@media (prefers-reduced-motion: no-preference) {
  .moment { --arr: clamp(0, (var(--sc-p, 1) * 1.25 - (var(--i) - 1) * 0.16) / 0.14, 1); opacity: calc(0.55 + 0.45 * var(--arr)); transform: translateY(calc((1 - var(--arr)) * 18px)); }
}

/* ------------------------------------------------------------ 7 · why ----- */
#why { padding-block: var(--sc-section); overflow: clip; }
.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.why__mark { position: relative; min-height: 20rem; }
.why__mark img { position: absolute; top: -2rem; left: -12%; width: 128%; max-width: none; height: auto; opacity: 0.12; }
.why__copy .sc-display--lg { max-width: 18ch; }
.why__points { margin-top: var(--sc-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-8); }
.why__point:first-child { grid-column: 1 / -1; max-width: 62ch; }
.why__point h3 { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.why__point p { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; }

/* ------------------------------------------------------------ 8 · front --- */
.desk-room { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
.front { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-8) var(--sc-10); align-items: start; padding-block: calc(var(--bar-h) + var(--sc-8)) var(--sc-9); }
.front__copy .sc-display--lg { max-width: 12ch; }
.front__copy .sc-lede { color: var(--sc-ink); }

.form { display: grid; gap: var(--sc-5); background: #14212d; padding: var(--sc-7); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), var(--sc-edge); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__field { display: grid; gap: var(--sc-2); }
.form__field label { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(243 246 249 / 0.8); }
.form input, .form select, .form textarea {
  width: 100%; border-radius: var(--sc-r-md); border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.08);
  padding: 0.75rem 0.85rem; font-size: var(--sc-t-sm); color: #f3f6f9; outline: none;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.form input::placeholder, .form textarea::placeholder { color: rgb(167 180 192 / 0.55); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: rgb(224 0 77 / 0.8); box-shadow: 0 0 0 3px rgb(224 0 77 / 0.28); outline: none; }
.form input[aria-invalid="true"] { border-color: #ff7aa0; }
.form textarea { resize: none; }
.form__select { position: relative; }
.form__select::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #a7b4c0; border-bottom: 1.5px solid #a7b4c0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; }
.form select option { color: #142c41; background: #fff; }
.form__submit { width: 100%; margin-top: var(--sc-2); padding-block: 1.05em; }
.form__arrow { transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.form__submit:hover .form__arrow { transform: translateX(3px); }
.form__status { margin: 0; min-height: 1.4em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__status.is-error { color: #ff7aa0; }
.form__status.is-ok { color: #f3f6f9; }

.foot { border-top: 1px solid rgb(255 255 255 / 0.08); padding-block: var(--sc-7) var(--sc-6); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-6) var(--sc-9); align-items: end; }
.foot__brand img { height: 6.5rem; width: auto; }
.foot__brand p { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-sm); }
.foot__links a { text-decoration: none; color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.foot__links a:hover { color: var(--sc-ink); }
.foot__legal { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* The static door composition has no push-through, so the second beat has
     nowhere light to sit. The headline carries the hero on its own. */
  .hero-beat, .door-floorfade { display: none; }
  .chat__text { clip-path: none; }
  .wiring__lines path { stroke-dashoffset: 0 !important; transition: none !important; }
  .wiring__node { opacity: 1 !important; transition: none !important; }
  .chat__msg, .ledger__row { opacity: 1; transform: none; transition: none; }
  .chat__dots i { animation: none; }
  .moment { opacity: 1; transform: none; }
  .btn, .link-arrow::after, .form__arrow { transition: none; }
}

/* ------------------------------------------------------------ short ------- */
@media (max-height: 820px) and (min-width: 861px) {
  .desk__grid { padding-top: calc(var(--bar-h) + var(--sc-4)); padding-bottom: var(--sc-5); gap: var(--sc-4) var(--sc-8); }
  .desk__head .sc-display--md { font-size: var(--sc-t-xl); }
  .chat__text, .ledger__row dd { font-size: var(--sc-t-sm); }
  .office__grid { padding-top: calc(var(--bar-h) + var(--sc-4)); padding-bottom: var(--sc-5); }
  .office__copy .sc-display--lg { font-size: var(--sc-t-2xl); }
  .office__copy .sc-body { display: none; }
  .office__panel { padding: var(--sc-5) var(--sc-6); gap: var(--sc-5) var(--sc-7); }
}

/* ------------------------------------------------------------ tablet ------ */
@media (max-width: 1100px) {
  .desk__grid, .office__grid { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; gap: var(--sc-5); }
  .office__panel { grid-template-columns: 1fr 1fr; padding: var(--sc-5) var(--sc-6); }
  .why { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

/* ------------------------------------------------------------ phone ------- */
@media (max-width: 860px) {
  :root { --bar-h: 4.75rem; }
  .bar { grid-template-columns: auto 1fr auto; gap: var(--sc-4); }
  .bar__rooms { display: none; }
  .bar__logo { height: 3.4rem; }

  .door-stage { --door-w: min(74vw, 420px); --door-h: min(54svh, 560px); --door-cx: 50%; --door-bottom: 36svh; }
  .door-scene { transform-origin: 50% 45%; }
  .hero-copy { max-width: none; bottom: clamp(1.5rem, 5vh, 3rem); }
  .hero-copy .sc-display--xl { font-size: var(--sc-t-2xl); max-width: 14ch; }
  .hero-copy__lede { margin-top: var(--sc-4); font-size: var(--sc-t-sm); max-width: 40ch; }
  .hero-copy__actions { margin-top: var(--sc-5); }
  .hero-scrim { background: linear-gradient(to top, rgb(14 24 34 / 0.96) 0%, rgb(14 24 34 / 0.8) 30%, rgb(14 24 34 / 0.3) 52%, transparent 66%); }
  .hero-beat .sc-display { font-size: var(--sc-t-3xl); }
  .hero-beat { inset-inline: auto; left: 50%; right: auto; top: 30%; width: max-content; max-width: 92vw; }
  /* Opening shows the room from head height down to the floor (scene y 118 to 706). */
  .door-interior { bottom: calc(var(--door-bottom) - var(--door-h) * 0.5); height: calc(var(--door-h) * 1.7); }
  #agent.is-flowing .chat__text { clip-path: none; }
  .door-sign { width: 2.6rem; }

  .floor, .bay, .why, .front { grid-template-columns: 1fr; gap: var(--sc-6); }
  .floor__head .sc-display--lg, .bay__copy .sc-display--lg, .why__copy .sc-display--lg, .office__copy .sc-display--lg, .front__copy .sc-display--lg { font-size: var(--sc-t-2xl); }

  #agent.is-flowing .desk { position: static; height: auto; min-height: 0; overflow: visible; }
  #agent.is-flowing .desk__grid { height: auto; padding-bottom: var(--sc-8); }
  #agent.is-flowing .chat-viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  #agent.is-flowing .chat { padding-top: 0; }
  #back-office.is-flowing .office { position: static; height: auto; min-height: 0; overflow: visible; }
  #back-office.is-flowing .office__grid { height: auto; padding-bottom: var(--sc-8); }
  #back-office.is-flowing .office__copy .sc-body { display: block; }
  /* Once you scroll, the bar sits on its own dark ground so it is clearly
     separate from whatever room is passing under it. */
  body.is-scrolled .bar { color: #f3f6f9; }
  body.is-scrolled .bar::before { opacity: 1; background: rgb(14 24 34 / 0.94); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
  body.is-scrolled .bar__logo--light { display: block !important; }
  body.is-scrolled .bar__logo--dark { display: none !important; }
  .desk__grid { padding: calc(var(--bar-h) + var(--sc-4)) var(--sc-gutter) var(--sc-5); gap: var(--sc-4); }
  .chat__text { font-size: var(--sc-t-sm); }
  .ledger { gap: var(--sc-2); margin-top: var(--sc-4); }
  .desk__head .sc-display--md { font-size: var(--sc-t-xl); }
  .desk__side { margin-bottom: var(--sc-2); }
  .chat { gap: var(--sc-2); }
  .chat__msg { padding: var(--sc-3) var(--sc-4); }
  .chat__text { font-size: 0.82rem; line-height: 1.4; }
  .chat__who { font-size: 0.62rem; margin-bottom: 0.2em; }
  .ledger { gap: 0; }
  .ledger__row { padding: var(--sc-2) 0; }
  .ledger__row dd { font-size: 0.78rem; line-height: 1.4; }
  .ledger__row br { display: none; }

  .cap__row { grid-template-columns: 1fr; gap: var(--sc-2); }
  .bay__fig { position: static; }

  .office__grid { padding: calc(var(--bar-h) + var(--sc-4)) var(--sc-gutter) var(--sc-5); gap: var(--sc-4); }
  .office__copy .sc-lede { margin-top: var(--sc-3); font-size: var(--sc-t-base); }
  .office__copy .sc-body { display: none; }
  .office__panel { grid-template-columns: 1fr; gap: var(--sc-6); padding: var(--sc-5); }
  .bi h3 { margin-bottom: var(--sc-3); font-size: var(--sc-t-sm); }
  .bi ul { gap: var(--sc-3); }
  .bi li { grid-template-columns: 6rem 1fr 3rem; font-size: var(--sc-t-xs); }
  .bi li i { height: 8px; }
  .bi--target { border-top: 0; padding-top: 0; }
  .target { grid-template-columns: 1fr; gap: var(--sc-3); }
  .target__nums { white-space: normal; }
  .target__nums { font-size: 0.78rem; }
  .target__nums b { font-size: var(--sc-t-lg); }

  .rail { gap: var(--sc-4); }
  .rail__lead { width: min(78vw, 22rem); }
  .moment { width: min(74vw, 20rem); min-height: 15rem; padding: var(--sc-5); }

  .why__mark { display: none; }
  .why__points { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-6); }

  .front { padding-block: calc(var(--bar-h) + var(--sc-6)) var(--sc-7); }
  .form { padding: var(--sc-5); }
  .foot__grid { grid-template-columns: 1fr; align-items: start; }
  .foot__brand img { height: 4.75rem; }
}

@media (max-width: 400px) {
  .door-stage { --door-w: 76vw; --door-h: 50svh; --door-bottom: 38svh; }
  .hero-copy .sc-display--xl { font-size: clamp(1.7rem, 8vw, 2.1rem); }
}