/* The Trip — By Fyndig
   Dark editorial design system: ink and pearl, Anton display caps, sky and sun.
   One file, no build step. Component selectors are unchanged from the earlier
   build, so the screens render in this language without rewriting their markup. */

:root{
  /* surfaces, darkest first */
  --bg:#06080F; --surface:#0C111F; --surface-2:#131A2C;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.06);

  /* type */
  --ink:#F6F4EF;          /* pearl — body text */
  --ink-2:#A2AAC0;        /* muted */
  --ink-3:#6C7590;        /* faint */

  /* accents */
  --brand:#1AA7F0; --brand-700:#58C4FF;
  --brand-50:rgba(26,167,240,.14); --brand-100:rgba(26,167,240,.22);
  --sun:#FDB515; --sun-50:rgba(253,181,21,.14);
  --navy:#0D1B5E; --navy-2:#13266F;
  --ok:#3ED598; --ok-50:rgba(62,213,152,.14);
  --warn:#FDB515; --warn-50:rgba(253,181,21,.14);
  --danger:#FF6B5A; --danger-50:rgba(255,107,90,.14);

  /* the template leans on generous radii and pill shapes */
  --r-s:12px; --r:16px; --r-l:22px; --r-xl:28px;

  /* depth comes from light, not drop shadow, on a dark ground */
  --sh-1:0 1px 0 rgba(255,255,255,.03) inset;
  --sh-2:0 18px 40px rgba(0,0,0,.5);
  --sh-3:0 30px 80px rgba(0,0,0,.65);

  --f:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-d:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.9,.24,1);

  --tab-h:66px; --top-h:64px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}



*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--f); -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body.noscroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.22;letter-spacing:-.015em}
h1{font-size:1.5rem} h2{font-size:1.18rem} h3{font-size:1.02rem}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:16px;height:16px} .ic.lg{width:26px;height:26px}
.mut{color:var(--ink-2)}
.tiny{font-size:.8rem}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}
.hide{display:none!important}

/* ================= shell ================= */
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:calc(var(--sat) + 8px) 14px 8px;
  display:flex;align-items:center;gap:10px;min-height:calc(var(--top-h) + var(--sat));
}
.topbar.hero{background:var(--brand);border-color:transparent;color:#fff}
.topbar .ttl{font-weight:700;font-size:1.06rem;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sub{display:block;font-weight:500;font-size:.76rem;color:var(--ink-3);letter-spacing:0}
.topbar.hero .sub{color:rgba(255,255,255,.82)}
.topbar .grow{flex:1;min-width:0}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;flex:none;color:inherit}
.iconbtn:hover{background:var(--surface-2)}
.topbar.hero .iconbtn:hover{background:rgba(255,255,255,.14)}
.iconbtn .dot{position:absolute;margin:-14px 0 0 14px;width:8px;height:8px;border-radius:50%;background:var(--danger)}

.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand img{width:32px;height:30px}
.brand b{display:block;font-size:1.02rem;line-height:1.1}
.brand small{display:block;font-size:.6rem;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.topbar.hero .brand small{color:rgba(255,255,255,.8)}

main{flex:1;padding-bottom:calc(var(--tab-h) + var(--sab) + 12px)}
.wrap{padding:14px}
.screen{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--sab);box-shadow:0 -2px 14px rgba(15,23,42,.06)
}
.tabbar a{display:grid;justify-items:center;gap:3px;padding:9px 4px 8px;min-height:var(--tab-h);color:var(--ink-3);font-size:.68rem;font-weight:600}
.tabbar a.on{color:var(--brand)}
.tabbar a .ic{width:22px;height:22px}
.tabbar a .pip{position:absolute;margin:-2px 0 0 14px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:.62rem;display:grid;place-items:center}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 20px;border-radius:var(--r);
  background:var(--brand);color:#fff;font-weight:700;font-size:.97rem;
  transition:transform .12s ease,filter .16s ease;white-space:nowrap
}
.btn:active{transform:scale(.985)}
.btn:hover{filter:brightness(1.06)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.soft{background:var(--brand-50);color:var(--brand-700)}
.btn.sun{background:var(--sun);color:#3A2A08}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{min-height:40px;padding:0 14px;font-size:.87rem;border-radius:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.loading{opacity:.9}
.linkbtn{color:var(--brand);font-weight:700}
.linkbtn:hover{text-decoration:underline}
.rowbtns{display:flex;gap:10px;margin-top:16px}
.rowbtns .btn{flex:1}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp .7s linear infinite;flex:none}
.btn.ghost .spin{border-color:var(--line);border-top-color:var(--brand)}
@keyframes sp{to{transform:rotate(360deg)}}

/* ================= cards & lists ================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.card.pad{padding:16px}
.sec{margin:22px 0 0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 11px}
.sechead h2{font-size:1.1rem}
.sechead a,.sechead button{color:var(--brand);font-weight:700;font-size:.85rem;white-space:nowrap}

.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 14px 6px;margin:0 -14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start;flex:none}

.pcard{display:block;width:264px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.pcard .ph{position:relative;aspect-ratio:16/10;background:var(--surface-2)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .bd{padding:12px 13px 14px;display:grid;gap:7px}
.pcard h3{font-size:1rem}
.pcard .meta{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:.8rem;flex-wrap:wrap}
.pcard .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pcard .price b{font-size:1.12rem}
.pcard .price s{color:var(--ink-3);font-size:.84rem}
.pcard .price small{color:var(--ink-3);font-size:.76rem}
.pcard.full{width:auto}
.badge{position:absolute;top:10px;left:10px;background:var(--sun);color:#3A2A08;font-size:.7rem;font-weight:800;padding:5px 9px;border-radius:8px;letter-spacing:.02em}
.wish{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink-2);display:grid;place-items:center;box-shadow:var(--sh-1)}
.wish.on{color:var(--danger)}
.wish.on .ic{fill:currentColor}

.dcard{position:relative;width:150px;height:186px;border-radius:var(--r-l);overflow:hidden;color:#fff;display:block;box-shadow:var(--sh-1)}
.dcard img{width:100%;height:100%;object-fit:cover}
.dcard .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));display:flex;flex-direction:column;justify-content:flex-end;padding:12px;gap:2px}
.dcard b{font-size:1rem} .dcard small{font-size:.74rem;opacity:.86}

.tile{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);width:100%;text-align:left}
.tile+.tile{margin-top:8px}
.tile .tic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand);flex:none}
.tile .tx{flex:1;min-width:0}
.tile .tx b{display:block;font-size:.97rem}
.tile .tx small{color:var(--ink-3);display:block;font-size:.82rem}
.tile .arw{color:var(--ink-3);flex:none}

.rowitem{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.rowitem:last-child{border-bottom:0}
.rowitem .dot{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);flex:none}
.rowitem b{display:block;font-size:.95rem}
.rowitem small{color:var(--ink-2);display:block;font-size:.85rem}

/* ================= chips, tags, pills ================= */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:.86rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:2px 14px;margin:0 -14px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;background:var(--surface-2);color:var(--ink-2);font-size:.75rem;font-weight:600}
.tag.ok{background:var(--ok-50);color:var(--ok)}
.tag.warn{background:var(--warn-50);color:var(--warn)}
.tag.brand{background:var(--brand-50);color:var(--brand-700)}
.stars{display:inline-flex;gap:1px;color:var(--line)}
.stars .ic{width:14px;height:14px}
.stars .on{color:var(--sun)}
.stars .on .ic{fill:currentColor;stroke:none}
.ratepill{display:inline-flex;align-items:center;gap:4px;background:var(--ok-50);color:var(--ok);padding:3px 8px;border-radius:7px;font-size:.78rem;font-weight:700}
.ratepill .ic{width:13px;height:13px;fill:currentColor;stroke:none}
.ratepill small{font-weight:600;opacity:.8}

