/* Version 1: the existing Soopi composition, with mint and periwinkle routes. */
.direction-one { --blue:#3457df; }
.direction-one .landing-header { background:#3457df; }
.classic-hero { --wash-left:radial-gradient(ellipse,#baf3e935,transparent 68%); --wash-right:radial-gradient(ellipse,#d9c3ff40,transparent 68%); background:#3457df; color:white; display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100svh - 89px); padding:38px 32px 18px; }
.classic-hero::before,.classic-hero::after { content:""; position:absolute; z-index:-2; width:480px; height:480px; border:1px solid #ffffff0b; border-radius:50%; top:22%; pointer-events:none; }
.classic-hero::before { left:-370px; }.classic-hero::after { right:-370px; }
.classic-copy { text-align:center; }
.classic-copy .eyebrow { margin-bottom:18px; }
.classic-copy h1 { font-size:clamp(48px,5.5vw,80px); font-weight:600; letter-spacing:-.065em; line-height:1.04; }
.classic-copy h1 em { color:#d5e4ff; }
.classic-copy>p:last-child { max-width:630px; margin:22px auto 0; color:#eef1ff; font-size:15px; line-height:1.75; }
.classic-stage { width:min(1120px,100%); margin:6px auto; height:clamp(245px,32svh,325px); flex:0 0 auto; }
.classic-stage .van-position { width:500px; }
.classic-stage .scene-orbit { position:absolute; left:26%; top:14%; width:48%; height:70%; border:1px solid #d4e2ff40; border-radius:50%; transform:rotate(-9deg); }
.scene-orbit::before,.scene-orbit::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; top:50%; background:#bbefdf; left:-4px; }
.scene-orbit::after { left:auto; right:-4px; background:#d6ceff; }
.route-aside { position:absolute; left:4%; top:35%; padding-top:14px; text-align:left; transition:color .3s,opacity .3s; font-size:13px; line-height:1.85; color:#ecf1ff; }
/* These secondary route links remain available when scroll hides the buttons. */
.route-aside[data-choice] { pointer-events:auto; z-index:5; min-height:44px; border-radius:3px; }
.route-aside[data-choice]:is(:hover,:focus-visible) { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.route-aside::before { content:""; position:absolute; left:0; top:0; width:23px; height:2px; background:#9ce9d0; transition:width .3s; }
.route-aside small { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; color:#d3deff; }
.route-aside-right { left:auto; right:4%; }.route-aside-right::before { background:#d6caff; }
[data-route="left"] .route-aside-left,[data-route="right"] .route-aside-right { color:white; }
[data-route="left"] .route-aside-left::before,[data-route="right"] .route-aside-right::before { width:65px; }
[data-route="left"] .route-aside-right,[data-route="right"] .route-aside-left { opacity:.75; }
.classic-stage .scene-caption { color:#dde7ff; }
.classic-bottom { text-align:center; }
.classic-actions { display:grid; grid-template-columns:1fr 1fr; gap:15px; max-width:620px; margin:0 auto 22px; }
.classic-actions .route-cta { background:white; border-color:white; color:#233653; padding-left:7px; padding-right:22px; justify-content:flex-start; }
.classic-actions .route-cta .arrow-box { background:#3457df; color:white; margin-right:7px; }
.classic-actions .route-cta[data-choice="right"] { padding-left:22px; padding-right:7px; justify-content:space-between; background:#2948c3; color:white; border-color:#91a7ff; }
.classic-actions .route-cta[data-choice="right"] .arrow-box { background:#ffffff16; margin:0; }
[data-route="left"] .classic-actions [data-choice="left"] { background:#e1fff1; border-color:#e1fff1; }
[data-route="right"] .classic-actions [data-choice="right"] { background:#e4dcff; border-color:#e4dcff; color:#2e3264; }
[data-route="right"] .classic-actions [data-choice="right"] .arrow-box { background:#6a5bac; color:white; }
.classic-bottom .trust-points { color:#eef1ff; }
.classic-bottom .trust-points svg { color:#bbeddb; }
.classic-bottom .landing-discover { color:#e1e8ff; margin-top:13px; }
@media(min-width:821px) and (max-height:780px) {
 .classic-hero { padding-top:25px; }
 .classic-copy h1 { font-size:64px; }
 .classic-copy .eyebrow { margin-bottom:13px; }
 .classic-copy>p:last-child { margin-top:15px; }
 .classic-stage { height:230px; }.classic-stage .van-position { width:420px; }
 .classic-actions { margin-bottom:17px; }.classic-bottom .landing-discover { margin-top:6px; }
}
@media(max-width:1000px) and (min-width:601px) {
 .route-aside { left:0; font-size:11px; }.route-aside-right { left:auto; right:0; }
 .classic-stage .van-position { width:430px; }
 .classic-stage .cargo-building { --x:-158px; --size:94px; }.classic-stage .cargo-caddy { --x:160px; --size:90px; }
}
@media(max-width:820px) {
 .classic-hero { min-height:calc(100svh - 75px); padding:30px 24px 17px; }
 .classic-copy h1 { font-size:clamp(42px,7.6vw,62px); }
 .classic-stage { height:245px; }
 .route-aside { top:69%; font-size:10px; }.route-aside small { display:none; }
}
@media(max-width:600px) {
 .classic-hero { padding:30px 20px 14px; gap:12px; }
 .classic-copy .eyebrow { font-size:9px; margin-bottom:16px; }
 .classic-copy h1 { font-size:clamp(35px,9.9vw,54px); }
 .classic-copy>p:last-child { margin-top:17px; font-size:13px; line-height:1.8; max-width:410px; }
 .classic-stage { height:222px; margin:0 auto; }
 .classic-stage .van-position { width:350px; top:42%; }
 .classic-stage .scene-orbit { width:84%; height:52%; left:8%; top:19%; }
 .route-aside { font-size:9px; line-height:1.6; top:auto; bottom:2px; padding-top:7px; }
 .route-aside::before { width:16px; height:1px; }
 .classic-stage .scene-caption { display:none; }
 .classic-actions { grid-template-columns:1fr; max-width:380px; gap:10px; margin-bottom:18px; }
 .classic-actions .route-cta { justify-content:space-between; }
 .classic-bottom .trust-points li:first-child { flex-basis:100%; justify-content:center; }
 .classic-bottom .landing-discover { margin-top:8px; font-size:10px; }
}
@media(max-width:360px) { .classic-hero { padding-inline:16px; }.classic-copy h1 { font-size:34px; }.classic-stage .van-position { width:315px; } }