/* ==========================================================================
   Kyrgyzstan Traveling theme
   Every color is a token. Components never use literal colors.
   ========================================================================== */

:root {
	color-scheme: light;

	/* Brand */
	--brand: #00a0dc;            /* sampled from logo; decorative fills only */
	--brand-soft: #e3f4fb;
	--brand-deep: #0a4a6e;       /* end of the brand gradient on photo-less cards */

	/* Surfaces */
	--bg: #ffffff;
	--surface: #f5f5f7;
	--surface-2: #e8e8ed;
	--card: #ffffff;
	--header-bg: rgba(255, 255, 255, 0.86);
	--overlay: rgba(0, 0, 0, 0.45);

	/* Text */
	--text: #1d1d1f;
	--text-muted: #6e6e73;
	--text-soft: #6e6e73;
	--on-image: #ffffff;
	--on-image-muted: rgba(255, 255, 255, 0.86);

	/* Lines & effects */
	--border: #e3e3e8;
	--border-strong: #c7c7cc;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.12);

	/* Accent (AA on white for text and white-on-accent) */
	--accent: #007bb5;
	--cta-dot-fg: #007bb5; /* arrow in the white circle of "Plan my trip" */
	--accent-hover: #00699c;
	--on-accent: #ffffff;
	--focus: #007bb5;

	/* Departure status — separate from accent */
	--st-open-fg: #8a4b00;
	--st-open-bg: #fff1dc;
	--st-open-bar: #e08a1e;
	--st-guaranteed-fg: #146c3c;
	--st-guaranteed-bg: #e0f4e7;
	--st-guaranteed-bar: #24a35a;
	--st-full-fg: #a1251b;
	--st-full-bg: #fde6e3;
	--st-full-bar: #d64535;
	--saved: #e0405a; /* heart on saved tours */
	--st-neutral-fg: #6e6e73;
	--st-neutral-bg: #f0f0f2;

	/* Form feedback */
	--error: #b42318;
	--error-bg: #fdecea;
	--success: #146c3c;
	--success-bg: #e0f4e7;
	--notice-bg: #fff6e6;
	--notice-fg: #6b3d00;

	/* Shape & rhythm */
	--radius-sm: 10px;
	--radius: 18px;
	--radius-lg: 28px;
	--pill: 999px;
	--container: 1240px;
	--gutter: 16px;

	--font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Global navigation */
	--nav-bg: rgba(255, 255, 255, 0.8);
	--nav-bg-open: rgba(255, 255, 255, 0.94);
	--nav-border: rgba(0, 0, 0, 0.08);
	--nav-text: #333336;
	--nav-text-strong: #1d1d1f;
	--nav-scrim: rgba(232, 232, 237, 0.4);
	--ill-soft: #b9e6f7;
	--mtn-line: rgba(0, 123, 181, 0.16);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--brand-soft: #0e2633;
		--bg: #000000;
		--surface: #161617;
		--surface-2: #232325;
		--card: #1d1d1f;
		--header-bg: rgba(22, 22, 23, 0.84);
		--overlay: rgba(0, 0, 0, 0.62);
		--text: #f5f5f7;
		--text-muted: #a1a1a6;
		--text-soft: #86868b;
		--border: #2d2d2f;
		--border-strong: #424245;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
		--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
		--accent: #4cc3f0;
		--cta-dot-fg: #04121c;
		--accent-hover: #7dd4f5;
		--on-accent: #04121c;
		--focus: #7dd4f5;
		--st-open-fg: #ffc46b;
		--st-open-bg: #3a2a10;
		--st-open-bar: #f0a23a;
		--st-guaranteed-fg: #6fdc9c;
		--st-guaranteed-bg: #0f3322;
		--st-guaranteed-bar: #3fc47a;
		--st-full-fg: #ff9b8f;
		--st-full-bg: #3d1714;
		--st-full-bar: #e8604f;
		--saved: #ff6b81;
		--st-neutral-fg: #a1a1a6;
		--st-neutral-bg: #2a2a2c;
		--error: #ff9b8f;
		--error-bg: #3d1714;
		--success: #6fdc9c;
		--success-bg: #0f3322;
		--notice-bg: #3a2a10;
		--notice-fg: #ffd699;
		--nav-bg: rgba(22, 22, 23, 0.8);
		--nav-bg-open: rgba(22, 22, 23, 0.96);
		--nav-border: rgba(255, 255, 255, 0.08);
		--nav-text: #d2d2d7;
		--nav-text-strong: #f5f5f7;
		--nav-scrim: rgba(0, 0, 0, 0.45);
		--ill-soft: #1f4b63;
	--mtn-line: rgba(76, 195, 240, 0.16);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--brand-soft: #0e2633;
	--bg: #000000;
	--surface: #161617;
	--surface-2: #232325;
	--card: #1d1d1f;
	--header-bg: rgba(22, 22, 23, 0.84);
	--overlay: rgba(0, 0, 0, 0.62);
	--text: #f5f5f7;
	--text-muted: #a1a1a6;
	--text-soft: #86868b;
	--border: #2d2d2f;
	--border-strong: #424245;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
	--accent: #4cc3f0;
	--cta-dot-fg: #04121c;
	--accent-hover: #7dd4f5;
	--on-accent: #04121c;
	--focus: #7dd4f5;
	--st-open-fg: #ffc46b;
	--st-open-bg: #3a2a10;
	--st-open-bar: #f0a23a;
	--st-guaranteed-fg: #6fdc9c;
	--st-guaranteed-bg: #0f3322;
	--st-guaranteed-bar: #3fc47a;
	--st-full-fg: #ff9b8f;
	--st-full-bg: #3d1714;
	--st-full-bar: #e8604f;
	--saved: #ff6b81;
	--st-neutral-fg: #a1a1a6;
	--st-neutral-bg: #2a2a2c;
	--error: #ff9b8f;
	--error-bg: #3d1714;
	--success: #6fdc9c;
	--success-bg: #0f3322;
	--notice-bg: #3a2a10;
	--notice-fg: #ffd699;
	--nav-bg: rgba(22, 22, 23, 0.8);
	--nav-bg-open: rgba(22, 22, 23, 0.96);
	--nav-border: rgba(255, 255, 255, 0.08);
	--nav-text: #d2d2d7;
	--nav-text-strong: #f5f5f7;
	--nav-scrim: rgba(0, 0, 0, 0.45);
	--ill-soft: #1f4b63;
	--mtn-line: rgba(76, 195, 240, 0.16);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: -0.005em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.nowrap { white-space: nowrap; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--pill);
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 22px; border-radius: var(--pill);
	border: 1px solid transparent; font: 500 15px/1.2 var(--font);
	text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
	white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-light { background: var(--on-image); color: #1d1d1f; }
.btn-light:hover { background: var(--brand-soft); color: #1d1d1f; }
.btn-sm { min-height: 38px; padding: 7px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
	background: var(--surface-2); color: var(--text-soft); border-color: var(--surface-2); cursor: not-allowed;
}

/* ---------- Global navigation (apple.com style) ---------- */

.gnav {
	position: sticky; top: 0; z-index: 60;
	background: var(--nav-bg);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	transition: background-color .3s;
}
.gnav.is-open { background: var(--nav-bg-open); }

/* Same width and side spacing as the page content, so the logo and menu line up with it. */
.gnav-bar { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.gnav-list { list-style: none; margin: 0; padding: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.gnav-item { display: flex; align-items: center; }

.gnav-link {
	display: flex; align-items: center; height: 48px; padding: 0 8px;
	border: 0; background: none; cursor: pointer;
	font: 400 12px/1 var(--font); letter-spacing: -0.01em; color: var(--nav-text);
	text-decoration: none; opacity: .88; transition: opacity .2s, color .2s;
}
.gnav-link:hover, .gnav-link[aria-expanded="true"] { opacity: 1; color: var(--nav-text-strong); }
.gnav-link[aria-current="page"], .gnav-link.is-active { opacity: 1; color: var(--nav-text-strong); font-weight: 500; }
.gnav-link:focus-visible { outline-offset: -2px; }

.brand.gnav-link { padding: 0 8px 0 0; opacity: 1; color: var(--nav-text-strong); }
.brand .mark { display: block; height: 18px; width: auto; transition: opacity .2s; }
.brand:hover .mark { opacity: .75; }
.brand .logo { display: block; height: 32px; width: auto; color: var(--text); }
.footer-about .brand .logo { height: 30px; }

.gnav-actions { gap: 4px; }
.gnav-icon {
	display: grid; place-items: center; width: 36px; height: 48px; padding: 0;
	border: 0; background: none; cursor: pointer; color: var(--nav-text); opacity: .88;
}
.gnav-icon:hover { opacity: 1; color: var(--nav-text-strong); }
.gnav-icon .icon { width: 16px; height: 16px; }
.gnav-cta {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 3px 0 15px; margin-left: 8px;
	border-radius: var(--pill); background: var(--accent); color: var(--on-accent); text-decoration: none; white-space: nowrap;
	font: 400 13px/1 var(--font);
}
.gnav-cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.cta-dot { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 50%; background: #fff; color: var(--cta-dot-fg); }
.cta-dot .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.sheet-cta .cta-dot { width: 38px; height: 38px; }
.sheet-cta .cta-dot .icon { width: 18px; height: 18px; }
.sheet-cta { height: 48px; padding: 0 5px 0 22px; gap: 12px; margin: 28px 0 0; font-size: 16px; }
.sheet-cta .icon { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme])[data-theme-auto="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme])[data-theme-auto="dark"] .theme-toggle .icon-moon { display: none; }

/* Icon buttons elsewhere on the page (footer socials, dialogs) */
.icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn .icon { width: 20px; height: 20px; }

/* Tours flyout */
.flyout {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--nav-bg-open); border-bottom: 1px solid var(--nav-border);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	animation: flyout-in .32s cubic-bezier(.4, 0, .2, 1);
}
.flyout[hidden] { display: none; }
@keyframes flyout-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.flyout-inner {
	max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 64px;
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.flyout-heading { font-size: 12px; color: var(--nav-text); opacity: .7; margin-bottom: 14px; }
.flyout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flyout a { color: var(--nav-text-strong); text-decoration: none; font-size: 12px; font-weight: 600; }
.flyout a:hover { color: var(--accent); }
.flyout-col-lg ul { gap: 8px; }
.flyout-col-lg a { font-size: 24px; letter-spacing: -0.015em; line-height: 1.2; }
.flyout-col > *, .flyout-col li { animation: flyout-item .4s both cubic-bezier(.4, 0, .2, 1); }
.flyout-col li:nth-child(2) { animation-delay: .02s; } .flyout-col li:nth-child(3) { animation-delay: .04s; }
.flyout-col li:nth-child(4) { animation-delay: .06s; } .flyout-col li:nth-child(5) { animation-delay: .08s; }
.flyout-col li:nth-child(6) { animation-delay: .1s; }
@keyframes flyout-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Page blur behind the open flyout / sheet */
.gnav-scrim {
	position: fixed; inset: 0; z-index: 55; background: var(--nav-scrim);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	animation: scrim-in .3s ease;
}
.gnav-scrim[hidden] { display: none; }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Burger */
.gnav-burger { display: none; }
.burger { position: relative; width: 17px; height: 10px; }
.burger span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .3s, top .3s; }
.burger span:first-child { top: 1px; }
.burger span:last-child { top: 8px; }
.is-open .burger span:first-child { top: 4.5px; transform: rotate(45deg); }
.is-open .burger span:last-child { top: 4.5px; transform: rotate(-45deg); }

/* Full-screen menu (small screens) */
.gnav-sheet {
	position: fixed; left: 0; right: 0; top: 48px; bottom: 0; z-index: 59; overflow-y: auto;
	background: var(--nav-bg-open);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.gnav-sheet[hidden] { display: none; }
.gnav-sheet-inner { padding: 24px 48px 48px; }
.sheet-links, .sheet-sub { list-style: none; margin: 0; padding: 0; }
.sheet-links a {
	display: block; padding: 6px 0; color: var(--nav-text-strong); text-decoration: none;
	font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
}
.sheet-links a[aria-current="page"] { color: var(--accent); }
.sheet-heading { font-size: 12px; color: var(--nav-text); opacity: .7; margin: 32px 0 12px; }
.sheet-sub { display: grid; gap: 10px; }
.sheet-sub a { color: var(--nav-text-strong); text-decoration: none; font-size: 15px; font-weight: 600; }
.gnav-sheet li { animation: flyout-item .4s both cubic-bezier(.4, 0, .2, 1); }
.sheet-links li:nth-child(2) { animation-delay: .03s; } .sheet-links li:nth-child(3) { animation-delay: .06s; }
.sheet-links li:nth-child(4) { animation-delay: .09s; } .sheet-links li:nth-child(5) { animation-delay: .12s; }
body.menu-open { overflow: hidden; }

@media (max-width: 833px) {
	.gnav-menu-item, .gnav-list .gnav-cta { display: none; }
	.gnav-burger { display: grid; }
	.gnav-list { justify-content: space-between; }
	.gnav-sheet-inner { padding: 20px 32px 40px; }
}
@media (min-width: 834px) { .gnav-sheet { display: none !important; } }

/* ---------- Sections ---------- */

[id] { scroll-margin-top: 72px; }

.section { padding: clamp(80px, 10vw, 140px) 0; }
.section-tight { padding: clamp(56px, 6vw, 80px) 0; }
.section-alt { background: var(--surface); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(36px, 4.5vw, 56px); flex-wrap: wrap; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-title { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -0.025em; }
.section-sub { color: var(--text-muted); margin-top: 16px; max-width: 680px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

/* ---------- Hero (full width, under the global nav) ---------- */

.hero { padding: 0; }
.hero-card {
	position: relative; overflow: hidden; min-height: 480px;
	display: flex; align-items: flex-end; color: var(--on-image);
}
.hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .22) 48%, rgba(0, 0, 0, .08) 100%);
}
.hero-content {
	position: relative; z-index: 1; width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 140px var(--gutter) 56px;
}
.hero h1 {
	font-size: clamp(40px, 6vw, 76px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em;
	max-width: 860px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.hero-lead { margin-top: 18px; font-size: 18px; font-weight: 400; line-height: 1.5; max-width: 660px; color: var(--on-image-muted); text-shadow: 0 1px 16px rgba(0, 0, 0, .3); }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* Home: full screen under the nav bar, content at the bottom left */
.hero-card.is-home { min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); align-items: flex-end; text-align: left; }
.hero-card.is-home .hero-content { display: flex; flex-direction: column; align-items: flex-start; padding-top: 72px; padding-bottom: clamp(40px, 7vh, 80px); }

.hero-card.is-home::after {
	background: linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, .05) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 60%);
}

.hero-search {
	margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2px;
	width: 100%; max-width: 580px; padding: 4px; border-radius: var(--pill); text-align: left;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
	-webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.hero-search label {
	position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px;
	border-radius: var(--pill); color: var(--on-image); cursor: pointer;
}
.hero-search label:hover, .hero-search label:focus-within { background: rgba(255, 255, 255, .14); }
.hero-search label .icon { width: 16px; height: 16px; flex: none; }
.hero-search label .hs-caret { position: absolute; right: 12px; width: 12px; height: 12px; opacity: .8; pointer-events: none; }
.hero-search select {
	appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 38px; padding: 0 18px 0 0;
	border: 0; background: transparent; color: var(--on-image); font: 500 14px var(--font); cursor: pointer;
	text-overflow: ellipsis;
}
.hero-search select:focus { outline: none; }
.hero-search label:has(select:focus-visible) { outline: 2px solid var(--on-image); outline-offset: -2px; }
.hero-search option { color: #1d1d1f; }
.hero-search .btn { align-self: center; min-height: 38px; padding: 0 18px; font-size: 14px; }
.hero-search .hs-btn-icon { display: none; }

@media (max-width: 760px) {
	.hero-card { min-height: 380px; }
	.hero-content { padding: 120px var(--gutter) 28px; }
	/* Room for the floating contact button, so it never covers the search bar. */
	.hero-card.is-home .hero-content { padding-top: 56px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
	/* One line on phones: three compact selects and a round arrow button. */
	.hero-search { grid-template-columns: minmax(0, 1.12fr) minmax(0, .94fr) minmax(0, 1fr) 38px; gap: 0; }
	.hero-search label { gap: 5px; padding: 0 4px 0 8px; }
	.hero-search label .icon { width: 14px; height: 14px; }
	.hero-search label .hs-caret { display: none; }
	.hero-search select { padding: 0; font-size: 13px; }
	.hero-search .btn { width: 38px; padding: 0; }
	.hero-search .hs-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hero-search .hs-btn-icon { display: block; width: 18px; height: 18px; }
}

/* ---------- Tour cards ---------- */

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

.tour-card {
	display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
	background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
	transition: transform .25s, box-shadow .25s;
}
.tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tour-media { position: relative; overflow: hidden; aspect-ratio: 8 / 7; background: var(--surface-2); }
.tour-media img { transition: transform .5s; }
.tour-card:hover .tour-media img { transform: scale(1.04); }
.tour-media img { width: 100%; height: 100%; object-fit: cover; }
.tour-tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.tour-tags .tag { box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.tag {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill);
	font-size: 12px; font-weight: 500; background: var(--card); color: var(--text);
}
.tour-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tour-body h3 { font-size: 19px; }
.tour-body h3 a { color: var(--text); text-decoration: none; }
.tour-body h3 a::after { content: ""; position: absolute; inset: 0; }
.tour-card { position: relative; }
.tour-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--text-muted); font-size: 14px; }
.tour-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tour-foot {
	display: flex; align-items: center; justify-content: flex-end; gap: 12px;
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
}
/* Space above the price line; margin-top: auto keeps prices aligned across a row of cards. */
.tour-body > :has(+ .tour-foot) { margin-bottom: 18px; }
.price-from { font-size: 12px; color: var(--text-muted); line-height: 1.2; }
.price-from strong { margin-left: 3px; font-size: 22px; color: var(--text); font-weight: 600; }

/* ---------- Status badge & departures ---------- */

.badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill);
	font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-open { color: var(--st-open-fg); background: var(--st-open-bg); }
.badge-guaranteed { color: var(--st-guaranteed-fg); background: var(--st-guaranteed-bg); }
.badge-full { color: var(--st-full-fg); background: var(--st-full-bg); }

.seats { display: grid; gap: 6px; }
.seats-bar { height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.seats-bar span { display: block; height: 100%; border-radius: inherit; }
.is-open .seats-bar span { background: var(--st-open-bar); }
.is-guaranteed .seats-bar span { background: var(--st-guaranteed-bar); }
.is-full .seats-bar span { background: var(--st-full-bar); }
.seats-label { font-size: 13px; color: var(--text-muted); }
.seats-label strong { color: var(--text); font-weight: 600; }

.departure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; container-type: inline-size; }

.departure {
	display: grid; gap: 16px 24px; align-items: center;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
	padding: 20px 22px; border-radius: var(--radius);
	background: var(--card); border: 1px solid var(--border);
	scroll-margin-top: 110px;
}
.departure.is-highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-soft); }
.dep-dates strong { display: block; font-size: 17px; font-weight: 600; }
.dep-dates small, .dep-source { font-size: 13px; color: var(--text-muted); }
.dep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dep-tour { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; }
.dep-tour:hover { text-decoration: underline; }
.dep-names { font-size: 13px; color: var(--text-muted); }
.dep-price strong { font-size: 20px; font-weight: 600; display: block; line-height: 1.2; }
.dep-price small { font-size: 13px; color: var(--text-muted); }
.dep-price small > span { display: block; }
.dep-price .drop { color: var(--st-guaranteed-fg); font-weight: 600; }
.dep-dates small { display: block; }
.dep-source { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* Narrow containers (tour page column, tablets): two compact lines —
   dates · price · join on top, status + seats underneath. */
@container (max-width: 860px) {
	.departure {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "dates price action" "seats seats seats";
		gap: 12px 20px; padding: 16px 20px;
	}
	.dep-dates { grid-area: dates; }
	.dep-price { grid-area: price; text-align: right; }
	.dep-action { grid-area: action; }
	.seats { grid-area: seats; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
	.seats .dep-head { margin: 0; }
	.seats-bar { flex: 1 1 120px; max-width: 220px; }
	.dep-dates strong { font-size: 16px; }
	.dep-price strong { font-size: 18px; }
	.dep-source { margin-top: 2px; }
}
@container (max-width: 480px) {
	.departure {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "dates price" "seats seats" "action action";
		padding: 16px;
	}
	.dep-action .btn { width: 100%; }
}

.departures-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 20px; padding: 20px 22px; border-radius: var(--radius);
	background: var(--brand-soft); border: 1px dashed var(--accent);
}
.departures-foot p { color: var(--text); max-width: 620px; }

.empty-state {
	padding: 28px; border-radius: var(--radius); text-align: center;
	background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-muted);
}

/* ---------- Reviews ---------- */

.stars { display: inline-flex; gap: 2px; color: var(--st-open-bar); }
.stars .icon { fill: currentColor; stroke: none; width: 18px; height: 18px; }

.review-card {
	padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px dashed var(--border-strong);
	display: flex; flex-direction: column; gap: 14px;
}
.review-who { display: flex; align-items: center; gap: 12px; }
.avatar {
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: var(--surface-2); color: var(--text-soft); font-weight: 600;
}
.placeholder-text { color: var(--text-soft); font-style: italic; }
.placeholder-chip {
	align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	padding: 3px 8px; border-radius: var(--pill); background: var(--st-neutral-bg); color: var(--st-neutral-fg);
}

/* ---------- Why us ---------- */

.feature-card {
	padding: 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border);
	display: grid; gap: 12px; align-content: start;
}
.feature-icon {
	width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: var(--brand-soft); color: var(--accent);
}
.feature-icon .icon { width: 26px; height: 26px; }
.feature-card h3 { font-size: 19px; }
.feature-card p { color: var(--text-muted); }

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.about-text h2 { margin-bottom: 18px; }
.about-text p { color: var(--text-muted); margin-bottom: 16px; }
.about-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.4; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 32px; } }

