/* ==========================================================================
   Kidunguu Expeditions — Editorial Earth Design System
   by-kin.com layout language (numbered index, gallery-first, restrained
   chrome) rendered in a warm earth-tone material palette.
   ========================================================================== */

:root {
	/* ---- Material palette: warm earth-tone, editorial restraint ---- */
	--kdg-cream:      #F5F0E6;   /* page background — warm stone/cream, not white */
	--kdg-cream-dim:  #EDE5D5;   /* secondary surface (alt section bg) */
	--kdg-ink:        #211A13;   /* near-black warm brown — primary text */
	--kdg-ink-soft:   rgba(33,26,19,0.68);
	--kdg-ink-faint:  rgba(33,26,19,0.42);

	--kdg-terracotta: #B5592E;   /* primary accent — CTAs, active states */
	--kdg-terracotta-hover: #9C4A24;
	--kdg-clay:       #C79A6B;   /* secondary accent — hairlines on dark, badges */
	--kdg-gold:       #A9793B;

	--kdg-line:       rgba(33,26,19,0.14);   /* hairline rules on cream */
	--kdg-line-light: rgba(255,255,255,0.28); /* hairline rules on dark/photo */

	--kdg-on-dark:    #F5F0E6;
	--kdg-on-dark-soft: rgba(245,240,230,0.75);
	--kdg-overlay:    rgba(24,18,12,0.55);   /* photo scrims */

	/* ---- Glass system — a true frosted-glass surface: see-through,
	   not a flat card. The 14%-opacity original let 86% of whatever
	   photo happened to be behind it show through, heavily blurred —
	   full-bleed safari photography has uneven sky/vehicle/people
	   content, so on text-heavy panels (long list rows, not photo
	   cards) that read as a random smudgy blob. Nudged the base tint
	   up slightly for a bit more stability; the real fix for the two
	   sections that had the problem (Expeditions, How it works) is a
	   dedicated dark-frost treatment below, paired with a scrim on
	   those sections so the blur always has calm, consistent content
	   to work with instead of raw chaotic photo. ---- */
	--kdg-glass-bg:        rgba(247,242,232,0.18);
	--kdg-glass-bg-strong: rgba(247,242,232,0.26);
	--kdg-glass-border:    rgba(255,250,240,0.32);
	--kdg-glass-blur:      blur(20px) saturate(160%);
	--kdg-glass-radius:    28px;
	--kdg-glass-shadow:    0 24px 70px rgba(10,7,4,0.35);

	/* Dark-glass variant — footer, and any panel that wants to stay
	   on-dark text instead of ink. Also used (with the section-level
	   scrim) for Expeditions and How it works — see .kdg-glass--frost
	   below. */
	--kdg-glass-dark-bg:     rgba(18,14,10,0.5);
	--kdg-glass-dark-border: rgba(255,255,255,0.14);

	/* ---- Type ---- */
	--font-display: 'Fraunces', 'Georgia', serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-accent:  'Jost', 'Inter', sans-serif;

	/* ---- Spacing scale (4px step, matches prior builds) ---- */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
	--space-16: 64px; --space-24: 96px; --space-32: 128px; --space-40: 160px;

	--kdg-max-width: 1400px;
	--kdg-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* ---- Moving light — gold / light green / sky blue ---- */
	--kdg-glow-1: gold;
	--kdg-glow-2: lightgreen;
	--kdg-glow-3: skyblue;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	/* Belt-and-suspenders: the theme shouldn't produce anything wider
	   than the viewport, but hover-scale transforms (gallery cards),
	   the max-content marquee track, and fixed cursor-follow elements
	   are exactly the kind of thing that leaks a few px on real mobile
	   browsers. This clips it at the root instead of relying on every
	   individual component getting its own containment right. */
}
body {
	margin: 0;
	max-width: 100vw;
	overflow-x: hidden;
	background: var(--kdg-ink); /* fallback only — the fixed #kdg-bg-layer provides the real visual */
	color: var(--kdg-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; }
p { margin: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.kdg-container {
	max-width: var(--kdg-max-width);
	margin: 0 auto;
	padding: 0 var(--space-8);
}
@media (max-width: 640px) {
	.kdg-container { padding: 0 var(--space-5); }
}

/* Shared editorial micro-elements ---------------------------------------- */
.kdg-index {
	font-family: var(--font-accent);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--kdg-terracotta);
}
.kdg-label {
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--kdg-on-dark-soft);
}
.kdg-label--light { color: var(--kdg-on-dark-soft); }

.kdg-index-section__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--kdg-line-light);
	margin-bottom: var(--space-12);
}

/* Buttons ----------------------------------------------------------------- */
.kdg-btn {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 28px;
	font-family: var(--font-accent);
	font-size: 14px;
	letter-spacing: 0.04em;
	border-radius: 999px;
	transition: background 0.25s var(--kdg-ease), color 0.25s var(--kdg-ease), border-color 0.25s var(--kdg-ease), transform 0.25s var(--kdg-ease);
}
.kdg-btn:hover { transform: translateY(-1px); }

/* Glowing border — a small dot of light traveling around the button's
   actual border, via CSS Motion Path (offset-path: border-box). This
   follows the button's real geometry natively — no angle-to-box math
   for the browser to distort, so it can't bulge/detach the way a
   conic-gradient did on a wide, short pill. No SVG, no JS: the color
   cycles gold → light green → sky blue → gold across the same
   keyframes that move it. */
.kdg-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 7px;
	margin: -3.5px;
	border-radius: 50%;
	background: gold;
	box-shadow: 0 0 6px 2px currentColor;
	color: gold;
	offset-path: border-box;
	offset-distance: 0%;
	pointer-events: none;
	animation: kdg-dot-travel 6s linear infinite;
}
@keyframes kdg-dot-travel {
	0%   { offset-distance: 0%;   background: gold;       color: gold; }
	33%  { background: lightgreen; color: lightgreen; }
	66%  { background: skyblue;    color: skyblue; }
	100% { offset-distance: 100%; background: gold;       color: gold; }
}
/* Browsers without CSS Motion Path support just show no dot — the
   button itself is unaffected either way. */
@supports not (offset-path: border-box) {
	.kdg-btn::after { display: none; }
}
.kdg-btn--primary { background: var(--kdg-terracotta); color: #fff; }
.kdg-btn--primary:hover { background: var(--kdg-terracotta-hover); }
.kdg-btn--ghost { border: 1px solid var(--kdg-line); color: var(--kdg-ink); }
.kdg-btn--ghost:hover { border-color: var(--kdg-ink); }
.kdg-btn--ghost-light { border: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark); }
.kdg-btn--ghost-light:hover { background: rgba(255,255,255,0.1); }
.kdg-btn--line { border: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark); }
.kdg-btn--line:hover { border-color: var(--kdg-terracotta); color: var(--kdg-terracotta); }

.kdg-cta-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* Scroll reveal (JS adds .is-visible; CSS default is already visible so
   content never depends on JS to appear — see main.js) ------------------- */
[data-kdg-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--kdg-ease), transform 0.9s var(--kdg-ease);
}
[data-kdg-reveal].is-visible { opacity: 1; transform: translateY(0); }
.no-js [data-kdg-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   Persistent ambient background — every transparent section below the
   hero shows this through. Same photo set, dimmed, slow independent
   Ken Burns drift per layer so it never looks like a static photo.
   ========================================================================== */
#kdg-bg-layer {
	position: fixed; inset: 0; z-index: -1;
	overflow: hidden;
	background: var(--kdg-ink);
}
.kdg-bg-layer__img {
	position: absolute; inset: -4%; /* overscan so the Ken Burns zoom never shows an edge */
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 2.4s ease;
}
.kdg-bg-layer__img.is-active {
	opacity: 1;
	animation: kdg-kenburns 22s ease-in-out infinite alternate;
}
@keyframes kdg-kenburns {
	0%   { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.kdg-bg-layer__scrim {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(24,18,12,0.15) 0%, rgba(24,18,12,0.55) 65%, rgba(18,14,10,0.85) 100%);
}
@media (prefers-reduced-motion: reduce) {
	.kdg-bg-layer__img.is-active { animation: none; }
}

/* ==========================================================================
   Glass panel — the shared light-frost surface every content block sits
   on so text stays legible over the moving photography behind it.
   ========================================================================== */
.kdg-glass {
	background: var(--kdg-glass-bg);
	backdrop-filter: var(--kdg-glass-blur);
	-webkit-backdrop-filter: var(--kdg-glass-blur);
	border: 1px solid var(--kdg-glass-border);
	border-radius: var(--kdg-glass-radius);
	box-shadow: var(--kdg-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.5);
	padding: var(--space-12) var(--space-10);
}
.kdg-glass--dark {
	background: var(--kdg-glass-dark-bg);
	border-color: var(--kdg-glass-dark-border);
	color: var(--kdg-on-dark);
}
@media (max-width: 700px) {
	.kdg-glass { padding: var(--space-8) var(--space-5); border-radius: 20px; }
}
.kdg-glass .kdg-label { color: var(--kdg-on-dark-soft); } /* --dark modifier below was never actually
	applied anywhere in the templates, so this was the real default in practice — fixed at the source
	rather than relying on a modifier class nothing opts into. */
.kdg-glass--dark .kdg-label { color: var(--kdg-on-dark-soft); }

/* Fallback for browsers without backdrop-filter support (rare in 2026,
   but graceful): a slightly more opaque flat tint keeps text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kdg-glass { background: rgba(247,242,232,0.88); }
	.kdg-glass--dark { background: rgba(18,14,10,0.88); }
}
#kdg-preloader {
	position: fixed; inset: 0; z-index: 400;
	background: var(--kdg-ink);
	overflow: hidden;
	pointer-events: none;
	/* JS drives the real sequence + exit (zoom-morph into the homepage,
	   timed to 100%) — first-visit-this-session only, ~4.5s; a repeat
	   homepage visit in the same session uses the quick ~1.6s count
	   instead (see initPreloader() in main.js). This CSS block is the
	   no-JS safety net only — see the .no-js override below, which
	   just fades the whole thing quickly instead. */
}
.no-js #kdg-preloader {
	animation: kdg-preloader-fade 1.3s ease 0.3s forwards;
}
/* Exit: instead of sliding the whole panel away, the last active photo
   keeps zooming in — like the camera is pushing through it — while the
   dark scrim/UI dissolve out around it, so the loader feels like it
   morphs directly into the homepage underneath rather than being
   wiped off screen. */
#kdg-preloader.is-leaving {
	transition: opacity 1s ease 0.2s;
	opacity: 0;
}
#kdg-preloader.is-leaving .kdg-preloader__img.is-active {
	animation-play-state: paused;
	transition: transform 1.15s var(--kdg-ease);
	transform: scale(1.32);
}
#kdg-preloader.is-leaving .kdg-preloader__scrim {
	transition: opacity 0.5s ease;
	opacity: 0;
}
#kdg-preloader.is-leaving #kdg-preloader__count,
#kdg-preloader.is-leaving .kdg-preloader__foot,
#kdg-preloader.is-leaving .kdg-preloader__logo-wrap {
	transition: opacity 0.4s ease, transform 0.4s ease;
	opacity: 0;
	transform: translateY(-8px);
}

/* Full-bleed sequential photo reveal — each photo takes the whole
   screen for its turn. Switching photos is a zoom-in morph: the
   incoming image starts scaled well past full-bleed and slightly soft,
   then rushes into focus at its normal size before easing into a slow
   Ken Burns drift for the rest of its hold — it reads as one image
   morphing into the next rather than a flat crossfade. */
.kdg-preloader__stack { position: absolute; inset: 0; }
.kdg-preloader__img {
	position: absolute; inset: -4%;
	background-size: cover;
	background-position: center;
	background-color: #201812;
	opacity: 0;
	transform: scale(1.1);
	filter: blur(0);
}
/* This transition is only needed by the no-GSAP fallback (main.js
   initPreloaderCSS), which fades images out by toggling the .is-active
   class. The GSAP path animates these same properties directly via
   tweens — leaving a CSS transition on them unscoped would fight every
   frame GSAP writes, so it's scoped to run only when GSAP never took
   over. */
