/* ==========================================================================
   RP Travel Group — design tokens
   Colors are overridden live by the Customizer (inc/customizer.php);
   these are the same real brand values as fallback.
   ========================================================================== */
:root {
	--color-primary: #04366B;
	--color-accent: #FFD11A;
	--color-slate: #6D8AAE;
	--color-surface: #FFFFFF;
	--color-ink: #12181F;
	--color-ink-soft: #5A6472;
	--color-border: #E4E8EC;
	--color-surface-alt: #F6F7F9;

	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-wordmark: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px rgba(0, 20, 40, 0.08);
	--shadow-md: 0 8px 28px rgba(0, 20, 40, 0.12);

	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 32px;
	--space-xl: 64px;

	--max-width: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
	background: var(--color-surface);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	line-height: 1.15;
	margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 var(--space-md); }
a { color: var(--color-primary); }

/* height:auto matters as much as max-width here: WordPress prints its own
   width/height HTML attributes on every image (e.g. get_the_post_thumbnail),
   and without an explicit height rule the browser treats that HTML height
   as fixed -- so a narrowing container (any responsive grid/column) shrinks
   the image's width but not its height, visibly stretching it. */
img { max-width: 100%; height: auto; display: block; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.skip-link:focus { left: 0; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: var(--color-primary);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-md);
}

/* Buttons ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--accent { background: var(--color-accent); color: var(--color-primary); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--large { padding: 16px 32px; font-size: 1.05rem; }

/* Header ---------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	/* Must stay above .mobile-nav (z-index:200) -- the sliding panel is
	   position:fixed with an opaque background starting at top:0, so with a
	   lower z-index here the header (and the hamburger button inside it)
	   gets painted over the instant the panel opens, even though the panel
	   pads its own content down to visually clear the header height. */
	z-index: 210;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
}
.site-logo { display: flex; align-items: center; }
.site-logo__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.site-logo__mark {
	/* Icon-only mark (the wordmark below it in the source file is dropped
	   here and rendered as real text instead, see .site-logo__text) --
	   freed from needing to fit cramped text inside the same raster, so it
	   can run large and stay crisp at any size rather than being scaled
	   down until the wordmark is legible. */
	height: 76px;
	width: auto;
	max-width: none;
	display: block;
}
.site-logo__divider {
	/* Brand lockup divider between the icon and the wordmark, per the
	   primary lockup in the logo system (icon | divider | wordmark). */
	width: 2px;
	align-self: stretch;
	background: #FFD11A;
	border-radius: 2px;
	flex-shrink: 0;
}
.site-logo__text-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.site-logo__text {
	font-family: var(--font-wordmark);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: 1.5rem;
	line-height: 1.05;
	color: var(--color-primary);
	white-space: nowrap;
}
.site-logo__tagline {
	font-family: var(--font-wordmark);
	font-weight: 500;
	font-size: 0.6rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-slate);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.site-logo__mark { height: 50px; }
	.site-logo__link { gap: 8px; }
	.site-logo__text { font-size: 1.05rem; }
	/* The bar itself only holds logo + hamburger at this width (nav/CTA
	   move into the slide-down panel, see the mobile-nav rules below), so
	   the full lockup -- tagline included -- fits without crowding. */
	.site-logo__tagline { font-size: 0.52rem; letter-spacing: 0.2em; }
}
@media (max-width: 360px) {
	/* Only the narrowest phones actually risk crowding the hamburger --
	   trim the mark a touch further there rather than hiding the wordmark
	   outright. */
	.site-logo__mark { height: 42px; }
	.site-logo__text { font-size: 0.92rem; }
	.site-logo__tagline { font-size: 0.46rem; letter-spacing: 0.14em; }
}
.primary-nav__list {
	list-style: none;
	display: flex;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
}
.primary-nav__list a {
	text-decoration: none;
	color: var(--color-ink);
	font-weight: 500;
}
.primary-nav__list a:hover { color: var(--color-primary); }
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}
.language-switcher ul {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.language-switcher li { display: flex; }
.language-switcher a {
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-ink-soft);
}
.language-switcher a:hover,
.language-switcher .lang-item-current a,
.language-switcher li.lang-item-current a {
	color: var(--color-primary);
}