/* Home "About us": text and two overlapping photos, then a row of key numbers */
.about-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-intro p { color: var(--text-muted); margin-top: 16px; max-width: 540px; }
.about-intro .section-title { margin-bottom: 4px; }
.about-intro .btn { margin-top: 28px; }
.about-photos { position: relative; padding: 0 0 12% 12%; }
.about-photos img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.about-photo-main { aspect-ratio: 4 / 3.2; }
.about-photo-small {
	position: absolute; left: 0; bottom: 0; width: 46% !important; aspect-ratio: 1 / 1;
	border: 6px solid var(--surface); box-shadow: var(--shadow-lg);
}
.stats-band {
	list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border);
}
.stats-band li { display: grid; align-content: start; gap: 6px; padding: clamp(22px, 3vw, 36px) clamp(18px, 2.5vw, 32px); color: var(--text-muted); font-size: 15px; }
.stats-band li + li { border-left: 1px solid var(--border); }
.stats-band strong { font-size: clamp(36px, 4.4vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--text); }
.stats-band strong span { color: var(--accent); margin-left: 2px; }
@media (max-width: 860px) {
	.about-v2 { grid-template-columns: 1fr; }
	.about-photos { max-width: 560px; }
	.stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats-band li:nth-child(3) { border-left: 0; }
	.stats-band li:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* About page: "How we run our tours" — sticky intro on the left, numbered principles on the right */
.principles-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.principles-intro { position: sticky; top: 88px; }
.principles-intro p { color: var(--text-muted); margin-top: 14px; max-width: 420px; }
.principles-intro img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radius-lg); margin-top: 32px; }
.principles { list-style: none; margin: 0; padding: 0; }
.principle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 40px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--border); }
.principle:last-child { border-bottom: 1px solid var(--border); }
.principle-num { font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: .9; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.principle h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; }
.principle h3 .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
.principle p { color: var(--text-muted); font-size: 17px; margin-top: 10px; max-width: 560px; }
@media (max-width: 860px) {
	.principles-layout { grid-template-columns: 1fr; }
	.principles-intro { position: static; }
	.principles-intro img { aspect-ratio: 16 / 10; margin-top: 24px; }
}