.kdg-preloader--css .kdg-preloader__img {
	transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;
}
.kdg-preloader__img.is-active {
	opacity: 1;
	animation: kdg-preloader-morph linear forwards;
	animation-duration: var(--kdg-preloader-hold, 3s);
}
@keyframes kdg-preloader-morph {
	0%   { transform: scale(1.45); opacity: 0; filter: blur(10px); }
	14%  { opacity: 1; filter: blur(0); }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1.0) translate(-1%, -1%); }
}
.kdg-preloader__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,14,10,0.25) 0%, rgba(18,14,10,0.15) 50%, rgba(18,14,10,0.55) 100%);
}

/* Preloader logo — shown at full size, no pill/badge wrapper around
   it. The "moving light" is a gradient sweep masked to the logo PNG's
   own alpha channel (mask-image using the logo file itself as the
   mask), so the shine only ever plays across the actual wordmark and
   the antelope mark — never a box around them. */
.kdg-preloader__logo-wrap {
	position: absolute;
	top: var(--space-12);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}
.kdg-preloader__logo-frame {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.kdg-preloader__logo-img {
	display: block;
	width: 300px;
	max-width: 62vw;
	height: auto;
}
.kdg-preloader__logo-shine {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Narrow band — ~8% of the gradient's own length, which at 300%
	   background-size works out to roughly a quarter of the logo's
	   width. The earlier version spanned 35%–65% (30% of the
	   gradient), which at 300% size covered ~90% of the logo — so it
	   read as a permanent color wash sitting over the whole logo
	   rather than a highlight sweeping across it. */
	background: linear-gradient(
		100deg,
		transparent 44%,
		var(--kdg-glow-1) 48%,
		var(--kdg-glow-2) 50%,
		var(--kdg-glow-3) 52%,
		transparent 56%
	);
	background-size: 300% 300%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	mix-blend-mode: overlay;
	opacity: 0.95;
	pointer-events: none;
	animation: kdg-logo-shine 2.8s ease-in-out infinite;
}
@keyframes kdg-logo-shine {
	0%   { background-position: 130% 50%; }
	100% { background-position: -30% 50%; }
}
.kdg-preloader__logo-text {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--kdg-cream);
	white-space: nowrap;
}
@media (max-width: 640px) {
	.kdg-preloader__logo-wrap { top: var(--space-8); }
	.kdg-preloader__logo-img { width: 210px; max-width: 68vw; }
}

#kdg-preloader__count {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 15vw;
	line-height: 1;
	color: var(--kdg-cream);
	mix-blend-mode: difference;
}
.kdg-preloader__foot {
	position: absolute; left: 0; right: 0; bottom: var(--space-8);
	z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
	text-align: center;
	padding: 0 var(--space-6);
}
.kdg-preloader__mark {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 0.01em;
	color: var(--kdg-cream);
}
.kdg-preloader__skip {
	position: absolute; top: var(--space-6); right: var(--space-6); z-index: 3;
	pointer-events: auto; /* #kdg-preloader above sets pointer-events:none — this opts back in */
	font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.04em;
	color: var(--kdg-on-dark-soft);
	border: 1px solid var(--kdg-line-light); border-radius: 999px;
	padding: 8px 16px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.kdg-preloader__skip:hover, .kdg-preloader__skip:focus-visible { color: var(--kdg-cream); border-color: var(--kdg-clay); }
.no-js .kdg-preloader__skip { display: none; } /* nothing to skip — the no-JS fade already only takes ~1.3s */
.kdg-preloader__word {
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--kdg-on-dark-soft);
	opacity: 0;
	transform: translateY(6px);
}
.kdg-preloader--css .kdg-preloader__word {
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.kdg-preloader__word.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
	.kdg-preloader__foot { bottom: var(--space-6); gap: var(--space-1); }
	.kdg-preloader__mark { font-size: 16px; }
	.kdg-preloader__word { font-size: 11px; letter-spacing: 0.1em; }
}
@keyframes kdg-preloader-fade {
	0% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.no-js #kdg-preloader { animation-duration: 0.4s; animation-delay: 0s; }
	#kdg-preloader.is-leaving { transition-duration: 0.2s; }
	.kdg-preloader__img { transition: none; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.kdg-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 200;
	padding: var(--space-5) 0;
	background: rgba(20,15,10,0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Was a gradient fading to fully transparent at the bottom edge — looked
   fine floating over a tall hero photo, but once the page is scrolled
   and this fixed bar is pinned over whatever content happens to be
   underneath it (light cards, other sections), that transparent zone
   let the scrolled content show straight through the nav's own text.
   A consistently near-opaque bar reads correctly everywhere, on every
   page, at every scroll position — the one thing this really needs to
   get right, at the cost of not blending as seamlessly into a hero
   photo at the very top of the homepage. */
/* Was mix-blend-mode:difference on desktop (mobile already used this
   same plain gradient) — blend-mode on a position:fixed element is a
   known iOS Safari hazard (mis-render/flicker on scroll), and gets
   even less predictable if anything else fixed to the top of the
   viewport (the WP admin bar, for a logged-in visitor) ends up
   compositing into it too. One plain, reliable gradient scrim
   everywhere instead — same "white text stays readable over any
   photo" job, none of the risk. */
body.admin-bar .kdg-nav { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .kdg-nav { top: 46px; }
}
.kdg-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
/* Logo mark — the uploaded logo has no guaranteed size (theme
   declares flex-height/flex-width so any dimensions are valid), so
   without an explicit cap it renders at native size and spills out of
   the fixed-height nav row into the hero below. Capped to a fixed
   height here; width follows proportionally. */
.kdg-nav__mark { display: inline-flex; align-items: center; line-height: 0; }
.kdg-nav__logo-img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}
.kdg-nav__mark-text {
	font-family: var(--font-display);
	font-size: 20px;
	color: #fff;
	letter-spacing: 0.01em;
}
@media (max-width: 640px) {
	.kdg-nav__logo-img { height: 44px; max-width: 190px; }
}
.kdg-nav__links { display: flex; }
.kdg-nav__menu { list-style: none; display: flex; gap: var(--space-8); margin: 0; padding: 0; }
.kdg-nav__menu a {
	font-family: var(--font-accent);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
}
.kdg-nav__actions { display: flex; align-items: center; gap: var(--space-6); }
.kdg-nav__actions .kdg-btn--line { color: #fff; border-color: var(--kdg-line-light); }
.kdg-nav__actions .kdg-btn--line:hover { border-color: #fff; color: #fff; }

/* Menu trigger — visible at every breakpoint, opens the full-screen
   overlay below. This is the primary nav entry point, same as kin's
   "Menu" trigger; the inline desktop links are a secondary convenience. */
.kdg-nav__toggle {
	display: flex; align-items: center; gap: var(--space-3);
	color: #fff;
}
.kdg-nav__toggle-label {
	font-family: var(--font-accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
}
.kdg-nav__toggle-icon { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.kdg-nav__toggle-icon span { display: block; height: 1px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; }
body.kdg-menu-open .kdg-nav__toggle-icon span:first-child { transform: translateY(3px) rotate(45deg); }
body.kdg-menu-open .kdg-nav__toggle-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 860px) {
	.kdg-nav__links { display: none; }
	.kdg-nav__actions .kdg-nav__cta { display: none; }
	.kdg-nav__toggle-label { display: none; }
}

/* ==========================================================================
   Menu panel — simplified slide-in drawer (was previously a full-screen
   overlay with large numbered links and per-item hover photos).
   ========================================================================== */
/* Slide-in menu panel — simplified from an earlier full-screen,
   per-item-hover-photo version (see the comment above the markup in
   header.php for why). Standard right-side drawer: fixed width on
   desktop, full width on mobile, plain list of links. Hidden by THREE
   independent mechanisms at once (visibility, opacity, and a hard
   translateX off-screen) rather than relying on just one — belt and
   braces against it ever being visible/interactive when it shouldn't
   be, regardless of which CSS actually loads on a given page. */
.kdg-menu {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 250;
	width: min(420px, 100vw);
	background: var(--kdg-ink);
	color: var(--kdg-on-dark);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	box-shadow: -20px 0 60px -20px rgba(0,0,0,0.4);
	transition: opacity 0.4s ease, visibility 0.4s, transform 0.4s var(--kdg-ease);
}
body.kdg-menu-open .kdg-menu { visibility: visible; opacity: 1; transform: translateX(0); }
body.kdg-menu-open { overflow: hidden; }
/* Same admin-bar offset as .kdg-nav — otherwise the panel's own close
   button/logo row renders partly behind the WP toolbar for a logged-in
   visitor. */
body.admin-bar .kdg-menu { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .kdg-menu { top: 46px; }
}

/* A simple dark backdrop behind the panel, click-to-close. */
.kdg-menu::before {
	content: ''; position: fixed; inset: 0; z-index: -1;
	background: rgba(10,8,6,0.5);
	opacity: 0; pointer-events: none;
	transition: opacity 0.4s ease;
}
body.kdg-menu-open .kdg-menu::before { opacity: 1; pointer-events: auto; }

.kdg-menu__top {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--kdg-line-light);
}
.kdg-menu__mark { color: var(--kdg-cream); }
.kdg-menu__close {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--kdg-line-light); color: var(--kdg-cream);
	transition: border-color 0.2s ease;
}
.kdg-menu__close:hover { border-color: var(--kdg-clay); }
.kdg-menu__close-icon { position: relative; width: 14px; height: 14px; }
.kdg-menu__close-icon span { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--kdg-cream); }
.kdg-menu__close-icon span:first-child { transform: rotate(45deg); }
.kdg-menu__close-icon span:last-child { transform: rotate(-45deg); }

.kdg-menu__links { display: flex; flex-direction: column; padding: var(--space-4) var(--space-6); }
.kdg-menu__links a {
	padding: var(--space-3) 0;
	font-family: var(--font-display);
	font-size: 21px;
	color: var(--kdg-cream);
	border-bottom: 1px solid var(--kdg-line-light);
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.kdg-menu__links a:hover { color: var(--kdg-clay); padding-left: var(--space-2); }
.kdg-menu__links a:last-child { border-bottom: none; }

.kdg-menu__foot {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	padding: var(--space-6);
	border-top: 1px solid var(--kdg-line-light);
}
.kdg-menu__foot-col { display: flex; flex-direction: column; gap: var(--space-2); }
.kdg-menu__foot-col a { font-size: 14px; color: var(--kdg-on-dark); opacity: 0.85; }
.kdg-menu__foot-col a:hover { opacity: 1; color: var(--kdg-clay); }
.kdg-menu__cta { width: 100%; justify-content: center; }

@media (max-width: 700px) {
	.kdg-menu { width: 100vw; }
	.kdg-menu__links a { font-size: 19px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.kdg-hero {
	position: relative;
	min-height: 100vh; /* fallback for browsers without dvh support */
	min-height: 100dvh; /* mobile browsers calculate vh from the LARGEST possible
		viewport (address bar hidden), not what's actually visible when the
		page loads (address bar showing) — 100vh ends up genuinely taller
		than the real screen on mobile. dvh tracks the real, current
		viewport instead. Widely supported now; the line above is a safe
		fallback for anything that isn't. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--kdg-on-dark);
	overflow: hidden;
	background: var(--kdg-ink); /* fallback if the photo layer beneath fails to load —
		guarantees on-dark text stays readable either way */
}
.kdg-hero__media {
	position: absolute; inset: 0;
	background: linear-gradient(160deg, #3B2B1D 0%, #2A1E14 60%, #211A13 100%);
}
.kdg-hero__layer {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.6s ease, transform 8s linear;
}
.kdg-hero__layer.is-active { opacity: 1; transform: scale(1); }
.kdg-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(24,18,12,0.35) 0%, rgba(24,18,12,0.15) 40%, rgba(24,18,12,0.75) 100%);
}

/* Unsplash attribution — a plain inline pill (.kdg-credit) that never
   carries its own positioning. Each context wraps it in a small,
   explicitly-sized slot that IS position:absolute, so the credit can
   never expand into a stray full-width line regardless of viewport. */
.kdg-credit {
	display: inline-flex;
	font-family: var(--font-accent);
	font-size: 10px;
	letter-spacing: 0.03em;
	color: rgba(255,255,255,0.7);
	white-space: nowrap;
}
.kdg-credit a { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 2px; }
.kdg-credit a:hover { color: #fff; }

.kdg-hero__credit-slot {
	position: absolute; bottom: var(--space-4); right: var(--space-4);
	z-index: 1;
	background: rgba(24,18,12,0.45);
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	max-width: 60vw;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kdg-hero__frame { position: relative; padding-top: 140px; padding-bottom: var(--space-16); }
.kdg-hero__topline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.kdg-hero__headline {
	font-size: clamp(48px, 8vw, 108px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	max-width: 18ch;
	margin-bottom: var(--space-12);
}
.kdg-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.kdg-hero__subtext { max-width: 34ch; font-size: 17px; color: var(--kdg-on-dark-soft); }

.kdg-hero__stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--kdg-line-light);
	padding-top: var(--space-6);
	padding-bottom: var(--space-8);
}
.kdg-hero__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.kdg-hero__stat b { font-family: var(--font-display); font-size: 34px; }
.kdg-hero__stat span { font-family: var(--font-accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kdg-on-dark-soft); }

.kdg-hero__scroll {
	position: absolute; bottom: var(--space-8); right: var(--space-8);
	width: 30px; height: 46px;
	border: 1px solid var(--kdg-line-light);
	border-radius: 999px;
	display: flex; justify-content: center; padding-top: 8px;
}
.kdg-hero__scroll span {
	width: 3px; height: 8px; border-radius: 2px;
	background: var(--kdg-on-dark);
	animation: kdg-scroll-dot 1.8s ease infinite;
}
@keyframes kdg-scroll-dot {
	0% { opacity: 0; transform: translateY(0); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 860px) {
	.kdg-hero__frame { padding-top: 110px; }
	.kdg-hero__foot { flex-direction: column; align-items: flex-start; }
	.kdg-hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
	.kdg-hero__scroll { display: none; }
}

/* ==========================================================================
   Trust — glass badge row right after the hero
   ========================================================================== */
.kdg-trust { padding: var(--space-12) 0 var(--space-16); }
.kdg-trust__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}
.kdg-trust__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: 999px;
	color: var(--kdg-on-dark);
}
.kdg-trust__badge svg { color: var(--kdg-terracotta); flex-shrink: 0; }
.kdg-trust__badge span {
	font-family: var(--font-accent);
	font-size: 13px;
	white-space: nowrap;
}
@media (max-width: 700px) {
	.kdg-trust__row { gap: var(--space-3); }
	.kdg-trust__badge { padding: var(--space-2) var(--space-4); }
	.kdg-trust__badge span { font-size: 12px; white-space: normal; }
}

/* Moving reviews marquee — a doubled track scrolling left continuously;
   the duplicate makes the -50% loop seamless. Pauses on hover/focus so
   it's actually readable, and drops to a static horizontally-scrollable
   row for reduced-motion users instead of forcing continuous motion. */
.kdg-marquee {
	margin-top: var(--space-8);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kdg-marquee__track {
	display: flex;
	gap: var(--space-5);
	width: max-content;
	padding: 0 var(--space-8);
	animation: kdg-marquee-scroll 42s linear infinite;
}
.kdg-marquee:hover .kdg-marquee__track,
.kdg-marquee:focus-within .kdg-marquee__track {
	animation-play-state: paused;
}
@keyframes kdg-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.kdg-review-card {
	flex: 0 0 auto;
	width: 320px;
	padding: var(--space-5) var(--space-6);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-4);
}
.kdg-review-card__thumb {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--kdg-cream-dim);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.kdg-review-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}
.kdg-review-card__stars { display: flex; gap: 2px; color: var(--kdg-terracotta); }
.kdg-review-card__stars .kdg-icon--star-outline { opacity: 0.35; }
.kdg-review-card__quote { font-size: 14px; line-height: 1.5; color: var(--kdg-on-dark); }
.kdg-review-card__author { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); }

@media (prefers-reduced-motion: reduce) {
	.kdg-marquee__track { animation: none; overflow-x: auto; }
}
@media (max-width: 700px) {
	.kdg-review-card { width: 240px; }
}

/* ==========================================================================
   Intro
   ========================================================================== */
/* No card behind this section any more — it sits straight on the
   persistent bg-layer photo, so it gets the same pre-darkening scrim
   as Expeditions/How it works and switches to on-dark type. */
.kdg-intro {
	padding: var(--space-32) 0;
	background: linear-gradient(180deg, rgba(20,15,10,0.45) 0%, rgba(20,15,10,0.6) 100%);
}
.kdg-intro__grid {
	display: grid;
	grid-template-columns: 160px 1fr 1fr;
	gap: var(--space-12);
	align-items: start;
}
.kdg-intro__label-col { display: flex; align-items: center; gap: var(--space-3); }
.kdg-intro__statement {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.25;
	color: var(--kdg-on-dark);
}
.kdg-intro__facts { display: flex; flex-direction: column; gap: var(--space-6); }
.kdg-intro__fact { display: flex; gap: var(--space-4); align-items: baseline; }
.kdg-intro__fact b { font-family: var(--font-display); font-size: 32px; color: var(--kdg-terracotta); min-width: 64px; }
.kdg-intro__fact span { font-size: 14px; color: var(--kdg-on-dark-soft); line-height: 1.4; }

@media (max-width: 960px) {
	.kdg-intro__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ==========================================================================
   Expeditions Index (row list + hover-follow image)
   ========================================================================== */
/* Scrim behind Expeditions specifically — pre-darkens the fixed
   bg-layer photo for this section so the dark-glass card's blur
   always picks up calm, consistent tone underneath it, instead of
   whatever bright/busy patch of safari photography happens to be
   scrolled behind it at the time. */
.kdg-index-section {
	padding: var(--space-24) 0 var(--space-32);
	position: relative;
	background: linear-gradient(180deg, rgba(20,15,10,0.45) 0%, rgba(20,15,10,0.6) 100%);
}
.kdg-exp-list { display: flex; flex-direction: column; }
.kdg-exp-row {
	position: relative;
	display: grid;
	grid-template-columns: 52px 48px 1fr 1.2fr 40px;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--kdg-line-light);
	transition: opacity 0.3s ease;
	overflow: hidden;
}
.kdg-exp-list:hover .kdg-exp-row { opacity: 0.4; }
.kdg-exp-list:hover .kdg-exp-row:hover { opacity: 1; }

/* Large faint numeral behind the row content — sits low-opacity
   against the dark-glass card, purely typographic decoration. Comes
   first in the markup so later (visually static/grid) content paints
   over it without needing an explicit z-index. */
.kdg-exp-row__ghost-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 56px;
	font-family: var(--font-display);
	font-size: clamp(70px, 9vw, 140px);
	line-height: 1;
	color: rgba(255,255,255,0.05);
	pointer-events: none;
}
.kdg-exp-row__avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--kdg-glass-dark-bg);
	border: 1px solid var(--kdg-line-light);
	flex-shrink: 0;
}
.kdg-exp-row__num { font-family: var(--font-accent); font-size: 14px; color: var(--kdg-on-dark-soft); }
.kdg-exp-row__body { display: flex; flex-direction: column; gap: 6px; }
.kdg-exp-row__name {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 36px);
	color: var(--kdg-on-dark);
	position: relative;
	display: inline-block;
	width: fit-content;
}
.kdg-exp-row__underline {
	position: absolute;
	left: 0; bottom: 2px;
	width: 100%;
	height: 2px;
	background: var(--kdg-terracotta);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}
