/* Editorial desktop layers + a purpose-built, portrait mobile stage. */
.mobile-copy,.mobile-actions{display:none}
.scroll-invite .desktop-copy{font:inherit;letter-spacing:inherit;border:0;width:auto;height:auto;transform:none}
.content-panel,.content-panel.offset{background:none;border:0;box-shadow:none;padding:0;width:360px;max-width:34vw;color:var(--paper);text-shadow:0 2px 25px #07120dda}
.content-panel h2{font-size:clamp(37px,3.9vw,58px);line-height:1.02;letter-spacing:-.055em}
.content-panel .eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:22px;color:#d5e6be}
.content-panel>p:not(.eyebrow){font-size:12px;max-width:285px;line-height:1.85;color:#f1f2e8}
.content-panel small{max-width:275px;color:#d0d7c8}
.content-panel .button,.content-panel .text-link{font-size:11px;min-height:44px;border-color:#d7ed908c}
.content-panel,.scenic-line{opacity:var(--presence,1);transform:translateY(var(--drift,0));will-change:opacity,transform}
.content-panel:focus-within{opacity:1!important;transform:none!important}
.breathing-room{height:115svh;justify-content:flex-start;padding:0 8%}
.breathing-room .scenic-line{font-size:clamp(48px,7.5vw,110px);letter-spacing:-.057em;line-height:.96;font-weight:400;text-shadow:0 3px 45px #07110c99;max-width:650px}
.scenic-line em{color:var(--lime)}
.breathing-room .quieter{font-size:clamp(42px,6vw,82px)}
.dialog-close{min-width:44px;min-height:44px;background:#f4f0e6ee}
#bike-finder{overscroll-behavior:contain;scroll-padding-bottom:22px}
#bike-finder select{font-size:16px}
.still-mode .content-panel,.still-mode .scenic-line{opacity:1;transform:none}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 :root{--dock-space:calc(86px + env(safe-area-inset-bottom,0px));--top-space:calc(64px + env(safe-area-inset-top,0px));--scene-size:min(100vw,calc(100svh - 155px))}
 html{scroll-padding-top:var(--top-space)}
 body{background:transparent}
 .desktop-copy{display:none!important}.mobile-copy{display:inline}
 .cinema{background:#101916;inset:0;height:100svh}
 .media-layer{inset:auto 0 auto;top:calc((100svh - var(--scene-size))/2 + 8px);height:var(--scene-size);width:100%;transform:none!important;overflow:hidden;will-change:auto}
 .media-layer video,.media-layer .poster{width:100%;height:100%;object-fit:contain!important;object-position:center!important}
 .cinema:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#101916 0%,transparent 22%,transparent 77%,#101916 100%)}
 .cinema-shade{background:linear-gradient(0deg,#101916aa,transparent 28%,transparent 65%,#10191622);opacity:.6}
 .site-header{height:var(--top-space);padding:env(safe-area-inset-top,0px) 22px 0;background:linear-gradient(#101916,#10191600);backdrop-filter:none;gap:0}
 .site-header .logo{font-size:29px;letter-spacing:-2.8px}
 .site-header nav,.site-header>.button{display:none}
 .ride-hud{inset:0;pointer-events:none;transition:none}
 .ride-meter{display:none!important}
 #motion-toggle{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));min-width:88px;min-height:44px;padding:10px 12px;margin:0;background:transparent;border-color:#ffffff36;font-size:10px;pointer-events:auto}
 .mobile-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:9px;position:fixed;bottom:0;left:0;right:0;z-index:25;padding:10px max(18px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));background:linear-gradient(#10191600,#101916 28%)}
 .mobile-actions button,.mobile-actions a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 17px;border-radius:3px;font-size:12px;font-weight:600;background:var(--lime);color:#182419}
 .mobile-actions a{background:#1c2823;color:var(--paper);border:1px solid #c9d6be4a}
 .mobile-actions span{font-size:22px;font-weight:400}
 .dialog-open .mobile-actions{visibility:hidden}
 .asset-status{top:var(--top-space);left:22px;font-size:7px}
 .hero{min-height:155svh;padding:calc(var(--top-space) + 22px) 24px 0;align-items:flex-start}
 .hero-copy{max-width:340px}
 .hero .eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:15px;max-width:none}
 .hero h1{font-size:clamp(38px,11vw,49px);line-height:.96;letter-spacing:-.058em}
 .scroll-invite{top:calc(100svh - var(--dock-space) - 35px);left:24px;right:auto;bottom:auto;font-size:8px;letter-spacing:1.4px;gap:9px;writing-mode:horizontal-tb}
 .scroll-invite>span:first-child{border:0;width:20px;height:25px;transform:none;font-size:20px}
 .scroll-invite .mobile-copy{font:inherit;border:0;display:inline;width:auto;height:auto;transform:none}
 .story:not(.hero):not(.footer):not(.next-step){min-height:160svh;padding:0 24px 18svh;align-items:flex-end}
 .content-panel,.content-panel.offset{width:100%;max-width:330px;padding:0;background:none;border:0;box-shadow:none;text-shadow:0 2px 20px #101916}
 .content-panel h2{font-size:clamp(29px,8.8vw,38px);line-height:1.01}
 .content-panel .eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:12px}
 .content-panel>p:not(.eyebrow){font-size:11px;line-height:1.55;margin:13px 0 7px;max-width:255px}
 .content-panel small{display:none}
 .content-panel .button,.content-panel .text-link{font-size:10px;min-height:44px;gap:24px;margin:0;padding:5px 0}
 .breathing-room{height:125svh;padding:0 24px;align-items:flex-end;padding-bottom:25svh}
 .breathing-room .scenic-line{font-size:clamp(42px,13vw,59px);line-height:.96;max-width:310px;letter-spacing:-.055em}
 .breathing-room .quieter{font-size:clamp(36px,11vw,48px)}
 .next-step{min-height:150svh;padding:0 24px 22svh;align-items:flex-end}
 .next-step>div{max-width:300px}.next-step .eyebrow{font-size:7px;margin-bottom:15px}
 .next-step h2{font-size:35px;margin-bottom:18px}
 .next-step .button{display:none}
 .finale{height:200svh}
 .finale-inner{height:100svh;align-items:flex-start;justify-content:flex-start;padding:calc(var(--top-space) + 28px) 24px var(--dock-space)}
 .finale-copy{text-align:left;max-width:330px;transform:none!important;will-change:opacity}
 .finale-copy .eyebrow{justify-content:flex-start;font-size:7px;letter-spacing:1.2px;margin-bottom:15px}
 .finale-copy h2{font-size:clamp(34px,10vw,44px);line-height:1.02}
 .finale-actions{display:none}
 .finale-footnote{position:absolute;bottom:calc(var(--dock-space) + 9px);left:24px;right:24px;justify-content:flex-start;gap:3px 12px;font-size:7px;margin:0;max-width:360px}
 .finale-footnote>span:last-child{font-size:6px}
 .finale-active:not(.finale-clear) .cinema-shade{background:linear-gradient(0deg,#101916,transparent 32%,transparent 68%,#10191666)}
 .finale-clear .mobile-actions{opacity:1}
 #bike-finder{width:100%;max-width:none;margin:auto 0 0;max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px));border:0;border-radius:15px 15px 0 0}
 #bike-finder .finder-panel{padding:24px 24px calc(28px + env(safe-area-inset-bottom,0px));display:block}
 #bike-finder h2{font-size:30px;max-width:300px}
 #bike-finder .eyebrow{font-size:7px;margin-bottom:13px;padding-right:40px}
 #bike-finder .finder-panel>div>p{font-size:12px;margin-top:13px}
 #bike-finder .finder-panel form{margin-top:24px}
 #bike-finder .choice span{min-height:61px;padding:14px 13px;font-size:13px}
 #bike-finder .choice small{font-size:10px}
 #bike-finder .dialog-close{top:8px;right:7px;margin:8px 9px -52px auto;min-width:44px;min-height:44px}
 #bike-finder .budget{margin-top:22px}
 #bike-finder .budget select{padding:15px 0;font-size:16px;min-height:48px}
 .still-mode .media-layer{opacity:.6}
 .still-mode .cinema-shade{background:#10191666}
 .still-mode .hero{min-height:100svh;padding-top:calc(var(--top-space) + 25px)}
 .still-mode .story:not(.hero){min-height:0;padding:65px 24px;align-items:center}
 .still-mode .content-panel{background:none;width:100%;max-width:330px}
 .still-mode .finale{min-height:85svh;height:auto}
 .still-mode .finale-inner{min-height:85svh;padding-top:65px;padding-bottom:calc(var(--dock-space) + 100px)}
 .still-mode .finale-footnote{bottom:calc(var(--dock-space) + 10px)}
 .still-mode .next-step .button{display:inline-flex}
 .noscript{padding-bottom:var(--dock-space)}
}
@media(max-width:350px){.hero{padding-left:20px;padding-right:20px}.hero .eyebrow{font-size:6px;letter-spacing:1px}.hero h1{font-size:38px}.mobile-actions{gap:7px;padding-left:12px;padding-right:12px}.mobile-actions button,.mobile-actions a{padding:0 13px;font-size:11px}.finale-copy h2{font-size:34px}.finale-copy .eyebrow{font-size:6px}.finale-inner{padding-top:calc(var(--top-space) + 18px)}}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 :root{--scene-size:100svh;--top-space:54px;--dock-space:78px}
 .media-layer{left:37%;right:0;top:0;width:63%;height:100svh}.media-layer video,.media-layer .poster{object-fit:contain!important}
 .cinema:after{background:linear-gradient(90deg,#101916 20%,transparent 68%)}
 .site-header{padding-left:20px}.hero{padding:85px 20px 0;min-height:155svh}.hero h1{font-size:39px}.hero .eyebrow{font-size:6px;max-width:230px}
 .mobile-actions{right:auto;width:36%;min-width:260px;grid-template-columns:1fr 1fr;padding:10px 12px 12px;gap:7px}.mobile-actions button,.mobile-actions a{min-height:48px;font-size:10px;padding:0 11px}
 .scroll-invite{left:20px;top:calc(100svh - 113px)}
 .content-panel,.next-step>div{max-width:260px}.content-panel h2{font-size:32px}.content-panel>p:not(.eyebrow){max-width:220px}
 .story:not(.hero):not(.footer):not(.next-step){padding-left:20px}.breathing-room{padding-left:20px}.breathing-room .scenic-line{font-size:46px}.finale-inner{padding-top:80px;padding-left:20px}.finale-copy{max-width:270px}.finale-copy h2{font-size:35px}.finale-footnote{left:20px;max-width:250px;bottom:calc(var(--dock-space) + 5px)}
 #bike-finder{width:min(650px,95vw);margin:auto;max-height:calc(100dvh - 20px);border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.content-panel,.scenic-line{opacity:1;transform:none;will-change:auto}}
/* Keep the headline above the scene on short portrait screens. */
@media(max-width:760px) and (max-height:650px) and (orientation:portrait){
 :root{--scene-size:min(100vw,calc(100svh - 280px))}
 .media-layer{top:190px}
}

/* Mobile copy parity: one narrative at every breakpoint. Build mobile-copy-20261010-v2. */
#journey .content-panel,#journey .content-panel.offset,.still-mode #journey .content-panel{
 background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;
}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 :root{--scene-size:min(100vw,max(130px,calc(100svh - 420px)))}
 .media-layer{top:calc(100svh - var(--dock-space) - var(--scene-size) - 44px);height:var(--scene-size);width:100%;left:0;right:0}
 .media-layer video,.media-layer .poster{object-fit:contain!important;object-position:center!important}
 .hero{padding:calc(var(--top-space) + 22px) 24px 0}
 .hero-copy{width:100%;max-width:390px}
 .hero .eyebrow{font-size:10px;line-height:1.5;letter-spacing:1px;max-width:none;margin-bottom:16px;gap:9px}
 .hero h1{font-size:clamp(36px,11vw,48px);line-height:.98;letter-spacing:-.055em}
 .hero .lead{display:block;font-size:16px;line-height:1.5;margin:14px 0 0;max-width:300px}
 .scroll-invite{top:calc(100svh - var(--dock-space) - 30px);font-size:10px;letter-spacing:1px;line-height:1.4;gap:9px}
 #journey .content-panel,#journey .content-panel.offset{width:100%;max-width:390px;margin-left:0;text-shadow:0 2px 22px #07120deb}
 .content-panel h2{font-size:clamp(34px,10vw,44px);line-height:1.02}
 .content-panel .eyebrow{font-size:10px;line-height:1.5;letter-spacing:1px;margin-bottom:16px}
 .content-panel>p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:none;margin:18px 0 12px;color:#f4f0e6}
 .content-panel small{display:block;font-size:12px;line-height:1.5;max-width:none;margin-top:12px;color:#e0e8d8}
 .content-panel .button,.content-panel .text-link{font-size:15px;line-height:1.4;min-height:48px;padding:8px 0;gap:15px}
 .content-panel .button>span,.content-panel .text-link>span{display:none}
 .mobile-actions{grid-template-columns:1fr 1fr;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
 .mobile-actions button,.mobile-actions a{min-height:54px;padding:0 16px;justify-content:center;border-radius:999px;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
 .mobile-actions button{background:var(--lime);color:#17221b}
 .mobile-actions a{background:#101916e6;border:1px solid #e8efdc80;color:var(--paper)}
 .mobile-actions :is(button,a):focus-visible{outline:3px solid #fff;outline-offset:3px}
 .next-step .eyebrow,.finale-copy .eyebrow{font-size:10px;letter-spacing:1px}
 .finale-footnote,.finale-footnote>span:last-child{font-size:11px;line-height:1.4}
 .finale-footnote{gap:5px 12px;bottom:calc(var(--dock-space) + 12px)}
 .still-mode .hero{padding-top:calc(var(--top-space) + 22px)}
 .still-mode .content-panel{background:transparent!important}
}
@media(max-width:350px){
 .hero{padding-left:20px;padding-right:20px}
 .hero h1{font-size:36px}.hero .eyebrow{font-size:9px;letter-spacing:.8px}
 .mobile-actions{padding-left:12px;padding-right:12px;gap:8px}
 .mobile-actions button,.mobile-actions a{font-size:14px;padding:0 12px}
}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 :root{--scene-size:100svh;--top-space:54px;--dock-space:78px}
 .media-layer{left:45%;right:0;top:0;width:55%;height:100svh}
 .cinema:after{background:linear-gradient(90deg,#101916 28%,transparent 48%)}
 .hero{padding:76px 20px 0;min-height:160svh}
 .hero-copy{max-width:calc(45vw - 40px)}
 .hero h1{font-size:clamp(32px,4.7vw,40px)}
 .hero .eyebrow{font-size:9px;letter-spacing:.8px;margin-bottom:12px}
 .hero .lead{font-size:15px;line-height:1.45;margin-top:12px}
 .scroll-invite{left:20px;top:calc(100svh - 106px);font-size:9px;letter-spacing:.8px}
 .story:not(.hero):not(.footer):not(.next-step){padding-left:20px;padding-right:calc(55vw + 20px);min-height:210svh}
 #journey .content-panel,#journey .content-panel.offset{max-width:none;width:100%}
 .content-panel h2{font-size:34px}.content-panel>p:not(.eyebrow){font-size:16px;line-height:1.5}
 .content-panel small{font-size:12px}
 .mobile-actions{right:auto;width:44%;min-width:280px;padding:10px 12px 12px;gap:8px}
 .mobile-actions button,.mobile-actions a{min-height:52px;font-size:14px;padding:0 12px}
 .breathing-room{padding-left:20px;padding-right:55vw}
 .breathing-room .scenic-line{font-size:46px;max-width:calc(45vw - 40px)}
 .next-step{padding-left:20px;padding-right:calc(55vw + 20px)}
 .finale-copy{max-width:calc(45vw - 40px)}
 .finale-footnote{max-width:calc(45vw - 40px);font-size:10px}
 .finale-footnote>span:last-child{font-size:10px}
}

/* Immersive mobile scene, preserving the approved action dock. */
#motion-toggle{position:fixed!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;overflow:hidden!important;clip-path:inset(50%);padding:0!important;border:0!important;white-space:nowrap}
#motion-toggle:focus-visible{width:auto!important;height:auto!important;min-height:44px!important;clip-path:none;right:20px!important;top:16px!important;bottom:auto!important;padding:10px 16px!important;background:#101916!important;z-index:100;outline:2px solid #d7ed90}
.media-layer .scene-ambience{position:absolute;inset:-5%;width:110%;height:110%;filter:blur(28px);object-fit:cover;opacity:.75;z-index:0}
.media-layer video{z-index:1}.media-layer .poster{z-index:2}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 .cinema{inset:0;height:100svh;background:#101916}
 .media-layer{inset:0!important;width:100%!important;height:100svh!important;transform:none!important}
 .media-layer video,.media-layer .poster{object-fit:cover!important;object-position:50% 52%!important}
 .cinema:after{background:linear-gradient(0deg,#10191655,transparent 25%)}
 .cinema-shade{background:linear-gradient(180deg,#101916 0%,#101916ed 22%,#101916aa 36%,#1019161a 60%,transparent 75%);opacity:1}
 .content-panel,.scenic-line{opacity:1!important;transform:none!important;clip-path:none!important;will-change:auto}
 .story:not(.hero):not(.footer):not(.next-step){min-height:155svh;display:flex;align-items:flex-start;padding:calc(var(--top-space) + 30px) 24px 35svh}
 #journey .content-panel{position:static;max-width:390px;text-shadow:0 2px 15px #07120d,0 1px 3px #07120d}
 .content-panel .eyebrow{margin-bottom:12px}.content-panel>p:not(.eyebrow){margin:14px 0 8px}.content-panel small{margin-top:8px}
 .breathing-room{height:145svh;align-items:flex-start;padding:calc(var(--top-space) + 30px) 24px 0}
 .next-step{min-height:145svh;align-items:flex-start;padding:calc(var(--top-space) + 30px) 24px 0}
 .scroll-invite{top:calc(100svh - var(--dock-space) - 38px)}
 .still-mode .media-layer{opacity:1}
 .still-mode .cinema-shade{background:linear-gradient(180deg,#101916 0%,#101916f0 28%,#10191699 48%,transparent 75%)}
 .still-mode .story:not(.hero){min-height:100svh;padding:calc(var(--top-space) + 25px) 24px 25svh;align-items:flex-start}
 .finale-active:not(.finale-clear) .cinema-shade{background:linear-gradient(180deg,#101916f0 0%,#101916c0 28%,transparent 62%)}
}
@media(max-width:760px) and (orientation:portrait){
 .media-layer video,.media-layer .poster{top:calc(100svh - 100vw - 34px)!important;bottom:auto!important;width:100%!important;height:100vw!important;mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%)}
 .hero .lead{margin-top:14px}
}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .media-layer video,.media-layer .poster{inset:0!important;width:100%!important;height:100%!important;object-position:66% 62%!important;mask-image:none}
 .cinema-shade{background:linear-gradient(90deg,#101916f0 0%,#101916d9 30%,#10191642 49%,transparent 68%)}
 .hero-copy{max-width:calc(43vw - 40px)}
 .story:not(.hero):not(.footer):not(.next-step){padding:68px calc(57vw + 20px) 20svh 20px}
 .content-panel h2{font-size:30px}.content-panel>p:not(.eyebrow){line-height:1.45;margin:10px 0 4px}.content-panel small{margin-top:4px;line-height:1.4}
 .breathing-room{padding-left:20px;padding-right:57vw}.next-step{padding-left:20px;padding-right:57vw}
 .still-mode .cinema-shade,.finale-active:not(.finale-clear) .cinema-shade{background:linear-gradient(90deg,#101916f0 0%,#101916dd 32%,transparent 68%)}
}

/* Visible viewport alignment: mobile toolbar states share the same scene and dock bounds. */
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 :root{--coqs-visible-height:100svh;--coqs-dock-height:var(--dock-space)}
 @supports(height:100dvh){:root{--coqs-visible-height:100dvh}}
 .cinema{height:var(--coqs-visible-height);bottom:auto}
 .media-layer{height:var(--coqs-visible-height)!important}
 .scroll-invite{top:calc(var(--coqs-visible-height) - var(--coqs-dock-height) - 34px)}
}
@media(max-width:760px) and (orientation:portrait){
 .media-layer video,.media-layer .poster{top:calc(var(--coqs-visible-height) - 100vw - max(34px,calc(var(--coqs-dock-height) - 44px)))!important}
}
/* A functional status notice remains legible over every frame of the scene. */
.hero .launch-status{width:fit-content;color:#f4f0e6;background:#101916;padding:4px 7px;margin-left:-7px;border-radius:2px;text-shadow:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}