/* Win Sky Travels — Option 2 "Night Flight"
   Layout concept: one continuous night flight. A dark navy sky the visitor scrolls through,
   lit by the logo's sky blue, with coral marking every point of take-off. Single dark theme by design. */
:root {
  --bg: #0A0C29;           /* night sky (deepened logo navy) */
  --navy: #161946;         /* logo navy */
  --navy-2: #1E2260;
  --sky: #1C87B3;          /* logo blue */
  --sky-light: #7CC6E6;
  --coral: #F06A51;        /* logo plane */
  --coral-deep: #D8533B;
  --mist: #E8F4FA;
  --sand: #F6EFE6;
  --white: #FFFFFF;
  --text: #EEF4FF;
  --soft: rgba(238, 244, 255, .68);
  --faint: rgba(238, 244, 255, .14);
  --glass: rgba(255, 255, 255, .06);

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script: "Great Vibes", "Brush Script MT", cursive;

  --step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-4: clamp(2.9rem, 1.6rem + 6vw, 7.4rem);

  --wrap: 1240px;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 4.5c.6-.6.6-1.6 0-2.1-.6-.6-1.5-.6-2.1 0L15 6.8 5 4 3.5 5.5l8 4.5-4 4-3-.5L3 15l4 2 2 4 1.5-1.5-.5-3 4-4 4.5 8L20 19l-2.8-10z'/%3E%3C/svg%3E");
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: var(--bg); }
body::after { content: none; } /* film grain removed for smooth scrolling */
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
.section { padding-block: clamp(80px, 11vw, 160px); position: relative; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }
.kicker { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sky-light); display: inline-flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 34px; border-top: 2px dashed var(--coral); }
.title { font-size: var(--step-3); font-weight: 800; }
.title em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--sky-light); }
.lead { color: var(--soft); font-size: var(--step-1); line-height: 1.5; max-width: 46ch; }
.head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); max-width: 820px; }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border-radius: 999px; border: 0;
  background: var(--coral); color: var(--white); text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.btn:hover { color: var(--navy); box-shadow: 0 18px 40px -14px rgba(240,106,81,.8); }
.btn:hover::before { transform: none; }
.btn .icon { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.btn:hover .icon { transform: translateX(4px) rotate(-45deg); }
.btn-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.btn-line::before { background: var(--sky); }
.btn-line:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--sky); }

/* Custom cursor (fine pointers only, added by JS) */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.has-cursor .cursor, .has-cursor .cursor-ring { opacity: 1; }
.cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--coral); }
.cursor-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid rgba(124,198,230,.6); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s; }
.cursor-ring span { font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); opacity: 0; transition: opacity .2s; }
.cursor-ring.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--sky-light); border-color: transparent; }
.cursor-ring.big span { opacity: 1; }
.cursor-ring.link { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--coral); }

