/* Phone and small-tablet refinements, loaded after the desktop composition. */
@media(max-width:767px){
  html{scroll-padding-top:calc(128px + env(safe-area-inset-top));scroll-behavior:auto}
  body.immersive{--mobile-gutter:clamp(18px,5vw,32px)}
  .immersive .header{height:calc(112px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--mobile-gutter) 0;display:grid;grid-template-columns:1fr auto;grid-template-rows:60px 48px;gap:0 12px;background:#101821}
  .immersive .header .wordmark{grid-column:1;grid-row:1;font-size:23px}
  .immersive .header .nav-cta{grid-column:2;grid-row:1;min-height:44px;padding:10px 14px;font-size:12px;display:inline-flex;align-items:center}
  .immersive .header .nav-cta span{margin-left:12px}
  .immersive .header nav{display:flex;grid-column:1/-1;grid-row:2;max-width:none;width:100%;justify-content:space-between;flex-wrap:nowrap;gap:8px;font-size:12px}
  .immersive .header nav a{min-height:44px;display:flex;align-items:center;padding:6px 0}
  .world{height:100svh;bottom:auto}
  .world video{object-position:var(--mobile-framing,50%) center}
  .world-shade{background:linear-gradient(#07131f50,#07131f20 35%,#07131f70)}
  .immersive .summit{height:125svh;min-height:660px}
  .immersive .summit-copy{top:clamp(190px,28svh,260px);padding:0 var(--mobile-gutter)}
  .immersive .summit h1{font-size:clamp(48px,15vw,100px)}
  .immersive .summit-byline{font-size:14px;line-height:1.55;letter-spacing:.3px;max-width:300px;margin:20px auto 0;text-wrap:balance}
  .journey-invitation{left:var(--mobile-gutter);top:calc(100svh - 115px);min-height:44px;display:flex;align-items:center}
  .journey-invitation span{margin:0;font-size:10px;letter-spacing:1.5px}
  .immersive .introduction,.immersive .trail,.immersive .ascent{height:145svh;min-height:780px;padding:160px var(--mobile-gutter) 0}
  .immersive .intro-panel,.immersive .trail-copy,.immersive .ascent-copy{top:calc(140px + env(safe-area-inset-top));padding:18px 0;max-width:100%}
  .immersive .story-copy h2{font-size:clamp(30px,8vw,46px);line-height:1.12;letter-spacing:-1px}
  .immersive .story-copy>p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:360px;margin-top:16px}
  .immersive .story-copy .eyebrow{font-size:10px;letter-spacing:1.5px}
  .immersive .story-copy .text-link{margin-top:16px;min-height:44px;display:inline-flex;align-items:center;font-size:14px}
  .immersive .section{min-height:0;padding:80px var(--mobile-gutter)}
  .immersive .section-heading{display:block;margin-bottom:32px}
  .immersive .section-heading h2,.immersive .contact h2{font-size:clamp(34px,9.5vw,52px);line-height:1.1;letter-spacing:-1.3px}
  .immersive .section-heading .section-aside{margin-top:24px}
  .immersive .eyebrow{overflow-wrap:anywhere;font-size:10px;letter-spacing:1.5px}
  .immersive .text-link{line-height:1.5}
  .youtube-group{scroll-margin-top:12px;min-width:0}
  .youtube-groups{gap:44px}
  .immersive .youtube-group .film-grid,.collaboration-reels{grid-template-columns:1fr;gap:24px}
  .immersive .film-card,.reel-collaboration{min-width:0;background:#142330f2;backdrop-filter:none;padding:12px 12px 20px}
  .immersive .video-open{aspect-ratio:16/9}
  .immersive .film-card h4{font-size:20px;line-height:1.4;overflow-wrap:anywhere}
  .reel-collaboration{max-width:400px;margin:auto;width:100%}
  .immersive .contact-bottom{display:flex;flex-direction:column;align-items:stretch;gap:24px;margin-top:28px}
  .immersive .contact-bottom p{font-size:16px;line-height:1.6;margin:0}
  .immersive .contact-bottom p br{display:initial}
  .immersive .contact-form{padding:24px 18px;margin-top:28px;background:#142330f2;backdrop-filter:none}
  .contact-fields{grid-template-columns:1fr;gap:20px}
  .contact-fields input,.contact-fields textarea{font-size:16px;min-height:48px;scroll-margin-top:150px}
  .form-actions{flex-direction:column;align-items:stretch;gap:18px}
  .immersive .button{min-height:48px;text-align:center;padding:16px 20px}
  .journey-controls{bottom:calc(10px + env(safe-area-inset-bottom));left:var(--mobile-gutter);right:var(--mobile-gutter);pointer-events:none}
  .journey-controls>*{pointer-events:none}
  .journey-controls>span{font-size:9px;letter-spacing:1px;width:auto;flex:initial;background:#101821dd;border-radius:20px;padding:8px 12px}
  .world-progress{display:none}
  body:has(.contact-form :focus) .journey-controls{visibility:hidden}
  .immersive footer{padding:32px var(--mobile-gutter) calc(76px + env(safe-area-inset-bottom));gap:20px;align-items:flex-start;flex-direction:column;backdrop-filter:none;background:#0e1722e8}
  .immersive footer>div{display:flex;flex-wrap:wrap;gap:4px 24px}
  .immersive footer a{min-height:44px;display:inline-flex;align-items:center}
  .immersive dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:16px;overflow:auto}
  .dialog-head{align-items:flex-start;gap:12px;margin-bottom:14px}.dialog-head h2{font-size:18px;line-height:1.4;margin:8px 0;min-width:0}.dialog-head button{min-width:44px;min-height:44px;flex-shrink:0}
  #youtube-fallback{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
  .explorer-cursor{display:none!important}body.cursor-active,body.cursor-active a,body.cursor-active button{cursor:auto}
}
@media(max-width:360px){.immersive .header nav{font-size:11px}.immersive .header .wordmark{font-size:21px}.immersive .story-copy>p:not(.eyebrow){font-size:15px}.immersive .story-copy h2{font-size:30px}}
@media(max-height:500px) and (orientation:landscape) and (max-width:950px){
  .immersive .header{height:64px;display:flex;padding:0 24px}.immersive .header nav{display:flex;width:auto;font-size:11px;gap:16px}.immersive .header .wordmark{font-size:21px}.immersive .header .nav-cta{font-size:11px;padding:10px}
  html{scroll-padding-top:80px}.immersive .summit-copy{top:100px}.immersive .summit{min-height:540px}.journey-invitation{top:calc(100svh - 70px)}
  .immersive .introduction,.immersive .trail,.immersive .ascent{height:auto;min-height:135svh;padding:110px 6% 70px}.immersive .story-copy{position:relative;top:auto;padding:0}.immersive .story-copy h2{font-size:36px}.immersive .story-copy>p:not(.eyebrow){font-size:15px}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .immersive .summit{height:100svh;min-height:580px}.immersive .summit-copy{position:relative;top:auto;padding-top:190px!important}
  .immersive .introduction,.immersive .trail,.immersive .ascent{height:auto;min-height:0;padding:72px var(--mobile-gutter)}.immersive .story-copy{position:relative;top:auto}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:950px){
  .immersive .header{background:#101821}.journey-controls{bottom:8px;pointer-events:none}.journey-controls>*{pointer-events:none}.journey-controls>span{width:auto;background:#101821dd;padding:7px 10px;border-radius:18px;font-size:9px}.world-progress{display:none}.explorer-cursor{display:none!important}body.cursor-active,body.cursor-active a,body.cursor-active button{cursor:auto}
}

/* Local mobile polish: stable reading space, safe edges, and touch targets. */
@media(max-width:767px){
  body.immersive{--mobile-header:calc(104px + env(safe-area-inset-top));overflow-wrap:break-word}
  html{scroll-padding-top:calc(120px + env(safe-area-inset-top))}
  .immersive .header{height:var(--mobile-header);grid-template-rows:56px 48px;padding-left:max(var(--mobile-gutter),env(safe-area-inset-left));padding-right:max(var(--mobile-gutter),env(safe-area-inset-right));border-bottom:1px solid #ffffff18}
  .immersive .header nav a{justify-content:center;flex:1;white-space:nowrap;border-bottom:2px solid transparent}
  .immersive .header nav a[aria-current]{border-bottom-color:#c7dff6;color:#c7dff6}
  .world{height:100lvh}
  .immersive .summit-copy{top:clamp(176px,28svh,260px)}
  .immersive .story-copy{top:calc(var(--mobile-header) + 24px)}
  .immersive .story-copy>p:not(.eyebrow){max-width:38ch}
  .immersive .section{padding-top:64px;padding-bottom:64px}
  .immersive .section-aside{max-width:38ch}
  .immersive .contact-bottom .button{align-self:flex-start;white-space:normal}
  .immersive .contact-form{padding:24px 16px}
  .contact-fields input,.contact-fields textarea{scroll-margin-top:calc(var(--mobile-header) + 28px);border-color:#ffffff70}
  .contact-fields textarea{min-height:160px}
  .cf-turnstile{max-width:100%;margin:20px 0}
  .immersive dialog{max-width:640px;margin:auto;overscroll-behavior:contain;border-radius:12px}
  .immersive dialog .dialog-head{position:sticky;top:-16px;background:var(--paper);z-index:1;padding-top:8px}
  .immersive dialog #player{aspect-ratio:16/9;width:100%}
  .immersive dialog #youtube-fallback{font-size:14px}
  .immersive .youtube-group h3{font-size:26px;line-height:1.2;letter-spacing:-.6px}
  .immersive .reel-collaboration .reel{max-height:70svh;aspect-ratio:9/16;width:auto;margin:auto}
}
/* Sticky paragraphs must fit above the browser controls on shorter phones. */
@media(max-width:767px) and (max-height:740px){
  .immersive .introduction,.immersive .trail,.immersive .ascent{height:auto;min-height:125svh;padding-top:145px;padding-bottom:100px}
  .immersive .story-copy{position:relative;top:auto;padding:0}
}
@media(max-width:360px){
  .immersive .header nav{gap:4px;font-size:10px}
  .immersive .header .nav-cta{padding:10px 12px}
  .immersive .contact-form{padding:22px 12px}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:950px){
  .world{height:100lvh}
  .immersive .header{height:64px}
  .immersive dialog{max-width:560px}
  .immersive dialog #player{max-height:55dvh}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .immersive .introduction,.immersive .trail,.immersive .ascent{min-height:0;height:auto;padding:64px var(--mobile-gutter)}
  .immersive .story-copy{position:relative;top:auto}
}

/* Keep the mountain visible even if iOS has not painted a video frame yet. */
@media(max-width:767px){
  .world{background:#263341 url('/assets/continuous-journey-poster.jpg') 50% center/cover no-repeat}
  .world video{background:transparent}
}
/* Draw the phone loader at its final size instead of enlarging a small layer. */
@media(max-width:767px){
  .preloader .loading-compass{width:104px;height:104px}
  .preloader .loading-compass-face{transform:none;filter:none}
  .preloader .loading-compass .cursor-ring{width:104px;height:104px;left:-52px;top:-52px;border-width:1px;will-change:auto}
  .preloader .loading-compass .cursor-ring:before{inset:12px;border-width:1px}
  .preloader .loading-compass .cursor-ring:after{width:7px;height:7px}
  .preloader .loading-compass .cursor-bearing{font-size:11px}
  .preloader .loading-compass .north{top:-22px}
  .preloader .loading-compass .south{bottom:-22px}
  .preloader .loading-compass .east{right:-22px}
  .preloader .loading-compass .west{left:-22px}
  .preloader .loading-compass .cursor-needle{left:calc(50% - 8px);top:calc(50% - 33px);width:16px;height:66px}
  .preloader .loading-compass .cursor-needle:before,.preloader .loading-compass .cursor-needle:after{width:16px;height:33px}
  .preloader .loading-compass .cursor-core{width:5px;height:5px;left:-2.5px;top:-2.5px;box-shadow:0 0 0 5px #ffffff12}
}
/* Let the mobile hero show through the header, matching desktop. */
@media(max-width:767px), (max-height:500px) and (orientation:landscape) and (max-width:950px){
  .immersive .header{background:linear-gradient(#1018216b,transparent);border-bottom:0}
}

/* Scroll-aware navigation across desktop and mobile. */
.immersive .header{transition:transform .25s ease,background .25s ease}
.immersive .header.is-scrolled{background:#101821f5}
.immersive .header.is-scroll-hidden:not(:focus-within){transform:translateY(-100%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.immersive .header{transition:none}}