.kdg-exp-row__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kdg-clay);
}
.kdg-exp-row__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.kdg-exp-row__desc { font-size: 15px; color: var(--kdg-on-dark-soft); max-width: 46ch; display: flex; flex-direction: column; gap: var(--space-3); }
.kdg-exp-row__highlights { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kdg-exp-row__tag {
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--kdg-on-dark);
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--kdg-line-light);
	padding: 4px 10px;
	border-radius: 999px;
}
.kdg-exp-row__arrow {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--kdg-line-light);
	color: var(--kdg-on-dark);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.kdg-exp-row:hover .kdg-exp-row__arrow { background: var(--kdg-terracotta); border-color: var(--kdg-terracotta); color: #fff; transform: rotate(45deg); }

/* Thumb: inline fallback shown on touch/narrow, hidden on desktop hover
   (desktop uses the floating cursor image instead) */
.kdg-exp-row__thumb { display: none; }

.kdg-exp-float {
	position: fixed;
	top: 0; left: 0;
	width: 400px; height: 280px;
	border-radius: 14px;
	background-size: cover;
	background-position: center;
	background-color: var(--kdg-cream-dim);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9);
	transition: opacity 0.35s ease, transform 0.35s var(--kdg-ease);
	z-index: 50;
	box-shadow: 0 30px 80px rgba(33,26,19,0.35);
	overflow: hidden;
}
.kdg-exp-float.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kdg-exp-float::after {
	content: 'View Expedition ↗';
	position: absolute; left: var(--space-4); bottom: var(--space-3);
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kdg-on-dark);
	background: rgba(24,18,12,0.45);
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

@media (max-width: 860px) {
	.kdg-exp-row { grid-template-columns: 40px 1fr 40px; row-gap: var(--space-3); }
	.kdg-exp-row__desc { display: none; }
	.kdg-exp-row__avatar { display: none; }
	.kdg-exp-row__ghost-num { display: none; }
	.kdg-exp-float { display: none; }
	.kdg-exp-row__thumb {
		display: block;
		position: relative;
		grid-column: 1 / -1;
		height: 180px;
		border-radius: 10px;
		background-size: cover;
		background-position: center;
		background-color: var(--kdg-cream-dim);
	}
}
.kdg-exp-row__credit-slot {
	position: absolute; bottom: var(--space-3); left: var(--space-3);
	background: rgba(24,18,12,0.45);
	padding: 3px 9px;
	border-radius: 999px;
	backdrop-filter: blur(5px);
}

/* ==========================================================================
   Destinations Gallery — floating glass photo cards. Hover zooms the
   photo in further and rises a detail overlay over it, so there's a
   reason to want to click through rather than a caption that just sits.
   ========================================================================== */
.kdg-gallery-section { padding-bottom: var(--space-32); }
/* Modifier for the Destinations/Hotels/Packages/Experiences/Guides
   archive pages, where this section is the page's main content below
   a photo hero. Now just adds top padding — the section floats over
   the universal ambient background exactly like the homepage's own
   bare .kdg-gallery-section already does; no separate treatment. */
.kdg-gallery-section--page { padding-top: var(--space-16); color: var(--kdg-on-dark); }
.kdg-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}
.kdg-gallery__card {
	position: relative;
	z-index: 1;
	display: block;
	min-width: 0; /* grid items default to min-width:auto — without this, a long
		unbreakable name (a lodge title, etc.) refuses to let its column shrink
		below that name's width even on a 1fr track, forcing the whole grid
		wider than the viewport on mobile. This is what actually fixes that,
		not just wrapping the text (see .kdg-gallery__name below, which is
		still needed too — this alone isn't enough without it). */
	padding: var(--space-3);
	transform-origin: center center;
	transition: transform 0.55s var(--kdg-ease), box-shadow 0.55s var(--kdg-ease), z-index 0.55s step-end;
	cursor: pointer;
}
.kdg-gallery__card:hover {
	transform: scale(1.14) translateY(-4px);
	z-index: 5;
	box-shadow: 0 32px 56px rgba(24,18,12,0.32);
	transition: transform 0.55s var(--kdg-ease), box-shadow 0.55s var(--kdg-ease), z-index 0s;
}
.kdg-gallery__frame {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 18px;
}
.kdg-gallery__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	background-color: #4A3A28; /* shows briefly while loading */
	transition: transform 0.7s var(--kdg-ease);
}
.kdg-gallery__card:hover .kdg-gallery__img { transform: scale(1.08); }
.kdg-gallery__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(24,18,12,0) 45%, rgba(24,18,12,0.55) 100%);
	transition: background 0.4s ease;
}
.kdg-gallery__card:hover .kdg-gallery__scrim {
	background: linear-gradient(180deg, rgba(24,18,12,0.1) 0%, rgba(24,18,12,0.92) 65%, rgba(24,18,12,0.96) 100%);
}
.kdg-gallery__num {
	position: absolute; top: var(--space-3); right: var(--space-3);
	font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark);
	z-index: 1;
	transition: opacity 0.3s ease;
}
/* Optional small pill (e.g. "Popular", "Best Seller", a lodge tier, a
   destination category) — same gallery card everywhere, this is purely
   additive and never changes the card's core layout. */
