/* ==========================================================
   RELIABLE TRAVELS — cinematic layer (loaded after style.css)
   ========================================================== */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #f6b73c; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #ff7a3c; }

:root {
  --ease-cine: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pink: #ff3d7f;
  --violet: #7b4dff;
  --sky: #2fb4ff;
  --teal: #1fd1a5;
  transition: --accent 1.2s ease;
}

::selection { background: var(--lime); color: var(--ink); }

/* ---------- Preloader (curtain open) ---------- */
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; }
.no-splash .preloader { display: none; }
.preloader { position: fixed; inset: 0; z-index: 300; pointer-events: none; animation: preFailSafe 0s 6s forwards; }
.pre-panel { position: absolute; left: 0; right: 0; height: 50.5%; background: #061e1a; transition: transform 1.25s var(--ease-cine) .25s; }
.pre-panel.top { top: 0; }
.pre-panel.bottom { bottom: 0; }
.pre-brand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: #fff; transition: opacity .45s, transform .9s var(--ease-cine); }
.pre-word { margin: 0; display: flex; gap: .06em; flex-wrap: wrap; justify-content: center; font: 800 clamp(26px, 5.6vw, 84px)/1.1 Manrope, sans-serif; letter-spacing: .08em; }
.pre-word span { display: inline-block; background: linear-gradient(120deg, var(--lime), #ffd166 35%, var(--orange) 60%, var(--pink) 85%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(60%) rotate(8deg); animation: preLetter .8s var(--ease-out) forwards, shimmer 3s linear infinite; }
.pre-word span:nth-child(1) { animation-delay: .00s, 0s; } .pre-word span:nth-child(2) { animation-delay: .05s, 0s; }
.pre-word span:nth-child(3) { animation-delay: .10s, 0s; } .pre-word span:nth-child(4) { animation-delay: .15s, 0s; }
.pre-word span:nth-child(5) { animation-delay: .20s, 0s; } .pre-word span:nth-child(6) { animation-delay: .25s, 0s; }
.pre-word span:nth-child(7) { animation-delay: .30s, 0s; } .pre-word span:nth-child(8) { animation-delay: .35s, 0s; }
.pre-word span:nth-child(9) { animation-delay: .40s, 0s; } .pre-word span:nth-child(10) { animation-delay: .45s, 0s; }
.pre-word span:nth-child(11) { animation-delay: .50s, 0s; } .pre-word span:nth-child(12) { animation-delay: .55s, 0s; }
.pre-word span:nth-child(13) { animation-delay: .60s, 0s; } .pre-word span:nth-child(14) { animation-delay: .65s, 0s; }
.pre-word span:nth-child(15) { animation-delay: .70s, 0s; } .pre-word span:nth-child(16) { animation-delay: .75s, 0s; }
.pre-word .pre-gap { width: .35em; }
.pre-line { width: min(320px, 60vw); height: 2px; background: #ffffff1c; overflow: hidden; border-radius: 2px; }
.pre-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--orange), var(--pink), var(--violet)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pre-brand small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9fb5ae; }
.pre-brand small b { color: #fff; font-weight: 700; }
.loaded .pre-panel.top { transform: translateY(-100%); }
.loaded .pre-panel.bottom { transform: translateY(100%); }
.loaded .pre-brand { opacity: 0; transform: scale(1.15); }
@keyframes preLetter { to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes preFailSafe { to { visibility: hidden; } }

/* ---------- Scroll progress + cursor + grain ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--lime), #ffd166, var(--orange), var(--pink), var(--violet)); }
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; z-index: 150; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s; }
.cursor.on { opacity: 1; }
.cursor.hover { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #fff; }
@media (pointer: coarse) { .cursor { display: none; } }


/* ---------- Hero ---------- */
.hero { height: 100vh; height: 100svh; max-height: 980px; }
.slides { will-change: transform; }
.slide { opacity: 1; visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease-cine), visibility 0s 1.3s; }
.slide.active { visibility: visible; clip-path: inset(0 0 0 0); z-index: 3; transition: clip-path 1.3s var(--ease-cine), visibility 0s; }
.slide.leaving { visibility: visible; clip-path: inset(0 0 0 0); z-index: 2; transition: none; }
.slide img { transform: scale(1.22) translateX(5%); filter: blur(10px) brightness(1.35) saturate(1.1); transition: transform 1.3s var(--ease-cine), filter 1.3s; }
.slide.active img { transform: scale(1.02) translateX(0); filter: saturate(1.12) contrast(1.06); transition: transform 9s var(--ease-out), filter 1.6s var(--ease-out); }
.slide.leaving img { transform: scale(1.08) translateX(-6%); transition: transform 1.3s var(--ease-cine); }
.slide-copy { opacity: var(--fade, 1); }
.slide-copy > *:not(h1) { opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .8s var(--ease-out); }
.loaded .slide.active .slide-copy > *:not(h1) { opacity: 1; transform: none; transition-delay: calc(.55s + var(--d, 0) * .14s); }
.line { display: block; overflow: hidden; padding: 0 .12em .12em 0; margin-bottom: -.12em; }
.line-in { display: inline-block; transform: translateY(115%) rotate(4deg); filter: blur(14px); opacity: 0; transform-origin: left bottom; transition: transform 1.1s var(--ease-out), filter 1.1s, opacity .8s; }
.loaded .slide.active .line-in { transform: none; filter: none; opacity: 1; transition-delay: calc(.5s + var(--i, 0) * .13s); }
h1 em { background: linear-gradient(95deg, var(--accent) 10%, #fff 55%, var(--accent) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; animation: emShine 6s ease-in-out infinite; }
@keyframes emShine { 50% { background-position: 100% 0; } }
.eyebrow { color: var(--accent); }
.eyebrow span { width: 42px; height: 2px; }
.primary-btn { position: relative; overflow: hidden; background: var(--accent); box-shadow: 0 14px 40px -12px var(--accent); transition: box-shadow .4s, transform .3s; isolation: isolate; }
.primary-btn:before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .5s var(--ease-cine); z-index: -1; }
.primary-btn:hover:before { transform: none; }
.place-list { opacity: 0; transform: translateX(30px); transition: opacity .6s, transform .9s var(--ease-out); border-top-color: var(--accent); }
.loaded .slide.active .place-list { opacity: 1; transform: none; transition-delay: 1s; }
.place-list p { font-size: 15px; }
.hero-controls, .scroll { z-index: 12; }
.progress div { height: 2px; }
.progress i { background: linear-gradient(90deg, #fff, var(--accent)); transition: width .8s var(--ease-cine); }
.scroll span { position: relative; overflow: hidden; background: #ffffff40; height: 60px; }
.scroll span:after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--accent); animation: drip 1.8s var(--ease-cine) infinite; }
@keyframes drip { to { top: 100%; } }
.arrow { transition: background .3s, color .3s, border-color .3s, transform .3s; }
.arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- Intro: copy on the left, a layered photo stage on the right, stat cards underneath.
   Depth comes from three things: the stage tilts with the pointer (--mx/--my, script.js), every layer sits at its own
   translateZ, and the layers drift at different speeds while the section scrolls past (--ip, script.js). ---------- */
.intro { position: relative; overflow: hidden; padding-block: 132px 96px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px 70px; align-items: center; }
.intro > *:not(.blob) { position: relative; z-index: 1; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: blob 16s ease-in-out infinite alternate; pointer-events: none; }
.blob.b1 { width: 420px; height: 420px; background: #ffd0b8; right: -80px; top: -60px; }
.blob.b2 { width: 360px; height: 360px; background: #e7ff9e; left: 30%; bottom: -160px; animation-delay: -5s; }
.blob.b3 { width: 300px; height: 300px; background: #c9d8ff; left: -100px; top: 30%; animation-delay: -9s; }
@keyframes blob { 33% { transform: translate(60px,-40px) scale(1.1); } 66% { transform: translate(-40px,30px) scale(.92); } 100% { transform: translate(20px,50px) scale(1.05); } }
/* The section's name, outlined, standing right above the kicker (it lives inside .intro-text so it follows the copy) */
.intro-ghost { position: absolute; z-index: -1; left: -.05em; bottom: 100%; margin-bottom: .1em; font: 800 clamp(84px, 10vw, 190px)/.8 Manrope, sans-serif; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: #0b2a240d; -webkit-text-stroke: 1.5px #0b2a2455; transform: translate3d(calc(var(--ip, 0) * -4vw), 0, 0); pointer-events: none; }

.section-kicker { display: flex; align-items: center; gap: 12px; }
.section-kicker:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(var(--lime), var(--orange), var(--pink), var(--violet), var(--lime)); animation: spin 4s linear infinite; flex-shrink: 0; }
.planner .section-kicker { justify-content: center; }
.intro .section-kicker { margin-bottom: 22px; }
/* balance keeps a single word from dropping onto its own line */
.intro h2 { font-size: clamp(38px, 3.8vw, 68px); line-height: 1.08; text-wrap: balance; }
.intro-copy { margin-top: 30px; padding-left: 22px; border-left: 2px solid var(--accent); }
[data-fill] .w { display: inline-block; opacity: .14; filter: blur(6px); transition: opacity .5s, filter .6s, color .4s, transform .7s var(--ease-out); transform: translateY(14px) rotate(2deg); transform-origin: left bottom; }
[data-fill] .w.on { opacity: 1; filter: none; transform: none; }
[data-fill] .w.hl.on { background: linear-gradient(90deg, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Georgia, serif; font-style: italic; font-weight: 400; padding-right: .06em; }

/* Photo stage. The stage and the stat cards each play their entrance when they themselves scroll into view (.in, script.js) */
.intro-visual { perspective: 1300px; }
.intro-stage { position: relative; height: clamp(360px, 28vw, 500px); transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * 12deg)) rotateX(calc(var(--my, 0) * -9deg)); transition: transform .6s var(--ease-out); }
.shot { position: absolute; margin: 0; transform: translate3d(0, calc(var(--ip, 0) * var(--k)), var(--z)) rotate(var(--r)); }
.shot.s1 { right: 5%; top: 6%; width: 56%; height: 88%; --r: 3deg; --z: 0px; --k: -34px; --dl: .15s; --ft: 8s; }
.shot.s2 { left: 5%; bottom: 8%; width: 46%; aspect-ratio: 4 / 3; --r: -6deg; --z: 90px; --k: -96px; --dl: .38s; --ft: 6.5s; }
.shot.s3 { left: 12%; top: 8%; width: 27%; aspect-ratio: 1; --r: 8deg; --z: 45px; --k: 60px; --dl: .55s; --ft: 7.4s; }
.shot-in { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #d9d6cc; box-shadow: 0 0 0 6px #fff, 0 46px 70px -30px #0b2a24b3, 0 18px 30px -18px #0b2a2466; opacity: 0; transform: translateY(110px) scale(.82) rotate(calc(var(--r) * 2)); transition: opacity .9s var(--dl), transform 1.6s var(--ease-cine) var(--dl); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); transition: transform 2.4s var(--ease-cine) var(--dl); }
.intro-visual.in .shot-in { opacity: 1; transform: none; animation: shotFloat var(--ft) ease-in-out 2s infinite alternate; }
.intro-visual.in .shot img { transform: scale(1.04); }
@keyframes shotFloat { to { translate: 0 -14px; } }
/* A band of light crosses the main photo every few seconds */
.s1 .shot-in:after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, #ffffff66 50%, transparent 62%); transform: translateX(-130%); animation: shotShine 6.5s var(--ease-cine) 2.4s infinite; }
@keyframes shotShine { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
.shot figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #082620cc; font: 700 12px "DM Sans", sans-serif; letter-spacing: .04em; color: #fff; }
.shot figcaption:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.chip { position: absolute; right: -2%; top: 14%; display: flex; align-items: center; gap: 9px; padding: 11px 17px 11px 13px; border-radius: 999px; background: #fff; box-shadow: 0 22px 36px -18px #0b2a2499; font: 700 13px "DM Sans", sans-serif; white-space: nowrap; transform: translateZ(150px) scale(.4); opacity: 0; transition: opacity .5s 1.2s, transform .9s cubic-bezier(.3, 1.6, .5, 1) 1.2s; }
.chip:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1fae7c; box-shadow: 0 0 0 5px #1fae7c2e; animation: chipPulse 2s ease-in-out infinite; }
@keyframes chipPulse { 50% { box-shadow: 0 0 0 9px #1fae7c00; } }
.intro-visual.in .chip { opacity: 1; transform: translateZ(150px); }
/* Globe: a line drawing of the Earth, larger than the photo stack, so the photos sit inside it.
   .earth (the ball and its grid) lies behind the photos and .earth-near (a glass highlight) in front of them; they sit at
   different depths, and the scale() cancels the perspective so they line up when the stage is at rest.
   .earth-ring is the plane's orbit: one ring, genuinely laid back in 3D through the middle of the stack, so its near half
   passes in front of the photos and its far half behind them, and it stays in one piece however the stage tilts. */
.earth, .earth-near, .earth-ring { position: absolute; left: -11%; top: 50%; width: 122%; aspect-ratio: 1; margin-top: -61%; pointer-events: none; }
.earth { transform: translateZ(-90px) scale(.75); opacity: 0; transition: opacity 1.2s .1s, transform 1.9s var(--ease-cine) .1s; }
.intro-visual.in .earth { opacity: 1; transform: translateZ(-90px) scale(1.069); }
.earth-near { transform: translateZ(150px) scale(.885); opacity: 0; transition: opacity .9s 1.5s; }
.intro-visual.in .earth-near { opacity: 1; }
.earth-near:before { content: ""; position: absolute; inset: 2.5%; border-radius: 50%; background: radial-gradient(circle at 26% 19%, #ffffff4d, transparent 32%), radial-gradient(circle at 78% 86%, #0b2a2414, transparent 42%); }
.earth svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-18deg); }
/* The globe is a pencil sketch: every line wobbles and most are drawn twice (the paths in index.html were generated by a script, not drawn by hand), all kept faint */
.earth-globe { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.earth-globe path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.earth-globe .ball { fill: url(#earth-fill); stroke: none; }
.earth-globe .hatch { stroke-width: .8px; opacity: .13; }
.earth-globe .lat { opacity: .17; }
.earth-globe .lon { opacity: .15; }
.earth-globe .rim { opacity: .34; }
.earth-ring { overflow: visible; transform: translateZ(45px) rotate(-18deg) rotateX(60deg) scale(.965); opacity: 0; transition: opacity .9s 1.4s; }
.intro-visual.in .earth-ring { opacity: 1; }
.earth-ring ellipse { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.earth-ring path { fill: #fff; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; paint-order: stroke; }

/* Stat cards: rise out of the page in turn, then tilt under the pointer ([data-tilt], script.js) */
.stats { margin: 0; padding: 0; border: 0; gap: 22px; perspective: 1100px; }
.stats div, .stats div + div { position: relative; gap: 18px; padding: 28px 32px; border: 1px solid #fff; border-radius: 24px; background: linear-gradient(145deg, #fff, #ffffffb0); box-shadow: 0 34px 56px -34px #0b2a2499, 0 10px 18px -14px #0b2a2440; overflow: hidden; transition: transform .25s ease-out, box-shadow .4s; --c: #1f8a6c; }
.stats div:nth-child(2) { --c: var(--pink); }
.stats div:nth-child(3) { --c: var(--violet); }
.stats div:hover { box-shadow: 0 44px 64px -34px #0b2a24b3, 0 12px 20px -14px #0b2a2455; }
/* a soft glow in the card's own colour, and a line that draws along the bottom edge */
.stats div:before { content: ""; position: absolute; right: -50px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: var(--c); opacity: .2; filter: blur(34px); animation: blob 9s ease-in-out infinite alternate; }
.stats div:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--c), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-cine) .7s; }
.stats.in div:after { transform: scaleX(1); }
.stats:not(.in) div { opacity: 0; }
.stats.in div { animation: statIn 1.2s var(--ease-out) backwards; }
.stats.in div:nth-child(1) { animation-delay: .5s; }
.stats.in div:nth-child(2) { animation-delay: .65s; }
.stats.in div:nth-child(3) { animation-delay: .8s; }
@keyframes statIn { from { opacity: 0; transform: translateY(70px) rotateX(-38deg) scale(.92); } }
.stats strong { position: relative; line-height: 1; letter-spacing: -.03em; background: linear-gradient(120deg, var(--ink), #1f8a6c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats div:nth-child(2) strong { background-image: linear-gradient(120deg, var(--orange), var(--pink)); }
.stats div:nth-child(3) strong { background-image: linear-gradient(120deg, var(--violet), var(--sky)); }
.stats span { position: relative; max-width: 140px; font-size: 14px; font-weight: 500; line-height: 1.45; color: #53625e; }
@media (max-width: 800px) {
  .intro { grid-template-columns: 1fr; padding-block: 72px; gap: 46px 0; }
  .intro .section-kicker { margin-bottom: 18px; }
  .intro-copy { margin-top: 22px; padding-left: 16px; }
  .intro-stage { height: min(86vw, 410px); margin-inline: 6px; }
  .chip { right: -2%; padding: 9px 14px 9px 11px; font-size: 12px; }
  .earth, .earth-near, .earth-ring { left: -7%; width: 114%; margin-top: -57%; }
  .intro-ghost { font-size: 15vw; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stats div, .stats div + div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 14px; border: 1px solid #fff; border-radius: 18px; }
  .stats strong { font-size: clamp(26px, 8vw, 38px); }
  .stats span { max-width: none; font-size: 12px; line-height: 1.35; }
}

/* Arrow nudge (used by hints) */
@keyframes nudge { 50% { transform: translateX(8px); } }

/* ---------- Journeys cards ---------- */
.card-gradient { background: linear-gradient(0deg, #052c28f0, transparent 65%), linear-gradient(200deg, color-mix(in srgb, var(--glow) 45%, transparent), transparent 45%); }
.card-copy a { transition: gap .3s, border-color .3s; }
.card-copy a:hover { gap: 40px; border-color: var(--glow); }

/* ---------- Steps ---------- */
.steps { padding: 40px max(24px, 5vw) 140px; position: relative; }
.steps-line { height: 2px; margin: 0 5vw 40px; background: #0000000f; border-radius: 2px; overflow: hidden; }
.steps-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), #ffb199, #9fdcff, #e3b8ff); transform-origin: left; transform: scaleX(0); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 5vw; }
.step { position: relative; background: var(--c); border-radius: 22px; padding: 30px 26px 34px; min-height: 290px; overflow: hidden; transition: opacity .8s, transform .8s var(--ease-out), box-shadow .5s; transition-delay: calc(var(--d, 0) * .12s); }
.step:after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -60px; bottom: -70px; background: #ffffff55; transition: transform .7s var(--ease-out); }
.step:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 30px 60px -25px #0005; transition-delay: 0s; }
.step:hover:after { transform: scale(1.6); }
.step b { font: 800 13px Manrope, sans-serif; letter-spacing: .14em; opacity: .6; }
.step-icon { position: absolute; top: 22px; right: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--c); display: grid; place-items: center; font-size: 22px; transition: transform .6s var(--ease-out); }
.step:hover .step-icon { transform: rotate(-20deg) scale(1.1); }
.step h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 90px 0 14px; position: relative; z-index: 1; }
.step p { margin: 0; line-height: 1.65; color: #0b3a33; position: relative; z-index: 1; font-size: 15px; }

/* ---------- Experience (aurora) ---------- */
.experience { background: #04201b; }
.experience > *:not(.aurora):not(.orbit) { position: relative; z-index: 2; }
.aurora { position: absolute; inset: -20%; filter: blur(80px); opacity: .6; pointer-events: none; }
.aurora span { position: absolute; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; border-radius: 50%; mix-blend-mode: screen; animation: drift 20s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: #12b98f; left: 5%; top: 5%; }
.aurora span:nth-child(2) { background: #6b3dff; right: 0; top: 20%; animation-delay: -7s; animation-duration: 24s; }
.aurora span:nth-child(3) { background: #ff3d7f; left: 35%; bottom: -5%; animation-delay: -12s; opacity: .7; }
@keyframes drift { 33% { transform: translate(12%, 10%) scale(1.15); } 66% { transform: translate(-10%, 6%) scale(.9); } 100% { transform: translate(6%, -12%) scale(1.05); } }
.experience-copy h2 em { font-family: Georgia, serif; font-weight: 400; background: linear-gradient(90deg, var(--lime), #6bffd8); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.experience-links a { position: relative; overflow: hidden; }
.experience-links a:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #d8ff6822, #ff3d7f22); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-cine); z-index: -1; }
.experience-links a:hover:before { transform: none; }
.experience-links a:hover i { color: var(--lime); transform: rotate(45deg); }
.experience-links i { transition: transform .4s var(--ease-out), color .3s; }

/* ---------- Planner (sunset) ---------- */
.planner { color: #fff; background: linear-gradient(125deg, #ff6b46, #ff3d7f, #7b4dff, #1fb5c9, #ffb347, #ff6b46); background-size: 400% 400%; animation: sunset 22s ease infinite; }
@keyframes sunset { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.planner .section-kicker { color: #ffffffcc; }
.planner p:not(.section-kicker) { color: #fff; font-size: 17px; }
.planner h2 em { font-family: Georgia, serif; font-weight: 400; }
.dark-btn { background: #fff; color: var(--ink); border-radius: 40px; padding: 18px 28px; font-weight: 700; box-shadow: 0 20px 50px -15px #0006; transition: box-shadow .4s; }
.dark-btn:hover { box-shadow: 0 25px 60px -10px #0008; }
.sun { position: absolute; width: 520px; height: 520px; border-radius: 50%; left: 50%; top: 50%; margin: -260px 0 0 -260px; background: radial-gradient(circle, #fff6 0%, #ffd16633 40%, transparent 70%); animation: pulse 6s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .7; } }
.planner-planes i { position: absolute; font-style: normal; color: #ffffffb0; font-size: 22px; animation: planeCross 16s linear infinite; pointer-events: none; }
.planner-planes i:nth-child(1) { top: 18%; animation-delay: -2s; }
.planner-planes i:nth-child(2) { top: 72%; font-size: 15px; animation-duration: 22s; animation-delay: -12s; }
.planner-planes i:nth-child(3) { top: 40%; font-size: 12px; animation-duration: 28s; animation-delay: -6s; opacity: .6; }
@keyframes planeCross { from { left: -5%; transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-30px) rotate(4deg); } to { left: 105%; transform: translateY(10px) rotate(-4deg); } }

/* ---------- Footer ---------- */
footer { position: relative; overflow: hidden; }
.footer-giant { grid-column: 1 / -1; font: 800 clamp(64px, 17vw, 280px)/.9 Manrope, sans-serif; letter-spacing: -.05em; text-align: center; margin: 40px 0 -10px; -webkit-text-stroke: 1px #ffffff30; -webkit-text-fill-color: #061e1a; background: linear-gradient(90deg, var(--lime), var(--orange), var(--pink), var(--violet), var(--sky), var(--lime)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 8s linear infinite; user-select: none; cursor: default; }
.footer-giant:hover, .footer-giant.lit { -webkit-text-fill-color: transparent; -webkit-text-stroke-color: transparent; }
.footer-links a { position: relative; transition: color .3s; }
.footer-links a:hover { color: var(--lime); }

/* ---------- Cinematic heading reveal (words rise out of blur) ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }
.wm-in { display: inline-block; transform: translateY(105%) rotate(3deg); filter: blur(8px); opacity: 0; transform-origin: left bottom; transition: transform 1.1s var(--ease-out), filter 1s, opacity .8s; transition-delay: calc(var(--i, 0) * 70ms); }
.split-in .wm-in { transform: none; filter: none; opacity: 1; }

/* ---------- Reveal stagger ---------- */
.reveal { transition-delay: calc(var(--d, 0) * .12s); transition-timing-function: var(--ease-out); transition-duration: 1s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .hero { max-height: 920px; min-height: 650px; }
  .steps { padding-bottom: 90px; }
  .steps-line { margin-inline: 0; }
  .steps-grid { padding: 0; }
  .sun { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .footer-giant { margin-top: 20px; }
}
@media (max-width: 520px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step { min-height: 230px; }
  .step h3 { margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader, .cursor { display: none; }
  .slide, .slide img, .line-in, .slide-copy > *, .place-list { transition: none !important; }
  .line-in, .slide-copy > *:not(h1), .place-list, .wm-in { transform: none !important; opacity: 1 !important; filter: none !important; }
  [data-fill] .w { opacity: 1; transform: none; filter: none; }
  .intro *, .intro *:before, .intro *:after { animation: none !important; transition: none !important; }
  .shot-in, .shot img, .chip { opacity: 1 !important; transform: none !important; }
}