/* Phone art direction. Keep the approved film; compose it for a portrait screen. */
@media(max-width:800px){
  :root{--gutter:24px}
  .site-header{height:76px;padding-left:24px;padding-right:18px;gap:12px}
  .site-header .brand{font-size:23px}
  .site-header .header-cta{font-size:12px;min-height:44px;padding:10px 12px;gap:10px}
  .menu-toggle{width:44px;height:44px;padding:10px}
  .mobile-nav>a,.mobile-nav>button{min-height:52px}
  .journey:not(.motion-off) .journey-stage{height:100svh;min-height:0;background:#10130e}
  .journey:not(.motion-off) .film-wrap{inset:0;width:100%;height:100%;background:#10130e}
  .journey:not(.motion-off) .native-film,
  .journey:not(.motion-off) .film-poster{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:55% center}
  .journey:not(.motion-off) .film-scrim{opacity:1;background:linear-gradient(180deg,#0005 0%,transparent 26%,#07100718 40%,#071007cf 75%,#071007ed 100%)}
  .journey:not(.motion-off)[data-chapter="0"] .film-scrim{opacity:1;background:linear-gradient(180deg,#0006,transparent 25%,#07100744 55%,#071007d9 100%)}
  .journey:not(.motion-off) .chapter,
  .journey:not(.motion-off) .chapter:not(.chapter-hero),
  .journey:not(.motion-off) .chapter:not(.chapter-hero):not(.chapter-engineering),
  .journey:not(.motion-off) .chapter:not(.chapter-engineering){left:24px;right:24px;top:auto;bottom:156px;width:auto;max-width:540px;transform:translateY(8px);text-align:left}
  .journey:not(.motion-off) .chapter.is-active{transform:none}
  .journey:not(.motion-off) .chapter.chapter-hero{top:36%;bottom:auto;width:auto;transform:none}
  .journey .chapter-hero h1{font-size:clamp(56px,16vw,82px);line-height:1.08}
  .journey .chapter h2,.journey .chapter[data-chapter="6"] h2{font-size:clamp(32px,8.8vw,48px);line-height:1.08;letter-spacing:-.05em}
  .journey .chapter-description{font-size:17px;line-height:1.5;max-width:440px;margin-top:18px;text-shadow:0 2px 12px #0008}
  .journey .chapter>.button{min-height:46px;font-size:13px;margin-top:20px;padding:12px 17px}
  /* Pull back for the exploded assembly, retaining the full five-part composition. */
  .journey:not(.motion-off)[data-chapter="5"] .native-film,
  .journey:not(.motion-off)[data-chapter="5"] .film-poster{top:72px;height:min(52svh,440px);object-position:53% center}
  .journey:not(.motion-off)[data-chapter="5"] .film-scrim{background:linear-gradient(180deg,#10130e00 30%,#10130e00 42%,#10130e 65%)}
  .journey:not(.motion-off) .chapter-engineering{bottom:156px}
  .journey .chapter-engineering h2{font-size:clamp(30px,8.2vw,44px);max-width:none}
  .journey .chapter-engineering .chapter-description{font-size:16px;max-width:440px;margin-top:14px}
  .journey .part-label{padding:6px 7px;background:#081008c9;border:1px solid #ffffff24;border-radius:4px;min-height:30px;display:flex;align-items:center;max-width:42%}
  .journey .part-label span{font-size:9px;letter-spacing:.015em;white-space:nowrap}
  .journey .part-label:nth-of-type(1){left:16px;top:15%!important}
  .journey .part-label:nth-of-type(2){left:16px;top:25%!important}
  .journey .part-label:nth-of-type(3){left:auto;right:16px;top:15%!important}
  .journey .part-label:nth-of-type(4){left:auto;right:16px;top:25%!important}
  .journey .part-label:nth-of-type(5){left:auto;right:16px;top:36%!important}
  .journey-bottom{left:24px;right:24px;bottom:max(16px,env(safe-area-inset-bottom));grid-template-columns:auto 1fr;gap:8px 10px;padding-top:8px}
  .journey-map{width:min(100%,340px);height:40px;justify-self:stretch}
  .journey .journey-bottom .journey-rail{height:40px}
  .journey .journey-rail button{width:40px;height:40px}
  .journey .journey-rail button span{display:none}
  .journey-bottom .scroll-cue{font-size:9px;letter-spacing:.04em;gap:6px;min-height:44px}
  .journey-bottom .scroll-icon{display:none}
  .journey-bottom .tour-player{font-size:11px;padding:3px;gap:3px;justify-self:end}
  .journey-bottom .tour-primary{min-height:44px;gap:5px;padding:0 7px}
  .journey-bottom .tour-secondary{width:40px;height:40px}
  .tour-percent{display:none}
  .journey-bottom .tour-ring{width:17px;height:17px}
  .dialog input,.dialog textarea,.dialog select{font-size:16px}
  .dialog{max-height:calc(100svh - 24px);overflow:auto}
  .service-body>p,.about-copy p,.capability-intro p,.infrastructure p:not(.eyebrow),.lab-heading>p{font-size:16px;line-height:1.65}
  .service-body ul{font-size:14px;line-height:1.6}
  .project-caption p,.lab-name>span{font-size:12px}
  .site-footer>span,.back-top{font-size:12px}
}
@media(max-width:800px) and (max-height:740px){
  .journey:not(.motion-off) .chapter,
  .journey:not(.motion-off) .chapter:not(.chapter-hero),
  .journey:not(.motion-off) .chapter:not(.chapter-hero):not(.chapter-engineering){bottom:140px}
  .journey:not(.motion-off) .chapter.chapter-hero{top:32%;bottom:auto}
  .journey .chapter h2,.journey .chapter[data-chapter="6"] h2{font-size:30px}
  .journey .chapter-description{font-size:15px;line-height:1.4;margin-top:12px}
  .journey:not(.motion-off) .chapter-engineering{bottom:140px}
  .journey .chapter-engineering .chapter-description{font-size:14px}
  .journey:not(.motion-off)[data-chapter="5"] .native-film,
  .journey:not(.motion-off)[data-chapter="5"] .film-poster{height:46svh}
}
@media(max-width:800px) and (orientation:landscape){
  .journey:not(.motion-off) .chapter:not(.chapter-hero){bottom:90px;max-width:58%}
  .journey .chapter h2,.journey .chapter[data-chapter="6"] h2{font-size:26px}
  .journey .chapter-description{font-size:13px;margin-top:8px}
  .journey-map{display:none}
  .journey-bottom{padding-top:6px;bottom:10px}
  .journey .part-callouts{display:none}
}
@media(max-width:360px){
  .site-header{padding-left:20px;padding-right:12px;gap:6px}
  .site-header .brand{font-size:20px}
  .site-header .header-cta{font-size:11px;padding:9px;gap:0}
  .site-header .header-cta>span{display:none}
  .journey-bottom .scroll-cue{max-width:65px;line-height:1.5;text-align:left}
  .journey .chapter h2,.journey .chapter[data-chapter="6"] h2{font-size:27px}
  .journey .chapter-description{font-size:14px}
}
/* Stable copy position after the headline entrance animation completes. */
@media(max-width:800px){.journey:not(.motion-off) .chapter.chapter.is-active{transform:none}}

/* Reframing follows displayed media time, so reversing a swipe retraces the crop. */
@media(max-width:800px){
  .journey:not(.motion-off) .native-film,
  .journey:not(.motion-off) .film-poster,
  .journey:not(.motion-off)[data-chapter="5"] .native-film,
  .journey:not(.motion-off)[data-chapter="5"] .film-poster{
    top:var(--mobile-film-top,0px);height:var(--mobile-film-height,100%);
    object-position:var(--mobile-film-x,70%) center;
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,calc(1 - var(--mobile-pullback,0))) 100%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,calc(1 - var(--mobile-pullback,0))) 100%);
  }
  .journey:not(.motion-off)[data-chapter="5"] .film-scrim{background:linear-gradient(180deg,#0003,transparent 22%,transparent 48%,#07100770 70%,#071007ed 100%)}
}

/* Hide the upper film boundary as the portrait crop pulls back. */
@media(max-width:800px){
  .site-header:not(.light-surface){background:#000}
  .site-header:not(.light-surface)::before{
    background:none;
  }
}

/* Keep swipes on the sticky film in the document's vertical scroll chain. */
@media(max-width:800px){
  .journey:not(.motion-off),.journey-stage,.chapter-stack{touch-action:pan-y pinch-zoom}
  .journey:not(.motion-off) .journey-stage{overflow:clip}
}

/* Keep the journey map on desktop only. */
@media(max-width:800px){
  .journey .journey-map{display:none}
}