.kdg-gallery__badge {
	position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1;
	background: var(--kdg-terracotta); color: #fff;
	font-family: var(--font-accent); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 4px 10px; border-radius: 999px;
}
.kdg-gallery__credit-slot {
	position: absolute; top: var(--space-3); left: var(--space-3);
	z-index: 1;
	background: rgba(24,18,12,0.4);
	padding: 3px 9px;
	border-radius: 999px;
	backdrop-filter: blur(5px);
}
/* Small info tag (tier / price / duration) — reused across hotels,
   packages, and experiences cards. Sits opposite the number, top-left,
   unless a credit slot is also present (rare once real photos are up),
   in which case it drops just below it. */
.kdg-gallery__tag {
	position: absolute; top: var(--space-3); left: var(--space-3);
	z-index: 1;
	font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.03em;
	color: var(--kdg-on-dark);
	background: rgba(24,18,12,0.4);
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(5px);
}
.kdg-gallery__credit-slot + .kdg-gallery__tag,
.kdg-gallery__tag:has(+ .kdg-gallery__credit-slot) {
	top: calc(var(--space-3) + 28px);
}

/* Detail overlay — hidden until hover, rises up over the now-darker photo */
.kdg-gallery__overlay {
	position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
	z-index: 1;
	display: flex; flex-direction: column; gap: var(--space-3);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s var(--kdg-ease), transform 0.4s var(--kdg-ease);
	pointer-events: none;
}
.kdg-gallery__card:hover .kdg-gallery__overlay { opacity: 1; transform: translateY(0); }
.kdg-gallery__overlay-desc {
	font-size: 13px; line-height: 1.5;
	color: var(--kdg-on-dark-soft);
}
.kdg-gallery__overlay-highlights {
	display: flex; flex-wrap: wrap; gap: 6px;
}
.kdg-gallery__overlay-tag {
	font-family: var(--font-accent); font-size: 10px; letter-spacing: 0.03em;
	color: var(--kdg-on-dark);
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.28);
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.kdg-gallery__overlay-cta {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-family: var(--font-accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--kdg-on-dark);
}
.kdg-gallery__overlay-cta svg { color: var(--kdg-clay); transition: transform 0.3s ease; }
.kdg-gallery__card:hover .kdg-gallery__overlay-cta svg { transform: translate(2px, -2px); }

.kdg-gallery__caption {
	display: flex; flex-direction: column; gap: 2px;
	padding: var(--space-4) var(--space-2) var(--space-1);
}
.kdg-gallery__name { font-family: var(--font-display); font-size: 20px; color: var(--kdg-on-dark); text-shadow: 0 1px 12px rgba(0,0,0,0.4); overflow-wrap: break-word; }
.kdg-gallery__region { font-family: var(--font-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kdg-on-dark-soft); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

@media (max-width: 960px) {
	.kdg-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Destinations ("Where we go") only — a real horizontal swipe carousel
   on phones instead of a cramped 2-up grid. Scoped to the --carousel
   modifier so hotels/packages/experiences, which reuse .kdg-gallery,
   are untouched. */
@media (max-width: 700px) {
	.kdg-gallery--carousel {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--space-4);
		margin: 0 calc(var(--space-5) * -1);
		padding: 0 var(--space-5) var(--space-3);
		scroll-padding-left: var(--space-5);
		scrollbar-width: none;
	}
	.kdg-gallery--carousel::-webkit-scrollbar { display: none; }
	.kdg-gallery--carousel .kdg-gallery__card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	/* With the scrollbar hidden, a grab cursor is the only visible cue
	   a mouse user gets that this drags — touch devices don't have a
	   hover-capable pointer so they never see this, which is correct
	   since swipe already works for them natively. */
	@media (hover: hover) and (pointer: fine) {
		.kdg-gallery--carousel { cursor: grab; }
		.kdg-gallery--carousel:active { cursor: grabbing; }
	}
}
/* Touch devices have no hover — show the overlay content plainly under
   the photo instead of hiding it behind an interaction that can't happen. */
@media (hover: none) {
	.kdg-gallery__card:hover { transform: none; box-shadow: none; z-index: 1; }
	.kdg-gallery__overlay { position: static; opacity: 1; transform: none; padding: var(--space-4) var(--space-2) 0; }
	.kdg-gallery__overlay-desc { color: var(--kdg-on-dark-soft); }
	.kdg-gallery__overlay-tag { color: var(--kdg-on-dark); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
	.kdg-gallery__overlay-cta { color: var(--kdg-terracotta); }
	.kdg-gallery__overlay-cta svg { color: var(--kdg-terracotta); }
	.kdg-gallery__scrim { background: linear-gradient(180deg, rgba(24,18,12,0) 60%, rgba(24,18,12,0.45) 100%); }
}

/* ==========================================================================
   Process
   ========================================================================== */
.kdg-process-section {
	padding-bottom: var(--space-32);
	background: linear-gradient(180deg, rgba(20,15,10,0.45) 0%, rgba(20,15,10,0.6) 100%);
}
.kdg-process-list { display: flex; flex-direction: column; position: relative; }
/* Progress rail — a thin vertical line behind the step numbers that
   fills top-to-bottom as the user scrolls through the four steps (see
   initProcessRail() in main.js, GSAP ScrollTrigger with scrub). Ties
   the motion directly to the content's own sequential structure
   instead of being decoration for its own sake. */
.kdg-process-rail {
	position: absolute;
	left: calc(var(--space-10) + 30px);
	top: var(--space-12);
	bottom: var(--space-12);
	width: 2px;
	background: var(--kdg-line-light);
	z-index: 0;
}
.kdg-process-rail__fill {
	position: absolute;
	top: 0; left: 0; width: 100%;
	height: 0%;
	background: linear-gradient(180deg, var(--kdg-terracotta), var(--kdg-gold));
	border-radius: 2px;
}
.kdg-process-row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 60px 1fr 1.4fr;
	gap: var(--space-6);
	align-items: baseline;
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--kdg-line-light);
	overflow: hidden;
}
/* Large faint numeral behind the row content, same treatment as the
   expedition rows above — purely typographic decoration. */
.kdg-process-row__ghost-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--space-6);
	font-family: var(--font-display);
	font-size: clamp(70px, 9vw, 140px);
	line-height: 1;
	color: rgba(255,255,255,0.05);
	pointer-events: none;
	z-index: -1;
}
.kdg-process-row__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.kdg-process-row__icon {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--kdg-line-light);
	color: var(--kdg-clay);
}
.kdg-process-row__num { font-family: var(--font-accent); font-size: 14px; color: var(--kdg-clay); }
.kdg-process-row__title { font-family: var(--font-display); font-size: 24px; color: var(--kdg-on-dark); }
.kdg-process-row__desc { font-size: 15px; color: var(--kdg-on-dark-soft); max-width: 50ch; }

@media (max-width: 700px) {
	.kdg-process-row { grid-template-columns: 40px 1fr; row-gap: var(--space-2); }
	.kdg-process-row__desc { grid-column: 2; }
	.kdg-process-row__icon { display: none; }
	.kdg-process-row__ghost-num { display: none; }
	.kdg-process-rail { left: calc(var(--space-5) + 20px); top: var(--space-8); bottom: var(--space-8); }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
/* No card behind this section any more — same pre-darkening scrim +
   on-dark type treatment as Intro/Expeditions/How it works. */
.kdg-testimonial-section {
	padding-bottom: var(--space-32);
	background: linear-gradient(180deg, rgba(20,15,10,0.45) 0%, rgba(20,15,10,0.6) 100%);
}
.kdg-testimonial-stage { position: relative; min-height: 220px; }
.kdg-testimonial {
	position: absolute; inset: 0;
	margin: 0;
	opacity: 0; visibility: hidden;
	transition: opacity 0.5s ease;
	max-width: 70ch;
}
.kdg-testimonial.is-active { opacity: 1; visibility: visible; position: relative; }
.kdg-testimonial p {
	font-family: var(--font-display);
	font-size: clamp(24px, 3.6vw, 38px);
	line-height: 1.3;
	color: var(--kdg-on-dark);
}
.kdg-testimonial footer { margin-top: var(--space-5); font-family: var(--font-accent); font-size: 13px; color: var(--kdg-on-dark-soft); }
.kdg-testimonial footer span { color: var(--kdg-terracotta); }

.kdg-testimonial-dots { display: flex; gap: var(--space-3); margin-top: var(--space-8); }
.kdg-testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--kdg-line-light); transition: background 0.25s ease, transform 0.25s ease; }
.kdg-testimonial-dots button.is-active { background: var(--kdg-terracotta); transform: scale(1.3); }

/* ==========================================================================
   CTA
   ========================================================================== */
/* No card behind this section any more — same pre-darkening scrim +
   on-dark type treatment as the sections above. */
.kdg-cta-section {
	padding-bottom: var(--space-32);
	background: linear-gradient(180deg, rgba(20,15,10,0.45) 0%, rgba(20,15,10,0.6) 100%);
}
.kdg-cta-section__panel { max-width: 900px; }
.kdg-cta-section__headline {
	font-size: clamp(36px, 6vw, 72px);
	line-height: 1.05;
	max-width: 16ch;
	margin-bottom: var(--space-10, 40px);
	color: var(--kdg-on-dark);
}
.kdg-cta-section__headline em { font-style: italic; color: var(--kdg-terracotta); }

/* ==========================================================================
   Footer
   ========================================================================== */
.kdg-footer {
	background: var(--kdg-glass-dark-bg);
	backdrop-filter: var(--kdg-glass-blur);
	-webkit-backdrop-filter: var(--kdg-glass-blur);
	border-top: 1px solid var(--kdg-glass-dark-border);
	color: var(--kdg-on-dark);
	padding: var(--space-24) 0 var(--space-8);
}
.kdg-footer__lead {
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 56px);
	margin-bottom: var(--space-16);
}
.kdg-footer__lead em { font-style: italic; color: var(--kdg-clay); }
.kdg-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-12);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--kdg-line-light);
}
.kdg-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.kdg-footer__col .kdg-label { color: var(--kdg-on-dark-soft); margin-bottom: var(--space-2); }
.kdg-footer__col a { font-size: 15px; color: var(--kdg-on-dark); opacity: 0.85; transition: opacity 0.2s ease; }
.kdg-footer__col a:hover { opacity: 1; color: var(--kdg-clay); }
.kdg-footer__bottom {
	display: flex; justify-content: space-between;
	padding-top: var(--space-6);
	font-family: var(--font-accent); font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--kdg-on-dark-soft);
}

@media (max-width: 900px) {
	.kdg-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.kdg-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.kdg-footer__bottom { flex-direction: column; gap: var(--space-2); }
}

/* ════════════════════════════════════════════════════════
   CPT SINGLE / ARCHIVE TEMPLATES
   (kdg_destination, kdg_itinerary, kdg_lodge — see inc/cpt.php)
════════════════════════════════════════════════════════ */

.kdg-page-hero {
	position: relative;
	min-height: 78vh;
	min-height: 78dvh; /* see .kdg-hero comment above — same mobile-viewport fix */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--kdg-on-dark);
	overflow: hidden;
	background: linear-gradient(160deg, #3B2B1D 0%, #2A1E14 60%, #211A13 100%);
}
.kdg-page-hero__media {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transform: scale(1.04);
}
.kdg-page-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(24,18,12,0.35) 0%, rgba(24,18,12,0.2) 40%, rgba(24,18,12,0.8) 100%);
}
.kdg-page-hero__credit {
	position: absolute; bottom: var(--space-4); right: var(--space-4); z-index: 1;
	background: rgba(24,18,12,0.45); padding: 4px 10px; border-radius: 999px;
	backdrop-filter: blur(6px); max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}
.kdg-page-hero__frame { position: relative; padding-top: 150px; padding-bottom: var(--space-12); }
.kdg-page-hero__topline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.kdg-page-hero__title {
	font-size: clamp(36px, 6vw, 64px);
	max-width: 20ch;
}
.kdg-page-hero__meta {
	display: flex; align-items: center; gap: var(--space-3);
	margin-top: var(--space-5);
	font-family: var(--font-accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--kdg-on-dark-soft);
}
.kdg-page-hero__meta span:not(:last-child)::after { content: '·'; margin-left: var(--space-3); color: var(--kdg-clay); }

