/* ==========================================================================
   Kyrgyz Wilderness theme
   Every color is a token. Components never use literal colors.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* Brand: terracotta on warm charcoal (Wild Kyrgyzstan). Dark is the default theme. */
	--brand: #C2BAA9;
	--brand-soft: rgba(194, 186, 169, 0.14);
	--brand-deep: #352F27;       /* end of the gradient on photo-less cards */
	--lime: #C2BAA9;

	/* Surfaces */
	--bg: #22201E;
	--surface: #2B2824;
	--surface-2: #34302A;
	--card: #2B2824;
	--header-bg: rgba(34, 32, 30, 0.86);
	--overlay: rgba(0, 0, 0, 0.6);

	/* Text */
	--text: #ECE8E0;
	--text-strong: #FAF6F0;
	--text-muted: #A9A398;
	--text-soft: #8A8072;
	--on-image: #ffffff;
	--on-image-muted: rgba(255, 255, 255, 0.86);

	/* Lines & effects */
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);

	/* Accent: a single terracotta used for both themes, with a darker shade on hover/press. */
	--accent: #C2BAA9;
	--accent-hover: #D4C9B8;
	--accent-fill: #C2BAA9;
	--accent-fill-hover: #AFA290;
	--cta-dot-fg: #5C5245;
	--on-accent: #22201E;
	--focus: #C2BAA9;

	/* Departure status (kept for the admin-free leftovers) */
	--st-open-fg: #ffc46b;
	--st-open-bg: #3a2a10;
	--st-open-bar: #f0a23a;
	--st-guaranteed-fg: #C2BAA9;
	--st-guaranteed-bg: #352F27;
	--st-guaranteed-bar: #C2BAA9;
	--st-full-fg: #ff9b8f;
	--st-full-bg: #3d1714;
	--st-full-bar: #e8604f;
	--saved: #ff6b81;
	--st-neutral-fg: #A9A398;
	--st-neutral-bg: #34302A;

	/* Form feedback */
	--error: #ff9b8f;
	--error-bg: #3d1714;
	--success: #C2BAA9;
	--success-bg: #352F27;
	--notice-bg: #3a2a10;
	--notice-fg: #ffd699;

	/* Shape & rhythm */
	--radius-sm: 14px;
	--radius: 20px;
	--radius-lg: 28px;
	--pill: 999px;
	--container: 1280px;
	--gutter: 20px;

	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;

	/* Global navigation */
	--nav-bg: rgba(34, 32, 30, 0.82);
	--nav-bg-open: rgba(34, 32, 30, 0.96);
	--nav-border: rgba(255, 255, 255, 0.08);
	--nav-text: #D6D0C4;
	--nav-text-strong: #FAF6F0;
	--nav-scrim: rgba(0, 0, 0, 0.5);
	--ill-soft: #352F27;
	--mtn-line: rgba(194, 186, 169, 0.18);
}

:root[data-theme="light"] {
	color-scheme: light;
	--brand-soft: #EDE8DF;
	--bg: #FAF6F0;
	--surface: #F2EADC;
	--surface-2: #EAE1D2;
	--card: #FFFFFF;
	--header-bg: rgba(250, 246, 240, 0.88);
	--overlay: rgba(0, 0, 0, 0.45);
	--text: #22201E;
	--text-strong: #18160F;
	--text-muted: #4A433C;
	--text-soft: #6B6358;
	--border: rgba(0, 0, 0, 0.08);
	--border-strong: rgba(0, 0, 0, 0.16);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.14);
	--accent: #5C5245;
	--accent-hover: #3F392F;
	--focus: #5C5245;
	--st-guaranteed-fg: #5C5245;
	--st-guaranteed-bg: #EDE8DF;
	--st-neutral-fg: #4A433C;
	--st-neutral-bg: #F2EADC;
	--error: #b42318;
	--error-bg: #fdecea;
	--success: #5C5245;
	--success-bg: #EDE8DF;
	--notice-bg: #fff6e6;
	--notice-fg: #6b3d00;
	--nav-bg: rgba(250, 246, 240, 0.82);
	--nav-bg-open: rgba(250, 246, 240, 0.96);
	--nav-border: rgba(0, 0, 0, 0.08);
	--nav-text: #4A433C;
	--nav-text-strong: #22201E;
	--nav-scrim: rgba(0, 0, 0, 0.25);
	--ill-soft: #EDE8DF;
	--mtn-line: rgba(92, 82, 69, 0.16);
}

/* ---------- Ornamental pattern: the real oymo scroll motif, for CTA panels and feature
   blocks. The source SVG already carries its own low fill-opacity, so it reads as a
   barely-there texture on both themes without any extra colour/opacity trick. ---------- */
.kw-pattern { position: relative; isolation: isolate; overflow: hidden; }
.kw-pattern::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: url("../img/oymo-pattern.svg");
	background-repeat: repeat;
	background-size: 300px 73px;
	pointer-events: none;
}
.kw-pattern > * { position: relative; z-index: 1; }

/* ---------- 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-fill); 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-color: var(--accent-fill); color: var(--on-accent);
	background-image: url("../img/oymo-pattern.svg"); background-repeat: repeat; background-size: 90px 22px;
}
.btn-primary:hover { background-color: var(--accent-fill-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-color: var(--accent-fill); color: var(--on-accent); text-decoration: none; white-space: nowrap;
	font: 400 13px/1 var(--font);
	background-image: url("../img/oymo-pattern.svg"); background-repeat: repeat; background-size: 70px 17px;
}
.gnav-cta:hover { background-color: var(--accent-fill-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: 16px; height: 8px; }
.burger span { position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform .3s, top .3s; }
.burger span:first-child { top: 0; }
.burger span:last-child { top: 6.25px; }
.is-open .burger span:first-child { top: 3.125px; transform: rotate(45deg); }
.is-open .burger span:last-child { top: 3.125px; 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: 12px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: var(--row) var(--row);
}
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border); }
.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-left: 3px solid var(--lime); 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-fill); border-color: var(--accent-fill); 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-fill); 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 */
/* Split CTA: text panel on its own surface + an inset framed photo, instead of text over
   a full-bleed photo with a gradient scrim. */
.cta-card {
	position: relative; overflow: hidden; border-radius: var(--radius-lg);
	background: var(--surface-2); border: 1px solid var(--border);
	display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; gap: 0;
}
.cta-card-text {
	position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px;
	padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
}
.cta-card-photo { position: relative; margin: 14px 14px 14px 0; border-radius: var(--radius); overflow: hidden; min-height: 220px; }
.cta-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-card h2 { font-size: clamp(26px, 3.2vw, 36px); max-width: 480px; color: var(--text-strong); }
.cta-card p { color: var(--text-muted); max-width: 440px; }
.cta-card .hero-actions { margin-top: 10px; }
@media (max-width: 760px) {
	.cta-card { grid-template-columns: 1fr; }
	.cta-card-photo { order: -1; margin: 14px 14px 0; min-height: 180px; }
}

/* 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-fill); }
.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-fill); border-color: var(--accent-fill); 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-fill); border-color: var(--accent-fill); 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-fill); border-color: var(--accent-fill); 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-fill); 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-fill); color: var(--on-accent); box-shadow: var(--shadow-lg);
}
.fab-btn:hover { background: var(--accent-fill-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; }
}

/* ==========================================================================
   Kyrgyz Wilderness design layer: display type, header, home sections.
   Loaded last so it refines the components above without repeating them.
   ========================================================================== */

h1, h2, h3, h4, .section-title, .flyout-col-lg a, .book-card .price-from strong, .price-from strong {
	font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--text-strong);
}
.section-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; }
.section-sub { font-size: 17px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; }
body { font-size: 16px; line-height: 1.55; letter-spacing: 0; }

.btn { min-height: 48px; padding: 10px 22px; font: 700 15px/1.2 var(--font); }
.btn-sm { min-height: 40px; font-size: 14px; }
.btn-ghost { color: var(--text-strong); border-color: var(--border-strong); }
.btn .icon { width: 18px; height: 18px; }