/* Preloader (CSS-timed so it never blocks) */
.loader { position: fixed; inset: 0; z-index: 95; background: var(--bg); display: grid; place-items: center; animation: loaderOut .6s var(--ease) .45s forwards; pointer-events: none; }
.loader svg { width: 120px; height: 120px; overflow: visible; }
.loader circle { fill: none; stroke: var(--sky-light); stroke-width: 3; stroke-dasharray: 18 14; stroke-linecap: round; animation: spin 2.4s linear infinite; transform-origin: 60px 60px; }
.loader .lp { fill: var(--coral); animation: lpFly .6s var(--ease) forwards; transform-origin: 60px 60px; }
.loader b { position: absolute; margin-top: 170px; font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; font-size: .75rem; color: var(--soft); }
@keyframes lpFly { from { transform: rotate(-120deg); } to { transform: rotate(240deg); } }
@keyframes loaderOut { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Header */
.progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--coral)); transform-origin: 0 50%; transform: scaleX(0); }
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 60; padding-block: 16px; transition: transform .5s var(--ease); }
.site-header.hide { transform: translateY(-120%); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(10,12,41,.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--faint); }
.brand { background: var(--white); border-radius: 999px; padding: 4px 14px; display: flex; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; gap: 2px; }
.nav a { text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .92rem; padding: 10px 14px; border-radius: 999px; color: var(--soft); transition: color .25s, background .25s; }
.nav a:hover { color: var(--white); background: var(--glass); }
.nav a[aria-current="page"] { color: var(--white); background: var(--glass); box-shadow: inset 0 0 0 1px var(--faint); }
.bar .btn { padding: 12px 20px; font-size: .9rem; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--coral); color: var(--white); place-items: center; cursor: pointer; }
@media (max-width: 1000px) { .nav, .bar .btn { display: none; } .menu-btn { display: grid; } }
.mobile-menu { position: fixed; inset: 0; z-index: 75; background: var(--navy); padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gr) 32px var(--gl); display: flex; flex-direction: column; gap: 4px; clip-path: circle(0% at calc(100% - 44px) 44px); transition: clip-path .8s var(--ease); visibility: hidden; }
.mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.mobile-menu .close { align-self: flex-end; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--glass); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.mobile-menu a { font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; letter-spacing: -.03em; text-decoration: none; padding-block: 6px; color: var(--white); }
.mobile-menu a:nth-child(odd) { color: var(--sky-light); }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 640px; padding-top: calc(env(safe-area-inset-top, 0px) + 130px); padding-bottom: 40px; overflow: hidden; isolation: isolate; }
.aurora { position: absolute; inset: -20%; z-index: -2; opacity: .75; pointer-events: none; contain: strict; }
.aurora span { position: absolute; border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; will-change: transform; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 50%; top: 0; background: radial-gradient(circle, rgba(28,135,179,.75), transparent 65%); }
.aurora span:nth-child(2) { width: 34vw; height: 34vw; left: 8%; top: 40%; background: radial-gradient(circle, rgba(240,106,81,.4), transparent 65%); animation-duration: 22s; }
.aurora span:nth-child(3) { width: 30vw; height: 30vw; left: 70%; top: 50%; background: radial-gradient(circle, rgba(124,198,230,.4), transparent 65%); animation-duration: 26s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vw, 4vw) scale(1.15); } 100% { transform: translate(4vw, -3vw) scale(.92); } }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
.hero-copy { display: grid; gap: 28px; position: relative; z-index: 2; min-width: 0; }
.pill { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--faint); font-family: var(--font-display); font-weight: 600; font-size: .86rem; }
.pill b { background: var(--coral); border-radius: 999px; padding: 4px 10px; font-size: .72rem; letter-spacing: .14em; }
.pill .live { width: 8px; height: 8px; border-radius: 50%; background: #3BE48B; box-shadow: 0 0 0 0 rgba(59,228,139,.7); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(59,228,139,0); } 100% { box-shadow: 0 0 0 0 rgba(59,228,139,0); } }
.hero h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.hero h1 .row { display: block; }
.hero h1 .ch { display: inline-block; }
.motion .hero h1 .ch { opacity: 0; transform: translateY(.6em) rotateX(-90deg); transform-origin: 50% 100%; animation: chIn .9s var(--ease) forwards; animation-delay: calc(.55s + var(--i) * 22ms); }
@keyframes chIn { to { opacity: 1; transform: none; } }
.rotator { display: inline-grid; vertical-align: bottom; color: var(--sky-light); }
.rotator > span { grid-area: 1 / 1; font-family: var(--font-script); font-weight: 400; letter-spacing: 0; font-size: 1.15em; line-height: 1; padding-right: .08em; transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.rotator > span:not(.on) { opacity: 0; transform: translateY(40%) scale(.9); filter: blur(10px); }
.rotator > span.out { opacity: 0; transform: translateY(-40%) scale(1.05); filter: blur(10px); }
.hero-lead { color: var(--soft); font-size: var(--step-1); max-width: 36ch; line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.fade-in { }
.motion .fade-in { opacity: 0; animation: fadeUp .8s var(--ease) forwards; animation-delay: var(--d, .8s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; filter: none; } }
.globe-wrap { position: relative; aspect-ratio: 1; width: min(100%, 640px); justify-self: center; touch-action: pan-y; }
.globe-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.globe-wrap canvas:active { cursor: grabbing; }
.globe-tag { position: absolute; padding: 8px 14px; border-radius: 14px; background: rgba(10,12,41,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--faint); font-family: var(--font-display); font-size: .8rem; display: grid; gap: 2px; animation: bob 5s ease-in-out infinite; }
.globe-tag small { color: var(--sky-light); font-weight: 700; letter-spacing: .14em; font-size: .64rem; text-transform: uppercase; }
.globe-tag b { font-weight: 800; }
.globe-tag.t1 { left: 0; top: 18%; }
.globe-tag.t2 { right: 2%; bottom: 20%; animation-delay: -2.5s; }
.globe-tag.t2 b { color: var(--coral); }
@keyframes bob { 50% { transform: translateY(-10px); } }
.drag-hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); font-family: var(--font-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.drag-hint::before, .drag-hint::after { content: ""; width: 20px; border-top: 1px dashed var(--soft); }

/* Departure board strip */
.departures { margin-top: 40px; border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--faint); overflow: hidden; }
.dep-head, .dep-row { display: grid; grid-template-columns: 90px 1.4fr 1fr .8fr 1fr; gap: 12px; align-items: center; padding: 12px 22px; }
.dep-head { font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky-light); border-bottom: 1px dashed var(--faint); }
.dep-row { font-family: var(--font-display); font-weight: 700; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.dep-row:last-child { border-bottom: 0; }
.flapw { display: inline-flex; gap: 2px; }
.flapw i { font-style: normal; display: inline-grid; place-items: center; min-width: 1.05em; height: 1.45em; padding-inline: 1px; background: #070920; border-radius: 4px; color: var(--white); position: relative; font-size: .92em; }
.flapw i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255,255,255,.1); }
.flapw i.f { animation: flip .26s var(--ease); }
@keyframes flip { 50% { transform: rotateX(90deg); } }
.status { justify-self: start; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(124,198,230,.12); color: var(--sky-light); }
.status.board { background: rgba(240,106,81,.16); color: var(--coral); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
@media (max-width: 760px) {
  .dep-head, .dep-row { grid-template-columns: 64px 1fr auto; padding-inline: 16px; }
  .dep-head span:nth-child(3), .dep-head span:nth-child(4), .dep-row > :nth-child(3), .dep-row > :nth-child(4) { display: none; }
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .globe-wrap { width: min(100%, 460px); margin-top: -10px; } }

/* Marquee */
.marquee { overflow: hidden; padding-block: 26px; border-block: 1px solid var(--faint); transform: rotate(-2deg); margin-block: 40px 0; background: var(--coral); color: var(--white); width: 104%; margin-left: -2%; }
.marquee .track { display: flex; width: max-content; gap: 46px; animation: mq 30s linear infinite; }
.marquee span { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); letter-spacing: -.02em; white-space: nowrap; display: inline-flex; gap: 46px; align-items: center; }
.marquee span::after { content: ""; width: 30px; height: 30px; background: var(--navy); -webkit-mask: var(--plane) center / contain no-repeat; mask: var(--plane) center / contain no-repeat; }
.marquee.alt { background: var(--sky); transform: rotate(1.5deg); margin-top: -18px; }
.marquee.alt .track { animation-direction: reverse; animation-duration: 36s; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Manifesto: words light up as you scroll */
.manifesto p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.1rem + 3.2vw, 4rem); line-height: 1.12; letter-spacing: -.035em; max-width: 20ch; }
.manifesto .w { opacity: .16; transition: opacity .25s, color .25s; }
.manifesto .w.lit { opacity: 1; }
.manifesto .w.hl.lit { color: var(--coral); }
.no-motion .manifesto .w { opacity: 1; }