@media (max-width: 700px) {
	.kdg-page-hero { min-height: 90vh; min-height: 90dvh; }
	.kdg-page-hero__frame { padding-top: 120px; }
}

/* Single body/sidebar layout — shared by the three single-kdg_*.php templates.
   Floats over the universal dark ambient background (#kdg-bg-layer) like
   everything else on the site — no opaque section background, on-dark
   text throughout, same as the homepage's own card/content sections. */
.kdg-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-16);
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	color: var(--kdg-on-dark); /* safety-net default — headings have no color of their own
		(see h1,h2,h3,h4 base rule) and would otherwise inherit body's dark-ink default,
		including for arbitrary the_content() editor output with no specific class */
}
.kdg-single__body { font-size: 17px; line-height: 1.7; color: var(--kdg-on-dark-soft); max-width: 68ch; }
.kdg-single__body p { margin: 0 0 var(--space-5); }
.kdg-single__highlights { margin-top: var(--space-10); }
.kdg-single__highlights ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.kdg-single__highlights li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--kdg-on-dark); }
.kdg-single__highlights li .kdg-icon { flex: none; margin-top: 3px; color: var(--kdg-terracotta); }

.kdg-single__side { align-self: start; position: sticky; top: var(--space-24); }
.kdg-single__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.kdg-single__card p { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--kdg-on-dark); }
.kdg-single__card .kdg-icon { color: var(--kdg-terracotta); flex: none; }
.kdg-single__card .kdg-btn { justify-content: center; }
.kdg-single__empty { padding: var(--space-24) 0; text-align: center; color: var(--kdg-on-dark-soft); }

@media (max-width: 900px) {
	.kdg-single { grid-template-columns: 1fr; gap: var(--space-10); }
	.kdg-single__side { position: static; }
}

/* ════════════════════════════════════════════════════════
   BOOKING ENGINE (page-booking.php, inc/booking.php)
════════════════════════════════════════════════════════ */

.kdg-booking { padding-top: var(--space-8); padding-bottom: var(--space-32); color: var(--kdg-on-dark); }
.kdg-booking__notice {
	display: flex; align-items: flex-start; gap: var(--space-4);
	padding: var(--space-6); border-radius: 16px;
	margin-bottom: var(--space-10);
}
.kdg-booking__notice p { margin: var(--space-1) 0 0; color: var(--kdg-on-dark-soft); }
.kdg-booking__notice--success { background: rgba(169,121,59,0.15); border: 1px solid var(--kdg-gold); color: var(--kdg-on-dark); }
.kdg-booking__notice--success .kdg-icon { color: var(--kdg-gold); flex: none; margin-top: 2px; }
.kdg-booking__notice--error { background: rgba(181,89,46,0.15); border: 1px solid var(--kdg-terracotta); color: var(--kdg-on-dark); }
.kdg-booking__notice--error .kdg-icon { color: var(--kdg-terracotta); flex: none; margin-top: 2px; }
.kdg-booking__noscript {
	font-family: var(--font-accent); font-size: 13px; color: var(--kdg-on-dark-soft);
	padding: var(--space-4); border: 1px dashed var(--kdg-line-light); border-radius: 10px;
	margin-bottom: var(--space-8);
}

/* Progress bar */
.kdg-progress {
	list-style: none; display: flex; margin: 0 0 var(--space-16); padding: 0;
	counter-reset: none;
}
.kdg-progress__item {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
	position: relative; text-align: center;
}
.kdg-progress__item::before {
	content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 1px;
	background: var(--kdg-line-light); z-index: 0;
}
.kdg-progress__item:first-child::before { display: none; }
.kdg-progress__num {
	position: relative; z-index: 1;
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-accent); font-size: 13px;
	background: transparent; border: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark-soft);
	transition: background 0.25s var(--kdg-ease), border-color 0.25s var(--kdg-ease), color 0.25s var(--kdg-ease);
}
.kdg-progress__label {
	font-family: var(--font-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--kdg-on-dark-soft);
}
.kdg-progress__item.is-active .kdg-progress__num { background: var(--kdg-terracotta); border-color: var(--kdg-terracotta); color: #fff; }
.kdg-progress__item.is-active .kdg-progress__label { color: var(--kdg-on-dark); }
.kdg-progress__item.is-done .kdg-progress__num { background: var(--kdg-clay); border-color: var(--kdg-clay); color: #fff; }
.kdg-progress__item.is-done::before { background: var(--kdg-clay); }

@media (max-width: 640px) {
	.kdg-progress__label { display: none; }
}

/* Steps */
.kdg-booking-step { padding-bottom: var(--space-8); }
.kdg-booking-step.is-hidden { display: none; }
.kdg-booking-step__title { font-size: clamp(26px, 4vw, 36px); margin-bottom: var(--space-2); }
.kdg-booking-step__hint { color: var(--kdg-on-dark-soft); margin: 0 0 var(--space-8); max-width: 56ch; }

/* Card grid (trip picker + add-on picker) — same glass-over-photo
   treatment as every other card on the site, not a plain white block. */
.kdg-booking-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4); margin-bottom: var(--space-8);
}
.kdg-booking-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--kdg-line-light); border-radius: 16px; cursor: pointer;
	transition: border-color 0.2s var(--kdg-ease), box-shadow 0.2s var(--kdg-ease);
	background: var(--kdg-glass-bg);
	backdrop-filter: var(--kdg-glass-blur);
	-webkit-backdrop-filter: var(--kdg-glass-blur);
}
.kdg-booking-card input { position: absolute; opacity: 0; pointer-events: none; }
.kdg-booking-card__img { display: block; height: 110px; width: 100%; object-fit: cover; }
.kdg-booking-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); }
.kdg-booking-card__name { font-family: var(--font-display); font-size: 17px; color: var(--kdg-on-dark); }
.kdg-booking-card__meta { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.kdg-booking-card:hover { border-color: var(--kdg-clay); }
.kdg-booking-card.is-checked,
.kdg-booking-card:has(input:checked) { border-color: var(--kdg-terracotta); box-shadow: 0 0 0 2px rgba(181,89,46,0.25); }
.kdg-booking-card:has(input:focus-visible) { outline: 2px solid var(--kdg-terracotta); outline-offset: 2px; }

/* Fields — kept light regardless of the page's dark theme. Form inputs
   reading as "light = a place to type" is a near-universal convention,
   including on dark-themed sites; forcing dark-on-dark inputs here
   would hurt usability more than it would help visual consistency. */
.kdg-booking-field { margin-bottom: var(--space-6); max-width: 480px; }
.kdg-booking-field label,
.kdg-booking-field legend {
	display: block; font-family: var(--font-accent); font-size: 12px; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--kdg-on-dark-soft); margin-bottom: var(--space-2);
}
.kdg-booking-field input[type="text"],
.kdg-booking-field input[type="email"],
.kdg-booking-field input[type="tel"],
.kdg-booking-field input[type="date"],
.kdg-booking-field input[type="number"],
.kdg-booking-field textarea {
	width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 15px;
	border: 1px solid var(--kdg-line-light); border-radius: 10px; background: var(--kdg-cream); color: var(--kdg-ink);
	transition: border-color 0.2s var(--kdg-ease);
}
.kdg-booking-field input:focus,
.kdg-booking-field textarea:focus { outline: none; border-color: var(--kdg-terracotta); }
.kdg-booking-field textarea { resize: vertical; }
.kdg-booking-field-row { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.kdg-booking-field-row .kdg-booking-field { flex: 1; min-width: 220px; }
.kdg-booking-radio-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.kdg-booking-radio-row label { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--kdg-on-dark); }

.kdg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--kdg-line-light); border-radius: 10px; overflow: hidden; }
.kdg-stepper__btn {
	width: 40px; height: 44px; border: none; background: var(--kdg-cream-dim); color: var(--kdg-ink);
	font-size: 18px; cursor: pointer; transition: background 0.2s var(--kdg-ease);
}
.kdg-stepper__btn:hover { background: var(--kdg-clay); color: #fff; }
.kdg-stepper input[type="number"] {
	width: 56px; text-align: center; border: none; border-left: 1px solid var(--kdg-line-light); border-right: 1px solid var(--kdg-line-light);
	border-radius: 0; -moz-appearance: textfield; background: var(--kdg-cream); color: var(--kdg-ink);
}
.kdg-stepper input[type="number"]::-webkit-inner-spin-button,
.kdg-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.kdg-booking-error { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-terracotta); margin: var(--space-2) 0 0; }
.kdg-booking-error--general { margin-top: var(--space-4); }

.kdg-booking-summary { padding: var(--space-6); margin: var(--space-6) 0; max-width: 480px; }
.kdg-booking-summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
.kdg-booking-summary dt { font-family: var(--font-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kdg-on-dark-soft); }
.kdg-booking-summary dd { margin: 0; color: var(--kdg-on-dark); }

.kdg-booking-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--kdg-line-light); }

@media (max-width: 640px) {
	.kdg-booking-grid { grid-template-columns: 1fr 1fr; }
	.kdg-booking-nav { flex-direction: column-reverse; align-items: stretch; }
	.kdg-booking-nav .kdg-btn { justify-content: center; }
}

/* Booking Engine — upgrades (resume banner, mobile money, deposit) */
.kdg-booking__notice--resume {
	background: rgba(74,111,94,0.15); border: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark);
}
.kdg-booking__resume-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.kdg-booking__mobile-money {
	margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark-soft);
}
.kdg-booking__mobile-money p { white-space: pre-line; }
.cf-turnstile { margin: var(--space-4) 0; }

/* ════════════════════════════════════════════════════════
   EXPEDITIONS ARCHIVE — hero, how-it-works, featured grid +
   filters, tailor-made, trust bar, help block
   (archive-kdg_itinerary.php + template-parts/expeditions-*.php)
════════════════════════════════════════════════════════ */

/* ---- Hero + quick-steps strip ---- */
.kdg-eh { position: relative; min-height: 78vh; min-height: 78dvh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--kdg-on-dark); overflow: hidden; background: var(--kdg-ink); }
.kdg-eh__media {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.04);
}
.kdg-eh__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.3) 45%, rgba(20,15,10,0.92) 100%);
}
.kdg-eh__frame { position: relative; padding-top: 150px; padding-bottom: var(--space-14); }
/* .kdg-eh__topbar/__mark/__back removed — Expeditions now uses the same
   .kdg-dh__breadcrumb as Destinations/Travel Guide instead of its own
   redundant mini logo+back-link row (a leftover from when this hero's
   top padding was too tight to clear the fixed nav at all). */
.kdg-eh__topline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.kdg-eh__title { font-size: clamp(38px, 6vw, 68px); max-width: 16ch; margin-bottom: var(--space-4); }
.kdg-eh__subtext { max-width: 46ch; font-size: 17px; color: var(--kdg-on-dark-soft); margin-bottom: var(--space-6); }
.kdg-eh__rating {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(24,18,12,0.5); border: 1px solid var(--kdg-line-light);
	padding: 10px 16px; border-radius: 999px; backdrop-filter: blur(6px);
}
.kdg-eh__rating-stars { color: var(--kdg-clay); display: flex; }
.kdg-eh__rating-score { font-family: var(--font-display); font-size: 16px; }
.kdg-eh__rating-note { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); border-left: 1px solid var(--kdg-line-light); padding-left: 8px; }

.kdg-eh__steps {
	position: relative;
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--kdg-line-light);
	padding-top: var(--space-6); padding-bottom: var(--space-6);
}
.kdg-eh__step { display: flex; align-items: flex-start; gap: var(--space-3); }
.kdg-eh__step-icon {
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--kdg-line-light); color: var(--kdg-clay);
}
.kdg-eh__step-num { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-terracotta); flex: none; margin-top: 6px; }
.kdg-eh__step-body { display: flex; flex-direction: column; gap: 2px; }
.kdg-eh__step-body b { font-family: var(--font-display); font-size: 16px; }
.kdg-eh__step-body span { font-size: 13px; color: var(--kdg-on-dark-soft); }

