:root {
  --brand-primary: #153b2e;
  --brand-secondary: #f3b63f;
  --brand-green: #278a45;
  --brand-orange: #f47721;
  --brand-blue: #199bd1;
  --surface: #fffdf8;
  --surface-muted: #f5efe3;
  --surface-green: #e9f1e9;
  --text-primary: #17231d;
  --text-secondary: #657169;
  --border-soft: rgba(23, 35, 29, .13);
  --home-display: "Manrope", system-ui, sans-serif;
  --home-body: "DM Sans", system-ui, sans-serif;
  --home-shadow: 0 24px 70px rgba(21, 59, 46, .13);
  --home-ease: cubic-bezier(.22, 1, .36, 1);
  --z-content: 0;
  --z-nav: 20;
  --z-whatsapp: 30;
  --z-companion: 40;
  --z-modal: 100;
  --z-combobox: 110;
  --z-tooltip: 120;
}

.home-page { background: var(--surface); color: var(--text-primary); font-family: var(--home-body); }

.home-page h1, .home-page h2, .home-page h3 { font-family: var(--home-display); font-weight: 700; }

.home-page h2 { font-size: clamp(2.35rem, 5.3vw, 5.1rem); line-height: 1.02; letter-spacing: -.055em; }

.home-page h3 { letter-spacing: -.025em; }

.home-page .section { padding-block: clamp(90px, 11vw, 160px); }

.home-page .eyebrow { color: rgba(255, 255, 255, .76); font-family: var(--home-display); font-size: 0.76rem; letter-spacing: .17em; }

.home-page .eyebrow--dark { color: var(--brand-orange); }

.home-page .eyebrow::before { width: 34px; }

.home-page .button { min-height: 52px; padding: .86rem 1.5rem; font-family: var(--home-display); font-size: 0.93rem; }

.home-page .button--primary { background: var(--brand-orange); box-shadow: 0 14px 34px -16px rgba(244, 119, 33, .9); }

.home-page .button--primary:hover { background: #dc6516; }

.home-page .button--outline { border-color: rgba(21, 59, 46, .24); background: transparent; color: var(--brand-primary); }

.home-page .button--outline:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }

.text-link { border: 0; padding: 0; background: transparent; color: var(--brand-primary); font-weight: 700; cursor: pointer; }

.text-link span { display: inline-block; margin-left: .35rem; transition: transform .25s var(--home-ease); }

.text-link:hover span { transform: translateX(5px); }

.home-page .home-header { z-index: var(--z-nav); height: 86px; background: rgba(255, 253, 248, .94); border-bottom: 1px solid rgba(21, 59, 46, .08); color: var(--brand-primary); backdrop-filter: blur(16px); }

.home-page .home-header.is-scrolled { height: 72px; background: rgba(255, 253, 248, .97); box-shadow: 0 8px 35px rgba(21, 59, 46, .09); }

.home-page .home-header .nav-wrap { min-height: 100%; }

.home-page .home-header .brand { width: 205px; height: auto; overflow: visible; }

.home-page .home-header .brand img { width: 100%; height: auto; object-fit: contain; filter: none !important; }

.home-page .home-header .desktop-nav { gap: clamp(1rem, 2vw, 2rem); }

.home-page .home-header .desktop-nav a { color: var(--text-primary); font-size: 0.83rem; font-weight: 650; }

.home-page .home-header .desktop-nav a:hover { color: var(--brand-orange); }

.home-page .home-header .menu-toggle span { background: var(--brand-primary); }

.cinematic-journey { --cinema-progress: 0; --cinema-intro: 1; --cinema-promise: 0; --cinema-places: 0; --cinema-arrival: 0; --cinema-route: 0; --cinema-rail: 0; --cinema-dim: 0; --cinema-scale: 1; --cinema-x: 0px; --cinema-y: 0px; height: calc(100svh + 4400px); position: relative; overflow: clip; background: #d8d6bd; }

.cinematic-stage { height: 100svh; min-height: 620px; position: sticky; top: 0; overflow: hidden; isolation: isolate; background: #d8d6bd; color: var(--brand-primary); }

.cinematic-poster, .journey-canvas, .cinematic-shade { position: absolute; inset: 0; width: 100%; height: 100%; }

.cinematic-poster { z-index: 0; transition: opacity .35s ease; }

.cinematic-poster img { width: 100%; height: 100%; object-fit: cover; }

.journey-canvas { z-index: 1; display: block; opacity: 0; transform: translate3d(var(--cinema-x),var(--cinema-y),0) scale(var(--cinema-scale)); transform-origin: 50% 50%; filter: brightness(calc(1 - var(--cinema-dim) * .16)) saturate(calc(1 - var(--cinema-dim) * .18)); transition: opacity .35s ease; will-change: transform,filter; }

.cinematic-stage.is-canvas-ready .journey-canvas { opacity: 1; }

.cinematic-stage.is-canvas-ready .cinematic-poster { opacity: 0; }

.cinematic-shade { z-index: 2; pointer-events: none; background: linear-gradient(90deg,rgba(250,247,232,calc(.68 + var(--cinema-dim) * .12)) 0%,rgba(250,247,232,.15) 46%,rgba(250,247,232,calc(.12 + var(--cinema-dim) * .16)) 100%),linear-gradient(0deg,rgba(11,39,29,.18),transparent 42%,rgba(255,253,248,.16)); }

.cinematic-word { width: 100%; position: absolute; left: 50%; top: clamp(102px,14vh,150px); z-index: 3; margin: 0; color: rgba(21,59,46,calc(.11 * var(--cinema-intro))); font-family: var(--home-display); font-size: clamp(5rem,16vw,15.5rem); font-weight: 800; letter-spacing: -.085em; line-height: .72; text-align: center; transform: translateX(-50%) translateY(calc((1 - var(--cinema-intro)) * -90px)) scale(calc(.94 + var(--cinema-intro) * .06)); pointer-events: none; }

.cinematic-copy { position: absolute; z-index: 6; opacity: 0; pointer-events: none; will-change: transform,opacity; }

.cinematic-copy.is-active { pointer-events: auto; }

.cinematic-copy .eyebrow { color: var(--brand-orange); text-shadow: none; }

.cinematic-copy h1, .cinematic-copy h2 { color: var(--brand-primary); text-shadow: none; }

.cinematic-copy h2 { margin: 0 0 1rem; font-size: clamp(3rem,6.2vw,6.8rem); line-height: .91; }

.cinematic-copy > p:not(.eyebrow) { max-width: 620px; color: rgba(21,59,46,.72); font-size: clamp(.92rem,1.3vw,1.13rem); line-height: 1.55; }

.cinematic-copy > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }

.cinematic-button--ghost { border: 1px solid rgba(21,59,46,.3); background: rgba(255,253,248,.48); color: var(--brand-primary); backdrop-filter: blur(9px); }

.cinematic-button--ghost:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }

.cinematic-copy--intro { left: max(5vw,30px); bottom: clamp(58px,9vh,100px); width: min(720px,calc(100vw - 60px)); opacity: var(--cinema-intro); transform: translateY(calc((1 - var(--cinema-intro)) * 68px)); }

.cinematic-copy--intro h1 { max-width: 850px; margin: 0 0 1rem; font-size: clamp(3.1rem,6.8vw,7rem); line-height: .91; letter-spacing: -.065em; }

.cinematic-copy--intro h1 em { color: #c95715; font-style: normal; font-weight: 650; }

.cinematic-copy--promise { left: max(5vw,30px); top: 50%; width: min(650px,44vw); opacity: var(--cinema-promise); transform: translateY(calc(-50% + (1 - var(--cinema-promise)) * 65px)); }

.cinematic-copy--promise ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 1.5rem 0 0; padding: 0; list-style: none; }

.cinematic-copy--promise li { padding: .48rem .78rem; border: 1px solid rgba(21,59,46,.18); border-radius: 999px; background: rgba(255,253,248,.66); color: var(--brand-primary); font-size: 0.76rem; font-weight: 750; backdrop-filter: blur(8px); }

.cinematic-copy--places { left: max(5vw,30px); top: 23%; width: min(520px,38vw); opacity: var(--cinema-places); transform: translateY(calc((1 - var(--cinema-places)) * 52px)); }

.cinematic-copy--places h2 { font-size: clamp(2.8rem,5vw,5.6rem); }

.cinematic-copy--arrival { left: 50%; top: 21%; width: min(990px,calc(100vw - 50px)); opacity: var(--cinema-arrival); text-align: center; transform: translateX(-50%) translateY(calc((1 - var(--cinema-arrival)) * 48px)); }

.cinematic-copy--arrival h2 { margin-inline: auto; }

.cinematic-copy--arrival > div { justify-content: center; }

.cinematic-route { width: min(54vw,850px); height: min(58vh,590px); position: absolute; right: 2.5vw; top: 19%; z-index: 5; opacity: var(--cinema-route); transform: translateX(calc((1 - var(--cinema-route)) * 8vw)) scale(calc(.94 + var(--cinema-route) * .06)); transform-origin: 50% 50%; pointer-events: none; }