/* ---------- Destinations ---------- */

.destinations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dest-card {
	position: relative; display: block; aspect-ratio: 3 / 4.4; border-radius: var(--radius-lg); overflow: hidden;
	color: var(--on-image); text-decoration: none;
}
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.dest-card:hover img { transform: scale(1.05); }
.dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 60%); }
.dest-card span { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
.dest-card strong { display: block; font-size: 18px; font-weight: 600; }
.dest-card small { font-size: 13px; color: var(--on-image-muted); }
.dest-card:hover { color: var(--on-image); }
@media (max-width: 1024px) {
	.destinations { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.dest-card { scroll-snap-align: start; }
}
@media (max-width: 520px) { .destinations { grid-auto-columns: 72%; } }
.dest-card .img-placeholder { position: absolute; inset: 0; min-height: 0; }

/* Country cards on the home page; a brand-blue panel with ridgelines until a photo is added */
.country-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.country-card { aspect-ratio: 4 / 5; }
.country-card strong { font-size: 22px; letter-spacing: -0.02em; }
.country-card.no-photo { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); }
.country-card.no-photo::before {
	content: ""; position: absolute; inset: auto 0 0; height: 60%; background: rgba(255, 255, 255, .22);
	-webkit-mask: url("../img/pattern-mountains.svg") no-repeat center bottom / 220% auto;
	mask: url("../img/pattern-mountains.svg") no-repeat center bottom / 220% auto;
}
@media (max-width: 1100px) { .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Places to visit: full grid on the archive, three across inside the tour page column */
.place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.place-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.place-grid.is-compact .dest-card { aspect-ratio: 4 / 5; }
.place-grid.is-compact .dest-card strong { font-size: 16px; }
@media (max-width: 1024px) { .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .place-grid, .place-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.place-article { margin-top: 0; }

/* ---------- Featured ---------- */

.featured-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.logo-slot {
	display: grid; place-items: center; height: 76px; border-radius: var(--radius);
	border: 1px dashed var(--border-strong); color: var(--text-soft); font-size: 13px; text-align: center; padding: 8px;
}
@media (max-width: 760px) { .featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Footer ---------- */

/* Full width, edge to edge; content aligned to the page container. */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-card {
	max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 28px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h2 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--text-muted); text-decoration: none; font-size: 15px; }
.footer-grid a:hover { color: var(--accent); }
.footer-about p { color: var(--text-muted); margin: 14px 0 18px; max-width: 320px; font-size: 15px; }
.socials { display: flex; gap: 8px; }
.footer-bottom {
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-soft);
}
.footer-credit a { color: inherit; text-decoration: none; white-space: nowrap; }
.footer-credit a:hover { color: var(--accent); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-card { padding: 40px var(--gutter) 24px; } }
/* Columns may shrink below their longest word, and the long email address wraps instead of widening the page */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-grid > * { min-width: 0; }
.footer-grid a { overflow-wrap: anywhere; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 400px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Single tour ---------- */

.breadcrumbs { font-size: 12px; color: var(--text-muted); margin: 28px 0 14px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 5px; color: var(--text-soft); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.facts {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; list-style: none;
}
.fact {
	display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
	background: var(--surface); border: 1px solid var(--border);
}
.fact .feature-icon { width: 42px; height: 42px; flex: none; }
.fact .feature-icon .icon { width: 20px; height: 20px; }
.fact small { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.fact strong { font-size: 15px; font-weight: 600; }
@media (max-width: 1024px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact { padding: 12px; gap: 10px; } }

/* Gallery: big mosaic on desktop (layout follows the photo count), swipeable row on phones. */
.gallery-wrap { position: relative; margin-top: 40px; }
.tour-gallery { padding-bottom: 40px; }
@media (max-width: 760px) { .tour-gallery { padding-bottom: 28px; } }
.gallery {
	--row: clamp(220px, 23vw, 310px);
	display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: var(--row) var(--row);
	border-radius: var(--radius-lg); overflow: hidden;
}
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--surface-2); }
.gallery figure:first-child { grid-row: span 2; }
.gallery figure:nth-child(n + 6) { display: none; }
.gallery a { display: block; height: 100%; cursor: zoom-in; }
.gallery a:focus-visible { outline-offset: -4px; border-radius: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.gallery a:hover img { transform: scale(1.03); filter: brightness(.94); }
.gallery[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: calc(var(--row) * 2 + 8px); }
.gallery[data-count="1"] figure:first-child { grid-row: auto; }
.gallery[data-count="2"] { grid-template-columns: 2fr 1fr; grid-template-rows: calc(var(--row) * 2 + 8px); }
.gallery[data-count="2"] figure:first-child { grid-row: auto; }
.gallery[data-count="3"] { grid-template-columns: 2fr 1fr; }
.gallery[data-count="4"] figure:nth-child(4) { grid-column: span 2; }

.gallery-all {
	position: absolute; right: 16px; bottom: 16px; z-index: 1;
	display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
	border-radius: var(--pill); border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .9); color: #1d1d1f; font: 500 14px var(--font);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.gallery-all:hover { background: #ffffff; }
.gallery-all .icon { width: 16px; height: 16px; }

@media (max-width: 760px) {
	.gallery-wrap { margin-top: 28px; margin-inline: calc(-1 * var(--gutter)); }
	.gallery, .gallery[data-count] {
		display: flex; gap: 8px; border-radius: 0; overflow-x: auto; overscroll-behavior-x: contain;
		padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.gallery::-webkit-scrollbar { display: none; }
	.gallery figure, .gallery figure:nth-child(n + 6) {
		display: block; flex: 0 0 calc(100% - 2 * var(--gutter)); aspect-ratio: 4 / 3; scroll-snap-align: start;
		border-radius: var(--radius);
	}
	.gallery[data-count="1"] figure { flex-basis: 100%; }
	.gallery-all { right: calc(var(--gutter) * 2 + 4px); bottom: 12px; }
}

/* Lightbox */
dialog.lightbox {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: #000000; color: #f5f5f7; overflow: hidden;
}
dialog.lightbox::backdrop { background: #000000; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: scrim-in .25s ease; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lightbox-count { font-size: 14px; color: #a1a1a6; padding-left: 8px; }
.lightbox-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-track:focus { outline: none; }
.lightbox-track figure { flex: 0 0 100%; margin: 0; padding: 0 clamp(0px, 6vw, 96px) 24px; display: grid; place-items: center; scroll-snap-align: center; }
.lightbox-track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-btn {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .12); color: #f5f5f7;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox-btn .icon { width: 20px; height: 20px; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox-prev { left: 20px; } .lightbox-prev .icon { rotate: 90deg; }
.lightbox-next { right: 20px; } .lightbox-next .icon { rotate: -90deg; }
.lightbox-btn[disabled] { opacity: .3; cursor: default; }
@media (max-width: 760px) { .lightbox-prev, .lightbox-next { display: none; } }

.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; margin-top: 64px; }
@media (max-width: 1024px) { .tour-layout { grid-template-columns: 1fr; } }

.tour-section { padding: 56px 0; border-top: 1px solid var(--border); scroll-margin-top: 104px; }

/* Tour section bar: sticks under the global nav, highlights the section in view */
.local-nav {
	position: sticky; top: 48px; z-index: 40;
	background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.local-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.local-nav ul {
	list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.local-nav ul::-webkit-scrollbar { display: none; }
.local-nav li { flex: none; scroll-snap-align: start; }
.local-nav a {
	display: block; padding: 7px 14px; border-radius: var(--pill); white-space: nowrap;
	font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color .2s, background-color .2s;
}
.local-nav a:hover { color: var(--text); }
.local-nav a[aria-current="true"] { color: var(--text); background: var(--surface-2); }
.local-nav-book { flex: none; min-height: 34px; }
.tour-section:focus { outline: none; }
.admin-bar .local-nav { top: 80px; }
@media (max-width: 782px) { .admin-bar .local-nav { top: 94px; } }
@media (max-width: 600px) { .admin-bar .local-nav { top: 48px; } }
/* Phones and tablets have the bottom booking bar instead. */
@media (max-width: 1024px) {
	.local-nav-book { display: none; }
	.local-nav ul { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
.tour-section:first-child { border-top: 0; padding-top: 0; }
.tour-section > h2 { font-size: 28px; margin-bottom: 24px; }
.tour-section > p { color: var(--text-muted); margin-bottom: 12px; }

.itinerary { display: grid; gap: 10px; }
.day { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.day summary {
	list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
	padding: 16px 18px;
}
.day summary::-webkit-details-marker { display: none; }
.day-num {
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: var(--brand-soft); color: var(--accent); font-weight: 600; font-size: 14px;
}
.day summary strong { display: block; font-weight: 600; }
.day summary small { color: var(--text-muted); font-size: 13px; }
.day summary .icon { transition: transform .2s; }
.day[open] summary .icon { transform: rotate(45deg); }
.day-body { padding: 0 18px 18px 76px; color: var(--text-muted); }
.day-body p + p { margin-top: 8px; }
@media (max-width: 520px) { .day-body { padding-left: 18px; } }

.inc-exc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inc-exc > div { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.inc-exc h3 { font-size: 17px; margin-bottom: 12px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; color: var(--text-muted); font-size: 15px; }
.checklist .icon { margin-top: 3px; }
.checklist.yes .icon { color: var(--st-guaranteed-fg); }
.checklist.no .icon { color: var(--st-full-fg); }
@media (max-width: 640px) { .inc-exc { grid-template-columns: 1fr; } }

.bring-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.bring-list li { display: flex; gap: 10px; color: var(--text-muted); }
.bring-list .icon { flex: none; margin-top: 4px; color: var(--accent); }
@media (max-width: 640px) { .bring-list { grid-template-columns: 1fr; } }
.policy { padding: 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.policy ul { padding-left: 20px; }
.policy li + li { margin-top: 6px; }
.price-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.price-table th, .price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.price-table th { font-size: 13px; color: var(--text-muted); font-weight: 500; background: var(--surface); }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td strong { font-weight: 600; }
.price-note { font-size: 14px; color: var(--text-muted); margin-top: 12px; }

.book-card {
	position: sticky; top: 124px; /* global nav 48 + section bar 52 + gap */ padding: 28px; border-radius: var(--radius-lg);
	background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.book-card .price-from { font-size: 13px; }
.book-card .price-from strong { display: block; margin-left: 0; font-size: 32px; }
.book-rows { list-style: none; margin: 18px 0; padding: 0; display: grid; }
.book-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.book-rows .icon { width: 18px; height: 18px; color: var(--accent); }
.book-rows li strong { font-weight: 500; }
.book-card .btn + .btn { margin-top: 10px; }
.btn-link {
	display: block; width: 100%; margin-top: 12px; padding: 4px; border: 0; background: none; cursor: pointer;
	font: 500 14px var(--font); color: var(--accent); text-align: center;
}
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; }
.dialog-note { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.book-card .fineprint { font-size: 13px; color: var(--text-muted); margin-top: 14px; text-align: center; }
@media (max-width: 1024px) { .book-card { position: static; } }

/* Sticky booking bar on phones and tablets (the side card sits below the content there). */
.book-bar { display: none; }
@media (max-width: 1024px) {
	.book-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: flex; align-items: center; justify-content: space-between; gap: 16px;
		padding: 12px max(var(--gutter), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
		background: var(--nav-bg-open); border-top: 1px solid var(--nav-border);
		-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.book-bar.is-hidden { transform: translateY(110%); }
	.book-bar p { line-height: 1.2; }
	.book-bar strong { font-size: 22px; font-weight: 600; }
	.book-bar small { font-size: 13px; color: var(--text-muted); }
	.book-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
	.book-bar .btn { min-height: 42px; padding: 0 18px; }
	.book-bar .btn-primary { min-width: 92px; }
	body:has(.book-bar) .site-footer { padding-bottom: 72px; }
}
@media (max-width: 420px) {
	.book-bar { gap: 10px; }
	.book-bar p small:last-child { display: none; }
	.book-bar .btn { padding: 0 14px; }
	.book-bar .btn-primary { min-width: 0; }
}

/* ---------- Dialogs & forms ---------- */

dialog.kt-dialog {
	width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 32px);
	padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--card); color: var(--text); box-shadow: var(--shadow-lg);
}
dialog.kt-dialog::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-head h2 { font-size: 22px; }
.dialog-head p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; align-content: start; }
.field label, .field .label { font-size: 14px; font-weight: 500; }
.field .opt { font-weight: 400; color: var(--text-soft); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
	font: 15px var(--font);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); }
.field .hint { font-size: 13px; color: var(--text-muted); }
.field .err { font-size: 13px; color: var(--error); font-weight: 500; }
.field .err:empty { display: none; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-muted); }
.check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--accent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.estimate {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 14px 16px; border-radius: var(--radius-sm); background: var(--brand-soft); font-size: 14px;
}
.estimate strong { font-size: 18px; font-weight: 600; }

.notice { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; background: var(--notice-bg); color: var(--notice-fg); }
.notice .btn { margin-top: 10px; }
.notice[hidden] { display: none; }

.dialog-summary {
	display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm);
	background: var(--surface); border: 1px solid var(--border); font-size: 14px; margin-bottom: 16px;
}
.dialog-summary strong { font-size: 16px; }

.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }

.success { text-align: center; padding: 12px 4px 4px; }
.success .feature-icon { margin: 0 auto 14px; width: 64px; height: 64px; background: var(--success-bg); color: var(--success); }
.success h3 { font-size: 22px; margin-bottom: 8px; }
.success p { color: var(--text-muted); }
.success p + p { margin-top: 8px; }

/* ---------- Inner pages ---------- */

/* Inner page header: its own band — breadcrumb pill and title on the left, description on the right.
   (The home page keeps the photo hero.) */
.page-head {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--surface); border-bottom: 1px solid var(--border); padding: clamp(40px, 5vw, 64px) 0;
}
/* Faint mountain ridgelines along the bottom, coloured by a token so they follow the theme. */
.page-head::before {
	content: ""; position: absolute; inset: auto 0 0; height: 240px; z-index: -1; background: var(--mtn-line);
	-webkit-mask: url("../img/pattern-mountains.svg") repeat-x left bottom / 1200px 240px;
	mask: url("../img/pattern-mountains.svg") repeat-x left bottom / 1200px 240px;
}
.page-head .container {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: end;
}
.page-head .breadcrumbs { grid-column: 1; margin: 0 0 18px; justify-self: start; }
.page-head .breadcrumbs ol {
	padding: 4px 12px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--border);
}
.page-head h1 { grid-column: 1; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.025em; }
.page-lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 560px; }
.page-head + .section { padding-top: clamp(40px, 5vw, 64px); }
.page-lead > p + p { margin-top: 12px; }
.page-lead .post-meta { margin-top: 14px; }
.page-lead > .post-meta:first-child { margin-top: 0; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Country page: text on the left, photo on the right */
/* Spare height goes to the outer rows, so the text block stays together, centred beside the photo. */
.page-head.has-media .container { grid-template-rows: 1fr auto auto auto 1fr; align-items: start; }
.page-head.has-media .breadcrumbs { grid-row: 2; }
.page-head.has-media h1 { grid-row: 3; }
.page-head.has-media .page-lead { grid-column: 1; grid-row: 4; align-self: start; margin-top: 16px; }
.page-head-media { grid-column: 2; grid-row: 1 / -1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.page-head-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
	.page-head .container { grid-template-columns: 1fr; }
	.page-lead { grid-column: 1; grid-row: auto; margin-top: 12px; }
	/* The title sits right below, so the breadcrumb keeps one line on phones. */
	.page-head .breadcrumbs li[aria-current] { display: none; }
	.page-head.has-media .container { grid-template-rows: none; }
	.page-head.has-media .breadcrumbs, .page-head.has-media h1, .page-head.has-media .page-lead { grid-row: auto; }
	.page-head-media { grid-column: 1; grid-row: auto; margin-top: 28px; }
}

/* FAQ accordion */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.faq-layout .section-head { margin: 0; position: sticky; top: 88px; }
.faq-ask { margin-top: 24px; }
.faq { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.faq-item summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 22px; font-weight: 600; font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { flex: none; color: var(--text-muted); transition: transform .2s; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-answer { padding: 0 22px 20px; color: var(--text-muted); }
.faq-answer > * + * { margin-top: 10px; }
@media (max-width: 860px) {
	.faq-layout { grid-template-columns: 1fr; gap: 24px; }
	.faq-layout .section-head { position: static; }
}

/* How group travel works: four steps on a connecting line (vertical on phones) */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.journey-step {
	position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px;
	border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
/* Connector from this step's icon to the next card */
.journey-step:not(:last-child)::after {
	content: ""; position: absolute; top: 55px; left: calc(100% - 24px); width: 68px; height: 2px;
	background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .5; z-index: 1;
}
.journey-node {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--brand-soft); color: var(--accent); position: relative; z-index: 2;
}
.journey-node .icon { width: 26px; height: 26px; }
.journey-num { margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.journey-step h3 { font-size: 20px; letter-spacing: -0.02em; margin-top: 6px; }
.journey-step p { color: var(--text-muted); font-size: 15px; margin-top: 8px; }
.journey-visual {
	margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.journey-visual > * { flex: none; }
.journey-step p + .journey-visual { margin-top: auto; }
.jv-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill);
	font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text);
}
.jv-pill.is-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.jv-pill .icon { width: 14px; height: 14px; }
.jv-mail { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px; margin-top: 20px; border-radius: var(--radius); background: var(--surface); }
.journey-step p + .jv-mail { margin-top: auto; }
.jv-mail-line { height: 6px; border-radius: 3px; background: var(--border-strong); }
.jv-mail-line.is-short { width: 60%; }
.jv-mail .jv-pill { align-self: flex-start; margin-top: 6px; }
.jv-seats { display: flex; gap: 4px; }
.jv-seats i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--st-guaranteed-bar); }
.jv-seats i.on { background: var(--st-guaranteed-bar); }
.jv-drop { font-size: 12px; font-weight: 600; color: var(--st-guaranteed-fg); }
.jv-bubble {
	position: relative; max-width: 100%; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
	background: var(--surface); font-size: 13px; color: var(--text); line-height: 1.4; flex: 1 1 auto !important;
}
@media (max-width: 1024px) {
	.journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.journey-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 640px) {
	/* Vertical timeline: icon on the left, line running down between steps */
	.journey { grid-template-columns: 1fr; gap: 14px; }
	.journey-step { padding: 22px 20px 20px 88px; min-height: 0; }
	.journey-node { position: absolute; left: 18px; top: 22px; width: 52px; height: 52px; }
	.journey-num { margin-top: 0; }
	.journey-step:not(:last-child)::after, .journey-step:nth-child(2n):not(:last-child)::after {
		display: block; top: 74px; left: 43px; width: 2px; height: calc(100% - 52px + 14px);
		background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px);
	}
}

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.team-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.team-photo { aspect-ratio: 4 / 4.4; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-initial { font-size: 64px; font-weight: 600; color: var(--text-soft); }
.team-body { padding: 20px 22px 24px; }
.team-role { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.team-card h3 { font-size: 21px; letter-spacing: -0.02em; margin-top: 6px; }
.team-bio { margin-top: 10px; color: var(--text-muted); font-size: 15px; }
.team-bio p + p { margin-top: 8px; }
.team-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.team-founder-photo { position: relative; min-height: 420px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.team-founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-ribbon { position: absolute; z-index: 1; top: 26px; left: -46px; width: 180px; padding: 7px 0; transform: rotate(-45deg); text-align: center; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.team-founder-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.team-quote { position: relative; margin: 0 0 22px; padding-top: 34px; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.team-quote::before { content: "\201C"; position: absolute; top: -14px; left: -4px; font-size: 72px; line-height: 1; color: var(--accent); }
.team-founder h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; }
.team-founder .team-role { margin-top: 6px; }
.team-founder .team-bio { margin-top: 16px; font-size: 16px; }
@media (max-width: 860px) {
	.team-founder { grid-template-columns: 1fr; }
	.team-founder-photo { min-height: 0; aspect-ratio: 4 / 3.6; }
}

/* CTA band */
.cta-card {
	position: relative; overflow: hidden; border-radius: var(--radius-lg); color: var(--on-image);
	padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 72px); display: grid; gap: 14px; justify-items: start;
}
.cta-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25)); }
.cta-card > :not(img) { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(26px, 3.6vw, 40px); max-width: 600px; }
.cta-card p { color: var(--on-image-muted); max-width: 520px; }
.cta-card .hero-actions { margin-top: 10px; }
@media (max-width: 560px) { .cta-card { padding: 40px 20px; } }

/* Contact */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.form-card { padding: 32px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.form-card h2 { font-size: 26px; margin-bottom: 6px; }
.form-card > p { color: var(--text-muted); margin-bottom: 22px; }
@media (max-width: 520px) { .form-card { padding: 22px 18px; } }
.info-list { display: grid; gap: 12px; }
.info-card {
	display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--radius);
	background: var(--surface); border: 1px solid var(--border);
}
.info-card .feature-icon { width: 46px; height: 46px; flex: none; }
.info-card .feature-icon .icon { width: 22px; height: 22px; }
.info-card small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.info-card strong { font-weight: 600; }
.info-card p { color: var(--text-muted); font-size: 14px; margin-top: 2px; }

/* Departures page */
.month-group + .month-group { margin-top: 36px; }
.month-group > h2 { font-size: 22px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.month-group > h2 small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.month-group[hidden], .departure[hidden], .empty-state[hidden] { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -12px 0 28px; font-size: 14px; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Tours catalog ---------- */

.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.grid-4 .tour-body h3 { font-size: 17px; }

/* Filter bar (tours catalog, group departures): pills that open small option panels */
.fbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
	margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.fbar-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.fbar-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.fbar-count { font-size: 14px; color: var(--text-muted); white-space: nowrap; }

.fpill { position: relative; }
.fpill > summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; padding: 0 14px 0 18px; border-radius: var(--pill);
	border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
	font: 500 14px var(--font); white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s;
	-webkit-user-select: none; user-select: none;
}
.fpill > summary::-webkit-details-marker { display: none; }
.fpill > summary:hover { border-color: var(--text-soft); }
.fpill > summary .icon { width: 14px; height: 14px; transition: transform .2s; }
.fpill[open] > summary .icon { transform: rotate(180deg); }
.fpill[open] > summary { border-color: var(--text); }
.fpill.is-active > summary { background: var(--text); border-color: var(--text); color: var(--bg); }

.fpill-panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
	min-width: 280px; max-width: min(360px, calc(100vw - 2 * var(--gutter))); max-height: 360px; overflow-y: auto;
	margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--card); box-shadow: var(--shadow-lg);
	animation: flyout-in .18s ease-out;
}
/* A closed pill's panel takes no space. Chrome keeps a layout box for closed <details> content,
   which pushed the page wider than the screen on phones (sideways wobble). */
.fpill:not([open]) > .fpill-panel { display: none; }
.fopt {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
	font-size: 15px; color: var(--text); cursor: pointer;
}
.fopt:hover { background: var(--surface); }
.fopt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.fopt:has(input:checked) { font-weight: 600; }
.fopt-count { margin-left: auto; font-size: 13px; color: var(--text-soft); font-weight: 400; }

.ftoggle {
	display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px;
	border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--card);
	font: 500 14px var(--font); color: var(--text); cursor: pointer; white-space: nowrap;
}
/* The checkbox drawn as a small switch */
.ftoggle input {
	appearance: none; -webkit-appearance: none; position: relative; width: 30px; height: 18px; margin: 0; flex: none;
	border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background-color .2s;
}
.ftoggle input::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
	background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s;
}
.ftoggle input:checked { background: var(--accent); }
.ftoggle input:checked::after { transform: translateX(12px); }
.ftoggle input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ftoggle:has(input:checked) { border-color: var(--text); }