/* ================= forms ================= */
.field{display:grid;gap:6px;margin-bottom:14px;min-width:0}
.field>label{font-size:.83rem;font-weight:700;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:1rem;transition:border-color .15s,box-shadow .15s
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50);outline:0}
.field.bad input,.field.bad select{border-color:var(--danger)}
.field .err{color:var(--danger);font-size:.8rem;font-weight:600;min-height:0}
.field .hint{color:var(--ink-3);font-size:.8rem}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inputicon{position:relative}
.inputicon .ic{position:absolute;left:13px;top:15px;color:var(--ink-3)}
.inputicon input{padding-left:42px}

.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:0 14px;min-height:52px;width:100%}
.searchbar input{border:0;background:none;flex:1;min-height:50px;padding:0;font-size:1rem;min-width:0}
.searchbar input:focus{outline:0;box-shadow:none}

.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;min-height:40px;border-radius:9px;font-weight:700;font-size:.88rem;color:var(--ink-2)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line);display:grid;place-items:center;background:var(--surface);color:var(--brand)}
.stepper button:disabled{opacity:.4;color:var(--ink-3)}
.stepper b{min-width:26px;text-align:center;font-size:1.05rem}

.optcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:10px}
.optcard.on{border-color:var(--brand);background:var(--brand-50)}
.optcard .tic{width:40px;height:40px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--brand);flex:none}
.optcard.on .tic{background:var(--surface)}
.optcard .tx{flex:1;min-width:0}
.optcard .tx b{display:block}
.optcard .tx small{display:block;color:var(--ink-3);font-size:.82rem}
.optcard .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:#fff}
.optcard.on .tick{background:var(--brand);border-color:var(--brand)}
.optcard .tick .ic{width:13px;height:13px;stroke-width:3}

.check{display:flex;align-items:flex-start;gap:11px;padding:12px 0;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--brand);margin-top:1px}

/* OTP */
.otp{display:flex;gap:9px;justify-content:space-between;margin:6px 0 4px}
.otp input{width:100%;text-align:center;font-size:1.3rem;font-weight:700;padding:12px 0;letter-spacing:.06em}

/* ================= detail page bits ================= */
.gallery{position:relative;background:var(--surface-2)}
.gallery .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery .strip::-webkit-scrollbar{display:none}
.gallery .strip img{width:100%;flex:none;aspect-ratio:16/10;object-fit:cover;scroll-snap-align:center}
.gallery .count{position:absolute;right:12px;bottom:12px;background:rgba(15,23,42,.72);color:#fff;font-size:.76rem;font-weight:700;padding:5px 10px;border-radius:8px}

.pricebox{display:grid;gap:9px}
.priceline{display:flex;justify-content:space-between;gap:12px;font-size:.93rem}
.priceline.big{font-size:1.06rem;font-weight:800;padding-top:10px;border-top:1px dashed var(--line)}
.priceline .off{color:var(--ok);font-weight:700}

.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tlday{position:relative;padding:0 0 18px}
.tlday::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface)}
.tlday .dn{font-size:.73rem;font-weight:800;color:var(--brand);letter-spacing:.08em;text-transform:uppercase}
.tlday h4{margin:2px 0 4px;font-size:1rem}

.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.acc+.acc{margin-top:8px}
.acc>summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .ic{transition:transform .2s;color:var(--ink-3)}
.acc[open]>summary .ic{transform:rotate(180deg)}
.acc .body{padding:0 16px 16px;color:var(--ink-2)}

.inclist{display:grid;gap:9px}
.inclist div{display:flex;gap:9px;align-items:flex-start;font-size:.92rem}
.inclist .ic{color:var(--ok);margin-top:2px}
.inclist.no .ic{color:var(--ink-3)}

