/* =============================================================================
   Schengen By Odit Travels — "Night Flight" journey
   -----------------------------------------------------------------------------
   Three layers, each building on the one before:
     1. Base          → no JS / CDN failure: a normal scrolling page (mobile-first)
     2. html.lite     → JS on screens < 1024px: scroll-snap, drawer menu, small globe
     3. html.journey  → JS on screens ≥ 1024px: one screen, fixed glass sidebar,
                        boarding-pass cards on a stage, globe + flight transitions
   Animations touch transform / opacity only. prefers-reduced-motion is honoured.
   ============================================================================= */

/* ---------- 1. Tokens ---------- */
/* Metric-matched fallbacks: the local face is scaled to the webfont's metrics, so when
   Playfair/Inter swap in, the text occupies the same space and nothing reflows (CLS). */
@font-face{
  font-family:"Playfair fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:112%;ascent-override:88%;descent-override:21%;line-gap-override:0%;
}
@font-face{
  font-family:"Inter fallback";
  src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial");
  size-adjust:100%;ascent-override:97%;descent-override:24%;line-gap-override:0%;
}

:root{
  --bg-deep:#0A1128;              /* midnight navy */
  --bg-mid:#13244A;
  --accent:#F4B942;               /* Schengen gold */
  --accent-2:#3FA7D6;             /* sky blue */
  --glass:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.18);
  --text:#F5F7FA;
  --text-muted:#A9B4C9;

  --tint:rgba(13,24,54,.62);      /* navy layer under the glass: keeps text AA over bright photos */
  --gold-grad:linear-gradient(135deg,#F8CD6E 0%,#F4B942 45%,#E6A128 100%);
  --serif:"Playfair Display","Playfair fallback",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);

  --inset:32px;                                   /* sidebar / card distance from the edges */
  --side-w:clamp(340px,27vw,420px);               /* sidebar width */
  --radius:28px;
  color-scheme:dark;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg-deep);overflow-x:clip}
body{
  margin:0;min-height:100dvh;overflow-x:clip;
  color:var(--text);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 78% 8%,var(--bg-mid) 0%,var(--bg-deep) 62%) fixed;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));   /* room for the mobile dock */
}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
img,svg{display:block}
button{font:inherit;color:inherit}
::selection{background:rgba(244,185,66,.35);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.ic{width:20px;height:20px;fill:currentColor;flex:none}
.dn{transform:rotate(90deg)}

.skip{position:absolute;left:12px;top:-80px;z-index:120;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--bg-deep);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Glass surface shared by the sidebar, cards, top bar, drawer and dock */
.ticket,.bar,.dock,.post{
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 42%),var(--tint);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- 3. Background scene (decorative, fixed behind everything) ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scene__sky{
  position:absolute;inset:-6%;opacity:.6;
  background-image:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.95) 50%,transparent 52%),
    radial-gradient(1px 1px at 68% 78%,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 42% 58%,rgba(244,185,66,.85) 50%,transparent 52%),
    radial-gradient(1px 1px at 86% 14%,rgba(255,255,255,.85) 50%,transparent 52%),
    radial-gradient(1.3px 1.3px at 55% 36%,rgba(63,167,214,.9) 50%,transparent 52%);
  background-size:230px 230px,310px 310px,430px 430px,170px 170px,540px 540px;
  animation:sky-drift 140s linear infinite;
}
.scene__photos{position:absolute;inset:-3%;z-index:0}   /* own stacking context: the crossfade z-index never covers the globe */
.photo{position:absolute;inset:0;opacity:0;visibility:hidden}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.55);transform-origin:62% 48%}
/* Fallback when an image is missing or fails: gradient + faint star pattern */
.photo--fallback{
  background:
    radial-gradient(60% 50% at 70% 35%,rgba(244,185,66,.14),transparent 70%),
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.8) 50%,transparent 52%) 0 0/120px 120px,
    radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.6) 50%,transparent 52%) 0 0/190px 190px,
    linear-gradient(160deg,var(--bg-mid),var(--bg-deep));
}
.photo--fallback img{display:none}
.scene__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,17,40,.9) 0%,rgba(10,17,40,.55) 42%,rgba(10,17,40,.3) 72%,rgba(10,17,40,.5) 100%),
    linear-gradient(180deg,rgba(10,17,40,.3),rgba(10,17,40,.72));
}
.scene__glow{position:absolute;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,rgba(244,185,66,.15),transparent 62%);animation:glow-float 26s ease-in-out infinite alternate}
.scene__glow--a{left:-18vmax;top:-22vmax}
.scene__glow--b{right:-22vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(63,167,214,.17),transparent 62%);animation-duration:34s}
.scene__globe{position:absolute;inset:0;width:100%;height:100%}
.scene__grain{
  position:absolute;inset:-50%;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.6s steps(6) infinite;
  will-change:transform;contain:strict;   /* own compositor layer: the jitter never counts as layout shift */
}
@keyframes sky-drift{to{transform:translate3d(-230px,-120px,0)}}
@keyframes glow-float{to{transform:translate3d(6vmax,4vmax,0) scale(1.08)}}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-4%,3%,0)}40%{transform:translate3d(3%,-5%,0)}60%{transform:translate3d(-2%,6%,0)}80%{transform:translate3d(5%,-2%,0)}100%{transform:translate3d(0,0,0)}}