@media (max-width: 860px) {
	.kdg-eh__frame { padding-top: 120px; }
	.kdg-eh__steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
}

/* ---- How It Works ---- */
.kdg-hiw { background: var(--kdg-ink); color: var(--kdg-on-dark); padding: var(--space-24) 0; }
.kdg-hiw__title { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--space-10); }
.kdg-hiw__grid { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.kdg-hiw__card { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: var(--space-3); }
.kdg-hiw__icon {
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--kdg-line-light); color: var(--kdg-terracotta);
}
.kdg-hiw__card b { font-family: var(--font-display); font-size: 19px; }
.kdg-hiw__card p { font-size: 14px; color: var(--kdg-on-dark-soft); max-width: 26ch; }
.kdg-hiw__chevron { color: var(--kdg-line-light); margin-top: 12px; flex: none; }
@media (max-width: 860px) { .kdg-hiw__chevron { display: none; } .kdg-hiw__grid { flex-direction: column; } }

/* ---- Featured Expeditions grid ---- */
.kdg-ef { padding-top: var(--space-24); color: var(--kdg-on-dark); }
.kdg-ef__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-8); }
.kdg-ef__title { font-size: clamp(28px, 4vw, 40px); color: var(--kdg-on-dark); }
.kdg-ef__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.kdg-ef__empty { text-align: center; padding: var(--space-16) 0; color: var(--kdg-on-dark-soft); }


/* ---- Filter/sort bar ---- */
.kdg-ef-filters { background: var(--kdg-ink); margin-top: var(--space-16); padding: var(--space-5) 0; }
.kdg-ef-filters__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.kdg-ef-filters__group { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.kdg-ef-select {
	appearance: none; background: rgba(255,255,255,0.06); color: var(--kdg-on-dark);
	border: 1px solid var(--kdg-line-light); border-radius: 999px;
	font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.03em;
	padding: 9px 30px 9px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F5F0E6' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.kdg-ef-filters__sort { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); }
.kdg-ef-filters__sort .kdg-ef-select { color: var(--kdg-on-dark); }

/* ---- Tailor-Made ---- */
/* Section itself floats over the universal ambient background; the
   .kdg-tm__grid card keeps its own tan #EFE6D6 backing (an intentional
   floating accent card, same idea as the dark cards used elsewhere —
   just a lighter one here), so its own ink-colored text stays correct. */
.kdg-tm { padding: var(--space-24) 0; }
.kdg-tm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; background: #EFE6D6; border-radius: 24px; overflow: hidden; }
.kdg-tm__photo { position: relative; height: 100%; min-height: 340px; }
.kdg-tm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kdg-tm__content { padding: var(--space-10) var(--space-10) var(--space-10) 0; }
.kdg-tm__title { font-size: clamp(26px, 3.6vw, 36px); margin: var(--space-3) 0; }
.kdg-tm__content > p { color: var(--kdg-ink-soft); max-width: 40ch; margin-bottom: var(--space-5); }
.kdg-tm__list { list-style: none; margin: 0 0 var(--space-7); padding: 0; display: grid; gap: var(--space-3); }
.kdg-tm__list li { display: flex; align-items: center; gap: var(--space-3); color: var(--kdg-ink); }
.kdg-tm__list svg { color: var(--kdg-terracotta); flex: none; }
@media (max-width: 860px) {
	.kdg-tm__grid { grid-template-columns: 1fr; }
	.kdg-tm__content { padding: var(--space-8); }
	.kdg-tm__photo { min-height: 240px; }
}

/* ---- Trust bar ---- */
.kdg-tb { background: var(--kdg-ink); color: var(--kdg-on-dark); padding: var(--space-14) 0; }
.kdg-tb__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.kdg-tb__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.kdg-tb__icon { color: var(--kdg-terracotta); flex: none; margin-top: 2px; }
.kdg-tb__body { display: flex; flex-direction: column; gap: 3px; }
.kdg-tb__body b { font-family: var(--font-display); font-size: 15px; }
.kdg-tb__body span { font-size: 12.5px; color: var(--kdg-on-dark-soft); }
@media (max-width: 860px) { .kdg-tb__row { grid-template-columns: repeat(2, 1fr); } }

/* ---- Need Help Choosing ---- */
.kdg-help { background: var(--kdg-ink); color: var(--kdg-on-dark); padding: var(--space-24) 0; }
.kdg-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); align-items: center; }
.kdg-help__title { font-size: clamp(28px, 4vw, 38px); margin-bottom: var(--space-2); }
.kdg-help__content > p { color: var(--kdg-on-dark-soft); margin-bottom: var(--space-8); }
.kdg-help__cards { display: flex; flex-direction: column; gap: var(--space-3); }
.kdg-help__card {
	display: flex; align-items: center; gap: var(--space-4);
	border: 1px solid var(--kdg-line-light); border-radius: 14px; padding: var(--space-4);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.kdg-help__card:hover { border-color: var(--kdg-terracotta); background: rgba(255,255,255,0.03); }
.kdg-help__card-icon {
	width: 42px; height: 42px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--kdg-line-light); color: var(--kdg-terracotta);
}
.kdg-help__card-icon--whatsapp { color: #25D366; border-color: rgba(37,211,102,0.4); }
.kdg-help__card b { display: block; font-family: var(--font-display); font-size: 15px; }
.kdg-help__card span:not(.kdg-help__card-icon) { display: block; font-size: 13px; color: var(--kdg-on-dark-soft); }

.kdg-help__photo { position: relative; border-radius: 20px; overflow: hidden; min-height: 320px; }
.kdg-help__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kdg-help__bubble {
	position: absolute; bottom: var(--space-5); right: var(--space-5); left: var(--space-5);
	max-width: 260px; margin-left: auto;
	background: rgba(24,18,12,0.85); backdrop-filter: blur(8px);
	border: 1px solid var(--kdg-line-light); border-radius: 14px; padding: var(--space-4);
	display: flex; flex-direction: column; gap: 4px;
}
.kdg-help__bubble b { font-family: var(--font-display); font-size: 14px; }
.kdg-help__bubble span { font-size: 12.5px; color: var(--kdg-on-dark-soft); }
.kdg-help__bubble-foot { padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--kdg-line-light); }

@media (max-width: 860px) {
	.kdg-help__grid { grid-template-columns: 1fr; }
	.kdg-help__photo { min-height: 240px; }
}

/* ════════════════════════════════════════════════════════
   ABOUT PAGE (page-about.php)
════════════════════════════════════════════════════════ */
.kdg-about {
	display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-16);
	padding-top: var(--space-16); padding-bottom: var(--space-20);
	color: var(--kdg-on-dark); /* floats over the universal ambient background */
}
.kdg-about__headline { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: var(--space-5); }
.kdg-about__intro p { font-size: 16px; line-height: 1.7; color: var(--kdg-on-dark-soft); margin: 0 0 var(--space-4); max-width: 56ch; }
.kdg-about__editor-content { margin-top: var(--space-6); font-size: 16px; line-height: 1.7; color: var(--kdg-on-dark-soft); }
.kdg-about__pillars { display: flex; flex-direction: column; gap: var(--space-6); align-self: start; }
.kdg-about__pillar {
	display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
	border: 1px solid var(--kdg-line-light); border-radius: 14px;
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
}
.kdg-about__pillar-icon {
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(181,89,46,0.15); color: var(--kdg-terracotta);
}
.kdg-about__pillar b { font-family: var(--font-display); font-size: 17px; color: var(--kdg-on-dark); }
.kdg-about__pillar p { margin: 0; font-size: 14px; color: var(--kdg-on-dark-soft); }

@media (max-width: 860px) {
	.kdg-about { grid-template-columns: 1fr; }
}

/* About page closing pull-quote — the brand-story bookend statement */
/* Mission statement — floats over the universal background like
   everything else; the pill/tag treatments already established
   elsewhere on the site (filter pills, badges) reused here rather
   than inventing a new visual language for one section. */
.kdg-mission { padding: var(--space-16) 0; }
.kdg-mission__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.kdg-mission__text {
	font-family: var(--font-display); font-style: italic;
	font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5;
	color: var(--kdg-on-dark); margin: var(--space-3) 0 var(--space-8);
}
.kdg-mission__services { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-10); }
.kdg-mission__service {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: 999px; border: 1px solid var(--kdg-line-light);
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
	font-family: var(--font-accent); font-size: 13px; color: var(--kdg-on-dark);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.kdg-mission__service:hover { border-color: var(--kdg-terracotta); color: var(--kdg-clay); }
.kdg-mission__service svg { color: var(--kdg-terracotta); }
.kdg-mission__styles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); }
.kdg-mission__styles-label { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); width: 100%; margin-bottom: var(--space-1); }
.kdg-mission__style-tag {
	font-family: var(--font-accent); font-size: 11.5px; color: var(--kdg-on-dark-soft);
	padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kdg-line-light);
}

.kdg-about-closing { background: var(--kdg-ink); padding: var(--space-20) 0; }
.kdg-about-closing__inner { max-width: 46ch; margin: 0 auto; text-align: center; }
.kdg-about-closing__mark {
	display: block; font-family: var(--font-display); font-size: 56px; line-height: 1;
	color: var(--kdg-terracotta); margin-bottom: var(--space-2);
}
.kdg-about-closing p {
	font-family: var(--font-display); font-style: italic;
	font-size: clamp(19px, 2.6vw, 25px); line-height: 1.5;
	color: var(--kdg-on-dark);
}

/* ════════════════════════════════════════════════════════
   TRAVEL INFO PAGE (page-travel-info.php)
════════════════════════════════════════════════════════ */
.kdg-ti { padding-top: var(--space-16); padding-bottom: var(--space-16); color: var(--kdg-on-dark); }
.kdg-ti__head { margin-bottom: var(--space-8); }
.kdg-ti__head h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: var(--space-2); }
.kdg-ti__head p { color: var(--kdg-on-dark-soft); }
.kdg-ti__row {
	display: flex; gap: var(--space-6); padding: var(--space-8) 0;
	border-bottom: 1px solid var(--kdg-line-light);
}
.kdg-ti__row:first-child { padding-top: 0; }
.kdg-ti__icon {
	width: 52px; height: 52px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: rgba(181,89,46,0.15); color: var(--kdg-terracotta);
}
.kdg-ti__body h2, .kdg-ti__body h3 { font-size: 21px; margin-bottom: var(--space-2); }
.kdg-ti__body p { color: var(--kdg-on-dark-soft); line-height: 1.7; max-width: 62ch; }
.kdg-ti__disclaimer { margin-top: var(--space-8); font-size: 13px; color: var(--kdg-on-dark-soft); line-height: 1.6; max-width: 70ch; }
@media (max-width: 640px) { .kdg-ti__row { flex-direction: column; gap: var(--space-3); } }

/* ════════════════════════════════════════════════════════
   GUEST STORIES PAGE (page-guest-stories.php)
════════════════════════════════════════════════════════ */
.kdg-gs { padding-top: var(--space-20); padding-bottom: var(--space-8); color: var(--kdg-on-dark); }
.kdg-gs__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.kdg-gs__quote {
	display: flex; flex-direction: column; gap: var(--space-4);
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
	border: 1px solid var(--kdg-line-light); border-radius: 16px; padding: var(--space-8);
}
.kdg-gs__quote-mark { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--kdg-terracotta); }
.kdg-gs__quote p { font-size: 16px; line-height: 1.6; color: var(--kdg-on-dark); flex: 1; }
.kdg-gs__quote-author { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-4); border-top: 1px solid var(--kdg-line-light); }
.kdg-gs__quote-author b { font-family: var(--font-display); font-size: 15px; }
.kdg-gs__quote-author span { font-size: 12.5px; color: var(--kdg-on-dark-soft); }
@media (max-width: 900px) { .kdg-gs__quotes { grid-template-columns: 1fr; } }

