/* One visual story, with native scrolling and a compact mobile counterpart. */
.hero-scroll-layer { width: 100%; height: 100%; transform-origin: 75% 55%; }
@media (max-width: 1020px) { .hero-scroll-layer { height: auto; } }
html[data-motion="off"] .hero-scroll-layer { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hero-scroll-layer { transform: none !important; } }
@media print { .hero-scroll-layer { height: auto; transform: none !important; } }
.route-explorer { margin: 0 0 clamp(48px, 6vw, 88px); color: var(--paper, #eeeae1); }
.route-sticky { background: var(--ink, #0b1115); padding: 24px 0 10px; border-top: 1px solid var(--line-dark, #394443); }
.route-explorer.is-scroll-story .route-sticky { position: sticky; }
.route-explorer-header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.route-explorer-title { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 400; }
.route-explorer-hint { max-width: 30ch; color: var(--light-muted, #b0bab9); font-size: 12px; line-height: 1.5; }
.route-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.route-step-button { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 70px; padding: 13px 14px; color: var(--paper, #eeeae1); background: transparent; border: 1px solid var(--line-dark, #394443); border-radius: 0; text-align: left; font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; }
.route-step-button::before { content: ''; position: absolute; inset: auto -1px -1px; height: 2px; background: var(--accent, #83ada6); transform: scaleX(0); transform-origin: left; transition: transform 140ms var(--motion-settle); }
.route-step-button[aria-pressed="true"] { background: rgba(131,173,166,.08); border-color: var(--accent, #83ada6); }
.route-step-button[aria-pressed="true"]::before { transform: scaleX(1); }
.route-step-button:focus-visible { outline: 2px solid var(--action, #e78470); outline-offset: 4px; z-index: 1; }
.route-step-number { color: var(--accent, #83ada6); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.7; }
.route-step-name { font-size: 12px; font-weight: 500; line-height: 1.5; }
.route-stage { position: relative; display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.3fr); min-height: 390px; gap: clamp(20px, 4vw, 60px); align-items: center; }
.route-theater { position: relative; grid-column: 2; grid-row: 1; width: 100%; height: 390px; min-width: 0; overflow: hidden; background: #101719; isolation: isolate; }
.route-image-stack, .route-shot { position: absolute; inset: 0; }
.route-shot { opacity: 0; overflow: hidden; clip-path: inset(0% 0% 0% 0%); }
.route-shot.is-active { opacity: 1; }
.route-shot-image { width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.route-shot[data-shot="1"] .route-shot-image, .route-shot[data-shot="2"] .route-shot-image { position: absolute; width: 200%; height: 200%; max-width: none; right: 0; top: -60%; object-fit: contain; transform-origin: 75% 65%; }
.route-shot.is-unavailable { visibility: hidden; }
.route-scene-number { position: absolute; left: 20px; top: 14px; color: var(--accent, #83ada6); font-size: clamp(56px, 7vw, 96px); line-height: 1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; z-index: 2; }
.route-frame-corners { position: absolute; inset: 16px; pointer-events: none; border-top: 1px solid rgba(238,234,225,.12); border-bottom: 1px solid rgba(238,234,225,.12); }
.route-inspection { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 140ms var(--motion-settle); }
.route-explorer[data-route-stage="2"] .route-inspection { opacity: 1; }
.route-inspection-outline { position: absolute; inset: 24% 10% 7% 35%; border: 1px solid var(--accent, #83ada6); }
.route-inspection-outline::before, .route-inspection-outline::after { content: ''; position: absolute; left: -4px; right: -4px; height: 7px; border-left: 1px solid var(--accent, #83ada6); border-right: 1px solid var(--accent, #83ada6); }
.route-inspection-outline::before { top: -4px; }
.route-inspection-outline::after { bottom: -4px; }
.route-inspection-labels { position: absolute; left: 20px; bottom: 40px; display: grid; gap: 8px; color: #b9d2cb; font-size: 11px; line-height: 1.4; }
.route-inspection-labels span { background: #101719; padding: 3px 5px; }
html[data-motion-input="keyboard"] .route-inspection { transition: none; }
.route-detail { grid-column: 1; grid-row: 1; padding: 26px 0; min-width: 0; }
.route-detail-index { margin: 0 0 16px; color: var(--accent, #83ada6); font-size: 11px; font-variant-numeric: tabular-nums; }
.route-detail-title { margin: 0 0 20px; max-width: 16ch; font-size: clamp(27px, 2.6vw, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.route-detail-description { max-width: 45ch; margin: 0 0 24px; color: var(--light-muted, #b0bab9); font-size: 13px; line-height: 1.75; }
.route-result-label { display: block; margin-bottom: 7px; color: var(--accent, #83ada6); font-size: 11px; }
.route-detail-result { margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.65; }
.route-rail { position: relative; height: 1px; margin: 20px 4px 17px; background: var(--line-dark, #394443); }
.route-rail-fill { position: absolute; inset: 0; display: block; background: var(--accent, #83ada6); transform: scaleX(0); transform-origin: left; }
.route-rail-node { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ink, #0b1115); border: 1px solid var(--light-muted, #b0bab9); transform: translate(-50%, -50%); }
.route-rail-node.is-passed { border-color: var(--accent, #83ada6); background: var(--accent, #83ada6); }
.route-scene-caption { margin: 0; color: var(--light-muted, #b0bab9); font-size: 11px; line-height: 1.6; }
.process-steps > li.is-route-active { border-top-color: var(--accent, #83ada6); }
.process-steps > li.is-route-active .step-index { color: var(--accent, #83ada6); }
@media (hover: hover) and (pointer: fine) { .route-step-button:hover { border-color: var(--accent, #83ada6); } }
@media (max-width: 1100px) {
  .route-stage { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); min-height: 360px; gap: 24px; }
  .route-theater { height: 360px; }
  .route-detail-title { font-size: 29px; }
  .route-detail-description { font-size: 12px; }
  .route-step-button { gap: 8px; padding: 12px; }
}
@media (max-width: 999px) {
  .route-stage { min-height: 0; grid-template-columns: 1fr 1.1fr; }
  .route-detail-title { font-size: 26px; }
  .route-detail-description { display: none; }
  .route-theater { height: auto; aspect-ratio: 4/3; }
  .route-explorer-header { align-items: flex-start; }
  .route-explorer-hint { font-size: 11px; }
}
@media (max-width: 640px) {
  .route-sticky { padding-top: 20px; }
  .route-explorer { margin-bottom: 42px; }
  .route-explorer-header { display: block; margin-bottom: 15px; }
  .route-explorer-title { font-size: 23px; }
  .route-explorer-hint { margin-top: 7px; max-width: none; }
  .route-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
  .route-step-button { min-height: 60px; padding: 10px; gap: 8px; }
  .route-step-name { font-size: 12px; }
  .route-step-number { font-size: 10px; }
  .route-stage { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .route-theater { aspect-ratio: 16/9; }
  .route-scene-number { font-size: 50px; left: 12px; top: 9px; }
  .route-frame-corners { inset: 10px; }
  .route-detail { padding: 17px 0 0; min-height: 142px; }
  .route-detail-index { display: none; }
  .route-detail-title { margin-bottom: 11px; max-width: none; font-size: 22px; line-height: 1.15; }
  .route-result-label { font-size: 10px; margin-bottom: 5px; }
  .route-detail-result { font-size: 13px; line-height: 1.6; max-width: none; }
  .route-rail { margin-top: 17px; margin-bottom: 15px; }
  .route-scene-caption { font-size: 11px; line-height: 1.6; }
}
html[data-motion="off"] .route-explorer { min-height: 0 !important; }
html[data-motion="off"] .route-sticky { position: static !important; }
html[data-motion="off"] .route-shot-image { transform: none !important; }
html[data-motion="off"] .route-shot { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .route-explorer { min-height: 0 !important; }
  .route-sticky { position: static !important; }
  .route-shot-image { transform: none !important; }
  .route-shot { clip-path: none !important; }
}
@media print { .route-explorer { display: none !important; } }