/* Layout: desktop = Swiss 12-col stage, 4-col caption rail + phone on cols 6–11. Phone width = the app goes full-bleed.
Look: jetty departure board × golden-hour strait. White cards on a cool tide-grey stage, single light theme. */
:root{
color-scheme: light;
--paper:#FFFFFF; --stage:#EEF2F1; --ink:#0D1A1E; --muted:#5A6A6E; --line:#DCE3E2;
--sea:#0E5A6B; --sea-2:#13798C; --foam:#E2EEEE; --signal:#E2632A; --ok:#1F7A4D; --sand:#E9DCC2;
--display:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
--mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
--accent:"Instrument Serif", Georgia, serif;
--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font:15px/1.45 var(--display);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
.mono{font-family:var(--mono)}
.stage{max-width:1240px;margin:0 auto;padding-inline:24px;padding-block:40px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;min-height:100%}
.rail{grid-column:1/span 4;position:sticky;top:40px;display:grid;gap:28px;padding-top:24px}
.kicker{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rail h1{font:700 56px/0.95 var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
.rail h1 em{font:400 italic 62px/0.9 var(--accent);letter-spacing:-.01em;color:var(--sea)}
.rail p{margin:0;color:var(--muted);max-width:34ch}
.rail-lang{justify-self:start;border-color:var(--line);background:var(--paper);backdrop-filter:none}
.rail-lang button{color:var(--ink);font-size:12px;padding:8px 14px}
.rail-lang button[aria-pressed=true]{background:var(--ink);color:#fff}
.legend{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px;font-size:13px}
.legend div{display:flex;gap:10px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.live{background:var(--ok);box-shadow:0 0 0 0 rgba(31,122,77,.5);animation:pulse 2s infinite}
.dot.sample{background:transparent;border:1.5px dashed var(--muted)}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(31,122,77,0)}100%{box-shadow:0 0 0 0 rgba(31,122,77,0)}}
.phone-wrap{grid-column:6/span 6;display:flex;justify-content:center}
.phone{width:390px;height:844px;background:var(--paper);border-radius:46px;position:relative;overflow:hidden;
box-shadow:0 0 0 10px #0D1A1E,0 0 0 11px #2a3a3f,0 40px 80px -20px rgba(13,26,30,.45),0 18px 30px -18px rgba(14,90,107,.35);display:flex;flex-direction:column}
@media (max-width:900px){
.stage{display:block;padding:0}
.rail{display:none}
.phone{width:100%;height:100dvh;border-radius:0;box-shadow:none}
}
/* status bar */
.sb{display:flex;justify-content:space-between;padding:14px 28px 0;font:600 14px var(--display);position:absolute;inset:0 0 auto;z-index:5;color:#fff;pointer-events:none}
@media (max-width:900px){.sb{display:none}}
/* scroll area */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
.scroll::-webkit-scrollbar{display:none}
/* hero with 3D strait */
.hero{position:relative;height:300px;background:#123d47;overflow:hidden}
#sea{position:absolute;inset:0;width:100%;height:100%;display:block}
.grade{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 80% at 50% 10%,rgba(255,196,140,.28),transparent 55%),
radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(5,20,25,.55)),
linear-gradient(180deg,rgba(13,26,30,.35),transparent 30%,transparent 62%,rgba(13,26,30,.75));}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-5%)}100%{transform:translate(-2%,2%)}}
.hero-top{position:absolute;top:44px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;color:#fff;z-index:2}
@media (max-width:900px){.hero-top{top:16px}}
.brand{font:800 20px/1 var(--display);letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.brand i{font:400 italic 22px var(--accent);letter-spacing:0;opacity:.85}
.lang{display:flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px;backdrop-filter:blur(8px);background:rgba(255,255,255,.08)}
.lang button{border:0;background:none;color:#fff;font:600 11px var(--mono);padding:5px 9px;border-radius:999px;letter-spacing:.06em}
.lang button[aria-pressed=true]{background:#fff;color:var(--ink)}
.place{position:absolute;bottom:92px;font:500 10px/1 var(--mono);letter-spacing:.18em;color:rgba(255,255,255,.85);z-index:2;text-transform:uppercase}
.place.l{left:20px}.place.r{right:20px;text-align:right}
.place b{display:block;font:700 15px/1.1 var(--display);letter-spacing:-.01em;text-transform:none;color:#fff;margin-top:4px}
/* Keluar / Balik — the one big decision */
.dir{position:relative;z-index:3;margin:-64px 16px 0;background:var(--paper);border-radius:22px;padding:6px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 18px 40px -18px rgba(13,26,30,.45),0 0 0 1px var(--line)}
.dir button{border:0;background:none;border-radius:17px;padding:14px 12px 12px;text-align:left;position:relative;z-index:1;transition:color .4s var(--ease)}
.dir button span{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.dir button strong{font:700 21px/1 var(--display);letter-spacing:-.02em}
.dir button[aria-pressed=true]{color:#fff}
.dir .slider{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:17px;background:linear-gradient(160deg,var(--sea-2),var(--sea));transition:transform .55s var(--ease);box-shadow:0 10px 20px -10px rgba(14,90,107,.8)}
.dir[data-v=back] .slider{transform:translateX(100%)}
/* controls */
.ctl{padding:18px 16px 4px;display:grid;gap:14px}
.row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.lbl{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 13px;font-weight:600;font-size:14px;white-space:nowrap;transition:all .3s var(--ease)}
.chip small{display:block;font:500 10px var(--mono);color:var(--muted);letter-spacing:.06em;margin-bottom:2px}
.chip[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.chip[aria-pressed=true] small{color:rgba(255,255,255,.65)}
.chip:disabled{opacity:.4;cursor:not-allowed}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* results */
.res-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 16px 8px;border-top:1px solid var(--line);margin-top:16px}
.res-head h2{margin:0;font:700 17px var(--display);letter-spacing:-.02em}
.res-head span{font:500 11px var(--mono);color:var(--muted)}
.list{display:grid;padding:0 16px 110px}
.card{border:0;background:none;text-align:left;display:grid;grid-template-columns:74px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);position:relative;
opacity:0;transform:translateY(10px);animation:in .6s var(--ease) forwards}
@keyframes in{to{opacity:1;transform:none}}
.card:hover .t{color:var(--sea)}
.card:active{transform:scale(.985)}
.t{font:600 24px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .3s}
.t small{display:block;font:500 11px var(--mono);color:var(--muted);letter-spacing:0;margin-top:6px}
.what{min-width:0}
.what b{display:block;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legs{display:flex;align-items:center;gap:5px;margin-top:6px;font:500 11px var(--mono);color:var(--muted);flex-wrap:wrap}
.leg{display:inline-flex;align-items:center;gap:4px;background:var(--foam);color:var(--sea);border-radius:6px;padding:3px 6px}
.leg svg{width:13px;height:13px}
.leg.bus{background:#F4ECDD;color:#7A5418}
.leg.car{background:#ECEEF0;color:#3B4A50}
.src{display:inline-flex;align-items:center;gap:5px}
.st{text-align:right;font:600 12px/1.25 var(--display);max-width:96px}
.st small{display:block;font:500 10.5px var(--mono);color:var(--muted);margin-top:4px}
.st.ok{color:var(--ok)}.st.low{color:var(--signal)}.st.full{color:#9AA5A8}
.card.full .t,.card.full .what b{color:#9AA5A8}
.meter{height:3px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--sea);border-radius:3px;transform-origin:left;animation:grow 1s var(--ease) both}
.low .meter i,.card.low .meter i{background:var(--signal)}
@keyframes grow{from{transform:scaleX(0)}}
.empty{padding:30px 0;color:var(--muted)}
/* bottom nav */
.nav{position:absolute;left:12px;right:12px;bottom:14px;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);border-radius:22px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
.nav button{border:0;background:none;border-radius:16px;padding:8px 4px;font:600 11.5px var(--display);color:var(--muted);display:grid;justify-items:center;gap:3px}
.nav button svg{width:20px;height:20px}
.nav button[aria-current=page]{color:var(--ink);background:var(--foam)}
/* other screens */
.screen[hidden]{display:none}
.pad{padding:56px 20px 120px}
@media (max-width:900px){.pad{padding-top:24px}}
.pad h2{font:700 30px/1 var(--display);letter-spacing:-.03em;margin:8px 0 6px}
.pad h2 em{font:400 italic 34px var(--accent);color:var(--sea)}
.pad p.sub{color:var(--muted);margin:0 0 22px}
.alert{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 0;border-top:1px solid var(--line)}
.alert b{font-size:15px}.alert span{font:500 12px var(--mono);color:var(--muted)}
.tog{width:44px;height:26px;border-radius:99px;background:var(--line);border:0;position:relative;grid-row:span 2;align-self:center;transition:background .3s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.tog[aria-pressed=true]{background:var(--ok)}.tog[aria-pressed=true]::after{transform:translateX(18px)}
.info{display:grid;gap:0}
.info a,.info div.i{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.info b{font-size:15px}.info span{font:500 12px var(--mono);color:var(--muted)}
.info em{font-style:normal;color:var(--sea);font-weight:600;grid-row:span 2;align-self:center}
.last{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
.last div{background:var(--ink);color:#fff;border-radius:16px;padding:14px}
.last small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.last b{display:block;font:600 28px/1.1 var(--mono);letter-spacing:-.04em;margin-top:6px}
.last span{font-size:12px;opacity:.75}
/* sheet */
.scrim{position:absolute;inset:0;background:rgba(13,26,30,.45);z-index:8;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:var(--stage);border-radius:28px 28px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .6s var(--ease);max-height:88%;overflow:auto}
.open .scrim{opacity:1;pointer-events:auto}.open .sheet{transform:none}
.grab{width:40px;height:4px;border-radius:4px;background:#C3CCCB;margin:0 auto 14px}
.ticket-wrap{perspective:900px;margin-bottom:16px}
.ticket{background:var(--paper);border-radius:20px;padding:18px;position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease);box-shadow:0 22px 40px -22px rgba(13,26,30,.4),0 0 0 1px var(--line);overflow:hidden}
.ticket::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 48%,transparent 60%);transform:translateX(var(--shine,-60%));transition:transform .5s var(--ease);pointer-events:none}
.tk-top{display:flex;justify-content:space-between;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tk-mid{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:end;margin:14px 0 4px}
.tk-mid div b{display:block;font:600 34px/1 var(--mono);letter-spacing:-.05em}
.tk-mid div span{font:600 12px var(--display);color:var(--muted)}
.tk-line{height:1px;background:repeating-linear-gradient(90deg,var(--sea) 0 6px,transparent 6px 11px);margin-bottom:12px;position:relative}
.tk-line::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--signal);top:-3.5px;left:0;animation:sail 3.2s var(--ease) infinite}
@keyframes sail{to{left:calc(100% - 8px)}}
.notch{border-top:1.5px dashed var(--line);margin:16px -18px;position:relative}
.notch::before,.notch::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--stage)}
.notch::before{left:-10px}.notch::after{right:-10px}
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:44px 1fr;gap:10px;font-size:14px}
.step time{font:600 13px var(--mono)}
.step small{display:block;color:var(--muted);font-size:12px}
.seats{display:flex;justify-content:space-between;font:500 12px var(--mono);color:var(--muted);margin-top:4px}
.cta{display:grid;gap:10px}
.btn{display:flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:16px;padding:16px;font:700 16px var(--display);text-decoration:none;letter-spacing:-.01em}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--sea)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.btn.ghost[aria-pressed=true]{color:var(--ok);box-shadow:0 0 0 1.5px var(--ok)}
.fine{font:500 11px/1.5 var(--mono);color:var(--muted);text-align:center;margin:10px 0 0}
.toast{position:absolute;left:50%;bottom:100px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:14px;font-weight:600;font-size:13px;z-index:12;opacity:0;transition:all .45s var(--ease);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- WEBSITE VIEW (desktop) ---------- */
.web-title,.viewsw{display:none}
@media (min-width:901px){
.viewsw{display:flex;position:fixed;left:24px;bottom:24px;z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 12px 30px -12px rgba(13,26,30,.35)}
.viewsw button{border:0;background:none;border-radius:999px;padding:9px 16px;font:600 13px var(--display);color:var(--muted)}
.viewsw button[aria-pressed=true]{background:var(--ink);color:#fff}
body.web{background:var(--paper)}
body.web .stage{display:block;max-width:none;padding:0;min-height:0}
body.web .rail{display:none}
body.web .phone-wrap{display:block}
body.web .phone{width:auto;height:auto;border-radius:0;box-shadow:none;overflow:visible;display:block}
body.web .sb{display:none}
body.web .scroll{overflow:visible}
body.web #s-trip:not([hidden]){display:grid;grid-template-columns:minmax(24px,1fr) minmax(300px,380px) minmax(0,800px) minmax(24px,1fr);column-gap:48px;
grid-template-areas:"hero hero hero hero" ". dir head ." ". rush list ." ". ctl list .";grid-template-rows:auto auto auto 1fr;align-items:start;padding-bottom:80px}
body.web .hero{grid-area:hero;height:min(56vh,520px);min-height:420px}
body.web .hero-top{top:22px;left:max(24px,calc((100% - 1228px)/2));right:max(24px,calc((100% - 1228px)/2))}
body.web .brand{font-size:24px}
body.web .grade{background:linear-gradient(90deg,rgba(6,22,27,.62),rgba(6,22,27,.25) 45%,transparent 70%),radial-gradient(120% 80% at 70% 10%,rgba(255,196,140,.28),transparent 55%),linear-gradient(180deg,rgba(13,26,30,.45),transparent 30%,transparent 62%,rgba(13,26,30,.7))}
body.web .web-title{display:block;position:absolute;z-index:2;left:max(24px,calc((100% - 1228px)/2));top:118px;color:#fff;max-width:640px}
body.web .web-title h1{margin:0;font:800 clamp(44px,5.4vw,76px)/.92 var(--display);letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 30px rgba(5,20,25,.35)}
body.web .web-title h1 em{font:400 italic 1.08em var(--accent);letter-spacing:-.01em;color:#FFD9B5}
body.web .web-title p{margin:16px 0 0;font-size:17px;max-width:46ch;opacity:.9}
body.web .place{bottom:28px}
body.web .place.l{left:auto;right:calc(max(24px,calc((100% - 1228px)/2)) + 170px);text-align:right}
body.web .place.r{right:max(24px,calc((100% - 1228px)/2))}
body.web .dir{grid-area:dir;margin:-56px 0 0}
body.web .ctl{grid-area:ctl;padding:22px 0 0;position:sticky;top:96px}
body.web .row{flex-wrap:wrap}
body.web .res-head{grid-area:head;border-top:0;margin-top:0;padding:28px 0 12px;border-bottom:2px solid var(--ink)}
body.web .res-head h2{font-size:26px;letter-spacing:-.03em}
body.web .list{grid-area:list;padding:0}
body.web .card{grid-template-columns:120px minmax(0,1fr) 150px;gap:24px;padding:20px 8px;border-radius:0;transition:background .3s}
body.web .card:hover{background:var(--stage)}
body.web .t{font-size:32px}
body.web .what b{font-size:17px}
body.web .st{max-width:none;font-size:14px}
body.web .nav{position:fixed;top:16px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);grid-template-columns:repeat(3,auto);gap:4px;padding:5px;border-radius:999px;z-index:15;
background:rgba(255,255,255,.78);box-shadow:0 10px 30px -14px rgba(13,26,30,.4)}
body.web .nav button{grid-auto-flow:column;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px}
body.web .nav button svg{width:18px;height:18px}
body.web .pad{max-width:760px;margin:0 auto;padding:120px 24px 100px}
body.web .pad h2{font-size:48px}
body.web .pad h2 em{font-size:54px}
body.web .scrim{position:fixed}
body.web .sheet{position:fixed;left:auto;top:0;width:460px;max-height:none;border-radius:28px 0 0 28px;transform:translateX(105%);padding:28px 24px}
body.web .open .sheet{transform:none}
body.web .grab{display:none}
body.web .toast{position:fixed;bottom:32px}
}
.rush{margin:16px 16px 0;border-radius:18px;padding:14px 16px;background:#FFF4EC;border:1px solid #F6D3BE;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;width:calc(100% - 32px)}
.rush .cal{width:44px;border-radius:10px;background:var(--paper);box-shadow:0 0 0 1px #F0CDB7;text-align:center;overflow:hidden}
.rush .cal small{display:block;background:var(--signal);color:#fff;font:600 9.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rush .cal b{display:block;font:600 19px/1.5 var(--mono)}
.rush strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.rush span{font-size:12.5px;color:#7a4a2e}
.rush i{font-style:normal;font:600 12px var(--mono);color:var(--signal);white-space:nowrap}
.hols{display:grid;margin-bottom:26px}
.hm{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 0 6px}
.hol{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.hol time{font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.hol time small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.hol b{display:block;font-size:14.5px;letter-spacing:-.01em}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tag{font:600 10px var(--mono);padding:2px 6px;border-radius:5px;background:var(--foam);color:var(--sea)}
.tag.sb{background:#F4ECDD;color:#7A5418}.tag.sk{background:#E8E4F6;color:#4B3C8C}.tag.ck{background:#ECEEF0;color:#5A6A6E}
.lvl{display:flex;gap:3px}.lvl i{width:6px;height:16px;border-radius:2px;background:var(--line)}
.lvl.l2 i:nth-child(-n+2),.lvl.l3 i{background:var(--signal)}.lvl.l1 i:first-child{background:#E9A27E}
.hnote{font:500 11px/1.5 var(--mono);color:var(--muted);margin:-14px 0 24px}
body.web .rush{grid-area:rush;margin:18px 0 0;width:100%}
.note{margin:14px 0 4px;padding:12px 14px;border-radius:14px;background:var(--stage);font-size:13px;line-height:1.45;color:#33444a}
.note a{color:var(--sea);font-weight:600;white-space:nowrap}
.fb{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 4px;padding:14px 0 0;border-top:1px dashed var(--line)}
.fb b{display:block;font-size:13.5px}.fb span{font-size:12px;color:var(--muted)}
.fbb{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font:600 12.5px var(--display);color:var(--ink)}
.fbb:hover{border-color:var(--ink)}
.d70card{margin-top:22px;padding:16px;border-radius:16px;background:var(--stage);display:grid;gap:4px}
.d70card small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.d70card b{font:700 17px var(--display);letter-spacing:-.02em}.d70card b em{font:400 italic 20px var(--accent);color:#2F6B3A}
.d70card span{font-size:12.5px;color:var(--muted)}
.d70{font:500 11.5px/1.5 var(--display);color:#2F6B3A;text-align:center;margin:6px 0 0}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}
/* ---------- real site additions ---------- */
@media (max-width:900px){
.phone{height:auto;overflow:visible}
.scroll{overflow:visible}
.nav,.sheet,.scrim,.toast{position:fixed}
.hero{height:320px}
}
.skel{display:grid;grid-template-columns:74px 1fr 80px;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.skel i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--stage),#E4EAE9,var(--stage));background-size:200% 100%;animation:sh 1.2s linear infinite}
.skel i:first-child{height:26px}
@keyframes sh{to{background-position:-200% 0}}
.fresh{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);color:var(--muted)}
.fresh button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 10px;font:600 11px var(--mono);color:var(--ink)}
.warn{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#FFF4EC;color:#7a4a2e;font-size:12.5px}
.fbform{display:grid;gap:10px;margin-top:10px}
.fbform textarea,.fbform input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font:15px/1.4 var(--display);color:var(--ink);background:var(--paper);resize:vertical}
.fbform textarea{min-height:96px}
.fbform textarea:focus,.fbform input:focus{outline:2px solid var(--sea);outline-offset:0;border-color:transparent}
.fbform .btn{padding:13px}
.fbmsg{font-size:13px;color:var(--ok);min-height:1em}
.sect{margin-top:30px}
.ctl{grid-template-columns:minmax(0,1fr)}
.ctl>div,.dir,.list,.res-head{min-width:0}
html,body{overflow-x:clip}
/* holiday calendar + long weekends */
.cal{border:1px solid var(--line);border-radius:20px;padding:14px;background:var(--paper)}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cal-h b{font:700 17px var(--display);letter-spacing:-.02em}
.cnav{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font:600 18px var(--display)}
.cnav:disabled{opacity:.3;cursor:default}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dw{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.cd{aspect-ratio:1;border:0;background:none;border-radius:10px;display:grid;place-items:center;font:500 14px var(--mono);font-variant-numeric:tabular-nums;position:relative;color:var(--ink);padding:0}
.cd.blank{pointer-events:none}
.cd.we{color:var(--muted)}
.cd.gone{opacity:.35}
.cd.sk::after{content:"";position:absolute;left:18%;right:18%;bottom:5px;height:3px;border-radius:2px;background:#8C7AD6}
.cd.ph{background:var(--signal);color:#fff;font-weight:600}
.cd.span{background:var(--foam);color:var(--sea)}
.cd.span.ph{background:var(--signal);color:#fff}
.cd.lv{background:var(--paper);box-shadow:inset 0 0 0 2px var(--sea);color:var(--sea);font-weight:600}
.cd.now span{border-bottom:2px solid var(--ink)}
.cd.pick{outline:2px solid var(--ink);outline-offset:-2px}
.cal-k{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.cal-k span{display:flex;align-items:center;gap:6px}
.k{width:12px;height:12px;border-radius:4px;display:inline-block}
.k.ph{background:var(--signal)}.k.sk{background:#8C7AD6;height:4px}.k.lv{box-shadow:inset 0 0 0 2px var(--sea)}
.cnote{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.muted{color:var(--muted)}
.lws{display:grid;gap:8px}
.lw{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:12px;transition:all .3s var(--ease)}
.lw:hover{border-color:var(--ink)}
.lw.on{border-color:var(--sea);box-shadow:0 0 0 1.5px var(--sea);background:#F5FAFA}
.lw-n{text-align:center;border-right:1px solid var(--line);padding-right:10px}
.lw-n b{display:block;font:600 28px/1 var(--mono);letter-spacing:-.04em;color:var(--sea)}
.lw-n small{font:500 10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.lw-t strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.lw-t span{display:block;font-size:12.5px;color:var(--muted)}
.lw-t .lw-l{color:#33444a;margin-top:2px}
.rush .cal-i{width:44px;border-radius:10px;background:var(--paper);box-shadow:0 0 0 1px #F0CDB7;text-align:center;overflow:hidden}
.rush .cal-i small{display:block;background:var(--signal);color:#fff;font:600 9.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rush .cal-i b{display:block;font:600 19px/1.5 var(--mono)}
.cal{align-self:start}
.chip.pickd{position:relative;cursor:pointer;display:inline-block;text-align:center;border-style:dashed}
.chip.pickd[aria-pressed=true]{border-style:solid;border-color:var(--ink);background:var(--ink);color:#fff}
.chip.pickd[aria-pressed=true] small{color:rgba(255,255,255,.65)}
.chip.pickd input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.chip.pickd input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.chip.pickd:focus-within{outline:2px solid var(--signal);outline-offset:2px}
.veh{display:grid;gap:6px;margin-top:10px}
.veh select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--ink);border-radius:12px;padding:12px 40px 12px 14px;font:600 15px var(--display);color:var(--ink);
background:var(--paper) url("data:image/svg+xml;utf8,") no-repeat right 14px center}
.veh[hidden]{display:none}
/* ================= Holidays page (redesign) =================
Swiss grid: hero → selected break (strip + actions) → 01 ideas | 02 calendar + 03 list.
Story object: the strip of days. It appears in the hero floor, the selected break and every idea card. */
.holpage{background:var(--paper)}
.hh{position:relative;overflow:hidden;background:#0B2E36;color:#fff;min-height:400px;display:flex;align-items:flex-end}
.hh-floor{position:absolute;inset:-10% -20% -30%;perspective:900px;perspective-origin:50% 0%;pointer-events:none}
.hh-grid{position:absolute;left:50%;top:38%;width:min(1100px,150%);transform:translateX(-50%) rotateX(62deg) rotateZ(-8deg);transform-origin:50% 0;
display:grid;grid-template-columns:repeat(7,1fr);gap:10px;animation:drift 18s linear infinite}
.hh-grid i{aspect-ratio:1.25;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hh-grid i.w{background:rgba(255,255,255,.1)}
.hh-grid i.s{background:rgba(127,208,220,.28);box-shadow:inset 0 0 0 1px rgba(127,208,220,.6)}
.hh-grid i.h{background:#E2632A;box-shadow:0 0 30px 6px rgba(226,99,42,.55);animation:glow 3.2s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-50%) rotateX(62deg) rotateZ(-8deg) translateY(0)}to{transform:translateX(-50%) rotateX(62deg) rotateZ(-8deg) translateY(-180px)}}
@keyframes glow{to{box-shadow:0 0 44px 12px rgba(226,99,42,.75)}}
.hh-grade{position:absolute;inset:0;pointer-events:none;background:
radial-gradient(90% 70% at 85% 0%,rgba(255,190,140,.30),transparent 60%),
linear-gradient(180deg,rgba(8,30,36,.15),rgba(8,30,36,.35) 40%,rgba(8,30,36,.92) 88%),
linear-gradient(90deg,rgba(8,30,36,.85),transparent 70%)}
.hh .grain{opacity:.08}
.hh-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:110px 24px 34px}
@media (max-width:900px){.hh-in{padding:28px 20px 28px}.hh{min-height:360px}}
.hh-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:48px}
.hh .kicker{color:rgba(255,255,255,.7)}
.reg button{font-size:12px;padding:7px 12px}
.hh-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end}
@media (max-width:600px){.hh-main{grid-template-columns:1fr;gap:14px}}
.hh-num span{display:block;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:8px}
.flip{display:flex;gap:6px;perspective:600px}
.fd{display:block;width:clamp(64px,9vw,96px);height:clamp(86px,12vw,128px);border-radius:14px;position:relative;
background:linear-gradient(180deg,#F7F3EC 0 49.5%,#EDE7DC 50.5% 100%);box-shadow:0 18px 40px -12px rgba(0,0,0,.6),inset 0 -1px 0 rgba(0,0,0,.06);
transform-origin:50% 50%;animation:flipin .9s cubic-bezier(.22,1,.36,1) both}
.fd::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.12)}
.fd i{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(58px,8.4vw,92px)/1 var(--mono);font-style:normal;letter-spacing:-.06em;color:#0B2E36}
@keyframes flipin{0%{transform:rotateX(-110deg);opacity:0}60%{opacity:1}100%{transform:none}}
.hh-txt small{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFD9B5}
.hh-txt h2{margin:8px 0 8px;font:800 clamp(30px,4.6vw,56px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance;color:#fff}
.hh-txt p{margin:0;font-size:15px;color:rgba(255,255,255,.82)}
.hh-txt b{color:#fff}
.sch{color:#C9BDF5}
/* selected break */
.hb{max-width:1180px;margin:0 auto;padding:22px 24px 8px}
@media (max-width:900px){.hb{padding:18px 16px 4px}}
.hb-strip{display:flex;gap:4px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.ds{flex:1 0 46px;max-width:72px;border-radius:12px;padding:8px 0 10px;text-align:center;display:grid;gap:2px;transform-origin:bottom;animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.ds small{font:500 10px var(--mono);letter-spacing:.08em;opacity:.75}
.ds b{font:600 20px/1 var(--mono);letter-spacing:-.04em}
.ds.we{background:var(--stage);color:var(--muted)}
.ds.ph{background:var(--signal);color:#fff;box-shadow:0 10px 20px -10px rgba(226,99,42,.8)}
.ds.lv{background:var(--paper);color:var(--sea);box-shadow:inset 0 0 0 2px var(--sea)}
@keyframes rise{from{transform:scaleY(.2) translateY(10px);opacity:0}}
.hb-key{display:flex;gap:14px;font-size:11.5px;color:var(--muted);margin:2px 0 18px;flex-wrap:wrap}
.hb-key span{display:flex;gap:6px;align-items:center}
.k.we{background:var(--stage);box-shadow:inset 0 0 0 1px var(--line)}
.hb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:700px){.hb-row{grid-template-columns:1fr}}
.lvds{display:flex;flex-wrap:wrap;gap:6px}
.lvd{font:600 13px var(--mono);padding:7px 10px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--sea);color:var(--sea)}
.lvd.free{box-shadow:none;background:#DDF0E5;color:var(--ok);font-family:var(--display)}
.hb-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hb-act .btn{padding:13px 18px;font-size:14.5px}
.hb-act .btn:disabled{opacity:.4;cursor:not-allowed}
.hb-act small{width:100%;font-size:12px}
/* columns */
.hgrid{max-width:1180px;margin:0 auto;padding:28px 24px 120px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
@media (max-width:900px){.hgrid{grid-template-columns:1fr;gap:36px;padding:24px 16px 120px}}
.sec-h{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.sec-h .idx{font:500 11px var(--mono);color:var(--signal);letter-spacing:.1em}
.sec-h h3{margin:0;font:700 22px var(--display);letter-spacing:-.03em}
.hgrid .hnote{margin:0 0 14px}
.lw{grid-template-columns:64px minmax(0,1fr);align-items:start;padding:14px}
.lw .mini{display:flex;gap:2px;margin-top:10px;overflow:hidden}
.lw .mini .ds{flex:1 1 0;min-width:0;max-width:22px;height:14px;padding:0;border-radius:3px;animation:none}
.lw .mini .ds small,.lw .mini .ds b{display:none}
.lw-t em{font-style:normal;color:#5B4BB0}
.lw.on{box-shadow:0 0 0 2px var(--sea);border-color:transparent;background:#F3F9F9}
.cal-h b span{color:var(--muted);font-weight:500}
.hols-list .hm{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 0 6px}
body.web #s-hol{padding:0}
@media (prefers-reduced-motion:reduce){.hh-grid{animation:none}}
@media (min-width:901px){.hgrid .cd{aspect-ratio:auto;height:50px}}
.hh-grid{top:22%}
.reg button{white-space:nowrap}.hh-top .kicker{min-width:0}
.dir button strong{white-space:nowrap;font-size:clamp(16px,4.9vw,21px)}
/* From → To route picker (replaces Keluar/Balik) */
.route{position:relative;z-index:3;margin:-64px 16px 0;background:var(--paper);border-radius:22px;padding:8px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;
box-shadow:0 18px 40px -18px rgba(13,26,30,.45),0 0 0 1px var(--line)}
.rf{position:relative;display:block;border-radius:16px;padding:12px 14px 12px;cursor:pointer;transition:background .3s}
.rf:hover{background:var(--stage)}
.rf span{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rf select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml;utf8,") no-repeat right 0 center;
width:100%;padding:0 18px 0 0;font:700 clamp(16px,4.6vw,21px)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);cursor:pointer;text-overflow:ellipsis}
.rf select:focus-visible{outline:none}
.rf:focus-within{box-shadow:inset 0 0 0 2px var(--sea)}
.swap{width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(160deg,var(--sea-2),var(--sea));color:#fff;display:grid;place-items:center;box-shadow:0 8px 16px -8px rgba(14,90,107,.9)}
.swap svg{width:18px;height:18px;transform:rotate(90deg)}
.swap.spin svg{animation:swapspin .5s var(--ease)}
@keyframes swapspin{from{transform:rotate(90deg)}to{transform:rotate(270deg)}}
@media (min-width:901px){body.web .route{grid-area:dir;margin:-56px 0 0}}
@media (min-width:901px){.rf select{font-size:17px}.rf{padding:12px 10px}}
.grp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:26px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.grp:first-child,.warn+.grp{margin-top:8px}
.grp h4{margin:0;display:flex;align-items:center;gap:8px;font:700 15px var(--display);letter-spacing:-.01em}
.grp h4 svg{width:18px;height:18px;color:var(--sea)}
.grp span{font:500 11px var(--mono);color:var(--muted);text-align:right}
.none{padding:16px 14px;margin-top:10px;border-radius:14px;background:var(--stage);color:#33444a;font-size:14px;line-height:1.45}
/* ===== Holidays v3: hero + one list (Krug: one question per screen) ===== */
.hh{min-height:0}
.hh-in{padding:104px 24px 40px}
@media (max-width:900px){.hh-in{padding:24px 20px 30px}}
.hh-top{margin-bottom:36px}
.hh-q{margin:0 0 14px;font:400 italic clamp(22px,2.6vw,30px)/1 var(--accent);color:#FFD9B5}
.hh-main{align-items:center}
.hh-txt h2{font-size:clamp(28px,4vw,52px)}
.hh-go{margin-top:16px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:10px 18px;font:600 14px var(--display);transition:background .3s}
.hh-go:hover{background:rgba(255,255,255,.18)}
/* LUT-style grade: teal shadows, warm highlights, soft halation */
.hh-lut{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
background:linear-gradient(200deg,rgba(255,170,110,.45),rgba(255,170,110,0) 45%),linear-gradient(0deg,rgba(0,90,105,.55),rgba(0,90,105,0) 60%)}
.hh-grid i.h{filter:blur(.3px)}
.hwrap{max-width:860px;margin:0 auto;padding:30px 24px 130px}
@media (max-width:900px){.hwrap{padding:22px 16px 130px}}
.hwrap .sec-h{justify-content:space-between;flex-wrap:wrap}
.hwrap .sec-h span{font-size:12.5px}
.hl{list-style:none;margin:0;padding:0}
.mrow{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:22px 0 8px}
.hr{border-bottom:1px solid var(--line);transition:background .3s}
.hr-h{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto 18px;gap:14px;align-items:center;border:0;background:none;text-align:left;padding:14px 4px}
.hr-h:disabled{cursor:default}
.hr-h:not(:disabled):hover .hr-t strong{color:var(--sea)}
.hr-d{display:grid;justify-items:center;border-radius:12px;padding:6px 0;background:var(--stage)}
.hr-d b{font:600 22px/1 var(--mono);letter-spacing:-.04em}
.hr-d small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.hr.school .hr-d{background:#EEEAFB}
.hr-t strong{display:block;font-size:16px;letter-spacing:-.01em;transition:color .3s}
.hr-t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.hr-b{display:flex;align-items:baseline;gap:5px;background:var(--foam);color:var(--sea);border-radius:999px;padding:6px 12px}
.hr-b b{font:600 18px/1 var(--mono);letter-spacing:-.03em}
.hr-b small{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.hr-c{font:600 20px var(--display);color:var(--muted);transition:transform .4s var(--ease)}
.hr.open .hr-c{transform:rotate(90deg)}
.hr.open{background:linear-gradient(180deg,#F5FAFA,var(--paper))}
.hr.open .hr-d{background:var(--ink);color:#fff}.hr.open .hr-d small{color:rgba(255,255,255,.7)}
.hr-x{padding:2px 4px 20px 74px;animation:in .5s var(--ease) both}
@media (max-width:600px){.hr-x{padding-left:4px}}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.opt{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:10px 14px;text-align:left;transition:all .3s var(--ease)}
.opt b{display:block;font:700 15px var(--display);letter-spacing:-.01em}
.opt small{font-size:12px;color:var(--muted)}
.opt.on{background:var(--ink);border-color:var(--ink);color:#fff}.opt.on small{color:rgba(255,255,255,.7)}
.bd-strip{display:flex;gap:4px;overflow-x:auto;padding:2px 0 8px}
.bd-strip .ds{flex:1 0 40px;max-width:58px}
.bd-say{margin:6px 0 14px;font-size:14px;color:#33444a}
.bd-act{display:flex;gap:8px;flex-wrap:wrap}
.bd-act .btn{padding:12px 16px;font-size:14px}
.bd-act .btn:disabled{opacity:.4;cursor:not-allowed}
.bd-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.calbtn{margin:24px 0 14px;border:1px solid var(--ink);background:var(--paper);border-radius:999px;padding:11px 18px;font:600 14px var(--display)}
.calbtn:hover{background:var(--ink);color:#fff}
.hwrap .cal .cd{aspect-ratio:auto;height:46px}
/* words inside each day box, so colour is never the only clue */
.ds{flex:1 0 54px;max-width:78px;padding:8px 2px 9px}
.bd-strip .ds{flex:1 0 54px;max-width:74px}
.ds small{font-size:9.5px;text-transform:uppercase}
.ds em{display:block;font:600 8.5px/1.15 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;min-height:2.3em;padding:0 2px;text-wrap:balance}
.ds.ph em{color:#fff}.ds.lv em{color:var(--sea)}.ds.we em{color:#8A979A}
.bd-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px;overflow:visible}
.bd-strip .ds{max-width:none;padding:9px 2px 10px}
.bd-strip .ds b{font-size:22px}
.bd-strip .ds em{font-size:9.5px}
/* =================== Trips v4 · departure board ===================
Swiss grid: hero answer (next departure) → one booking bar → board. Story object: split-flap time. */
body.web #s-trip:not([hidden]){display:block;padding:0}
#s-trip .route{margin:0;box-shadow:none;padding:0;background:none;border-radius:0}
.hv4{height:auto;min-height:440px;display:flex;align-items:flex-end}
@media (min-width:901px){.hv4{min-height:min(66vh,600px)}}
.hv4 .lut{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
background:linear-gradient(195deg,rgba(255,170,110,.5),rgba(255,170,110,0) 50%),linear-gradient(0deg,rgba(0,85,100,.6),rgba(0,85,100,0) 60%)}
.hv4 .grade{background:radial-gradient(100% 80% at 80% 0%,rgba(255,196,140,.25),transparent 60%),linear-gradient(90deg,rgba(6,24,29,.82),rgba(6,24,29,.35) 50%,rgba(6,24,29,0) 75%),linear-gradient(180deg,rgba(6,24,29,.35),transparent 30%,transparent 55%,rgba(6,24,29,.85))}
.hcopy{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:110px 24px 92px;color:#fff}
@media (max-width:900px){.hcopy{padding:72px 20px 84px}}
.hk{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hroute{margin:14px 0 22px;font:800 clamp(40px,6.4vw,96px)/.9 var(--display);letter-spacing:-.05em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.18em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hroute i{font:400 italic .9em var(--accent);color:#FFD9B5;letter-spacing:0}
.next .nl{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFD9B5;margin-bottom:10px}
.nrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nm b{display:block;font:700 22px var(--display);letter-spacing:-.02em}
.nm span{font-size:14px;color:rgba(255,255,255,.8)}
.nm em{font-style:normal;font-weight:700}.nm em.ok{color:#8EE0A8}.nm em.low{color:#FFB38A}
.ngo{margin-top:10px;display:inline-block;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:8px 16px;font:600 13px var(--display)}
.ngo:hover{background:rgba(255,255,255,.2)}
.nnone{margin:0;color:rgba(255,255,255,.8)}
/* split-flap digits */
.flaps,.nb{display:inline-flex;align-items:center;gap:3px;perspective:500px}
.fl{position:relative;display:inline-grid;place-items:center;width:.72em;height:1.12em;border-radius:.12em;background:linear-gradient(180deg,#F3F5F4 0 49%,#E7ECEB 51% 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);transform-origin:50% 50%;animation:flapin .7s cubic-bezier(.22,1,.36,1) both}
.fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.1)}
.fl i{font-style:normal;font:600 1em/1 var(--mono);letter-spacing:-.04em;color:var(--ink)}
.fc{font:600 1em/1 var(--mono);color:var(--muted);margin:0 1px}
.fl.big{width:.74em;height:1.14em;background:linear-gradient(180deg,#F7F3EC 0 49.5%,#EDE6DA 50.5% 100%);box-shadow:0 14px 30px -10px rgba(0,0,0,.55)}
.nb{font-size:clamp(46px,6vw,74px)}
.nb .fc{color:rgba(255,255,255,.75)}
.nb .fl.big i{color:#0B2E36}
@keyframes flapin{0%{transform:rotateX(-100deg);opacity:0}60%{opacity:1}100%{transform:none}}
/* booking bar */
.bar{position:relative;z-index:4;max-width:1132px;margin:-52px auto 0;background:var(--paper);border-radius:24px;box-shadow:0 30px 60px -30px rgba(13,26,30,.45),0 0 0 1px var(--line);
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}
.bar>div{padding:16px 20px;min-width:0}
.bar>div+div{border-left:1px solid var(--line)}
.bar .lbl{margin-bottom:8px}
@media (max-width:900px){.bar{margin:-44px 12px 0;grid-template-columns:1fr}.bar>div+div{border-left:0;border-top:1px solid var(--line)}.bar>div{padding:14px 16px}}
#s-trip .route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;height:100%}
#s-trip .rf{padding:6px 8px}
.week{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.week::-webkit-scrollbar{display:none}
.wd{position:relative;flex:1 0 50px;min-width:50px;height:58px;border:1px solid var(--line);background:var(--paper);border-radius:14px;display:grid;place-items:center;align-content:center;gap:2px;padding:0;transition:all .3s var(--ease);cursor:pointer}
.wd small{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.wd b{font:600 19px/1 var(--mono);letter-spacing:-.03em}
.wd b svg{width:18px;height:18px}
.wd:hover{border-color:var(--ink)}
.wd[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.wd[aria-pressed=true] small{color:rgba(255,255,255,.7)}
.wd .hd{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.wd.pick{border-style:dashed}
.wd.pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.wd.pick input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--stage);border-radius:14px;padding:4px;gap:4px}
.toggle button{border:0;background:none;border-radius:11px;padding:11px 8px;font:600 14px var(--display);color:var(--muted);transition:all .3s var(--ease);white-space:nowrap}
.toggle button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px -2px rgba(13,26,30,.25)}
#s-trip .veh{margin-top:8px}
#s-trip .veh select{padding:10px 36px 10px 12px;font-size:14px;border-color:var(--line)}
/* board */
.board{max-width:1180px;margin:0 auto;padding:40px 24px 140px}
@media (max-width:900px){.board{padding:28px 16px 130px}}
.board-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px}
.board-h h2{margin:0;font:800 clamp(26px,3vw,36px)/1 var(--display);letter-spacing:-.04em}
.board .fresh{margin-top:8px;display:flex;align-items:center;gap:8px}
.board .fresh button{margin-left:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font:600 13.5px var(--display);display:flex;gap:8px;align-items:center;transition:all .3s var(--ease)}
.tabs button b{font:600 11px var(--mono);background:var(--stage);border-radius:999px;padding:2px 7px}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs button[aria-selected=true] b{background:rgba(255,255,255,.18)}
.hot{margin-top:14px;padding:12px 14px;border-radius:14px;background:#FFF4EC;border:1px solid #F6D3BE;color:#7a4a2e;font-size:13.5px}
.dep{width:100%;display:grid;grid-template-columns:150px minmax(0,1fr) 180px 20px;gap:20px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:16px 8px;
opacity:0;transform:translateY(8px);animation:in .6s var(--ease) forwards;transition:background .3s}
.dep:hover{background:var(--stage)}
.dep:hover .go{transform:translateX(4px);color:var(--ink)}
.dt .flaps{font-size:28px}
.dt small{display:block;font:500 11px var(--mono);color:var(--muted);margin-top:6px}
.dv{display:flex;align-items:center;gap:12px;min-width:0}
.dv>span:last-child{min-width:0}
.ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--foam);color:var(--sea)}
.ico.boat,.ico.combo{background:#EAF3F7;color:#2C6E8A}
.ico svg{width:20px;height:20px}
.dv b{display:block;font:700 16.5px var(--display);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv small em{font-style:normal;color:#9A6B1E}
.ds2{text-align:right;display:grid;justify-items:end;gap:3px}
.ds2 b{font:700 15px var(--display)}
.ds2 small{font:500 11px var(--mono);color:var(--muted)}
.dep.ok .ds2 b{color:var(--ok)}.dep.low .ds2 b{color:var(--signal)}
.sbar{display:block;width:120px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.sbar i{display:block;height:100%;background:var(--sea);transform-origin:left;animation:grow 1s var(--ease) both}
.dep.low .sbar i{background:var(--signal)}
.go{font:600 22px var(--display);color:var(--muted);transition:all .3s var(--ease)}
.dep.full{opacity:.5}.dep.full .fl i{color:#8A979A}.dep.full .ds2 b{color:#8A979A}
.dep.full{animation:in .6s var(--ease) forwards;}
@keyframes in{to{opacity:var(--o,1);transform:none}}
.dep.full{--o:.5}
@media (max-width:700px){
.dep{grid-template-columns:88px minmax(0,1fr) auto;gap:12px;padding:14px 4px}
.dt .flaps{font-size:20px}
.go,.ico{display:none}
.sbar{width:64px}
.board-h{align-items:flex-start}
}
.list .grp{margin-top:22px}
.list .grp h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);font-weight:500;color:var(--muted)}
#s-trip .hero-top{z-index:3}
#s-trip .bar>.route{grid-area:auto;padding:16px 18px;border-radius:0}
@media (max-width:900px){#s-trip .bar>.route{padding:12px 12px}}
@media (min-width:901px){.bar{grid-template-columns:minmax(0,1.35fr) minmax(0,1.6fr) minmax(0,.95fr)} #s-trip .rf select{font-size:17px}}
.wd{flex:1 1 0;min-width:44px}
.wd small{font-size:8.5px}
.paxrow{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:16px;padding:10px 12px 10px 16px;box-shadow:0 0 0 1px var(--line)}
.paxrow span{font-weight:600;font-size:14.5px}
.step{display:flex;align-items:center;gap:6px}
.step button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--stage);font:600 20px var(--display);line-height:1}
.step b{min-width:30px;text-align:center;font:600 18px var(--mono)}
.bkhint{margin:0;font-size:12px;color:var(--muted);text-align:center}