/* ---------- 4. Loader (only with JS; CSS failsafe hides it after 6s) ---------- */
.loader{display:none}
.js .loader{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 30%,var(--bg-mid),var(--bg-deep) 65%);
  animation:loader-failsafe .01s 6s forwards;
}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
.loader__box{width:min(440px,80vw);text-align:center}
.loader__ring{width:92px;height:92px;margin:0 auto 22px;color:var(--accent);fill:currentColor;opacity:.55;animation:spin 22s linear infinite}
.loader__brand{font:700 1.4rem/1.2 var(--serif);letter-spacing:.01em}
.loader__brand span{color:var(--accent);font-style:italic;font-weight:600}
.loader__track{position:relative;height:44px;margin-top:26px}
.loader__line{position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(169,180,201,.35)}
.loader__fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
.loader__plane{position:absolute;left:0;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;color:var(--accent);filter:drop-shadow(0 0 10px rgba(244,185,66,.7))}
.loader__plane svg{width:28px;height:28px;fill:currentColor;transform:rotate(90deg)}
.loader__codes{display:flex;justify-content:space-between;margin-top:8px;font:600 .7rem/1 var(--sans);letter-spacing:.26em;color:var(--text-muted)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 5. Top bar / brand (base = mobile) ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:flex-end;gap:6px;
  height:64px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  border-width:0 0 1px;border-radius:0;box-shadow:none;
  will-change:transform;   /* its intro slide stays on the compositor and off the CLS score */
}
.bar__cta{display:flex;align-items:center;gap:8px}
.tcall{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border-radius:999px;text-decoration:none;font:600 .9rem/1 var(--sans);color:var(--text)}
.tcall .ic{color:var(--accent)}
.tcall .num,.bar .btn{display:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);cursor:pointer;place-content:center;gap:5px}
.menu-btn span{display:block;width:18px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease)}
.drawer-open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
.drawer-open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.sidebar{display:contents}   /* base: sidebar children flow in the page */
.brand{position:fixed;top:8px;left:max(16px,env(safe-area-inset-left));z-index:31;display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none}
.brand__mk{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--gold-grad);color:var(--bg-deep);box-shadow:0 6px 18px -6px rgba(244,185,66,.7)}
.brand__mk .ic{width:17px;height:17px;transform:rotate(45deg)}
.brand__tx{font:500 .95rem/1 var(--sans);white-space:nowrap}
.brand__tx b{font:700 1.12rem/1 var(--serif);letter-spacing:.01em;margin-right:1px}

