/* Shared visual language with the owner's application reference. */
:root{--ink:#e8f5fa;--green:#36bdd2;--mint:#113f52;--line:#a8d9e02e;--glass-ink:#103548;--glass-muted:#416478;--ease-glass:cubic-bezier(.22,1,.36,1);color-scheme:dark}
body{background:#081e2d;color:var(--ink)}
header{top:16px;left:3%;width:94%;height:76px;padding:0 28px;border:1px solid #b8e4f42e;border-radius:24px;background:linear-gradient(110deg,#4ab3c82b,#11283eab 52%,#34618c42);backdrop-filter:blur(26px) saturate(145%);-webkit-backdrop-filter:blur(26px) saturate(145%);box-shadow:inset 0 1px 0 #d3f7ff38,0 12px 35px #00101f33}
header img{height:auto;width:164px}
header #home-link{position:relative;display:block;line-height:0}

nav{position:relative;gap:18px;color:#d5eaf3}
nav>a{position:relative;z-index:1;padding:11px 14px;border-radius:14px;transition:color .22s ease,transform .1s ease-out}
nav>a:hover,nav>a:focus-visible{color:#fff}
.nav-glass-marker{position:absolute;left:0;top:0;pointer-events:none;border-radius:14px;opacity:0;transition:transform .38s var(--ease-glass),width .38s var(--ease-glass),height .38s var(--ease-glass),opacity .2s}
.nav-glass-marker:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,#73e8ee30,#d4f4ff18);border:1px solid #b4f0ff35;box-shadow:inset 0 1px 0 #e5ffff25,0 5px 16px #00192520;transition:transform .1s ease-out,box-shadow .1s ease-out}
nav>a.is-pressed,.nav-glass-marker.is-pressed:before{transform:translateY(1px) scale(.94)}
.nav-glass-marker.is-pressed:before{box-shadow:inset 0 2px 8px #00192545,0 1px 4px #00192515}
nav>a.is-releasing,.nav-glass-marker.is-releasing:before{animation:nav-glass-release .3s ease-out both}
@keyframes nav-glass-release{0%{transform:translateY(1px) scale(.94)}60%{transform:translateY(-.5px) scale(1.025)}100%{transform:translateY(0) scale(1)}}
.pill{position:relative;background:linear-gradient(130deg,#49ccda,#259ab8);color:#042736;border:1px solid #a6f7ff55;box-shadow:inset 0 1px 0 #e1ffff70,0 5px 20px #009fbe20;transition:transform .22s var(--ease-glass),box-shadow .22s,filter .22s}
.pill:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:inset 0 1px 0 #e1ffff80,0 10px 28px #0cbdcc30}
.pill:active{transform:translateY(0) scale(.98)}
.outline,.stage.dark .outline{background:linear-gradient(130deg,#c2f0ff13,#72b1cf0a);color:#d9edf5;border-color:#bce7f33d;box-shadow:inset 0 1px 0 #d8f5ff1c;backdrop-filter:blur(12px);transition:background .25s,transform .25s,border-color .25s}
.outline:hover{background:#c2f0ff20;border-color:#c2f0ff66;transform:translateY(-2px)}
.stage,.stage.dark{color:var(--ink);background:radial-gradient(ellipse at 5% 0%,#08687980,transparent 47%),radial-gradient(ellipse at 95% 20%,#284d7e66,transparent 55%),linear-gradient(135deg,#082536,#0c2032 58%,#103f4d);transition:none}
.scene-status{color:#a3cad9}
.scene:after{background:linear-gradient(to bottom,#0a2436 0%,#0a243600 26%,#0a263600 72%,#0b2839 100%)}
h1,h2{color:#edf8fc}
h1 em{color:#68dce5}
.eyebrow{color:#9bcbd7}.dot{background:#5de5d9;box-shadow:0 0 0 4px #51e6db13,0 0 15px #48e3db35}
.hero-copy{color:#b3cedb}
.text-block p,.stage.dark .text-block p{color:#adc9d6}
.text-block .micro{color:#91b9c8}
#route-label{top:119px;color:#b5d9e5;background:#153b50a6;border:1px solid #bbe7f02b;box-shadow:inset 0 1px 0 #d2f5ff16;backdrop-filter:blur(18px)}
.scene-card,.trip-panel,.dark .trip-panel{background:linear-gradient(135deg,#d9edf3d9,#c4d9ebbf);border:1px solid #e4f7ff70;border-radius:20px;color:var(--glass-ink);box-shadow:inset 0 1px 0 #ffffff91,inset 0 -1px 0 #b6deee25,0 20px 55px #00132640;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.scene-card{transition:opacity .36s ease,transform .5s var(--ease-glass),filter .36s ease;filter:blur(6px);transform:translate3d(0,18px,0) scale(.98)}
.scene-card.show{filter:blur(0);transform:translate3d(0,0,0) scale(1)}
.card-label,.sub{color:var(--glass-muted)}
.value{color:#12394b}.value span{color:#416478!important}
.meter{background:#5e91a131}.meter i{background:linear-gradient(90deg,#188fa4,#20b7bb);box-shadow:0 0 10px #20b7bb30}
.price-row{border-color:#5a869a29}.price-row.best{color:#087b79}.bubble{color:#1d5363;background:#e8faff6b;border:1px solid #ffffff45}.confirmed{color:#0c7775}
.trip-head,.dark .trip-head,.trip-caption,.dark .trip-caption{color:#42677b}
.trip-distance,.dark .trip-distance{color:#113a4f}.trip-distance small{color:#496f82}
.trip-track{background:#477b9126}.trip-track i{background:linear-gradient(90deg,#2497b5,#31c2ce);box-shadow:0 0 10px #32c3cf35;transition:width .18s linear}
.trip-stops,.dark .trip-stops{color:#42677b}
.trip-stops{gap:8px}.trip-stops button{padding:6px 9px;border-radius:8px;transition:background .3s,color .3s,box-shadow .3s}
.trip-stops button.current{color:#0c5368;background:#d8f9ff69;box-shadow:inset 0 0 0 1px #ffffff70}
.scroll-label{color:#92becd}
.stage-controls{position:relative;gap:4px;padding:6px;border:1px solid #bce4f030;border-radius:18px;background:linear-gradient(120deg,#61adbf26,#112a3c9c);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #d9f8ff26,0 10px 30px #00132233}
.stage-controls button{position:relative;z-index:1;opacity:1;color:#a8c7d5;padding:10px 13px;transition:color .3s;white-space:nowrap}
.stage-controls button.selected{color:#e9fdff;border-bottom:0}
.stage-controls .play{margin-left:6px;padding:10px 15px;border-radius:12px;border:1px solid #c0eaf03b;color:#deeff6;background:#071d2b4d}
.chapter-glass-marker{position:absolute;left:0;top:0;pointer-events:none;border:1px solid #b4f5ff65;border-radius:11px;background:linear-gradient(130deg,#42d7df61,#27a5ce52);box-shadow:inset 0 1px 0 #c6ffff66,0 0 18px #15c5de20;transition:transform .45s var(--ease-glass),width .45s var(--ease-glass),height .45s var(--ease-glass)}
.drawer{background:#0b2839;border-color:#c0e6f12e}
.drawer-content{margin:20px auto 36px;border:1px solid #e6f8ff66;border-radius:28px;background:linear-gradient(130deg,#c4e5eadb,#bdd3e8cf);box-shadow:inset 0 1px 0 #fff9,0 20px 70px #0016283d;color:#14394c;backdrop-filter:blur(26px)}
.drawer h2{color:#10374a}.drawer .eyebrow{color:#416a7c}.drawer .close{color:#31586b;border-radius:50%;background:#e9fbff48;width:34px;height:34px;transition:background .2s,transform .2s}.drawer .close:hover{background:#e9fbff9c;transform:rotate(90deg)}
.drawer .notice{color:#416779}.drawer input{color-scheme:light;background:#edfaff73;border-color:#58849a35;color:#123d51;border-radius:11px;box-shadow:inset 0 1px 0 #fff8;transition:background .2s,border-color .2s}.drawer input::placeholder{color:#648391}.drawer input:focus{background:#f3fcffad;border-color:#1489a5}
.plans{position:relative;background:radial-gradient(ellipse at 6% 65%,#087c8152,transparent 50%),radial-gradient(ellipse at 95% 10%,#345f8b66,transparent 62%),#0b2839;border-top:1px solid #b0deed1f}
.plans-heading p,.plans .notice{color:#9fbfcc}.plans h2{color:#e8f5fa}
.plan-grid{border-top:0;gap:20px;align-items:stretch}
.plan,.plan+.plan{padding:30px;border:1px solid #e2f6ff70;border-radius:22px;background:linear-gradient(140deg,#d8edf2d9,#bbd4e5c9);box-shadow:inset 0 1px 0 #ffffffa6,0 18px 50px #00121f2b;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#14384a;transition:opacity .5s ease,transform .6s var(--ease-glass),filter .5s ease,translate .3s var(--ease-glass),box-shadow .3s}
.plan h3{color:#12384c;font-weight:600}.plan-num{color:#4e7587}.plan p{color:#3c6375}.plan b{color:#087d88;font-weight:600}
.plan:hover{translate:0 -5px;box-shadow:inset 0 1px 0 #fff,0 24px 60px #00111f42}
.glass-reveal-ready .plan{opacity:0;transform:translateY(25px);filter:blur(6px)}
.glass-reveal-ready .plan.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
footer{background:#071c2a;border-top:1px solid #bce4f020;color:#86adbf}
.hint{background:#214c62db;color:#e7f8fc;border:1px solid #c3eff140;backdrop-filter:blur(22px);box-shadow:0 12px 30px #00132255}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#6fe8e9}
@media(max-width:800px){
 header{top:10px;left:3%;width:94%;height:66px;padding:0 12px;gap:8px;border-radius:19px}header img{width:clamp(88px,26vw,135px)}nav{gap:4px;font-size:11px}nav>a{padding:9px 7px}nav .pill{padding:10px 11px}
 .scene:after{background:linear-gradient(to bottom,#0b293800,#0b293800 67%,#0b2939)}
 .scene-card,.trip-panel,.dark .trip-panel{border-radius:16px}
 .stage-controls{padding:5px;gap:0;border-radius:15px}.stage-controls button{padding:10px 7px;font-size:10px}.stage-controls .play{margin-left:3px;padding:10px}
 .bottom{left:4%;right:4%;bottom:16px}.trip-panel{bottom:83px}.scene-card{bottom:235px}
 .drawer-content{margin:16px 4% 30px;padding:30px 5vw;border-radius:22px}.drawer h2{font-size:28px}
 .plan,.plan+.plan{padding:27px;border:1px solid #e2f6ff70}.plan-grid{gap:16px}
}
@media(max-width:360px){header{padding:0 9px}header img{width:84px}nav>a{padding:9px 5px}nav .pill{padding:10px 9px;font-size:10px}.stage-controls button{font-size:9px;padding:10px 5px}.stage-controls .play{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.glass-reveal-ready .plan{opacity:1;transform:none;filter:none}.scene-card{filter:none}.plan:hover,.pill:hover,.outline:hover{translate:none;transform:none}.nav-glass-marker,.chapter-glass-marker,.trip-track i{transition:none}}
@supports not (backdrop-filter:blur(1px)){header,.stage-controls{background:#15384a}.scene-card,.trip-panel,.dark .trip-panel,.plan,.plan+.plan,.drawer-content{background:#c4dce7}}
@media(prefers-reduced-motion:reduce){nav>a,.nav-glass-marker:before{transition:none}nav>a.is-pressed,.nav-glass-marker.is-pressed:before{transform:none}nav>a.is-releasing,.nav-glass-marker.is-releasing:before{animation:none}}

/* Give the story copy more presence while retaining the original left anchor. */
@media(min-width:801px){
 .text-block{width:46%;max-width:660px}
 .text-block h1{font-size:clamp(54px,6vw,88px)}
 .text-block:not(:first-of-type) h2{font-size:clamp(42px,4.8vw,72px)}
 .text-block p,.text-block .hero-copy{font-size:clamp(16px,1.3vw,18px);max-width:420px;line-height:1.75}
 .text-block .micro{font-size:12px!important;max-width:440px}
 .scene-card,.trip-panel,#route-label{right:8.5%}
}

/* Hover has no entrance delay; only the initial reveal is staggered. */
.plan,.plan+.plan{position:relative;transition:opacity .5s ease var(--reveal-delay,0s),transform .6s var(--ease-glass) var(--reveal-delay,0s),filter .5s ease var(--reveal-delay,0s),translate .14s ease-out,box-shadow .16s ease-out,border-color .16s ease-out}
.plan:hover{translate:0 -5px}
.plan:active{translate:0 -1px}
.plan.is-selected{border-color:#82f3ed;box-shadow:inset 0 0 0 1px #55c9d4,0 18px 50px #00121f2b}
.plan-select{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left}
.plan-select:after{content:"";position:absolute;inset:0;border-radius:22px}
.plan-select:focus-visible{outline:none}
.plan-select:focus-visible:after{outline:3px solid #6fe8e9;outline-offset:5px}
.plan-arrow{font-family:'DM Sans',sans-serif;font-size:21px;font-weight:400;color:#267b90;transition:transform .14s ease-out}
.plan:hover .plan-arrow{transform:translate(2px,-2px)}
.plan-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-glass);scroll-margin-top:115px}
.plan-detail.open{grid-template-rows:1fr}
.plan-detail-inner{min-height:0;overflow:hidden}
.plan-detail-content{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:24px;padding:34px;border:1px solid #b5ebf13b;border-radius:24px;background:linear-gradient(125deg,#31849424,#7cbbdf16);box-shadow:inset 0 1px 0 #d6faff1c;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .45s var(--ease-glass)}
.plan-detail.open .plan-detail-content{opacity:1;transform:none}
.plan-detail h3{font-size:30px;letter-spacing:-1px;margin:14px 0;color:#e8f5fa}
.plan-detail p{max-width:420px;color:#b3cedb;font-size:15px;line-height:1.8;margin:0 0 24px}
.plan-detail ul{list-style:none;margin:0;padding:0;align-self:center}
.plan-detail li{position:relative;padding:14px 0 14px 24px;border-bottom:1px solid #acdce41a;color:#c4dde7;font-size:14px;line-height:1.7}
.plan-detail li:last-child{border-bottom:0}
.plan-detail li:before{content:"✓";position:absolute;left:0;color:#6bdcdb}

/* The same curve and duration run both directions, including the content. */
.drawer{border-top-width:0;overflow-anchor:none;transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1)}
.drawer.open{border-top-width:0}
.drawer-inner{min-height:0}
.drawer-content{opacity:0;transform:translateY(18px) scale(.985);transform-origin:50% 0;transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.drawer.open .drawer-content{opacity:1;transform:translateY(0) scale(1)}
.drawer .close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;line-height:1;transition:background .25s ease,transform .3s var(--ease-glass);transform:none}
.drawer .close svg{display:block;transform-origin:50% 50%;transition:transform .4s var(--ease-glass)}
.drawer .close:hover{transform:none}
.drawer .close:hover svg{transform:rotate(90deg)}
.drawer .close:active{transform:scale(.9)}
.request-plan-label{max-width:340px;margin-top:24px}
.drawer select{font:inherit;font-size:13px;width:100%;padding:12px;border:1px solid #58849a35;border-radius:11px;background:#edfaffb3;color:#123d51;color-scheme:light;box-shadow:inset 0 1px 0 #fff8}
.drawer select:focus-visible{outline:3px solid #1489a5;outline-offset:3px}
@media(max-width:800px){
 .plan-detail{scroll-margin-top:94px}
 .plan-detail-content{grid-template-columns:1fr;gap:18px;padding:26px}
 .plan-detail h3{font-size:27px}
 .drawer-top{gap:18px}
}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}.request-plan-label{max-width:none}}
@media(prefers-reduced-motion:reduce){.plan:hover,.plan:active{translate:none}.plan-arrow,.drawer .close svg,.drawer .close:active{transform:none!important}}