/* The flythrough hero's own buttons (built by the scroll-world engine, see
   assets/js/scroll-world-engine.js) live inside a low-priority @layer, so
   any unlayered rule here -- including the global `a { color }` below --
   would otherwise silently win and wash out their text. Pin them back to
   readable colors explicitly. */
.sw-copy__cta .sw-btn--primary { color: #fff; }
.sw-copy__cta .sw-btn--ghost { color: var(--sw-ink, var(--color-primary)); }

/* Layout helpers --------------------------------------------------------- */
.section { padding: var(--space-xl) 24px; }
.section__inner { max-width: var(--max-width); margin: 0 auto; }
.section__inner--narrow { max-width: 720px; }
.section__inner--center { text-align: center; }
.section__inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.section--overview, .section--values { background: var(--color-surface-alt); }
.section__lead { font-size: 1.15rem; color: var(--color-ink-soft); max-width: 720px; }

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; min-height: 70vh; display: flex; align-items: center; }
.hero--static, .hero--empty {
	background: linear-gradient(135deg, var(--color-primary), #001c33);
	color: #fff;
}
.hero__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0.35;
}
.hero__inner {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-xl) 24px;
}
.hero--static .eyebrow, .hero--empty .eyebrow { background: var(--color-accent); color: var(--color-primary); }
.hero--static h1, .hero--empty h1 { color: #fff; }
.hero__verse { font-style: italic; font-size: 1.15rem; max-width: 560px; opacity: 0.9; }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.hero--static .btn--ghost { border-color: #fff; color: #fff; }

/* Hero: video (home page) -------------------------------------------------- */
.hero--video {
	min-height: 92vh;
	min-height: 92dvh;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	background: var(--color-primary); /* shows instantly while the video decodes */
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.hero-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Content now sits in the middle third (.hero--video is centered, see
	   above), so the darkening needs to reach the middle of the frame too --
	   a radial vignette centered on the frame keeps the very top and bottom
	   edges clearest, still without washing over the whole video. */
	background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--color-primary) 48%, black) 0%, transparent 72%);
}
.hero--video .hero__inner {
	z-index: 2;
	padding: var(--space-xl) 24px;
	width: 100%;
}
.hero__inner--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.hero--video h1 {
	color: #fff;
	max-width: 16ch;
	text-shadow: 0 4px 32px color-mix(in srgb, var(--color-primary) 65%, black);
}
.hero-video__tagline {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	margin-top: -6px;
	text-shadow: 0 2px 16px color-mix(in srgb, var(--color-primary) 70%, black);
}
.hero__actions--center { justify-content: center; align-items: center; }
.hero-video__link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	text-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 70%, black);
	padding: 8px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.hero-video__link:hover { border-color: #fff; }
.hero-video__scrollcue {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 4vh, 40px);
	transform: translateX(-50%);
	z-index: 2;
	width: 22px;
	height: 34px;
	border-radius: 12px;
	border: 2px solid color-mix(in srgb, #fff 55%, transparent);
}
.hero-video__scrollcue span {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 7px;
	border-radius: 2px;
	background: var(--color-accent);
	transform: translateX(-50%);
	animation: hero-video-scrollcue 1.7s ease-in-out infinite;
}
@keyframes hero-video-scrollcue { 0% { opacity: 0; top: 6px; } 40% { opacity: 1; } 100% { opacity: 0; top: 17px; } }

@media (max-width: 860px) {
	.hero--video { min-height: 88vh; min-height: 88dvh; }
	.hero--video .hero__inner { padding: var(--space-lg) 20px; }
	.hero--video h1 { max-width: 13ch; }
	.hero__actions--center { flex-direction: column; width: 100%; max-width: 340px; }
	.hero__actions--center .btn { width: auto; }
	.hero-video__scrollcue { bottom: calc(18px + env(safe-area-inset-bottom)); }
	/* The radial-gradient vignette in .hero-video__overlay is tuned for a
	   wide desktop crop -- on a narrow/tall mobile crop of the same video
	   it reads as a smudgy dark blob behind the headline instead of an
	   even darkening. The per-element text-shadow on the heading/tagline/
	   link already carries legibility here, so just drop the overlay. */
	.hero-video__overlay { background: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-video { display: none; }
	.hero--video { background: var(--color-primary) url('../images/home-hero-poster.jpg') center / cover no-repeat; }
	.hero-video__scrollcue { display: none; }
}

.trip-price-card {
	margin-top: var(--space-xl);
	background: #fff;
	color: var(--color-ink);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 320px;
	box-shadow: var(--shadow-md);
}
.trip-price-card__label { font-size: 0.85rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.trip-price-card__amount { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900; color: var(--color-primary); }
.trip-price-card__note { font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: 8px; }
.trip-price-card__line { font-size: 0.9rem; }

.scroll-world-mount {
	min-height: 100vh;
	/* #scroll-world is a direct flex child of .hero (display:flex;
	   align-items:center), sized by its own content on the cross axis.
	   The mobile video-wrap variant fills it with nothing but
	   position:absolute layers (scrim/video/label), which don't
	   contribute to content size at all -- left to flex's default
	   sizing, the mount collapses to a 0-width box and the whole hero
	   goes blank. Force it to fill the hero regardless of axis. */
	width: 100%;
	align-self: stretch;
}

/* Offer / trust / testimonial grids --------------------------------------- */
.offer-grid, .trust-grid, .highlight-grid, .stay-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}
.offer-card, .highlight-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}
.highlight-card {
	padding: 0;
	overflow: hidden;
}
.highlight-card__media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.highlight-card__media img,
.highlight-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.highlight-card__body { padding: var(--space-lg); }
.trust-stat {
	text-align: center;
	padding: var(--space-lg);
}
.trust-stat__number {
	display: block;
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 900;
	color: var(--color-primary);
}
.trust-stat__label { color: var(--color-ink-soft); }

/* Stay cards: region photo as background, muted/grayscale by default,
   blooming into full color with a white-text overlay on hover (desktop)
   or once scrolled into view (touch -- see the (hover: none) block below,
   keyed off the same [data-reveal].is-revealed class the site already
   uses for scroll-triggered entrance animations, so no extra JS is
   needed to detect "scrolled into view" on top of what's already there). */
.stay-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-md);
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	text-align: center;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stay-card:hover,
.stay-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.stay-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1) brightness(1.25);
	opacity: 0.32;
	transition: filter 0.5s ease, opacity 0.5s ease;
}
.stay-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 35%, rgba(10, 16, 24, 0.82) 100%);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.stay-card:hover .stay-card__bg,
.stay-card:focus-within .stay-card__bg {
	filter: grayscale(0) brightness(0.7);
	opacity: 1;
}
.stay-card:hover .stay-card__scrim,
.stay-card:focus-within .stay-card__scrim {
	opacity: 1;
}
.stay-card__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--space-lg);
}
.stay-card__zone {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-ink-soft);
	transition: color 0.3s ease;
}
.stay-card__city {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	margin: 4px 0 10px;
	color: var(--color-ink);
	transition: color 0.3s ease;
}
.stay-card__nights {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}
.stay-card__nights-num {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--color-primary);
	transition: color 0.3s ease;
}
.stay-card__nights-label {
	font-size: 0.85rem;
	color: var(--color-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: color 0.3s ease;
}
.stay-card:hover .stay-card__zone,
.stay-card:hover .stay-card__city,
.stay-card:hover .stay-card__nights-num,
.stay-card:hover .stay-card__nights-label,
.stay-card:focus-within .stay-card__zone,
.stay-card:focus-within .stay-card__city,
.stay-card:focus-within .stay-card__nights-num,
.stay-card:focus-within .stay-card__nights-label {
	color: #fff;
}

/* Touch devices have no real :hover -- reveal the color photo + white
   text as soon as the card scrolls into view instead (reusing the
   existing scroll-reveal .is-revealed class rather than adding a
   separate observer just for this). */
@media (hover: none) {
	.stay-card.is-revealed .stay-card__bg { filter: grayscale(0) brightness(0.7); opacity: 1; }
	.stay-card.is-revealed .stay-card__scrim { opacity: 1; }
	.stay-card.is-revealed .stay-card__zone,
	.stay-card.is-revealed .stay-card__city,
	.stay-card.is-revealed .stay-card__nights-num,
	.stay-card.is-revealed .stay-card__nights-label {
		color: #fff;
	}
}

/* All-inclusive feature row ------------------------------------------------ */
.feature-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-md);
}
.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: var(--space-lg) var(--space-sm);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.feature-item__icon { font-size: 2rem; line-height: 1; }
.feature-item__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--color-primary); }
@media (max-width: 720px) {
	.feature-row { grid-template-columns: repeat(2, 1fr); }
}