.fbar-clear { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; padding: 0 6px; }
.fbar-clear:hover { text-decoration: underline; }

.fbar-sort { display: flex; align-items: center; gap: 4px; }
.fbar-sort-label { display: none; font-size: 14px; color: var(--text-muted); }
.fbar-sort select {
	appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 38px 0 16px; border-radius: var(--pill);
	border: 1px solid var(--border-strong); color: var(--text); font: 500 14px var(--font); cursor: pointer;
	background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px;
}

@media (max-width: 640px) {
	/* Phones: the pills become one row you swipe sideways, running to the screen edges.
	   Panels are positioned against .fbar (outside the scroller) so the row does not clip them. */
	.fbar { position: relative; align-items: stretch; }
	.fbar-pills {
		position: static; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.fbar-pills::-webkit-scrollbar { display: none; }
	/* Keep screen-reader-only labels inside each pill, so they never land past the screen edge. */
	.fpill > summary, .ftoggle { position: relative; }
	.fbar-pills > * { flex: none; }
	.fpill { position: static; }
	.fpill-panel { top: 48px; left: 0; right: 0; max-width: none; }
	.fbar-end { width: 100%; justify-content: space-between; margin-left: 0; }
	/* Count and sort as one quiet text line under the pills, not a second row of big controls */
	.fbar { gap: 14px; }
	.fbar-sort-label { display: inline; }
	.fbar-sort select {
		min-height: 32px; padding: 0 20px 0 0; border: 0; border-radius: 0; font-weight: 600;
		background-color: transparent; background-position: right 0 center; background-size: 13px;
	}
}

.tour-card[hidden] { display: none; }

.next-dep {
	display: flex; align-items: center; gap: 6px; margin-top: 10px;
	font-size: 13px; font-weight: 500; color: var(--st-guaranteed-fg);
}
.next-dep.is-none { color: var(--text-soft); font-weight: 400; }
.next-dep .icon { width: 16px; height: 16px; }

/* ---------- Blog ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
	min-height: 40px; padding: 8px 16px; border-radius: var(--pill); cursor: pointer;
	border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
	font: 500 14px var(--font);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text-muted); }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-card .tour-body h3 { font-size: 18px; margin-top: 10px; }
.post-card .excerpt { color: var(--text-muted); font-size: 15px; margin-top: 8px; }
.post-card .tour-media { aspect-ratio: 16 / 10; }
.post-card[hidden] { display: none; }
.read-more { margin-top: auto; padding-top: 16px; font-weight: 500; font-size: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

.post-featured {
	position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin-bottom: 32px;
	border-radius: var(--radius-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.post-featured[hidden] { display: none; }
.post-featured .tour-media { aspect-ratio: auto; min-height: 340px; border-radius: 0; }
.post-featured .tour-body { padding: 36px; justify-content: center; }
.post-featured h2 { font-size: clamp(24px, 2.8vw, 32px); margin-top: 12px; }
.post-featured h2 a { color: var(--text); text-decoration: none; }
.post-featured h2 a::after { content: ""; position: absolute; inset: 0; }
.post-featured .excerpt { font-size: 16px; }
@media (max-width: 860px) {
	.post-featured { grid-template-columns: 1fr; }
	.post-featured .tour-media { min-height: 0; aspect-ratio: 16 / 10; }
	.post-featured .tour-body { padding: 22px; }
}

/* Single article */
.article-head { max-width: 800px; margin: 0 auto; text-align: center; }
.article-head .breadcrumbs ol { justify-content: center; }
.article-head h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.02em; margin: 14px 0 16px; }
.article-head .post-meta { justify-content: center; }
.article-cover { max-width: var(--container); margin: clamp(32px, 4vw, 48px) auto 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .article-cover { aspect-ratio: 4 / 3; } }