/* Services: bento with cursor spotlight */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile {
  --mx: 50%; --my: 50%;
  position: relative; border-radius: 28px; padding: 30px; min-height: 260px; overflow: hidden; text-decoration: none; color: var(--text); display: grid; align-content: space-between; gap: 30px; min-width: 0;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(124,198,230,.16), transparent 45%), rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--faint); transition: transform .6s var(--ease), box-shadow .4s;
}
.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient(300px circle at var(--mx) var(--my), var(--coral), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; }
.tile:hover::before { opacity: 1; }
.tile:hover { transform: translateY(-6px); }
.tile .num { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .2em; color: var(--sky-light); }
.tile .ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(28,135,179,.2); color: var(--sky-light); transition: transform .6s var(--ease), background .4s, color .4s; }
.tile:hover .ico { transform: rotate(-12deg) scale(1.08); background: var(--coral); color: var(--white); }
.tile .ico .icon { width: 30px; height: 30px; }
.tile h3 { font-size: var(--step-2); font-weight: 800; }
.tile p { color: var(--soft); margin-top: 10px; max-width: 40ch; }
.tile .go { position: absolute; right: 24px; top: 24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--faint); transition: transform .5s var(--ease), background .3s; }
.tile:hover .go { transform: rotate(-45deg); background: var(--white); color: var(--navy); }
.tile.w3 { grid-column: span 3; } .tile.w2 { grid-column: span 2; } .tile.w4 { grid-column: span 4; }
.tile.hero-tile { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255,255,255,.2), transparent 45%), linear-gradient(140deg, var(--sky), var(--navy-2)); }
.tile.hero-tile .ico { background: rgba(255,255,255,.18); color: var(--white); }
.tile.coral-tile { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 45%), linear-gradient(140deg, var(--coral), #B8432F); }
.tile.coral-tile p, .tile.hero-tile p { color: rgba(255,255,255,.85); }
.tile.coral-tile .ico { background: rgba(255,255,255,.2); color: var(--white); }
.tile.coral-tile .num, .tile.hero-tile .num { color: rgba(255,255,255,.8); }
.tile .orbit-deco { position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); animation: spin 30s linear infinite; }
.tile .orbit-deco::after { content: ""; position: absolute; left: 50%; top: -14px; width: 28px; height: 28px; background: var(--white); -webkit-mask: var(--plane) center / contain no-repeat; mask: var(--plane) center / contain no-repeat; transform: rotate(45deg); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.w3, .tile.w2, .tile.w4 { grid-column: span 1; } .tile.hero-tile, .tile.coral-tile { grid-column: 1 / -1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* Take-off scroll scene */
.takeoff { position: relative; height: 340vh; --p: 0; }
.takeoff-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.sky-layer { position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, #F06A51 0%, #F6B38E 30%, #7CC6E6 70%, #1C87B3 100%); }
.sky-night { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #050617 0%, #0A0C29 45%, #161946 100%); opacity: calc(var(--p) * 1.4); }
.stars { position: absolute; inset: 0; z-index: -2; opacity: calc((var(--p) - .45) * 2.2); background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 15%, #fff, transparent), radial-gradient(1px 1px at 92% 80%, #fff, transparent), radial-gradient(1px 1px at 20% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 88%, #fff, transparent); }
.clouds { position: absolute; left: 0; width: 300%; z-index: -1; pointer-events: none; will-change: transform; }
.clouds svg { width: 100%; height: auto; display: block; }
.clouds.c1 { bottom: -6%; opacity: .9; transform: translateX(calc(var(--p) * -55%)) translateY(calc(var(--p) * 60vh)); }
.clouds.c2 { bottom: 18%; opacity: .45; transform: translateX(calc(var(--p) * -30%)) translateY(calc(var(--p) * 40vh)); }
.runway { will-change: transform; position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; z-index: -1; background: #0A0C29; transform: translateY(calc(var(--p) * 40vh)); }
.runway::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 4px dashed rgba(255,255,255,.7); }
.big-plane { position: absolute; left: 0; top: 0; width: clamp(140px, 22vw, 340px); color: var(--white); will-change: transform; z-index: 1; }
.big-plane svg { width: 100%; height: auto; fill: currentColor; display: block; }
.altimeter { position: absolute; right: var(--gr); top: calc(env(safe-area-inset-top, 0px) + 110px); text-align: right; font-family: var(--font-display); z-index: 2; color: var(--white); }
.altimeter small { display: block; font-weight: 700; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.altimeter b { font-size: clamp(2rem, 1.4rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.altimeter span { font-size: .9rem; font-weight: 700; opacity: .8; }
.takeoff-steps { position: absolute; left: var(--gl); bottom: 14vh; z-index: 2; width: min(560px, calc(100% - 40px)); display: grid; }
.tstep { grid-area: 1 / 1; display: grid; gap: 12px; opacity: 0; transform: translateY(30px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tstep.on { opacity: 1; transform: none; }
.tstep .n { font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .2em; color: var(--white); display: inline-flex; gap: 10px; align-items: center; }
.tstep .n::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); -webkit-mask: none; }
.tstep h3 { font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); font-weight: 800; color: var(--white); text-shadow: 0 8px 30px rgba(0,0,0,.25); }
.tstep p { color: rgba(255,255,255,.88); font-size: var(--step-1); max-width: 34ch; text-shadow: 0 4px 20px rgba(0,0,0,.25); }
.takeoff-label { position: absolute; left: var(--gl); top: calc(env(safe-area-inset-top, 0px) + 110px); z-index: 2; }
.takeoff-label .kicker { color: var(--white); }
.dots { position: absolute; right: var(--gr); bottom: 14vh; display: grid; gap: 10px; z-index: 2; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s, transform .3s; }
.dots i.on { background: var(--coral); transform: scale(1.4); }
.no-motion .takeoff { height: auto; }
.no-motion .takeoff-stage { position: relative; height: auto; padding-block: 120px; }
.no-motion .takeoff-steps { position: relative; left: auto; bottom: auto; gap: 40px; }
.no-motion .tstep { grid-area: auto; opacity: 1; transform: none; }

/* Destinations: stacking cards */
.stack { display: grid; gap: 0; }
.scard { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px + var(--i) * 18px); margin-bottom: 8vh; border-radius: 36px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; min-height: min(560px, 74vh); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.6); transform-origin: 50% 0; will-change: transform; background: var(--navy); }
.scard:last-child { margin-bottom: 0; }
.scard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #05061A; opacity: calc(var(--s, 0) * .45); border-radius: inherit; }
.scard .art { position: relative; overflow: hidden; min-height: 300px; }
.scard .art svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(calc(1.12 - var(--s, 0) * .12)); transition: transform .2s linear; }
.scard .body { padding: clamp(28px, 4vw, 56px); display: grid; align-content: space-between; gap: 26px; min-width: 0; }
.scard .code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 2rem + 7vw, 8.5rem); letter-spacing: -.06em; line-height: .85; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.4); }
.scard h3 { font-size: var(--step-3); font-weight: 800; }
.scard p { color: var(--soft); font-size: var(--step-1); line-height: 1.5; }
.scard .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.scard .tags span { font-family: var(--font-display); font-weight: 700; font-size: .8rem; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--faint); }
.scard .route { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .2em; color: var(--sky-light); display: flex; gap: 10px; align-items: center; text-transform: uppercase; }
.scard .route::after { content: ""; flex: 1; border-top: 2px dashed var(--faint); }
.scard.c-dxb { background: #12164A; } .scard.c-jed { background: #2A1B2E; } .scard.c-znz { background: #0E3550; } .scard.c-kul { background: #10133A; } .scard.c-cmn { background: #3A1C1E; }
@media (max-width: 860px) { .scard { grid-template-columns: 1fr; min-height: 0; top: calc(env(safe-area-inset-top, 0px) + 84px + var(--i) * 12px); } .scard .art { min-height: 220px; aspect-ratio: 16 / 9; } }

/* Umrah */
.umrah { background: var(--sand); color: var(--navy); overflow: hidden; border-radius: 48px 48px 0 0; margin-top: 40px; }
.umrah .kicker { color: #9A5A3E; }
.umrah .lead { color: #5A5170; }
.umrah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 32px 32px; overflow: hidden; background: linear-gradient(180deg, #F3C9A5, #F6EFE6); box-shadow: 0 50px 90px -50px rgba(22,25,70,.6); max-width: 100%; }
.arch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch .star { transform-origin: 200px 160px; animation: spin 60s linear infinite; }
.umrah ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.umrah li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px dashed rgba(22,25,70,.18); }
.umrah li .n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--coral); }
.umrah li b { font-family: var(--font-display); font-size: 1.12rem; display: block; }
.umrah li span { color: #5A5170; font-size: .96rem; }
.umrah .btn:hover { color: var(--white); }
.umrah .btn::before { background: var(--navy); }
@media (max-width: 900px) { .umrah-grid { grid-template-columns: 1fr; } .arch { max-width: 420px; } }

/* Visa */
.visa-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.passport { position: relative; border-radius: 30px; padding: clamp(22px, 3vw, 34px); background: linear-gradient(160deg, #1E2260, #12153F); box-shadow: inset 0 0 0 1px var(--faint), 0 40px 80px -40px rgba(0,0,0,.7); display: grid; gap: 18px; min-width: 0; overflow: hidden; }
.passport::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(124,198,230,.2); }
.selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { border-radius: 18px; padding: 12px 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--faint); display: grid; gap: 2px; min-width: 0; }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--sky-light); }
.field label { font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-light); }
.field select, .field input { background: transparent; border: 0; color: var(--white); font: inherit; font-size: 1rem; outline: none; width: 100%; min-width: 0; padding: 2px 0; }
.field option { color: #111; }
.vres { display: grid; gap: 16px; position: relative; }
.vres h3 { font-size: var(--step-2); font-weight: 800; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.facts div { border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.05); min-width: 0; }
.facts small { display: block; font-family: var(--font-display); font-weight: 700; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-light); }
.facts b { font-family: var(--font-display); }
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: .96rem; color: var(--soft); }
.docs li { display: flex; gap: 8px; align-items: flex-start; }
.docs .icon { width: 18px; height: 18px; color: var(--coral); margin-top: 4px; stroke-width: 2.4; }
.vnote { font-size: .86rem; color: var(--soft); }
.stampmark { position: absolute; right: 6px; top: -6px; font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); border: 3px double var(--coral); border-radius: 12px; padding: 8px 12px; transform: rotate(-10deg); }
.stampmark.thunk { animation: thunk .55s var(--ease); }
@keyframes thunk { 0% { transform: rotate(-10deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-10deg) scale(.92); opacity: 1; } 100% { transform: rotate(-10deg) scale(1); } }
.vres.swap > *:not(.stampmark) { animation: fadeUp .5s var(--ease); }
@media (max-width: 900px) { .visa-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .selects, .docs, .facts { grid-template-columns: 1fr; } .stampmark { position: static; justify-self: start; } }