/* ---------- 6. Buttons (magnetic + shimmer are added by JS on desktop) ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;
  min-height:52px;padding:6px 22px 6px 6px;border-radius:999px;border:1px solid rgba(244,185,66,.65);
  background:var(--gold-grad);color:var(--bg-deep);text-decoration:none;cursor:pointer;
  font:600 .95rem/1.15 var(--sans);letter-spacing:.01em;
  box-shadow:0 12px 30px -12px rgba(244,185,66,.6);
}
.btn .sq{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bg-deep);color:var(--accent)}
.btn .lb{min-width:0}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 48%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn--ghost{background:rgba(255,255,255,.06);border-color:var(--glass-border);color:var(--text);box-shadow:none}
.btn--ghost .sq{background:rgba(244,185,66,.14)}
.btn--ghost::after{background:linear-gradient(110deg,transparent 25%,rgba(244,185,66,.22) 48%,transparent 70%)}
.btn[disabled]{opacity:.7;cursor:progress}
.btn--full{width:100%;justify-content:center;padding-right:52px}

/* ---------- 7. Hero ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:104px 20px 48px}
.route{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.route .sq{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(244,185,66,.5);color:var(--accent)}
.route .ic{width:16px;height:16px;transform:rotate(90deg)}
.line{flex:1;min-width:24px;border-top:1.5px dashed rgba(244,185,66,.5);transform-origin:0 50%}
.h1{font:700 clamp(2.35rem,7.4vw,3.5rem)/1.06 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.mark{color:var(--accent);font-style:italic;font-weight:600}
.lead{max-width:36ch;margin-top:18px;color:var(--text-muted);font-size:1.06rem;line-height:1.6}
.ctas{display:grid;gap:10px;margin-top:28px;max-width:420px}
.ctas .num{display:inline}

/* ---------- 8. Page navigation → "flight route" ---------- */
.post{position:relative;z-index:1;margin:0 14px 24px;padding:18px 18px 18px 14px;border-radius:22px}
.route__track{position:relative}
.route__track::before{content:"";position:absolute;left:13px;top:var(--lt,20px);height:var(--lh,calc(100% - 40px));border-left:1.5px dashed rgba(244,185,66,.38)}
.post ol{display:grid;gap:2px}
.post a{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;column-gap:14px;min-height:42px;padding:2px 6px 2px 0;border-radius:10px;color:var(--text-muted);text-decoration:none;font:500 .93rem/1.25 var(--sans);transition:color .3s var(--ease)}
.post a:hover{color:var(--text)}
.post .sq{width:28px;height:28px;display:grid;place-items:center}
.post .sq svg{display:none}
.post .sq::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--bg-deep);border:1.5px solid rgba(169,180,201,.55);transition:background .4s,border-color .4s,box-shadow .4s}
.post .is-past .sq::before{border-color:var(--accent)}
.post .is-active a{color:var(--text);font-weight:600}
.post .is-active .sq::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(244,185,66,.16)}
.post .code{font:600 .64rem/1 var(--sans);letter-spacing:.18em;color:rgba(244,185,66,.78)}
.post .no{min-width:18px;text-align:right;font:500 .7rem/1 var(--sans);letter-spacing:.12em;color:rgba(169,180,201,.6)}
.route__plane{position:absolute;left:1px;top:0;width:26px;height:26px;margin-top:-13px;color:var(--accent);pointer-events:none;filter:drop-shadow(0 0 8px rgba(244,185,66,.65))}
.route__plane svg{width:26px;height:26px;fill:currentColor}

/* ---------- 9. Sections as boarding-pass cards ---------- */
.stop:not(.hero){position:relative;z-index:1;padding:56px 14px}
.stop--intro{display:none}
.ticket-wrap{position:relative;max-width:720px;margin:0 auto;container-type:inline-size}
.ticket{position:relative;overflow:hidden;border-radius:24px}
.ticket__body{position:relative;padding:26px 22px 28px;container-type:inline-size}