/* Destination gallery -------------------------------------------------------- */
.destination-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.destination-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: default;
}
/* A slightly varied rhythm (some cards taller) reads as an intentional
   editorial gallery rather than a uniform product grid. */
.destination-card:nth-child(4n+1) { grid-row: span 2; }
.destination-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.destination-card:hover img { transform: scale(1.06); }
.destination-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md);
	background: linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 85%, black) 0%, transparent 55%);
	color: #fff;
}
.destination-card__country {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.destination-card__place {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.2rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (max-width: 980px) {
	.destination-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.destination-card:nth-child(4n+1) { grid-row: span 1; }
	.destination-card:nth-child(odd) { grid-row: span 2; }
}
@media (max-width: 560px) {
	.destination-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.destination-card:nth-child(4n+1),
	.destination-card:nth-child(odd) { grid-row: span 1; }
}

/* Cinematic parallax section (home page) ------------------------------------ */
.section-parallax {
	position: relative;
	min-height: 62vh;
	min-height: 62dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--color-primary);
}
.section-parallax__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% center;
}
.section-parallax__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 75%, black) 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 45%, color-mix(in srgb, var(--color-primary) 55%, transparent) 100%);
}
.section-parallax__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	text-align: center;
	padding: 0 24px;
	color: #fff;
}
.section-parallax__inner .eyebrow { background: var(--color-primary); color: var(--color-accent); }
.section-parallax__inner h2 { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); }
.section-parallax__inner p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 860px) {
	.section-parallax { min-height: 48vh; min-height: 48dvh; }
}