.kdg-gs-reviews { background: var(--kdg-ink); color: var(--kdg-on-dark); padding: var(--space-20) 0; }
.kdg-gs-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.kdg-gs-reviews__card {
	display: flex; flex-direction: column; gap: var(--space-3);
	background: rgba(255,255,255,0.04); border: 1px solid var(--kdg-line-light); border-radius: 14px; padding: var(--space-6);
}
.kdg-gs-reviews__img { display: block; height: 90px; width: 100%; border-radius: 10px; object-fit: cover; }
.kdg-gs-reviews__stars { display: flex; gap: 2px; color: var(--kdg-clay); }
.kdg-gs-reviews__card p { font-size: 14px; line-height: 1.6; color: var(--kdg-on-dark); flex: 1; }
.kdg-gs-reviews__author { font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); }

.kdg-gs-cta { padding-bottom: var(--space-24); color: var(--kdg-on-dark); }
.kdg-gs-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.kdg-gs-cta__inner h2 { font-size: clamp(24px, 3.4vw, 32px); }

/* ════════════════════════════════════════════════════════
   CATEGORY LANDING PAGES (Safari Expeditions / Mountain Treks /
   Zanzibar Experiences) — template-parts/category-landing.php
════════════════════════════════════════════════════════ */
.kdg-cl { position: relative; min-height: 78vh; min-height: 78dvh; display: flex; align-items: flex-end; color: var(--kdg-on-dark); overflow: hidden; background: var(--kdg-ink); }
.kdg-cl__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.kdg-cl__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(20,15,10,0.92) 0%, rgba(20,15,10,0.45) 45%, rgba(20,15,10,0.2) 75%);
}
.kdg-cl__frame { position: relative; padding-bottom: var(--space-16); padding-top: 150px; }
.kdg-cl__topline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.kdg-cl__title { font-size: clamp(38px, 6.5vw, 72px); max-width: 16ch; }
.kdg-cl__subtitle { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: var(--kdg-clay); margin: var(--space-3) 0 var(--space-6); }
.kdg-cl__bullets { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.kdg-cl__bullets li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kdg-on-dark); }
.kdg-cl__bullets svg { color: var(--kdg-terracotta); flex: none; }

@media (max-width: 700px) {
	.kdg-cl { min-height: 90vh; min-height: 90dvh; }
	.kdg-cl__frame { padding-top: 120px; }
	.kdg-cl__bullets { flex-direction: column; gap: var(--space-3); }
}

/* Browse-by-category strip (template-parts/expeditions-categories.php) */
.kdg-cats { background: var(--kdg-ink); padding: var(--space-4) 0 var(--space-20); }
.kdg-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kdg-cats__card {
	position: relative; display: block; height: 220px; border-radius: 16px; overflow: hidden;
	color: var(--kdg-on-dark); min-width: 0;
}
.kdg-cats__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.kdg-cats__card:hover .kdg-cats__img { transform: scale(1.06); }
.kdg-cats__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,10,0.9) 0%, rgba(20,15,10,0.15) 65%); }
.kdg-cats__body { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.kdg-cats__body b { font-family: var(--font-display); font-size: 21px; }
.kdg-cats__body span { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--kdg-on-dark-soft); }

@media (max-width: 860px) { .kdg-cats__grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   DESTINATIONS ARCHIVE — hero w/ breadcrumb+search, filter
   pills, card grid, not-sure CTA, popular regions, trust bar
   (archive-kdg_destination.php + template-parts/destinations-*.php)
════════════════════════════════════════════════════════ */

/* ---- Hero additions (breadcrumb + search), layered onto .kdg-eh ---- */
.kdg-dh__breadcrumb {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-on-dark-soft);
	margin-bottom: var(--space-6);
}
.kdg-dh__breadcrumb a { color: var(--kdg-on-dark-soft); transition: color 0.2s ease; }
.kdg-dh__breadcrumb a:hover { color: var(--kdg-on-dark); }
.kdg-dh__search {
	display: flex; align-items: center; gap: 10px;
	max-width: 480px; margin-top: var(--space-6);
	background: rgba(24,18,12,0.5); border: 1px solid var(--kdg-line-light);
	border-radius: 12px; padding: 13px 16px; backdrop-filter: blur(6px);
}
.kdg-dh__search svg { color: var(--kdg-on-dark-soft); flex: none; }
.kdg-dh__search input {
	background: none; border: none; outline: none; width: 100%;
	color: var(--kdg-on-dark); font-family: var(--font-body); font-size: 14.5px;
}
.kdg-dh__search input::placeholder { color: var(--kdg-on-dark-soft); }
.kdg-dh__stats { border-top: none; padding-top: 0; margin-top: var(--space-8); }

/* ---- Filter pills + card grid ---- */
.kdg-dg { padding-top: var(--space-14); padding-bottom: var(--space-4); color: var(--kdg-on-dark); }
.kdg-dg__filters { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.kdg-dg__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kdg-dg__pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px; border: 1px solid var(--kdg-line-light);
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
	font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-on-dark-soft);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kdg-dg__pill:hover { border-color: var(--kdg-clay); }
.kdg-dg__pill.is-active { background: var(--kdg-terracotta); border-color: var(--kdg-terracotta); color: #fff; }
.kdg-dg__map-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.kdg-dg__empty { text-align: center; padding: var(--space-16) 0; color: var(--kdg-on-dark-soft); }

@media (max-width: 640px) {
	.kdg-dg__filters { flex-direction: column; align-items: stretch; }
}

/* ---- Not sure where to go? ---- */
/* Section itself floats over the universal ambient background — the
   .kdg-ns__panel below already has its own solid --kdg-ink backing. */
.kdg-ns { padding: var(--space-16) 0; }
.kdg-ns__panel {
	display: grid; grid-template-columns: 280px 1.3fr auto; gap: var(--space-8); align-items: center;
	background: var(--kdg-ink); border-radius: 20px; overflow: hidden; padding: var(--space-6);
}
.kdg-ns__photo { position: relative; height: 100%; min-height: 200px; border-radius: 14px; overflow: hidden; }
.kdg-ns__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kdg-ns__content h2 { color: var(--kdg-on-dark); font-size: clamp(22px, 3vw, 28px); margin-bottom: var(--space-2); }
.kdg-ns__content > p { color: var(--kdg-on-dark-soft); font-size: 14.5px; margin-bottom: var(--space-4); max-width: 46ch; }
.kdg-ns__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kdg-ns__list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--kdg-on-dark); }
.kdg-ns__list svg { color: var(--kdg-terracotta); flex: none; }
.kdg-ns__action { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.kdg-ns__rating { display: flex; align-items: center; gap: 6px; font-family: var(--font-accent); font-size: 12px; color: var(--kdg-on-dark-soft); white-space: nowrap; }
.kdg-ns__rating-score { font-family: var(--font-display); font-size: 15px; color: var(--kdg-on-dark); }
.kdg-ns__rating-stars { color: var(--kdg-clay); display: flex; }

@media (max-width: 900px) {
	.kdg-ns__panel { grid-template-columns: 1fr; }
	.kdg-ns__photo { min-height: 160px; }
	.kdg-ns__action { align-items: flex-start; }
}

/* ---- Popular Regions + Travel Guide ---- */
/* Individual .kdg-pr-card / .kdg-pr__guide tiles below already carry
   their own solid --kdg-ink backing, so the section wrapper only needs
   the on-dark heading color, not a background of its own. */
.kdg-pr { padding-bottom: var(--space-20); }
.kdg-pr__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: start; }
.kdg-pr__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-5); }
.kdg-pr__head h2 { font-size: clamp(22px, 3vw, 28px); color: var(--kdg-on-dark); }
.kdg-pr__all { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-terracotta); }
.kdg-pr__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.kdg-pr-card { min-width: 0; position: relative; height: 140px; border-radius: 14px; overflow: hidden; background: var(--kdg-ink); }
.kdg-pr-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kdg-pr-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,10,0.85) 0%, rgba(20,15,10,0.1) 70%); }
.kdg-pr-card__body { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); display: flex; flex-direction: column; gap: 2px; color: var(--kdg-on-dark); }
.kdg-pr-card__body b { font-family: var(--font-display); font-size: 15px; }
.kdg-pr-card__body span { font-family: var(--font-accent); font-size: 11.5px; color: var(--kdg-on-dark-soft); }

.kdg-pr__guide {
	position: relative; display: block; min-height: 260px; border-radius: 16px; overflow: hidden; color: var(--kdg-on-dark);
	background: var(--kdg-ink);
}
.kdg-pr__guide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; }
.kdg-pr__guide-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,10,0.95) 10%, rgba(20,15,10,0.4) 80%); }
.kdg-pr__guide-body { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: 4px; }
.kdg-pr__guide-body b { font-family: var(--font-display); font-size: 21px; }
.kdg-pr__guide-body > span:not(.kdg-pr__guide-link) { font-size: 13px; color: var(--kdg-on-dark-soft); max-width: 24ch; }
.kdg-pr__guide-link { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-2); font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-clay); }

@media (max-width: 900px) {
	.kdg-pr__grid { grid-template-columns: 1fr; }
	.kdg-pr__list { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════
   TRAVEL GUIDE PAGE — hero, topics, guides, map, 3-col,
   stats (shared .kdg-tb), bottom CTA
   (page-travel-info.php + template-parts/travel-guide-*.php)
════════════════════════════════════════════════════════ */

/* ---- Hero additions ---- */
.kdg-tgh__title span { display: block; color: var(--kdg-clay); }
.kdg-tgh__search { max-width: 480px; }
.kdg-tgh__search button {
	flex: none; width: 34px; height: 34px; border-radius: 8px;
	background: var(--kdg-terracotta); color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin: -6px -6px -6px 0;
}
.kdg-tgh__badge {
	position: absolute; top: 130px; right: var(--space-6);
	background: rgba(24,18,12,0.55); border: 1px solid var(--kdg-line-light);
	border-radius: 14px; padding: var(--space-4) var(--space-5);
	backdrop-filter: blur(8px); display: none;
}
.kdg-tgh__badge-score { display: flex; align-items: baseline; gap: 6px; margin: var(--space-2) 0; }
.kdg-tgh__badge-score b { font-family: var(--font-display); font-size: 22px; color: var(--kdg-on-dark); }
.kdg-tgh__badge-stars { color: var(--kdg-clay); }
.kdg-tgh__badge-note { font-family: var(--font-accent); font-size: 11.5px; color: var(--kdg-on-dark-soft); }
@media (min-width: 1100px) { .kdg-tgh__badge { display: block; } }

/* ---- Topic shortcuts row ---- */
.kdg-tt { background: var(--kdg-ink); border-bottom: 1px solid var(--kdg-line-light); padding: var(--space-6) 0; }
.kdg-tt__row { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.kdg-tt__item {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	flex: 1; min-width: 90px; text-align: center;
	color: var(--kdg-on-dark-soft); font-family: var(--font-accent); font-size: 12px;
	transition: color 0.2s ease;
}
.kdg-tt__item:hover { color: var(--kdg-on-dark); }
.kdg-tt__icon {
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--kdg-line-light); color: var(--kdg-terracotta);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.kdg-tt__item:hover .kdg-tt__icon { border-color: var(--kdg-terracotta); background: rgba(181,89,46,0.1); }

/* ---- Meet Our Local Guides ---- */
.kdg-tgg { padding: var(--space-16) 0; color: var(--kdg-on-dark); }
.kdg-tgg__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-6); }
.kdg-tgg__head h2 { font-size: clamp(24px, 3.4vw, 32px); }
.kdg-tgg__all { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-terracotta); white-space: nowrap; }

/* ---- Explore Tanzania map section ---- */
.kdg-tmap { background: var(--kdg-ink); color: var(--kdg-on-dark); padding: var(--space-20) 0; }
.kdg-tmap__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-10); align-items: center; }
.kdg-tmap__content h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: var(--space-6); }
.kdg-tmap__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.kdg-tmap__list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.kdg-tmap__list-icon { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--kdg-line-light); color: var(--kdg-terracotta); }
.kdg-tmap__list li b { display: block; font-family: var(--font-display); font-size: 15px; }
.kdg-tmap__list li > span > span { display: block; font-size: 12.5px; color: var(--kdg-on-dark-soft); margin-top: 1px; }
.kdg-tmap__searches { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); font-size: 12.5px; color: var(--kdg-on-dark-soft); }
.kdg-tmap__searches a { padding: 5px 12px; border: 1px solid var(--kdg-line-light); border-radius: 999px; color: var(--kdg-on-dark); transition: border-color 0.2s ease; }
.kdg-tmap__searches a:hover { border-color: var(--kdg-terracotta); }