/* Perforated edge: dashed line + two half-circle notches cut out of the glass */
.ticket.has-head{
  -webkit-mask:radial-gradient(circle 11px at 0 72px,#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 72px,#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 72px,#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 72px,#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat;
}
.ticket__head{display:grid;grid-template-columns:auto minmax(28px,1fr) auto auto auto;align-items:center;gap:14px;height:72px;padding:0 112px 0 24px}   /* right side reserved for the stamp */
@container (max-width:470px){.ticket__head{grid-template-columns:auto minmax(28px,1fr) auto;padding-right:86px}.ticket__head .th--meta{display:none}}
.th{display:grid;gap:4px;min-width:0}
.th small{font:600 .56rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(169,180,201,.8)}
.th b{font:700 1.3rem/1 var(--serif);letter-spacing:.05em}
.th span{font:500 .66rem/1 var(--sans);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th--to{text-align:right}
.th--meta{padding-left:14px;border-left:1px solid rgba(255,255,255,.12)}
.th--meta b{font:600 .95rem/1 var(--sans);letter-spacing:.06em}
.th__path{position:relative;height:0;border-top:1.5px dashed rgba(244,185,66,.5)}
.th__path svg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;fill:var(--accent);transform:rotate(90deg)}
.ticket__perf{height:0;margin:0 22px;border-top:1.5px dashed rgba(255,255,255,.2)}

/* Passport stamp (slams onto the card corner on arrival) */
/* contain:strict clips the stamp to its real 120px box and takes it out of layout, so its SVG
   text stops reporting an oversized paint rect and can no longer be chosen as the LCP element
   (it is decorative and animates in last, which was holding LCP at ~5s). Visually identical. */
.stamp{position:absolute;top:-18px;right:-14px;z-index:3;width:120px;height:120px;color:var(--accent);pointer-events:none;opacity:0;visibility:hidden;transform:rotate(-12deg);contain:strict}
.stamp > div,.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp__bleed{filter:blur(1.5px);opacity:0}
.stamp text{fill:currentColor;font-family:var(--sans)}
.stamp use{fill:currentColor}

/* Card scroll area: thin gold scrollbar */
.ticket__body{scrollbar-width:thin;scrollbar-color:rgba(244,185,66,.75) transparent}
.ticket__body::-webkit-scrollbar{width:6px}
.ticket__body::-webkit-scrollbar-thumb{border-radius:6px;background:linear-gradient(var(--accent),#E6A128)}
.ticket__body::-webkit-scrollbar-track{background:transparent}

/* ---------- 10. Card content ---------- */
.plate{display:inline-flex;align-items:center;gap:10px;font:600 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.plate .sq{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(244,185,66,.45)}
.plate .ic{width:13px;height:13px}
.h2{margin-top:14px;font:700 clamp(1.85rem,1.25rem + 1.4vw,2.55rem)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.h3{font:600 1.16rem/1.3 var(--serif)}
.big{color:var(--text-muted);font-size:1.02rem;line-height:1.72;text-wrap:pretty}
.split{display:grid;gap:18px}
.split__b{display:grid;gap:22px;justify-items:start}

/* Travel Planning — pillars */
.pillars{display:grid;gap:10px;margin-top:26px}
.pillars li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:600 .92rem/1.25 var(--sans)}
.pillars .ic{width:22px;height:22px;color:var(--accent)}
@container (min-width:520px){.pillars{grid-template-columns:repeat(3,1fr)}.pillars li{flex-direction:column;align-items:flex-start;gap:12px}}

/* Destinations — flags */
.board{display:grid;gap:8px;margin-top:22px}
@container (min-width:500px){.board{grid-template-columns:1fr 1fr}}
.board a{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"flag name" "flag chip";align-items:center;column-gap:12px;row-gap:6px;min-height:64px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
.board a:hover{background:rgba(244,185,66,.09);border-color:rgba(244,185,66,.38)}
.board img{grid-area:flag;width:32px;height:22px;border-radius:4px;object-fit:cover;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.flap{grid-area:name;font:600 .92rem/1.2 var(--sans)}
.chip{grid-area:chip;justify-self:start;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:rgba(244,185,66,.12);border:1px solid rgba(244,185,66,.38);color:var(--accent);font:600 .6rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.chip svg{width:13px;height:13px;fill:currentColor}

/* Our Services */
.svc{display:grid;gap:20px}
.tt li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.tt li:first-child{border-top:0}
.tt__no{grid-row:span 2;font:italic 600 1.5rem/1.1 var(--serif);color:var(--accent)}
.tt p{color:var(--text-muted);font-size:.95rem}

/* Why Travelers Choose Us */
.why{display:grid;gap:12px;margin-top:22px}
@container (min-width:520px){.why{grid-template-columns:1fr 1fr}}
.why li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:18px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.why .sq{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(244,185,66,.14);color:var(--accent)}
.why .sq .ic{width:22px;height:22px}
.why h3{align-self:center}
.why p{color:var(--text-muted);font-size:.93rem}

/* Start Planning + form */
.start{display:grid;gap:24px}
.start__a .big{margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags li{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font:600 .78rem/1 var(--sans)}
.tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pass{overflow:hidden;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)}
.pass__top{display:flex;align-items:center;gap:10px;padding:12px 18px;background:rgba(244,185,66,.08);border-bottom:1px solid rgba(244,185,66,.2);font:600 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.pass__top .ic{width:16px;height:16px;color:var(--accent);transform:rotate(90deg)}
.pass__body{display:grid;gap:14px;padding:18px}
@container (min-width:520px){.pass__body{grid-template-columns:1fr 1fr}.f--w{grid-column:1/-1}}
.f label{display:block;margin-bottom:6px;font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.opt{font-weight:400;letter-spacing:0;text-transform:none;color:rgba(169,180,201,.85)}
.f input,.f select,.f textarea{display:block;width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(10,17,40,.5);color:var(--text);font:400 1rem/1.4 var(--sans);transition:border-color .25s,box-shadow .25s}
.f input,.f textarea{-webkit-appearance:none;appearance:none}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,185,66,.25)}
.f select option{background:var(--bg-mid);color:var(--text)}
.f textarea{min-height:96px;resize:vertical}
.f ::placeholder{color:#8592AC}
.pass__stub{display:grid;gap:14px;padding:18px;border-top:1.5px dashed rgba(244,185,66,.32)}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:.88rem;line-height:1.55;color:var(--text-muted);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.consent a{color:var(--text);font-weight:600}
.status{min-height:48px;padding:10px 12px;border-radius:10px;border-left:3px solid transparent;font-size:.9rem}
.status.ok{border-color:var(--accent);background:rgba(244,185,66,.08)}
.status.err{border-color:var(--accent-2);background:rgba(63,167,214,.1)}

/* Footer card */
.disc{padding:16px 18px;border-radius:14px;border:1px solid rgba(244,185,66,.42);background:rgba(244,185,66,.06);font-size:.88rem;line-height:1.65;color:var(--text-muted)}
.disc strong{margin-right:6px;color:var(--accent);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.foot__grid{display:grid;gap:22px;margin-top:24px}
@container (min-width:520px){.foot__grid{grid-template-columns:1.35fr 1fr}.foot__brand{grid-column:1/-1}}
.foot__brand{font:700 1.9rem/1.05 var(--serif)}
.foot__brand span{display:block;color:var(--accent);font-style:italic;font-weight:600}
.foot__h{margin-bottom:4px;font:600 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.foot li a{display:inline-flex;align-items:center;gap:10px;min-height:40px;text-decoration:none;font-size:.95rem;overflow-wrap:anywhere}
.foot li a:hover{color:var(--accent)}
.foot li .ic{width:17px;height:17px;color:var(--accent)}
.addr{display:flex;gap:10px;padding-top:8px;font-style:normal;line-height:1.6;color:var(--text-muted)}
.addr .ic{width:17px;height:17px;margin-top:4px;color:var(--accent)}
.copy{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:var(--text-muted)}

/* Desktop intro ticket (index 0 on the stage) */
.intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:24px;align-items:center}
.intro__window{aspect-ratio:3/4;overflow:hidden;border-radius:50%/40%;border:10px solid rgba(255,255,255,.1);box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 20px 50px -20px rgba(0,0,0,.8);background:linear-gradient(160deg,var(--bg-mid),var(--bg-deep))}
.intro__window img{width:100%;height:100%;object-fit:cover;transform:scale(1.32)}
.intro__legs{display:grid;gap:11px}
.intro__legs li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;gap:10px}
.intro__legs b{font:700 1.02rem/1 var(--serif);letter-spacing:.06em;color:var(--accent)}
.intro__legs span{font:500 .84rem/1.2 var(--sans);color:var(--text-muted)}
.intro__cue{grid-column:1/-1;display:flex;justify-content:center;padding-top:4px}
.mouse{position:relative;width:24px;height:38px;border:1.5px solid rgba(245,247,250,.55);border-radius:14px}
.mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* Mobile contact dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-width:1px 0 0;border-radius:0;transition:transform .3s var(--ease)}
.dock a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;text-decoration:none;font:600 .95rem/1 var(--sans)}
.dock__wa{background:var(--gold-grad);color:var(--bg-deep)}
.dock__call{border:1px solid var(--glass-border);background:rgba(255,255,255,.06);color:var(--text)}
.dock__call .ic{color:var(--accent)}
body:has(.pass :focus) .dock{transform:translateY(110%)}

/* Custom cursor ring (desktop, fine pointer only — created by JS) */
.cursor{position:fixed;left:0;top:0;z-index:95;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(244,185,66,.75);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s}
.cursor.is-on{opacity:1}
.cursor.is-hover{width:58px;height:58px;margin:-29px 0 0 -29px;background-color:rgba(244,185,66,.1)}

/* Scrolling layouts put hero text straight on the photo: darker veil + soft shadow for AA contrast */
html:not(.journey) .scene__veil{background:linear-gradient(180deg,rgba(10,17,40,.62) 0%,rgba(10,17,40,.72) 45%,rgba(10,17,40,.88) 100%)}
html:not(.journey) .hero{text-shadow:0 2px 18px rgba(10,17,40,.7)}

@media (min-width:560px){
  .hero{padding-left:max(32px,6vw);padding-right:max(32px,6vw)}
  .ctas{grid-template-columns:auto auto;justify-content:start;max-width:none}
  .tcall .num{display:inline}
}
@media (min-width:1024px){
  .dock{display:none}
  body{padding-bottom:0}
}

/* =============================================================================
   LITE — JS on screens < 1024px: scroll-snap sections, drawer menu, small globe
   ============================================================================= */
.lite{scroll-snap-type:y proximity}
.lite .menu-btn{display:inline-grid}
.lite .stop{scroll-snap-align:start}
.lite .stop:not(.hero){min-height:100svh;display:flex;align-items:center;padding:84px 14px 36px}
.lite .ticket-wrap{width:100%}
.lite .stamp{top:-12px;right:-6px;width:92px;height:92px}
.lite .post{
  position:fixed;inset:0;z-index:40;margin:0;padding:96px 28px 40px;border-radius:0;border:0;
  display:flex;flex-direction:column;justify-content:center;
  background:rgba(10,17,40,.8);
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;
}
.lite .post a{min-height:54px;font-size:1.1rem}
.drawer-open{overflow:hidden}
.drawer-open .post{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.drawer-open .bar{z-index:45}
.drawer-open .brand{z-index:46}

/* =============================================================================
   JOURNEY — JS on screens ≥ 1024px: one screen, sidebar + stage
   ============================================================================= */
.journey,.journey body{height:100%;overflow:hidden;overflow:clip}
.journey body{padding:0;background:var(--bg-deep)}

/* Contact pill, top-right of the stage */
.journey .bar{top:var(--inset);right:var(--inset);left:auto;height:auto;padding:6px;border-width:1px;border-radius:999px;box-shadow:0 20px 50px -25px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.journey .tcall{padding:0 16px}
.journey .tcall .num{display:none}
.journey .bar .btn{display:inline-flex;min-height:44px;padding:4px 18px 4px 4px}
.journey .bar .btn .sq{width:36px;height:36px}
.journey .menu-btn{display:none}
@media (min-width:1360px){.journey .tcall .num{display:inline}}

/* Fixed glass sidebar = hero + flight route */
.journey .sidebar{
  position:fixed;z-index:20;left:var(--inset);top:var(--inset);bottom:var(--inset);width:var(--side-w);
  display:flex;flex-direction:column;padding:26px 28px 22px;border-radius:var(--radius);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 45%),rgba(11,20,48,.6);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
}
.journey .sidebar::-webkit-scrollbar{display:none}
.journey .sidebar > *{flex-shrink:0}   /* never squeeze the hero into the route: scroll instead */
.journey .brand{position:static;align-self:flex-start}
.journey .hero{min-height:0;padding:0;margin-top:clamp(18px,4.5vh,44px);display:block}
.journey .route{margin-bottom:16px}
.journey .h1{font-size:clamp(1.95rem,1.05rem + 1.35vw,2.75rem)}
.journey .lead{margin-top:14px;font-size:.98rem}
.journey .ctas{grid-template-columns:1fr;gap:10px;margin-top:22px;max-width:none}
.journey .ctas .btn{width:100%}
.journey .post{margin:auto 0 0;padding:22px 0 0;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.journey .post a{min-height:38px;font-size:.9rem}

/* Stage cards: all stacked in the same box, only the current one is visible */
.journey .stop:not(.hero){
  position:fixed;z-index:10;
  top:calc(var(--inset) + 70px);bottom:var(--inset);
  left:calc(var(--inset) * 2 + var(--side-w) + 24px);
  width:clamp(420px,calc((100vw - var(--side-w) - var(--inset) * 3) * .62),640px);
  min-height:0;padding:0;display:flex;align-items:center;
  visibility:hidden;opacity:0;
}
.journey .stop--intro{display:flex}
.journey .ticket-wrap{width:100%;max-height:100%;margin:0;display:flex;flex-direction:column;will-change:transform}
.journey .ticket{display:flex;flex-direction:column;min-height:0;max-height:100%}
.journey .ticket__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 28px 30px}
.journey .ticket--intro .ticket__body{overflow:visible}

/* Short laptop screens (e.g. 1280×800, 1366×768): tighten the sidebar so hero + route fit */
@media (min-width:1024px) and (max-height:860px){
  .journey .sidebar{padding:20px 24px 16px}
  .journey .hero{margin-top:16px}
  .journey .route{margin-bottom:10px}
  .journey .h1{font-size:clamp(1.75rem,.95rem + 1.15vw,2.3rem)}
  .journey .lead{margin-top:8px;font-size:.9rem;line-height:1.5}
  .journey .ctas{margin-top:14px;gap:8px}
  .journey .ctas .btn{min-height:44px;padding-top:3px;padding-bottom:3px}
  .journey .ctas .btn .sq{width:34px;height:34px}
  .journey .post{padding-top:12px}
  .journey .post a{min-height:31px;font-size:.86rem}
}

/* =============================================================================
   LEGAL PAGES (privacy.html, terms.html) — same night-flight shell, one long
   boarding-pass card. These pages never load js/main.js, so neither .lite nor
   .journey ever applies: only the base layer plus the rules below.
   ============================================================================= */
.legal,body:has(.legal) .foot{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:96px 14px 56px}
body:has(.legal) .foot{padding-top:0}
.legal .ticket-wrap,body:has(.legal) .foot .ticket-wrap{max-width:none}
/* These pages have no journey sidebar, so the bar keeps its WhatsApp button on desktop */
body:has(.legal) .bar .btn{display:inline-flex;min-height:44px;padding:4px 18px 4px 4px}
body:has(.legal) .bar .btn .sq{width:36px;height:36px}
@media (max-width:559px){body:has(.legal) .bar .btn .lb{display:none}body:has(.legal) .bar .btn{padding:4px}}

/* Page head: back link + title, above the card */
.legal__top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:22px}
.back{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 10px;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);color:var(--text);text-decoration:none;font:600 .85rem/1 var(--sans);transition:background .3s var(--ease),border-color .3s var(--ease)}
.back:hover{background:rgba(244,185,66,.1);border-color:rgba(244,185,66,.4)}
.back .ic{width:16px;height:16px;color:var(--accent);transform:rotate(180deg)}
.legal .h1{font-size:clamp(1.9rem,1.3rem + 1.6vw,2.6rem)}
.legal__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.legal__meta li{display:inline-flex;align-items:flex-start;gap:8px;padding:8px 13px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font:500 .78rem/1.45 var(--sans);color:var(--text-muted);overflow-wrap:anywhere}
.legal__meta li .ic{margin-top:2px}
.legal__meta li > span{min-width:0}
.legal__meta b{color:var(--text);font-weight:600}
.legal__meta .ic{width:15px;height:15px;color:var(--accent)}

/* Body copy */
.legal__body{display:grid;gap:26px}
.legal__body > p{color:var(--text-muted);font-size:1rem;line-height:1.75;text-wrap:pretty}
.legal section{display:grid;gap:10px}
.legal h2{font:600 1.22rem/1.3 var(--serif);color:var(--text)}
.legal h2::before{content:"";display:inline-block;width:18px;height:1.5px;margin:0 10px 5px 0;background:var(--accent);vertical-align:middle}
.legal section p{color:var(--text-muted);font-size:.97rem;line-height:1.75;text-wrap:pretty}
.legal section p + p{margin-top:10px}
.legal a:not(.back):not(.btn){color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:rgba(244,185,66,.6)}
.legal a:not(.back):not(.btn):hover{color:var(--accent)}

/* Contact block at the end of the policy */
.legal__contact{margin-top:4px;padding:20px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.legal__contact .addr{padding-top:0}
.legal__contact ul{display:grid;gap:2px;margin-top:10px}
.legal__contact li a{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--text);font-size:.95rem;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.legal__contact li a:hover{color:var(--accent)}
.legal__contact li .ic{width:17px;height:17px;color:var(--accent)}
.legal__contact .org{font:600 .95rem/1.5 var(--sans)}

@media (min-width:560px){.legal{padding-left:max(28px,5vw);padding-right:max(28px,5vw)}}
@media (min-width:1024px){.legal{padding-top:116px;padding-bottom:72px}}

/* =============================================================================
   Reduced motion: no drifting, no grain, no shimmer, no cursor ring
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene__sky,.scene__glow,.scene__grain,.loader__ring,.mouse::after{animation:none}
  .btn::after{display:none}
  .cursor{display:none}
  .lite .post,.drawer-open .post{transition:none}
}