/* About page: mission band + gallery ----------------------------------------- */
.section--dark-mission {
	background: linear-gradient(135deg, var(--color-primary), #001c33);
}
.eyebrow--on-dark { background: var(--color-accent); color: var(--color-primary); }
h2.on-dark, .on-dark { color: #fff; }
.on-dark-soft { color: rgba(255, 255, 255, 0.82); }
.mission-list { display: flex; flex-direction: column; gap: var(--space-md); }
.mission-list > div {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
}
.mission-list strong { display: block; color: #fff; font-family: var(--font-heading); margin-bottom: 4px; }
.mission-list span { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }

.about-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.about-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) {
	.about-gallery { grid-template-columns: 1fr; }
}

/* Galleria page + lightbox --------------------------------------------------- */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.gallery-grid__item {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--color-surface-alt);
}
.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.gallery-grid__item:hover img { transform: scale(1.06); }
@media (max-width: 720px) {
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(4, 10, 20, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
	max-width: min(90vw, 1100px);
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}
.lightbox__close,
.lightbox__nav {
	position: fixed;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 1.6rem;
	line-height: 1;
}
.lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 2rem;
	line-height: 1;
}
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
	.lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
	.lightbox__close { width: 38px; height: 38px; font-size: 1.3rem; top: 12px; right: 12px; }
	.lightbox__nav--prev { left: 6px; }
	.lightbox__nav--next { right: 6px; }
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}
.testimonial-card {
	background: #fff;
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	margin: 0;
}
.testimonial-card cite { display: block; margin-top: var(--space-md); font-weight: 700; font-style: normal; }
.testimonial-card__trip { display: block; margin-top: 2px; font-weight: 500; font-size: 0.85rem; color: var(--color-ink-soft); }

.current-trip__price { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); }
.current-trip__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