.article { max-width: 720px; margin: 48px auto 0; font-size: 17px; line-height: 1.75; }
.article > * + * { margin-top: 18px; }
.article h2 { font-size: 26px; margin-top: 40px; }
.article h3 { font-size: 20px; margin-top: 28px; }
.article p, .article li { color: var(--text-muted); }
.article strong { color: var(--text); font-weight: 600; }
.article ul { padding-left: 22px; }
.article li + li { margin-top: 6px; }
.article .lead { font-size: 19px; color: var(--text); }
.article blockquote {
	margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--brand-soft); color: var(--text); font-size: 16px;
}
.month-table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.month-table th, .month-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.month-table th { background: var(--surface); color: var(--text-muted); font-weight: 500; font-size: 13px; }
.month-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.month-table td { color: var(--text-muted); }
.table-wrap { overflow-x: auto; }

.tour-callout {
	position: relative; display: grid; grid-template-columns: 160px 1fr auto; gap: 18px; align-items: center;
	padding: 12px; margin: 32px 0; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.tour-callout img { width: 160px; height: 110px; object-fit: cover; border-radius: calc(var(--radius-lg) - 8px); }
.tour-callout small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.tour-callout strong { display: block; font-size: 18px; color: var(--text); }
.tour-callout p { font-size: 14px; margin: 2px 0 0; }
.tour-callout .btn { margin-right: 8px; }
@media (max-width: 600px) {
	.tour-callout { grid-template-columns: 1fr; }
	.tour-callout img { width: 100%; height: 160px; }
	.tour-callout .btn { margin: 0; width: 100%; }
}

.article-foot {
	max-width: 720px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--border);
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.author { display: flex; align-items: center; gap: 12px; }
.author img { width: 48px; height: 48px; border-radius: 50%; }
.author strong { display: block; font-size: 15px; }
.author span { font-size: 13px; color: var(--text-muted); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.tour-card:hover { transform: none; }
	.dest-card:hover img, .tour-card:hover .tour-media img, .gallery a:hover img { transform: none; }
}

/* ==========================================================================
   WordPress theme additions
   ========================================================================== */

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sticky header below the admin bar */
.admin-bar .gnav { top: 32px; }
.admin-bar .gnav-sheet { top: 80px; }
@media (max-width: 782px) { .admin-bar .gnav { top: 46px; } .admin-bar .gnav-sheet { top: 94px; } }
@media (max-width: 600px) { .admin-bar .gnav { top: 0; } }

/* Notices */
.notice.is-success { background: var(--success-bg); color: var(--success); }
.notice.is-error { background: var(--error-bg); color: var(--error); }
.flash { margin-bottom: 18px; }
.flash[hidden], .form-error[hidden] { display: none; }
.form-error { margin-top: 12px; }

/* Image placeholders */
.img-placeholder {
	display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px;
	background: var(--surface-2); color: var(--text-soft); font-size: 13px; text-align: center;
}

/* Tags as links */
a.tag { text-decoration: none; color: var(--text); }
a.tag:hover { border-color: var(--accent); color: var(--accent); }

/* Topic chips as links */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Pagination */
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	min-width: 42px; height: 42px; padding: 0 14px; display: inline-grid; place-items: center;
	border-radius: var(--pill); border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-weight: 500;
}
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }

/* Editor content */
.entry-content > * + * { margin-top: 16px; }
.entry-content p, .entry-content li { color: var(--text-muted); }
.entry-content a { color: var(--accent); }
.entry-content img { border-radius: var(--radius); height: auto; }
.entry-content figure { margin: 24px 0; }
.entry-content figcaption { font-size: 14px; color: var(--text-soft); margin-top: 8px; text-align: center; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.entry-content blockquote {
	margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--brand-soft); color: var(--text);
}
.entry-content blockquote p { color: var(--text); }
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.tour-section.entry-content > p { margin-bottom: 12px; }
.day-body p + p { margin-top: 8px; }

/* Departures list while refreshing */
[data-departure-list][aria-busy="true"] { opacity: .6; transition: opacity .2s; }

/* Logo link focus */
.brand:focus-visible { outline-offset: 6px; }

/* ---------- Why travel with us: four illustrated cards ---------- */

.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.why-card {
	display: flex; flex-direction: column; min-height: 400px; padding: 32px 28px 28px;
	border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
	transition: transform .25s, box-shadow .25s;
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.why-card h3 { font-size: 22px; letter-spacing: -0.02em; }
.why-card p { color: var(--text-muted); font-size: 15px; margin-top: 8px; max-width: 220px; }
.why-ill { display: block; width: 100%; max-width: 200px; height: auto; margin: auto auto 0; padding-top: 28px; color: var(--text); stroke: currentColor; }
.why-ill .ill-bg { fill: var(--card); }
.why-ill .ill-soft { fill: var(--ill-soft); }
.why-ill .ill-brand { fill: var(--brand); }
.why-ill .ill-shadow { fill: var(--brand-soft); stroke: none; }
.why-ill .ill-nostroke { stroke: none; }
.why-ill .ill-check { stroke: var(--accent); stroke-width: 6; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-card { min-height: 340px; } }
@media (max-width: 560px) {
	.why-grid { grid-template-columns: 1fr; }
	.why-card { min-height: 0; padding: 24px; }
	.why-ill { max-width: 160px; padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .why-card:hover { transform: none; } }

/* ---------- Swipeable card rows on phones (like the destinations) ---------- */

@media (max-width: 760px) {
	.slide-mobile {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
		gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
		/* Bleed to the screen edges so cards slide in from the side. */
		margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
		scrollbar-width: none;
	}
	.slide-mobile::-webkit-scrollbar { display: none; }
	.slide-mobile > * { scroll-snap-align: start; }
	.slide-mobile .tour-card:hover { transform: none; }
}

/* ---------- Trip planner ---------- */

.planner-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.planner-card { padding: clamp(22px, 3vw, 36px); }
.planner-top { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.planner-count { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.planner-bar { flex: 1; height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.planner-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .35s cubic-bezier(.4, 0, .2, 1); }
.planner-tour { margin-bottom: 20px; }

.planner-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 26px; }
.planner-step + .planner-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
/* With JavaScript only the current step shows; without it, the whole form is one page. */
.planner.is-wizard .planner-step { display: none; }
.planner.is-wizard .planner-step.is-current { display: grid; margin: 0; padding: 0; border: 0; animation: scrim-in .25s ease; }
.planner-step legend { padding: 0; margin-bottom: 4px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.planner-step legend:focus { outline: none; }
.planner-step legend .opt, .planner-q .opt { font-size: 13px; font-weight: 400; color: var(--text-soft); letter-spacing: 0; margin-left: 6px; }
.planner-group { display: grid; gap: 12px; }
.planner-q { font-weight: 600; font-size: 15px; }
.planner-group[data-invalid] .pick span { border-color: var(--error); }
.planner .err { font-size: 13px; color: var(--error); font-weight: 500; }
.planner .err:empty { display: none; }
.planner-exact { margin-top: 4px; }
.planner-date { max-width: 280px; gap: 10px; }
.planner-date[hidden] { display: none; }

/* Tap-to-choose chips */
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
	display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: var(--pill);
	border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
	font-size: 14px; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; -webkit-user-select: none; user-select: none;
}
.pick:hover span { border-color: var(--text-soft); }
.pick input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.pick input:checked + span::before {
	content: ""; width: 10px; height: 6px; margin-right: 2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg);
}
.pick input[type="radio"]:checked + span::before { display: none; }
.pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick input:disabled + span { opacity: .4; cursor: not-allowed; }
.chips-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.chips-months.is-off { opacity: .45; }
.pick-month span { flex-direction: column; justify-content: center; gap: 0; width: 100%; min-height: 56px; padding: 6px 4px; border-radius: var(--radius-sm); line-height: 1.2; }
.pick-month small { font-size: 11px; font-weight: 400; opacity: .7; }
.pick-month input:checked + span::before { display: none; }

/* − / + number */
.stepper { display: grid; gap: 8px; }
.stepper label { font-size: 15px; }
.stepper .opt { font-size: 13px; color: var(--text-soft); font-weight: 400; }
.stepper-ctl { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--pill); justify-self: start; background: var(--card); }
.stepper-btn {
	width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text);
	font: 500 20px/1 var(--font); cursor: pointer;
}
.stepper-btn:hover { background: var(--surface-2); }
.stepper-ctl input {
	width: 56px; border: 0; background: transparent; color: var(--text); text-align: center; font: 600 18px var(--font);
	-moz-appearance: textfield; appearance: textfield;
}
.stepper-ctl input::-webkit-outer-spin-button, .stepper-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-ctl input:focus { outline: none; }
.stepper-ctl:focus-within { border-color: var(--focus); }
.stepper-row { display: flex; flex-wrap: wrap; gap: 20px 40px; }