.review{padding:14px 0;border-bottom:1px solid var(--line)}
.review:last-child{border-bottom:0}
.review .who{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.review .av{width:34px;height:34px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}

.stickybar{
  position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--sab));z-index:35;
  background:var(--surface);border-top:1px solid var(--line);
  padding:11px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 -4px 18px rgba(15,23,42,.08)
}
.stickybar .px{flex:1;min-width:0}
.stickybar .px b{display:block;font-size:1.1rem;line-height:1.2}
.stickybar .px small{color:var(--ink-3);font-size:.76rem}
.stickybar .btn{flex:none;min-width:150px}
body.has-sticky main{padding-bottom:calc(var(--tab-h) + var(--sab) + 92px)}

/* progress steps */
.steps{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:calc(var(--top-h) + var(--sat));z-index:20}
.steps i{flex:1;height:4px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--brand)}
.steps span{font-size:.75rem;font-weight:700;color:var(--ink-3);white-space:nowrap}

/* ================= overlays ================= */
#layer{position:fixed;inset:0;z-index:60;display:none}
#layer.on{display:block}
.veil{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px)}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px calc(20px + var(--sab));box-shadow:var(--sh-3);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.3,1)
}
.sheet.up{transform:none}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.grabber{width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 10px}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sheethead h2{font-size:1.12rem}
.sheetbody{padding-bottom:4px}

#toasts{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--sab) + 14px);z-index:70;display:grid;gap:8px;justify-items:center;pointer-events:none;padding:0 14px}
.toast{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;box-shadow:var(--sh-3);font-size:.9rem;font-weight:600;max-width:440px;
  opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s}
.toast.in{opacity:1;transform:none}
.toast.err{background:var(--danger);color:#fff}
.toast.info{background:var(--brand);color:#fff}

/* ================= states ================= */
.skelwrap{display:grid;gap:10px}
.skel{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sh 1.3s linear infinite}
.skel.big{height:160px;border-radius:var(--r-l)}
.skel.half{width:55%}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

.emptybox{text-align:center;padding:36px 20px;display:grid;gap:9px;justify-items:center}
.emptyicon{width:60px;height:60px;border-radius:18px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center}
.emptyicon .ic{width:28px;height:28px}
.errbox{background:var(--danger-50);border:1px solid var(--danger);border-radius:var(--r);padding:16px;display:grid;gap:10px;color:var(--ink)}
.notice{background:var(--brand-50);border-radius:var(--r);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--ink-2)}
.notice .ic{color:var(--brand);flex:none;margin-top:1px}
.notice.warn{background:var(--warn-50)} .notice.warn .ic{color:var(--warn)}
.notice.ok{background:var(--ok-50)} .notice.ok .ic{color:var(--ok)}

#netbadge{position:fixed;left:14px;right:14px;bottom:calc(var(--tab-h) + var(--sab) + 12px);z-index:55;background:var(--warn-50);color:var(--warn);border:1px solid var(--warn);padding:11px 14px;border-radius:12px;font-size:.85rem;font-weight:700;text-align:center}
.appbanner{position:fixed;left:14px;right:14px;bottom:calc(var(--tab-h) + var(--sab) + 12px);z-index:56;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;font-size:.88rem}
.appbanner span{flex:1}

/* confirmation */
.tickethead{background:var(--ok-50);border-radius:var(--r-l);padding:24px 18px;text-align:center;display:grid;gap:8px;justify-items:center}
.tickethead .seal{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.tickethead .seal .ic{width:32px;height:32px;stroke-width:2.4}
.refbox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r);padding:13px 15px}
.refbox b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em}

/* ================= desktop ================= */
@media (min-width:900px){
  body{font-size:15.5px}
  .tabbar{display:none}
  main{padding-bottom:40px}
  body.has-sticky main{padding-bottom:40px}
  .topbar{
    padding:14px 28px;min-height:70px;position:sticky;top:0;
    background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)
  }
  .topbar.hero{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
  .topbar.hero .sub,.topbar.hero .brand small{color:var(--ink-3)}
  .topbar.hero .iconbtn:hover{background:var(--surface-2)}
  .desknav{display:flex;align-items:center;gap:4px;margin-left:18px}
  .desknav a{padding:10px 14px;border-radius:11px;font-weight:700;font-size:.92rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
  .desknav a.on{background:var(--brand-50);color:var(--brand-700)}
  .desknav a:hover{background:var(--surface-2)}
  .wrap{max-width:1140px;margin:0 auto;padding:22px 28px 60px}
  .hscroll{margin:0;padding:2px 0 8px}
  .chiprow{margin:0;padding:2px 0}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .pcard{width:auto}
  .dcard{width:auto;height:210px}
  .detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:26px;align-items:start}
  .detail .side{position:sticky;top:96px}
  .stickybar{display:none}
  .stickybar.deskkeep{display:flex;position:static;box-shadow:none;border:1px solid var(--line);border-radius:var(--r-l);margin-top:14px}
  .sheet{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-46%) scale(.97);width:min(560px,92vw);border-radius:var(--r-xl);max-height:84vh;opacity:0;transition:opacity .2s,transform .2s}
  .sheet.up{transform:translate(-50%,-50%);opacity:1}
  .sheet.wide{width:min(860px,94vw)}
  .grabber{display:none}
  #toasts{bottom:26px}
  #netbadge,.appbanner{left:auto;right:26px;bottom:26px;width:min(420px,90vw)}
  .steps{top:70px}
  .gallery .strip img{border-radius:var(--r-l)}
  .gallery.two{display:grid;grid-template-columns:2fr 1fr;gap:10px}
  .gallery.two .strip{display:grid;gap:10px;overflow:visible}
}
@media (min-width:900px) and (max-width:1100px){
  .grid3{grid-template-columns:repeat(2,1fr)}
}