.kdg-tmap__map { position: relative; min-height: 420px; border-radius: 20px; overflow: hidden; background: #0d1a1f; }
.kdg-tmap__map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.6; }
.kdg-tmap__map-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(20,40,45,0.1), rgba(10,18,20,0.75)); }
.kdg-tmap__map-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.2em; color: rgba(245,240,230,0.5); }
.kdg-tmap__pin {
	position: absolute; display: flex; align-items: center; gap: 6px;
	background: rgba(24,18,12,0.8); border: 1px solid var(--kdg-line-light); border-radius: 10px;
	padding: 8px 12px; color: var(--kdg-on-dark); backdrop-filter: blur(4px);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.kdg-tmap__pin:hover { border-color: var(--kdg-terracotta); transform: translateY(-2px); }
.kdg-tmap__pin svg { color: var(--kdg-terracotta); flex: none; }
.kdg-tmap__pin b { display: block; font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.03em; }
.kdg-tmap__pin span span { display: block; font-size: 10.5px; color: var(--kdg-on-dark-soft); }
.kdg-tmap__pin-1 { top: 22%; left: 8%; }
.kdg-tmap__pin-2 { top: 12%; right: 12%; }
.kdg-tmap__pin-3 { bottom: 20%; left: 18%; }
.kdg-tmap__pin-4 { bottom: 15%; left: 45%; }
.kdg-tmap__pin-5 { top: 45%; right: 6%; }

@media (max-width: 960px) {
	.kdg-tmap__grid { grid-template-columns: 1fr; }
	.kdg-tmap__map { min-height: 320px; }
	.kdg-tmap__pin { position: static; margin: var(--space-2); display: inline-flex; }
}

/* ---- 3-column: Guide Types / Plan Smarter / Traveler Stories ---- */
/* Individual .kdg-gtc-card tiles already carry their own solid
   --kdg-ink backing, so the section wrapper needs no background. */
.kdg-gtc { padding: var(--space-20) 0; }
.kdg-gtc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kdg-gtc-card { min-width: 0; position: relative; min-height: 340px; border-radius: 18px; overflow: hidden; color: var(--kdg-on-dark); background: var(--kdg-ink); }
.kdg-gtc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.4; }
.kdg-gtc-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.92) 60%); }
.kdg-gtc-card__body { position: relative; padding: var(--space-6); display: flex; flex-direction: column; height: 100%; }
.kdg-gtc-card__body h3 { font-size: 21px; margin: var(--space-2) 0 var(--space-4); }
.kdg-gtc-card__body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.kdg-gtc-card__body ul li { display: flex; align-items: flex-start; gap: 10px; }
.kdg-gtc-card__body ul svg { color: var(--kdg-terracotta); flex: none; margin-top: 2px; }
.kdg-gtc-card__body ul li b { display: block; font-family: var(--font-display); font-size: 14.5px; }
.kdg-gtc-card__body ul li span span { display: block; font-size: 12px; color: var(--kdg-on-dark-soft); }
.kdg-gtc-card__body .kdg-btn { margin-top: var(--space-4); align-self: flex-start; }
.kdg-gtc-card__quote { flex: 1; }
.kdg-gtc-card__quote p { font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.5; margin-bottom: var(--space-3); }
.kdg-gtc-card__stars { color: var(--kdg-clay); display: flex; margin-bottom: 6px; }
.kdg-gtc-card__author { font-size: 12.5px; color: var(--kdg-on-dark-soft); }
.kdg-gtc-card__link { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-4); font-family: var(--font-accent); font-size: 12.5px; color: var(--kdg-clay); }

@media (max-width: 900px) { .kdg-gtc__grid { grid-template-columns: 1fr; } }

/* ---- Bottom CTA row ---- */
/* Individual .kdg-bc-card tiles already carry their own solid
   --kdg-ink backing, so the section wrapper needs no background. */
.kdg-bc { padding-bottom: var(--space-20); }
.kdg-bc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.kdg-bc-card { min-width: 0; position: relative; min-height: 200px; border-radius: 18px; overflow: hidden; color: var(--kdg-on-dark); background: var(--kdg-ink); }
.kdg-bc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.5; }
.kdg-bc-card__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,10,0.9) 30%, rgba(20,15,10,0.3) 100%); }
.kdg-bc-card__body { position: relative; padding: var(--space-8); max-width: 70%; }
.kdg-bc-card__body h3 { font-size: clamp(19px, 2.4vw, 24px); margin-bottom: var(--space-2); }
.kdg-bc-card__body p { font-size: 13.5px; color: var(--kdg-on-dark-soft); margin-bottom: var(--space-5); }

@media (max-width: 860px) {
	.kdg-bc__grid { grid-template-columns: 1fr; }
	.kdg-bc-card__body { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════
   TRAVEL GUIDE TOPIC PAGES (9 pages, one per icon on the
   Travel Guide hub) — template-parts/travel-guide-topic-page.php
   + travel-guide-topic-extra.php. Body floats over the universal
   ambient background like everything else on the site.
════════════════════════════════════════════════════════ */
.kdg-tgt-body { padding: var(--space-16) 0 var(--space-8); color: var(--kdg-on-dark); }
.kdg-tgt-body__text { max-width: 68ch; }
.kdg-tgt-body__text p { font-size: 16.5px; line-height: 1.75; color: var(--kdg-on-dark-soft); margin: 0 0 var(--space-5); }

.kdg-tgt-extra { padding: var(--space-8) 0 var(--space-20); color: var(--kdg-on-dark); }
.kdg-tgt-extra__title { font-size: clamp(22px, 3vw, 28px); margin-bottom: var(--space-6); }

/* stats */
.kdg-tgt-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.kdg-tgt-stats__item {
	min-width: 0;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
	padding: var(--space-6) var(--space-3); border-radius: 14px;
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
	border: 1px solid var(--kdg-line-light);
}
.kdg-tgt-stats__icon { color: var(--kdg-terracotta); }
.kdg-tgt-stats__label { font-family: var(--font-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kdg-on-dark-soft); }
.kdg-tgt-stats__value { font-family: var(--font-display); font-size: 16px; }

/* cards */
.kdg-tgt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.kdg-tgt-card {
	min-width: 0;
	position: relative; display: flex; align-items: flex-end; height: 160px;
	border-radius: 14px; overflow: hidden; background: var(--kdg-ink);
}
.kdg-tgt-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.kdg-tgt-card:hover .kdg-tgt-card__img { transform: scale(1.06); }
.kdg-tgt-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,10,0.85) 0%, rgba(20,15,10,0.1) 70%); }
.kdg-tgt-card__label { position: relative; padding: var(--space-4); font-family: var(--font-display); font-size: 16px; color: var(--kdg-on-dark); }

/* table */
.kdg-tgt-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--kdg-line-light); }
.kdg-tgt-table { width: 100%; border-collapse: collapse; }
.kdg-tgt-table th {
	text-align: left; font-family: var(--font-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--kdg-on-dark-soft); padding: var(--space-4) var(--space-5); background: rgba(255,255,255,0.04);
	border-bottom: 1px solid var(--kdg-line-light);
}
.kdg-tgt-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--kdg-line-light); color: var(--kdg-on-dark-soft); }
.kdg-tgt-table tr:last-child td { border-bottom: none; }
.kdg-tgt-table__lead { font-family: var(--font-display); font-size: 15px; color: var(--kdg-on-dark); }

/* checklist */
.kdg-tgt-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); max-width: 640px; }
.kdg-tgt-checklist li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--kdg-on-dark); }
.kdg-tgt-checklist svg { color: var(--kdg-terracotta); flex: none; }

/* dishes */
.kdg-tgt-dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kdg-tgt-dish {
	min-width: 0;
	padding: var(--space-5); border-radius: 14px; border: 1px solid var(--kdg-line-light);
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
}
.kdg-tgt-dish b { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: var(--space-2); }
.kdg-tgt-dish p { margin: 0; font-size: 13.5px; color: var(--kdg-on-dark-soft); line-height: 1.5; }

/* questions */
.kdg-tgt-questions { list-style: none; margin: 0 0 var(--space-5); padding: 0; max-width: 480px; }
.kdg-tgt-questions li {
	display: flex; align-items: center; gap: 8px; padding: var(--space-4) 0;
	border-bottom: 1px solid var(--kdg-line-light); font-size: 15px; color: var(--kdg-on-dark);
}
.kdg-tgt-questions svg { color: var(--kdg-terracotta); flex: none; }
.kdg-tgt-questions__note { font-size: 13px; color: var(--kdg-on-dark-soft); max-width: 60ch; }
.kdg-tgt-questions__note a { color: var(--kdg-clay); }

@media (max-width: 900px) {
	.kdg-tgt-stats { grid-template-columns: repeat(2, 1fr); }
	.kdg-tgt-cards { grid-template-columns: repeat(2, 1fr); }
	.kdg-tgt-dishes { grid-template-columns: 1fr 1fr; }
	.kdg-tgt-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.kdg-tgt-cards { grid-template-columns: 1fr; }
	.kdg-tgt-dishes { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   LIVE WIDGETS — real Leaflet maps (CARTO dark tiles), live
   weather (Open-Meteo), live currency (Frankfurter.app).
   All free, keyless APIs — see assets/js/live-widgets.js.
════════════════════════════════════════════════════════ */

/* Leaflet's own popup/control chrome is styled for a light theme by
   default — restyle just enough to sit correctly on this site rather
   than looking like an unstyled foreign widget dropped on the page. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--kdg-cream); }
.leaflet-popup-content { font-family: var(--font-body); font-size: 13px; margin: 10px 14px; }
.leaflet-container { font-family: var(--font-body); background: var(--kdg-ink); }
.leaflet-control-attribution { background: rgba(20,15,10,0.7) !important; color: var(--kdg-on-dark-soft) !important; }
.leaflet-control-attribution a { color: var(--kdg-clay) !important; }
.leaflet-control-zoom a { background: var(--kdg-cream) !important; color: var(--kdg-ink) !important; }

/* Single destination page — sidebar weather + map cards */
.kdg-single__card--weather { padding: var(--space-6); }
.kdg-weather { display: flex; align-items: baseline; gap: var(--space-3); min-height: 24px; }
.kdg-weather.is-loading { color: var(--kdg-on-dark-soft); font-size: 13px; }
.kdg-weather.is-unavailable { color: var(--kdg-on-dark-soft); font-size: 12.5px; line-height: 1.5; }
.kdg-weather__temp { font-family: var(--font-display); font-size: 28px; color: var(--kdg-on-dark); }
.kdg-weather__label { font-size: 13px; color: var(--kdg-on-dark-soft); }

.kdg-single__card--map { padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--kdg-line-light); }
.kdg-dest-map { height: 220px; width: 100%; background: var(--kdg-ink); }

/* Destinations archive — toggleable map */
.kdg-dest-archive-map { height: 480px; width: 100%; border-radius: 18px; overflow: hidden; margin-bottom: var(--space-10); border: 1px solid var(--kdg-line-light); background: var(--kdg-ink); }
.kdg-dg__map-btn[aria-expanded="true"] { background: var(--kdg-terracotta); border-color: var(--kdg-terracotta); color: #fff; }

@media (max-width: 640px) {
	.kdg-dest-archive-map { height: 340px; }
}

/* Currency widget (Visa & Entry topic page) */
.kdg-currency { display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; margin-bottom: var(--space-4); }
.kdg-currency__row {
	display: flex; justify-content: space-between; align-items: center;
	padding: var(--space-4) var(--space-5); border-radius: 12px;
	background: var(--kdg-glass-bg); backdrop-filter: var(--kdg-glass-blur); -webkit-backdrop-filter: var(--kdg-glass-blur);
	border: 1px solid var(--kdg-line-light); font-family: var(--font-accent); font-size: 14px;
}
.kdg-currency__row span:first-child { color: var(--kdg-on-dark-soft); }
.kdg-currency__row span:last-child { font-family: var(--font-display); font-size: 17px; color: var(--kdg-on-dark); }
.kdg-currency__row.is-loading { color: var(--kdg-on-dark-soft); font-size: 13px; }
.kdg-currency.is-unavailable { color: var(--kdg-on-dark-soft); font-size: 13px; line-height: 1.5; }