.planner-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.planner-nav-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.planner-nav .btn[hidden], .planner-skip[hidden] { display: none; }
.planner-skip { width: auto; margin: 0; }
.planner:not(.is-wizard) [data-planner-next], .planner:not(.is-wizard) [data-planner-back], .planner:not(.is-wizard) [data-planner-skip] { display: none; }

.planner-aside { position: sticky; top: 72px; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); }
.planner-aside h2 { font-size: 18px; margin-bottom: 18px; }
.planner-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: pn; }
.planner-next li { position: relative; padding-left: 44px; display: grid; gap: 2px; counter-increment: pn; }
.planner-next li::before {
	content: counter(pn); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; background: var(--brand-soft); color: var(--accent); font-size: 14px; font-weight: 600;
}
.planner-next strong { font-size: 15px; }
.planner-next span { font-size: 14px; color: var(--text-muted); }
.planner-note { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.planner-note .icon { flex: none; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }

@media (max-width: 960px) {
	.planner-layout { grid-template-columns: 1fr; }
	.planner-aside { position: static; order: -1; padding: 20px; }
	.planner-next { gap: 12px; }
}
@media (max-width: 560px) {
	.chips-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.planner-aside { display: none; }
}

/* WhatsApp links */
.planner-wa {
	display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: var(--radius);
	background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px;
}
.planner-wa:hover { border-color: var(--accent); color: var(--text); }
.planner-wa .icon { width: 26px; height: 26px; color: var(--st-guaranteed-fg); flex: none; }
.planner-wa strong { display: block; color: var(--accent); }

/* Floating contact button (call / email / WhatsApp) */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab-btn {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lg);
}
.fab-btn:hover { background: var(--accent-hover); }
.fab-btn .icon { width: 24px; height: 24px; }
.fab-btn .fab-close, .fab-btn[aria-expanded="true"] .fab-open { display: none; }
.fab-btn[aria-expanded="true"] .fab-close { display: block; }
.fab-menu {
	list-style: none; margin: 0; padding: 6px; min-width: 250px; border-radius: var(--radius);
	background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
	animation: flyout-in .18s ease-out;
}
.fab-menu[hidden] { display: none; }
.fab-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.fab-menu a:hover { background: var(--surface); }
.fab-menu strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.fab-menu small { display: block; font-size: 13px; color: var(--text-muted); }
.fab-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--brand-soft); color: var(--accent); }
.fab-ico.is-wa { background: var(--st-guaranteed-bg); color: var(--st-guaranteed-fg); }
.fab-ico .icon { width: 19px; height: 19px; }
/* Tour pages on phones and tablets: sit above the booking bar */
@media (max-width: 1024px) {
	body:has(.book-bar) .fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
	body:has(.book-bar.is-hidden) .fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) { .fab-btn { width: 52px; height: 52px; } }