/* Packages: flip boarding passes in a drag carousel */
.pk-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.pk-head .head { margin-bottom: 0; }
.arrows { display: flex; gap: 10px; }
.arrows button { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--glass); box-shadow: inset 0 0 0 1px var(--faint); color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .3s; }
.arrows button:hover { background: var(--coral); transform: scale(1.06); }
.carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px var(--gr) 30px var(--gl); cursor: grab; }
.carousel::-webkit-scrollbar { display: none; }
.carousel.drag { cursor: grabbing; scroll-snap-type: none; }
.carousel.drag * { pointer-events: none; }
.flipcard { flex: 0 0 min(360px, 84vw); height: 500px; perspective: 1400px; scroll-snap-align: start; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.flipcard:hover .flip-inner, .flipcard.flipped .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.front { background: var(--white); color: var(--navy); }
.back { background: var(--navy-2); color: var(--white); transform: rotateY(180deg); box-shadow: inset 0 0 0 1px var(--faint); padding: 28px; gap: 16px; grid-template-rows: auto auto 1fr auto; }
.front .ph { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; background: var(--navy); color: var(--white); }
.front .ph .icon { color: var(--coral); }
.flipcard.hot .front .ph { background: var(--coral); }
.flipcard.hot .front .ph .icon { color: var(--white); }
.front .fbody { padding: 26px 24px; display: grid; gap: 20px; align-content: start; }
.front .rt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.front .rt b { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; line-height: 1; }
.front .rt small { display: block; font-size: .78rem; color: #5A5F86; }
.front .rt .ln { border-top: 2px dashed rgba(22,25,70,.25); position: relative; }
.front .rt .ln::after { content: ""; position: absolute; left: calc(50% - 13px); top: -14px; width: 26px; height: 26px; background: var(--coral); -webkit-mask: var(--plane) center / contain no-repeat; mask: var(--plane) center / contain no-repeat; transform: rotate(45deg); }
.front h3 { font-size: 1.7rem; font-weight: 800; }
.front .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #5A5F86; }
.front .meta b { display: block; color: var(--navy); font-size: .95rem; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.front .tear { margin-inline: 24px; border-top: 2px dashed rgba(22,25,70,.18); position: relative; }
.front .tear::before, .front .tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.front .tear::before { left: -36px; } .front .tear::after { right: -36px; }
.front .ffoot { padding: 20px 24px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.barcode { height: 40px; flex: 1; max-width: 160px; background: repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 5px, transparent 5px 8px, var(--navy) 8px 11px, transparent 11px 13px); border-radius: 3px; }
.hint { font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); display: inline-flex; gap: 6px; align-items: center; }
.back h3 { font-size: 1.6rem; font-weight: 800; }
.back p { color: var(--soft); }
.back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.back li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.back li .icon { width: 20px; height: 20px; color: var(--coral); stroke-width: 2.4; }
.back .btn { justify-content: center; }

/* Stats odometer */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--faint); }
.stat { padding: 44px 28px; display: grid; gap: 10px; border-right: 1px solid var(--faint); min-width: 0; }
.stat:last-child { border-right: 0; }
.odo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); letter-spacing: -.05em; line-height: 1; display: inline-flex; height: 1em; overflow: hidden; font-variant-numeric: tabular-nums; }
.odo .col { display: flex; flex-direction: column; transition: transform 2s var(--ease); }
.odo .col span { height: 1em; display: block; }
.odo .sfx, .odo .sep { color: var(--coral); }
.stat p { color: var(--soft); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--faint); } }