/* short screens */
@media (max-height:560px){
  .sheet{max-height:94vh}
  .tickethead{padding:16px}
}

/* print — the voucher */
@media print{
  .topbar,.tabbar,.stickybar,#toasts,#layer,.noprint{display:none!important}
  body{background:#fff}
  main{padding:0}
  .wrap{max-width:none;padding:0}
  .card{box-shadow:none;border:1px solid #ccc}
}

/* =========================================================
   Brand layer — matches the launch creative
   navy wordmark, sky-blue actions, yellow accent, photo hero
   ========================================================= */
h1,h2,h3,h4{color:var(--navy)}
.topbar.hero{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.topbar.hero .sub,.topbar.hero .brand small{color:var(--ink-3)}
.topbar.hero .iconbtn:hover{background:var(--surface-2)}
.brand img{width:36px;height:34px}
.brand b{font-size:1.04rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);text-transform:uppercase}
.brand small{font-size:.58rem;letter-spacing:.3em;color:var(--brand);font-weight:800}

.explorebtn{display:none}
@media (min-width:900px){
  .explorebtn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;
    min-height:42px;padding:0 20px;border-radius:999px;margin-left:10px}
  .explorebtn:hover{filter:brightness(1.07)}
  .desknav a.on{background:transparent;color:var(--brand);position:relative}
  .desknav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}
  .desknav a .ic{display:none}
}

/* ---------- photo hero (mobile) ---------- */
.herocard{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);isolation:isolate}
.herocard>img{width:100%;height:clamp(230px,44vw,330px);object-fit:cover}
.herocard .hov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,28,58,.12) 0%,rgba(6,28,58,.30) 42%,rgba(6,28,58,.86) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 18px 20px;color:#fff}
.herocard .eyebrow{font-size:1.16rem;font-weight:600;font-style:italic;letter-spacing:.01em;opacity:.97}
.herocard h1{color:#fff;font-size:clamp(1.42rem,5.4vw,1.85rem);font-weight:800;letter-spacing:-.02em;line-height:1.14}
.herocard p{color:rgba(255,255,255,.9);font-size:.88rem;max-width:32ch}
.herocard .rule{width:64px;height:3px;border-radius:3px;background:var(--sun);margin-bottom:2px}

/* ---------- the big search ---------- */
.bigsearch{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;
  box-shadow:var(--sh-2);border:1px solid var(--line);padding:6px 6px 6px 18px;width:100%;min-height:58px}
.bigsearch input{flex:1;min-width:0;border:0;background:none;font-size:.98rem;min-height:44px;padding:0}
.bigsearch input:focus{outline:0;box-shadow:none}
.bigsearch .go{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.bigsearch .go:hover{filter:brightness(1.08)}
.bigsearch.float{margin-top:-30px;position:relative;z-index:5;width:calc(100% - 24px);margin-inline:12px}

/* ---------- three feature columns ---------- */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px}
.feat3 a,.feat3 div{display:grid;justify-items:center;gap:8px;text-align:center;padding:4px 8px;position:relative}
.feat3 a+a::before,.feat3 div+div::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.feat3 .fic{width:44px;height:44px;display:grid;place-items:center;color:var(--navy)}
.feat3 .fic .ic{width:30px;height:30px;stroke-width:1.6}
.feat3 b{font-size:.86rem;font-weight:800;color:var(--navy);line-height:1.25}
.feat3 small{font-size:.72rem;color:var(--ink-3)}

/* ---------- destination tiles ---------- */
.destgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dtile{border-radius:var(--r-l);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);display:block}
.dtile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dtile .lb{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px}
.dtile .lb b{font-size:.94rem;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtile .lb .ic{color:var(--ink-3);flex:none}
.dtile:hover{box-shadow:var(--sh-2)}

/* ---------- desktop hero ---------- */
.dhero{display:none}
@media (min-width:900px){
  .mobhero{display:none}
  .dhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);gap:34px;align-items:center;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
    padding:40px 0 40px 44px;overflow:hidden}
  .dhero h1{font-size:clamp(2.1rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.03em}
  .dhero p.lead{color:var(--ink-2);font-size:1.02rem;margin:14px 0 22px;max-width:46ch}
  .dhero .bigsearch{max-width:520px}
  .dhero .feat3{max-width:520px;margin-top:26px}
  .dheroimg{position:relative;height:100%;min-height:380px;border-radius:var(--r-xl) 0 0 var(--r-xl);overflow:hidden}
  .dheroimg img{width:100%;height:100%;object-fit:cover}
  .dheroimg .cap{position:absolute;right:18px;bottom:20px;color:#fff;text-align:right;font-weight:700;font-style:italic;
    font-size:1.05rem;line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.5)}
  .dheroimg .cap i{display:block;width:70px;height:3px;background:var(--sun);border-radius:3px;margin:8px 0 0 auto}
  .destgrid{grid-template-columns:repeat(4,1fr);gap:18px}
}

/* yellow underline used under section titles */
.uline{display:block;width:52px;height:4px;border-radius:3px;background:var(--sun);margin-top:7px}
.tabbar a.on{color:var(--brand)}
.tabbar a.on .ic{stroke-width:2.2}

/* fixes: desktop nav is desktop-only; the floating search must not cover the hero text */
.desknav{display:none}
.mobhero .herocard .hov{padding-bottom:52px}
.bigsearch.float{margin-top:-32px}
@media (min-width:900px){
  .desknav{display:flex}
  .dhero .bigsearch.float{margin:0;width:100%}
}
.dtile img{object-position:50% 62%}