/* Trip hero ---------------------------------------------------------------- */
.trip-hero { position: relative; min-height: 60vh; display: flex; align-items: center; color: #fff; background: var(--color-primary); }
.trip-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.4; }
.trip-hero__inner { position: relative; max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl) 24px; }
.trip-hero h1 { color: #fff; }
.trip-hero__dates { font-size: 1.1rem; opacity: 0.9; }
.trip-hero__verse { font-style: italic; opacity: 0.9; max-width: 560px; }
.trip-hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin: var(--space-lg) 0; }
.trip-hero .btn--ghost { border-color: #fff; color: #fff; }

/* Tables (flights) ----------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-top: var(--space-lg); }

/* Flight board: airport split-flap departures display ------------------------ */
.flight-board {
	margin-top: var(--space-lg);
	background: #0a0f1a;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 204, 0, 0.08);
	overflow: hidden;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.flight-board__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: color-mix(in srgb, var(--color-primary) 60%, black);
	color: var(--color-accent);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.82rem;
}
.flight-board__head-lamp {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #35e07a;
	box-shadow: 0 0 8px 1px #35e07a;
	animation: flight-board-lamp 2s ease-in-out infinite;
}
.flight-board__head-clock { margin-left: auto; opacity: 0.7; }
@keyframes flight-board-lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.flight-board__cols,
.flight-board__row {
	display: grid;
	grid-template-columns: 1fr 2.2fr 1.3fr 1.3fr 1.3fr;
	gap: 8px;
	padding: 12px 20px;
	min-width: 620px;
}
.flight-board__cols {
	color: color-mix(in srgb, var(--color-accent) 65%, transparent);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 204, 0, 0.15);
}
.flight-board__rows { overflow-x: auto; }
.flight-board__row {
	color: var(--color-accent);
	font-size: 0.98rem;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	animation: flight-board-flicker 0.5s ease-out backwards;
	animation-delay: var(--flight-row-delay, 0ms);
}
.flight-board__row:last-child { border-bottom: none; }
.flight-board__cell--no { font-weight: 700; }
.flight-board__cell--route { color: #fff; }
.flight-board__cell--status {
	color: #35e07a;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	align-self: center;
}
@keyframes flight-board-flicker {
	0% { opacity: 0; }
	30% { opacity: 0.6; }
	45% { opacity: 0.1; }
	60% { opacity: 0.8; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.flight-board__row { animation: none; }
	.flight-board__head-lamp { animation: none; }
}

/* Itinerary timeline --------------------------------------------------------- */
.itinerary-timeline {
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0 0 0 40px;
	position: relative;
}
.itinerary-timeline::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--color-border);
}
.itinerary-timeline::after {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	width: 3px;
	height: var(--itinerary-progress, 0px);
	background: var(--color-accent);
	transition: height 0.2s ease-out;
}
.itinerary-timeline__plane {
	position: absolute;
	left: 15px;
	top: var(--itinerary-progress, 0px);
	/* The mark's single point is its nose (a notched/forked end reads as
	   the tail) and it's drawn pointing up in the source path -- rotate
	   180deg so it actually points down the page, the direction it's
	   traveling. */
	transform: translate(-50%, -50%) rotate(180deg);
	width: 40px;
	height: 40px;
	color: var(--color-primary);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
	transition: top 0.2s ease-out;
	pointer-events: none;
	z-index: 1;
}
.itinerary-timeline__plane svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.itinerary-day {
	position: relative;
	padding-bottom: var(--space-xl);
}
.itinerary-day__date { font-size: 0.85rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* Inclusions / exclusions --------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.check-list li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid var(--color-border); }
.check-list--yes li::before { content: '✓'; position: absolute; left: 0; color: #1a7f37; font-weight: 700; }
.check-list--no li::before { content: '✕'; position: absolute; left: 0; color: #b32d2e; font-weight: 700; }

/* Terms ---------------------------------------------------------------------- */
.trip-terms h3 { margin-top: var(--space-lg); }
.trip-terms { color: var(--color-ink-soft); }

/* Contact form ----------------------------------------------------------------- */
.inquiry-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.inquiry-form input, .inquiry-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 1rem;
	margin-bottom: var(--space-md);
}
.contact-direct { margin-top: var(--space-lg); text-align: center; color: var(--color-ink-soft); }

.contact-methods { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-method {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-method:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-method__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-surface-alt);
	color: var(--color-primary);
	font-size: 1.2rem;
}
.contact-method small { display: block; color: var(--color-ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-method strong { display: block; color: var(--color-primary); font-family: var(--font-heading); font-size: 1.05rem; }

.inquiry-checklist {
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	align-self: start;
}
.inquiry-checklist h3 { margin-top: 4px; }
.inquiry-checklist ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inquiry-checklist li {
	padding-left: 26px;
	position: relative;
	color: var(--color-ink-soft);
}
.inquiry-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: 700;
}

/* CTA section --------------------------------------------------------------------- */
.section--cta { background: var(--color-primary); color: #fff; }
.section--cta h2 { color: #fff; }

/* Footer -------------------------------------------------------------------------- */
.site-footer { background: #001424; color: #cfd8e3; }
.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-xl) 24px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-lg);
}
.site-footer .site-logo__text { color: #fff; }
.site-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.site-footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}
.site-footer__logo-mark {
	/* Reversed-on-navy treatment from the logo system: same icon file as
	   the header, inverted to white via filter rather than a separate
	   white-only asset -- keeps a single source of truth for the mark. */
	height: 56px;
	width: auto;
	max-width: none;
	display: block;
	filter: brightness(0) invert(1);
}
.site-footer__tagline {
	font-family: var(--font-wordmark);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #A8C2DE;
}
.site-footer__brand p { margin: 4px 0 0; }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__list a { color: #cfd8e3; text-decoration: none; }
.site-footer__list a:hover { color: #fff; }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; }
.site-footer__contact a { color: var(--color-accent); text-decoration: none; }
.site-footer__contact a:hover { color: #fff; }
.site-footer__contact-heading {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 2px;
}
.site-footer__contact-heading--social { margin-top: 10px; }
.site-footer__social {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	margin: 8px 0 0;
}
.site-footer__social-item { list-style: none; }
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
	color: #cfd8e3;
	text-decoration: none;
}
.site-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	transition: transform 0.2s ease;
}
.site-footer__social-label { font-size: 0.95rem; transition: color 0.2s ease; }
.site-footer__social-link:hover .site-footer__social-icon,
.site-footer__social-link:focus-visible .site-footer__social-icon { transform: scale(1.08); }
.site-footer__social-link:hover .site-footer__social-label,
.site-footer__social-link:focus-visible .site-footer__social-label { color: #fff; }
/* Each network's badge keeps its own recognizable brand color as a solid
   circular background (icon glyph stays white on top) rather than the
   site's navy/accent palette, so they read as familiar logos instead of
   blending into the dark footer. */
.site-footer__social-link--facebook .site-footer__social-icon { background: #1877F2; }
.site-footer__social-link--instagram .site-footer__social-icon { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.site-footer__social-link--tiktok .site-footer__social-icon { background: #000; }
.site-footer__social-link--youtube .site-footer__social-icon { background: #FF0000; }
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: var(--space-md) 24px;
	text-align: center;
	font-size: 0.85rem;
}

/* Scroll-reveal ---------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="up"] { transform: translateY(24px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transition: none; }
	html { scroll-behavior: auto; }
}

/* World flythrough: mobile (single master flythrough video, replaces the
   former per-location stacked-clip sections) ------------------------------ */
.sw-m-video-wrap {
	position: relative;
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	background-size: cover;
	background-position: center;
}
.sw-m-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.sw-m-video-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 80%, black) 0%, transparent 45%);
	pointer-events: none;
}
.sw-m-video-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 20px calc(40px + env(safe-area-inset-bottom));
	color: #fff;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.sw-m-video-label.is-active { opacity: 1; transform: none; }
.sw-m-video-label__eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	background: var(--color-accent);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-sm);
}
.sw-m-video-label__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.7rem, 7vw, 2.4rem);
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
	.sw-m-video { display: none; }
	.sw-m-video-label { opacity: 1; transform: none; }
}