/* Reviews: dual marquee */
.rv-row { overflow: hidden; padding-block: 10px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rv-track { display: flex; gap: 18px; width: max-content; animation: mq 50s linear infinite; }
.rv-row.rev .rv-track { animation-direction: reverse; }
.rv-row:hover .rv-track { animation-play-state: paused; }
.rv { width: min(420px, 80vw); border-radius: 26px; padding: 26px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--faint); display: grid; gap: 18px; }
.rv q { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.5; quotes: "\201C" "\201D"; }
.rv footer { display: flex; align-items: center; gap: 12px; }
.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; background: var(--sky); }
.rv cite { font-style: normal; font-family: var(--font-display); font-weight: 800; display: block; }
.rv footer span { color: var(--soft); font-size: .85rem; }
.rv .stars { margin-left: auto; color: var(--coral); letter-spacing: 2px; }
.rv.pill-card { width: auto; padding: 26px 34px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); background: var(--coral); box-shadow: none; }
.rv.pill-card.b { background: var(--sky); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-bottom: 1px solid var(--faint); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--faint); transition: transform .5s var(--ease), background .3s; }
.faq details[open] summary .pm { transform: rotate(135deg); background: var(--coral); box-shadow: none; }
.faq .ans { color: var(--soft); padding: 0 60px 26px 0; line-height: 1.7; }
.faq details[open] .ans { animation: fadeUp .5s var(--ease); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* CTA + footer */
.cta { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.cta .aurora { opacity: .9; }
.cta h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.cta h2 .script { color: var(--sky-light); font-size: 1.1em; }
.cta p { color: var(--soft); font-size: var(--step-1); margin: 24px auto 0; max-width: 40ch; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }
.contacts a, .contacts div { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--faint); text-decoration: none; font-family: var(--font-display); font-weight: 700; transition: background .3s; }
.contacts a:hover { background: rgba(255,255,255,.12); }
.contacts .icon { color: var(--coral); }
.site-footer { padding-block: 40px 30px; border-top: 1px solid var(--faint); overflow: hidden; }
.giant { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 1rem + 15vw, 17rem); letter-spacing: -.07em; line-height: .8; white-space: nowrap; text-align: center; background: linear-gradient(90deg, var(--sky) 0%, var(--sky-light) 40%, var(--coral) 60%, var(--sky) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 8s linear infinite; margin-block: 10px 40px; }
@keyframes sheen { to { background-position: -200% 0; } }
.foot-row { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; color: var(--soft); font-size: .92rem; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-row a { text-decoration: none; color: var(--soft); }
.foot-row a:hover { color: var(--white); }
.foot-brand { background: var(--white); border-radius: 20px; padding: 8px 14px; display: inline-flex; }
.foot-brand img { height: 64px; width: auto; }

.fab { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 65; width: 62px; height: 62px; border-radius: 50%; background: #25D366; display: grid; place-items: center; color: var(--white); box-shadow: 0 16px 30px -10px rgba(0,0,0,.5); transition: transform .4s var(--ease); }
.fab:hover { transform: scale(1.1) rotate(-8deg); }
.fab svg { width: 30px; height: 30px; fill: currentColor; }

/* Reveal system — readable at rest, eases in on enter */
.motion [data-r] { opacity: .2; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-r].in { opacity: 1; transform: none; }
.motion [data-r="scale"] { transform: scale(.9); }
.motion [data-r="scale"].in { transform: none; }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; }
.motion .split .split-line > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--l) * 90ms); }
.motion .split.in .split-line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Refinements */
.hero h1 { font-size: clamp(2.6rem, 1.3rem + 4vw, 5.4rem); }
.hero-grid { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.mq-wrap { overflow: hidden; padding-block: 20px; }
.sky-layer { background: linear-gradient(180deg, #F6B38E 0%, #F9CDB0 25%, #7CC6E6 65%, #1C87B3 100%); }
.sky-night { opacity: clamp(0, calc((var(--p) - .2) * 1.5), 1); }
.tstep { padding: 22px 24px; border-radius: 26px; background: rgba(10,12,41,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.odo { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 4.2rem); }
.flipcard { height: 470px; }
.front .fdesc { color: #4E5480; font-size: .98rem; line-height: 1.55; }

.scard-link { position: absolute; inset: 0; z-index: 3; }
.scard { cursor: pointer; }
.scard .explore { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: .95rem; padding: 12px 20px; border-radius: 999px; background: var(--coral); color: var(--white); transition: transform .4s var(--ease); }
.scard .explore .icon { width: 18px; height: 18px; }
.scard:hover .explore { transform: translateX(6px); }
.brand-film { padding-top: clamp(60px, 8vw, 110px); }
.globe-wrap canvas.globe3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.globe-wrap canvas.globe3d:active { cursor: grabbing; }
.globe-wrap .globe-tag, .globe-wrap .drag-hint { z-index: 2; pointer-events: none; }

/* Skip link (keyboard users) */
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--coral); color: var(--white); font-family: var(--font-display); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip-link:focus { transform: none; }
.tbc { display: inline-block; padding: 1px 9px; border-radius: 6px; background: rgba(240,106,81,.16); color: #FFB3A5; font-size: .86em; font-family: var(--font-display); font-weight: 600; }

/* Performance: skip layout/paint for far-off sections */
.faq, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.sky-night, .takeoff .stars { will-change: opacity; }

/* ---------- Destination stack: every card always fits the screen, at any window size ---------- */
.scard { --top: calc(env(safe-area-inset-top, 0px) + 96px + var(--i) * 14px); top: var(--top); height: min(640px, calc(100vh - var(--top) - 18px)); height: min(640px, calc(100svh - var(--top) - 18px)); min-height: 0; }
.scard .art { min-height: 0; }
.scard .body { padding: clamp(20px, 3.6vh, 56px) clamp(22px, 3.4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 26px); min-height: 0; overflow: hidden; }
.scard .code { font-size: clamp(2.6rem, min(7vw, 12vh), 8.5rem); }
.scard h3 { font-size: clamp(1.7rem, min(3.6vw, 6.4vh), 4rem); }
.scard p { font-size: clamp(.98rem, min(1.25vw, 2.3vh), 1.45rem); }
.scard .explore { flex: none; align-self: flex-start; }
@media (max-height: 720px) { .scard .tags { display: none; } .scard .route::after { display: none; } }
@media (max-width: 860px) {
  .scard { --top: calc(env(safe-area-inset-top, 0px) + 80px + var(--i) * 10px); grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); }
  .scard .art { min-height: 0; aspect-ratio: auto; height: 100%; }
  .scard .code { font-size: clamp(2.4rem, 9vh, 4.6rem); }
  .scard h3 { font-size: clamp(1.6rem, 4.6vh, 2.4rem); }
  .scard p { font-size: clamp(.95rem, 2.1vh, 1.1rem); }
  .scard .tags { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) { .scard p { display: none; } }