/* QA fixes: comfortable hit areas and a title that truncates properly */
.topbar .grow{min-width:0;overflow:hidden}
.topbar .ttl{display:block;max-width:100%}
a.tag,button.tag{min-height:34px;padding:7px 12px}
.tag button{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;margin:-4px -6px -4px 2px}
.tag button:hover{background:rgba(0,0,0,.08)}
.linkbtn{display:inline-flex;align-items:center;min-height:32px}
.sechead a,.sechead button{min-height:32px;display:inline-flex;align-items:center;gap:4px}
.tag button{width:32px;height:32px;margin:-6px -8px -6px 2px}

/* the checkout action bar must stay reachable on desktop too */
@media (min-width:900px){
  .stickybar.flow{
    display:flex;position:sticky;bottom:24px;left:auto;right:auto;
    max-width:640px;margin:20px auto 0;border:1px solid var(--line);
    border-radius:var(--r-l);box-shadow:var(--sh-3)
  }
  body.has-sticky main{padding-bottom:60px}
}
/* the width/height attributes were winning over aspect-ratio, making the gallery huge */
.gallery .strip img{height:auto;max-height:58vh}
.dtile img,.destgrid .dtile img{height:auto}

/* =========================================================
   MOTION LAYER
   Everything here is disabled under prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){

  /* screen entrances, with direction */
  .screen{animation:scrIn .34s cubic-bezier(.22,.9,.28,1) both}
  .screen.back{animation:scrBack .34s cubic-bezier(.22,.9,.28,1) both}
  @keyframes scrIn{from{opacity:0;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}
  @keyframes scrBack{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}

  /* staggered reveal as blocks scroll in */
  .rv{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,.9,.28,1),transform .5s cubic-bezier(.22,.9,.28,1)}
  .rv.in{opacity:1;transform:none}

  /* photographs fade and settle instead of popping in */
  img.ph{opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform .7s cubic-bezier(.22,.9,.28,1)}
  img.ph.ready{opacity:1;transform:none}

  .pcard{transition:box-shadow .26s,transform .26s}
  .pcard .ph img{transition:transform .6s cubic-bezier(.22,.9,.28,1)}
  .pcard:hover .ph img{transform:scale(1.07)}
  .dtile img{transition:transform .6s cubic-bezier(.22,.9,.28,1)}
  .dtile:hover img{transform:scale(1.06)}
  .tile{transition:transform .18s,background .18s}
  .tile:hover{transform:translateX(2px);background:var(--surface-2)}

  /* the hero photograph drifts */
  .herocard>img,.dheroimg img{animation:kb 26s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}

  .stickybar{animation:barUp .34s cubic-bezier(.22,.9,.28,1) both}
  @keyframes barUp{from{transform:translateY(100%)}to{transform:none}}
  @media (min-width:900px){.stickybar.flow{animation:none}}

  .chip,.optcard,.seg button{transition:background .18s,border-color .18s,color .18s,transform .14s}
  .chip:active,.optcard:active{transform:scale(.97)}
  .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .4s}
  .btn:active::after{opacity:1;transition:none}
}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn>*{position:relative;z-index:1}

/* header condenses on scroll */
.topbar{transition:box-shadow .25s,background .25s,min-height .25s}
.topbar.stuck{box-shadow:0 6px 24px rgba(12,47,99,.10);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.6) blur(12px)}

/* tab bar: sliding indicator */
.tabbar{position:fixed}
.tabbar .ind{position:absolute;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--brand);transition:transform .32s cubic-bezier(.22,.9,.28,1),width .32s;width:20%;transform-origin:left}
@media (prefers-reduced-motion:reduce){.tabbar .ind{transition:none}}
.tabbar a{transition:color .2s}
.tabbar a.on .ic{animation:pop .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tabbar a.on .ic{animation:none}}

/* confirmation seal + confetti */
.seal{animation:sealIn .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sealIn{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none;opacity:1}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.seal{animation:none}.confetti{display:none}}

/* =========================================================
   NEW COMPONENTS
   ========================================================= */

/* departure calendar */
.deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.dep{border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px;text-align:left;display:grid;gap:3px}
.dep b{font-size:.96rem}
.dep .pz{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.dep small{font-size:.74rem;color:var(--ink-3)}
.dep.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50)}
.dep.low small{color:var(--warn);font-weight:700}
.dep.out{opacity:.45;cursor:not-allowed}
.dep.out b{text-decoration:line-through}
.dep .best{font-size:.66rem;font-weight:800;color:var(--ok);letter-spacing:.04em;text-transform:uppercase}

/* compare */
.cmpbar{position:fixed;left:14px;right:14px;bottom:calc(var(--tab-h) + var(--sab) + 12px);z-index:45;
  background:var(--navy);color:#fff;border-radius:16px;box-shadow:var(--sh-3);padding:10px 12px;
  display:flex;align-items:center;gap:10px}
.cmpbar .thumbs{display:flex;gap:6px;flex:1;min-width:0}
.cmpbar img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none}
.cmpbar .btn{min-height:40px;padding:0 14px;font-size:.87rem}
@media (min-width:900px){.cmpbar{left:auto;right:26px;bottom:26px;width:min(460px,92vw)}}
.cmptable{width:100%;border-collapse:collapse;font-size:.88rem}
.cmptable th,.cmptable td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmptable th{position:sticky;top:0;background:var(--surface);z-index:1}
.cmptable td:first-child,.cmptable th:first-child{color:var(--ink-3);font-weight:700;width:34%}
.cmpwrap{overflow-x:auto}
.cmpsel{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.92);
  color:var(--ink-3);display:grid;place-items:center;box-shadow:var(--sh-1);z-index:2}