/* Mobile nav ------------------------------------------------------------------------------ */
.mobile-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	/* .mobile-nav is a CHILD of .site-header (not a sibling), so it stacks
	   within .site-header's own local stacking context -- raising
	   .site-header's z-index doesn't touch that. This button had no z-index
	   of its own, so .mobile-nav (z-index:200) painted over it regardless.
	   Needs an explicit position + a higher z-index right here. */
	position: relative;
	z-index: 201;
}
.mobile-nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--color-surface);
	padding: 88px 24px 32px;
	z-index: 200;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
	max-height: 100vh;
	overflow-y: auto;
	box-shadow: var(--shadow-md);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mobile-nav__list a {
	display: block;
	padding: 14px 4px;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.language-switcher--mobile ul { justify-content: flex-start; }
.mobile-nav__cta { display: none; margin-top: 8px; align-self: flex-start; }
body.mobile-nav-open { overflow: hidden; }

/* Responsive ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.primary-nav { display: none; }
	.mobile-nav-toggle { display: flex; }
	.mobile-nav { display: flex; flex-direction: column; }
	.mobile-nav__cta { display: inline-flex; }
	/* The header bar itself only shows logo + hamburger on mobile -- the
	   language switcher and CTA move into the slide-down panel instead so
	   the compact bar doesn't get cramped. */
	.site-header__actions > .language-switcher:not(.language-switcher--mobile),
	.site-header__actions > .btn--accent { display: none; }
	.section__inner--split { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
}