/* ---------- Saved tours (kept in the browser, no account) ---------- */
.save-btn {
	position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1b2733; cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2); transition: transform .15s;
}
.save-btn:hover { transform: scale(1.06); }
.save-btn .icon { width: 19px; height: 19px; stroke-width: 1.9; }
[data-save-tour][aria-pressed="true"] .icon { fill: var(--saved); stroke: var(--saved); }
.btn-save {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 14px 0 0;
	border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: 500 14px/1.2 var(--font); cursor: pointer;
}
.btn-save:hover { color: var(--accent); }
.btn-save .icon { width: 18px; height: 18px; }
.btn-save-icon {
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0; flex: none;
	border: 1px solid var(--border); border-radius: var(--pill); background: var(--card); color: var(--text); cursor: pointer;
}
.btn-save-icon .icon { width: 19px; height: 19px; }
.gnav-saved { position: relative; }
.saved-count {
	position: absolute; top: 9px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
	background: var(--saved); color: #fff; font: 600 10px/15px var(--font); text-align: center;
}
.saved-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.saved-actions .btn .icon { width: 17px; height: 17px; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .save-btn { transition: none; } }

/* ---------- Tour overview: subheadings, lists and the trip expert line ---------- */
#overview h3 { font-size: 20px; letter-spacing: -0.01em; margin-top: 32px; color: var(--text); }
#overview ul { padding-left: 22px; }
#overview li + li { margin-top: 6px; }
#overview strong { color: var(--text); font-weight: 600; }
.trip-expert {
	display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 18px 20px;
	border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
}
.trip-expert-photo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--card); color: var(--accent); }
.trip-expert-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.trip-expert-photo .mark { width: 38px; height: auto; }
#overview .trip-expert p { margin: 0; }
#overview .trip-expert-name { color: var(--text); font-weight: 600; font-size: 16px; }
#overview .trip-expert-role { font-size: 14px; }
.trip-expert-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0 !important; list-style: none; font-size: 13px; }
#overview .trip-expert-facts li { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); }
.trip-expert-facts .icon { width: 14px; height: 14px; }
@media (max-width: 520px) { .trip-expert { align-items: flex-start; } }

/* ---------- Forms on phones: main button full width on top, Cancel / Back underneath ---------- */
@media (max-width: 640px) {
	.form-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
	.form-actions .btn { width: 100%; justify-content: center; }
	.planner-nav { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
	.planner-nav-end { flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-left: 0; }
	.planner-nav .btn { width: 100%; justify-content: center; }
	.planner-skip { align-self: center; padding: 6px 12px; }
}

/* Optional traveler fields (country, note) folded away until wanted */
.more-fields > summary {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
	font-size: 14px; font-weight: 500; color: var(--accent); padding: 4px 0;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary .icon { width: 16px; height: 16px; transition: transform .2s; }
.more-fields[open] > summary .icon { transform: rotate(45deg); }
.more-fields-body { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.more-fields:not([open]) > .more-fields-body { display: none; }

/* ---------- Dialog forms: a sheet stuck to the bottom of the screen, full width, as tall as its content.
   Fixed title bar, scrolling form, main button pinned at the bottom. On wide screens the content stays
   in a centered column (--sheet-pad grows) so fields never stretch across the whole monitor. ---------- */
dialog.kt-dialog {
	--sheet-pad: max(20px, calc((100vw - 760px) / 2));
	/* Pinned to the bottom edge explicitly (not via auto margins), and sized against the SMALL viewport
	   (svh = screen height with Safari's address bar showing), so on iPhone the sheet and its buttons are
	   never pushed below the visible area. Only .dialog-body scrolls. */
	position: fixed; inset: auto 0 0 0; margin: 0;
	width: 100%; max-width: 100%; max-height: 85vh; max-height: 92svh; overflow: hidden;
	border-radius: 22px 22px 0 0; border-bottom: 0;
}
dialog.kt-dialog[open] { display: flex; flex-direction: column; animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
.dialog-head { position: relative; flex: none; padding: 26px var(--sheet-pad) 14px; border-bottom: 1px solid var(--border); }
.dialog-head::before {
	content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
	border-radius: 3px; background: var(--border-strong);
}
.dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px var(--sheet-pad) 0; }
.kt-dialog .form-actions {
	position: sticky; bottom: 0; z-index: 2; flex-direction: column-reverse; align-items: stretch; gap: 8px;
	margin: 18px calc(-1 * var(--sheet-pad)) 0; padding: 14px var(--sheet-pad) calc(14px + env(safe-area-inset-bottom));
	background: var(--card); border-top: 1px solid var(--border);
}
.kt-dialog .form-actions .btn { width: 100%; justify-content: center; }
.kt-dialog .success { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.kt-dialog .success .form-actions { position: static; border-top: 0; margin: 18px 0 0; padding: 0; }
/* Wider screens: Cancel and the main button side by side on one line (main button wider) */
@media (min-width: 641px) {
	.kt-dialog .form-actions { flex-direction: row; }
	.kt-dialog .form-actions .btn { flex: 1; width: auto; }
	.kt-dialog .form-actions .btn-primary { flex: 2; }
}
/* While a form sheet is open the page behind stays still: no sideways or background scrolling on iPhone */
html:has(dialog.kt-dialog[open]) { overflow: hidden; overscroll-behavior: none; }
dialog.kt-dialog { overscroll-behavior: contain; touch-action: pan-y; }
.dialog-body { overflow-x: hidden; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.kt-dialog[open] { animation: none; } }

/* ---------- Forms on phones ---------- */
@media (max-width: 640px) {
	/* iPhone zooms the page into any field whose text is under 16px */
	.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { font-size: 16px; min-height: 48px; }
	.dialog-head h2 { font-size: 20px; }
}