.cmpsel.on{background:var(--brand);color:#fff}

/* wallet */
.wallet{background:linear-gradient(135deg,var(--navy),#1a4a95);color:#fff;border-radius:var(--r-l);padding:18px;position:relative;overflow:hidden}
.wallet::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.wallet .amt{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.wallet small{opacity:.8}
.refcode{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.4);
  border-radius:12px;padding:10px 12px;margin-top:14px;position:relative;z-index:1}
.refcode b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;flex:1}

/* countdown */
.countdown{display:flex;gap:10px}
.countdown div{flex:1;background:var(--surface-2);border-radius:12px;padding:10px;text-align:center}
.countdown b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums;color:var(--navy)}
.countdown small{font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

/* packing list */
.packrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.packrow:last-child{border-bottom:0}
.packrow input{width:22px;height:22px;accent-color:var(--brand);flex:none}
.packrow.done span{text-decoration:line-through;color:var(--ink-3)}
.packbar{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin:8px 0 14px}
.packbar i{display:block;height:100%;background:var(--brand);transition:width .4s cubic-bezier(.22,.9,.28,1)}

/* rating input */
.ratepick{display:flex;gap:6px}
.ratepick button{width:44px;height:44px;display:grid;place-items:center;color:var(--line)}
.ratepick button.on{color:var(--sun)}
.ratepick .ic{width:30px;height:30px;fill:currentColor;stroke:none}

/* support chat */
.chatwrap{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:4px 2px 8px}
.msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.45}
.msg.them{background:var(--surface-2);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.typing{display:flex;gap:4px;align-items:center}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.quickq{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* weather strip */
.wx{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.wx::-webkit-scrollbar{display:none}
.wx div{flex:none;width:58px;text-align:center;padding:9px 4px;border-radius:11px;background:var(--surface-2)}
.wx div.best{background:var(--ok-50)}
.wx div.avoid{background:var(--warn-50)}
.wx b{display:block;font-size:.78rem}
.wx small{font-size:.66rem;color:var(--ink-3)}

/* section title with a count */
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--brand-50);color:var(--brand-700);
  border-radius:999px;padding:4px 10px;font-size:.74rem;font-weight:800}
@media (min-width:900px){
  .gallery .strip img{max-height:46vh}
  .gallery{padding:0 28px;max-width:1140px;margin:18px auto 0}
}

/* =========================================================
   3D depth on cards and tiles
   ========================================================= */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
  .tilt:hover{box-shadow:0 22px 48px -18px rgba(12,47,99,.4)}
  .tiltwrap{perspective:900px}
  .feat3 a .fic{transition:transform .4s cubic-bezier(.2,1.3,.35,1)}
  .feat3 a:hover .fic{transform:translateY(-4px) rotateY(16deg) scale(1.08)}
}
.dtile .lb,.pcard .bd{position:relative}

/* a glass finish on the hero search */
.bigsearch{backdrop-filter:saturate(1.3) blur(10px)}
.herocard{box-shadow:0 26px 60px -26px rgba(12,47,99,.55),0 2px 10px rgba(12,47,99,.1)}
/* the screen-entrance slide must not widen the page while it runs
   (clip, not hidden — hidden would break the sticky step bar inside) */
main{overflow-x:clip}
@supports not (overflow:clip){ .screen{overflow-x:hidden} }

/* =========================================================
   THE OPENING FILM
   A full-bleed 3D title sequence. Everything visual is drawn on
   the canvas; the only DOM here is the copy that lands under the
   wordmark, the progress hairline and the way out.
   ========================================================= */
body.introlock{overflow:hidden}

.intro{
  position:fixed;inset:0;z-index:200;overflow:hidden;background:#06080F;
  display:grid;place-items:center;opacity:0;transition:opacity .5s ease;
}
.intro.go{opacity:1}
.intro.out{opacity:0;transform:scale(1.04);filter:blur(2px);
  transition:opacity .72s ease,transform .72s ease,filter .72s ease}

.introstage{position:absolute;inset:0;width:100%;height:100%;display:block}

.introcopy{
  position:absolute;left:0;right:0;bottom:clamp(74px,16vh,150px);z-index:3;
  display:grid;justify-items:center;gap:12px;text-align:center;
  padding-inline:22px;pointer-events:none;
}
.introby{
  font-family:var(--f-m);font-size:clamp(.6rem,2vw,.72rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--sun);
  opacity:0;transform:translateY(12px);
}
.introline{
  font-family:var(--f-m);font-size:clamp(.54rem,1.9vw,.64rem);
  letter-spacing:.2em;text-transform:uppercase;color:#6C7590;
  max-width:36ch;line-height:2.1;opacity:0;transform:translateY(12px);
}
.intro.go .introby{animation:introUp .8s cubic-bezier(.22,.9,.24,1) 3.45s forwards}
.intro.go .introline{animation:introUp .8s cubic-bezier(.22,.9,.24,1) 3.65s forwards}
@keyframes introUp{to{opacity:1;transform:none}}

.introbar{
  position:absolute;left:50%;transform:translateX(-50%);z-index:3;
  bottom:clamp(34px,7vh,56px);width:min(190px,42vw);height:2px;
  background:rgba(246,244,239,.14);overflow:hidden;
}
.introbar i{display:block;height:100%;width:0;background:#FDB515}
.intro.go .introbar i{animation:introBar 5.2s linear forwards}
@keyframes introBar{to{width:100%}}

.introskip{
  position:absolute;right:clamp(14px,4vw,30px);z-index:3;
  bottom:calc(clamp(26px,6vh,46px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(246,244,239,.18);color:rgba(246,244,239,.7);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(8px);opacity:0;transition:.25s;
}
.intro.go .introskip{animation:introUp .6s ease 1.1s forwards}
.introskip:hover{color:#06080F;background:#F6F4EF;border-color:#F6F4EF}

@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ============================================================
   THE EDITORIAL LAYER
   Everything above sets structure; this sets the voice. Anton
   display caps, mono eyebrows, pill buttons, and a ground of ink
   where depth comes from light rather than drop shadow.
   ============================================================ */

body{font-size:15px;line-height:1.6;overflow-x:hidden}
::selection{background:var(--sun);color:#14100A}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* ---------- display typography ---------- */
h1,h2,h3{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.94}
h1{font-size:clamp(1.9rem,6.2vw,2.6rem)}
h2{font-size:clamp(1.3rem,4.4vw,1.7rem)}
h3{font-size:clamp(1.05rem,3.2vw,1.25rem)}
h4{font-weight:700;letter-spacing:-.01em}

/* the mono eyebrow the template uses above every section */
.eyebrow,.steps span,.topbar .sub,.brand small{
  font-family:var(--f-m);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
.num{font-family:var(--f-m);font-variant-numeric:tabular-nums}

.sechead h2{position:relative}
.sechead .uline{display:block;width:46px;height:3px;margin-top:10px;background:var(--sun)}
.sechead a,.sechead button{font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sun)}
.mut{color:var(--ink-2)}

/* ---------- shell ---------- */
.topbar{background:rgba(6,8,15,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-2)}
.topbar.stuck{background:rgba(6,8,15,.92)}
.topbar.hero{background:transparent;border-color:transparent;color:var(--ink)}
.topbar .ttl{font-family:var(--f-d);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.15rem}
.brand b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem}
.brand small{color:var(--brand);letter-spacing:.3em}
.iconbtn{border:1px solid var(--line);border-radius:50%;color:var(--ink-2);transition:.25s}
.iconbtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* the dock floats, as in the template */
.tabbar{left:12px;right:12px;bottom:calc(10px + var(--sab));border-radius:22px;
  background:rgba(12,17,31,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);padding:6px;box-shadow:var(--sh-2)}
.tabbar a{border-radius:16px;color:var(--ink-3);font-size:.6rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;min-height:56px}
.tabbar a.on{color:var(--sun);background:var(--sun-50)}
main{padding-bottom:calc(var(--tab-h) + var(--sab) + 26px)}

/* ---------- buttons ---------- */
.btn{border-radius:999px;min-height:52px;padding:0 24px;font-weight:700;font-size:.8rem;
  letter-spacing:.07em;text-transform:uppercase;background:var(--sun);color:#14100A;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn:hover{background:#FFC93F;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.06);border-color:var(--ink)}
.btn.soft{background:var(--brand-50);color:var(--brand-700)}
.btn.sun{background:var(--ink);color:var(--bg)}
.btn.danger{background:var(--danger);color:#1A0906}
.btn.sm{min-height:42px;padding:0 16px;font-size:.7rem}
.linkbtn{color:var(--sun);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem}
.spin{border-color:rgba(0,0,0,.25);border-top-color:#14100A}
.btn.ghost .spin{border-color:var(--line);border-top-color:var(--sun)}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:none;transition:border-color .4s}
.card:hover{border-color:var(--line)}
.card.pad{padding:20px}
.notice{border-radius:var(--r-l);border:1px solid var(--line-2);background:var(--surface)}
.notice.ok{background:var(--ok-50);border-color:transparent;color:var(--ok)}
.notice.warn{background:var(--warn-50);border-color:transparent;color:var(--warn)}
.tile{border-radius:var(--r-l)}
.tile:hover{background:rgba(255,255,255,.04)}
.tic{border-radius:14px;background:rgba(255,255,255,.05);color:var(--brand)}

/* ---------- pills, chips, tags ---------- */
.tag,.chip{border-radius:999px;font-family:var(--f);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-size:.67rem;border:1px solid var(--line);
  background:transparent;color:var(--ink-2)}
.chip{min-height:40px;padding:0 16px;letter-spacing:.05em;text-transform:none;font-size:.82rem}
.chip:hover{color:var(--ink);border-color:var(--ink-2)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag.ok{background:var(--ok-50);border-color:transparent;color:var(--ok)}
.tag.warn{background:var(--sun-50);border-color:transparent;color:var(--sun)}
.tag.brand{background:var(--brand-50);border-color:transparent;color:var(--brand)}
.badge{background:var(--sun);color:#14100A;border-radius:999px;font-family:var(--f);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.62rem}

/* ---------- forms ---------- */
.field input,.field select,.field textarea{background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sun);background:rgba(255,255,255,.06)}
.field label{font-family:var(--f-m);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}

/* ---------- imagery sits in ink, not on white ---------- */
img.ph{background:var(--surface-2)}
.dcard,.dtile,.pcard,.herocard,.gallery img{border-radius:var(--r-xl)}
.dtile .lb b{color:var(--ink)}
.wish,.cmpsel{background:rgba(6,8,15,.55);backdrop-filter:blur(6px);
  border:1px solid var(--line);color:var(--ink)}
.gallery .count{background:rgba(6,8,15,.6);backdrop-filter:blur(6px);
  font-family:var(--f-m);letter-spacing:.14em;font-size:.62rem}

/* ---------- flow furniture ---------- */
.stickybar{background:rgba(6,8,15,.9);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);box-shadow:none}
.stickybar .px b{font-family:var(--f-d);font-size:1.3rem;font-weight:400}
.steps i{background:var(--line)}
.steps i.on{background:var(--sun)}
.skel,.skel.big{background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));
  background-size:300% 100%}
.toast{background:var(--ink);color:var(--bg);border-radius:999px;font-weight:700;
  letter-spacing:.06em}
.toast.err{background:var(--danger);color:#1A0906}
.toast.info{background:var(--brand);color:#04121E}
.veil{background:rgba(6,8,15,.86);backdrop-filter:blur(12px)}
.sheet,.sheetbody{background:var(--surface)}
.wallet{background:linear-gradient(140deg,var(--navy),var(--surface));color:var(--ink)}
.tickethead .seal{background:var(--ok);color:#04150E}
.explorebtn{background:var(--sun);color:#14100A;border-radius:999px;
  letter-spacing:.09em;text-transform:uppercase;font-size:.72rem}

/* the hero card over photography */
.herocard h1{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,8vw,3.1rem);line-height:.9;letter-spacing:.005em}
.herocard p{color:var(--ink-2)}
.bigsearch{background:var(--surface);border:1px solid var(--line);border-radius:999px}
.bigsearch input{color:var(--ink)}
.bigsearch .go{background:var(--sun);color:#14100A}

/* print stays legible on paper */
@media print{
  body{background:#fff;color:#111}
  .card{background:#fff;border-color:#ddd}
}

/* --- navy was a text colour in the light build; on ink it disappears --- */
h1,h2,h3,h4{color:var(--ink)}
.brand b{color:var(--ink)}
.feat3 .fic{color:var(--brand)}
.feat3 b{color:var(--ink);font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:.95rem}
.feat3{border-color:var(--line-2)}
.feat3 small{color:var(--ink-3);font-family:var(--f-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.dep .pz,.countdown b{color:var(--ink);font-family:var(--f-m)}
.sechead h2{color:var(--ink)}

/* --- photography needs a real scrim before type sits on it --- */
.herocard .hov{background:
  linear-gradient(180deg,rgba(6,8,15,.1) 0%,rgba(6,8,15,.62) 48%,rgba(6,8,15,.96) 100%),
  radial-gradient(120% 90% at 18% 24%,rgba(6,8,15,.35),rgba(6,8,15,.82) 72%)}
.herocard .eyebrow{font-family:var(--f-m);font-size:.66rem;font-style:normal;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sun);opacity:1}
.herocard h1{color:var(--ink)}
.herocard p{color:rgba(246,244,239,.82)}
.dheroimg .cap{color:var(--ink);font-style:normal;font-family:var(--f-m);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400}

/* --- cards over photography --- */
.dcard .ov,.dtile .lb{background:linear-gradient(180deg,transparent 30%,rgba(6,8,15,.92))}
.dtile .lb b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.05rem}
.dtile .lb small{font-family:var(--f-m);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}

/* --- tooltip / popovers that were navy-on-white --- */
.them{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}

/* an unselected option must not show a tick */
.optcard .tick{color:transparent;border-color:var(--line)}
.optcard .tick .ic{opacity:0;transition:opacity .2s}
.optcard.on .tick{background:var(--brand);border-color:var(--brand);color:#04121E}
.optcard.on .tick .ic{opacity:1}
.optcard.on{border-color:var(--brand);background:var(--brand-50)}

/* ============================================================
   THE KINETIC HERO
   Line of small caps, then the place name itself as a window
   onto its own photograph, one at a time.
   ============================================================ */
.khero{position:relative;min-height:calc(86svh - var(--top-h));display:flex;
  flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.khero .bgwrap{position:absolute;inset:0;z-index:-2}
.khero .bg{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.khero .bg.on{opacity:.3}
.khero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.khero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 18% 30%,rgba(6,8,15,.42),rgba(6,8,15,.94) 70%)}
.khero .wrap{position:relative;display:grid;gap:clamp(16px,3vw,28px);padding-block:clamp(28px,7vw,64px)}
.khero .mono{font-family:var(--f-m);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3)}

.kinetic{display:grid;gap:clamp(2px,.6vw,8px)}
.kinetic .l1{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,5.2vw,3.1rem);line-height:.92;letter-spacing:.01em;color:var(--ink)}
.kinetic .slotwrap{height:clamp(3.1rem,13vw,7.6rem);overflow:hidden;position:relative}
.kinetic .slot{position:absolute;inset:0;display:flex;align-items:center;
  transform:translateY(105%);transition:transform .9s var(--ease)}
.kinetic .slot.on{transform:none}
.kinetic .slot.out{transform:translateY(-105%)}
.kinetic .word{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,13vw,7.4rem);line-height:.88;letter-spacing:-.01em;
  background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:saturate(1.25) contrast(1.08) brightness(1.5);
  -webkit-text-stroke:1px rgba(246,244,239,.22);paint-order:stroke fill}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .kinetic .word{color:var(--sun);-webkit-text-fill-color:var(--sun)}
}
.khero .lede{max-width:48ch;color:var(--ink-2);font-size:clamp(.92rem,2.6vw,1.05rem)}
.khero .cta{display:flex;gap:10px;flex-wrap:wrap}
.khero .searchbar,.khero .bigsearch{margin-top:2px}

/* the running ticker, outlined type with every third word filled */
.ticker{overflow:hidden;border-block:1px solid var(--line-2);padding-block:12px;position:relative}
.ticker .run{display:flex;gap:40px;width:max-content;animation:run 36s linear infinite}
.ticker span{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,3.4vw,1.8rem);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(246,244,239,.4)}
.ticker span.fill{color:var(--sun);-webkit-text-stroke:0}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .run{animation:none}}

/* the old split heroes are retired by the kinetic one */
.mobhero,.dhero{display:none!important}

/* side by side once there is room for them */
@media (min-width:560px){ .khero .cta .btn{flex:0 0 auto} }
.khero .cta .btn{flex:1 1 auto;min-width:220px}

/* ---------- the places index ---------- */
.plates{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.plate{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  display:block;aspect-ratio:4/3;border:1px solid var(--line-2)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plate:hover img{transform:scale(1.06)}
.plate .sh{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,15,.08) 35%,rgba(6,8,15,.92))}
.plate .in{position:absolute;left:18px;right:18px;bottom:16px;display:grid;gap:3px}
.plate .ey,.plate .me{font-family:var(--f-m);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.plate b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,5vw,2.1rem);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.plate .me{color:var(--sun)}
@media (min-width:900px){ .plates{grid-template-columns:repeat(4,1fr)} }