.about-road-main{padding-top:0}
.about-arrival{position:relative;height:100svh;background:#f4f3ef}
.about-scene-pending .about-arrival{height:880vh}
.about-scene-pending .about-journey{position:absolute;left:0;right:0;visibility:hidden}
.about-arrival-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#f4f3ef;isolation:isolate;perspective:1200px}
.about-arrival-wordmark{position:absolute;z-index:0;top:14%;left:50%;width:112vw;height:20vw;transform:translate(calc(-50% + var(--word-retreat,0px)),var(--word-shift,0px));color:#e5e5e2;background:currentColor;mask:url('./assets/zenfrost-display-wordmark.svg') center/100% 100% no-repeat;font-size:0;opacity:var(--word-opacity,1);user-select:none}
.about-opening-services{position:absolute;z-index:2;top:46%;left:50%;width:max-content;max-width:94%;margin:0;padding:clamp(50px,8vh,100px) 0;display:grid;grid-template-columns:repeat(4,max-content);gap:clamp(28px,5vw,100px);list-style:none;color:#f4f3ef;transform-origin:center top;transform:translate3d(calc(-50% + var(--service-retreat,0px)),var(--service-drop,0px),0) rotateX(var(--service-fold,0deg));opacity:var(--service-opacity,1);backface-visibility:hidden;pointer-events:none}
.about-opening-services li{padding-left:24px;border-left:1px solid #292929}
.about-opening-services svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.about-opening-services h2{margin:0;font-size:clamp(20px,2.1vw,34px);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.about-arrival-band{position:absolute;inset:46% 0 0;background:#0c0c0c}
.about-arrival-side-truck{position:absolute;left:50%;bottom:54%;width:55%;transform:translate(-50%,7.3%)}
.about-arrival-road,.about-arrival-oblique-truck,.about-arrival-truck{display:none}
.about-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.has-road-scene .about-arrival-band,.has-road-scene .about-arrival-side-truck{display:none}
.has-road-scene .about-journey{position:absolute;inset:0;height:100%;z-index:2;background:transparent;opacity:0;visibility:hidden}
.has-road-scene .about-journey-sticky{position:static;height:100%}
.has-road-scene .about-road,.has-road-scene .about-side{background:transparent;box-shadow:none}
.has-road-scene .about-road::before,.has-road-scene .about-road::after,.has-road-scene .about-road-truck{display:none}
@media(max-width:780px){.about-arrival-wordmark{top:30%;width:112vw;height:22vw}.about-arrival-side-truck{width:91%}.about-opening-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding:36px 20px}.about-opening-services li{padding-left:14px}.about-opening-services svg{width:32px;height:32px;margin-bottom:12px}.about-opening-services h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){
  .about-arrival{height:auto!important}
  .about-arrival-sticky{position:static;height:auto;padding-top:94px;background:#0c0c0c}
  .about-arrival-wordmark,.about-arrival-band,.about-arrival-side-truck,.about-scene{display:none}
  .about-opening-services{position:static;transform:none;opacity:1;padding-block:50px;margin-inline:auto}
  .about-road-main .about-journey{height:auto}
  .about-road-main .about-journey-sticky{position:static;height:auto;overflow:visible}
  .about-road-main .about-journey-grid{display:flex;flex-direction:column;padding:32px clamp(20px,8vw,120px);gap:64px}
  .about-road-main .about-side{display:contents}
  .about-road-main .about-road{display:none}
  .about-road-main .about-phase{position:static;opacity:1!important;transform:none!important;pointer-events:auto;max-width:720px;width:100%;margin-inline:auto}
}

/* Portrait phone composition: center the road and keep both media columns visible. */
@media (max-width: 780px) and (orientation: portrait) {
  .about-road-main { --road-width: clamp(58px, 18vw, 76px); }
  .about-road-main .about-journey-grid {
    grid-template-columns: var(--road-width) minmax(0, 1fr);
  }
  .about-road-main .about-road { grid-column: 1; grid-row: 1; }
  .about-road-main .about-side-left,
  .about-road-main .about-side-right { grid-column: 2; grid-row: 1; }
  .about-road-main .about-phase { inset-inline: 12px; }
  .about-road-main .about-phase { transition: opacity 280ms ease; }
  .about-road-main .about-side-left [data-phase="1"],
  .about-road-main .about-side-left [data-phase="2"],
  .about-road-main .about-side-left [data-phase="3"],
  .about-road-main .about-side-left [data-phase="4"] {
    inset-block-start: clamp(142px, 22svh, 170px);
  }
  .about-road-main .about-side-right [data-phase="1"],
  .about-road-main .about-side-right [data-phase="2"],
  .about-road-main .about-side-right [data-phase="3"],
  .about-road-main .about-side-right [data-phase="4"] {
    inset-block-start: max(clamp(360px, 54svh, 390px), env(safe-area-inset-top));
  }
  .about-road-main .about-factory-intro-copy {
    width: 100%; margin-bottom: 10px;
    font-size: clamp(.875rem, 3.8vw, .94rem);
    line-height: 1.35; letter-spacing: -.025em;
  }
  .about-road-main .about-production-intro { inset-inline: 8px; }
  .about-road-main .about-production-intro .about-factory-intro-copy {
    font-size: clamp(.875rem, 3.7vw, .9rem);
  }
  .about-road-main .about-photo-slot {
    width: 100%; aspect-ratio: 1.7 / 1; border-radius: 2px;
  }
  .about-road-main .about-video-slot video { object-fit: cover; }
  .about-road-main .about-video-fit video { object-fit: contain; }
  .about-road-main .about-road-truck {
    width: clamp(54px, 15vw, 68px);
    height: clamp(112px, 30svh, 154px);
  }
  .about-road-main .about-mile-marker {
    left: 5px; font-size: .46rem; letter-spacing: .08em; writing-mode: vertical-rl;
  }
  .about-arrival-wordmark { top: 27%; width: 124vw; height: 24vw; }
  .about-opening-services {
    top: 43%; width: min(100%, 430px); max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px;
    padding: 28px 14px max(28px, env(safe-area-inset-bottom));
  }
  .about-opening-services li { min-width: 0; padding-left: 10px; }
  .about-opening-services svg { width: 27px; height: 27px; margin-bottom: 8px; }
  .about-opening-services h2 {
    font-size: clamp(.83rem, 3.8vw, 1rem); line-height: 1.25; overflow-wrap: anywhere;
  }
}