/* Header: logo, roomy links, theme toggle and lime "Plan my trip" */
.gnav { border-bottom: 1px solid var(--nav-border); }
.gnav-list { height: 76px; }
.gnav-link { height: 76px; padding: 0 12px; font: 500 15px/1 var(--font); opacity: 1; }
.brand.gnav-link { padding: 0; }
.mark { display: inline-flex; align-items: center; gap: 12px; }
.mark .badge { flex: none; display: block; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--text-strong); white-space: nowrap; }
.wordmark span { font-weight: 500; color: var(--text-muted); }
.brand .mark, .footer-about .mark { display: inline-flex; height: auto; }
.gnav-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); opacity: 1; color: var(--text-muted); }
.gnav-icon.gnav-saved { border: 0; }
.gnav-icon .icon { width: 18px; height: 18px; }
.gnav-cta { height: 44px; padding: 0 6px 0 20px; font: 700 15px/1 var(--font); }
.cta-dot { width: 32px; height: 32px; background: #22201E; color: var(--lime); }
.flyout { top: 100%; }
.flyout a { font-size: 14px; }
@media (max-width: 1100px) { .gnav-link { padding: 0 8px; font-size: 14px; } }
@media (max-width: 833px) {
	.gnav-list { height: 64px; }
	.gnav-link { height: 64px; }
	.wordmark { font-size: 18px; }
	.mark .badge { width: 36px; height: 36px; }
	.gnav-burger { border: 0; }
}
@media (max-width: 420px) { .wordmark { font-size: 16px; } .mark { gap: 8px; } .mark .badge { width: 32px; height: 32px; } }

/* Hero: photo behind a dark wash, big two-tone headline, glass search panel */
.kw-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: #22201E; isolation: isolate; }
.kw-hero-media { position: absolute; inset: 0; z-index: -1; }
.kw-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.kw-hero-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .25) 50%, rgba(10, 10, 10, 0) 100%), linear-gradient(0deg, rgba(18, 18, 18, .7) 0%, transparent 35%);
}
.kw-hero { display: flex; align-items: center; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
.kw-hero-inner { padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(48px, 7vw, 80px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.kw-hero h1, .kw-hero-lead { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
@media (max-width: 833px) { .kw-hero { min-height: calc(100svh - 64px); } .kw-hero-media img { object-position: 60% center; } }
.kw-pill-label {
	display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--pill);
	border: 1px solid rgba(194, 186, 169, .28); background: rgba(194, 186, 169, .08); color: #E3DACB; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.kw-pill-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.kw-hero h1 { max-width: 900px; font-size: clamp(44px, 7vw, 84px); line-height: .98; letter-spacing: -0.035em; color: #fff; }
.kw-hero h1 span { color: var(--lime); }
.kw-hero-lead { max-width: 580px; font-size: clamp(17px, 1.6vw, 19px); color: #F2F2F2; }
.kw-search {
	margin-top: 8px; width: 100%; max-width: 1000px; padding: 10px; border-radius: 20px;
	background: rgba(28, 28, 28, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px;
}
.kw-field { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 40px 12px 16px; border-radius: 14px; background: #282828; cursor: pointer; }
.kw-field:focus-within { outline: 2px solid var(--lime); outline-offset: -2px; }
.kw-field > span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8C8C8C; }
.kw-field select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; padding: 2px 0; background: transparent; color: #fff; font: 600 16px var(--font); outline: none; cursor: pointer; }
.kw-field option { color: #111; }
.kw-caret { position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: #A8A8A8; pointer-events: none; }
.kw-search-btn { min-height: 64px; border-radius: 14px; padding: 0 28px; font-size: 16px; }
@media (max-width: 900px) { .kw-search { grid-template-columns: 1fr 1fr; } .kw-search-btn { grid-column: 1 / -1; } }
@media (max-width: 520px) { .kw-search { grid-template-columns: 1fr; } }

/* Activity chips */
.kw-chips-head { padding-top: 36px; margin-bottom: -8px; }
.kw-chips-head .eyebrow { margin-bottom: 0; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 36px; padding-bottom: 0; }

/* ---------- Hero search: country / activity / duration, submits to the tours archive ---------- */
.kw-hero-search {
	display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin-top: 28px;
	background: rgba(10, 10, 10, .5); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--pill); padding: 6px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	max-width: 720px;
}
.kw-hero-search-field {
	display: flex; align-items: center; gap: 10px; padding: 0 18px; position: relative;
	flex: 1 1 130px; min-width: 110px; cursor: pointer;
}
.kw-hero-search-field + .kw-hero-search-field { border-left: 1px solid rgba(255, 255, 255, .16); }
.kw-hero-search-field .icon { width: 16px; height: 16px; color: var(--lime); flex: none; }
.kw-hero-search-field select {
	appearance: none; -webkit-appearance: none; background: none; border: 0; color: #fff;
	font: 600 14px/1 var(--font); cursor: pointer; padding: 14px 16px 14px 0; width: 100%;
}
.kw-hero-search-field select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }
.kw-hero-search-field select option { color: #1d1d1f; }
.kw-hero-search-field::after {
	content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
	border-right: 2px solid rgba(255, 255, 255, .55); border-bottom: 2px solid rgba(255, 255, 255, .55);
	transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.kw-hero-search-submit {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 24px; margin: 0; border-radius: var(--pill); border: 0;
	background-color: var(--accent-fill); color: var(--on-accent); font: 700 15px/1 var(--font); cursor: pointer;
	background-image: url("../img/oymo-pattern.svg"); background-repeat: repeat; background-size: 90px 22px;
	transition: background-color .2s;
}
.kw-hero-search-submit:hover { background-color: var(--accent-fill-hover); }
.kw-hero-search-submit .icon { width: 16px; height: 16px; }
/* Phones: a rounded glass card with field tiles side by side and a full-width button. */
@media (max-width: 760px) {
	.kw-hero-search {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
		max-width: 100%; padding: 6px; border-radius: 22px; margin-top: 24px;
	}
	.kw-hero-search-field {
		min-width: 0; height: 52px; padding: 0 12px; gap: 8px; border: 0 !important; border-radius: 16px;
		background: rgba(255, 255, 255, .09); transition: background-color .2s;
	}
	.kw-hero-search-field:focus-within { background: rgba(255, 255, 255, .16); }
	.kw-hero-search-field:first-child:nth-last-child(4) { grid-column: 1 / -1; } /* Country, when shown, gets its own row. */
	.kw-hero-search-field select { height: 52px; padding: 0 18px 0 0; font-size: 14px; text-overflow: ellipsis; }
	.kw-hero-search-field::after { right: 13px; width: 6px; height: 6px; }
	.kw-hero-search-submit { grid-column: 1 / -1; height: 52px; border-radius: 16px; font-size: 15px; }
}
.kw-chip {
	display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: var(--pill);
	background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none;
	transition: border-color .2s, color .2s;
}
.kw-chip .icon { width: 18px; height: 18px; color: var(--accent); }
.kw-chip:hover { border-color: var(--accent); color: var(--text-strong); }
.kw-chips + .section { padding-top: 72px; }
.section { padding: clamp(56px, 7vw, 88px) 0; }

/* Tour cards: a framed photo (inset, its own smaller radius) rather than edge-to-edge, and
   the activity as a small eyebrow label above the title rather than a badge over the photo —
   a deliberately different read from the usual floating-tag travel card. */
.tour-card { border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: none; padding: 10px 10px 0; transition: transform .25s ease, border-color .25s ease; }
.tour-card:hover { transform: translateY(-4px); border-color: var(--lime); box-shadow: none; }
/* Tall photos: the picture is the main part of a tour card. */
.tour-media { aspect-ratio: 4 / 5; border-radius: calc(var(--radius-lg) - 6px); }
.tour-body { padding: 18px 10px 20px; }
.tour-eyebrow { margin-bottom: 6px; }
.tour-body h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.tour-body h3 a { color: var(--text-strong); }
.tour-tags .tag { background: rgba(6, 8, 12, .75); border-color: rgba(255, 255, 255, .12); color: #EDEDED; font-weight: 700; }
.tour-foot { border-top: 1px solid var(--border); padding-top: 16px; }
.tour-foot .price-from strong { font-size: 24px; }
.next-dep { color: var(--text-muted); }

/* Destinations: the home country as a photo card, the others as compact cards */
.kw-dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 320px; gap: 20px; }
.kw-dest {
	position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border);
	color: var(--text-strong); text-decoration: none; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end;
	transition: transform .25s ease, border-color .25s ease;
}
.kw-dest:hover { transform: translateY(-4px); border-color: var(--lime); color: var(--text-strong); }
.kw-dest > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kw-dest.is-home { color: #fff; background: #1F1F1F; }
.kw-dest.is-home::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .1) 70%); }
.kw-dest-text { position: relative; z-index: 1; display: flex; flex-direction: column; }
.kw-dest-text .eyebrow { margin: 0 0 4px; color: var(--lime); }
.kw-dest-text strong { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.kw-dest.is-home strong { font-size: 44px; }
.kw-dest-text > span { color: var(--text-muted); font-size: 15px; }
.kw-dest.is-home .kw-dest-text > span { color: #CCCCCC; }
.kw-dest-arrow { position: absolute; top: 26px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; }
.kw-dest-arrow .icon { width: 16px; height: 16px; }

/* Why us */
.kw-why { border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); padding: clamp(28px, 5vw, 56px); display: flex; gap: 48px; flex-wrap: wrap; }
.kw-why-intro { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.kw-why-intro .eyebrow { margin: 0; }
.kw-why-intro .section-title { font-size: clamp(32px, 3.6vw, 44px); }
.kw-why-intro p { color: var(--text-muted); }
.kw-why-list { flex: 2 1 520px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.kw-why-list li { display: flex; flex-direction: column; gap: 12px; }
.kw-why-list h3 { font-family: var(--font); font-size: 19px; letter-spacing: 0; }
.kw-why-list p { color: var(--text-muted); font-size: 15px; }
.kw-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-soft); border: 1px solid rgba(194, 186, 169, .3); color: var(--accent); display: grid; place-items: center; }
.kw-ico .icon { width: 22px; height: 22px; }

/* About */
.kw-about { display: flex; gap: 48px; flex-wrap: wrap; align-items: center; }
.kw-about-photo { flex: 1 1 420px; min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--surface-2); border: 1px solid var(--border); }
.kw-about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kw-about-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; }
.kw-about-text .eyebrow { margin: 0; }
.kw-about-text p { color: var(--text-muted); font-size: 17px; }
.kw-about-text .hero-actions { margin-top: 8px; }
@media (max-width: 520px) { .kw-about-photo { min-height: 280px; } }

/* "Not sure where to start?" band */
.kw-start { border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); background: var(--card); border: 1px solid rgba(194, 186, 169, .28); display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.kw-start .section-title { font-size: clamp(30px, 3.2vw, 40px); }
.kw-start p { color: var(--text-muted); font-size: 17px; margin-top: 8px; max-width: 620px; }
.kw-start .hero-actions { margin: 0; }
.kw-start .btn { min-height: 56px; border-radius: 14px; }

/* Footer, page heads, cards elsewhere: same rounded, bordered surfaces */
.site-footer { background: var(--bg); }
.footer-grid h2 { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.book-card, .form-card, .info-card, .fact, .cta-card { border-radius: var(--radius-lg); }
.page-head h1 { font-size: clamp(34px, 4.4vw, 56px); }
.tour-section > h2 { font-size: 30px; }
.day-num { background: var(--brand-soft); color: var(--accent); }

/* ---------- Header v2: SVG logo, glass nav pill, transparent over the home hero ---------- */

:root { --logo-ink: #FFFFFF; --logo-muted: #A8A8A8; }
:root[data-theme="light"] { --logo-ink: #111111; --logo-muted: #555555; }
.mark .logo-svg { display: block; height: 40px; width: auto; }
.footer-about .mark .logo-svg { height: 44px; }
@media (max-width: 833px) { .mark .logo-svg { height: 34px; } }
@media (max-width: 420px) { .mark .logo-svg { height: 30px; } }

.gnav-pill {
	list-style: none; margin: 0; padding: 5px; display: flex; align-items: center; gap: 2px;
	border-radius: var(--pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--border-strong);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-theme="light"] .gnav-pill { background: rgba(0, 0, 0, .04); }
.gnav-pill .gnav-link { height: 38px; padding: 0 16px; border-radius: var(--pill); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s; }
.gnav-pill .gnav-link:hover { background: rgba(255, 255, 255, .1); }
:root[data-theme="light"] .gnav-pill .gnav-link:hover { background: rgba(0, 0, 0, .06); }
.gnav-pill .gnav-link[aria-current="page"], .gnav-pill .gnav-link.is-active { background: var(--text-strong); color: var(--bg); font-weight: 700; }
@media (max-width: 1100px) { .gnav-pill .gnav-link { padding: 0 11px; font-size: 13px; } }

/* Home: the bar sits on the photo, then turns solid once the page scrolls (main.js adds .is-scrolled). */
.home .gnav { transition: background-color .3s, border-color .3s; }
.home .kw-hero { margin-top: -77px; min-height: 100vh; min-height: 100svh; }
.home .kw-hero-inner { padding-top: calc(77px + clamp(48px, 7vw, 96px)); }
@media (max-width: 833px) { .home .kw-hero { margin-top: -65px; } .home .kw-hero-inner { padding-top: calc(65px + 40px); } }
.home .gnav:not(.is-scrolled):not(.is-open) {
	background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
	--logo-ink: #FFFFFF; --logo-muted: rgba(255, 255, 255, .8); --nav-text: #FFFFFF; --nav-text-strong: #FFFFFF;
}
.home .gnav:not(.is-scrolled):not(.is-open) .gnav-pill { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); }
.home .gnav:not(.is-scrolled):not(.is-open) .gnav-pill .gnav-link:hover { background: rgba(255, 255, 255, .16); }
.home .gnav:not(.is-scrolled):not(.is-open) .gnav-pill .gnav-link[aria-current="page"] { background: #FAF6F0; color: #22201E; }
.home .gnav:not(.is-scrolled):not(.is-open) .gnav-icon { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); }
.home .gnav:not(.is-scrolled):not(.is-open) .gnav-icon.gnav-saved { border: 0; }

/* ---------- Tours dropdown: a card under the nav pill (replaces the full-width flyout) ---------- */

.flyout.kw-drop {
	left: 50%; right: auto; top: calc(100% - 6px); width: min(900px, calc(100% - 2 * var(--gutter)));
	transform: translateX(-50%); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
	background: var(--card); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none;
	animation: kw-drop-in .22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes kw-drop-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } }
.kw-drop-inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.kw-drop-tours { padding: 22px; }
.kw-drop-side { padding: 22px 24px; background: var(--surface); border-left: 1px solid var(--border); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; display: flex; flex-direction: column; }
.kw-drop-heading { margin: 0 0 12px 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.kw-drop-side .kw-drop-heading { margin-left: 0; }
.kw-drop-side .kw-drop-heading + * { margin-bottom: 22px; }
.kw-drop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kw-drop a { text-decoration: none; }
.kw-drop-tour { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 16px; color: var(--text-strong); transition: background-color .15s; }
.kw-drop-tour:hover { background: var(--surface); color: var(--text-strong); }
.kw-drop-thumb { flex: none; width: 64px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.kw-drop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kw-drop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kw-drop-text strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.kw-drop-text small { font-size: 13px; color: var(--text-muted); }
.kw-drop-price { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.kw-drop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-drop-chips a { padding: 7px 13px; border-radius: var(--pill); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; font-weight: 600; }
.kw-drop-chips a:hover { border-color: var(--accent); color: var(--accent); }
.kw-drop-dests { gap: 0; }
.kw-drop-dests a { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; color: var(--text-strong); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--border); }
.kw-drop-dests li:last-child a { border-bottom: 0; }
.kw-drop-dests a:hover { color: var(--accent); }
.kw-drop-dests small { color: var(--text-soft); font-size: 12px; font-weight: 500; }
.kw-drop-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kw-drop-actions .btn { flex: 1; }
/* A dropdown doesn't need the page behind it blurred; the scrim still closes it on click. */
.gnav-scrim { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.kw-drop .btn-primary, .kw-drop .btn-primary:hover { color: var(--on-accent); }
.kw-drop .btn-ghost { color: var(--text-strong); }
.kw-drop .btn-ghost:hover { color: var(--accent); }

/* ==========================================================================
   Header v5: a wide floating pill — the same content width as the page below it,
   inset from the top edge, with every link shown directly (no "More" dropdown).
   ========================================================================== */

.gnav.kw-nav, .gnav.kw-nav.is-open, .home .gnav.kw-nav:not(.is-scrolled):not(.is-open) {
	background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
	height: 96px; padding-top: 5px; pointer-events: none;
}
.kw-bar, .kw-nav .flyout, .kw-more-menu { pointer-events: auto; }

.kw-bar {
	--pill-bg: rgba(28, 28, 28, .74); --pill-line: rgba(255, 255, 255, .14); --pill-text: #EDEDED; --pill-hover: rgba(255, 255, 255, .1);
	display: flex; align-items: center; gap: 4px;
	width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto; padding: 6px 10px;
	border-radius: var(--pill); background: var(--pill-bg); border: 1px solid var(--pill-line);
	-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18); transition: background-color .3s, border-color .3s;
}
:root[data-theme="light"] .kw-bar { --pill-bg: rgba(255, 255, 255, .86); --pill-line: rgba(0, 0, 0, .08); --pill-text: #1E1E1E; --pill-hover: rgba(0, 0, 0, .06); }
/* On the home photo, before scrolling: the light glass of the reference. */
.home .gnav:not(.is-scrolled) .kw-bar { --pill-bg: rgba(255, 255, 255, .12); --pill-line: rgba(255, 255, 255, .22); --pill-text: #FFFFFF; --pill-hover: rgba(255, 255, 255, .16); box-shadow: none; }
.kw-bar .kw-links { margin: 0 auto; }
.kw-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.kw-icon-btn {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
	border: 0; background: none; color: var(--pill-text); cursor: pointer; position: relative;
}
.kw-icon-btn:hover { background: var(--pill-hover); }
.kw-icon-btn .icon { width: 18px; height: 18px; }
.kw-icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .kw-icon-btn .icon-sun { display: block; }
:root[data-theme="dark"] .kw-icon-btn .icon-moon { display: none; }

.kw-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none; }
.kw-logo .badge { display: block; width: 44px; height: 44px; }
.kw-logo:hover .badge { transform: rotate(-8deg); transition: transform .3s; }

.kw-links { list-style: none; margin: 0 2px; padding: 0; display: flex; align-items: center; gap: 2px; }
.kw-link {
	display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--pill);
	background: transparent; color: var(--pill-text); font: 500 16px/1 var(--font); text-decoration: none; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.kw-link:hover { background: var(--pill-hover); color: var(--pill-text); }
.kw-link[aria-current="page"], .kw-link.is-active { background: #FAF6F0; color: #22201E; font-weight: 700; }
:root[data-theme="light"] .kw-link[aria-current="page"], :root[data-theme="light"] .kw-link.is-active { background: #22201E; color: #FAF6F0; }
.home .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .home .gnav:not(.is-scrolled) .kw-link.is-active { background: #FAF6F0; color: #22201E; }
.kw-link[aria-expanded="true"]:not(.is-active) { background: var(--pill-hover); }
.kw-chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s; }
.kw-link[aria-expanded="true"] .kw-chev { transform: rotate(180deg); }
.kw-link:focus-visible, .kw-plan:focus-visible, .kw-logo:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.kw-plan {
	display: inline-flex; align-items: center; height: 46px; padding: 0 24px; margin-left: 4px; border-radius: var(--pill);
	background-color: var(--lime); color: var(--on-accent); font: 700 15px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background-color .2s;
	background-image: url("../img/oymo-pattern.svg"); background-repeat: repeat; background-size: 90px 22px;
}
.kw-plan:hover { background-color: var(--accent-fill-hover); color: var(--on-accent); }

.kw-burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--pill-hover); color: var(--pill-text); cursor: pointer; place-items: center; }
.kw-burger .burger span { background: currentColor; }

/* More menu */
.kw-more { position: relative; }
.kw-more-menu {
	position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: 290px; z-index: 70;
	padding: 10px; border-radius: 24px; background: var(--card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
	animation: kw-drop-in .2s cubic-bezier(.4, 0, .2, 1);
}
.kw-more-menu[hidden] { display: none; }
.kw-more-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* hover bridge */
.kw-more-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kw-more-menu a, .kw-theme {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px;
	background: none; color: var(--text-strong); font: 600 14px/1.25 var(--font); text-decoration: none; text-align: left; cursor: pointer;
}
.kw-more-menu a:hover, .kw-theme:hover { background: var(--surface); color: var(--text-strong); }
.kw-more-menu a[aria-current="page"] { color: var(--accent); }
.kw-more-menu .icon, .kw-theme .icon { width: 18px; height: 18px; color: var(--accent); flex: none; }
.kw-more-menu small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.kw-more-heading { margin: 10px 12px 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.kw-theme { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; padding-top: 14px; }
.kw-theme > span { display: none; align-items: center; gap: 12px; }
:root[data-theme="dark"] .kw-theme .icon-sun, :root[data-theme="light"] .kw-theme .icon-moon { display: flex; }

/* Tours card sits under the pill */
.kw-nav .flyout.kw-drop { top: calc(100% + 6px); }

/* Phones: logo, Plan trip and the menu button stay in the pill */
@media (max-width: 833px) {
	.kw-links { display: none; }
	.kw-burger { display: grid; }
	.kw-bar { width: calc(100% - 2 * var(--gutter)); justify-content: space-between; }
	.kw-plan { margin-left: auto; height: 42px; padding: 0 18px; font-size: 14px; }
	.kw-logo, .kw-burger { width: 42px; height: 42px; }
	.kw-logo .badge { width: 40px; height: 40px; }
	.gnav.kw-nav { height: 66px; }
	.sheet-plan { display: flex; justify-content: center; margin-top: 28px; height: 52px; font-size: 16px; }
	.sheet-theme { margin-top: 12px; border-top: 0; justify-content: center; color: var(--text); }
}
.home .kw-hero { margin-top: -76px; }
.home .kw-hero-inner { padding-top: calc(76px + clamp(48px, 7vw, 96px)); }
@media (max-width: 833px) {
	.gnav-sheet { top: 66px; }
	.home .kw-hero { margin-top: -66px; }
	.home .kw-hero-inner { padding-top: calc(66px + 40px); }
}
/* Smaller Plan trip button: it sits inside the pill rather than matching the pill's height. */
.kw-plan { height: 38px; padding: 0 18px; margin: 0 4px 0 6px; font-size: 14px; font-weight: 600; }
@media (max-width: 833px) { .kw-plan { height: 36px; padding: 0 16px; font-size: 13px; } .sheet-plan { height: 48px; font-size: 15px; } }
@media (max-width: 833px) { .kw-plan { margin: 0 4px 0 auto; } }

/* ---------- Header v3, compact: smaller pill, saved-tours count ---------- */
.gnav.kw-nav, .gnav.kw-nav.is-open, .home .gnav.kw-nav:not(.is-scrolled):not(.is-open) { height: 60px; }
.kw-bar { padding: 3px; gap: 2px; }
.kw-logo { width: 36px; height: 36px; }
.kw-logo .badge { width: 34px; height: 34px; }
.kw-links { margin: 0 2px; }
.kw-link { height: 34px; padding: 0 14px; font-size: 14px; gap: 5px; }
.kw-chev { width: 12px; height: 12px; }
.kw-plan { height: 32px; padding: 0 14px; margin: 0 2px 0 4px; font-size: 13px; }
.kw-burger { width: 34px; height: 34px; position: relative; }
.kw-more-menu { top: calc(100% + 12px); width: 240px; padding: 8px; }
.kw-more-menu a, .kw-theme { padding: 9px 10px; font-size: 14px; }
.kw-nav .flyout.kw-drop { top: calc(100% + 4px); }
.home .kw-hero { margin-top: -60px; }
.home .kw-hero-inner { padding-top: calc(60px + clamp(48px, 7vw, 96px)); }

.kw-count {
	display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
	border-radius: var(--pill); background: var(--lime); color: var(--on-accent); font: 700 11px/1 var(--font);
}
.kw-count[hidden] { display: none; }
.kw-more-menu .kw-count { margin-left: auto; }
.kw-count-dot { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.sheet-links .kw-count { vertical-align: middle; font-size: 12px; height: 22px; min-width: 22px; }

@media (max-width: 833px) {
	.gnav.kw-nav { height: 56px; }
	.kw-logo, .kw-burger { width: 34px; height: 34px; }
	.kw-logo .badge { width: 32px; height: 32px; }
	.kw-plan { height: 30px; padding: 0 13px; font-size: 13px; margin: 0 4px 0 auto; }
	.gnav-sheet { top: 56px; }
	.home .kw-hero { margin-top: -56px; }
	.home .kw-hero-inner { padding-top: calc(56px + 40px); }
}
/* Logo badge as tall as the Plan trip button. */
.kw-logo { width: 32px; height: 32px; margin-left: 4px; }
.kw-logo .badge { width: 32px; height: 32px; }
@media (max-width: 833px) { .kw-logo, .kw-logo .badge { width: 30px; height: 30px; } }

/* ---------- Mobile menu: a floating card under the pill (tours, page tiles, chips, Plan trip) ---------- */
.gnav-sheet.kw-sheet {
	top: 60px; left: 12px; right: 12px; bottom: auto; max-height: calc(100vh - 76px); max-height: calc(100svh - 76px);
	padding: 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--border-strong);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45); -webkit-backdrop-filter: none; backdrop-filter: none;
	overflow-y: auto; overscroll-behavior: contain; animation: kw-sheet-in .22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes kw-sheet-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
body.menu-open::before { content: ""; position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: scrim-in .2s ease; }
.kw-sheet li { animation: none; }
.kw-sheet a { text-decoration: none; }
.kw-sheet-heading { margin: 0 0 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }

.kw-sheet-tours { list-style: none; margin: 0 -16px 18px; padding: 0 16px 4px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kw-sheet-tours::-webkit-scrollbar { display: none; }
.kw-sheet-tours li { flex: 0 0 148px; scroll-snap-align: start; }
.kw-sheet-tours a { display: flex; flex-direction: column; gap: 6px; color: var(--text-strong); }
.kw-sheet-photo { display: block; height: 96px; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.kw-sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.kw-sheet-tours strong { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-sheet-tours small { font-size: 12px; color: var(--text-muted); }

.kw-sheet-tiles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kw-sheet-tiles a {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
	min-height: 72px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
	color: var(--text-strong); font-size: 13px; font-weight: 600;
}
.kw-sheet-tiles .icon { width: 20px; height: 20px; color: var(--accent); }
.kw-sheet-tiles a[aria-current="page"] { background: var(--text-strong); color: var(--bg); border-color: transparent; }
.kw-sheet-tiles a[aria-current="page"] .icon { color: var(--bg); }
.kw-sheet-tiles .kw-count { position: absolute; top: 10px; right: 10px; margin: 0; }
.kw-sheet-chips { margin-bottom: 18px; }

.kw-sheet-foot { display: flex; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
.kw-sheet-plan { flex: 1; justify-content: center; height: 46px; margin: 0; font-size: 15px; }
.kw-sheet-theme { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; }
.kw-sheet-theme .icon { width: 20px; height: 20px; }
@media (min-width: 834px) { .gnav-sheet.kw-sheet { display: none !important; } }
.gnav-sheet.kw-sheet .kw-sheet-tours { margin: 0 0 18px; padding: 0 0 4px; scroll-padding-left: 0; }
/* Bigger logo: fills the pill's full height, edge to edge, without making the pill taller. */
.kw-logo { width: 40px; height: 40px; margin: -2px 2px -2px -2px; }
.kw-logo .badge { width: 40px; height: 40px; }
@media (max-width: 833px) { .kw-logo, .kw-logo .badge { width: 38px; height: 38px; } }
/* Bigger logo still (48px); the pill and header grow to fit it. */
.kw-logo { width: 48px; height: 48px; margin: -3px 2px -3px -2px; }
.kw-logo .badge { width: 48px; height: 48px; }
.gnav.kw-nav, .gnav.kw-nav.is-open, .home .gnav.kw-nav:not(.is-scrolled):not(.is-open) { height: 66px; }
.home .kw-hero { margin-top: -66px; }
.home .kw-hero-inner { padding-top: calc(66px + clamp(48px, 7vw, 96px)); }
.kw-sheet.gnav-sheet { top: 66px; }
@media (max-width: 833px) {
	.kw-logo, .kw-logo .badge { width: 44px; height: 44px; }
	.gnav.kw-nav { height: 62px; }
	.gnav-sheet.kw-sheet { top: 64px; }
	.home .kw-hero { margin-top: -62px; }
	.home .kw-hero-inner { padding-top: calc(62px + 40px); }
}

/* Hero: two buttons instead of the search panel */
.kw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.kw-hero-btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
.kw-hero-btn-glass { color: #FFFFFF; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kw-hero-btn-glass:hover { color: #FFFFFF; background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .55); }
@media (max-width: 420px) { .kw-hero-actions .btn { flex: 1 1 100%; } }
/* Yurt-camp hero photo: on narrow screens keep the yurts (left-centre of the photo) in frame. */
@media (max-width: 833px) { .kw-hero-media img { object-position: 38% center; } }

/* ==========================================================================
   Page heroes: every inner page opens on a photo like the home page (shorter),
   with breadcrumbs, a big white title and the lead text over a dark wash.
   ========================================================================== */
.page-head.kw-page-hero {
	position: relative; isolation: isolate; overflow: hidden; background: #22201E; border-bottom: 0;
	min-height: clamp(380px, 56vh, 560px); display: flex; align-items: flex-end;
	margin-top: -66px; padding: 66px 0 0;
}
.page-head.kw-page-hero::before { display: none; }
.kw-page-hero-media { position: absolute; inset: 0; z-index: -1; }
.kw-page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.kw-page-hero-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(18, 18, 18, .94) 0%, rgba(18, 18, 18, .55) 45%, rgba(18, 18, 18, .2) 100%), linear-gradient(90deg, rgba(10, 10, 10, .45) 0%, transparent 60%);
}
.kw-page-hero .container { display: block; width: 100%; padding-top: 40px; padding-bottom: clamp(36px, 5vw, 64px); }
.kw-page-hero .breadcrumbs { margin: 0 0 18px; }
.kw-page-hero .breadcrumbs ol { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kw-page-hero .breadcrumbs, .kw-page-hero .breadcrumbs a, .kw-page-hero .breadcrumbs li { color: rgba(255, 255, 255, .85); }
.kw-page-hero .breadcrumbs a:hover { color: #FFFFFF; }
.kw-page-hero h1 { max-width: 900px; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; color: #FFFFFF; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.kw-page-hero .page-lead { max-width: 640px; margin-top: 16px; font-size: clamp(16px, 1.5vw, 18px); color: #E8E8E8; }
.kw-page-hero .page-lead p { color: #E8E8E8; }
.kw-page-hero .page-head-media { display: none; }
.kw-page-hero .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); }
.kw-page-hero .btn-ghost:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.kw-page-hero + .section, .kw-page-hero + * { margin-top: 0; }
.tour-gallery.is-empty { padding: 0; }
.has-photo-hero .article-cover { display: none; }
.has-photo-hero .gnav-sheet.kw-sheet { top: 66px; }

/* Header pill over the page hero photo, as on the home page */
.has-photo-hero .gnav.kw-nav:not(.is-scrolled):not(.is-open) { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-photo-hero .gnav:not(.is-scrolled) .kw-bar { --pill-bg: rgba(255, 255, 255, .16); --pill-line: rgba(255, 255, 255, .3); --pill-text: #FFFFFF; --pill-hover: rgba(255, 255, 255, .16); box-shadow: none; }
.has-photo-hero .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .has-photo-hero .gnav:not(.is-scrolled) .kw-link.is-active { background: #FAF6F0; color: #22201E; }

@media (max-width: 833px) {
	.page-head.kw-page-hero { margin-top: -62px; padding-top: 62px; min-height: 360px; }
	.has-photo-hero .gnav-sheet.kw-sheet { top: 64px; }
}
/* Home: four tours in one row on desktop */
.kw-home-tours.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kw-home-tours .tour-body { padding: 16px 10px 20px; }
.kw-home-tours .tour-body h3 { font-size: 19px; }
@media (max-width: 1100px) { .kw-home-tours.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kw-home-tours.grid-4:not(.slide-mobile) { grid-template-columns: 1fr; } }
/* Phones: the homepage tour row is a swipe row; its fixed columns must not squeeze the first card. */
@media (max-width: 760px) { .kw-home-tours.grid-4.slide-mobile { grid-template-columns: none; } }

/* Home destinations: tall photo cards, small corners, staggered like a postcard rack */
.kw-places { list-style: none; margin: 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.kw-places li:nth-child(even) { transform: translateY(-24px); }
.kw-place {
	position: relative; display: flex; align-items: flex-end; aspect-ratio: 1 / 1.75; overflow: hidden;
	border-radius: 10px; background: var(--surface-2); color: #FFFFFF; text-decoration: none;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.kw-place > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kw-place::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .15) 38%, transparent 60%); }
.kw-place:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0, 0, 0, .38); color: #FFFFFF; }
.kw-place:hover > img { transform: scale(1.05); }
.kw-place-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.kw-place-text strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; }
.kw-place-text small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.kw-place-text small .icon { width: 14px; height: 14px; color: var(--lime); }
@media (max-width: 900px) {
	.kw-places { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
	.kw-places::-webkit-scrollbar { display: none; }
	.kw-places li { flex: 0 0 62%; scroll-snap-align: start; }
	.kw-places li:nth-child(even) { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .kw-place, .kw-place > img { transition: none; } }
/* Countries row: all cards level, same height. Countries without a photo get a mountain placeholder. */
.kw-places li:nth-child(even) { transform: none; }
.kw-places { padding-top: 0; }
.kw-place.no-photo { background: linear-gradient(160deg, #352F27 0%, #1C1A17 100%); }
.kw-place.no-photo::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; opacity: .5;
	background: url("../img/pattern-mountains.svg") center bottom / 140% auto no-repeat;
}
.kw-place.no-photo::before {
	background: var(--lime); opacity: .35;
	-webkit-mask: url("../img/pattern-mountains.svg") center 70% / 160% auto no-repeat; mask: url("../img/pattern-mountains.svg") center 70% / 160% auto no-repeat;
}
/* Hero peak photo (portrait): keep the summit and ridges in the band a wide screen shows. */
.kw-hero-media img { object-position: center 42%; }
@media (max-width: 833px) { .kw-hero-media img { object-position: center 40%; } }

/* ==========================================================================
   Tour page v2: tall photo hero with fact chips and Book buttons, floating section pill,
   day-by-day timeline, included / not included cards, clean booking card, floating Book pill.
   ========================================================================== */

.page-head.kw-tour-hero { min-height: clamp(560px, 82vh, 780px); }
.kw-tour-hero h1 { max-width: 980px; }
.kw-tour-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kw-tour-facts li {
	display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(194, 186, 169, .4); color: #FFFFFF;
	font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.kw-tour-facts .icon { width: 16px; height: 16px; color: var(--lime); }
.kw-tour-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Section pill: floats under the header pill and highlights the section in view */
.local-nav.kw-tour-nav { top: 70px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; margin-top: 20px; }
.kw-tour-nav .local-nav-inner { justify-content: center; min-height: 0; }
.kw-tour-nav ul {
	pointer-events: auto; gap: 2px; padding: 4px; border-radius: var(--pill); max-width: 100%;
	background: rgba(28, 28, 28, .72); border: 1px solid var(--border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
:root[data-theme="light"] .kw-tour-nav ul { background: rgba(255, 255, 255, .82); }
.kw-tour-nav a { height: 34px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--pill); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.kw-tour-nav a[aria-current="true"] { background: var(--lime); color: var(--on-accent); }
.is-tour .tour-section { scroll-margin-top: 128px; }

/* Layout and sections */
.is-tour .tour-layout { margin-top: 40px; gap: 56px; grid-template-columns: minmax(0, 1fr) 360px; }
.is-tour .tour-section { padding: 48px 0; border-top: 1px solid var(--border); }
.is-tour .tour-section:first-child { border-top: 0; padding-top: 8px; }
.is-tour .tour-section > .eyebrow { margin-bottom: 8px; }
.is-tour .tour-section > h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 24px; }
.is-tour .tour-section.entry-content > p { font-size: 17px; line-height: 1.7; color: var(--text); }
.is-tour .entry-content h3 { font-size: 20px; margin: 28px 0 10px; }

/* Day-by-day timeline */
.kw-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.kw-timeline::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(var(--lime), rgba(194, 186, 169, .1)); }
.kw-timeline > li { position: relative; padding-bottom: 12px; }
.kw-day summary { list-style: none; display: flex; align-items: center; gap: 18px; cursor: pointer; padding: 6px 0; }
.kw-day summary::-webkit-details-marker { display: none; }
.kw-day-num {
	position: relative; z-index: 1; flex: none; display: grid; place-items: center; align-content: center; width: 56px; height: 56px; border-radius: 16px;
	background: var(--card); border: 2px solid var(--lime); color: var(--text-strong); font: 800 19px/1 var(--font-display);
}
.kw-day-num small { display: block; font: 700 9px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.kw-day[open] .kw-day-num { background: var(--lime); color: var(--on-accent); }
.kw-day[open] .kw-day-num small { color: #7A6E5C; }
.kw-day summary strong { flex: 1; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.kw-day-chev { width: 18px; height: 18px; color: var(--text-muted); transition: transform .2s; flex: none; }
.kw-day[open] .kw-day-chev { transform: rotate(180deg); }
.kw-day-body { margin: 4px 0 16px 74px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.kw-day-body p + p { margin-top: 10px; }
.kw-day summary:hover strong { color: var(--accent); }

/* Included / not included */
.kw-incexc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kw-incexc > div { padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.kw-inc { border-color: rgba(194, 186, 169, .35) !important; }
.kw-incexc h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.kw-incexc .checklist li { font-size: 15px; }
.kw-inc .icon { color: var(--lime); }
.kw-exc .icon { color: var(--text-soft); }
@media (max-width: 640px) { .kw-incexc { grid-template-columns: 1fr; } }

/* What to bring: chips */
.kw-bring { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-bring li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--border); font-size: 14px; }
.kw-bring .icon { margin: 0; color: var(--lime); }

/* FAQ */
.is-tour .faq-item { border-radius: 16px; background: var(--card); border: 1px solid var(--border); padding: 0 20px; margin-bottom: 10px; }

/* Booking card */
.kw-book { top: 132px; padding: 24px; border-radius: 24px; border-color: var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.kw-book-price { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.kw-book-price small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.kw-book-price small + strong + small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); font-size: 13px; }
.kw-book-price strong { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.kw-book .book-rows .icon { color: var(--lime); }
.kw-book .btn { min-height: 50px; }

/* Phones: Book bar floats as a pill */
@media (max-width: 1024px) {
	.kw-book-bar.book-bar {
		left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 20px;
		border-radius: var(--pill); border: 1px solid var(--border-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
	}
	.kw-book-bar.is-hidden { transform: translateY(160%); }
	.kw-book-bar strong { font-size: 17px; }
	.kw-book-bar .btn { min-height: 44px; border-radius: var(--pill); }
	.is-tour .tour-layout { grid-template-columns: 1fr; }
	.is-tour .fab { bottom: 84px; }
}
@media (max-width: 833px) {
	.local-nav.kw-tour-nav { top: 66px; margin-top: 14px; }
	.kw-tour-nav .local-nav-inner { justify-content: flex-start; }
	.kw-tour-facts li { height: 34px; font-size: 13px; padding: 0 12px; }
	.kw-day-body { margin-left: 0; }
	.kw-timeline::before { left: 23px; }
	.kw-day-num { width: 48px; height: 48px; font-size: 17px; }
}
/* Let the booking column run the full height of the text so the card stays in view while scrolling. */
.is-tour .tour-layout > aside { align-self: stretch; }

/* ---------- Tour page head: breadcrumbs, title, location, fact chips, mosaic gallery ---------- */
.kw-tour-head { padding: 28px 0 8px; }
.kw-tour-head .breadcrumbs { margin: 0 0 22px; }
.kw-tour-head .breadcrumbs ol { background: var(--card); border: 1px solid var(--border); }
.kw-tour-head h1 { max-width: 980px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; }
.kw-tour-loc { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text-muted); font-size: 15px; }
.kw-tour-loc .icon { width: 17px; height: 17px; color: var(--lime); }
.kw-tour-head .kw-tour-facts { margin-top: 18px; }
.kw-tour-head .kw-tour-facts li { background: var(--card); border-color: var(--border); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kw-tour-head .tour-gallery { padding-bottom: 0; }
.kw-tour-head .gallery-wrap { margin-top: 26px; }

/* Mosaic: big photo left, four on the right, each with its own rounded corners */
.kw-tour-head .gallery { --row: clamp(200px, 21vw, 290px); gap: 16px; border-radius: 0; overflow: visible; }
.kw-tour-head .gallery figure { border-radius: 16px; }
.kw-tour-head .gallery[data-count="3"] figure:first-child { grid-row: span 2; }
.kw-tour-head .gallery-all { right: 14px; bottom: 14px; background: rgba(18, 18, 18, .72); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .2); }
.kw-tour-head .gallery-all:hover { background: rgba(18, 18, 18, .88); }
.is-tour .local-nav.kw-tour-nav { margin-top: 28px; }
@media (max-width: 760px) {
	.kw-tour-head { padding-top: 18px; }
	.kw-tour-head .gallery figure { border-radius: 14px; }
}
.kw-tour-head .breadcrumbs { display: flex; }
.kw-tour-head .breadcrumbs ol { display: inline-flex; width: auto; max-width: 100%; padding: 6px 14px; border-radius: var(--pill); }

/* Header links: no pill behind the active page; it is shown in white, the others in grey. */
.kw-bar { --pill-text: #8C8C8C; }
.kw-link { color: var(--pill-text); font-weight: 500; }
.kw-link:hover { background: transparent; color: #FFFFFF; }
.kw-link[aria-current="page"], .kw-link.is-active,
.home .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .home .gnav:not(.is-scrolled) .kw-link.is-active,
.has-photo-hero .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .has-photo-hero .gnav:not(.is-scrolled) .kw-link.is-active {
	background: transparent; color: #FFFFFF; font-weight: 700;
}
.kw-link[aria-expanded="true"]:not(.is-active) { background: transparent; color: #FFFFFF; }
/* Over a photo the grey is lighter so it stays readable */
.home .gnav:not(.is-scrolled) .kw-bar, .has-photo-hero .gnav:not(.is-scrolled) .kw-bar { --pill-text: rgba(255, 255, 255, .7); }
/* Light theme: active is near-black, the others grey */
:root[data-theme="light"] .kw-bar { --pill-text: #6B6B6B; }
:root[data-theme="light"] .kw-link:hover, :root[data-theme="light"] .kw-link[aria-expanded="true"] { color: #111111; }
:root[data-theme="light"] .kw-link[aria-current="page"], :root[data-theme="light"] .kw-link.is-active { background: transparent; color: #111111; }
/* Active header link: same weight as the others, only the colour changes. */
.kw-link[aria-current="page"], .kw-link.is-active,
.home .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .home .gnav:not(.is-scrolled) .kw-link.is-active,
.has-photo-hero .gnav:not(.is-scrolled) .kw-link[aria-current="page"], .has-photo-hero .gnav:not(.is-scrolled) .kw-link.is-active { font-weight: 500; }

/* ==========================================================================
   About page: title + photo mosaic, story, facts, values, booking steps, contact band.
   ========================================================================== */
.kw-about-title { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.kw-about-title h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
.kw-about-title h1 span { color: var(--accent); }
.kw-about-title .page-lead { margin: 0; color: var(--text-muted); font-size: 17px; line-height: 1.65; }
.kw-about-mosaic { margin-top: 36px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, clamp(170px, 17vw, 240px)); gap: 16px; }
.kw-about-mosaic figure { margin: 0; overflow: hidden; border-radius: 16px; background: var(--surface-2); }
.kw-about-mosaic figure.is-big { grid-row: span 2; }
.kw-about-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kw-about-mosaic figure:hover img { transform: scale(1.03); }

.kw-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
.kw-story-head .section-title { font-size: clamp(32px, 3.6vw, 46px); }
.kw-story-text p, .kw-story-text .entry-content p { font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.kw-story-text p + p { margin-top: 16px; }

.kw-about-facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kw-about-facts li { padding: 28px 24px; display: flex; flex-direction: column; gap: 4px; }
.kw-about-facts li + li { border-left: 1px solid var(--border); }
.kw-about-facts strong { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); }
.kw-about-facts span { font-size: 14px; color: var(--text-muted); }

.kw-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kw-values li { padding: 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.kw-values h3 { font-family: var(--font); font-size: 19px; letter-spacing: 0; }
.kw-values p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

.kw-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--card); border: 1px solid var(--border); }
.kw-how-intro .section-title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; }
.kw-how-intro p { color: var(--text-muted); }
.kw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kw-steps li { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.kw-steps li > span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--on-accent); font: 800 15px/1 var(--font-display); }
.kw-steps h3 { font-family: var(--font); font-size: 16px; letter-spacing: 0; margin-bottom: 4px; }
.kw-steps p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

.kw-about-page .team-founder, .kw-about-page .team-card { border-radius: 20px; }

@media (max-width: 900px) {
	.kw-about-title, .kw-story, .kw-how { grid-template-columns: 1fr; gap: 20px; }
	.kw-about-facts { grid-template-columns: 1fr 1fr; }
	.kw-about-facts li:nth-child(3) { border-left: 0; }
	.kw-about-facts li:nth-child(n + 3) { border-top: 1px solid var(--border); }
	.kw-values { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.kw-about-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px; gap: 10px; }
	.kw-about-mosaic figure.is-big { grid-row: auto; grid-column: span 2; }
	.kw-steps { grid-template-columns: 1fr; }
	.kw-about-facts li { padding: 20px 14px; }
}

/* Mosaic fix: columns may not grow to the photos' natural width (that pushed the page wider). */
.kw-tour-head .gallery { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); max-width: 100%; }
.kw-tour-head .gallery[data-count="2"], .kw-tour-head .gallery[data-count="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.kw-tour-head .gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.kw-tour-head .gallery figure, .kw-tour-head .gallery img { min-width: 0; }
@media (max-width: 760px) {
	/* Phones: the photos scroll sideways inside the gallery only, never the page */
	.kw-tour-head .gallery-wrap { margin-inline: calc(-1 * var(--gutter)); max-width: 100vw; }
	.kw-tour-head .gallery, .kw-tour-head .gallery[data-count] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
}
/* Safety net: nothing may make a page scroll sideways */
html, body { overflow-x: clip; }
/* Breadcrumb pill: always one line; a long last item is cut with an ellipsis. */
.kw-tour-head .breadcrumbs ol { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.kw-tour-head .breadcrumbs li { flex: none; }
.kw-tour-head .breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Phones: no section pill on tour pages; people scroll, and the floating Book pill stays. */
@media (max-width: 833px) {
	.local-nav.kw-tour-nav { display: none; }
	.is-tour .tour-section { scroll-margin-top: 80px; }
	.is-tour .tour-layout { margin-top: 24px; }
}

/* Homepage FAQ */
.kw-home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.kw-home-faq-intro { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.kw-home-faq-intro .eyebrow { margin: 0; }
.kw-home-faq-intro .section-title { font-size: clamp(30px, 3.4vw, 44px); }
.kw-home-faq-intro p { color: var(--text-muted); }
.kw-home-faq-list .faq-item { border-radius: 16px; background: var(--card); border: 1px solid var(--border); padding: 0 20px; margin-bottom: 10px; }
.kw-home-faq-list .faq-answer p { color: var(--text-muted); line-height: 1.65; }
.kw-home-faq-list .faq-answer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) { .kw-home-faq { grid-template-columns: 1fr; gap: 24px; } .kw-home-faq-intro { position: static; } }

/* ==========================================================================
   Header height in one place: the header and everything tucked under it
   (home hero, page heroes, phone menu) use the same value, so no gap can open.
   ========================================================================== */
:root { --kw-hh: 65px; }
@media (max-width: 833px) { :root { --kw-hh: 59px; } }
.gnav.kw-nav, .gnav.kw-nav.is-open, .home .gnav.kw-nav:not(.is-scrolled):not(.is-open),
.has-photo-hero .gnav.kw-nav:not(.is-scrolled):not(.is-open) { height: var(--kw-hh); }
.home .kw-hero { margin-top: calc(-1 * var(--kw-hh)); }
.home .kw-hero-inner { padding-top: calc(var(--kw-hh) + clamp(40px, 7vw, 96px)); }
.page-head.kw-page-hero { margin-top: calc(-1 * var(--kw-hh)); padding-top: var(--kw-hh); }
.gnav-sheet.kw-sheet, .has-photo-hero .gnav-sheet.kw-sheet { top: calc(var(--kw-hh) - 2px); }
/* Hide on scroll down, show on scroll up (main.js toggles .is-tucked). */
.gnav.kw-nav { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.gnav.kw-nav.is-tucked { transform: translateY(calc(-100% - 12px)); }
@media (prefers-reduced-motion: reduce) { .gnav.kw-nav { transition: none; } }
/* Country cards: the sideways-scrolling row on phones clips drop shadows into a grey band, so phones get none. */
:root[data-theme="light"] .kw-place { box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
:root[data-theme="light"] .kw-place:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, .16); }
@media (max-width: 900px) {
	.kw-place, .kw-place:hover, :root[data-theme="light"] .kw-place { box-shadow: none; }
	.kw-places { padding-bottom: 0; }
}
/* Phones: smaller country cards, about two and a half visible */
@media (max-width: 900px) {
	.kw-places { gap: 10px; }
	.kw-places li { flex: 0 0 40%; }
	.kw-place { aspect-ratio: 1 / 1.5; border-radius: 10px; }
	.kw-place-text { padding: 14px; gap: 4px; }
	.kw-place-text strong { font-size: 19px; }
	.kw-place-text small { font-size: 10px; letter-spacing: .08em; }
	.kw-place-text small .icon { width: 12px; height: 12px; }
}
@media (max-width: 900px) { .kw-places { scroll-padding-inline: var(--gutter); } }
/* Phones: country cards a step bigger (between the first and the smallest size) */
@media (max-width: 900px) {
	.kw-places li { flex: 0 0 48%; }
	.kw-place { aspect-ratio: 1 / 1.6; }
	.kw-place-text { padding: 16px; }
	.kw-place-text strong { font-size: 21px; }
	.kw-place-text small { font-size: 10.5px; }
}

/* Group departures page: month headings between departure lists. */
.kw-dep-month { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; margin: 36px 0 14px; }
.kw-dep-month:first-child { margin-top: 0; }
.tour-section .departure-list { margin-top: 18px; }
.dep-action { display: grid; justify-items: center; gap: 6px; }
.dep-ask { font-size: 12px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.dep-ask:hover { color: var(--text); }
.kw-verify-notice { margin: 0 0 20px; }

/* ==========================================================================
   Group departure as a ticket: calendar tile · tour and seats · perforated price stub.
   ========================================================================== */
.kw-dep {
	position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 210px; align-items: stretch;
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kw-dep:hover { border-color: var(--lime); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); }
.kw-dep.is-full { opacity: .72; }
.kw-dep.is-full:hover { transform: none; box-shadow: none; }

.kw-dep-cal {
	display: grid; place-content: center; justify-items: center; gap: 2px; margin: 10px 0 10px 10px;
	border-radius: calc(var(--radius) - 8px); background: var(--accent-fill); color: var(--on-accent);
	text-transform: uppercase; line-height: 1;
}
.kw-dep-mon { font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.kw-dep-day { font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.kw-dep-wd { font-size: 11px; font-weight: 600; letter-spacing: .1em; opacity: .7; }

.kw-dep-main { display: grid; align-content: center; gap: 8px; padding: 18px 22px; min-width: 0; }
.kw-dep-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kw-dep-range { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: .01em; }
.kw-dep-tour { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text-strong, var(--text)); text-decoration: none; }
a.kw-dep-tour:hover { color: var(--accent); }
.kw-dep-seats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kw-dep-dots { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.kw-dep-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--lime); }
.kw-dep-dots i.is-taken { background: var(--lime); }
.kw-dep-left { font-size: 13px; color: var(--text-muted); }
.kw-dep-left strong { color: var(--text); font-weight: 700; }

/* The stub: dashed perforation with two punched notches. */
.kw-dep-stub {
	position: relative; display: grid; align-content: center; justify-items: center; gap: 8px;
	padding: 16px 18px; border-left: 2px dashed var(--border-strong, var(--border)); text-align: center;
}
.kw-dep-stub::before, .kw-dep-stub::after {
	content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--bg); border: 1px solid var(--border);
}
.kw-dep-stub::before { top: -12px; clip-path: inset(50% 0 0 0); }
.kw-dep-stub::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.kw-dep-price { display: grid; line-height: 1.15; }
.kw-dep-price small { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.kw-dep-price strong { font-size: 24px; font-weight: 700; color: var(--text); }
.kw-dep-stub .btn { width: 100%; }

/* Narrow column (tour page sidebar layout, tablets). */
@container (max-width: 640px) {
	.kw-dep { grid-template-columns: 78px minmax(0, 1fr); }
	.kw-dep-day { font-size: 30px; }
	.kw-dep-main { padding: 14px 16px; }
	.kw-dep-stub {
		grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: stretch; text-align: left; align-items: center;
		border-left: 0; border-top: 2px dashed var(--border-strong, var(--border)); padding: 14px 16px;
	}
	.kw-dep-stub::before { top: -12px; left: -12px; clip-path: inset(0 0 0 50%); }
	.kw-dep-stub::after { top: -12px; bottom: auto; left: auto; right: -12px; clip-path: inset(0 50% 0 0); }
	.kw-dep-stub .btn { width: auto; justify-self: end; }
	.kw-dep-stub .dep-ask { grid-column: 1 / -1; justify-self: end; }
}

/* ==========================================================================
   Mobile menu v2: a clean list of big links instead of photo strip + tiles.
   Saved and the theme switch live in the menu on phones, so the bar keeps
   only logo, Plan trip and the menu button.
   ========================================================================== */
@media (max-width: 833px) {
	.kw-bar .kw-actions { display: none; }
	.kw-bar .kw-plan { margin-left: auto; }
}
.gnav-sheet.kw-sheet { padding: 8px 18px 18px; }
.kw-sheet-nav { list-style: none; margin: 0 0 18px; padding: 0; }
.kw-sheet-nav li + li { border-top: 1px solid var(--border); }
.kw-sheet-nav a {
	display: flex; align-items: center; gap: 10px; padding: 15px 2px;
	color: var(--text-strong); font-size: 21px; font-weight: 600; letter-spacing: -.01em;
}
.kw-sheet-nav a span { flex: 1; }
.kw-sheet-nav small { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.kw-sheet-nav .icon { width: 18px; height: 18px; color: var(--text-muted); transition: transform .2s, color .2s; }
.kw-sheet-nav a:hover .icon, .kw-sheet-nav a:focus-visible .icon { transform: translateX(3px); color: var(--accent); }
.kw-sheet-nav a[aria-current="page"] span { color: var(--accent); }
.kw-sheet-nav a[aria-current="page"] span::before {
	content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 3px 0; border-radius: 50%; background: var(--lime);
}
.kw-sheet-foot { gap: 8px; }
.kw-sheet-round {
	position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer;
}
.kw-sheet-round .icon { width: 20px; height: 20px; }
.kw-sheet-round .kw-count { position: absolute; top: -2px; right: -2px; margin: 0; }
.kw-sheet-wa {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
	font-size: 14px; font-weight: 500; color: var(--text-muted);
}
.kw-sheet-wa .icon { width: 18px; height: 18px; color: var(--accent); }

/* Tour card: next group date as a small tinted pill (only when an admin published one). */
.next-dep.is-group {
	position: relative; z-index: 2; align-self: flex-start; width: fit-content; margin-top: 12px; padding: 6px 12px 6px 10px;
	border-radius: var(--pill); background: color-mix(in srgb, var(--lime) 16%, transparent);
	color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background-color .2s;
}
.next-dep.is-group:hover { background: color-mix(in srgb, var(--lime) 28%, transparent); }
.next-dep.is-group .icon { width: 14px; height: 14px; color: var(--accent); }

/* Tour card: travel style as a glass badge on the photo (top-left, opposite the save heart). */
.tour-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center;
	height: 30px; padding: 0 12px; border-radius: var(--pill);
	background: rgba(20, 18, 16, .48); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}