.cinematic-route > p { position: absolute; right: 4%; top: -10px; margin: 0; color: rgba(21,59,46,.55); font-size: 0.76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.cinematic-route svg { width: 100%; height: 100%; overflow: visible; }

.cinematic-route__base, .cinematic-route__progress { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.cinematic-route__base { stroke: rgba(21,59,46,.16); stroke-width: 6; stroke-dasharray: 3 12; }

.cinematic-route__progress { stroke: var(--brand-orange); stroke-width: 7; }

.cinematic-route__stop circle { fill: #fffdf8; stroke: rgba(21,59,46,.22); stroke-width: 2; vector-effect: non-scaling-stroke; transition: .25s ease; }

.cinematic-route__stop text { fill: rgba(21,59,46,.58); font-family: var(--home-display); font-size: 19px; font-weight: 750; transition: .25s ease; }

.cinematic-route__stop.is-active circle { fill: var(--brand-primary); stroke: #fffdf8; transform: scale(1.3); }

.cinematic-route__stop.is-active text { fill: var(--brand-primary); font-weight: 850; }

.cinematic-route__bus { width: 56px; height: 32px; position: absolute; left: 0; top: 0; z-index: 7; opacity: var(--cinema-route); transform-origin: 50% 50%; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 12px rgba(21,59,46,.22)); }

.cinematic-route__bus svg { width: 100%; height: 100%; overflow: visible; fill: #fffdf8; stroke: var(--brand-primary); stroke-width: 2; }

.cinematic-route__bus svg path:last-child { fill: var(--brand-orange); stroke: none; }

.cinematic-place-rail { position: absolute; left: 4vw; right: 4vw; bottom: 6vh; z-index: 8; display: flex; justify-content: center; gap: 12px; opacity: var(--cinema-rail); transform: translateX(calc((1 - var(--cinema-rail)) * 95vw)) translateY(calc((1 - var(--cinema-rail)) * 35px)); pointer-events: none; will-change: transform,opacity; }

.cinematic-place-rail.is-ready { pointer-events: auto; }

.cinematic-place-rail a { width: min(22vw,300px); min-height: 116px; display: grid; grid-template-columns: 104px 1fr; align-items: center; overflow: hidden; border: 1px solid rgba(21,59,46,.13); border-radius: 20px; background: rgba(255,253,248,.9); color: var(--brand-primary); text-decoration: none; box-shadow: 0 18px 45px rgba(21,59,46,.13); backdrop-filter: blur(12px); transition: transform .25s var(--home-ease); }

.cinematic-place-rail a:hover { transform: translateY(-5px); }

.cinematic-place-rail img { width: 104px; height: 100%; object-fit: cover; }

.cinematic-place-rail span { display: grid; gap: 3px; padding: 14px; }

.cinematic-place-rail small { color: var(--text-secondary); font-size: 0.76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.cinematic-place-rail strong { font-family: var(--home-display); font-size: 1rem; }

.cinematic-progress { width: 3px; height: min(32vh,260px); position: absolute; right: 30px; top: 50%; z-index: 9; overflow: hidden; border-radius: 99px; background: rgba(21,59,46,.16); transform: translateY(-50%); }

.cinematic-progress span { width: 100%; height: calc(var(--cinema-progress) * 100%); display: block; border-radius: inherit; background: var(--brand-orange); }

.cinematic-progress small { display: none; }

.cinematic-scroll-cue { position: absolute; right: 48px; bottom: 30px; z-index: 9; display: flex; align-items: center; gap: 9px; color: rgba(21,59,46,.6); font-size: 0.76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: var(--cinema-intro); }

.cinematic-scroll-cue span { width: 24px; height: 36px; position: relative; border: 1px solid rgba(21,59,46,.38); border-radius: 99px; }

.cinematic-scroll-cue span::after { content: ""; width: 3px; height: 7px; position: absolute; left: 50%; top: 7px; border-radius: 99px; background: var(--brand-primary); transform: translateX(-50%); animation: home-scroll 1.8s ease-in-out infinite; }

@media (max-width: 1024px) {

.cinematic-journey { height: calc(100svh + 3900px); }

.cinematic-route { width: 60vw; right: 0; }

.cinematic-copy--promise { width: 48vw; }

.cinematic-place-rail a { grid-template-columns: 78px 1fr; }

.cinematic-place-rail img { width: 78px; }
}

@media (max-width: 760px) {

.cinematic-journey { height: calc(100svh + 3300px); }

.cinematic-stage { min-height: 640px; }

.cinematic-shade { background: linear-gradient(0deg,rgba(250,247,232,.78) 0%,rgba(250,247,232,.08) 46%,rgba(250,247,232,.5) 100%); }

.cinematic-word { top: 100px; font-size: clamp(4rem,22vw,7rem); }

.cinematic-copy { left: 18px; right: 18px; width: auto; }

.cinematic-copy h2 { font-size: clamp(2.7rem,12vw,4.4rem); }

.cinematic-copy--intro { bottom: calc(78px + env(safe-area-inset-bottom)); }

.cinematic-copy--intro h1 { font-size: clamp(2.75rem,12vw,4.2rem); }

.cinematic-copy--intro > p:not(.eyebrow) { max-width: 28rem; font-size: 0.92rem; }

.cinematic-copy--intro > div { display: grid; grid-template-columns: 1fr 1fr; }

.cinematic-copy--intro .button { min-height: 47px; padding-inline: .7rem; }

.cinematic-copy--promise { top: auto; bottom: calc(78px + env(safe-area-inset-bottom)); transform: translateY(calc((1 - var(--cinema-promise)) * 50px)); }

.cinematic-copy--promise > p:not(.eyebrow) { font-size: 0.91rem; }

.cinematic-copy--places { top: 16%; }

.cinematic-copy--places h2 { max-width: 350px; font-size: clamp(2.6rem,11vw,4rem); }

.cinematic-route { width: 112vw; height: 53vh; right: -20vw; top: 28%; }

.cinematic-route > p { display: none; }

.cinematic-route__stop text { font-size: 23px; }

.cinematic-route__bus { width: 48px; }

.cinematic-copy--arrival { left: 18px; right: 18px; top: 13%; width: auto; transform: translateY(calc((1 - var(--cinema-arrival)) * 42px)); }

.cinematic-copy--arrival h2 { font-size: clamp(2.5rem,10.5vw,3.7rem); }

.cinematic-copy--arrival > div { display: grid; grid-template-columns: 1fr 1fr; }

.cinematic-copy--arrival .button { min-height: 46px; padding-inline: .65rem; }

.cinematic-place-rail { left: 14px; right: auto; bottom: calc(72px + env(safe-area-inset-bottom)); justify-content: flex-start; gap: 9px; }

.cinematic-place-rail a { width: min(72vw,270px); min-height: 98px; grid-template-columns: 82px 1fr; flex: 0 0 auto; }

.cinematic-place-rail img { width: 82px; }

.cinematic-progress { right: 9px; height: 22vh; }

.cinematic-scroll-cue { right: 18px; bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {

.cinematic-copy--intro h1 { font-size: 2.65rem; }

.cinematic-copy--intro > div, .cinematic-copy--arrival > div { grid-template-columns: 1fr; }

.cinematic-copy--intro > p:not(.eyebrow) { display: none; }

.cinematic-copy--promise ul { margin-top: .9rem; }
}

.calm-hero { min-height: 100svh; position: relative; display: grid; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }

.calm-hero__image, .calm-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }

.calm-hero__image { z-index: -2; object-fit: cover; object-position: center 45%; transform: scale(1.025); }

.calm-hero__shade { z-index: -1; background: linear-gradient(90deg, rgba(7, 25, 18, .88) 0%, rgba(7, 25, 18, .68) 43%, rgba(7, 25, 18, .22) 73%, rgba(7, 25, 18, .12)), linear-gradient(0deg, rgba(6, 22, 16, .45), transparent 50%); }

.calm-hero__content { padding-top: 150px; padding-bottom: 90px; }

.calm-hero h1 { max-width: 1040px; margin: 0 0 1.35rem; font-size: clamp(3.2rem, 7.6vw, 7.25rem); line-height: .96; letter-spacing: -.068em; }

.calm-hero h1 em { display: inline-block; color: #ffd38c; font-style: normal; font-weight: 650; }

.calm-hero .hero-lead { max-width: 720px; margin-bottom: 1.8rem; color: rgba(255, 255, 255, .82); font-size: clamp(1rem, 1.65vw, 1.24rem); line-height: 1.65; }

.calm-hero .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.calm-hero .button--light { border: 1px solid rgba(255,255,255,.36); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }

.calm-hero .hero-trust { margin: 1.35rem 0 0; color: rgba(255,255,255,.62); font-size: 0.83rem; font-weight: 600; letter-spacing: .06em; }

.hero-slider { display: block; background: #0a251b; }

.hero-slider__slides, .hero-slide { position: absolute; inset: 0; }

.hero-slider__slides { z-index: 0; }

.hero-slide { visibility: hidden; opacity: 0; transition: opacity .8s ease, visibility .8s step-end; }

.hero-slide.is-active { z-index: 1; visibility: visible; opacity: 1; transition: opacity .8s ease, visibility 0s step-start; }

.hero-slide .calm-hero__image { z-index: 0; transform: scale(1.055); transition: transform 7.5s ease-out; }

.hero-slide.is-active .calm-hero__image { transform: scale(1.015); }

.hero-slide .calm-hero__shade { z-index: 1; }

.hero-slide .calm-hero__content { min-height: 100svh; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,360px); align-items: center; gap: clamp(30px,6vw,100px); padding-bottom: 138px; }

.hero-slide__copy { max-width: 890px; transform: translateY(20px); opacity: 0; transition: transform .68s .14s var(--home-ease),opacity .58s .14s ease; }

.hero-slide.is-active .hero-slide__copy { transform: translateY(0); opacity: 1; }

.calm-hero .hero-slide h1, .calm-hero .hero-slide h2 { max-width: 940px; margin: 0 0 1.35rem; color: #fff; font-size: clamp(3.2rem,6.6vw,6.6rem); line-height: .94; letter-spacing: -.066em; }

.calm-hero .hero-slide h2 { font-size: clamp(3rem,5.8vw,5.8rem); }

.calm-hero .hero-slide h1 em { color: #ffd38c; }

.hero-insight { align-self: center; padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(7,31,22,.55); color: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.22); backdrop-filter: blur(16px); transform: translateX(28px); opacity: 0; transition: transform .7s .3s var(--home-ease),opacity .6s .3s ease; }

.hero-slide.is-active .hero-insight { transform: translateX(0); opacity: 1; }

.hero-insight > p { margin: 0 0 .6rem; color: #ffd38c; font-size: 0.76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.hero-insight > strong { display: block; margin-bottom: 1rem; font-family: var(--home-display); font-size: 1.45rem; line-height: 1.1; }

.hero-insight ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }

.hero-insight li { padding: .42rem .64rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 0.76rem; font-weight: 700; }

.hero-insight dl { display: grid; gap: 10px; margin: 1rem 0 0; }

.hero-insight dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); }

.hero-insight dt { color: rgba(255,255,255,.58); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; }

.hero-insight dd { margin: 0; font-size: 0.81rem; font-weight: 650; }

.hero-slider__controls { position: absolute; left: max(5vw,30px); bottom: 31px; z-index: 5; display: flex; align-items: center; gap: 10px; color: #fff; }

.hero-slider__controls > button { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(7,31,22,.42); color: #fff; font: inherit; cursor: pointer; backdrop-filter: blur(9px); transition: .22s ease; }

.hero-slider__controls > button:hover, .hero-slider__controls > button:focus-visible { border-color: #fff; background: rgba(255,255,255,.15); }

.hero-slider__dots { display: flex; align-items: center; gap: 6px; }

.hero-slider__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.42); cursor: pointer; transition: width .3s var(--home-ease),background .3s ease; }

.hero-slider__dots button.is-active { width: 30px; background: var(--brand-orange); }

.hero-slider__count { min-width: 52px; color: rgba(255,255,255,.62); font-size: 0.76rem; letter-spacing: .08em; }

.hero-slider__count b { color: #fff; font-size: 0.87rem; }

.hero-slider__controls .hero-slider__pause { min-width: auto; padding-inline: 13px; font-size: 0.76rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.hero-scroll { position: absolute; right: clamp(22px, 5vw, 76px); bottom: 34px; display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.66); font-size: 0.76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.hero-scroll span { width: 25px; height: 38px; position: relative; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; }

.hero-scroll span::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 99px; background: #fff; transform: translateX(-50%); animation: home-scroll 1.8s ease-in-out infinite; }

@keyframes home-scroll {

50% { transform: translate(-50%, 10px); opacity: .25; }
}

.section-intro { margin-bottom: clamp(42px, 6vw, 76px); }

.section-intro > p:not(.eyebrow), .section-intro > div > p { max-width: 650px; color: var(--text-secondary); font-size: 1.03rem; }

.section-intro--center { max-width: 900px; margin-inline: auto; text-align: center; }

.section-intro--center > p:not(.eyebrow) { margin-inline: auto; }

.section-intro--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 8vw, 100px); align-items: end; }

.section-intro--split h2 { max-width: 800px; margin-bottom: 0; }

.section-intro--light { max-width: 900px; color: #fff; }

.section-intro--light > p:not(.eyebrow) { color: rgba(255,255,255,.65); }

.handled-section { background: var(--surface); overflow: hidden; }

.handled-route { position: relative; max-width: 1140px; margin: 0 auto 60px; padding: 18px 0; }

.handled-route__map { position: absolute; inset: 12px 0 auto; width: 100%; height: 180px; overflow: visible; }

.handled-route__base, .handled-route__progress { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }

.handled-route__base { stroke: rgba(21, 59, 46, .12); }

.handled-route__progress { stroke: var(--brand-orange); stroke-dasharray: 1; stroke-dashoffset: 1; }

.handled-route ol { min-height: 220px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }

.handled-route li { display: grid; justify-items: center; align-content: center; text-align: center; opacity: .28; transform: translateY(18px); }

.handled-route li:nth-child(even) { transform: translateY(55px); }

.handled-route li span { position: relative; width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: .9rem; border: 1px solid rgba(21,59,46,.18); border-radius: 50%; background: var(--surface); color: var(--brand-orange); font-size: 0.92rem; font-weight: 800; box-shadow: 0 8px 25px rgba(21,59,46,.09); }

.handled-route li strong { font-family: var(--home-display); font-size: 1.15rem; font-weight: 800; }

.handled-route li small { max-width: 150px; margin-top: .3rem; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.4; }

.human-support { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; max-width: 850px; margin: 0 auto; padding: 20px 24px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--surface-muted); }

.human-support__mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary); color: #fff; font-family: var(--home-display); font-weight: 800; }

.human-support p { margin: .15rem 0 0; color: var(--text-secondary); font-size: 0.87rem; }

.only-job { min-height: 105svh; position: relative; display: grid; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }

.only-job > img, .only-job__shade { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

.only-job__shade { z-index: -1; background: linear-gradient(90deg, rgba(7,24,17,.88), rgba(7,24,17,.38)), linear-gradient(0deg, rgba(7,24,17,.42), transparent); }

.only-job__copy { padding-block: 130px; }

.only-job h2 { max-width: 1100px; margin: 0; font-size: clamp(3.25rem, 8.8vw, 8rem); line-height: .94; }

.only-job h2 > * { display: block; }

.only-job h2 span { color: rgba(255,255,255,.55); font-weight: 500; }

.only-job h2 strong { color: #fff; }

.only-job h2 em { color: #ffd38c; font-style: normal; }

.destinations-section { overflow: clip; background: var(--surface-muted); }

.destination-deck { max-width: 1120px; position: relative; margin-inline: auto; }

.destination-stack { position: relative; padding: 8px 0 14svh; }

.destination-stack__item { height: 78svh; min-height: 610px; position: sticky; top: calc(126px + var(--stack-offset)); z-index: calc(var(--stack-index) + 1); display: grid; place-items: start center; }

.home-page .destination-card { --stack-scale: 1; width: min(88vw, 940px); height: min(65svh, 610px); min-height: 500px; position: relative; overflow: hidden; border: 2px solid rgba(255,255,255,.7); border-radius: 38px; background: var(--brand-primary); box-shadow: 0 24px 60px rgba(21,59,46,.16); isolation: isolate; transform: scale(var(--stack-scale)); transform-origin: center top; transition: box-shadow .35s ease, border-color .35s ease; will-change: transform; }

.home-page .destination-card.is-current { border-color: rgba(255,255,255,.96); box-shadow: 0 34px 85px rgba(21,59,46,.24); }

.home-page .destination-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--home-ease); }

.home-page .destination-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,22,15,.94), rgba(6,22,15,.08) 68%), linear-gradient(90deg,rgba(6,22,15,.28),transparent 55%); pointer-events: none; }

.destination-card__top { position: absolute; left: 26px; right: 26px; top: 24px; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #fff; }

.destination-card__top > span:last-child { display: grid; justify-items: end; gap: 2px; }

.destination-card__top small { color: rgba(255,255,255,.7); font-size: 0.76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.destination-card__top strong { font-family: var(--home-display); font-size: 0.87rem; }

.destination-card__number { width: 57px; height: 57px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(11,39,29,.45); font-family: var(--home-display); font-size: 0.76rem; font-weight: 800; backdrop-filter: blur(8px); }

.home-page .destination-card__body { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px,4vw,48px); color: #fff; }

.home-page .destination-card small { color: rgba(255,255,255,.7); font-size: 0.76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.home-page .destination-card h3 { margin: .35rem 0 .45rem; color: #fff; font-size: clamp(2.4rem, 4.5vw, 4.4rem); }

.destination-card__body > p { max-width: 520px; margin: 0 0 1.15rem; color: rgba(255,255,255,.76); font-size: 0.95rem; }

.destination-card__actions { display: flex; align-items: center; gap: 18px; font-size: 0.83rem; font-weight: 700; opacity: .72; transition: opacity .25s ease; }

.destination-card__actions a, .destination-card__actions button { border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; }

.destination-card__actions button { color: #ffd38c; }

.home-page .destination-card:hover .destination-card__actions { opacity: 1; }

.home-page .destination-card:hover img { transform: scale(1.045); }

.home-page .destination-card a::before { display: none; }

.destination-deck__meta { width: max-content; min-height: 42px; position: sticky; top: 82px; z-index: 15; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 18px auto; padding: 7px 12px; border: 1px solid rgba(21,59,46,.1); border-radius: 999px; background: rgba(255,253,248,.88); color: var(--text-secondary); box-shadow: 0 8px 30px rgba(21,59,46,.08); font-size: 0.76rem; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(12px); }

.destination-drag-hint { min-width: 92px; text-align: center; transition: opacity .25s ease; }

.destination-drag-hint.is-used { opacity: .35; }

.destination-dots { display: flex; align-items: center; gap: 7px; }

.destination-dots button { width: 8px; height: 8px; border: 0; border-radius: 50%; padding: 0; background: rgba(21,59,46,.22); cursor: pointer; transition: width .3s var(--home-ease), border-radius .3s, background .3s; }

.destination-dots button[aria-current="true"] { width: 25px; border-radius: 99px; background: var(--brand-orange); }

.home-page .section-action { margin-top: 34px; text-align: center; }

.journeys-section { background: var(--brand-primary); }

.journey-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.journey-preview-card { overflow: hidden; border-radius: 26px; background: var(--surface); transition: transform .35s var(--home-ease); }

.journey-preview-card:hover { transform: translateY(-6px); }

.journey-preview-card__image { width: 100%; position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }

.journey-preview-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--home-ease); }

.journey-preview-card:hover .journey-preview-card__image img { transform: scale(1.035); }

.journey-preview-card__image span { position: absolute; left: 20px; top: 20px; padding: .45rem .7rem; border-radius: 999px; background: rgba(12,37,27,.82); color: #fff; font-size: 0.76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); }

.journey-preview-card__body { padding: 26px; }

.journey-preview-card h3 { margin-bottom: .7rem; color: var(--text-primary); font-size: clamp(1.7rem, 3vw, 2.55rem); }

.journey-preview-card p { color: var(--text-secondary); }

.journey-preview-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.15rem 0 1.5rem; padding: 0; list-style: none; }

.journey-preview-card li { padding: .42rem .65rem; border-radius: 999px; background: var(--surface-green); color: var(--brand-primary); font-size: 0.76rem; font-weight: 700; }

.journey-preview-card__actions { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border-soft); font-size: 0.83rem; font-weight: 700; }

.journey-preview-card__actions a:last-child { color: var(--brand-orange); }

.chaos-calm { background: var(--surface); }

.chaos-calm__stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 36px; align-items: stretch; max-width: 1120px; margin-inline: auto; }

.chaos-panel { min-height: 500px; position: relative; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 28px; background: #f4eee4; }

.chaos-panel__heading { position: absolute; left: 26px; right: 26px; top: 24px; z-index: 2; display: flex; align-items: center; gap: 12px; }

.chaos-panel__heading span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: 0.76rem; font-weight: 800; }

.chaos-panel__heading p { margin: 0; color: var(--brand-primary); font-family: var(--home-display); font-size: 1rem; font-weight: 800; }

.chaos-panel__caption { position: absolute; left: 28px; bottom: 24px; margin: 0; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; }

.chaos-items { position: absolute; inset: 80px 18px 55px; }

.chaos-item { max-width: 180px; position: absolute; left: var(--x); top: var(--y); padding: .75rem .9rem; border: 1px solid rgba(21,59,46,.13); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(21,59,46,.1); font-size: 0.81rem; font-weight: 700; line-height: 1.25; transform: rotate(var(--r)); }

.chaos-item[data-tone="warning"] { border-color: rgba(244,119,33,.3); color: #a8480a; }

.chaos-item[data-tone="active"]::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 5px rgba(39,138,69,.1); }

.calm-transition { display: grid; align-content: center; justify-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.76rem; text-transform: uppercase; }

.calm-transition i { font-style: normal; color: var(--brand-orange); font-size: 2rem; }

.calm-card { min-height: 500px; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 58px); border-radius: 28px; background: var(--brand-primary); color: #fff; box-shadow: var(--home-shadow); opacity: .45; transform: scale(.94); }

.calm-card > img { width: 180px; height: auto; margin-bottom: 3rem; padding: 8px; border-radius: 9px; background: #fff; filter: none !important; }

.calm-card > p { margin-bottom: .6rem; color: #f8c873; font-size: 0.76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.calm-card h3 { margin-bottom: 1.4rem; color: #fff; font-size: clamp(2.3rem, 4vw, 3.7rem); }

.calm-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 2rem; padding: 0; list-style: none; }

.calm-card li { padding: .4rem .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.72); font-size: 0.76rem; }

.calm-card .button { align-self: flex-start; }

.chaos-calm__persistent { margin: 28px 0 0; color: var(--brand-primary); font-family: var(--home-display); font-weight: 800; text-align: center; }

.trust-section { background: #102f25; color: #fff; }

.trust-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 150px); align-items: start; }

.trust-copy { position: sticky; top: 130px; }

.trust-copy h2 { max-width: 620px; }

.trust-copy > p:not(.eyebrow) { max-width: 520px; color: rgba(255,255,255,.65); }

.trust-copy .button { margin-top: 1.2rem; }

.trust-story { margin: 0; padding: 0; list-style: none; }

.trust-story li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 0 0 54px; }

.trust-story li:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 52px; bottom: 8px; width: 1px; background: rgba(255,255,255,.2); }

.trust-story span { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #f8c873; font-size: 0.76rem; font-weight: 800; }

.trust-story h3 { margin: 0 0 .55rem; color: #fff; font-size: clamp(1.55rem, 3vw, 2.35rem); }

.trust-story p { max-width: 530px; margin: 0; color: rgba(255,255,255,.62); }

.companion-popup { width: min(430px, calc(100vw - 32px)); position: fixed; right: 24px; bottom: 108px; z-index: var(--z-companion); display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid rgba(21,59,46,.12); border-top: 4px solid var(--brand-orange); border-radius: 22px; background: rgba(255,253,248,.985); box-shadow: 0 28px 75px rgba(12,42,30,.22); backdrop-filter: blur(18px); }

.companion-popup[hidden] { display: none; }

.companion-popup__close { width: 34px; height: 34px; position: absolute; right: 9px; top: 9px; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(21,59,46,.12); border-radius: 50%; background: rgba(255,255,255,.9); color: var(--brand-primary); font-size: 1.25rem; cursor: pointer; transition: transform .25s var(--home-ease), background .25s; }

.companion-popup__close:hover { background: #fff; transform: rotate(8deg) scale(1.06); }

.companion-popup__body { align-self: center; padding: 28px 28px 24px; }

.companion-popup__body .eyebrow { margin-bottom: .45rem; font-size: 0.76rem; }

.companion-popup__body h2 { margin: 0 0 .45rem; font-size: 1.65rem; letter-spacing: -.04em; }

.companion-popup__body > p:not(.eyebrow) { margin: 0; color: var(--text-secondary); font-size: 0.83rem; line-height: 1.5; }

.companion-popup__body .companion-popup__trust { margin-top: .8rem; color: var(--brand-primary); font-size: 0.76rem; font-weight: 750; letter-spacing: .035em; }

.companion-popup__trust span { padding-inline: .35rem; color: var(--brand-orange); }

.companion-popup__body > div { display: flex; gap: 7px; margin-top: 1rem; }

.companion-popup__body .button { min-height: 40px; padding: .58rem .78rem; font-size: 0.76rem; }

.home-page .whatsapp-float { right: 24px; bottom: 24px; z-index: var(--z-whatsapp); display: flex; align-items: center; gap: 10px; min-width: 210px; min-height: 58px; padding: 9px 16px 9px 9px; border-radius: 999px; background: #168b4c; color: #fff; box-shadow: 0 15px 35px rgba(18,111,61,.28); }

.home-page .whatsapp-float::before { content: ""; position: absolute; inset: -5px; z-index: -1; border: 1px solid rgba(22,139,76,.45); border-radius: inherit; opacity: 0; }

.home-page .whatsapp-float.is-visible::before { animation: whatsapp-pulse 6.5s ease-out infinite; }

@keyframes whatsapp-pulse {

0% { opacity: 0; transform: scale(.94); }

4% { opacity: .7; }

13% { opacity: 0; transform: scale(1.13); }

100% { opacity: 0; transform: scale(1.13); }
}

.whatsapp-float__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 1rem; }

.whatsapp-float__icon svg { width: 23px; height: 23px; }

.home-page .whatsapp-float > span:last-child { display: grid; text-align: left; }

.home-page .whatsapp-float strong { font-family: var(--home-display); font-size: 0.82rem; }

.home-page .whatsapp-float small { color: rgba(255,255,255,.72); font-size: 0.76rem; }

.home-page .whatsapp-float.is-opening { transform: translateY(-2px) scale(1.035); }

.whatsapp-preview { width: min(340px, calc(100vw - 32px)); position: fixed; right: 24px; bottom: 94px; z-index: var(--z-companion); padding: 15px 17px; border: 1px solid rgba(21,59,46,.1); border-radius: 17px; background: #fffdf8; box-shadow: 0 18px 45px rgba(21,59,46,.18); }

.whatsapp-preview[hidden] { display: none; }

.whatsapp-preview strong, .whatsapp-preview span { display: block; }

.whatsapp-preview strong { color: var(--brand-primary); font-family: var(--home-display); font-size: 0.85rem; }

.whatsapp-preview span { margin-top: 3px; color: var(--text-secondary); font-size: 0.76rem; line-height: 1.4; }

.final-cta { min-height: 88svh; position: relative; display: grid; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }

.final-cta > img, .final-cta__shade { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

.final-cta__shade { z-index: -1; background: linear-gradient(90deg, rgba(5,23,16,.9), rgba(5,23,16,.42) 65%, rgba(5,23,16,.14)); }

.final-cta__content { padding-block: 110px; }

.final-cta h2 { max-width: 950px; margin-bottom: 1.2rem; font-size: clamp(3rem, 7vw, 7rem); }

.final-cta__content > p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: 1.1rem; }

.final-cta__content > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; }

.home-page .home-footer { background: #0b251c; }

.home-page .home-footer .footer-brand img { width: 200px; height: auto; padding: 8px; border-radius: 9px; background: #fff; filter: none !important; }

.home-page .home-footer address { max-width: 260px; margin-top: .6rem; color: rgba(255,255,255,.5); font-style: normal; font-size: 0.78rem; line-height: 1.6; }

.home-page .calm-planner { width: min(96vw, 1080px); max-height: min(94svh, 820px); overflow: hidden; border-radius: 30px; }

.home-page .calm-planner .planner-layout { height: min(90svh, 780px); min-height: 620px; grid-template-columns: .4fr .6fr; }

.home-page .calm-planner .planner-guide { position: relative; overflow: hidden; justify-content: flex-end; padding: 26px 24px 0; background: linear-gradient(160deg, #e8f0e8, #cddfcf); color: var(--brand-primary); }

.planner-guide__logo { width: 168px !important; height: auto !important; max-height: none; position: absolute; left: 24px; top: 24px; margin: 0 !important; padding: 0; border: 0; border-radius: 9px; background: #fff; object-fit: contain; filter: none !important; box-shadow: 0 8px 24px rgba(21,59,46,.08); }

.home-page .calm-planner .planner-guide__character { width: auto; height: 72%; max-width: none; margin-bottom: 46px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 25px rgba(21,59,46,.14)); transform-origin: 50% 100%; animation: companion-idle 5s ease-in-out infinite; }

@keyframes companion-idle {

0%,100% { transform: translateY(0) rotate(0); }

50% { transform: translateY(-4px) rotate(.35deg); }
}

.home-page .calm-planner .planner-guide p { position: absolute; left: 24px; right: 24px; top: 112px; bottom: auto; z-index: 2; min-height: 64px; display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid rgba(21,59,46,.1); border-radius: 16px; background: rgba(255,253,248,.96); color: var(--brand-primary); font-family: var(--home-body); font-size: 0.89rem; line-height: 1.45; text-align: left; box-shadow: 0 14px 34px rgba(21,59,46,.13); transform-origin: 20% 0; }

.home-page .calm-planner .planner-guide p::after { content: ""; width: 14px; height: 14px; position: absolute; left: 31px; bottom: -8px; border-right: 1px solid rgba(21,59,46,.1); border-bottom: 1px solid rgba(21,59,46,.1); background: rgba(255,253,248,.96); transform: rotate(45deg); }

.planner-guide__message.is-updating { animation: planner-message-in .46s var(--home-ease); }

.planner-guide__message-dot { width: 8px; height: 8px; position: relative; z-index: 1; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 0 rgba(241,111,29,.32); animation: planner-message-pulse 2.4s ease-out infinite; }

@keyframes planner-message-in {

0% { opacity: 0; transform: translateY(-9px) scale(.97); }

65% { transform: translateY(2px) scale(1.005); }

100% { opacity: 1; transform: none; }
}

@keyframes planner-message-pulse {

0%,100% { box-shadow: 0 0 0 0 rgba(241,111,29,0); }

12% { box-shadow: 0 0 0 0 rgba(241,111,29,.32); }

48% { box-shadow: 0 0 0 7px rgba(241,111,29,0); }
}

.home-page .calm-planner .planner-panel { overflow-y: auto; overscroll-behavior: contain; padding: clamp(30px, 5vw, 62px); scrollbar-gutter: stable; }

.home-page .calm-planner > .dialog-close { width: 40px; height: 40px; right: 13px; top: 13px; z-index: var(--z-tooltip); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(21,59,46,.94); color: #fff; opacity: 1; box-shadow: 0 8px 24px rgba(21,59,46,.2); transition: transform .25s var(--home-ease), background .25s; }

.home-page .calm-planner > .dialog-close:hover { background: var(--brand-orange); transform: rotate(8deg) scale(1.06); }

.home-page .calm-planner .planner-panel > h2 { font-family: var(--home-display); font-size: clamp(2rem, 4vw, 3.25rem); }

.home-page .calm-planner .planner-step legend { font-family: var(--home-display); font-weight: 700; }

.home-page .calm-planner .planner-step input:not([type="radio"]):not([type="checkbox"]), .home-page .calm-planner .planner-step select { width: 100%; min-height: 52px; border: 1px solid var(--border-soft); border-radius: 12px; padding: .75rem .9rem; background: #fff; }

.destination-combobox { display: grid; gap: .5rem; margin-bottom: .9rem; font-size: 0.83rem; font-weight: 700; }

.destination-combobox__control { min-height: 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border: 1px solid rgba(21,59,46,.18); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(21,59,46,.04); transition: border-color .22s, box-shadow .22s, transform .22s; }

.destination-combobox__control:hover { border-color: rgba(21,59,46,.34); box-shadow: 0 8px 22px rgba(21,59,46,.07); }

.destination-combobox__control:focus-within, .destination-combobox.is-open .destination-combobox__control { border-color: #dfa137; box-shadow: 0 0 0 4px rgba(243,182,63,.2), 0 10px 28px rgba(21,59,46,.08); }

.destination-combobox__pin { width: 43px; display: grid; place-items: center; align-self: stretch; color: var(--brand-orange); }

.destination-combobox__pin svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.home-page .calm-planner .planner-step .destination-combobox__control input { min-width: 0; min-height: 52px; border: 0; padding: .75rem .7rem; outline: 0; background: transparent; box-shadow: none; }

.destination-combobox__control button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-left: 1px solid rgba(21,59,46,.08); background: transparent; color: var(--brand-primary); cursor: pointer; transition: background .2s, color .2s; }

.destination-combobox__control button:hover { background: #f5eee1; color: var(--brand-orange); }

.destination-combobox__control button:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -4px; }

.destination-combobox__control button svg, .journey-select > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .25s var(--home-ease); }

.destination-combobox.is-open .destination-combobox__control button svg { transform: rotate(180deg); }

.destination-combobox__hint { margin: -.1rem 0 0; color: var(--text-secondary); font-size: 0.76rem; font-weight: 500; line-height: 1.4; }

.destination-combobox.is-disabled { opacity: .46; }

.destination-combobox__menu { width: 320px; max-height: 320px; position: fixed; inset: auto; z-index: var(--z-combobox); overflow-y: auto; margin: 0; padding: 7px; border: 1px solid rgba(21,59,46,.13); border-radius: 17px; background: rgba(255,253,248,.99); color: var(--text-primary); box-shadow: 0 24px 65px rgba(21,59,46,.2); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(21,59,46,.26) transparent; transform-origin: top center; }

.destination-combobox__menu:popover-open { animation: combobox-menu-in .2s var(--home-ease); }

.destination-combobox__menu:not(:popover-open) { display: none; }

@keyframes combobox-menu-in {

from { opacity: 0; transform: translateY(-6px) scale(.985); }

to { opacity: 1; transform: none; }
}

.combobox-menu__label { margin: 4px 9px 6px; color: var(--text-secondary); font-size: 0.76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.combobox-option { width: 100%; min-height: 56px; display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 8px; border: 0; border-radius: 11px; padding: 8px 10px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background .16s, transform .16s; }

.combobox-option:hover, .combobox-option.is-active { background: #f5eee1; transform: translateX(2px); }

.combobox-option[aria-selected="true"] { background: #e8f1e8; }

.combobox-option__pin { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(241,111,29,.1); color: var(--brand-orange); font-size: 0.85rem; }

.combobox-option--custom .combobox-option__pin { background: rgba(21,59,46,.09); color: var(--brand-primary); }

.combobox-option strong, .combobox-option small { display: block; }

.combobox-option strong { font-family: var(--home-display); font-size: 0.85rem; }

.combobox-option small { margin-top: 2px; color: var(--text-secondary); font-size: 0.76rem; }

.combobox-option mark { border-radius: 3px; background: #ffe1a9; color: inherit; }

.combobox-option__check { color: var(--brand-green); font-weight: 900; }

.home-page .calm-planner .planner-step > label:not(.choice-row) { display: grid; gap: .45rem; margin-bottom: 1rem; font-size: 0.83rem; font-weight: 700; }

.journey-select { position: relative; display: block; }

.home-page .calm-planner .planner-step .journey-select select { min-height: 56px; appearance: none; border-color: rgba(21,59,46,.18); border-radius: 15px; padding-right: 48px; color: var(--text-primary); box-shadow: 0 5px 18px rgba(21,59,46,.04); cursor: pointer; transition: border-color .22s, box-shadow .22s; }

.home-page .calm-planner .planner-step .journey-select select:hover { border-color: rgba(21,59,46,.34); }

.home-page .calm-planner .planner-step .journey-select select:focus { border-color: #dfa137; outline: 0; box-shadow: 0 0 0 4px rgba(243,182,63,.2), 0 10px 28px rgba(21,59,46,.08); }

.journey-select > svg { position: absolute; right: 15px; top: 50%; pointer-events: none; transform: translateY(-50%); }

.journey-select:focus-within > svg { color: var(--brand-orange); transform: translateY(-50%) rotate(180deg); }

.planner-divider { display: flex; align-items: center; gap: 10px; margin: .8rem 0; color: var(--text-secondary); font-size: 0.76rem; }

.planner-divider::before, .planner-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-soft); }

.home-page .calm-planner .choice-grid span { font-family: var(--home-display); }

.planner-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }

.planner-summary dl > div { padding: 15px; border-radius: 12px; background: var(--surface-muted); }

.planner-summary dt { color: var(--text-secondary); font-size: 0.76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.planner-summary dd { margin: .25rem 0 0; color: var(--brand-primary); font-family: var(--home-display); font-weight: 750; }

.planner-summary > p { margin-top: 1.4rem; color: var(--brand-primary); font-weight: 700; }

.home-page .planner-success .button { width: 100%; margin-top: .7rem; }

.home-page .planner-progress span { background: var(--brand-orange); }

.reveal-item { will-change: transform, opacity; }

@media (max-width: 1040px) {

.home-page .home-header .desktop-nav { display: none; }

.home-page .home-header .menu-toggle { display: grid; }

.section-intro--split, .trust-layout { grid-template-columns: 1fr; }

.trust-copy { position: relative; top: auto; }

.home-page .destination-card, .home-page .destination-card:nth-child(1), .home-page .destination-card:nth-child(5) { grid-column: span 6; }

.handled-route__map { display: none; }

.handled-route ol { min-height: 0; grid-template-columns: repeat(3, 1fr); gap: 28px 14px; }

.handled-route li, .handled-route li:nth-child(even) { transform: translateY(18px); }
}

@media (max-width: 760px) {

.home-page { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

.home-page .section { padding-block: 82px; }

.home-page .home-header, .home-page .home-header.is-scrolled { height: 68px; }

.home-page .home-header .brand { width: 150px; }

.home-page .home-header .nav-actions > .button { display: none; }

.calm-hero { min-height: 100svh; }

.calm-hero__image { object-position: 64% center; }

.calm-hero__shade { background: linear-gradient(0deg, rgba(7,25,18,.94) 5%, rgba(7,25,18,.58) 70%, rgba(7,25,18,.22)); }

.calm-hero__content { padding-top: 120px; padding-bottom: 105px; }

.hero-slide .calm-hero__content { min-height: 100svh; grid-template-columns: 1fr; align-content: end; padding-top: 108px; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }

.hero-slide__copy { max-width: 35rem; }

.calm-hero .hero-slide h1, .calm-hero .hero-slide h2 { font-size: clamp(2.75rem,13vw,4.25rem); }

.hero-insight { display: none; }

.hero-slider__controls { left: 16px; top: 84px; bottom: auto; gap: 7px; }

.hero-slider__controls > button { min-width: 34px; height: 34px; }

.hero-slider__controls .hero-slider__pause { padding-inline: 10px; }

.hero-slider__count { min-width: 46px; }

.calm-hero h1 { font-size: clamp(3rem, 14vw, 4.75rem); }

.calm-hero h1 em { display: block; }

.calm-hero .hero-lead { max-width: 34rem; font-size: 1.04rem; }

.calm-hero .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }

.calm-hero .hero-actions .button { padding-inline: .65rem; }

.hero-scroll { display: none; }

.section-intro--split { gap: 22px; }

.handled-route ol { grid-template-columns: 1fr; gap: 0; align-items: start; }

.handled-route li, .handled-route li:nth-child(even) { position: relative; grid-template-columns: 48px 1fr; justify-items: start; text-align: left; transform: none; padding-bottom: 25px; }

.handled-route li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: 2px; width: 1px; background: rgba(21,59,46,.2); }

.handled-route li span { grid-row: span 2; margin: 0; }

.handled-route li strong, .handled-route li small { margin-left: 14px; }

.human-support { grid-template-columns: auto 1fr; }

.human-support .text-link { grid-column: 2; justify-self: start; }

.only-job { min-height: 92svh; }

.only-job__copy { padding-block: 90px; }

.only-job h2 { font-size: clamp(3rem, 15vw, 5rem); }

.destination-deck { width: 100%; margin-left: 0; }

.destination-deck__meta { top: 76px; gap: 10px; margin: 0 auto 16px; padding: 6px 10px; }

.destination-stack { padding-top: 4px; padding-bottom: 10svh; }

.destination-stack__item { height: 68svh; min-height: 560px; top: calc(112px + var(--stack-offset)); }

.home-page .destination-card, .home-page .destination-card:nth-child(1), .home-page .destination-card:nth-child(5) { width: 100%; height: min(58svh, 480px); min-height: 420px; position: relative; left: auto; top: auto; grid-column: auto; opacity: 1; pointer-events: auto; border-radius: 28px; }

.home-page .destination-card h3 { font-size: 2.65rem; }

.home-page .destination-card__body { padding: 22px; }

.destination-card__top { left: 18px; right: 18px; top: 18px; }

.destination-card__number { width: 45px; height: 45px; }

.destination-card__actions { opacity: 1; }

.destination-drag-hint { min-width: 0; }

.journey-preview-grid { grid-template-columns: 1fr; }

.chaos-calm__stage { grid-template-columns: 1fr; }

.calm-transition { grid-auto-flow: column; justify-content: center; }

.calm-transition i { transform: rotate(90deg); }

.chaos-panel, .calm-card { min-height: 430px; }

.chaos-items { inset: 78px 12px 52px; }

.chaos-item { max-width: 145px; font-size: 0.76rem; }

.trust-layout { gap: 55px; }

.companion-popup { width: auto; left: 10px; right: 10px; bottom: calc(66px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; border-radius: 21px; }

.companion-popup__body { padding: 22px 20px 18px; }

.companion-popup__body .eyebrow { display: none; }

.companion-popup__body h2 { padding-right: 22px; font-size: 1.35rem; }

.companion-popup__body > p:not(.eyebrow) { font-size: 0.76rem; }

.companion-popup__body .button { min-height: 37px; padding: .48rem .65rem; font-size: 0.76rem; }

.home-page .whatsapp-float { display: none; }

.whatsapp-preview { left: 10px; right: 10px; bottom: calc(66px + env(safe-area-inset-bottom)); width: auto; }

.final-cta { min-height: 740px; }

.final-cta__shade { background: linear-gradient(0deg, rgba(5,23,16,.95), rgba(5,23,16,.28)); }

.home-page .calm-planner { width: 100%; max-width: none; max-height: 96svh; overflow-y: auto; border-radius: 24px 24px 0 0; }

.home-page .calm-planner .planner-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }

.home-page .calm-planner .planner-guide { min-height: 178px; display: block; padding: 16px 52px 12px 18px; }

.planner-guide__logo { left: 18px; top: 14px; width: 138px !important; max-height: none; padding: 0; }

.home-page .calm-planner .planner-guide__character { position: absolute; right: 4px; bottom: -14px; height: 168px; }

.home-page .calm-planner .planner-guide p { left: 18px; right: 112px; top: 75px; bottom: auto; min-height: 72px; padding: 10px 11px; border-radius: 13px; font-size: 0.76rem; }

.home-page .calm-planner .planner-guide p::after { left: auto; right: 21px; }

.home-page .calm-planner .planner-panel { overflow: visible; padding: 22px 18px calc(28px + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }

.home-page .calm-planner > .dialog-close { width: 38px; height: 38px; right: 9px; top: 9px; }

.home-page .calm-planner .planner-panel > h2 { font-size: 1.85rem; }

.planner-summary dl { grid-template-columns: 1fr 1fr; }

.home-page .mobile-actions { grid-template-columns: .6fr 1.5fr .9fr; }

.home-page .mobile-actions button { white-space: nowrap; }
}

@media (max-width: 390px) {

.calm-hero .hero-actions { grid-template-columns: 1fr; }

.hero-slide .calm-hero__content { padding-bottom: calc(126px + env(safe-area-inset-bottom)); }

.calm-hero .hero-slide h1, .calm-hero .hero-slide h2 { margin-bottom: .8rem; font-size: clamp(2.45rem,12.5vw,3.4rem); }

.calm-hero .hero-slide .hero-lead { margin-bottom: 1rem; font-size: 0.91rem; line-height: 1.45; }

.calm-hero .hero-slide .hero-actions { grid-template-columns: 1fr 1fr; }

.calm-hero .hero-slide .hero-actions .button { min-height: 42px; padding-inline: .45rem; font-size: 0.76rem; }

.calm-hero .hero-slide .hero-trust { display: none; }

.hero-slider__controls .hero-slider__pause { width: 34px; overflow: hidden; color: transparent; }

.hero-slider__controls .hero-slider__pause::before { content: ""; width: 9px; height: 12px; background: linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 9px); }

.hero-slider__controls .hero-slider__pause[aria-pressed="true"]::before { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; background: none; }

.home-page .destination-card { width: 100%; height: 430px; }

.companion-popup__body > div { gap: 5px; }

.companion-popup__body .button { padding-inline: .52rem; }

.planner-summary dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {

.home-page *, .home-page *::before, .home-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.calm-hero__image, .home-page .destination-card img, .journey-preview-card__image img { transform: none !important; }

.hero-slide, .hero-slide__copy, .hero-insight { transition: none !important; }

.handled-route__progress { stroke-dashoffset: 0; }

.handled-route li, .handled-route li:nth-child(even), .calm-card, .reveal-item { opacity: 1 !important; transform: none !important; }

.home-page .whatsapp-float::before { display: none; }

.home-page .calm-planner .planner-guide__character, .planner-guide__message, .planner-guide__message-dot { animation: none !important; }

.destination-deck__meta { position: relative; top: auto; }

.destination-stack { display: grid; gap: 18px; padding-bottom: 0; }

.destination-stack__item { height: auto; min-height: 0; position: relative; top: auto; }

.home-page .destination-card { transform: none !important; }
}

/* =========================================================
   Destination Index — creative region → places explorer
   ========================================================= */

/* =========================================================
   Stronger eloqwnt shift — header · hero card · footer
   (appended overrides; loads after base rules)
   ========================================================= */

/* --- restrained buttons / eyebrow --- */
.home-page .button--primary { box-shadow: 0 10px 24px -18px rgba(244, 119, 33, .75); }

.home-page .button { letter-spacing: .01em; }

/* --- HEADER: flat, minimal, hairline on scroll --- */
.home-page .site-header.is-scrolled { background: rgba(255, 253, 248, .85); box-shadow: none; border-bottom: 1px solid var(--border-soft); }

.home-page .nav-wrap { gap: 2rem; }

.home-page .desktop-nav { gap: clamp(.9rem, 1.9vw, 1.7rem); font-weight: 600; }

.home-page .desktop-nav a { font-size: 0.89rem; letter-spacing: .015em; opacity: .92; padding-block: 14px; }

.home-page .desktop-nav a::after { height: 1.5px; bottom: 8px; }

.home-page .nav-actions .button--primary { min-height: 46px; padding: .6rem 1.4rem; box-shadow: none; font-size: 0.89rem; }

.home-page .nav-actions .button--primary:hover { transform: translateY(-1px); }

/* --- HERO CARD: crisp light panel over the dark hero --- */
.hero-insight { padding: 26px 24px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; background: rgba(255, 253, 248, .93); color: var(--text-primary); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .6); backdrop-filter: blur(12px) saturate(1.1); }

.hero-insight > p { color: var(--brand-orange); }

.hero-insight > strong { color: var(--text-primary); font-size: 1.5rem; letter-spacing: -.02em; }

.hero-insight li { border: 1px solid var(--border-soft); background: rgba(23, 35, 29, .05); color: var(--text-primary); }

.hero-insight dl div { border-top: 1px solid var(--border-soft); }

.hero-insight dt { color: var(--text-secondary); }

.hero-insight dd { color: var(--text-primary); }

/* soften the warm accent in headline for a more restrained hero */
.calm-hero .hero-slide h1 em, .calm-hero h1 em { color: #f4ede0; font-weight: 600; }

/* --- FOOTER: flat near-black + giant ghost wordmark --- */
.home-page .home-footer { position: relative; overflow: hidden; background: #0b0e0c; }

.home-page .home-footer .footer-brand img { width: 168px; padding: 0; border-radius: 0; background: transparent; filter: brightness(0) invert(1) !important; opacity: .95; }

.home-page .home-footer .footer-brand p { color: rgba(255, 255, 255, .5); }

.home-page .home-footer .footer-grid { gap: clamp(2rem, 5vw, 3.5rem); }

.home-page .home-footer .footer-grid h2 { color: rgba(255, 255, 255, .42); }

.home-page .home-footer .footer-grid a:hover { color: var(--brand-orange); }

.home-page .home-footer .footer-bottom { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }

.footer-wordmark { margin: clamp(34px, 5vw, 68px) 0 -.12em; font-family: var(--home-display); font-weight: 800; font-size: clamp(3.4rem, 22vw, 20rem); line-height: .8; letter-spacing: -.045em; text-align: center; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .14); white-space: nowrap; user-select: none; pointer-events: none; }

@media (max-width: 620px) {

.footer-wordmark { -webkit-text-stroke-width: 1px; }
}

/* keep footer column labels small — the wordmark is the only big-type moment */
.home-page .home-footer .footer-grid h2 { font-size: 0.76rem; line-height: 1.3; letter-spacing: .14em; }

/* =========================================================
   Refinement pass — hero declutter, smaller tiles, less green,
   remove chat advert + redundant message screen
   ========================================================= */

/* (1) HERO — remove left/right (and pause/count) controls, keep dots centered */
.hero-slider__controls [data-hero-previous],
.hero-slider__controls [data-hero-next],
.hero-slider__controls .hero-slider__pause,
.hero-slider__controls .hero-slider__count { display: none !important; }

.hero-slider__controls { left: 50%; right: auto; transform: translateX(-50%); bottom: 26px; gap: 0; }

.hero-slider__dots button.is-active { background: var(--brand-orange); }

/* (2) TILES / TYPE — tighter, more production-ready scale */
.home-page h2 { font-size: clamp(1.85rem, 3.6vw, 3.35rem); }

.home-page .section { padding-block: clamp(60px, 7.5vw, 112px); }

.calm-hero h1,
.calm-hero .hero-slide h1 { font-size: clamp(2.7rem, 5.3vw, 4.9rem); letter-spacing: -.05em; }

.calm-hero .hero-slide h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }

.calm-hero .hero-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); }

.final-cta h2 { font-size: clamp(2.3rem, 4.8vw, 4.3rem); }

.hero-insight > strong { font-size: 1.32rem; }

.section-intro { margin-bottom: clamp(34px, 4.5vw, 60px); }

/* (3) remove the redundant full-screen static message slab */
.only-job { display: none !important; }

/* (4) Keep the floating WhatsApp affordance compact. */
.home-page .whatsapp-float { min-width: 0; width: 56px; height: 56px; padding: 0; gap: 0; justify-content: center; }

.home-page .whatsapp-float > span:not(.whatsapp-float__icon) { display: none; }

.home-page .whatsapp-float .whatsapp-float__icon { margin: 0; }

/* (5) LESS GREEN — neutralise the dark section to a warm charcoal */
.home-page .trust-section { background: #1b1c1a; }

/* =========================================================
   Mid-page refinement — journeys · chaos-calm · handled
   (less green, tighter tiles, cleaner cards)
   ========================================================= */

/* JOURNEYS: green band -> light; flip intro text; give cards definition */
.home-page .journeys-section { background: var(--surface-muted); }

.home-page .journeys-section .section-intro { color: var(--text-primary); }

.home-page .journeys-section .section-intro > p:not(.eyebrow) { color: var(--text-secondary); }

.home-page .journeys-section .section-intro .eyebrow { color: var(--brand-orange); }

.home-page .journeys-section .journey-preview-card { border: 1px solid var(--border-soft); box-shadow: 0 20px 46px -30px rgba(21, 59, 46, .28); background: var(--surface); }

.journey-preview-card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.home-page .journey-preview-card li { background: rgba(21, 59, 46, .06); color: var(--text-secondary); }

/* CHAOS → CALM: recolor the green solution card to warm charcoal + clean logo */
.home-page .chaos-calm .calm-card { background: #1b1c1a; }

.home-page .chaos-calm .calm-card > img { width: 148px; padding: 0; border-radius: 0; background: transparent; filter: brightness(0) invert(1) !important; }

.home-page .chaos-calm .calm-card > p { color: var(--brand-orange); }

/* HANDLED: neutralise the small green accent mark */
.home-page .handled-section .human-support__mark { background: #1b1c1a; }

/* =========================================================
   Cinematic video hero (MotionSites-style, adapted to vanilla)
   ========================================================= */
.liquid-glass { background: rgba(255,255,255,.01); background-blend-mode: luminosity; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.12); position: relative; overflow: hidden; }

.cine-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #000; color: #fff; isolation: isolate; }

.cine-hero__video { position: absolute; inset: 0; z-index: 0; transform: scale(1.08); transform-origin: center; will-change: transform; }

.cine-hero__media { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }

.cine-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 38%, transparent 42%, rgba(0,0,0,.34)),
              linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,.04) 60%, rgba(0,0,0,.66) 100%); }

.cine-hero .hero-scroll { display: none; }

.cine-hero__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  gap: clamp(20px, 4vh, 40px); padding-block: clamp(96px, 15vh, 150px) clamp(38px, 6.5vh, 60px); padding-inline: var(--gutter); text-align: center; }

.cine-hero__headline { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* full width so wrapping tracks the viewport, not a shrink-to-fit box */
.cine-hero__headline h1 { width: 100%; }

.cine-hero__headline h1 { margin: 0; font-family: var(--home-body); font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.1; letter-spacing: -.02em; }

.cine-hero__headline h1 span { display: block; }

.cine-hero__headline h1 .dim { color: rgba(255,255,255,.55); }

.cine-hero__bottom { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 20px); }

.cine-hero__lead { max-width: 620px; margin: 0; font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.6; color: #fff; }

.cine-hero__lead .dim { color: rgba(255,255,255,.55); }

.cine-hero__cta { border: 0; cursor: pointer; background: #fff; color: #000; font-family: var(--home-display); font-weight: 500; font-size: clamp(.95rem, 1.3vw, 1rem); border-radius: 999px; padding: 14px 32px; transition: transform .25s var(--home-ease), box-shadow .25s ease; }

a.cine-hero__cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cine-hero__cta:hover { transform: scale(1.03); box-shadow: 0 0 32px 4px rgba(255,255,255,.2); }

.cine-hero__cta:active { transform: scale(.97); }

.cine-hero__secure { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: rgba(255,255,255,.68); font-size: 0.76rem; font-weight: 500; letter-spacing: .14em; }

[data-cine-fade] { opacity: 0; transform: translateY(24px); animation: cineFade 1s var(--home-ease) forwards; }

[data-cine-fade][data-cine-delay] { animation-delay: .3s; }

@keyframes cineFade {

to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

[data-cine-fade] { animation: none; opacity: 1; transform: none; }

.cine-hero__video { transform: scale(1.04); }
}

/* HEADER — transparent glass over the video, solid on scroll */
.home-page .home-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; box-shadow: none; color: #fff; }

.home-page .home-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1) !important; }

.home-page .home-header:not(.is-scrolled) .menu-toggle span { background: #fff; }

.home-page .home-header:not(.is-scrolled) .desktop-nav { padding: 7px 6px; border-radius: 999px; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); box-shadow: inset 0 1px 1px rgba(255,255,255,.16); }

.home-page .home-header:not(.is-scrolled) .desktop-nav a { color: rgba(255,255,255,.9); padding: 8px 10px; border-radius: 999px; font-size: 0.76rem; letter-spacing: .05em; text-transform: uppercase; }

.home-page .home-header:not(.is-scrolled) .desktop-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }

.home-page .home-header:not(.is-scrolled) .desktop-nav a::after { display: none; }

/* =========================================================
   Destinations — cursor image-reveal (overrides split layout)
   ========================================================= */

/* hero headline legibility over bright video frames */
.cine-hero__headline h1 { text-shadow: 0 2px 34px rgba(0,0,0,.42); }

.cine-hero__lead { text-shadow: 0 1px 20px rgba(0,0,0,.5); }

.cine-hero__secure { text-shadow: 0 1px 14px rgba(0,0,0,.5); }

/* =========================================================
   Logo colour standards — coloured variants, no white silhouette
   ========================================================= */
.home-page .home-header .brand { display: inline-flex; align-items: center; }

.home-page .home-header .brand img { filter: none !important; }

.home-page .home-header .brand__on-dark { display: none; }

.home-page .home-header:not(.is-scrolled) .brand__on-dark { display: block; }

.home-page .home-header:not(.is-scrolled) .brand__on-light { display: none; }

.home-page .home-footer .footer-brand img { filter: none !important; }

/* =========================================================
   Journeys — expanding image accordion (desktop) / stacked (mobile)
   ========================================================= */
.journeys-section .section-intro h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }

.journey-slider-meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 22px; margin: -8px 0 18px; color: var(--text-secondary); }

.journey-slider-meta__copy { display: flex; align-items: center; gap: 12px; font-size: 0.76rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.journey-slider-meta__copy strong { color: var(--brand-primary); font-variant-numeric: tabular-nums; }

.journey-slider-meta__controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.journey-slider-dots { display: flex; align-items: center; gap: 7px; }

.journey-slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(21,59,46,.2); cursor: pointer; transition: width .35s var(--home-ease), background .25s ease; }

.journey-slider-dots button[aria-pressed="true"] { width: 26px; background: var(--brand-orange); }

.journey-slider-progress { grid-column: 1 / -1; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(21,59,46,.13); }

.journey-slider-progress i { width: 100%; height: 100%; display: block; background: linear-gradient(90deg,var(--brand-orange),#ffc873); transform: scaleX(0); transform-origin: left; }

.journeys-section.is-auto-playing .journey-slider-progress i { animation: journeySliderProgress 6s linear forwards; }

@keyframes journeySliderProgress {

to { transform: scaleX(1); }
}

.journey-accordion { display: flex; gap: 12px; height: clamp(380px, 42vw, 470px); }

.jrn-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background-color: #0e241a; transition: flex-grow .55s var(--home-ease); }

.jrn-panel__media { position: absolute; inset: 0; margin: 0; }

.jrn-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--home-ease); }

.jrn-panel:hover .jrn-panel__media img, .jrn-panel:focus-within .jrn-panel__media img { transform: scale(1.035); }

.jrn-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,22,15,.92), rgba(6,22,15,.1) 58%, rgba(6,22,15,.4)); transition: opacity .4s; }

.jrn-panel:hover, .jrn-panel:focus-within, .jrn-panel.is-active { flex-grow: 3.4; outline: none; }

.jrn-panel__cat { position: absolute; top: 16px; left: 16px; z-index: 3; padding: .4rem .7rem; border-radius: 999px; background: rgba(6,22,15,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 0.76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.jrn-panel__inner { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 3; color: #fff; }

.jrn-panel__inner h3 { margin: 0; color: #fff; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.12; }

.jrn-panel__inner p { margin: .5rem 0 0; max-width: 42ch; color: rgba(255,255,255,.82); font-size: 0.93rem; opacity: 0; transform: translateY(8px); transition: opacity .4s .05s, transform .4s .05s; }

.jrn-panel__actions { display: flex; align-items: center; gap: 16px; margin-top: 1rem; font-size: 0.85rem; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity .4s .1s, transform .4s .1s; }

.jrn-panel__actions a { color: #fff; }

.jrn-panel__actions button { border: 0; background: transparent; color: #ffd38c; font-weight: 700; cursor: pointer; }

.jrn-panel:hover .jrn-panel__inner p, .jrn-panel:focus-within .jrn-panel__inner p, .jrn-panel.is-active .jrn-panel__inner p,
.jrn-panel:hover .jrn-panel__actions, .jrn-panel:focus-within .jrn-panel__actions, .jrn-panel.is-active .jrn-panel__actions { opacity: 1; transform: none; }

/* Collapsed desktop panels are too narrow for the description and actions.
   Hidden only by opacity they still took up height, which pushed the title
   up into the category pill; fold them away until the panel opens. */
@media (min-width: 761px) {
  .jrn-panel:not(:hover):not(:focus-within):not(.is-active) .jrn-panel__inner p,
  .jrn-panel:not(:hover):not(:focus-within):not(.is-active) .jrn-panel__actions { display: none; }
}

@media (max-width: 760px) {

.journey-accordion { flex-direction: column; height: auto; gap: 14px; }

.jrn-panel { flex: none; height: 240px; border-radius: 20px; }

.jrn-panel__inner p, .jrn-panel__actions { opacity: 1; transform: none; }

.jrn-panel__inner p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.journey-slider-meta { margin-top: 0; }
}

/* =========================================================
   "Planning everything yourself?" — playful interaction
   ========================================================= */
.planit { position: relative; max-width: 1000px; margin: 0 auto; }

.planit__board { position: relative; height: clamp(300px, 42vw, 420px); border: 1.5px dashed rgba(21,59,46,.2); border-radius: 24px; background: repeating-linear-gradient(45deg,#faf6ee,#faf6ee 12px,#f6f0e4 12px,#f6f0e4 24px); overflow: hidden; }

.planit__hint { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; color: var(--text-secondary); font-size: 0.87rem; font-weight: 650; pointer-events: none; transition: opacity .3s; }

.planit__chip { position: absolute; padding: .58rem .82rem; border: 1px solid rgba(21,59,46,.14); border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(21,59,46,.14); font-size: 0.87rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; transform: rotate(var(--r,0deg)) scale(0); animation: chipPop .38s var(--home-ease) forwards; will-change: transform; }

.planit__chip[data-warn="1"] { border-color: rgba(244,119,33,.4); color: #a8480a; }

@keyframes chipPop {

to { transform: rotate(var(--r,0deg)) scale(1); }
}

@keyframes chipWobble {

0%,100% { transform: rotate(var(--r,0deg)); }

50% { transform: rotate(calc(var(--r,0deg) + 3deg)); }
}

.planit__board.is-shaking .planit__chip { animation: chipWobble .5s ease; }

.planit__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }

.planit__count { font-weight: 700; color: var(--text-secondary); font-size: 0.95rem; }

.planit__count b { font-family: var(--home-display); font-size: 1.5rem; color: var(--brand-orange); margin-right: 4px; }

.planit__actions { display: flex; gap: 10px; }

.planit__add { min-height: 48px; border: 1px solid var(--border-soft); background: #fff; border-radius: 999px; padding: .7rem 1.2rem; font-family: var(--home-display); font-weight: 700; cursor: pointer; transition: border-color .2s, transform .2s; }

.planit__add:hover { border-color: var(--brand-primary); transform: translateY(-2px); }

.planit__add:disabled { cursor:not-allowed; opacity:.55; transform:none; }

.planit__handover { transition: transform .25s var(--home-ease), box-shadow .25s, opacity .3s; }

.planit__handover.is-nudge { animation: nudge 1.1s ease infinite; }

@keyframes nudge {

0%,100% { transform: none; }

50% { transform: translateY(-3px) scale(1.02); }
}

.planit__calm { text-align: center; padding: clamp(32px, 5vw, 60px); border-radius: 24px; background: #1b1c1a; color: #fff; }

.planit__calm img { width: 150px; height: auto; margin: 0 auto 1.4rem; }

.planit__calm-eyebrow { margin: 0 0 .5rem; color: var(--brand-orange); font-size: 0.76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.planit__calm h3 { margin: 0 0 1.3rem; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.7rem); }

.planit__calm ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 1.8rem; padding: 0; list-style: none; }

.planit__calm li { padding: .4rem .72rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.8); font-size: 0.76rem; font-weight: 600; }

.planit__calm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

.planit__reset { color: rgba(255,255,255,.7); }

@media (max-width: 620px) {

.planit__board { height:320px; border-radius:20px; touch-action:manipulation; }

.planit__bar { flex-direction: column; align-items: stretch; }

.planit__actions { flex-direction: column; }

.planit__add, .planit__handover { width:100%; min-height:52px; -webkit-tap-highlight-color:transparent; }

.planit__count { text-align: center; }

.planit__chip { max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; font-size: 0.78rem; padding:.5rem .7rem; }

.planit__calm { padding:32px 20px; border-radius:20px; }

.planit__calm-actions { display:grid; grid-template-columns:1fr; }

.planit__calm-actions .button { width:100%; }
}

/* =========================================================
   Mobile hero — dedicated composition (not squished)
   ========================================================= */
@media (max-width: 760px) {

.cine-hero__lead { font-size: 1.01rem; }

.cine-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.78) 100%); }
}

/* fix: chips rest visible (scale 1); pop in from 0; board shakes, not chips */
.planit__chip { transform: rotate(var(--r,0deg)) scale(1); }

@keyframes chipPop {

from { transform: rotate(var(--r,0deg)) scale(0); opacity: 0; }

to { transform: rotate(var(--r,0deg)) scale(1); opacity: 1; }
}

.planit__board.is-shaking .planit__chip { animation: none; }

.planit__board.is-shaking { animation: boardShake .34s ease; }

@keyframes boardShake {

25% { transform: translateX(-3px); }

50% { transform: translateX(3px); }

75% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {

.planit__chip { animation: none !important; }

.planit__board.is-shaking { animation: none; }
}

/* fix: keep the coloured logo variant coloured over the hero (beat the earlier invert) */
.home-page .home-header:not(.is-scrolled) .brand img.brand__on-dark { filter: none !important; }

/* =========================================================
   Review pass — de-AI dash, nav, hero, section copy
   ========================================================= */
/* remove the little en-dash line before every eyebrow (reads as AI tell) */
.eyebrow::before, .home-page .eyebrow::before { display: none !important; }

.eyebrow { gap: 0 !important; }

/* nav: keep links + CTA on one line */
.home-page .desktop-nav a { white-space: nowrap; }

.home-page .nav-actions .button { white-space: nowrap; }

.home-page .home-header:not(.is-scrolled) .desktop-nav a { padding-inline: 13px; letter-spacing: .1em; }

/* hero headline — more prominent */
.cine-hero__headline h1 { font-size: clamp(2.9rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: -.025em; }

/* balance short section subtexts so no single word orphans on its own line */
.section-intro > p:not(.eyebrow), .section-intro > div > p { text-wrap: balance; }

/* destinations — grouped heading + compressed subtext (no split) */

/* Ask-Batasari helper block reads warmer, less like a plain row */
.handled-section .human-support { grid-template-columns: auto 1fr auto; background: linear-gradient(120deg, #fff, #f4efe4); border-color: rgba(233,120,47,.28); box-shadow: 0 20px 44px -30px rgba(233,120,47,.4); }

.handled-section .human-support__mark { background: var(--brand-orange); }

/* =========================================================
   Planner — talking guide bubble + typing loader + modern month picker
   ========================================================= */
.home-page .calm-planner .planner-guide p.planner-guide__message { top: 92px; border-radius: 18px 18px 18px 4px; }

.planner-guide__message::after { content: ""; position: absolute; left: 26px; bottom: -8px; width: 16px; height: 16px; background: inherit; border-right: 1px solid rgba(21,59,46,.1); border-bottom: 1px solid rgba(21,59,46,.1); border-bottom-left-radius: 4px; transform: rotate(45deg); }

.planner-guide__typing { display: none; align-items: center; gap: 5px; }

.planner-guide__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); opacity: .5; animation: guideType 1s infinite ease-in-out; }

.planner-guide__typing i:nth-child(2) { animation-delay: .15s; }

.planner-guide__typing i:nth-child(3) { animation-delay: .3s; }

@keyframes guideType {

0%,100% { transform: translateY(0); opacity: .4; }

50% { transform: translateY(-4px); opacity: 1; }
}

.planner-guide__message.is-typing .planner-guide__message-dot,
.planner-guide__message.is-typing #plannerReactionText { display: none; }

.planner-guide__message.is-typing .planner-guide__typing { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {

.planner-guide__typing i { animation: none; }
}

/* modern month picker (replaces native month input) */
.monthpick { position: relative; }

.monthpick__field { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .8rem 1rem; border: 1px solid var(--border-soft); border-radius: 14px; background: #fff; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: border-color .2s; }

.monthpick__field:hover { border-color: rgba(21,59,46,.28); }

.monthpick__field[aria-expanded="true"] { border-color: var(--brand-orange); }

.monthpick__field svg { width: 20px; height: 20px; flex: none; color: var(--brand-orange); }

.monthpick__value.is-placeholder { color: var(--text-secondary); font-weight: 500; }

.monthpick__panel { position: absolute; z-index: 6; left: 0; right: 0; margin-top: 8px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 16px; background: #fff; box-shadow: 0 24px 55px -22px rgba(21,59,46,.4); }

.monthpick__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.monthpick__nav button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-soft); background: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; transition: .15s; }

.monthpick__nav button:hover:not(:disabled) { border-color: var(--brand-primary); }

.monthpick__nav button:disabled { opacity: .3; cursor: not-allowed; }

.monthpick__nav span { font-family: var(--home-display); font-weight: 700; font-size: 1.05rem; }

.monthpick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.monthpick__grid button { padding: .62rem .4rem; border-radius: 10px; border: 1px solid transparent; background: #f6f0e4; font-weight: 600; font-size: 0.93rem; cursor: pointer; transition: .15s; }

.monthpick__grid button:hover:not(:disabled) { background: #ece2d0; }

.monthpick__grid button[aria-pressed="true"] { background: var(--brand-orange); color: #fff; }

.monthpick__grid button:disabled { opacity: .32; cursor: not-allowed; }

.monthpick__flex { width: 100%; margin-top: 10px; padding: .6rem; border: 1px dashed var(--border-soft); border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; color: var(--text-secondary); }

.monthpick__flex:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* planner: grouped field labels for the new question blocks */
.calm-planner .field-label { display: block; margin: 0 0 .55rem; font-family: var(--home-display); font-weight: 700; font-size: 0.98rem; color: var(--text-primary); }

.calm-planner .choice-block { margin-top: 1.2rem; }

/* handled route — a little traveller journeys along the line to each stop */
.handled-route__traveller { fill: var(--brand-orange); filter: drop-shadow(0 0 7px rgba(244,119,33,.7)); }

@media (prefers-reduced-motion: reduce) {

.handled-route__traveller { display: none; }
}

/* =========================================================
   Review pass 2 — planner robustness, cursor, hovers
   ========================================================= */
/* combobox menu now lives inside the dialog (absolute, not popover) */
.calm-planner .destination-combobox { position: relative; }

.calm-planner .destination-combobox__menu { position: absolute; left: 0; right: 0; width: auto; max-height: 292px; overflow-y: auto; margin: 0; z-index: 40; display: none; }

.calm-planner .destination-combobox.is-open .destination-combobox__menu { display: block; }

/* traveller-count options disabled when they don't fit the party */
.calm-planner .choice-grid label.is-disabled { opacity: .38; pointer-events: none; }

/* inline field validation */
.calm-planner .field-error { display: block; margin-top: 6px; color: #c2410c; font-size: 0.85rem; font-weight: 600; }

.calm-planner label.has-error input { border-color: #e0663a; box-shadow: 0 0 0 3px rgba(224,102,58,.14); }

/* smooth custom cursor (desktop, fine pointer) */
.bat-cursor, .bat-cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }

.bat-cursor { width: 32px; height: 32px; border: 1.5px solid rgba(21,59,46,.55); transition: width .28s var(--home-ease), height .28s var(--home-ease), background .28s, border-color .28s, opacity .3s; }

.bat-cursor.is-hover { width: 52px; height: 52px; background: rgba(233,120,47,.14); border-color: var(--brand-orange); }

.bat-cursor.is-dark { border-color: rgba(255,255,255,.7); }

.bat-cursor-dot { width: 6px; height: 6px; background: var(--brand-orange); }

body.bat-cursor-on { cursor: none; }

body.bat-cursor-on a, body.bat-cursor-on button, body.bat-cursor-on input, body.bat-cursor-on select, body.bat-cursor-on [role="button"] { cursor: none; }

@media (hover: none), (pointer: coarse) {

.bat-cursor, .bat-cursor-dot { display: none !important; }

body.bat-cursor-on { cursor: auto; }
}

/* handled route — numbers react on hover */
.handled-route li span { transition: transform .3s var(--home-ease), background .3s, color .3s, box-shadow .3s; }

.handled-route li:hover span, .handled-route li:focus-within span { transform: scale(1.18); background: var(--brand-orange); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -8px rgba(244,119,33,.7); }

/* footer wordmark — letters fill + lift on hover (staggered) */
.footer-wordmark { cursor: default; }

.footer-wordmark span { display: inline-block; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.14); transition: color .4s var(--home-ease), transform .4s var(--home-ease), -webkit-text-stroke-color .4s; transition-delay: calc(var(--i, 0) * 45ms); }

.footer-wordmark:hover span { color: var(--brand-orange); -webkit-text-stroke-color: rgba(244,119,33,.35); transform: translateY(-8px); }

@media (max-width: 620px) {

.footer-wordmark span { -webkit-text-stroke-width: 1px; }

.footer-wordmark:hover span { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {

.footer-wordmark:hover span { transform: none; }

.bat-cursor, .bat-cursor-dot { display: none !important; }

body.bat-cursor-on { cursor: auto; }
}

/* =========================================================
   Review pass 3 — step tooltips, accordion smoothing, footer wave
   ========================================================= */
.handled-route li { position: relative; outline: none; }

.handled-route__detail { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 2px); width: 196px; margin: 0; padding: 11px 14px; border-radius: 12px; background: var(--brand-primary); color: #fff; font-style: normal; font-weight: 500; font-size: 0.84rem; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s var(--home-ease), transform .25s var(--home-ease); z-index: 5; box-shadow: 0 16px 32px -12px rgba(21,59,46,.55); }

.handled-route__detail::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--brand-primary); }

.handled-route li:hover .handled-route__detail, .handled-route li:focus-visible .handled-route__detail { opacity: 1; transform: translate(-50%, 9px); }

.handled-route li:focus-visible span { transform: scale(1.18); background: var(--brand-orange); color: #fff; }

/* accordion — snappier flex so fast hovering doesn't lag */
.jrn-panel { transition: flex-grow .38s cubic-bezier(.4, 0, .2, 1); will-change: flex-grow; }

/* footer wordmark — playful per-letter wave (each letter reacts on its own hover) */
.footer-wordmark span { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .3s ease, -webkit-text-stroke-color .3s ease; transition-delay: 0s; }

.footer-wordmark:hover span { color: transparent; -webkit-text-stroke-color: rgba(255,255,255,.14); transform: none; }

.footer-wordmark span:hover { color: var(--brand-orange); -webkit-text-stroke-color: rgba(244,119,33,.4); transform: translateY(-16px) scale(1.06) rotate(-3deg); }

/* =========================================================
   Review pass 4 — legibility, footer hover, planner cursor, mobile
   ========================================================= */
/* (1) hero text legibility — darker scrim + lighter dim text + stronger shadow */
.cine-hero__scrim { background:
  radial-gradient(120% 95% at 50% 42%, rgba(0,0,0,.26), rgba(0,0,0,.52)),
  linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.32) 30%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.74) 100%); }

.cine-hero__headline h1 { text-shadow: 0 2px 40px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45); }

.cine-hero__headline h1 .dim { color: rgba(255,255,255,.8); }

.cine-hero__lead { text-shadow: 0 2px 26px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.5); }

.cine-hero__lead .dim { color: rgba(255,255,255,.74); }

/* (2) footer wordmark hover — it was pointer-events:none, so it never fired */
.footer-wordmark { pointer-events: auto; }

.footer-wordmark span { pointer-events: auto; }

/* (5) planner: the custom cursor can't paint over a modal dialog — restore a real
   pointer while the planner is open so users can see/aim */
body.bat-cursor-on.dialog-open, body.bat-cursor-on.dialog-open * { cursor: auto; }

body.bat-cursor-on.dialog-open a, body.bat-cursor-on.dialog-open button, body.bat-cursor-on.dialog-open [role="button"], body.bat-cursor-on.dialog-open label, body.bat-cursor-on.dialog-open select, body.bat-cursor-on.dialog-open .combobox-option { cursor: pointer; }

body.bat-cursor-on.dialog-open input, body.bat-cursor-on.dialog-open textarea { cursor: text; }

body.dialog-open .bat-cursor, body.dialog-open .bat-cursor-dot { opacity: 0 !important; }

/* (6b) mobile quick-action bar — refined, icon + label, not full colour blocks */
@media (max-width: 760px) {

.home-page .mobile-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: stretch;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,253,248,.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border-soft); box-shadow: 0 -8px 30px rgba(21,59,46,.1); }

.home-page .mobile-actions a, .home-page .mobile-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border: 0; border-radius: 14px; background: transparent; color: var(--text-primary); font-family: var(--home-display); font-size: 0.76rem; font-weight: 700; letter-spacing: .01em; }

.home-page .mobile-actions svg { width: 21px; height: 21px; }

.home-page .mobile-actions .is-wa { background: #168b4c; color: #fff; }

.home-page .mobile-actions .is-plan { background: transparent; color: var(--brand-orange); }

.home-page .mobile-actions .is-plan svg { color: var(--brand-orange); }
}

/* (6c) "Not sure where to begin" — stack cleanly on mobile (was a squished 3-col) */
@media (max-width: 620px) {

.handled-section .human-support { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; padding: 24px 20px; }

.handled-section .human-support p { margin-inline: auto; max-width: 34ch; }

.handled-section .human-support .button { width: 100%; }
}

/* =========================================================
   Review pass 5 — route auto-highlight + creative mobile destinations
   ========================================================= */
/* handled route: the moving dot reveals + selects each stop */
.handled-route li { opacity: .4; transition: opacity .45s var(--home-ease); }

.handled-route li.is-passed { opacity: 1; }

.handled-route li.is-active span { transform: scale(1.2); background: var(--brand-orange); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -8px rgba(244,119,33,.7); }

.handled-route li.is-active strong { color: var(--brand-primary); }

/* creative mobile destinations — swipeable region cards with tappable places */

/* handled route — the Batasari bus travels the line + auto-reveals each stop's info */
.handled-route__bus { filter: drop-shadow(0 7px 8px rgba(21,59,46,.27)); overflow: visible; }

.handled-coach { transform-box: fill-box; transform-origin: 50% 58%; animation: handledCoachHover 3.8s ease-in-out infinite; }

.handled-coach image { pointer-events: none; }

@keyframes handledCoachHover {

0%,100% { transform: translateY(0); }

50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {

.handled-coach { animation: none; }
}

.handled-route li.is-active .handled-route__detail { opacity: 1; transform: translate(-50%, 9px); }

@media (prefers-reduced-motion: reduce) {

.handled-route li.is-active .handled-route__detail { opacity: 0; }
}

/* =========================================================
   Review pass 6 — creative section backgrounds + motion
   ========================================================= */
/* (3) "One Trip / bus route" — warm, on-brand backdrop (sun glow, map dots, faint mountains) */
.home-page .handled-section { position: relative; overflow: hidden; background:
  radial-gradient(55% 45% at 84% 6%, rgba(255,117,31,.09), transparent 62%),
  radial-gradient(45% 40% at 10% 16%, rgba(102,204,51,.06), transparent 62%),
  linear-gradient(180deg, #fffdf8, #f6efe2); }

.home-page .handled-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(21,59,46,.06) 1.2px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }

.home-page .handled-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 0; pointer-events: none; opacity: .09;
  background: bottom center / cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 150 88 300 158 470 58 650 168 820 80 1000 150 1200 70 1200 200Z' fill='%23008037'/%3E%3Cpath d='M0 200 200 130 380 180 560 110 760 188 950 120 1200 158 1200 200Z' fill='%2366cc33'/%3E%3C/svg%3E"); }

.home-page .handled-section .shell { position: relative; z-index: 1; }

.handled-floaters { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.handled-floater { --float-x: 18px; --float-y: -24px; position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(21,59,46,.1); border-radius: 18px; background: rgba(255,253,248,.66); color: rgba(21,59,46,.38); box-shadow: 0 18px 42px -24px rgba(21,59,46,.5); transform: translate3d(0,0,0) rotate(var(--float-r, -6deg)); animation: handledFloat var(--float-d, 9s) var(--float-delay, 0s) ease-in-out infinite alternate; will-change: transform; }

.handled-floater svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.handled-floater--plane { left: 4%; top: 17%; --float-d: 8.5s; --float-delay: -2s; --float-r: -9deg; color: rgba(244,119,33,.48); }

.handled-floater--pin { right: 6%; top: 12%; width: 48px; height: 48px; --float-x: -15px; --float-y: 28px; --float-d: 10s; --float-delay: -5s; --float-r: 7deg; }

.handled-floater--case { left: 8%; bottom: 19%; width: 52px; height: 52px; --float-x: 14px; --float-y: 20px; --float-d: 11s; --float-delay: -7s; --float-r: 8deg; }

.handled-floater--compass { right: 4%; top: 48%; width: 66px; height: 66px; --float-x: -22px; --float-y: -18px; --float-d: 12s; --float-delay: -3s; --float-r: -5deg; color: rgba(25,155,209,.4); }

.handled-floater--ticket { right: 14%; bottom: 7%; width: 54px; height: 54px; --float-x: 18px; --float-y: -26px; --float-d: 9.5s; --float-delay: -6s; --float-r: 9deg; color: rgba(244,119,33,.42); }

@keyframes handledFloat {

50% { transform: translate3d(calc(var(--float-x) * .45), calc(var(--float-y) * .35), 0) rotate(calc(var(--float-r) * -.45)); }

100% { transform: translate3d(var(--float-x), var(--float-y), 0) rotate(calc(var(--float-r) * -1)); }
}

@media (max-width: 760px) {

.handled-floater { width: 44px; height: 44px; opacity: .62; }

.handled-floater svg { width: 23px; height: 23px; }

.handled-floater--case, .handled-floater--ticket { display: none; }
}

/* Transparent header logo: colour variants switch over dark/light surfaces. */
.home-page .home-header .brand { position: relative; }

/* (4) "Why Batasari" — slow aurora motion + interactive story items */
.home-page .trust-section { position: relative; overflow: hidden; }

.home-page .trust-section::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(22px);
  background:
    radial-gradient(30% 30% at 20% 28%, rgba(255,117,31,.16), transparent 60%),
    radial-gradient(28% 28% at 82% 72%, rgba(54,179,90,.13), transparent 60%),
    radial-gradient(24% 24% at 62% 16%, rgba(92,183,226,.11), transparent 60%);
  animation: trustAurora 20s ease-in-out infinite alternate; }

@keyframes trustAurora {

0% { transform: translate(0,0) scale(1); }

50% { transform: translate(3%,-2%) scale(1.08); }

100% { transform: translate(-3%,2%) scale(1.05); }
}

.home-page .trust-section .shell { position: relative; z-index: 1; }

.trust-story li { border-radius: 16px; transition: transform .3s var(--home-ease); }

.trust-story span { transition: background .3s, border-color .3s, color .3s, transform .3s var(--home-ease), box-shadow .3s; }

.trust-story li:hover, .trust-story li:focus-within { transform: translateX(8px); }

.trust-story li:hover span, .trust-story li:focus-within span { background: var(--brand-orange); border-color: transparent; color: #fff; transform: scale(1.1); box-shadow: 0 12px 26px -8px rgba(244,119,31,.6); }

.trust-story li:hover h3, .trust-story li:focus-within h3 { color: #ffd38c; }

@media (prefers-reduced-motion: reduce) {

.home-page .trust-section::before { animation: none; }
}

/* larger header logo (tagline reads clearer since it's part of the mark) */
.home-page .home-header { height: 94px; }

.home-page .home-header.is-scrolled { height: 78px; }

.home-page .home-header .brand { width: 270px; flex: none; }

.home-page .home-header.is-scrolled .brand { width: 235px; }

.home-page .home-header .desktop-nav { gap: clamp(.4rem, .8vw, .75rem); }

.home-page .home-header:not(.is-scrolled) .desktop-nav a { padding-inline: 10px; }

@media (max-width: 1180px) {

.home-page .home-header .desktop-nav { display: none; }

.home-page .home-header .menu-toggle { display: grid; }
}

@media (max-width: 980px) {

.home-page .home-header .brand { width: 225px; }
}

@media (max-width: 760px) {

.home-page .home-header, .home-page .home-header.is-scrolled { height: 74px; }

.home-page .home-header .brand { width: 195px; }
}

/* =========================================================
   Production interaction pass — footer, enquiry prompt, touch
   ========================================================= */
.home-page .footer-group { display: flex; flex-direction: column; align-items: flex-start; }

.home-page .footer-group a { position: relative; transition: color .22s ease, transform .28s var(--home-ease); }

.home-page .footer-group a:hover, .home-page .footer-group a:focus-visible { color: var(--brand-orange); transform: translateX(4px); }

.home-page :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

.home-page :where(section[id], footer) { scroll-margin-top: 88px; }

.home-page .companion-popup {
  display: grid;
  opacity: 1;
  box-shadow: 0 30px 85px -28px rgba(5,24,16,.58), 0 10px 28px rgba(5,24,16,.12);
}

.home-page .companion-popup[hidden] { display: none; }

.home-page .companion-popup__body h2 { max-width: 13ch; font-size: 1.65rem; line-height: 1.08; }

.companion-popup__body .button { transition: transform .22s var(--home-ease), background .22s ease, color .22s ease; }

.companion-popup__body .button:active { transform: scale(.97); }

@media (hover: none), (pointer: coarse) {

.home-page :where(a, button) { -webkit-tap-highlight-color: transparent; }

.home-page .button:active, .home-page .cine-hero__cta:active, .home-page .mobile-actions :is(a,button):active { transform: scale(.97); }

.trust-story li:hover { transform: none; }

.trust-story li:hover span { background: transparent; border-color: rgba(255,255,255,.22); color: #f8c873; transform: none; box-shadow: none; }

.trust-story li:active span { background: var(--brand-orange); border-color: transparent; color: #fff; transform: scale(1.05); }
}

@media (max-width: 620px) {

.home-page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

.home-page .home-footer { padding: 50px 0 calc(104px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); }

.home-page .home-footer .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 24px; }

.home-page .home-footer .footer-brand { grid-column: 1 / -1; padding-bottom: 30px; }

.home-page .home-footer .footer-brand img { width: min(64vw, 230px); }

.home-page .home-footer .footer-brand p { max-width: 29ch; margin: 17px 0 0; color: rgba(255,255,255,.62); font-size: 0.95rem; line-height: 1.65; }

.home-page .home-footer .footer-group { min-width: 0; padding: 24px 0 18px; border-top: 1px solid rgba(255,255,255,.1); }

.home-page .home-footer .footer-group h2 { margin: 0 0 12px; color: rgba(255,255,255,.5); font-size: 0.76rem; letter-spacing: .16em; }

.home-page .home-footer .footer-group a { width: fit-content; min-height: 40px; display: inline-flex; align-items: center; color: rgba(255,255,255,.76); font-size: 0.87rem; line-height: 1.25; }

.home-page .home-footer .footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 16px; padding-bottom: 0; }

.home-page .home-footer .footer-contact h2, .home-page .home-footer .footer-contact address { grid-column: 1 / -1; }

.home-page .home-footer .footer-contact a { max-width: 100%; overflow-wrap: anywhere; }

.home-page .home-footer address { max-width: 34ch; margin-top: 12px; color: rgba(255,255,255,.48); font-size: 0.76rem; line-height: 1.65; }

.home-page .home-footer .footer-wordmark { display: none; }

.home-page .home-footer .footer-bottom { flex-direction: row; align-items: center; gap: 16px; margin-top: 28px; padding-top: 18px; color: rgba(255,255,255,.42); font-size: 0.76rem; line-height: 1.4; }

.home-page .home-footer .footer-bottom span:last-child { margin-left: auto; text-align: right; }

.home-page .mobile-actions {
    left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 64px; padding: 5px; gap: 4px;
    border: 1px solid rgba(21,59,46,.1); border-radius: 20px;
    background: rgba(255,253,248,.95); box-shadow: 0 18px 50px rgba(10,31,22,.2);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }

.home-page .mobile-actions a, .home-page .mobile-actions button { min-height: 52px; border-radius: 15px; }

.home-page .mobile-actions .is-wa { box-shadow: 0 10px 24px -14px rgba(22,139,76,.85); }

.home-page .companion-popup {
    left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom));
    width: auto; grid-template-columns: minmax(0,1fr);
    border-radius: 22px;
  }

.home-page .companion-popup__body { min-width: 0; padding: 23px 20px 19px; }

.home-page .companion-popup__body .eyebrow { display: block; margin-bottom: 5px; font-size: 0.76rem; }

.home-page .companion-popup__body h2 { max-width: 18ch; margin-bottom: 8px; padding-right: 24px; font-size: 1.38rem; }

.home-page .companion-popup__body > p:not(.eyebrow) { font-size: 0.83rem; line-height: 1.52; }

.home-page .companion-popup__body .companion-popup__trust { font-size: 0.76rem; }

.home-page .companion-popup__body > div { display: grid; grid-template-columns: 1.15fr .85fr; gap: 6px; margin-top: 12px; }

.home-page .companion-popup__body .button { min-height: 44px; padding: .55rem .65rem; font-size: 0.76rem; white-space: nowrap; }
}

@media (max-width: 355px) {

.home-page .home-footer .footer-grid { gap-inline: 16px; }

.home-page .home-footer .footer-group a { font-size: 0.82rem; }

.home-page .companion-popup { grid-template-columns: 1fr; }

.home-page .companion-popup__body { padding: 20px 16px 17px; }
}

@media (prefers-reduced-motion: reduce) {

.home-page .footer-group a, .companion-popup__body .button { transition: none; }
}

/* Mobile-first conversion pass: less page chrome, more room for the trip task. */
.journey-swipe-hint { display: none; }

@media (max-width: 760px) {

.home-page .section { padding-block: 68px; }

.home-page .section-intro { margin-bottom: 30px; }

.home-page .section-intro h2 { font-size: clamp(2.05rem, 10.5vw, 2.8rem); }

.home-page .section-intro > p:not(.eyebrow),
  .home-page .section-intro > div > p { font-size: 0.95rem; line-height: 1.6; }

/* the old full-screen dropdown here is superseded by the shared drawer */

  .cine-hero__headline { bottom: 46%; }

.cine-hero__headline h1 { font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1.08; }

.cine-hero__bottom { bottom: calc(94px + env(safe-area-inset-bottom)); gap: 13px; }

.cine-hero__lead { max-width: 35ch; font-size: 0.93rem; line-height: 1.55; }

.cine-hero__cta { min-height: 50px; padding: 12px 26px; }

.cine-hero__secure { font-size: 0.76rem; letter-spacing: .1em; }

.handled-route li { opacity: 1; }

.handled-route li.is-active span { transform: scale(1.06); }

.handled-route__detail,
  .handled-route li.is-active .handled-route__detail { display: none; opacity: 0; }

.handled-floater--plane,.handled-floater--pin,.handled-floater--compass { opacity: .32; }

.journeys-section { overflow: hidden; }

.journeys-section .section-intro { margin-bottom: 17px; }

.journey-swipe-hint { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; color: var(--text-secondary); font-size: 0.76rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

.journey-swipe-hint span { color: var(--brand-orange); font-size: 1.05rem; }

.journey-accordion {
    flex-direction: row; height: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 18px;
    scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
  }

.journey-accordion::-webkit-scrollbar { display: none; }

.jrn-panel { flex: 0 0 min(84vw, 340px); height: 300px; scroll-snap-align: start; border-radius: 20px; transition: box-shadow .35s ease, transform .35s var(--home-ease); }

.jrn-panel.is-active { box-shadow: 0 0 0 2px rgba(244,119,33,.75), 0 22px 46px -28px rgba(0,0,0,.75); }

.jrn-panel__inner { left: 18px; right: 18px; bottom: 18px; }

.jrn-panel__actions :is(a,button) { min-height: 44px; display: inline-flex; align-items: center; }

.journey-slider-meta { grid-template-columns: 1fr; gap: 10px; margin: 0 0 14px; }

.journey-slider-meta__copy { justify-content: space-between; }

.journey-slider-meta__controls { justify-content: flex-start; }

.home-page .calm-planner {
    width: 100%; max-width: none; max-height: calc(100dvh - 8px); margin: auto 0 0;
    overflow-y: auto; border-radius: 22px 22px 0 0; overscroll-behavior: contain;
  }

.home-page .calm-planner .planner-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }

.home-page .calm-planner .planner-guide { min-height: 112px; display: block; padding: 12px 48px 10px 16px; }

.home-page .calm-planner .planner-guide__logo { left: 16px; top: 12px; width: 116px !important; }

.home-page .calm-planner .planner-guide__character { right: 1px; bottom: -8px; height: 112px; margin: 0; }

.home-page .calm-planner .planner-guide p,
  .home-page .calm-planner .planner-guide p.planner-guide__message {
    left: 16px; right: 82px; top: 56px; min-height: 43px; padding: 8px 10px;
    border-radius: 12px 12px 12px 4px; font-size: 0.76rem; line-height: 1.35;
  }

.home-page .calm-planner .planner-guide p::after { width: 11px; height: 11px; left: auto; right: 17px; bottom: -6px; }

.home-page .calm-planner > .dialog-close { width: 40px; height: 40px; right: 7px; top: 7px; }

.home-page .calm-planner .planner-panel { overflow: visible; padding: 17px 16px calc(20px + env(safe-area-inset-bottom)); }

.home-page .calm-planner .planner-panel > .eyebrow { margin-bottom: .35rem; font-size: 0.76rem; }

.home-page .calm-planner .planner-panel > h2 { max-width: 18ch; margin-bottom: .8rem; font-size: 1.48rem; line-height: 1.05; }

.home-page .calm-planner .planner-progress { margin-bottom: .45rem; }

.home-page .calm-planner .planner-step-label { margin-bottom: 1rem; }

.home-page .calm-planner .planner-step legend { margin-bottom: .8rem; font-size: clamp(1.55rem, 8vw, 2rem); line-height: 1.12; }

.home-page .calm-planner .planner-step input:not([type="radio"]):not([type="checkbox"]),
  .home-page .calm-planner .planner-step select,
  .home-page .calm-planner .planner-step textarea { min-height: 52px; font-size: 16px; }

.home-page .calm-planner .planner-step .destination-combobox__control input { font-size: 16px; }

.home-page .calm-planner .planner-step .destination-combobox__hint { font-size: 0.76rem; }

.home-page .calm-planner .choice-grid span { min-height: 50px; }

.home-page .calm-planner .planner-controls {
    position: sticky; bottom: 0; z-index: 12; margin: 1.3rem -3px -3px; padding: 12px 3px 3px;
    background: linear-gradient(180deg,rgba(255,253,248,0),#fffdf8 20%);
  }

.home-page .calm-planner .planner-controls .button { min-height: 50px; }
}

@media (max-width: 350px) {

.cine-hero__headline { bottom: 47%; }

.cine-hero__headline h1 { font-size: 2.18rem; }

.cine-hero__lead .dim { display: none; }

.home-page .calm-planner .planner-guide__character { height: 104px; }

.home-page .calm-planner .planner-guide p,
  .home-page .calm-planner .planner-guide p.planner-guide__message { right: 75px; }
}

/* =========================================================
   Mobile hero rebuild — orientation, self-serve entry, no overlap
   Layout is a single flex column (.cine-hero__inner); the headline and
   bottom block are siblings in flow, so they can never collide the way
   two independently-anchored absolute blocks did.
   ========================================================= */

/* eyebrow — says what Batasari is, above the fold */
.cine-hero__eyebrow { margin: 0; display: inline-block; color: rgba(255,255,255,.92);
  font-family: var(--home-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-wrap: balance;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(12,26,20,.34);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* category chips — immediate self-serve path into the destination index */
.cine-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cine-hero__chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 17px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-family: var(--home-display); font-size: 0.87rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: background .22s ease, border-color .22s ease, transform .22s var(--home-ease); }

.cine-hero__chips a:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

.cine-hero__chips a:active { transform: scale(.97); }

/* actions — primary plan CTA + low-commitment browse CTA */
.cine-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

button.cine-hero__cta-alt { cursor: pointer; }
.cine-hero__cta-alt { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: transparent;
  color: #fff; font-family: var(--home-display); font-weight: 600; font-size: clamp(.9rem, 1.3vw, 1rem);
  text-decoration: none; text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: background .22s ease, border-color .22s ease, transform .22s var(--home-ease); }

.cine-hero__cta-alt:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.cine-hero__cta-alt:active { transform: scale(.97); }

/* what's included — answers "what do I actually get" without scrolling */
.cine-hero__includes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 0; margin: 0; padding: 0; list-style: none;
  color: rgba(255,255,255,.82); font-size: 0.76rem; font-weight: 500; letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(0,0,0,.55); }

.cine-hero__includes li { padding-inline: 11px; }

.cine-hero__includes li + li { border-left: 1px solid rgba(255,255,255,.28); }

.cine-hero__secure { text-transform: uppercase; }

/* ---------- mobile: fit the viewport, clear the fixed action bar ---------- */
@media (max-width: 760px) {

/* never taller than the viewport, or the content lands under the fold */
  .cine-hero { min-height: min(600px, 100svh); }

.cine-hero__inner {
    justify-content: flex-end;
    justify-content: safe flex-end;
    gap: clamp(16px, 2.6vh, 26px);
    /* top clears the 74px header; bottom clears the fixed .mobile-actions bar */
    padding-block: 104px calc(104px + env(safe-area-inset-bottom));
  }

.cine-hero__headline { gap: 12px; }

/* smaller type so each line fits on one row instead of wrapping to four */
  .cine-hero__headline h1 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); line-height: 1.14; }

.cine-hero__eyebrow { font-size: 0.76rem; letter-spacing: .1em; padding: 6px 12px; }

.cine-hero__lead { font-size: 0.95rem; line-height: 1.55; max-width: 34ch; }

/* mobile keeps only the core sentence; the rest reads on larger screens */
  .cine-hero__lead .dim { display: none; }

.cine-hero__bottom { gap: 14px; }

/* one scrollable row instead of an unbalanced 3+1 wrap; mirrors the
     horizontal region rail used by the destinations section below */
  .cine-hero__chips { flex-wrap: nowrap;
    justify-content: flex-start;
    justify-content: safe center; /* centred when it fits, no start-edge clipping when it scrolls */
    align-self: stretch; /* not 100vw — that overflows when a scrollbar is present */
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

.cine-hero__chips::-webkit-scrollbar { display: none; }

.cine-hero__chips a { min-height: 44px; padding: 0 14px; font-size: 0.83rem; }

.cine-hero__actions { gap: 10px; width: 100%; }

.cine-hero__cta, .cine-hero__cta-alt { flex: 1 1 auto; min-height: 48px; padding-inline: 18px; font-size: 0.98rem; }

.cine-hero__includes { font-size: 0.76rem; }

.cine-hero__includes li { padding-inline: 8px; }

.cine-hero__secure { font-size: 0.76rem; letter-spacing: .08em; text-align: center; text-wrap: balance; }

/* stronger bottom scrim: there is more copy sitting over the video now */
  .cine-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.24) 26%, rgba(0,0,0,.46) 58%, rgba(0,0,0,.86) 100%); }
}

/* short viewports — shed the least-critical rows before anything can clip */
@media (max-width: 760px) and (max-height: 700px) {

.cine-hero__includes { display: none; }

.cine-hero__lead .dim { display: none; }

.cine-hero__inner { gap: 14px; padding-block: 92px calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) and (max-height: 620px) {

.cine-hero__eyebrow { display: none; }

.cine-hero__secure { display: none; }
}

/* very narrow phones (320–380px) — the headline needs a third line, so buy
   the space back from type size and gaps rather than letting it clip */
@media (max-width: 380px) {

.cine-hero__headline h1 { font-size: clamp(1.5rem, 7.4vw, 2rem); }

.cine-hero__inner { gap: 11px; padding-block: 82px calc(84px + env(safe-area-inset-bottom)); }

.cine-hero__bottom { gap: 11px; }

.cine-hero__headline { gap: 9px; }

.cine-hero__lead { font-size: 0.9rem; }

.cine-hero__chips { gap: 6px; }

.cine-hero__chips a { min-height: 40px; padding: 0 12px; font-size: 0.78rem; }
}

/* landscape phones — very little vertical room; keep the hero legible and
   let it grow instead of hiding content behind the fixed action bar */
@media (max-width: 940px) and (max-height: 520px) and (orientation: landscape) {

.cine-hero { height: auto; min-height: 100svh; }

.cine-hero__inner { justify-content: center;
    justify-content: safe center; /* never overflow past the header when copy grows */
    gap: 10px; padding-block: 84px calc(82px + env(safe-area-inset-bottom)); }

/* no room for the chip row here; "See destinations" carries that path */
  .cine-hero__eyebrow, .cine-hero__includes, .cine-hero__secure, .cine-hero__chips { display: none; }

.cine-hero__lead .dim { display: none; }

.cine-hero__headline h1 { font-size: clamp(1.35rem, 3.6vw, 1.8rem); }

.cine-hero__lead { font-size: 0.9rem; max-width: 52ch; }

.cine-hero__bottom { gap: 11px; }

.cine-hero__actions { width: auto; }

.cine-hero__cta, .cine-hero__cta-alt { min-height: 44px; }

.cine-hero__chips a { min-height: 40px; }
}

/* footer social */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }

.home-page .home-footer .footer-social a, .footer-social a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px 0 13px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82); font-family: var(--home-display); font-size: 0.83rem; font-weight: 600; text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s var(--home-ease); }

.footer-social a:hover { background: rgba(244,119,33,.14); border-color: rgba(244,119,33,.5); color: #fff; transform: translateY(-2px); }

.footer-social a:active { transform: scale(.97); }

/* =========================================================
   Mobile journey — the desktop route/bus is hidden below 1040px, which
   left the mobile section as six dots on a flat panel. Below 760px the
   timeline becomes an automatically travelling vertical route with a coach.
   Desktop composition is untouched.
   ========================================================= */

.handled-vroute { display: none; }

@media (max-width: 760px) {

.handled-vroute { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; }

.handled-vroute__base { stroke: rgba(21,59,46,.2); stroke-width: 2.4; stroke-linecap: round;
    stroke-dasharray: 1.5 7; }

.handled-vroute__progress { stroke: var(--brand-orange); stroke-width: 3.4; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    filter: drop-shadow(0 2px 7px rgba(244,119,33,.5)); }

.handled-vroute--top { z-index: 2; }

.handled-vroute__bus { filter: drop-shadow(0 4px 6px rgba(21,59,46,.3)); opacity: 0; transition: opacity .4s ease; }

.handled-vroute.is-live .handled-vroute__bus { opacity: 1; }

/* the SVG route replaces the flat 1px connector */
  .handled-route li:not(:last-child)::after { display: none; }

.handled-route { padding-left: 4px; }

.handled-route li span { box-shadow: 0 6px 18px rgba(21,59,46,.12); transition: transform .35s var(--home-ease), background .35s ease, color .35s ease, border-color .35s ease; }

/* passed = filled behind you; active = hollow ring, because the coach is
     parked on it and needs to stay readable */
  .handled-route li.is-passed span { background: var(--brand-orange); color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(244,119,33,.75); }

.handled-route li.is-active span { transform: scale(1.22); background: var(--surface); color: var(--brand-orange);
    border: 2.5px solid var(--brand-orange); box-shadow: 0 0 0 7px rgba(244,119,33,.12), 0 10px 24px -10px rgba(244,119,33,.7); }

/* ---- richer ground: warm depth, a map texture and real hills ---- */
  .home-page .handled-section {
    background:
      radial-gradient(70% 40% at 88% 4%, rgba(255,117,31,.16), transparent 66%),
      radial-gradient(60% 34% at 6% 12%, rgba(102,204,51,.11), transparent 64%),
      radial-gradient(90% 30% at 50% 100%, rgba(0,128,55,.1), transparent 70%),
      linear-gradient(180deg, #fffefa 0%, #fdf6ea 42%, #f5ecdb 100%); }

/* contour lines read as a map — kept very faint so body copy stays clean */
  .home-page .handled-section::before { opacity: .1;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360'><g fill='none' stroke='%2314543f' stroke-width='1'><path d='M0 22.0 q 32.5 -7.0 65 0 q 32.5 7.0 65 0 q 32.5 -7.0 65 0 q 32.5 7.0 65 0 q 32.5 -7.0 65 0 q 32.5 7.0 65 0 q 32.5 -7.0 65 0 q 32.5 7.0 65 0 q 32.5 -7.0 65 0'/><path d='M0 85.2 q 32.5 -9.9 65 0 q 32.5 9.9 65 0 q 32.5 -9.9 65 0 q 32.5 9.9 65 0 q 32.5 -9.9 65 0 q 32.5 9.9 65 0 q 32.5 -9.9 65 0 q 32.5 9.9 65 0 q 32.5 -9.9 65 0'/><path d='M0 148.4 q 32.5 -8.5 65 0 q 32.5 8.5 65 0 q 32.5 -8.5 65 0 q 32.5 8.5 65 0 q 32.5 -8.5 65 0 q 32.5 8.5 65 0 q 32.5 -8.5 65 0 q 32.5 8.5 65 0 q 32.5 -8.5 65 0'/><path d='M0 211.6 q 32.5 -4.9 65 0 q 32.5 4.9 65 0 q 32.5 -4.9 65 0 q 32.5 4.9 65 0 q 32.5 -4.9 65 0 q 32.5 4.9 65 0 q 32.5 -4.9 65 0 q 32.5 4.9 65 0 q 32.5 -4.9 65 0'/><path d='M0 274.8 q 32.5 -4.3 65 0 q 32.5 4.3 65 0 q 32.5 -4.3 65 0 q 32.5 4.3 65 0 q 32.5 -4.3 65 0 q 32.5 4.3 65 0 q 32.5 -4.3 65 0 q 32.5 4.3 65 0 q 32.5 -4.3 65 0'/><path d='M0 338.0 q 32.5 -7.6 65 0 q 32.5 7.6 65 0 q 32.5 -7.6 65 0 q 32.5 7.6 65 0 q 32.5 -7.6 65 0 q 32.5 7.6 65 0 q 32.5 -7.6 65 0 q 32.5 7.6 65 0 q 32.5 -7.6 65 0'/></g></svg>"); background-size: 520px 360px; background-repeat: repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 66%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 66%, transparent); }

/* hills lifted from a barely-there 9% so the section has a horizon */
  .home-page .handled-section::after { height: 230px; opacity: .2; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {

.handled-vroute__progress { stroke-dashoffset: 0; }

/* the coach stays visible — reduced motion removes movement, not content */
  .handled-vroute__bus { transition: none; }
}

/* =========================================================
   Planner guide (mobile) — the character sat top-right, directly under the
   close button. Move it to the left and give the logo + speech bubble the
   remaining width, with the bubble tail pointing back at the character.
   ========================================================= */
@media (max-width: 760px) {

.home-page .calm-planner .planner-guide {
    min-height: 124px; display: block; overflow: hidden;
    padding: 12px 56px 12px 96px;   /* left: avatar lane · right: close button */
  }

.home-page .calm-planner .planner-guide__character {
    left: 2px; right: auto; bottom: -6px; top: auto;
    width: auto; height: 118px; max-width: none; margin: 0;
    object-fit: contain; object-position: bottom left; }

.home-page .calm-planner .planner-guide__logo {
    left: 96px; top: 12px; width: 104px !important; }

.home-page .calm-planner .planner-guide p.planner-guide__message {
    left: 96px; right: 14px; top: 50px; bottom: auto;
    min-height: 0; padding: 9px 12px; border-radius: 14px 14px 14px 14px;
    font-size: 0.76rem; line-height: 1.4; }

/* tail points left, at the character — it used to point down-right */
  .home-page .calm-planner .planner-guide p.planner-guide__message::after,
  .planner-guide__message::after {
    left: -6px; right: auto; top: 50%; bottom: auto;
    width: 12px; height: 12px; margin-top: -6px;
    border: 0; border-left: 1px solid rgba(21,59,46,.1); border-bottom: 1px solid rgba(21,59,46,.1);
    border-radius: 0 0 0 3px; background: rgba(255,253,248,.96); transform: rotate(45deg); }
}

@media (max-width: 620px) {

.home-page .calm-planner .planner-guide { min-height: 118px; padding: 10px 52px 10px 88px; }

.home-page .calm-planner .planner-guide__character { height: 108px; }

.home-page .calm-planner .planner-guide__logo { left: 88px; top: 10px; width: 96px !important; }

/* top must clear the 40px close button (7px inset + 40px = 47px) */
  .home-page .calm-planner .planner-guide p.planner-guide__message { left: 88px; right: 14px; top: 52px; font-size: 0.76rem; }
}

/* =========================================================
   Mobile hero — leaner content set (client direction, 2026-08-23)
   The headline and the "See destinations" CTA are dropped on phones. The
   h1 is visually hidden rather than display:none so the page keeps a real
   heading for crawlers and screen readers.
   ========================================================= */
@media (max-width: 760px) {

.cine-hero__headline h1 {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.cine-hero__headline { gap: 0; }

.cine-hero__cta-alt { display: none; }

.cine-hero__actions { width: auto; }

.cine-hero__cta { flex: 0 1 auto; padding-inline: 34px; }

/* with the headline gone the lead carries the message — give it room,
     and balance the wrap so the last word never orphans */
  .cine-hero__lead { font-size: 1rem; line-height: 1.5; max-width: 32ch; text-wrap: balance; }
}

/* =========================================================
   Art-directed hero still. The <video> has no poster attribute — the still
   is a media-scoped CSS background instead, so a phone fetches only the
   portrait crop and a desktop only the 16:9 frame. The video paints over it
   once hydrated.
   ========================================================= */
.cine-hero__video { background: #0b1a14; }

@media (max-width: 760px) {

/* the carousel supplies the imagery on phones — no wrapper background,
     otherwise the browser fetches a still nothing ever shows */
  .cine-hero__video { background-image: none; }
}

/* =========================================================
   Mobile hero — typewriter line (client direction, 2026-08-23)
   Replaces the lead sentence, region chips and hero CTA on phones. The
   sticky Call / WhatsApp / Plan Trip bar still carries conversion.
   Desktop keeps its headline, lead, chips and CTAs.
   ========================================================= */
.cine-hero__type { display: none; }

@media (max-width: 760px) {

.cine-hero__lead,
  .cine-hero__chips,
  .cine-hero__actions { display: none; }

.cine-hero__type {
    display: block; position: relative; margin: 0;
    /* two lines reserved so typing never shifts what sits below it */
    min-height: calc(2 * 1.45em);
    max-width: 22ch; margin-inline: auto;
    color: #fff; font-family: var(--home-display);
    font-size: clamp(1.25rem, 5.6vw, 1.6rem); font-weight: 600;
    line-height: 1.45; letter-spacing: -.01em; text-wrap: balance;
    text-shadow: 0 2px 22px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }

.cine-hero__caret {
    display: inline-block; width: 2px; height: 1.05em;
    margin-left: 3px; vertical-align: -.16em;
    background: var(--brand-orange); border-radius: 1px;
    animation: heroCaret 1.05s steps(1, end) infinite; }

@keyframes heroCaret {

0%, 45% { opacity: 1; }

46%, 100% { opacity: 0; }
}

/* the line still types; only the caret blink is suppressed */
@media (prefers-reduced-motion: reduce) {

.cine-hero__caret { animation: none; opacity: .85; }
}
}

/* =========================================================
   Hero carousel (<=760px) — destination slides with a slow push-in.
   Zoom and fade are transitions rather than keyframes, so a slide that is
   fading out eases back instead of snapping when its class is removed.
   ========================================================= */
.hero-carousel { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-carousel__slide { position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #0b1a14;
  opacity: 0; transform: scale(1.03); transition: opacity 1.5s ease; will-change: opacity, transform; }

.hero-carousel__slide.is-active { opacity: 1; animation: heroKen 9.5s linear forwards; }

@keyframes heroKen {

from { transform: scale(1.03); }

to { transform: scale(1.13); }
}

/* first slide is CSS-driven so exactly one crop is fetched per breakpoint */
.hero-carousel__slide:first-child { background-image: url("/assets/homepage/hero-slide-bali-wide.webp"); }

@media (max-width: 760px) {

.cine-hero__media { display: none; }

/* phones get slides, not the 16:9 loop */
  .hero-carousel { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-carousel__slide {
    position: absolute; inset: 0; z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    background-color: #0b1a14;
    opacity: 0; transform: scale(1.03);
    transition: opacity 1.5s ease;
    will-change: opacity, transform; }

/* keyframes, not a transition: the first slide carries .is-active in the
     markup, and a transition has no rendered start state to animate from */
  .hero-carousel__slide.is-active { opacity: 1; animation: heroKen 9.5s linear forwards; }

@keyframes heroKen {

from { transform: scale(1.03); }

to { transform: scale(1.13); }
}

/* first slide is set here, not inline, so it is only fetched on phones */
  .hero-carousel__slide:first-child { background-image: url("/assets/homepage/hero-slide-bali.webp"); }

/* progress pips, so the slideshow reads as deliberate rather than restless */
  .hero-carousel__pips {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }

.hero-carousel__pips li {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.38); transition: background .4s ease, width .4s ease; }

.hero-carousel__pips li.is-on { width: 16px; border-radius: 3px; background: var(--brand-orange); }
}

/* reduced motion: first slide only, no fade, no zoom *//* Reduced motion: no push-in (that is the vestibular trigger), but the
   crossfade stays so the hero still rotates. */
@media (prefers-reduced-motion: reduce) {

.hero-carousel__slide { transition: opacity 1s ease; }

.hero-carousel__slide.is-active { animation: none; transform: none; }
}

/* =========================================================
   Mobile hero — type scale. The set had drifted to 9–10px, below the
   comfortable reading floor on a phone, which read as unfinished.
   ========================================================= */
@media (max-width: 760px) {

.cine-hero__inner { gap: 18px; }

.cine-hero__eyebrow {
    font-size: 0.81rem; letter-spacing: .1em; font-weight: 700;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.26); background: rgba(10,24,18,.42);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.cine-hero__type {
    font-size: clamp(1.6rem, 7.4vw, 2.25rem); font-weight: 600;
    line-height: 1.32; max-width: 17ch;
    min-height: calc(2 * 1.32em); }

.cine-hero__caret { width: 3px; }

.cine-hero__includes { font-size: 0.87rem; font-weight: 500; gap: 6px 0; }

.cine-hero__includes li { padding-inline: 8px; }

.cine-hero__secure { font-size: 0.76rem; letter-spacing: .07em; }

.cine-hero__secure svg { width: 15px; height: 15px; }
}

/* narrow phones still need a step down, just not to 9px */
@media (max-width: 380px) {

.cine-hero__type { font-size: clamp(1.4rem, 7.2vw, 1.9rem); max-width: 16ch; }

.cine-hero__eyebrow { font-size: 0.76rem; padding: 7px 13px; }

.cine-hero__includes { font-size: 0.78rem; }

.cine-hero__includes li { padding-inline: 7px; }

.cine-hero__secure { font-size: 0.76rem; }
}

/* typing line centred in the viewport (client direction) */
@media (max-width: 760px) {

.cine-hero__inner { justify-content: center; justify-content: safe center; }
}

/* trust line: icon as a fixed flex item so a wrapped label cannot orphan it */
.cine-hero__secure { display: flex; align-items: center; justify-content: center; gap: 8px; }

.cine-hero__secure svg { flex: 0 0 auto; }

.cine-hero__secure span { text-wrap: balance; }

@media (max-width: 760px) {

.cine-hero__secure { max-width: 30ch; margin-inline: auto; align-items: flex-start; }

.cine-hero__secure svg { margin-top: .15em; }
}

/* =========================================================
   Destination region cards — compact on phones.
   The rail stretched every card to match the tallest (Karnataka, 12 places),
   which left short regions like Kerala mostly empty. Cards now size to their
   own content and long lists collapse behind "show all".
   ========================================================= */
@media (max-width: 760px) {

/* only the first few places show until the card is expanded */
}

/* final CTA background now ships as <picture> for per-breakpoint art direction */
.final-cta > picture { position: absolute; inset: 0; z-index: -2; display: block; }

.final-cta > picture img { width: 100%; height: 100%; object-fit: cover; }

/* Admin-published hero offer. Copy moves continuously while the WhatsApp
   action stays fixed and easy to tap on phones. */
.hero-offer { --offer-bg:#d95f1d; --offer-end:#f58b3b; --offer-duration:24s; position:absolute; left:clamp(16px,3vw,44px); right:clamp(16px,3vw,44px); bottom:22px; z-index:7; min-height:62px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:16px; background:linear-gradient(110deg,var(--offer-bg),var(--offer-end)); color:#fff; box-shadow:0 18px 50px rgba(0,0,0,.25); backdrop-filter:blur(14px); }

.hero-offer[hidden] { display:none; }

.hero-offer[data-theme="FOREST"] { --offer-bg:#123c2e; --offer-end:#2b7458; }

.hero-offer[data-theme="OCEAN"] { --offer-bg:#185f78; --offer-end:#2b91aa; }

.hero-offer__rail { min-width:0; overflow:hidden; display:flex; align-items:center; }

.hero-offer__track { width:max-content; display:flex; align-items:center; animation:heroOfferMarquee var(--offer-duration) linear infinite; will-change:transform; }

.hero-offer__item { min-width:max(620px,50vw); flex:none; display:flex; align-items:center; gap:14px; padding:0 34px 0 18px; white-space:nowrap; }

.hero-offer__item > b { padding:.3rem .5rem; border:1px solid rgba(255,255,255,.45); border-radius:999px; font-size: 0.76rem; letter-spacing:.08em; text-transform:uppercase; }

.hero-offer__item > strong { font:750 .82rem/1.2 var(--home-display); }

.hero-offer__item > span { color:rgba(255,255,255,.78); font-size: 0.76rem; }

.hero-offer__item > em { color:#fff; font-size: 0.76rem; font-style:normal; font-weight:750; }

.hero-offer__actions { min-width:190px; position:relative; z-index:2; display:flex; align-items:stretch; }

.hero-offer__actions > a { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-left:1px solid rgba(255,255,255,.22); background:rgba(8,31,23,.26); color:#fff; font-size: 0.77rem; font-weight:800; text-decoration:none; white-space:nowrap; transition:background .2s ease; }

.hero-offer__actions > a:hover { background:rgba(8,31,23,.42); }

.hero-offer__instagram { background:rgba(45,22,56,.62)!important; }

.cine-hero.has-announcement .cine-hero__inner { padding-bottom:112px; }

@keyframes heroOfferMarquee {

from { transform:translateX(0); }

to { transform:translateX(-50%); }
}

@media (max-width:760px) {

.hero-offer {
    left:8px; right:8px; bottom:calc(72px + env(safe-area-inset-bottom));
    min-height:98px; grid-template-columns:minmax(0,1fr); grid-template-rows:54px 44px;
    border-radius:15px; }

.hero-offer__rail { width:100%; border-bottom:1px solid rgba(255,255,255,.2); }

.hero-offer__item { min-width:calc(100vw - 16px); gap:10px; padding-inline:14px 28px; }

.hero-offer__item > b { flex:none; font-size: 0.76rem; }

.hero-offer__item > strong { font-size: 0.84rem; }

.hero-offer__item > span { display:none; }

.hero-offer__item > em { font-size: 0.76rem; }

.hero-offer__actions { min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }

.hero-offer__actions > a {
    min-width:0; min-height:44px; justify-content:space-between; padding:0 15px;
    border-left:0; background:rgba(8,31,23,.3); font-size: 0.8rem; line-height:1.2;
    text-align:left; white-space:nowrap; }

.cine-hero.has-announcement .cine-hero__inner { padding-bottom:calc(192px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) {

.hero-offer__track { animation:none; }

.hero-offer__item[aria-hidden="true"] { display:none; }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce) {

.hero-offer__track { width:100%; }

.hero-offer__item {
    width:100%; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto; gap:2px 9px; white-space:normal; }

.hero-offer__item > b { grid-row:1 / span 2; align-self:center; }

.hero-offer__item > strong,
  .hero-offer__item > em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Instagram-linked campaigns open as a focused trip advertisement. */
.campaign-dialog { width:min(94vw,980px); max-height:min(92svh,760px); margin:auto; padding:0; overflow:hidden; border:0; border-radius:26px; background:#fff; color:#17251e; box-shadow:0 35px 120px rgba(0,0,0,.48); }

.campaign-dialog::backdrop { background:rgba(4,13,8,.78); backdrop-filter:blur(8px); }

.campaign-dialog__close { position:absolute; z-index:4; top:14px; right:14px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(9,28,20,.78); color:#fff; font-size:1.55rem; line-height:1; cursor:pointer; }

.campaign-dialog__layout { min-height:620px; display:grid; grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr); }

.campaign-dialog__instagram { min-width:0; position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; background:#f2f0ec; }

.campaign-dialog__loading { position:absolute; inset:0 0 42px; display:grid; place-items:center; color:#68746d; font-size: 0.83rem; }

.campaign-dialog__instagram iframe { width:100%; height:100%; min-height:570px; position:relative; z-index:1; border:0; background:#fff; }

.campaign-dialog__instagram > a { min-height:50px; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:10px 18px; background:#2d1638; color:#fff; font-size: 0.81rem; font-weight:800; text-decoration:none; }

.campaign-dialog__content { --campaign-start:#d95f1d; --campaign-end:#f58b3b; display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,5vw,64px); background:linear-gradient(145deg,var(--campaign-start),var(--campaign-end)); color:#fff; }

.campaign-dialog[data-theme="FOREST"] .campaign-dialog__content { --campaign-start:#123c2e; --campaign-end:#2b7458; }

.campaign-dialog[data-theme="OCEAN"] .campaign-dialog__content { --campaign-start:#185f78; --campaign-end:#2b91aa; }

.campaign-dialog__label { width:max-content; max-width:100%; padding:.38rem .65rem; border:1px solid rgba(255,255,255,.52); border-radius:999px; font-size: 0.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

.campaign-dialog__eyebrow { margin:1.5rem 0 .55rem; color:rgba(255,255,255,.72); font-size: 0.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }

.campaign-dialog__content h2 { margin:0; font:800 clamp(2rem,4vw,3.4rem)/1.02 var(--home-display); letter-spacing:-.045em; }

.campaign-dialog__content > p:not(.campaign-dialog__eyebrow) { margin:1rem 0 0; color:rgba(255,255,255,.82); font-size: 0.98rem; line-height:1.65; }

.campaign-dialog__details { display:grid; gap:0; margin:1.6rem 0 0; border-top:1px solid rgba(255,255,255,.25); }

.campaign-dialog__details > div { display:grid; grid-template-columns:100px 1fr; gap:16px; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.18); }

.campaign-dialog__details dt { color:rgba(255,255,255,.68); font-size: 0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

.campaign-dialog__details dd { margin:0; font-size: 0.83rem; font-weight:800; }

.campaign-dialog__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:1.5rem; }

.campaign-dialog__actions a,.campaign-dialog__actions button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; padding:.7rem 1rem; background:#fff; color:#163c2f; font:800 .74rem/1.2 var(--home-display); text-decoration:none; cursor:pointer; }

.campaign-dialog__actions button { background:rgba(8,31,23,.28); color:#fff; outline:1px solid rgba(255,255,255,.28); }

@media (max-width:760px) {

.campaign-dialog { width:100%; max-width:none; max-height:94svh; margin:auto 0 0; overflow:auto; border-radius:24px 24px 0 0; }

.campaign-dialog__layout { min-height:0; display:flex; flex-direction:column; }

.campaign-dialog__instagram { min-height:48svh; order:2; overflow:visible; }

.campaign-dialog__instagram iframe { min-height:48svh; }

.campaign-dialog__content { order:1; padding:32px 22px 24px; }

.campaign-dialog__eyebrow { margin-top:1rem; }

.campaign-dialog__content h2 { max-width:90%; font-size:2rem; }

.campaign-dialog__content > p:not(.campaign-dialog__eyebrow) { font-size: 0.87rem; line-height:1.5; }

.campaign-dialog__details { margin-top:1rem; }

.campaign-dialog__actions { margin-top:1rem; }

.campaign-dialog__actions a,.campaign-dialog__actions button { flex:1 1 145px; }
}

/* the typed lines are longer now — reserve three lines so nothing shifts */
@media (max-width: 760px) {

.cine-hero__type { max-width: 20ch; min-height: calc(3 * 1.32em); }
}

@media (max-width: 380px) {

.cine-hero__type { max-width: 19ch; }
}

/* =========================================================
   Region cards — even tiles.
   Sizing each card to its own content removed the dead space but left the
   rail ragged. Equal heights are restored, and the internals are aligned so
   the extra room goes to one flexible gap rather than a random edge.
   ========================================================= */
@media (max-width: 760px) {

/* two lines for every note, so a short one cannot shrink its card */

/* hard-clamp to two rows: at narrow widths long place names wrapped to a
     third row and dragged every card taller */

/* the prompt sits on the base line of every card */
}

/* =========================================================
   Tour card gallery — crossfading shots for tours with a `gallery`
   ========================================================= */
.jrn-shots { position: absolute; inset: 0; overflow: hidden; }

.jrn-shots__slide {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: #0b1a14;
  opacity: 0; transform: scale(1.02);
  transition: opacity 1.1s ease;
  will-change: opacity, transform; }

.jrn-shots__slide.is-active { opacity: 1; animation: jrnShotKen 6s linear forwards; }

@keyframes jrnShotKen {

from { transform: scale(1.02); }

to { transform: scale(1.09); }
}

/* the panel's own hover zoom targets img — keep the equivalent for slides */
.jrn-panel:hover .jrn-shots__slide.is-active,
.jrn-panel:focus-within .jrn-shots__slide.is-active { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {

.jrn-shots__slide.is-active { animation: none; transform: none; }
}

/* =========================================================
   Destination packages — states and countries now open into
   ready-made packages (duration, route, day plan) instead of a
   flat list of place names. Replaces the old .dindex explorer.
   ========================================================= */
.destination-packages { overflow: clip; background: var(--surface-muted); }
.pkgx { margin-top: clamp(26px, 4vw, 42px); }


.pkgx__stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.pkgx__slider { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: rgba(21, 59, 46, .08); box-shadow: var(--home-shadow); }
.pkgx__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--home-ease), transform 6s linear; }
.pkgx__slide.is-active { opacity: 1; transform: scale(1); }
.pkgx__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkgx__slider--empty { display: grid; place-content: center; gap: 4px; text-align: center; background: linear-gradient(140deg, #1c3528, #153b2e 55%, #2b5340); color: rgba(255, 255, 255, .92); }
.pkgx__slider--empty span { font-family: var(--home-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pkgx__slider--empty small { font-size: 0.83rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.pkgx__slide-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .86); color: var(--brand-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .25s var(--home-ease), background .25s; }
.pkgx__slide-nav--prev { left: 12px; }
.pkgx__slide-nav--next { right: 12px; }
.pkgx__slider:hover .pkgx__slide-nav, .pkgx__slide-nav:focus-visible { opacity: 1; }
.pkgx__slide-nav:hover { background: #fff; }
.pkgx__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 7px; }
.pkgx__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s var(--home-ease), background .3s; }
.pkgx__dots button[aria-selected="true"] { width: 22px; border-radius: 4px; background: #fff; }

.pkgx__stage-eyebrow { margin: 0 0 .4rem; font-size: 0.76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); }
.pkgx__stage-title { margin: 0 0 .6rem; font-family: var(--home-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.08; color: var(--text-primary); }
.pkgx__stage-blurb { margin: 0; max-width: 54ch; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
.pkgx__facts { display: grid; gap: 12px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-soft); }
.pkgx__facts div { display: grid; grid-template-columns: 138px 1fr; gap: 12px; align-items: baseline; }
.pkgx__facts dt { font-size: 0.76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.pkgx__facts dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--text-primary); }

/* --- package cards --- */
.pkgx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pkgc { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 20px; background: var(--surface); transition: transform .35s var(--home-ease), box-shadow .35s var(--home-ease); }
.pkgx__grid.is-in .pkgc { animation: pkgcUp .5s var(--home-ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes pkgcUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pkgc:hover { transform: translateY(-4px); box-shadow: var(--home-shadow); }
.pkgc[data-pkg-open] { cursor: pointer; }
.pkgc--custom { border-style: dashed; border-color: rgba(244, 119, 33, .45); background: linear-gradient(180deg, rgba(244, 119, 33, .06), var(--surface) 42%); }

/* The image is taken out of flow: aspect-ratio alone is only a preference, so
   a portrait photo (Munnar is 1068x1600) would otherwise stretch the card. */
.pkgc__media { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(21, 59, 46, .1); }
.pkgc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pkgc__media-fallback { position: absolute; inset: 0; display: grid; place-content: center; background: linear-gradient(140deg, #1c3528, #153b2e); color: rgba(255, 255, 255, .8); font-family: var(--home-display); font-weight: 800; font-size: 1.3rem; }
.pkgc__duration { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--brand-primary); font-size: 0.78rem; font-weight: 800; letter-spacing: .04em; }

.pkgc__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 18px 18px 16px; }
.pkgc__style { margin: 0; font-size: 0.76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-orange); }
.pkgc__title { margin: 0; font-family: var(--home-display); font-weight: 800; font-size: 1.22rem; line-height: 1.25; color: var(--text-primary); }
.pkgc__route { margin: 0; font-size: 0.87rem; font-weight: 700; color: var(--brand-primary); }
/* two lines, so a long summary cannot make one card tower over its row */
.pkgc__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--text-secondary); font-size: 0.93rem; line-height: 1.55; }

.pkgc__incl { margin: 0; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; }
.pkgc__incl span { margin-right: .3rem; color: var(--brand-primary); font-size: 0.76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pkgc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pkgc__link { margin-right: auto; border: 0; background: transparent; padding: 8px 2px; color: var(--brand-primary); font-family: var(--home-body); font-weight: 700; font-size: 0.87rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pkgc__link:hover { color: var(--brand-orange); }
/* the primary action hands straight over to WhatsApp, so it says so */
.pkgc__cta { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 10px 17px; background: var(--brand-primary); color: #fff; font-family: var(--home-body); font-weight: 700; font-size: 0.87rem; text-decoration: none; cursor: pointer; transition: background .25s var(--home-ease), transform .25s var(--home-ease); }
.pkgc__cta:hover { background: #1f9d50; transform: translateY(-1px); }
.pkgc__cta svg { flex: none; }

/* --- itinerary dialog --- */
.pkgd { width: min(760px, 100%); max-width: 100%; max-height: 100%; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.pkgd::backdrop { background: rgba(10, 22, 16, .62); backdrop-filter: blur(3px); }
.pkgd__panel { position: relative; max-height: 90dvh; overflow-y: auto; padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 38px) 0; border-radius: var(--radius); background: var(--surface); box-shadow: 0 40px 100px rgba(10, 22, 16, .4); }
.pkgd__close { position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(21, 59, 46, .08); color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pkgd__close:hover { background: rgba(21, 59, 46, .16); }

.pkgd__head { margin-bottom: 22px; padding-right: 44px; }
.pkgd__eyebrow { margin: 0 0 .35rem; font-size: 0.76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); }
.pkgd__head h2 { margin: 0 0 .6rem; font-family: var(--home-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; color: var(--text-primary); }
.pkgd__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pkgd__meta span { padding: 5px 11px; border-radius: 999px; background: rgba(21, 59, 46, .07); font-size: 0.83rem; font-weight: 700; color: var(--brand-primary); }

.pkgd__block { margin-bottom: 24px; }
.pkgd__block h3 { margin: 0 0 .7rem; font-size: 0.82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.pkgd__block--split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }

.pkgd__route { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: stop; }
.pkgd__route li { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-muted); }
.pkgd__route strong { font-size: 0.98rem; color: var(--text-primary); }
.pkgd__route span { font-size: 0.78rem; font-weight: 700; color: var(--brand-orange); }

.pkgd__days { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pkgd__days li { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.pkgd__days li:last-child { border-bottom: 0; }
.pkgd__day { font-size: 0.76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-orange); padding-top: 2px; }
.pkgd__days strong { display: block; margin-bottom: .25rem; font-size: 1.04rem; color: var(--text-primary); }
.pkgd__days p { margin: 0; color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; }

.pkgd__highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pkgd__highlights li { padding: 6px 12px; border-radius: 999px; background: var(--surface-muted); color: var(--text-primary); font-size: 0.87rem; font-weight: 600; }

.pkgd__includes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pkgd__includes li { position: relative; padding-left: 20px; color: var(--text-secondary); font-size: 0.93rem; }
.pkgd__includes li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-green); font-weight: 800; }
.pkgd__ideal { margin: 0; color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; }

.pkgd__note { margin: 0 0 18px; color: var(--text-secondary); font-size: 0.83rem; line-height: 1.5; }
/* the booking action stays in reach however far down the day plan someone reads */
.pkgd__foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 calc(-1 * clamp(24px, 4vw, 38px)); padding: 14px clamp(24px, 4vw, 38px) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); background: var(--surface); box-shadow: 0 -12px 28px -18px rgba(10, 22, 16, .35); }
.pkgd__foot-title { margin: 0; font-weight: 800; color: var(--text-primary); font-size: 0.95rem; }
.pkgd__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pkgd__wa { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pkgd__alt { background: none; border: 0; padding: 0; color: var(--text-secondary); font-family: var(--home-body); font-size: 0.83rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pkgd__alt:hover { color: var(--brand-orange); }


@media (max-width: 980px) {
  .pkgx__slider { aspect-ratio: 16 / 9; }
  .pkgx__slide-nav { opacity: 1; }
  .pkgd__block--split { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  .destinations-section .section-intro { text-align: left; }
  .pkgx__facts div { grid-template-columns: 1fr; gap: 2px; }
  .pkgx__grid { grid-template-columns: 1fr; }
  .pkgd { width: 100%; }
  .pkgd__panel { max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .pkgd__days li { grid-template-columns: 1fr; gap: 4px; }
  .pkgd__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .pkgd__foot-title { display: none; }
  .pkgd__actions { align-items: stretch; }
  .pkgd__wa { justify-content: center; }
  .pkgd__alt { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pkgx__grid.is-in .pkgc { animation: none; }
  .pkgc:hover { transform: none; }
  .pkgx__slide { transition: opacity .2s linear; transform: none; }
  .pkgx__slide.is-active { transform: none; }
}

/* =========================================================
   Homepage teaser — real trips first, browsing second.
   ========================================================= */
.trip-teaser__swipe { display: none; margin: 10px 0 0; color: var(--text-secondary); font-size: 0.81rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trip-teaser__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(24px, 3vw, 36px); padding: clamp(20px, 2.5vw, 28px); border: 1px dashed var(--border-soft); border-radius: 20px; background: rgba(255, 255, 255, .5); }
.trip-teaser__more strong { display: block; font-family: var(--home-display); font-weight: 800; font-size: 1.12rem; color: var(--text-primary); }
.trip-teaser__more span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 0.91rem; }

/* =========================================================
   /packages — the destination browser, and one page per
   destination. Choosing a place is a navigation now, not a
   re-render below the fold.
   ========================================================= */
.packages-page { background: var(--surface-muted); }
.packages-page #main { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 48px)); padding-bottom: clamp(60px, 8vw, 110px); }
.pkgpage__loading { padding: 18vh 24px; text-align: center; color: var(--text-secondary); }

.pkgpage__head { padding-bottom: clamp(26px, 4vw, 44px); }
.pkgpage__head h1, .pkgpage__error h1 { margin: .3rem 0 .7rem; font-family: var(--home-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; color: var(--text-primary); }
.pkgpage__lead { margin: 0; max-width: 58ch; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; }

/* --- /packages filters --- */
.pkgf { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 clamp(28px, 4vw, 42px); padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--surface); }
.pkgf fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pkgf legend { margin-bottom: 8px; padding: 0; color: var(--text-secondary); font-size: 0.76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pkgf fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pkgf__chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--border-soft); border-radius: 999px; background: transparent; color: var(--text-primary); font-family: var(--home-body); font-size: 0.87rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.pkgf__chip:hover { border-color: var(--brand-primary); }
.pkgf__chip[aria-pressed="true"] { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.pkgf__chip:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.pkgf__results { margin-bottom: clamp(38px, 5vw, 62px); }
.pkgf__results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.pkgf__results-head h2 { margin: 0; font-family: var(--home-display); font-weight: 800; font-size: 1.5rem; color: var(--text-primary); }
.pkgf__clear { border: 0; background: none; padding: 6px 0; color: var(--brand-primary); font-family: var(--home-body); font-size: 0.9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pkgf__empty { color: var(--text-secondary); }
.pkgf__empty a { color: var(--brand-primary); font-weight: 700; }
@media (max-width: 760px) {
  .pkgf { flex-direction: column; padding: 14px; }
  .pkgf fieldset > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .pkgf fieldset > div::-webkit-scrollbar { display: none; }
  .pkgf__chip { flex: none; }
}
.pkgpage__error { padding: 14vh 0; text-align: center; }
.pkgpage__error p { color: var(--text-secondary); }

.pkgidx__group { margin-bottom: clamp(38px, 5vw, 62px); }
.pkgidx__group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.pkgidx__group-head h2 { margin: 0; font-family: var(--home-display); font-weight: 800; font-size: 1.5rem; color: var(--text-primary); }
.pkgidx__group-head p { margin: 0; color: var(--text-secondary); font-size: 0.91rem; font-weight: 600; }
.pkgidx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }

/* destination card */
.dcard { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none; transition: transform .3s var(--home-ease), box-shadow .3s var(--home-ease); }
.dcard:hover { transform: translateY(-4px); box-shadow: var(--home-shadow); }
.dcard__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(21, 59, 46, .1); }
.dcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--home-ease); }
.dcard:hover .dcard__media img { transform: scale(1.04); }
.dcard__media-fallback { position: absolute; inset: 0; display: grid; place-content: center; background: linear-gradient(140deg, #1c3528, #153b2e); color: rgba(255, 255, 255, .82); font-family: var(--home-display); font-weight: 800; font-size: 1.15rem; }
.dcard__body { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 15px 16px 14px; }
.dcard__name { font-family: var(--home-display); font-weight: 800; font-size: 1.16rem; color: var(--text-primary); }
.dcard__note { color: var(--text-secondary); font-size: 0.89rem; line-height: 1.45; }
.dcard__count { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 0.83rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-orange); }
.dcard__count em { font-style: normal; font-size: 1rem; transition: transform .3s var(--home-ease); }
.dcard:hover .dcard__count em { transform: translateX(4px); }

/* one destination */
.pkgr__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 0.87rem; font-weight: 600; color: var(--text-secondary); }
.pkgr__crumbs a { color: var(--text-secondary); text-decoration: none; }
.pkgr__crumbs a:hover { color: var(--brand-orange); text-decoration: underline; }
.pkgr__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: clamp(38px, 5vw, 62px); }
.pkgr__eyebrow { margin: 0 0 .4rem; font-size: 0.76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); }
.pkgr__copy h1 { margin: 0 0 .6rem; font-family: var(--home-display); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.08; color: var(--text-primary); }
.pkgr__blurb { margin: 0; max-width: 54ch; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }

.pkgr__trips { margin-bottom: clamp(38px, 5vw, 62px); }
.pkgr__trips h2, .pkgr__places h2, .pkgr__more h2 { margin: 0 0 18px; font-family: var(--home-display); font-weight: 800; font-size: 1.5rem; color: var(--text-primary); }

.pkgr__places { margin-bottom: clamp(30px, 4vw, 48px); }
.pkgr__places ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pkgr__places li { padding: 7px 14px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); font-size: 0.91rem; font-weight: 600; color: var(--text-primary); }

.pkgr__more ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.pkgr__more a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-size: 0.93rem; font-weight: 700; text-decoration: none; transition: background .25s var(--home-ease), color .25s; }
.pkgr__more a:hover { background: var(--brand-primary); border-color: transparent; color: #fff; }
.pkgr__more a span { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); }
.pkgr__more a:hover span { color: rgba(255, 255, 255, .72); }
.pkgr__all { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-primary); font-weight: 700; font-size: 0.98rem; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .pkgr__head { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  /* Six stacked cards was six screens of scrolling inside one section, which
     is what made this part of the page feel endless. On phones the featured
     trips become a swipe rail instead, so the section stays about a screen. */
  .trip-teaser .pkgx__grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; }
  .trip-teaser .pkgx__grid::-webkit-scrollbar { display: none; }
  .trip-teaser .pkgc { flex: 0 0 82%; scroll-snap-align: start; }
  .trip-teaser__swipe { display: block; }
  .trip-teaser__more { flex-direction: column; align-items: stretch; text-align: left; }
  .trip-teaser__more .button { justify-content: center; }
  .pkgidx__grid { grid-template-columns: 1fr 1fr; }
  .dcard__body { padding: 12px 13px 12px; }
  .dcard__name { font-size: 1rem; }
  .dcard__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.83rem; }
  .dcard__count { font-size: 0.76rem; }
}

@media (max-width: 420px) {
  .pkgidx__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Route stop arrival — the coach pulling in should be felt,
   not just switched on. Desktop only; the phone route already
   reads well and does not need the extra motion.
   ========================================================= */
@media (min-width: 761px) {
  .handled-route li.is-active span {
    /* settles on the same scale and shadow the static rule sets, so there is
       no jump when the arrival animation finishes */
    animation: routeArrive .62s var(--home-ease) both, routeGlow 2.6s .62s ease-in-out infinite;
  }

  /* a ring that expands out of the marker each time the coach pulls in */
  .handled-route li.is-active span::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--brand-orange);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: routePing 1.15s var(--home-ease);
  }

  .handled-route li.is-active strong { animation: routeLabel .55s var(--home-ease) both; }

  @keyframes routeArrive {
    0%   { transform: scale(1);    box-shadow: 0 8px 25px rgba(21,59,46,.09); }
    45%  { transform: scale(1.34); box-shadow: 0 0 0 9px rgba(244,119,33,.16), 0 14px 32px -8px rgba(244,119,33,.85); }
    100% { transform: scale(1.2);  box-shadow: 0 12px 26px -8px rgba(244,119,33,.7); }
  }

  @keyframes routeGlow {
    0%, 100% { box-shadow: 0 12px 26px -8px rgba(244,119,33,.7), 0 0 0 0 rgba(244,119,33,.34); }
    50%      { box-shadow: 0 12px 30px -8px rgba(244,119,33,.9), 0 0 0 7px rgba(244,119,33,.12); }
  }

  @keyframes routePing {
    0%   { transform: scale(.78); opacity: .85; }
    65%  { opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
  }

  @keyframes routeLabel {
    0%   { transform: translateY(4px); opacity: .55; }
    100% { transform: none; opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .handled-route li.is-active span,
  .handled-route li.is-active span::after,
  .handled-route li.is-active strong { animation: none; }
}

/* =========================================================
   Home header fit. The transparent pill nav already sat within
   a few pixels of the shell edge; at a 17px base it overflowed
   by ~120px and the last links were cut off. The width comes
   back from tracking and gaps, not from shrinking the labels.
   ========================================================= */
@media (min-width: 1025px) {
  .home-page .nav-wrap { gap: 1.1rem; }
  .home-page .home-header:not(.is-scrolled) .desktop-nav { gap: 2px; }
  .home-page .home-header:not(.is-scrolled) .desktop-nav a { padding-inline: 11px; letter-spacing: .02em; }
  .home-page .home-header.is-scrolled .desktop-nav { gap: clamp(.9rem, 1.6vw, 1.4rem); }
}

/* =========================================================
   Ways to travel — each style now opens onto the trips that
   suit it, on its own tour page.
   ========================================================= */
.jrn-panel__go { font-weight: 800; }
.jrn-panel__actions button.jrn-panel__go { border: 0; background: none; padding: 0; font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }

.trip-style { background: var(--surface-muted); }
.trip-style .section-heading { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.trip-style .section-heading h2 { font-family: var(--home-display); font-weight: 800; }
.trip-style__note { margin: clamp(22px, 3vw, 32px) 0 0; color: var(--text-secondary); font-size: 0.92rem; }
.trip-style__note a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* the tour pages set their own type family, so pin the cards to the one the
   rest of the package UI uses */
.detail-page .pkgc, .detail-page .pkgd { font-family: var(--home-body); }
.detail-page .pkgc__title, .detail-page .pkgd__head h2 { font-family: var(--home-display); }

/* a long style list shows a screenful first, the rest on request */
/* nth-child cannot take calc(), so the cap is a literal that detail.js matches */
.pkgx__grid.is-capped .pkgc:nth-child(n + 10) { display: none; }
.trip-style__more { display: block; margin: clamp(20px, 3vw, 28px) auto 0; padding: 12px 26px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--brand-primary); font-family: var(--home-body); font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: background .25s var(--home-ease), color .25s; }
.trip-style__more:hover { background: var(--brand-primary); border-color: transparent; color: #fff; }

/* The whole journey card is clickable. Only "See N trips" used to be, which
   made the rest of the card look inert. __inner is absolutely positioned above
   the media, so a stretched pseudo-element on the link could only ever cover
   the text block — hence a real hit layer on the panel, with the copy made
   click-through and the actual controls kept live above it. */
.jrn-panel__hit { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: none; cursor: pointer; }
.jrn-panel__cat { pointer-events: none; }
.jrn-panel__inner { pointer-events: none; }
.jrn-panel__actions { pointer-events: auto; }

/* The trips teaser and "Ways to travel" sit on the same background; two full
   section paddings back to back read as an empty band, so tighten the seam. */
.home-page .trip-teaser { padding-bottom: clamp(36px, 4vw, 56px); }
.home-page .trip-teaser + .journeys-section { padding-top: clamp(28px, 3vw, 44px); }

/* /about: the bus route follows the article */
.about-handled .handled-section { padding-block: clamp(56px, 7vw, 96px); }