/*
	EcoVoyager main stylesheet.

	This is the only stylesheet the theme loads. Sections do not carry
	their own style blocks. Colour and font tokens come from theme.json
	as --wp--preset--* custom properties.

	Breakpoint ladder used across the whole theme:
	1440, 1200, 1024, 768, 480, 360

	Units: rem for type and spacing (root is 16px, so 1rem = 16px).
	em is kept only where a value must track its own element's font
	size, which is letter-spacing and the H1 kerning correction.
	px is kept for hairlines, borders, outlines and shadow geometry.
*/

/* ================================================
   BASE
   ================================================ */

/* Translucent white used for body copy sitting over dark grounds.
   Not a theme.json palette entry because it carries alpha. Declared
   once here rather than per section, since the hero and the why
   choose section both use the same value. */
:root {
	--ev-soft: rgba(255, 255, 255, 0.75);

	/* Sale pill. Not theme.json palette entries because they exist only
	   to mark a discount, and every reference declared them privately
	   per section, which is how three sections ended up with three
	   slightly different golds. */
	--ev-sale-gold: #e8b84b;
	--ev-sale-dark: #1a1000;

	/* IUCN Red List categories, on the Red List's own colour scale.
	   Tokens rather than eight one-off hex values scattered through the
	   wildlife section, so a category cannot end up two different
	   colours in two places. Not theme.json palette entries: these are
	   data encoding, and nobody should be picking "Critically
	   Endangered" as a background colour in the block editor. */
	--ev-iucn-lc: #4a7c3f;
	--ev-iucn-nt: #7a9a3c;
	--ev-iucn-vu: #d9b23a;
	--ev-iucn-en: #d2721f;
	--ev-iucn-cr: #b3331f;
	--ev-iucn-ew: #6b2145;
	--ev-iucn-ex: #2b2b2b;
	--ev-iucn-dd: #5c5c5c;

	/* Seasonality ratings on the When to Go timeline. Tokens for the
	   same reason as the IUCN scale: five values used by the dots, the
	   badges and the legend, which is three places for a one-off hex to
	   drift. Peak reuses the brand rust so the best month reads as the
	   emphasis colour it already is elsewhere. */
	--ev-season-peak: #B8621B;
	--ev-season-great: #C4A046;
	--ev-season-good: #6B8F50;
	--ev-season-shoulder: #6B7D8D;
	--ev-season-off: #555560;
}

body {
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wp--preset--font-family--playfair-display);
}

/* ================================================
   THE HIDDEN ATTRIBUTE

   [hidden] is a user agent rule, display: none, and the UA origin is
   the weakest there is. Any author declaration setting display on the
   same element beats it outright, so an element carrying the hidden
   attribute renders anyway. That is not a hypothetical: it broke the
   When to Go panels the moment .evpwtg-showcase--has-image was given
   display: grid, and the same collision was waiting on six other
   elements, including both modal images and the map tooltip. That
   section and its rules went in the October 2026 redesign; the trap
   did not, which is why this is still here.

   The selector is doubled deliberately. [hidden] alone scores 0,1,0,
   which merely ties with a single class rule and leaves source order
   to decide. [hidden][hidden] scores 0,2,0 and wins against any
   single class, in any order, without !important.

   This is why no component needs its own [hidden] rule.
   ================================================ */
[hidden][hidden] {
	display: none;
}

/* ================================================
   FORM HONEYPOT
   Rendered by ecovoyager_core_form_fields() on every form.

   Positioned off screen rather than display:none. Some bots skip
   inputs that are display:none but happily fill a positioned one,
   which is the whole point of the field. It carries aria-hidden,
   tabindex -1 and autocomplete off in the markup, so no real person
   or screen reader ever reaches it.
   ================================================ */
.ecovoyager-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ================================================
   HERO: SECTION GRID
   Full width by default. No viewport-width hack.
   ================================================ */
.ecovoyager-hero-section {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 45% 55%;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
	box-sizing: border-box;
}

.ecovoyager-hero-section *,
.ecovoyager-hero-section *::before,
.ecovoyager-hero-section *::after {
	box-sizing: border-box;
}

/* ================================================
   HERO: LEFT CONTENT PANEL
   Solid dark, hides the video underneath on desktop.
   ================================================ */
.ecovoyager-hero-section .hero-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4rem 5rem 5rem;
	background: var(--wp--preset--color--bg-deep);
}

/* Eyebrow: rust, single leading rule on desktop. */
.ecovoyager-hero-section .hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 1.25rem;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.2s forwards;
}

.ecovoyager-hero-section .hero-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

/* H1, the LCP element. */
.ecovoyager-hero-section .hero-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin: 0 0 1.75rem;
}

.ecovoyager-hero-section .hero-title em {
	color: var(--wp--preset--color--rust);
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
}

/* Kerning correction for the V in EcoVoyager. Stays in em so it
   tracks the fluid clamp() size of the H1 at every viewport. */
.ecovoyager-hero-section .hero-title-kern {
	display: inline-block;
	margin-left: -0.05em;
}

.ecovoyager-hero-section .hero-rule {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1.5rem;
	opacity: 0;
	animation: heroFadeUp 0.7s ease-out 0.6s forwards;
}

.ecovoyager-hero-section .hero-subtitle {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
	max-width: 28.75rem;
	margin: 0 0 2.75rem;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.65s forwards;
}

/* ================================================
   HERO: CALLS TO ACTION
   ================================================ */
.ecovoyager-hero-section .hero-cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.8s forwards;
}

.ecovoyager-hero-section .hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	min-width: 17.5rem;
}

.ecovoyager-hero-section .hero-btn > * {
	position: relative;
	z-index: 1;
}

/* Primary: rust fill. */
.ecovoyager-hero-section .hero-btn-primary {
	background: var(--wp--preset--color--rust);
	color: #fff;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
}

.ecovoyager-hero-section .hero-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ecovoyager-hero-section .hero-btn-primary:hover::before {
	opacity: 1;
}

.ecovoyager-hero-section .hero-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.ecovoyager-hero-section .hero-btn-primary svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.ecovoyager-hero-section .hero-btn-primary:hover svg {
	transform: translateX(3px);
}

/* Secondary: ghost outline. */
.ecovoyager-hero-section .hero-btn-secondary {
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.ecovoyager-hero-section .hero-btn-secondary:hover {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.ecovoyager-hero-section .hero-btn-secondary svg {
	width: 1rem;
	height: 1rem;
	fill: rgba(255, 255, 255, 0.85);
	flex-shrink: 0;
	transition: transform 0.3s ease, fill 0.3s ease;
}

.ecovoyager-hero-section .hero-btn-secondary:hover svg {
	transform: translateX(3px);
	fill: #fff;
}

/* ================================================
   HERO: SCROLL INDICATOR
   ================================================ */
.ecovoyager-hero-section .hero-scroll {
	position: absolute;
	bottom: 2.25rem;
	left: 5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.32);
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 1.4s forwards;
}

.ecovoyager-hero-section .hero-scroll-line {
	display: block;
	width: 2.25rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
}

/* Animates transform, not left, so the pulse stays on the compositor
   thread. will-change promotes the layer before the animation starts. */
.ecovoyager-hero-section .hero-scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--rust);
	animation: heroScrollPulse 2.4s ease-in-out 2s infinite;
	will-change: transform;
}

/* ================================================
   HERO: RIGHT VIDEO PANEL
   ================================================ */
.ecovoyager-hero-section .hero-media {
	position: relative;
	background: var(--wp--preset--color--bg-deep);
	overflow: hidden;
}

.ecovoyager-hero-section .hero-media-poster,
.ecovoyager-hero-section .hero-media-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/*
 * The photograph is the frame the page paints first (ops issue 26); the
 * video sits over it, invisible until its first frame has decoded, then
 * fades in. hero.js sets is-playing on the video's playing event. With
 * JavaScript off, or reduced motion, the video never plays and the
 * photograph is the hero.
 */
.ecovoyager-hero-section .hero-media-video {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.ecovoyager-hero-section .hero-media-video.is-playing {
	opacity: 1;
}

/* Left edge horizontal fade into the content panel. */
.ecovoyager-hero-section .hero-media::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.85) 4%,
		rgba(17, 16, 16, 0.30) 12%,
		rgba(17, 16, 16, 0.06) 22%,
		transparent 35%);
	z-index: 1;
	pointer-events: none;
}

/* Soft bottom gradient. */
.ecovoyager-hero-section .hero-media::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 35%;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.50) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

/* ================================================
   HERO: KEYFRAMES
   ================================================ */
@keyframes heroFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroScrollPulse {
	0%   { transform: translateX(-100%); }
	50%  { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}

/* ================================================
   HERO: 1200 AND BELOW, SMALLER LAPTOP
   ================================================ */
@media (max-width: 1200px) {
	.ecovoyager-hero-section {
		grid-template-columns: 48% 52%;
	}

	.ecovoyager-hero-section .hero-content {
		padding: 4.5rem 3rem 4.5rem 3.5rem;
	}

	.ecovoyager-hero-section .hero-scroll {
		left: 3.5rem;
	}
}

/* ================================================
   HERO: 1024 AND BELOW, TABLET AND MOBILE
   Single column, centred. The video becomes a full bleed
   background sitting behind the content.

   Height uses 100lvh with a 100vh fallback. svh and dvh were
   both tried and rejected across three versions. Do not change.
   ================================================ */
@media (max-width: 1024px) {
	.ecovoyager-hero-section {
		display: block;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
		overflow: hidden;
	}

	.ecovoyager-hero-section .hero-media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		display: block;
		background: var(--wp--preset--color--bg-deep);
	}

	.ecovoyager-hero-section .hero-media::before {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.45) 0%,
			rgba(17, 16, 16, 0.40) 30%,
			rgba(17, 16, 16, 0.75) 65%,
			rgba(17, 16, 16, 0.95) 100%);
	}

	.ecovoyager-hero-section .hero-media::after {
		display: none;
	}

	.ecovoyager-hero-section .hero-media-poster,
	.ecovoyager-hero-section .hero-media-video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-width: 100%;
		min-height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		object-position: center center;
		display: block;
	}

	.ecovoyager-hero-section .hero-content {
		position: relative;
		z-index: 5;
		background: transparent;
		min-height: 100vh;
		min-height: 100lvh;
		padding: 6.25rem 3.5rem 5rem;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.ecovoyager-hero-section .hero-scroll {
		display: none;
	}

	/* Eyebrow switches to the gold bilateral line, text, line badge. */
	.ecovoyager-hero-section .hero-eyebrow {
		justify-content: center;
		color: var(--wp--preset--color--gold);
		font-size: 0.65rem;
		margin-bottom: 1.5rem;
	}

	.ecovoyager-hero-section .hero-eyebrow::before {
		width: 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
	}

	.ecovoyager-hero-section .hero-eyebrow::after {
		content: '';
		display: block;
		width: 1.75rem;
		height: 1.5px;
		background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
		flex-shrink: 0;
	}

	.ecovoyager-hero-section .hero-title {
		font-size: clamp(3.2rem, 8vw, 4.6rem);
		line-height: 1.05;
		margin: 0 0 1.625rem;
		text-align: center;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
	}

	.ecovoyager-hero-section .hero-rule {
		width: 3.125rem;
		margin: 0 auto 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	.ecovoyager-hero-section .hero-subtitle {
		font-size: 1.05rem;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
		max-width: 36.25rem;
		margin: 0 auto 2.5rem;
		text-align: center;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	.ecovoyager-hero-section .hero-cta {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.875rem;
		width: auto;
	}

	.ecovoyager-hero-section .hero-btn {
		min-width: 15rem;
		padding: 1rem 1.875rem;
		font-size: 0.7rem;
	}
}

/* ================================================
   HERO: 768 AND BELOW, PHONE
   ================================================ */
@media (max-width: 768px) {
	.ecovoyager-hero-section .hero-content {
		padding: 6.875rem 1.5rem 4rem;
	}

	.ecovoyager-hero-section .hero-eyebrow {
		font-size: 0.72rem;
		margin-bottom: 1.5rem;
	}

	.ecovoyager-hero-section .hero-eyebrow::before,
	.ecovoyager-hero-section .hero-eyebrow::after {
		width: 1.5rem;
	}

	.ecovoyager-hero-section .hero-title {
		font-size: clamp(3.2rem, 12.5vw, 4.6rem);
		margin-bottom: 1.5rem;
	}

	.ecovoyager-hero-section .hero-rule {
		width: 3rem;
		margin-bottom: 1.625rem;
	}

	.ecovoyager-hero-section .hero-subtitle {
		font-size: 1.15rem;
		line-height: 1.7;
		margin-bottom: 2.25rem;
		max-width: 100%;
	}

	.ecovoyager-hero-section .hero-cta {
		flex-direction: column;
		width: 100%;
		gap: 0.75rem;
	}

	.ecovoyager-hero-section .hero-btn {
		width: 100%;
		min-width: 0;
		max-width: 23.75rem;
		margin: 0 auto;
		padding: 1.0625rem 2rem;
		font-size: 0.72rem;
	}
}

/* ================================================
   HERO: 480 AND BELOW, SMALL PHONE
   ================================================ */
@media (max-width: 480px) {
	.ecovoyager-hero-section .hero-content {
		padding: 6rem 1.25rem 3.25rem;
	}

	.ecovoyager-hero-section .hero-eyebrow {
		font-size: 0.66rem;
		margin-bottom: 1.25rem;
	}

	.ecovoyager-hero-section .hero-eyebrow::before,
	.ecovoyager-hero-section .hero-eyebrow::after {
		width: 1.25rem;
	}

	.ecovoyager-hero-section .hero-title {
		font-size: clamp(2.9rem, 13vw, 3.9rem);
		margin-bottom: 1.375rem;
	}

	.ecovoyager-hero-section .hero-rule {
		width: 2.5rem;
		margin-bottom: 1.375rem;
	}

	.ecovoyager-hero-section .hero-subtitle {
		font-size: 1.08rem;
		margin-bottom: 1.875rem;
	}

	.ecovoyager-hero-section .hero-btn {
		max-width: 20rem;
		padding: 1rem 1.75rem;
	}
}

/* ================================================
   HERO: 360 AND BELOW, TINY PHONE
   ================================================ */
@media (max-width: 360px) {
	.ecovoyager-hero-section .hero-content {
		padding: 5.5rem 1rem 2.75rem;
	}

	.ecovoyager-hero-section .hero-title {
		font-size: 2.7rem;
	}

	.ecovoyager-hero-section .hero-subtitle {
		font-size: 1rem;
	}

	.ecovoyager-hero-section .hero-btn {
		max-width: 17.5rem;
		padding: 0.875rem 1.5rem;
		font-size: 0.7rem;
	}
}

/* ================================================
   HERO: FOCUS
   ================================================ */
.ecovoyager-hero-section .hero-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ================================================
   HERO: OFF SCREEN ANIMATION PAUSE
   hero.js adds .is-paused when the section leaves the viewport
   and removes it when the section returns.

   animation-play-state is not inherited and the section itself
   has no animation, so this has to reach the animated children
   and their pseudo elements directly.

   This block sits after every animation shorthand above on
   purpose: the shorthand resets animation-play-state to running,
   so an earlier pause rule would be undone. Specificity matches
   the rules it overrides, so source order alone decides.
   ================================================ */
.ecovoyager-hero-section.is-paused,
.ecovoyager-hero-section.is-paused *,
.ecovoyager-hero-section.is-paused *::before,
.ecovoyager-hero-section.is-paused *::after {
	animation-play-state: paused;
}

/* ================================================
   HERO: REDUCED MOTION
   Last block in the file. Same specificity as the rules it
   overrides, so source order alone decides. No !important needed.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
	.ecovoyager-hero-section .hero-eyebrow,
	.ecovoyager-hero-section .hero-rule,
	.ecovoyager-hero-section .hero-subtitle,
	.ecovoyager-hero-section .hero-cta,
	.ecovoyager-hero-section .hero-scroll {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.ecovoyager-hero-section .hero-scroll-line::after {
		animation: none;
		will-change: auto;
	}
}

/* ==================================================================
   WHY TRAVELERS CHOOSE
   parts/section-why-travelers.php + assets/js/why-travelers.js

   Full width by default. The 100vw plus negative margin full bleed
   hack is gone, along with the overflow-x: hidden that existed only
   to contain the overflow it caused.

   The .evpwt-js gate on <html> is set by a tiny inline snippet in
   wp_head, so reveal animations only arm when JS is available and
   content stays visible when it is not.
   ================================================================== */
.evpwt {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evpwt *,
.evpwt *::before,
.evpwt *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ---------- Header ---------- */
.evpwt-header {
	padding: 5rem 3rem 4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	max-width: 87.5rem;
	margin: 0 auto;
	text-align: left;
}

.evpwt-js .evpwt-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpwt-header.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpwt-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.evpwt-eyebrow::before {
	content: '';
	display: inline-block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpwt-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evpwt-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/* ---------- Cards container: 2x2 grid on desktop ---------- */
.evpwt-cards {
	max-width: 87.5rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-card:nth-child(2),
.evpwt-card:nth-child(4) {
	border-right: none;
}

.evpwt-js .evpwt-card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpwt-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpwt-js .evpwt-card:nth-child(1) { transition-delay: 0.05s; }
.evpwt-js .evpwt-card:nth-child(2) { transition-delay: 0.12s; }
.evpwt-js .evpwt-card:nth-child(3) { transition-delay: 0.19s; }
.evpwt-js .evpwt-card:nth-child(4) { transition-delay: 0.26s; }

/* Bottom row reverses image and body order on desktop. */
.evpwt-card:nth-child(n+3) .evpwt-card-img  { order: 2; }
.evpwt-card:nth-child(n+3) .evpwt-card-body { order: 1; }

/* ---------- Card image ---------- */
.evpwt-card-img {
	position: relative;
	overflow: hidden;
	min-height: 15rem;
}

.evpwt-card-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.72) saturate(0.85);
	transition: transform 0.8s ease, filter 0.5s ease;
}

.evpwt-card:hover .evpwt-card-img img {
	transform: scale(1.05);
	filter: brightness(0.85) saturate(0.95);
}

.evpwt-card-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.4) 0%, transparent 60%);
	pointer-events: none;
}

/* ---------- Card body ---------- */
.evpwt-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.25rem 2.5rem;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	position: relative;
}

.evpwt-card:nth-child(n+3) .evpwt-card-body {
	border-left: none;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-card-body::before {
	content: '';
	position: absolute;
	top: 2.25rem;
	bottom: 2.25rem;
	left: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--wp--preset--color--rust), transparent);
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.evpwt-card:nth-child(n+3) .evpwt-card-body::before {
	left: auto;
	right: 0;
}

.evpwt-card:hover .evpwt-card-body::before {
	opacity: 1;
}

.evpwt-card-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.625rem;
}

.evpwt-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.3rem, 1.8vw, 1.7rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 0.875rem;
}

.evpwt-card-rule {
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1rem;
}

.evpwt-card-text {
	font-size: 0.85rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.58);
	margin-bottom: 1.25rem;
	max-width: 26.25rem;
}

.evpwt-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.28);
	padding-bottom: 0.1875rem;
	width: fit-content;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evpwt-card-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.evpwt-card-link svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.evpwt-card-link:hover svg {
	transform: translate(3px, -3px);
}

/* Mobile only UI, hidden on desktop. */
.evpwt-mobile-hint,
.evpwt-mobile-nav {
	display: none;
}

/* ---------- Statement ---------- */
.evpwt-statement {
	padding: 4.5rem 3rem;
	max-width: 87.5rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 4rem;
}

.evpwt-js .evpwt-statement {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.evpwt-statement.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpwt-statement-rule {
	width: 1px;
	height: 5rem;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--rust), transparent);
	flex-shrink: 0;
}

.evpwt-statement-body {
	flex: 1;
}

.evpwt-statement-quote {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	border: 0;
	quotes: none;
}

.evpwt-statement-author {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-top: 1rem;
}

.evpwt-statement-cta {
	flex-shrink: 0;
}

.evpwt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.35);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.evpwt-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpwt-btn:hover::before { opacity: 1; }

.evpwt-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(184, 98, 27, 0.5);
}

.evpwt-btn > * {
	position: relative;
	z-index: 1;
}

.evpwt-btn svg {
	width: 0.9375rem;
	height: 0.9375rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpwt-btn:hover svg { transform: translateX(3px); }

@keyframes evpwt-arrow {
	0%, 100% { transform: translateX(0);      opacity: 0.5; }
	50%      { transform: translateX(5px);    opacity: 1; }
}

/* ---------- 1024 and below ---------- */
@media (max-width: 1024px) {
	.evpwt-header { padding: 4rem 2.5rem 3.25rem; }
	.evpwt-card-body { padding: 1.75rem 2rem; }
	.evpwt-statement { padding: 3.75rem 2.5rem; gap: 2.5rem; }
}

/* ---------- 768 and below ----------
   The 2x2 grid becomes a horizontal scroll snap track and each card
   becomes a vertical flex column. */
@media (max-width: 768px) {
	.evpwt-header {
		padding: 3.25rem 1.25rem 2.5rem;
		text-align: center;
	}

	.evpwt-eyebrow { justify-content: center; }
	.evpwt-eyebrow::before { display: none; }

	.evpwt-cards {
		max-width: none;
		margin: 0;
		padding: 0 1.25rem;
		border-top: none;

		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;

		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x mandatory;
		scroll-padding-left: 1.25rem;
		scroll-padding-inline-start: 1.25rem;

		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.evpwt-cards::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.evpwt-card {
		flex: 0 0 auto;
		width: 86vw;
		max-width: 86vw;
		min-width: 86vw;
		margin: 0;

		scroll-snap-align: start;
		scroll-snap-stop: always;

		display: flex;
		flex-direction: column;

		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.07);
		border-radius: 1rem;
		overflow: hidden;
	}

	/* Cards do not reveal in the carousel. This needs the .evpwt-js
	   prefix to match the specificity of the rule that hides them. */
	.evpwt-js .evpwt-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Reset the desktop nth-child order reversal. */
	.evpwt-card-img,
	.evpwt-card-body { order: 0; }
	.evpwt-card:nth-child(n+3) .evpwt-card-img,
	.evpwt-card:nth-child(n+3) .evpwt-card-body { order: 0; }

	.evpwt-card-img {
		width: 100%;
		height: 15rem;
		min-height: 0;
		flex-shrink: 0;
	}

	.evpwt-card-img img {
		filter: brightness(0.78) saturate(0.9);
	}

	.evpwt-card-img::after {
		background: linear-gradient(180deg, transparent 55%, rgba(26, 26, 26, 0.55));
	}

	.evpwt-card-body {
		padding: 1.5rem 1.25rem 1.75rem;
		border: none;
		flex: 1;
	}

	.evpwt-card-body::before { display: none; }

	/* Matches the nth-child rule that set the desktop side border. */
	.evpwt-card:nth-child(n+3) .evpwt-card-body { border: none; }

	.evpwt-card-label {
		font-size: 0.62rem;
		margin-bottom: 0.5rem;
	}

	.evpwt-card-title {
		font-size: 1.65rem;
		line-height: 1.22;
		margin-bottom: 0.75rem;
	}

	.evpwt-card-rule { margin-bottom: 0.875rem; }

	.evpwt-card-text {
		font-size: 0.92rem;
		line-height: 1.8;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 1.125rem;
		max-width: none;
	}

	.evpwt-card-link {
		font-size: 0.68rem;
		padding: 0.5rem 0;
		min-height: 2.75rem;
		border-bottom: 1px solid rgba(212, 196, 168, 0.28);
	}

	.evpwt-mobile-hint,
	.evpwt-mobile-nav { display: flex; }

	.evpwt-mobile-hint {
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		padding: 0.625rem 0 0;
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.evpwt-mobile-hint.is-visible { opacity: 1; }
	.evpwt-mobile-hint.is-hidden  { opacity: 0; pointer-events: none; }

	.evpwt-mobile-hint span {
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.35);
	}

	.evpwt-mobile-hint svg {
		width: 1.125rem;
		height: 1.125rem;
		stroke: rgba(255, 255, 255, 0.35);
		fill: none;
		stroke-width: 2;
		animation: evpwt-arrow 1.4s ease-in-out infinite;
	}

	.evpwt-mobile-nav {
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 1.25rem 0 0.5rem;
	}

	.evpwt-mobile-counter {
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		color: rgba(255, 255, 255, 0.5);
		font-variant-numeric: tabular-nums;
		min-width: 1.875rem;
		text-align: center;
	}

	.evpwt-mobile-counter-current {
		color: var(--wp--preset--color--gold);
		font-weight: 700;
	}

	.evpwt-mobile-dots {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.evpwt-mobile-dot {
		width: 0.625rem;
		height: 0.625rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		border: none;
		padding: 0;
		cursor: pointer;
		transition: all 0.3s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.evpwt-mobile-dot.is-active,
	.evpwt-mobile-dot[aria-current="true"] {
		background: var(--wp--preset--color--rust);
		width: 1.75rem;
		border-radius: 0.3125rem;
	}

	.evpwt-statement {
		flex-direction: column;
		align-items: center;
		gap: 1.75rem;
		padding: 3.25rem 1.25rem;
		text-align: center;
	}

	.evpwt-statement-rule {
		width: 3.125rem;
		height: 1.5px;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust), transparent);
	}

	.evpwt-statement-quote  { font-size: 1.15rem; line-height: 1.7; }
	.evpwt-statement-author { font-size: 0.58rem; margin-top: 0.875rem; }

	.evpwt-statement-cta {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	/* padding and font-size now match the shared button spec, so they
	   are not repeated here. */
	.evpwt-btn {
		min-height: 3rem;
		width: 100%;
		max-width: 20rem;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
	}
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evpwt-header { padding: 2.75rem 1rem 2rem; }

	.evpwt-cards {
		padding: 0 1rem;
		scroll-padding-left: 1rem;
		scroll-padding-inline-start: 1rem;
	}

	.evpwt-card {
		width: 88vw;
		max-width: 88vw;
		min-width: 88vw;
	}

	.evpwt-card-img   { height: 13.75rem; }
	.evpwt-card-body  { padding: 1.375rem 1rem 1.625rem; }
	.evpwt-card-title { font-size: 1.5rem; }
	.evpwt-card-text  { font-size: 0.9rem; }
	.evpwt-statement  { padding: 2.75rem 1rem; }
}

/* ---------- 360 and below ---------- */
@media (max-width: 360px) {
	.evpwt-card {
		width: 90vw;
		max-width: 90vw;
		min-width: 90vw;
	}

	.evpwt-card-img   { height: 12.5rem; }
	.evpwt-card-title { font-size: 1.4rem; }
}

/* ---------- Reduced motion ----------
   Last block for this section so source order alone wins. */
@media (prefers-reduced-motion: reduce) {
	.evpwt-js .evpwt-header,
	.evpwt-js .evpwt-card,
	.evpwt-js .evpwt-statement {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.evpwt-card-img img   { transition: none; }
	.evpwt-mobile-hint svg { animation: none; }
	.evpwt-cards          { scroll-behavior: auto; }
}


/* ==================================================================
   TESTIMONIALS
   parts/section-testimonials.php + assets/js/testimonials.js

   No pause control and no review schema, both removed deliberately
   upstream. Not reinstated here.
   ================================================================== */
.ev-testimonials {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}

.ev-testimonials *,
.ev-testimonials *::before,
.ev-testimonials *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Holds the off screen <symbol> definition for the star icon. */
.ev-t-defs {
	position: absolute;
	width: 0;
	height: 0;
}

/* Visually hidden utility. Scoped to the section so it outranks the
   universal margin and padding reset above without !important. */
.ev-testimonials .ev-t-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Header ---------- */
.ev-t-header {
	max-width: 87.5rem;
	margin: 0 auto 3rem;
	padding: 0 3rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

/* Reveal only arms when JS is available, so the header stays visible
   with JS off instead of being stranded at opacity 0. */
.evpwt-js .ev-t-header {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ev-t-header.vis {
	opacity: 1;
	transform: translateY(0);
}

.ev-t-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.ev-t-eyebrow::before {
	content: '';
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.ev-t-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin: 0;
}

.ev-t-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.ev-t-header-right { flex-shrink: 0; }

.ev-t-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.28);
	padding-bottom: 0.125rem;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.ev-t-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.ev-t-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 4px;
}

.ev-t-link svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.ev-t-link:hover svg { transform: translate(3px, -3px); }

/* ---------- Scrolling track ---------- */
.ev-t-track {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	position: relative;
}

.ev-t-track::before,
.ev-t-track::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 7.5rem;
	z-index: 3;
	pointer-events: none;
}

.ev-t-track::before {
	left: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--bg-deep), transparent);
}

.ev-t-track::after {
	right: 0;
	background: linear-gradient(270deg, var(--wp--preset--color--bg-deep), transparent);
}

.ev-t-row {
	display: flex;
	gap: 0.875rem;
	width: max-content;
}

.ev-t-row.row-1 { animation: ev-scroll-left  55s linear infinite; }
.ev-t-row.row-2 { animation: ev-scroll-right 55s linear infinite; }

/* Pause on hover, pointer devices only. */
@media (hover: hover) {
	.ev-t-track:hover .ev-t-row { animation-play-state: paused; }
}

/* Pause when the section is out of view. Three classes deep, so it
   outranks the two class animation shorthand without !important. */
.ev-t-track.is-offscreen .ev-t-row { animation-play-state: paused; }

@keyframes ev-scroll-left  { 0% { transform: translateX(0);    } 100% { transform: translateX(-50%); } }
@keyframes ev-scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0);    } }

/* ---------- Card ---------- */
.ev-t-card {
	flex-shrink: 0;
	width: 23.75rem;
	padding: 1.5rem 1.625rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1rem;
	cursor: default;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.ev-t-card:hover {
	border-color: rgba(184, 98, 27, 0.32);
	background: rgba(255, 255, 255, 0.06);
}

.ev-t-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.875rem;
}

.ev-t-location {
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	background: rgba(184, 98, 27, 0.1);
	border: 1px solid rgba(184, 98, 27, 0.2);
	border-radius: 3.125rem;
	padding: 0.1875rem 0.625rem;
}

.ev-t-stars {
	display: flex;
	gap: 0.125rem;
}

.ev-t-stars svg {
	width: 0.6875rem;
	height: 0.6875rem;
	fill: var(--wp--preset--color--gold);
}

/* <blockquote> carries heavy default browser styling, hence the reset. */
.ev-t-quote {
	border: 0;
	quotes: none;
	font-size: 0.86rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-style: normal;
}

.ev-t-author-wrap {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.04em;
}

.ev-t-author-wrap cite { font-style: normal; }

.ev-t-mobile-link {
	display: none;
	justify-content: center;
	margin-top: 2rem;
	position: relative;
	z-index: 2;
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.ev-testimonials { padding: 3.75rem 0; }

	.ev-t-header {
		flex-direction: column;
		padding: 0 1.25rem;
		margin-bottom: 2.25rem;
	}

	.ev-t-header-right { display: none; }
	.ev-t-mobile-link  { display: flex; }

	.ev-t-card  { width: 18.75rem; padding: 1.125rem 1.25rem; }
	.ev-t-quote { font-size: 0.82rem; }

	.ev-t-track::before,
	.ev-t-track::after { width: 3.125rem; }
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.ev-t-card  { width: 16.875rem; padding: 1rem 1.125rem; }
	.ev-t-quote { font-size: 0.8rem; }
}

/* ---------- Reduced motion ----------
   Scoped to the section so it ties .ev-t-row.row-1 on specificity
   and wins on source order. */
@media (prefers-reduced-motion: reduce) {
	.ev-testimonials .ev-t-row {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		padding: 0 1.25rem;
	}
}


/* ==================================================================
   WHY CHOOSE ECOVOYAGER
   parts/section-why-choose.php + assets/js/why-choose.js

   Full width by default. The 100vw plus negative margin full bleed
   hack is gone, along with its overflow-x: hidden.

   The three pillars exist twice in the DOM: once in the desktop grid
   and once in the mobile carousel. That is how the salvaged markup
   was built and it is preserved here.
   ================================================================== */
.evp-why-choose {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	padding: 5rem 0 5.5rem;
	position: relative;
}

/* This section resets only the universal selector, with no pseudo
   element variants. Matches the salvaged rule exactly. */
.evp-why-choose * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ---------- Header ----------
   Same alignment fix as the blog header above. */
.evp-wc-header {
	max-width: 87.5rem;
	margin: 0 auto 3.5rem;
	padding: 0 3rem;
	text-align: left;
}

.evpwt-js .evp-wc-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-wc-header.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-wc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.evp-wc-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evp-wc-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin-bottom: 1.5rem;
}

.evp-wc-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evp-wc-rule {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1.5rem;
}

.evp-wc-subtitle {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
	max-width: 38.75rem;
	margin: 0;
}

/* ---------- Desktop pillar grid ---------- */
.evp-wc-grid {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.evp-wc-pillar {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s ease;
	position: relative;
}

/* The transition above is shared with the hover lift, so it stays
   unconditional. Only the hidden starting state is gated. */
.evpwt-js .evp-wc-pillar {
	opacity: 0;
	transform: translateY(20px);
}

.evp-wc-pillar.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-wc-grid .evp-wc-pillar:nth-child(1) { transition-delay: 0.05s; }
.evp-wc-grid .evp-wc-pillar:nth-child(2) { transition-delay: 0.12s; }
.evp-wc-grid .evp-wc-pillar:nth-child(3) { transition-delay: 0.19s; }

.evp-wc-pillar:hover {
	border-color: rgba(184, 98, 27, 0.32);
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-4px);
}

.evp-wc-img {
	position: relative;
	height: 13.75rem;
	overflow: hidden;
	flex-shrink: 0;
}

.evp-wc-img-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.78) saturate(0.9);
	transition: transform 0.8s ease, filter 0.5s ease;
}

.evp-wc-pillar:hover .evp-wc-img-bg {
	transform: scale(1.06);
	filter: brightness(0.9) saturate(1);
}

.evp-wc-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(26, 26, 26, 0.65) 100%);
	pointer-events: none;
	z-index: 1;
}

.evp-wc-body {
	padding: 1.75rem 1.625rem 1.875rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}

.evp-wc-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.625rem;
}

.evp-wc-pillar-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 0.875rem;
}

.evp-wc-rule-sm {
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 0.875rem;
}

.evp-wc-desc {
	font-size: 0.88rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.25rem;
}

.evp-wc-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
}

.evp-wc-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.82rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

.evp-wc-list-dot {
	width: 0.375rem;
	height: 0.375rem;
	background: var(--wp--preset--color--rust);
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 0.4375rem;
}

.evp-wc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.28);
	padding-bottom: 0.1875rem;
	width: fit-content;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evp-wc-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.evp-wc-link svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.evp-wc-link:hover svg { transform: translate(3px, -3px); }

/* ---------- Mission statement ---------- */
.evp-wc-mission {
	max-width: 87.5rem;
	margin: 4.5rem auto 3.5rem;
	padding: 3.5rem 3rem;
	display: flex;
	align-items: center;
	gap: 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .evp-wc-mission {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-wc-mission.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-wc-mission-line {
	width: 1px;
	height: 5rem;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--rust), transparent);
	flex-shrink: 0;
}

.evp-wc-mission-body { flex: 1; }

.evp-wc-mission-quote {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

.evp-wc-mission-author {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-top: 1rem;
}

/* ---------- CTA ---------- */
.evp-wc-cta-wrap {
	text-align: center;
	padding: 0 3rem;
}

.evpwt-js .evp-wc-cta-wrap {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-wc-cta-wrap.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-wc-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.evp-wc-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evp-wc-cta:hover::before { opacity: 1; }

.evp-wc-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evp-wc-cta > * {
	position: relative;
	z-index: 1;
}

.evp-wc-cta svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evp-wc-cta:hover svg { transform: translateX(3px); }

/* Mobile carousel is hidden on desktop. */
.evp-wc-carousel { display: none; }

@keyframes evpWcSwipeArrow {
	0%, 100% { transform: translateX(0);   opacity: 0.5; }
	50%      { transform: translateX(5px); opacity: 1; }
}

/* ---------- 1024 and below ---------- */
@media (max-width: 1024px) {
	.evp-wc-header   { padding: 0 2.5rem; margin-bottom: 2.75rem; }
	.evp-wc-grid     { padding: 0 2.5rem; gap: 1.25rem; }
	.evp-wc-mission  { padding: 3rem 2.5rem; gap: 2.5rem; margin: 3.75rem auto 3rem; }
	.evp-wc-cta-wrap { padding: 0 2.5rem; }
	.evp-wc-body     { padding: 1.5rem 1.375rem 1.625rem; }
	.evp-wc-img      { height: 12.5rem; }
	.evp-wc-pillar-title { font-size: 1.35rem; }
}

/* ---------- 900 to 769, two up grid ----------
   Off the standard ladder. Carried over from the salvaged file
   unchanged, since the brief is to preserve breakpoints exactly. */
@media (max-width: 900px) and (min-width: 769px) {
	.evp-wc-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.evp-wc-grid .evp-wc-pillar:nth-child(3) {
		grid-column: 1 / -1;
		max-width: 32.5rem;
		margin: 0 auto;
		width: 100%;
	}
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.evp-why-choose { padding: 3.5rem 0 4.25rem; }

	/* Centres at 768, the same breakpoint and behaviour as the why
	   travelers choose header. The dash is dropped when centred and the
	   rule takes the bilateral gradient, as the hero's does when it
	   centres. */
	.evp-wc-header {
		padding: 0 1.25rem;
		margin-bottom: 2.25rem;
		text-align: center;
	}

	.evp-wc-eyebrow { justify-content: center; }
	.evp-wc-eyebrow::before { display: none; }

	.evp-wc-rule {
		width: 3.125rem;
		margin-left: auto;
		margin-right: auto;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	.evp-wc-subtitle {
		font-size: 1rem;
		padding: 0 0.25rem;
		margin-left: auto;
		margin-right: auto;
	}

	.evp-wc-grid { display: none; }

	.evp-wc-carousel {
		display: block;
		position: relative;
		padding-bottom: 0.5rem;
	}

	.evp-wc-carousel-track {
		display: flex;
		gap: 0.75rem;
		padding: 0 1.25rem;

		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x mandatory;
		scroll-padding-left: 1.25rem;

		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.evp-wc-carousel-track::-webkit-scrollbar { display: none; }

	.evp-wc-carousel .evp-wc-pillar {
		flex: 0 0 86%;
		max-width: 86%;
		scroll-snap-align: start;
		scroll-snap-stop: always;

		opacity: 1;
		transform: none;
		transition: none;
	}

	.evp-wc-carousel .evp-wc-pillar:hover { transform: none; }
	.evp-wc-carousel .evp-wc-img  { height: 13.75rem; }
	.evp-wc-carousel .evp-wc-body { padding: 1.5rem 1.25rem 1.75rem; }

	.evp-wc-pillar-title {
		font-size: 1.55rem;
		line-height: 1.22;
		margin-bottom: 0.75rem;
	}

	.evp-wc-desc {
		font-size: 0.92rem;
		line-height: 1.8;
		margin-bottom: 1.125rem;
	}

	.evp-wc-list li { font-size: 0.88rem; }

	.evp-wc-link {
		font-size: 0.68rem;
		padding: 0.5rem 0;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}

	.evp-wc-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 1.25rem 0 0;
	}

	.evp-wc-carousel-counter {
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		color: rgba(255, 255, 255, 0.5);
		font-variant-numeric: tabular-nums;
		min-width: 1.875rem;
		text-align: center;
	}

	.evp-wc-carousel-counter .evp-wc-counter-current {
		color: var(--wp--preset--color--gold);
		font-weight: 700;
	}

	.evp-wc-carousel-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
	}

	.evp-wc-carousel-dot {
		width: 0.625rem;
		height: 0.625rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		border: none;
		padding: 0;
		cursor: pointer;
		transition: all 0.3s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.evp-wc-carousel-dot.active {
		background: var(--wp--preset--color--rust);
		width: 1.75rem;
		border-radius: 0.3125rem;
	}

	.evp-wc-swipe-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		padding: 0.625rem 0 0;
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.evp-wc-swipe-hint.show { opacity: 1; }
	.evp-wc-swipe-hint.hide { opacity: 0; pointer-events: none; }

	.evp-wc-swipe-hint-text {
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.35);
	}

	.evp-wc-swipe-hint-arrow {
		display: inline-block;
		width: 1.125rem;
		height: 1.125rem;
		stroke: rgba(255, 255, 255, 0.35);
		fill: none;
		stroke-width: 2;
		animation: evpWcSwipeArrow 1.4s ease-in-out infinite;
	}

	.evp-wc-mission {
		flex-direction: column;
		gap: 1.5rem;
		padding: 2.75rem 1.25rem;
		text-align: center;
		margin: 3rem auto 2.75rem;
	}

	.evp-wc-mission-line {
		width: 3.125rem;
		height: 1.5px;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust), transparent);
	}

	.evp-wc-mission-quote  { font-size: 1.1rem; line-height: 1.7; }
	.evp-wc-mission-author { font-size: 0.58rem; margin-top: 0.875rem; }

	.evp-wc-cta-wrap { padding: 0 1.25rem; }

	.evp-wc-cta {
		padding: 1.0625rem 2.25rem;
		font-size: 0.7rem;
		width: 100%;
		max-width: 20rem;
		justify-content: center;
		min-height: 3rem;
		-webkit-tap-highlight-color: transparent;
	}

	.evp-wc-cta:active { transform: scale(0.98); }
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evp-why-choose { padding: 3rem 0 3.75rem; }

	.evp-wc-header { padding: 0 1rem; margin-bottom: 1.875rem; }

	.evp-wc-carousel-track { padding: 0 1rem; scroll-padding-left: 1rem; }

	.evp-wc-carousel .evp-wc-pillar { flex-basis: 88%; max-width: 88%; }
	.evp-wc-carousel .evp-wc-img    { height: 12.5rem; }
	.evp-wc-carousel .evp-wc-body   { padding: 1.375rem 1rem 1.625rem; }

	.evp-wc-mission      { padding: 2.25rem 1rem; margin: 2.5rem auto 2.25rem; }
	.evp-wc-pillar-title { font-size: 1.4rem; }
	.evp-wc-desc         { font-size: 0.9rem; }
	.evp-wc-cta          { padding: 1rem 1.75rem; font-size: 0.68rem; max-width: 18.125rem; }
}

/* ---------- 360 and below ---------- */
@media (max-width: 360px) {
	.evp-wc-carousel .evp-wc-pillar { flex-basis: 90%; max-width: 90%; }
	.evp-wc-carousel .evp-wc-img    { height: 11.25rem; }
	.evp-wc-pillar-title { font-size: 1.3rem; }
	.evp-wc-cta          { max-width: 16.875rem; padding: 0.9375rem 1.5rem; }
}

/* ---------- Focus ---------- */
.evp-wc-link:focus-visible,
.evp-wc-cta:focus-visible,
.evp-wc-carousel-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ---------- Reduced motion ----------
   The reveal group is scoped to the section so it ties the .vis
   rules on specificity and wins on source order. */
@media (prefers-reduced-motion: reduce) {
	.evp-wc-swipe-hint-arrow { animation: none; }

	.evp-why-choose .evp-wc-header,
	.evp-why-choose .evp-wc-pillar,
	.evp-why-choose .evp-wc-mission,
	.evp-why-choose .evp-wc-cta-wrap {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.evp-wc-img-bg { transition: none; }
	.evp-wc-pillar:hover { transform: none; }
	.evp-wc-carousel-track { scroll-behavior: auto; }
}


/* ==================================================================
   FLOATING CTA
   parts/section-floating-cta.php + assets/js/floating-cta.js

   Fixed to the viewport, revealed once the hero scrolls out of view.
   Sits at body level rather than inside a section, so it inherits
   Montserrat from the base body rule.
   ================================================================== */
.ev-floating-cta {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.ev-floating-cta.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
   The skin is the shared call to action rule beside .contact-button
   in the SITE HEADER section, and the two things that differ for
   this button (more padding, a shadow at rest) are declared THERE,
   directly after that rule, not here. They have to come later in the
   file than the shared rule to win at equal specificity, and this
   section is earlier.
*/

@media (max-width: 768px) {
	.ev-floating-cta {
		bottom: 1rem;
		right: 1rem;
	}
}


/* ==================================================================
   SITE HEADER
   header.php + assets/js/header.js

   Loads on every page, not just the front page. The header declares
   no font-family of its own: it inherits Montserrat from body. The
   two <button> elements are the exception, since form controls do
   not inherit font.
   ================================================================== */
/* ================================================
   THE FIXED HEADER'S HEIGHT, AS A SITE WIDE TOKEN

   --ev-header-h already existed with exactly this ladder, but it was
   declared on .evptt, the tour tab bar, so nothing outside a tour page could
   read it: a var(--ev-header-h) elsewhere silently took its fallback. The
   full bleed tour style section has to subtract the header from its height,
   so the token is declared here instead, beside the header it measures.

   THE VALUES ARE NOT NEW. They are the ladder .header-container's own height
   follows, verified against it: 5rem, then 4.375rem at 768px, then 4rem at
   480px. Each is a pixel under the measured header, 81 / 71 / 65, which is
   deliberate and explained where .evptt uses it.

   .evptt KEEPS ITS OWN THREE DECLARATIONS. A class selector beats :root, so
   the tour page's sticky stack resolves exactly as it did before this.
   ================================================ */
:root {
	--ev-header-h: 5rem;
}
/* ================================================
   THE HOUSE EDGE FADE, AS A TOKEN

   The 90deg fade that joins a photograph to the dark panel beside it
   is written out, stop for stop, in six places: the homepage hero, the
   destinations hero, the about hero, the tour hero, the tours listing
   hero, and the destination and location pair. The comment on one of
   them says a seventh variant would be a seventh thing to keep in
   step, which was right, and is the reason this is a token rather
   than a seventh variant.

   WHAT CHANGED. The five stops became twenty, off a monotone cubic
   through the same five control points: 0.88 at 4 per cent, 0.28 at
   14, 0.05 at 26. The reach and the weight are what they were tuned
   to; what goes is the corner at each join, which is visible, because
   the eye reads the change in rate and not the change in value. The
   curve leaves both ends with zero slope, which settles the seam at
   the panel edge where the fade used to begin falling the instant the
   photograph started, and that soft landing is why the last stop sits
   at 42 per cent rather than 38.

   Twenty steps across 42 per cent of a 55 per cent column is a stop
   every 22 pixels at 1920, and no step moves alpha by more than about
   two levels of 255, which is under what banding needs to show.

   ONLY THE DESTINATION AND LOCATION HEROES READ IT TODAY. The other
   five still carry their own five stop copy and are unchanged, which
   is deliberate: the brief was those two pages. Each of the others
   adopts it by replacing its background line with
   background: var(--ev-fade-x), and they should, one at a time, with
   a look at each.
   ================================================ */
:root {
	--ev-fade-x: linear-gradient(
		90deg,
		rgba(17, 16, 16, 1) 0%,
		rgba(17, 16, 16, 0.955) 2.1%,
		rgba(17, 16, 16, 0.872) 4.2%,
		rgba(17, 16, 16, 0.759) 6.3%,
		rgba(17, 16, 16, 0.613) 8.4%,
		rgba(17, 16, 16, 0.462) 10.5%,
		rgba(17, 16, 16, 0.336) 12.6%,
		rgba(17, 16, 16, 0.26) 14.7%,
		rgba(17, 16, 16, 0.202) 16.8%,
		rgba(17, 16, 16, 0.152) 18.9%,
		rgba(17, 16, 16, 0.11) 21%,
		rgba(17, 16, 16, 0.077) 23.1%,
		rgba(17, 16, 16, 0.055) 25.2%,
		rgba(17, 16, 16, 0.043) 27.3%,
		rgba(17, 16, 16, 0.032) 29.4%,
		rgba(17, 16, 16, 0.023) 31.5%,
		rgba(17, 16, 16, 0.015) 33.6%,
		rgba(17, 16, 16, 0.009) 35.7%,
		rgba(17, 16, 16, 0.004) 37.8%,
		rgba(17, 16, 16, 0.001) 39.9%,
		rgba(17, 16, 16, 0) 42%
	);
}

@media (max-width: 768px) {
	:root {
		--ev-header-h: 4.375rem;
	}
}

@media (max-width: 480px) {
	:root {
		--ev-header-h: 4rem;
	}
}

.ecovoyager-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	backdrop-filter: blur(0px);
	border-bottom: 1px solid transparent;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ecovoyager-header.scrolled {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(212, 196, 168, 0.5);
}

.header-container {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5rem;
}

/* ---------- Logo ---------- */
.logo-section {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.logo-icon {
	height: 2.8125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.9375rem;
	transition: all 0.3s ease;
}

.logo-icon:hover { transform: scale(1.05); }

.logo-icon img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.logo-text {
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.logo-text:hover { color: rgba(255, 255, 255, 0.8); }

.ecovoyager-header.scrolled .logo-text { color: #333; }
.ecovoyager-header.scrolled .logo-text:hover { color: var(--wp--preset--color--rust); }

/* ---------- Desktop navigation ---------- */
.nav-menu {
	display: flex;
	list-style: none;
	align-items: center;
	gap: 2.5rem;
}

.nav-item { position: relative; }

.nav-link {
	text-decoration: none;
	color: #fff;
	font-weight: 500;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03125rem;
	padding: 0.625rem 0;
	position: relative;
	transition: all 0.3s ease;
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
	transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.nav-link:hover { color: rgba(255, 255, 255, 0.8); }

.ecovoyager-header.scrolled .nav-link { color: #333; }

.ecovoyager-header.scrolled .nav-link::after {
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
}

.ecovoyager-header.scrolled .nav-link:hover { color: var(--wp--preset--color--rust); }

/* ---------- Mega menu ---------- */
.nav-item.has-dropdown .mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-10px);
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(20px);
	min-width: 36.25rem;
	border-radius: 1rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1.5625rem 1.875rem;
	margin-top: 0.625rem;
}

.nav-item.has-dropdown .mega-menu.simple-dropdown {
	min-width: 15rem;
	padding: 1.125rem 1.375rem;
}

.ecovoyager-header.scrolled .nav-item.has-dropdown .mega-menu {
	background: rgba(255, 255, 255, 0.99);
	border: 1px solid rgba(212, 196, 168, 0.3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.nav-item.has-dropdown:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5625rem;
}

.simple-link-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.continent-column {
	min-width: 6.25rem;
	display: flex;
	flex-direction: column;
}

.continent-title {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0;
	padding-bottom: 0.5rem;
	height: 2.375rem;
	display: flex;
	align-items: flex-start;
	line-height: 1.3;
}

.continent-underline {
	height: 1px;
	background: rgba(212, 196, 168, 0.3);
	margin-bottom: 0.75rem;
}

.ecovoyager-header.scrolled .continent-title { color: var(--wp--preset--color--rust); }
.ecovoyager-header.scrolled .continent-underline { background: rgba(184, 98, 27, 0.2); }

.continent-destinations {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.destination-link {
	display: block;
	padding: 0.375rem 0;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: 0.01875rem;
	transition: all 0.25s ease;
	position: relative;
	padding-left: 0;
}

.destination-link::before {
	content: '';
	position: absolute;
	left: -0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.25rem;
	height: 0.25rem;
	background: var(--wp--preset--color--gold);
	border-radius: 50%;
	opacity: 0;
	transition: all 0.25s ease;
}

.destination-link:hover {
	color: #fff;
	padding-left: 0.75rem;
}

.destination-link:hover::before {
	opacity: 1;
	left: 0;
}

.ecovoyager-header.scrolled .destination-link { color: #555; }
.ecovoyager-header.scrolled .destination-link::before { background: var(--wp--preset--color--rust); }
.ecovoyager-header.scrolled .destination-link:hover { color: var(--wp--preset--color--rust); }

.mega-menu-footer {
	margin-top: 1.25rem;
	padding-top: 0.9375rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.ecovoyager-header.scrolled .mega-menu-footer {
	border-top-color: rgba(212, 196, 168, 0.2);
}

.view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	transition: all 0.3s ease;
}

.view-all-link:hover { color: #fff; }
.view-all-link svg { transition: transform 0.3s ease; }
.view-all-link:hover svg { transform: translateX(4px); }

.ecovoyager-header.scrolled .view-all-link { color: var(--wp--preset--color--rust); }
.ecovoyager-header.scrolled .view-all-link:hover { color: #333; }

/* ---------- Contact button, desktop only ---------- */
/* ==================================================
   THE CALL TO ACTION, ONE IDIOM

   Four buttons share this skin: Contact Us in the header, Book Now
   that replaces it when the tour tab strip docks, Contact Us at the
   foot of the mobile menu, and the floating Book Now on tour pages.
   They used to be four copies of an older pill, a rust to gold
   diagonal gradient at 0.9rem with a lift and glow on hover, which
   had drifted away from everything built since: the hero buttons,
   the tab pills, the itinerary markers and day numbers.

   What it takes from those:
     - the hero button's type: Montserrat 0.68rem, 700, 0.14em
       tracking, uppercase. The old 0.0625rem tracking read as a
       different site.
     - the pills' hairline: gold-light at low alpha over solid rust,
       so the button sits in the same family as the pills beside it
       when docked, and reads on all three header grounds, the
       transparent one over the hero, the white scrolled one and the
       dark docked one.
     - the hero's lit layer on hover, gold-light to rust, rather than
       the old gold to rust flip.
     - the markers' halo on hover, a soft rust ring, instead of the
       lift. A button in a fixed header should not move.
     - no glow at rest. The floating one alone keeps a shadow, because
       it floats over content and needs lifting off it, and it is a
       neutral dark one, not the old rust bloom.

   The two header buttons MUST stay dimensionally identical, since
   they crossfade in one grid cell when the strip docks and the tests
   check Book Now lands on Contact Us's right edge and top. Keeping
   them in one rule is what guarantees that.

   Transitions name their properties. The old "all 0.3s" also
   animated the dock's scroll linked opacity and lagged it.
   ================================================== */
.contact-button,
.header-dock-book,
.mobile-contact-btn,
.ev-floating-cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.5rem;
	border: 1px solid rgba(232, 217, 192, 0.55);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(184, 98, 27, 0);
	transition: border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

/* The lit layer. Clipped by the button's own overflow. */
.contact-button::before,
.header-dock-book::before,
.mobile-contact-btn::before,
.ev-floating-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-light) 0%, var(--wp--preset--color--rust) 70%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

/* The label and any icon ride above the lit layer. */
.contact-button > span,
.header-dock-book > span,
.mobile-contact-btn > span,
.mobile-contact-btn-arrow,
.ev-floating-cta-btn > span {
	position: relative;
	z-index: 2;
}

/* Hover: the layer lights and a halo opens. Not on the mobile menu
   button, which uses :active for the iOS reason given at its rule. */
.contact-button:hover::before,
.header-dock-book:hover::before,
.ev-floating-cta-btn:hover::before {
	opacity: 1;
}

.contact-button:hover,
.header-dock-book:hover,
.ev-floating-cta-btn:hover {
	border-color: rgba(232, 217, 192, 0.85);
	box-shadow: 0 0 0 0.25rem rgba(184, 98, 27, 0.2);
}

.contact-button:focus-visible,
.header-dock-book:focus-visible,
.mobile-contact-btn:focus-visible,
.ev-floating-cta-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* The floating Book Now's two differences, declared here rather than
   at its own section because they must come AFTER the shared rule to
   win at equal specificity. It floats over content, so it gets a
   little more padding and a shadow at rest to lift it off whatever is
   beneath: a neutral dark one, not the old rust bloom. The family's
   rust halo is added on top of it on hover. */
.ev-floating-cta-btn {
	padding: 0.9375rem 1.75rem;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.ev-floating-cta-btn:hover {
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35), 0 0 0 0.25rem rgba(184, 98, 27, 0.2);
}

/* ---------- Mobile menu toggle ---------- */
.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.3125rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.625rem;
	position: static;
	transform: none;
	z-index: 1001;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
}

.mobile-menu-toggle span {
	width: 1.5rem;
	height: 2px;
	background: #fff;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border-radius: 2px;
	display: block;
}

.ecovoyager-header.scrolled .mobile-menu-toggle span { background: #333; }

.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ---------- Mobile menu panel ---------- */
.mobile-menu {
	position: fixed;
	top: 4.375rem;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--wp--preset--color--bg-deep);
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.35s ease,
	            visibility 0.35s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 999;
}

.ecovoyager-header.scrolled ~ .mobile-menu { top: 4.375rem; }

.mobile-menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.mobile-nav {
	padding: 0.5rem 0 2.5rem;
	display: flex;
	flex-direction: column;
}

.mobile-nav-link {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	padding: 0 1.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: color 0.2s ease, background 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
	color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.04);
}

/* ---------- Mobile accordions ---------- */
.mobile-accordion {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* <button> does not inherit font, so this one is declared. */
.mobile-accordion-trigger {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0 1.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: rgba(255, 255, 255, 0.9);
	transition: color 0.2s ease, background 0.2s ease;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.mobile-accordion-trigger:hover,
.mobile-accordion-trigger:active {
	color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.04);
}

.mobile-accordion-trigger.open { color: var(--wp--preset--color--gold); }

.accordion-chevron {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	color: rgba(255, 255, 255, 0.5);
}

.mobile-accordion-trigger.open .accordion-chevron {
	transform: rotate(180deg);
	color: var(--wp--preset--color--gold);
}

/* height is animated from 0 to scrollHeight by header.js. */
.mobile-accordion-content {
	overflow: hidden;
	height: 0;
	transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-accordion-inner {
	padding: 1rem 1.5rem 1.5rem;
	background: rgba(255, 255, 255, 0.02);
}

.mobile-continent-group { margin-bottom: 1.25rem; }
.mobile-continent-group:last-child { margin-bottom: 0; }

.mobile-continent-title {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.625rem;
}

.mobile-destinations-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mobile-destination-link {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	font-weight: 400;
	padding: 0.5rem 0.875rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.mobile-destination-link:hover,
.mobile-destination-link:active {
	color: #fff;
	background: rgba(212, 196, 168, 0.12);
	border-color: rgba(212, 196, 168, 0.25);
}

.mobile-view-all {
	margin-top: 1.125rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	transition: color 0.2s ease;
}

.mobile-view-all-link:hover { color: #fff; }
.mobile-view-all-link svg { transition: transform 0.2s ease; }
.mobile-view-all-link:hover svg { transform: translateX(4px); }

.mobile-simple-links {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-simple-link {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.95rem;
	font-weight: 400;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	transition: color 0.2s ease;
	min-height: 2.75rem;
}

.mobile-simple-link:last-child { border-bottom: none; }

.mobile-simple-link:hover,
.mobile-simple-link:active { color: var(--wp--preset--color--gold); }

/* ---------- Mobile menu footer CTA ---------- */
.mobile-menu-footer {
	padding: 1.75rem 1.5rem 0;
	margin-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/*
   BOX-SIZING IS THE WHOLE BUG. There is no global border-box reset in
   this stylesheet, so width:100% here was the CONTENT width and the
   3rem of horizontal padding was added on top. In a 382px footer the
   button measured 430px and hung 24px past the viewport with its right
   cap cut off, and min-height:54px applied to the content box so the
   rendered height came out at 86px rather than 54.

   The left gap looked correct throughout, which is what made it read
   as a container problem: .mobile-menu-footer's 24px padding was
   always right, and only the right edge was wrong.

   Solid rust at rest. The gradient is the ::before overlay's job and
   the static two-colour background that used to sit here was the
   second, permanent copy of it.
*/
/*
   The skin is the shared call to action rule beside .contact-button;
   only the layout that makes it a full width bar is here.
*/
.mobile-contact-btn {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	gap: 0.625rem;
	padding: 1rem 1.5rem;
	min-height: 3.375rem;
}

/*
   :active only, never :hover. iOS leaves :hover applied after a tap
   until something else is tapped, so a hover rule here is how the
   lit layer gets stuck on for the rest of the visit. The capture uses
   :active alone and this is why.
*/
.mobile-contact-btn:active::before {
	opacity: 1;
}

.mobile-contact-btn-arrow {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.mobile-contact-btn:active .mobile-contact-btn-arrow {
	transform: translateX(3px);
}

/* ---------- 1024 and below ---------- */
@media (max-width: 1024px) {
	.nav-menu { gap: 1.875rem; }

	.nav-item.has-dropdown .mega-menu {
		min-width: 32.5rem;
		padding: 1.25rem 1.5625rem;
	}

	.nav-item.has-dropdown .mega-menu.simple-dropdown {
		min-width: 15rem;
		padding: 1.125rem 1.375rem;
	}

	.mega-menu-grid { gap: 1.125rem; }
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.header-container {
		height: 4.375rem;
		padding: 0 1rem;
	}

	.nav-menu { display: none; }
	.contact-button { display: none; }
	.mobile-menu-toggle { display: flex; }

	.logo-text { font-size: 1.15rem; }

	.logo-icon {
		height: 2.375rem;
		margin-right: 0.625rem;
	}

	.mobile-menu { top: 4.375rem; }
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.header-container {
		height: 4rem;
		padding: 0 0.75rem;
	}

	.logo-text { font-size: 1rem; }

	.logo-icon {
		height: 2.125rem;
		margin-right: 0.5rem;
	}

	.mobile-menu { top: 4rem; }
}

/* ---------- Focus ---------- */
/* The call to action buttons take the pills' gold outline from the
   shared rule above, which reads on all three header grounds; these
   two keep the white one because they are text on the transparent
   header. */
.nav-link:focus-visible,
.mobile-menu-toggle:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

.ecovoyager-header.scrolled .nav-link:focus-visible,
.ecovoyager-header.scrolled .mobile-menu-toggle:focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ecovoyager-header,
	.ecovoyager-header *,
	.mobile-menu,
	.mobile-menu *,
	.mobile-accordion-content,
	.ev-floating-cta-btn,
	.ev-floating-cta-btn::before {
		transition-duration: 0.01ms;
	}

	/* These outrank the blanket rules above, so they are repeated at
	   their own weight rather than reaching for !important. */
	.nav-item.has-dropdown .mega-menu,
	.mobile-menu-toggle span,
	.view-all-link svg,
	.mobile-view-all-link svg {
		transition-duration: 0.01ms;
	}
}


/* ==================================================================
   HEADER TAB DOCK
   parts/header-tour-dock.php + assets/js/tour-tabs.js

   On a tour page the sticky pill strip (.evptt-bar) sits just under
   the fixed header. As it scrolls up and slides under the header, the
   header BECOMES the strip: nav out, mirror pills in, the strip's dark
   ground rising through the header's white, Contact Us crossfading to
   Book Now. The strip itself drops its sticky top to 0 the instant its
   natural position reaches the header, so it carries on up under the
   opaque header and nothing below it moves.

   IT IS SCROLL LINKED, NOT EDGE TRIGGERED. The script writes
   --ev-dock-p on the header: 0 when the strip's top reaches the
   header's bottom edge, 1 when its bottom edge has gone under, linear
   between. Everything that fades reads that number directly, so at
   every scroll position there is exactly one full strength set of
   pills on screen: the real ones sliding under the header edge, or the
   mirror at the header's centre line, with the two crossfading over
   the strip's own height. An edge triggered fade was tried first and
   showed both rows at full strength for 64px of scroll.

   Three classes mark the thresholds the number passes:
     .is-tabs-docking  on the header, p > 0    the mirror is renderable
     .is-tabs-docked   on the header, p >= 0.5 assistive tech switches
     .is-tabs-full     on the header, p >= 1   nav and Contact Us leave
   and the root mirrors the first two as .ev-tabs-docking and
   .ev-tabs-docked for rules outside the header.

   THE LOGO NEVER CHANGES ELEMENT. That is the whole reason the header
   morphs instead of being replaced: the logo is where it was before,
   during and after, and only its colour follows the ground.

   THESE RULES SIT AFTER THE .scrolled ONES ON PURPOSE. The two states
   coexist (the page is scrolled whenever it is docked) and they have
   equal specificity, so source order is what lets docked win.
   ================================================================== */

/* The header container is the positioning context for the centred
   strip, which is absolute so that, hidden, it costs the flex row
   nothing at all. It also sits above the dark ground layer below. */
.header-container {
	position: relative;
	z-index: 1;
}

/* The strip's ground, as a layer that rises through whatever the
   header is showing. The .scrolled white stays underneath it, which is
   what keeps the header opaque at every value of p and the real strip
   clipped at the header's bottom edge as it slides under. */
.ecovoyager-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #161412 0%, #1c1a17 100%);
	opacity: var(--ev-dock-p, 0);
	pointer-events: none;
}

.ecovoyager-header.is-tabs-docked {
	border-bottom-color: rgba(212, 196, 168, 0.12);
	box-shadow: 0 0.375rem 1.375rem rgba(0, 0, 0, 0.35);
}

.ecovoyager-header.is-tabs-docked .logo-text { color: #fff; }
.ecovoyager-header.is-tabs-docked .logo-text:hover { color: rgba(255, 255, 255, 0.8); }
.ecovoyager-header.is-tabs-docked .mobile-menu-toggle span { background: #fff; }

/* TWO CURVES OFF ONE NUMBER, STAGGERED. What leaves (the nav, Contact
   Us) is gone by half way; what arrives (the pills, Book Now) starts
   at a third and lands at the end. So the header visibly clears its
   middle before the pills settle into it, rather than the two fading
   through each other in the same band, which is what a plain
   crossfade looked like. The dark ground tracks p directly throughout.

   --ev-dock-out:  1 at p=0, 0 at p=0.5, held at 0 after.
   --ev-dock-in:   0 until p=0.35, 1 at p=1.
   Declared on the header so every child reads the same pair. */
.ecovoyager-header {
	--ev-dock-out: clamp(0, 1 - var(--ev-dock-p, 0) * 2, 1);
	--ev-dock-in: clamp(0, (var(--ev-dock-p, 0) - 0.35) / 0.65, 1);
}

/* The mirror strip. Its opacity IS the arrival curve; no transition,
   because a transition on top of a scroll linked value only lags it. */
.header-dock-tabs {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - 26rem);
	opacity: var(--ev-dock-in, 0);
	transform: translate(-50%, calc(-50% + (1 - var(--ev-dock-in, 0)) * 0.5rem));
	visibility: hidden;
	pointer-events: none;
	/* Five pills with their counts can outgrow the middle of a narrow
	   desktop header; then the strip scrolls, scrollbar hidden, with
	   the same fades the bar uses. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.header-dock-tabs::-webkit-scrollbar {
	display: none;
}

.header-dock-tabs.is-fade-right {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
}

.header-dock-tabs.is-fade-left {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%);
}

.header-dock-tabs.is-fade-left.is-fade-right {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}

.ecovoyager-header.is-tabs-docking .header-dock-tabs {
	visibility: visible;
}

.ecovoyager-header.is-tabs-docked .header-dock-tabs {
	pointer-events: auto;
}

/* The mirror's own tablist: the same row of labels at the bar's height,
   centred in the header, with its own underline. */
.header-dock-tablist {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	height: 3rem;
}

/* The mirror labels reuse .evptt-tab wholesale; this only stops them
   from wrapping inside the header row. */
.header-dock-tab {
	flex: 0 0 auto;
}

/* The nav goes out as the pills come in, in step. It keeps its place
   in the flex row so the logo and the CTA slot do not shift. */
.nav-menu {
	opacity: var(--ev-dock-out, 1);
	transform: translateY(calc((1 - var(--ev-dock-out, 1)) * -0.5rem));
}

.ecovoyager-header.is-tabs-docking .nav-menu {
	pointer-events: none;
}

.ecovoyager-header.is-tabs-full .nav-menu {
	visibility: hidden;
}

/* Contact Us and Book Now share one grid cell, so the swap is a
   crossfade in place and the slot's width is the wider of the two. */
.header-cta {
	display: grid;
	align-items: center;
	justify-items: end;
	flex-shrink: 0;
}

.header-cta > .contact-button,
.header-cta > .header-dock-book {
	grid-area: 1 / 1;
}

.header-cta > .contact-button {
	opacity: var(--ev-dock-out, 1);
	transform: translateY(calc((1 - var(--ev-dock-out, 1)) * -0.5rem));
	/* Restated from the shared call to action rule, because this rule
	   comes later and a bare "box-shadow" here would narrow it and
	   leave the hairline snapping on hover while the other three ease. */
	transition: border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

.ecovoyager-header.is-tabs-docking .header-cta > .contact-button {
	pointer-events: none;
}

.ecovoyager-header.is-tabs-full .header-cta > .contact-button {
	visibility: hidden;
}

/* Book Now: the SKIN comes from the shared call to action rule in the
   SITE HEADER section, the same rule Contact Us uses, which is what
   keeps the two dimensionally identical so the crossfade lands. Only
   the dock STATE lives here: how present it is, and whether it can be
   reached. The transform is the arrival drift only; the family has no
   hover lift, so there is nothing for it to fight. */
.header-dock-book {
	opacity: var(--ev-dock-in, 0);
	transform: translateY(calc((1 - var(--ev-dock-in, 0)) * 0.5rem));
	visibility: hidden;
	pointer-events: none;
}

.ecovoyager-header.is-tabs-docking .header-dock-book {
	visibility: visible;
}

.ecovoyager-header.is-tabs-docked .header-dock-book {
	pointer-events: auto;
}

/* From the instant its natural position reaches the header, the real
   strip continues up under the opaque header instead of sticking
   below it. Its flow height is untouched, so the panel beneath does
   not jump; it is simply covered, in proportion to p. */
html.ev-tabs-docking .evptt-bar {
	top: 0;
}

/* The sentinel is a zero height marker and must stay one. */
.evptt-dock-sentinel {
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Two Book Now buttons on one screen is one too many. On desktop the
   header carries it while docked, so the floating one stands down. On
   mobile the header has no room for it, so the floating one stays. */
@media (min-width: 769px) {
	html.ev-tabs-docked .ev-floating-cta {
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
	}
}

/* ---------- 768 and below ---------- */
/* No room to centre pills between a logo and a hamburger, so once
   docking begins the strip becomes the row's middle: in flow,
   scrollable, edge faded like the bar it mirrors, and the logo drops
   its wordmark to give it the width. Book Now is not shown here;
   Contact Us is not either. */
@media (max-width: 768px) {
	.header-dock-tabs {
		display: none;
		position: static;
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
		margin: 0 0.25rem;
		padding: 0 0.5rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		transform: none;
	}

	.ecovoyager-header.is-tabs-docking .header-dock-tabs {
		display: flex;
		transform: none;
	}

	.header-dock-tab {
		scroll-snap-align: center;
	}

	/*
	 * The two rules that used to live here hid .logo-text and removed
	 * .logo-icon's right margin while the tabs docked, to buy width on a
	 * narrow screen. Both elements are gone: the header is the mark on
	 * its own now and it carries no margin, so there is nothing left to
	 * collapse and nothing to replace them with.
	 */

	.header-dock-book {
		display: none;
	}
}

/* ==================================================================
   SITE FOOTER
   footer.php + assets/js/footer.js

   Loads on every page. The 100vw plus negative margin full bleed hack
   is gone, along with the overflow-x: hidden that contained it.

   Cascade note: the generic .evp-footer a rule below is (0,1,1), so
   the specific link rules carry an `a` type selector to match it and
   win on source order. That is what the !important declarations in
   the salvaged file were standing in for.
   ================================================================== */
.evp-footer {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.evp-footer * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.evp-footer a,
.evp-footer a:hover,
.evp-footer a:focus,
.evp-footer a:active,
.evp-footer a:visited {
	text-decoration: none;
	border-bottom: none;
	color: inherit;
}

.evp-footer-container {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 4.5rem 3rem 1.75rem;
	position: relative;
}

.evp-footer-main {
	display: grid;
	grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
	gap: 3.5rem;
	margin-bottom: 3.5rem;
}

/* ---------- Company column ---------- */
.evp-footer-company { max-width: 26.25rem; }

.evp-footer-logo-section {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.375rem;
}

.evp-footer-logo-icon {
	width: 3.5rem;
	height: 3.5rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evp-footer-logo-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.evp-footer-logo-text {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.6rem;
	font-weight: 400;
	color: #fff;
	letter-spacing: 0.02em;
	line-height: 1;
}

.evp-footer-tagline {
	font-size: 0.88rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.5rem;
}

.evp-footer-contact-info {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
}

.evp-footer-contact-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.25s ease;
}

.evp-footer-contact-item a {
	color: inherit;
	transition: color 0.25s ease;
}

.evp-footer-contact-item a:hover { color: var(--wp--preset--color--gold); }

.evp-footer-contact-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	stroke: var(--wp--preset--color--rust);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evp-footer-social {
	display: flex;
	gap: 0.625rem;
}

.evp-footer-social-link {
	width: 2.625rem;
	height: 2.625rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	transition: all 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-footer-social-link:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(184, 98, 27, 0.4);
}

.evp-footer-social-link svg {
	width: 1.0625rem;
	height: 1.0625rem;
}

/* ---------- Section headers ---------- */
.evp-footer-section {
	display: flex;
	flex-direction: column;
}

/* font-family is declared because these are <h3> elements, and the
   global heading rule would otherwise put them in Playfair Display.
   The salvaged footer rendered them in Montserrat. */
.evp-footer-section-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.375rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.evp-footer-section-title::before {
	content: '';
	width: 1.5rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

/* ---------- Link lists ---------- */
.evp-footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

a.evp-footer-link {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	padding: 0.5rem 0;
	transition: color 0.25s ease, transform 0.25s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
}

a.evp-footer-link::before {
	content: '';
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transition: width 0.3s ease;
}

a.evp-footer-link:hover { color: var(--wp--preset--color--gold); }
a.evp-footer-link:hover::before { width: 0.875rem; }

/* ---------- Contact form ---------- */
.evp-footer-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.evp-footer-form-msg {
	display: none;
	padding: 0.875rem 1rem;
	border-radius: 0.625rem;
	font-size: 0.82rem;
	line-height: 1.5;
	margin-bottom: 0.25rem;
}

.evp-footer-form-msg.show { display: block; }

.evp-footer-form-msg.success {
	background: rgba(34, 197, 94, 0.08);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, 0.25);
}

.evp-footer-form-msg.error {
	background: rgba(239, 68, 68, 0.08);
	color: #fca5a5;
	border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Form controls do not inherit font, so it is declared here. */
.evp-footer-form-input,
.evp-footer-form-textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.625rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.88rem;
	font-weight: 400;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.evp-footer-form-input::placeholder,
.evp-footer-form-textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 300;
}

.evp-footer-form-input:focus,
.evp-footer-form-textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(212, 196, 168, 0.55);
	box-shadow: 0 0 0 3px rgba(184, 98, 27, 0.12);
}

/* Set by footer.js on blur when the email does not parse. Declared
   after :focus so it behaves like the inline style it replaces. */
.evp-footer-form-input.is-invalid,
.evp-footer-form-textarea.is-invalid {
	border-color: rgba(239, 68, 68, 0.6);
}

.evp-footer-form-textarea {
	min-height: 6rem;
	resize: vertical;
	line-height: 1.6;
}

.evp-footer-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.9375rem 1.75rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3.125rem;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 24px rgba(184, 98, 27, 0.35);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 0.25rem;
	min-height: 3rem;
}

.evp-footer-form-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evp-footer-form-submit:hover::before { opacity: 1; }

.evp-footer-form-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(184, 98, 27, 0.5);
}

.evp-footer-form-submit > * {
	position: relative;
	z-index: 1;
}

.evp-footer-form-submit svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evp-footer-form-submit:hover svg { transform: translateX(3px); }

/* Declared after :hover so the disabled state wins on source order. */
.evp-footer-form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.evp-footer-form-submit.loading > * { opacity: 0; }

.evp-footer-form-submit.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: evpFooterSpin 0.7s linear infinite;
	z-index: 2;
}

@keyframes evpFooterSpin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Footer bottom ---------- */
.evp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding-top: 1.75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.125rem;
}

.evp-footer-copyright {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

.evp-footer-legal {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

a.evp-footer-legal-link {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.78rem;
	transition: color 0.25s ease;
	padding: 0.25rem 0;
}

a.evp-footer-legal-link:hover { color: var(--wp--preset--color--gold); }

/* ---------- 1024 and below ---------- */
@media (max-width: 1024px) {
	.evp-footer-container { padding: 3.75rem 2.5rem 1.5rem; }

	.evp-footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 2.75rem 2.25rem;
	}

	.evp-footer-company {
		grid-column: 1 / -1;
		max-width: 100%;
		text-align: center;
	}

	.evp-footer-logo-section { justify-content: center; }
	.evp-footer-contact-info { align-items: center; }
	.evp-footer-social { justify-content: center; }

	.evp-footer-tagline {
		margin-left: auto;
		margin-right: auto;
		max-width: 32.5rem;
	}
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.evp-footer-container { padding: 3.25rem 1.25rem 1.25rem; }

	.evp-footer-main {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		margin-bottom: 2.75rem;
	}

	.evp-footer-section { text-align: center; }

	.evp-footer-section-title {
		justify-content: center;
		margin-bottom: 1.125rem;
	}

	.evp-footer-logo-section {
		flex-direction: row;
		justify-content: center;
	}

	.evp-footer-logo-icon { width: 3.125rem; height: 3.125rem; }
	.evp-footer-logo-text { font-size: 1.4rem; }
	.evp-footer-tagline   { font-size: 0.86rem; }

	.evp-footer-links {
		align-items: center;
		gap: 0.25rem;
	}

	/* Full width, not fit-content as the desktop rule sets. The list is
	   centred here, so a fit-content link looks like a full width row
	   and is tappable only across the few characters of the label. A
	   tap an inch to either side of "About Us" hit nothing. */
	a.evp-footer-link {
		justify-content: center;
		width: 100%;
		padding: 0.625rem 0;
		font-size: 0.88rem;
	}

	a.evp-footer-link::before { display: none; }

	.evp-footer-form-submit {
		width: 100%;
		max-width: 20rem;
		margin-left: auto;
		margin-right: auto;
	}

	.evp-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 0.875rem;
		padding-top: 1.5rem;
	}

	/* The bottom bar repeats Privacy Policy, Terms of Use and Cookie
	   Preferences, all three of which are in the Legal column. On
	   desktop the two sit in different regions of a wide layout and the
	   repetition reads as a convention. Stacked into one column they
	   land within a screen of each other, so the second set is the same
	   three links asked twice. The copyright line stays. */
	.evp-footer-legal { display: none; }
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evp-footer-container { padding: 2.75rem 1rem 1rem; }
	.evp-footer-main      { gap: 2rem; }
	.evp-footer-logo-text { font-size: 1.25rem; }
	.evp-footer-tagline   { font-size: 0.84rem; }

	/* Tighter inputs on a narrow screen. The font size that used to sit
	   with this has moved to the touch block below, because it is about
	   the device rather than the width, but the padding really is about
	   the width and stays here. */
	.evp-footer-form-input,
	.evp-footer-form-textarea {
		padding: 0.8125rem 0.9375rem;
	}

	/* No .evp-footer-legal rule here. The 768 block above hides it, and
	   this block does not set display, so anything written for it would
	   be styling something nobody can see. */
	.evp-footer-copyright { font-size: 0.75rem; }
}

/* ---------- Touch ----------

   Keyed on the pointer, not on the viewport, because both problems this
   solves are properties of the input device rather than of the screen
   width. A phone held in landscape is commonly 667 to 932px wide, which
   is above every breakpoint above, and it is still a phone.

   THE 16px IS A DEVICE THRESHOLD, NOT A TYPE CHOICE
   iOS zooms the whole page when a form control it is focusing computes
   below 16px, and then leaves the page zoomed. This rule used to live in
   the 480 block, which meant the footer form zoomed the page on every
   phone in landscape and on every tablet. It is in px deliberately: the
   threshold is 16 CSS pixels whatever the root size is.

   44px IS THE MINIMUM TAP TARGET, and four things here were under it:
   the legal links resolved to about 22px, the contact links to about
   16px because they had no padding at all, the nav links to 41px and the
   social buttons to 42px. The contact links are the worst of those and
   the most important, since a phone number and an email address are the
   two things somebody reaching the footer on a phone is most likely to
   be reaching for.
*/
@media (pointer: coarse) {
	.evp-footer-form-input,
	.evp-footer-form-textarea {
		font-size: 16px;
	}

	/* The row is the target, not the few characters inside it. */
	.evp-footer-contact-item {
		min-height: 2.75rem;
	}

	.evp-footer-contact-item a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	a.evp-footer-link {
		min-height: 2.75rem;
	}

	a.evp-footer-legal-link {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0 0.25rem;
	}

	.evp-footer-social-link {
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* ---------- Focus ---------- */
a.evp-footer-link:focus-visible,
.evp-footer-social-link:focus-visible,
.evp-footer-form-submit:focus-visible,
a.evp-footer-legal-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	a.evp-footer-link,
	a.evp-footer-link::before,
	.evp-footer-social-link,
	.evp-footer-form-submit,
	.evp-footer-form-input,
	.evp-footer-form-textarea {
		transition: none;
	}

	.evp-footer-form-submit:hover,
	.evp-footer-social-link:hover {
		transform: none;
	}
}


/* ==================================================================
   BLOG
   parts/section-blog.php + assets/js/blog.js

   Rebuilt from salvage/homepage-blog-LIVE-20260818.html. The uniqid
   instance prefix that file carried (evpb-6a8406805baa7-) is gone: a
   template part renders once, so nothing needs scoping by instance.

   Full width by default, so the 100vw plus negative margin hack and the
   overflow-x: hidden that contained it are both gone. The 100vw that
   remains in the markup is a sizes attribute, which is legitimate.
   ================================================================== */
.evpb-section {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	padding: 5rem 0 0;
	position: relative;
}

.evpb-section *,
.evpb-section *::before,
.evpb-section *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ---------- Header ----------
   Left aligned, single leading dash, gradient rule. Matches the pattern
   hero, why travelers choose and testimonials already use. It previously
   drifted to a centred bilateral eyebrow with a pulsing diamond rule. */
.evpb-header {
	max-width: 87.5rem;
	margin: 0 auto 3.5rem;
	padding: 0 3rem;
	text-align: left;
}

.evpwt-js .evpb-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpb-header.vis {
	opacity: 1;
	transform: translateY(0);
}

.evpb-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.evpb-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpb-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin-bottom: 1.5rem;
}

.evpb-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpb-rule {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1.5rem;
}

.evpb-subtitle {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
	max-width: 38.75rem;
	margin: 0;
}

/* ---------- Grid ---------- */
.evpb-grid {
	max-width: 87.5rem;
	margin: 0 auto 3rem;
	padding: 0 3rem;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 1.75rem;
	align-items: stretch;
}

/* ---------- Featured post ---------- */
.evpb-featured {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.7s ease, transform 0.7s ease,
	            border-color 0.3s ease, background 0.3s ease;
}

.evpwt-js .evpb-featured {
	opacity: 0;
	transform: translateY(20px);
}

.evpb-featured.vis {
	opacity: 1;
	transform: translateY(0);
}

.evpb-featured:hover {
	border-color: rgba(184, 98, 27, 0.32);
	background: rgba(255, 255, 255, 0.06);
}

.evpb-featured-img {
	position: relative;
	height: 22.5rem;
	overflow: hidden;
	flex-shrink: 0;
	background: #0a0706;
}

.evpb-featured-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.9) saturate(0.95);
	transition: transform 0.8s ease, filter 0.5s ease;
}

.evpb-featured:hover .evpb-featured-img img {
	transform: scale(1.04);
	filter: brightness(1) saturate(1.05);
}

.evpb-featured-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(17, 16, 16, 0.55) 100%);
	pointer-events: none;
}

.evpb-category {
	position: absolute;
	top: 1.125rem;
	left: 1.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25rem 0.6875rem;
	border-radius: 3.125rem;
	z-index: 3;
	box-shadow: 0 4px 14px rgba(184, 98, 27, 0.4);
}

.evpb-featured-body {
	padding: 1.75rem 1.875rem 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.evpb-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.875rem;
}

.evpb-meta span,
.evpb-meta time {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.evpb-meta svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke: var(--wp--preset--color--rust);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

.evpb-featured-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.7rem;
	font-weight: 400;
	color: #fff;
	line-height: 1.25;
	margin-bottom: 0.875rem;
}

.evpb-rule-sm {
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 0.875rem;
}

.evpb-excerpt {
	font-size: 0.88rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.375rem;
	flex: 1;
}

.evpb-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.28);
	padding-bottom: 0.1875rem;
	width: fit-content;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evpb-featured:hover .evpb-read-more,
.evpb-read-more:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.evpb-read-more svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.evpb-featured:hover .evpb-read-more svg,
.evpb-read-more:hover svg {
	transform: translate(3px, -3px);
}

/* ---------- Side column ---------- */
.evpb-side {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.evpb-side-post {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.875rem;
	overflow: hidden;
	display: flex;
	gap: 1rem;
	flex: 1;
	min-height: 8.125rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.6s ease, transform 0.6s ease,
	            border-color 0.3s ease, background 0.3s ease;
}

/* blog.js sets the stagger via transition-delay, so it scales with any
   number of posts rather than being hardcoded to :nth-child(1..4). */
.evpwt-js .evpb-side-post {
	opacity: 0;
	transform: translateY(20px);
}

.evpb-side-post.vis {
	opacity: 1;
	transform: translateY(0);
}

.evpb-side-post:hover {
	border-color: rgba(184, 98, 27, 0.32);
	background: rgba(255, 255, 255, 0.06);
}

.evpb-side-img {
	flex: 0 0 8.75rem;
	position: relative;
	overflow: hidden;
	background: #0a0706;
}

.evpb-side-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.88);
	transition: transform 0.6s ease, filter 0.5s ease;
}

.evpb-side-post:hover .evpb-side-img img {
	transform: scale(1.06);
	filter: brightness(1);
}

.evpb-side-body {
	padding: 0.875rem 1.125rem 0.875rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
}

.evpb-side-category {
	font-size: 0.54rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.5rem;
}

.evpb-side-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1rem;
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.evpb-side-meta {
	font-size: 0.65rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
}

.evpb-side-meta svg {
	width: 0.6875rem;
	height: 0.6875rem;
	stroke: var(--wp--preset--color--rust);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

/* ---------- CTA ---------- */
.evpb-cta-wrap {
	text-align: center;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem 4.5rem;
}

.evpb-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.evpb-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpb-cta:hover::before { opacity: 1; }

.evpb-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpb-cta > * {
	position: relative;
	z-index: 1;
}

.evpb-cta svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpb-cta:hover svg { transform: translateX(3px); }

/* ---------- The Dispatch ----------
   A standalone CTA panel, not a section header, so this one is centred
   on purpose. Keeps the top border so it reads as separate from the
   article grid above it. The subscribe form is gone; see the note in
   section-blog.php. */
.evpb-newsletter {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 3.5rem 3rem 4.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .evpb-newsletter {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpb-newsletter.vis {
	opacity: 1;
	transform: translateY(0);
}

.evpb-newsletter-line {
	width: 3.125rem;
	height: 1.5px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust), transparent);
	flex-shrink: 0;
	margin-bottom: 1.75rem;
}

/* Readable measure, matching the section subtitles. */
.evpb-newsletter-body {
	max-width: 38.75rem;
}

.evpb-newsletter-eyebrow {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.625rem;
}

.evpb-newsletter-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

.evpb-newsletter-desc {
	font-size: 0.88rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.75rem;
	max-width: 100%;
}

/* ---------- 1200 and below ---------- */
@media (max-width: 1200px) {
	.evpb-featured-img   { height: 20rem; }
	.evpb-featured-title { font-size: 1.55rem; }
}

/* ---------- 1024 and below ---------- */
@media (max-width: 1024px) {
	.evpb-header     { padding: 0 2.5rem; margin-bottom: 2.75rem; }
	.evpb-grid       { padding: 0 2.5rem; gap: 1.5rem; margin-bottom: 2.5rem; }
	.evpb-cta-wrap   { padding: 0 2.5rem 3.75rem; }
	.evpb-newsletter { padding: 3rem 2.5rem 4rem; gap: 2.5rem; }

	.evpb-featured-img   { height: 18.75rem; }
	.evpb-featured-body  { padding: 1.625rem 1.625rem 1.75rem; }
	.evpb-featured-title { font-size: 1.45rem; }
	.evpb-side-img       { flex: 0 0 8.125rem; }
}

/* ---------- 900 and below ----------
   Off the standard ladder, carried over from the reference unchanged. */
@media (max-width: 900px) {
	.evpb-grid { grid-template-columns: 1fr; }

	.evpb-side {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.evpb-side-post {
		flex: 1 1 calc(50% - 0.5rem);
		min-width: 15rem;
		flex-direction: column;
		min-height: 0;
		gap: 0;
	}

	.evpb-side-img {
		flex: none;
		width: 100%;
		height: 11.25rem;
		position: relative;
	}

	.evpb-side-body  { padding: 1rem 1.25rem 1.25rem; }
	.evpb-side-title { font-size: 1.05rem; }
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.evpb-section { padding: 3.5rem 0 0; }

	/* Same centring treatment as the why choose header. */
	.evpb-header {
		padding: 0 1.25rem;
		margin-bottom: 2.25rem;
		text-align: center;
	}

	.evpb-eyebrow { justify-content: center; }
	.evpb-eyebrow::before { display: none; }

	.evpb-rule {
		width: 3.125rem;
		margin-left: auto;
		margin-right: auto;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	.evpb-subtitle {
		font-size: 1rem;
		padding: 0 0.25rem;
		margin-left: auto;
		margin-right: auto;
	}

	.evpb-grid     { padding: 0 1.25rem; gap: 0.875rem; margin-bottom: 2rem; }
	.evpb-cta-wrap { padding: 0 1.25rem 3rem; }

	.evpb-featured-img   { height: 15rem; }
	.evpb-featured-body  { padding: 1.375rem 1.25rem 1.625rem; }
	.evpb-featured-title { font-size: 1.45rem; line-height: 1.22; }
	.evpb-excerpt        { font-size: 0.92rem; line-height: 1.8; }

	.evpb-read-more {
		font-size: 0.68rem;
		padding: 0.5rem 0 0.1875rem;
		min-height: 2.5rem;
		display: inline-flex;
		align-items: center;
	}

	.evpb-meta { font-size: 0.72rem; gap: 0.875rem; }

	.evpb-side {
		flex-direction: column;
		gap: 0.75rem;
	}

	.evpb-side-post {
		flex: none;
		flex-direction: row;
		gap: 0.875rem;
		min-height: 7.5rem;
	}

	.evpb-side-img {
		flex: 0 0 7.5rem;
		width: auto;
		height: auto;
	}

	.evpb-side-body  { padding: 0.875rem 1rem 0.875rem 0; }
	.evpb-side-title { font-size: 0.98rem; line-height: 1.3; }

	/* Column, centred and horizontally ruled at every width now, so
	   only the padding changes here. */
	.evpb-newsletter { padding: 2.75rem 1.25rem 3.5rem; }

	.evpb-cta {
		width: 100%;
		max-width: 20rem;
		padding: 1.0625rem 2.25rem;
		font-size: 0.7rem;
		justify-content: center;
		min-height: 3rem;
		-webkit-tap-highlight-color: transparent;
	}

	.evpb-cta:active { transform: scale(0.98); }
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evpb-section  { padding: 3rem 0 0; }
	.evpb-header   { padding: 0 1rem; margin-bottom: 1.875rem; }
	.evpb-grid     { padding: 0 1rem; gap: 0.75rem; margin-bottom: 1.75rem; }
	.evpb-cta-wrap { padding: 0 1rem 2.5rem; }

	.evpb-featured-img   { height: 13.125rem; }
	.evpb-featured-body  { padding: 1.25rem 1.125rem 1.5rem; }
	.evpb-featured-title { font-size: 1.3rem; }
	.evpb-excerpt        { font-size: 0.9rem; }

	.evpb-side-img   { flex: 0 0 6.75rem; }
	.evpb-side-body  { padding: 0.75rem 0.875rem 0.75rem 0; }
	.evpb-side-title { font-size: 0.92rem; }
	.evpb-side-post  { min-height: 6.75rem; }

	.evpb-newsletter       { padding: 2.25rem 1rem 3rem; }
	.evpb-newsletter-title { font-size: 1.3rem; }

	.evpb-cta { padding: 1rem 1.75rem; font-size: 0.68rem; max-width: 18.125rem; }
}

/* ---------- 360 and below ---------- */
@media (max-width: 360px) {
	.evpb-featured-title { font-size: 1.2rem; }
	.evpb-side-img       { flex: 0 0 6rem; }
	.evpb-side-post      { min-height: 6rem; }
	.evpb-cta            { max-width: 16.875rem; padding: 0.9375rem 1.5rem; }
}

/* ---------- Focus ---------- */
.evpb-cta:focus-visible,
.evpb-featured:focus-visible,
.evpb-side-post:focus-visible,
.evpb-read-more:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.evpb-section .evpb-header,
	.evpb-section .evpb-featured,
	.evpb-section .evpb-side-post,
	.evpb-section .evpb-newsletter {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.evpb-featured-img img,
	.evpb-side-img img { transition: none; }
}


/* ==================================================================
   EXPEDITIONS
   parts/section-expeditions.php + assets/js/expeditions.js

   Rebuilt from salvage/homepage-expeditions-LIVE-20260818.html. The
   uniqid instance prefix (evpexp-6a840621a9bab-) is gone; a template
   part renders once. This was the last uniqid in the codebase.

   Full width by default: the 100vw plus negative margin hack and the
   overflow-x: hidden that contained it are both gone. The 100vw left in
   the markup is inside sizes attributes, which is legitimate.

   Structure note: .evpexp-cards is a SIBLING of .evpexp-left, not a
   child. .evpexp-inner is a 420px / 1fr grid, so nesting the cards
   leaves the right column empty and produces a black void on desktop.
   ================================================================== */
.evpexp-section {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evpexp-section *,
.evpexp-section *::before,
.evpexp-section *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Scoped to the section so it outranks the universal reset above
   without reaching for !important. */
.evpexp-section .evpexp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.evpexp-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 26.25rem 1fr;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------- Left panel ---------- */
.evpexp-left {
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .evpexp-left {
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpexp-left.vis {
	opacity: 1;
	transform: translateX(0);
}

.evpexp-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.75rem;
}

.evpexp-eyebrow::before {
	content: '';
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpexp-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 4vw, 4.2rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin-bottom: 0.375rem;
}

.evpexp-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
	display: block;
}

.evpexp-rule {
	width: 2rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin: 1.25rem 0;
}

.evpexp-desc {
	font-size: 0.88rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1.75rem;
}

.evpexp-features {
	list-style: none;
	padding-left: 0;
	margin: 0 0 2.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.evpexp-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.5;
	list-style: none;
}

.evpexp-feature-dot {
	width: 0.375rem;
	height: 0.375rem;
	background: var(--wp--preset--color--rust);
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 0.375rem;
}

/* Shared button spec: 1rem 2rem, 0.72rem, -3px lift. */
.evpexp-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.35);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	width: fit-content;
	min-height: 2.75rem;
}

.evpexp-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpexp-cta:hover::before { opacity: 1; }

.evpexp-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(184, 98, 27, 0.5);
}

.evpexp-cta > * {
	position: relative;
	z-index: 1;
}

.evpexp-cta svg {
	width: 0.9375rem;
	height: 0.9375rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpexp-cta:hover svg { transform: translateX(3px); }

/* ---------- Cards: desktop 2x2, featured spanning both rows ---------- */
.evpexp-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	height: 100%;
	overflow: hidden;
}

.evpwt-js .evpexp-cards {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.evpexp-cards.vis {
	opacity: 1;
	transform: translateY(0);
}

/* The 2x2 grid assumes three cards. With fewer, collapse the tracks so
   there is no empty cell. */
.evpexp-cards--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.evpexp-cards--2 {
	grid-template-rows: 1fr;
}

.evpexp-cards--1 .evpexp-card-featured,
.evpexp-cards--2 .evpexp-card-featured {
	grid-row: auto;
}

.evpexp-card {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	display: block;
	min-height: 15rem;
}

.evpexp-card-featured { grid-row: 1 / 3; }

.evpexp-card-img-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0a0706;
}

.evpexp-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.82);
	transition: transform 0.8s ease, filter 0.5s ease;
}

.evpexp-card:hover .evpexp-card-img {
	transform: scale(1.06);
	filter: brightness(0.88);
}

.evpexp-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(10, 7, 4, 0.5) 70%, rgba(10, 7, 4, 0.92) 100%);
	pointer-events: none;
	z-index: 2;
}

.evpexp-card-badge {
	position: absolute;
	top: 1.125rem;
	left: 1.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25rem 0.6875rem;
	border-radius: 3.125rem;
	z-index: 3;
	box-shadow: 0 4px 14px rgba(184, 98, 27, 0.4);
}

.evpexp-card-duration {
	position: absolute;
	top: 1.125rem;
	right: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	border-radius: 3.125rem;
	padding: 0.25rem 0.6875rem;
	font-size: 0.58rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
	z-index: 3;
}

.evpexp-card-duration svg {
	width: 0.625rem;
	height: 0.625rem;
	stroke: var(--wp--preset--color--gold);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

.evpexp-card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.375rem;
	z-index: 3;
}

.evpexp-card-featured .evpexp-card-body { padding: 1.75rem; }

.evpexp-card-destination {
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.375rem;
}

.evpexp-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 0.5rem;
}

.evpexp-card-featured .evpexp-card-title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.evpexp-card-meta {
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.evpexp-card-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	line-height: 1;
}

.evpexp-card-price span {
	font-size: 0.68rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.4);
}

/* Mobile-only UI, hidden on desktop. */
.evpexp-mob-hint,
.evpexp-mob-dots-wrap { display: none; }

@keyframes evpexpArrow {
	0%, 100% { transform: translateX(0);   opacity: 0.5; }
	50%      { transform: translateX(5px); opacity: 1; }
}

/* ---------- Focus ---------- */
.evpexp-card:focus-visible,
.evpexp-cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: 4px;
}

.evpexp-mob-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

/* ---------- 1280 and below ----------
   1280 and 1100 are off the standard ladder. Carried over from the
   reference unchanged, since the brief is to preserve breakpoints. */
@media (max-width: 1280px) {
	.evpexp-inner { grid-template-columns: 22.5rem 1fr; }
	.evpexp-left  { padding: 3rem 2.5rem; }
}

@media (max-width: 1100px) {
	.evpexp-inner { grid-template-columns: 20rem 1fr; }
	.evpexp-left  { padding: 2.5rem 2rem; }
}

/* ---------- 900 and below: grid becomes a scroll snap carousel ---------- */
@media (max-width: 900px) {
	.evpexp-inner {
		grid-template-columns: 1fr;
		overflow: visible;
	}

	.evpexp-left {
		padding: 2.75rem 1.25rem 1.5rem;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.evpexp-title {
		font-size: clamp(2.8rem, 5.5vw, 4.4rem);
		line-height: 1;
	}

	.evpexp-title em { display: inline; }

	.evpexp-cta {
		width: 100%;
		justify-content: center;
	}

	.evpexp-cards,
	.evpexp-cards--1,
	.evpexp-cards--2 {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		width: 100%;
		margin: 0;
	}

	/* Cards do not reveal in the carousel; needs the .evpwt-js prefix to
	   match the specificity of the rule that hides them. */
	.evpwt-js .evpexp-cards {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evpexp-cards::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.evpexp-card {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		height: 72vw;
		min-height: 20rem;
		max-height: 30rem;
		border-left: none;
		border-bottom: none;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.evpexp-card-featured { grid-row: auto; }

	.evpexp-card-body { padding: 0.5rem 0.875rem 0; }
	.evpexp-card-featured .evpexp-card-body { padding: 0.625rem 1rem 0; }

	.evpexp-card::after {
		background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(10, 7, 4, 0.55) 65%, rgba(10, 7, 4, 0.94) 100%);
	}

	.evpexp-card-destination { font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 0.125rem; }
	.evpexp-card-title       { font-size: 1.2rem; line-height: 1.15; margin-bottom: 0.25rem; }
	.evpexp-card-featured .evpexp-card-title { font-size: 1.3rem; line-height: 1.15; margin-bottom: 0.25rem; }
	.evpexp-card-meta        { padding-top: 0.25rem; }
	.evpexp-card-badge       { font-size: 0.58rem; }
	.evpexp-card-duration    { font-size: 0.58rem; }
	.evpexp-card-price       { font-size: 1rem; }
	.evpexp-card-price span  { font-size: 0.72rem; }

	.evpexp-mob-hint,
	.evpexp-mob-dots-wrap { display: flex; }

	.evpexp-mob-hint {
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		padding: 0.875rem 0 0;
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.evpexp-mob-hint.is-visible { opacity: 1; }
	.evpexp-mob-hint.is-hidden  { opacity: 0; pointer-events: none; }

	.evpexp-mob-hint span {
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.35);
	}

	.evpexp-mob-hint svg {
		width: 1.125rem;
		height: 1.125rem;
		stroke: rgba(255, 255, 255, 0.35);
		fill: none;
		stroke-width: 2;
		animation: evpexpArrow 1.4s ease-in-out infinite;
	}

	/* Dots keep a 44px hit area; the visible dot is the ::before. */
	.evpexp-mob-dots-wrap {
		justify-content: center;
		padding: 1.125rem 0 2rem;
	}

	.evpexp-mob-dots {
		display: flex;
		gap: 0;
	}

	.evpexp-mob-dot {
		width: 2.75rem;
		height: 2.75rem;
		min-width: 2.75rem;
		min-height: 2.75rem;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
		position: relative;
		-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.evpexp-mob-dot::before {
		content: '';
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
	}

	.evpexp-mob-dot.is-active::before,
	.evpexp-mob-dot[aria-current="true"]::before {
		background: var(--wp--preset--color--rust);
		width: 1.5rem;
		border-radius: 0.25rem;
	}
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evpexp-left { padding: 2.75rem 1rem 1.5rem; }
	.evpexp-card { height: 85vw; }

	/*
	   No full bleed here. This was width: calc(100% + 2rem) with a -1rem
	   margin each side, the negative margin version of the 100vw hack,
	   and every ancestor of this element has zero horizontal padding, so
	   it bled past nothing and only put a horizontal scrollbar on the
	   homepage below 480. The scroller already runs the full width of
	   its column.
	*/
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.evpexp-section .evpexp-left,
	.evpexp-section .evpexp-cards,
	.evpexp-section .evpexp-card {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.evpexp-card-img     { transition: none; }
	.evpexp-mob-hint svg { animation: none; }
	.evpexp-cards        { scroll-behavior: auto; }
}


/* ==================================================================
   TOURS
   parts/section-tours.php + assets/js/tours.js

   Rebuilt from salvage/homepage-tours-LIVE-20260818.html. The uniqid
   instance prefix (destpg-6a83f4f30946e-) is gone; that was the last
   uniqid in the codebase. The destpg- base is kept because it is what
   every class in the reference is named after.

   THE 100vw BUG
   The reference used width/max-width: 100vw with
   margin-left: calc(-50vw + 50%) for full bleed. 100vw includes the
   scrollbar while 50% refers to the parent, so the section overflowed
   to the right and produced a horizontal scrollbar on the body. That
   was patched with an outer wrapper carrying overflow-x: hidden, then
   patched again in JS by measuring documentElement.clientWidth. All
   three are gone: a template part is full width by default. The vw
   units left in the file are card widths and sizes attributes, which
   are legitimate.

   Breakpoints here are min-width ranges rather than the usual
   max-width ladder, carried over from the reference unchanged.
   ================================================================== */
.destpg-section {
	--destpg-card-bg:   rgba(30, 25, 20, 0.97);
	--destpg-muted:     rgba(255, 255, 255, 0.45);
	--destpg-sale-gold: #e8b84b;
	--destpg-sale-dark: #1a1000;

	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	display: block;
	position: relative;
}

.destpg-section * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.destpg-section a {
	text-decoration: none;
	color: inherit;
}

/* Scoped to the section so it outranks the universal reset above. */
.destpg-section .destpg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.destpg-card-btn,
.destpg-side-btn,
.destpg-see-all-btn,
.destpg-bespoke-cta-btn {
	-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
	cursor: pointer;
	min-height: 2.75rem;
}

/* ---------- Header ---------- */

/* THE SITE CONTAINER, not a gutter of its own.
   This header used to be full bleed with a 5rem gutter while the
   carousel below it sat in a centred 75rem box, so the heading and the
   first card drifted further apart the wider the window got: 74px at
   1280, 394px at 1920. Every other homepage section is 87.5rem with
   3rem of padding and auto margins, see .evpwt-header, .ev-t-header,
   .evpb-grid and .evpexp-inner. This is now the same box. */
.destpg-header {
	background: var(--wp--preset--color--bg-deep);
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 4.5rem 3rem 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .destpg-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.destpg-header.visible {
	opacity: 1;
	transform: translateY(0);
}

.destpg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.destpg-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.destpg-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin: 0 0 1.25rem;
}

.destpg-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.destpg-descriptor {
	font-size: 0.875rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.38);
	line-height: 1.7;
	max-width: 28.75rem;
	margin: 0;
}

/* ---------- Carousel ---------- */
.destpg-carousel-section {
	background: var(--wp--preset--color--bg-deep);
	padding: 2rem 0 3.5rem;
	position: relative;
}

/* Same box as .destpg-header above, so the first card starts where the
   heading starts. justify-content is flex-start rather than center
   because centring distributed the leftover space and pushed the track
   a few more pixels right; with the arrows out of flow there is nothing
   left to centre anyway. */
.destpg-carousel-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem;
	position: relative;
	overflow: hidden;
}

/* OUT OF FLOW. These were flex children, and the prev button plus its
   margin came to exactly 5rem, which was silently doing the job of the
   old header gutter and pushing the first card 80px right of the
   heading. Absolute keeps them where they look the same and stops them
   contributing any width. They overlay the 3rem gutter and the first
   8px of the outermost card, which is what an overlay arrow does. */
.destpg-side-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3.25rem;
	height: 3.25rem;
	min-width: 3.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	z-index: 10;
	flex-shrink: 0;
}

.destpg-side-btn svg {
	width: 1.375rem;
	height: 1.375rem;
	stroke: #fff;
	transition: all 0.3s ease;
}

.destpg-side-btn:hover:not(:disabled) {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	/* translateY is repeated on purpose: a second transform replaces
	   the first rather than adding to it, and leaving it out would drop
	   the button half its own height on hover. */
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 8px 25px rgba(184, 98, 27, 0.4);
}

.destpg-side-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	transform: translateY(-50%);
}

/* Pinned to the wrapper's border box, which is the container edge. The
   margins are gone: they only ever spaced flex siblings. */
.destpg-side-btn-prev { left: 0; margin-right: 0; }
.destpg-side-btn-next { right: 0; margin-left: 0; }

.destpg-carousel {
	position: relative;
	overflow: visible;
	flex: 1;
	/* Was calc(100% - 10rem), reserving room for two in-flow buttons.
	   They are out of flow now, so the track gets the whole container. */
	max-width: 100%;
}

.destpg-track {
	display: flex;
	gap: 1.25rem;
	padding: 0.75rem 0 1.25rem;
	transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	width: fit-content;
	align-items: stretch;
}

/* Declared after the base rule so it wins on source order while the
   user is dragging. */
.destpg-track.dragging { transition: none; }

/* ==================================================================
   THE TOUR CARDS OWN THEIR BOX MODEL

   This stylesheet has no global reset. Every section declares its own,
   scoped to itself: .destpg-section *, .evpco-hero *, .evpdt *, and so
   on. That works right up until a component is rendered outside the
   section it was written for, which is exactly what happened to these
   two cards.

   .destpg-card was written inside .destpg-section, which resets
   box-sizing. It is now also rendered by the destination tours
   listing, the tours listing, the destination tours carousel, the
   location page and search results, none of which are inside that
   wrapper. There it fell back to content-box, so .destpg-card-btn's
   width: 100% plus its 2rem of horizontal padding came to the card
   width plus 64px and the button crossed the card's rounded edge.
   .evpco-tour-card had the same problem for the same reason: it sits
   beside .evpco-hero rather than inside it.

   Measured at 1440, before: the button overhung the card's right edge
   by 45px in the tour grid and 39px in the featured panel, on every
   card, on five templates. Inside .destpg-section the same card sat
   19px clear. Injecting nothing but this rule brought both to a
   negative overhang.

   So the reset travels with the card instead of with whatever happens
   to be wrapping it. box-sizing only: the section resets also zero
   every margin and padding, and copying that would change type
   spacing rather than fix a box model.
   ================================================================== */

.destpg-card,
.destpg-card *,
.destpg-card *::before,
.destpg-card *::after,
.evpco-tour-card,
.evpco-tour-card *,
.evpco-tour-card *::before,
.evpco-tour-card *::after {
	box-sizing: border-box;
}

/* ---------- Card ---------- */
.destpg-card {
	flex: 0 0 20rem;
	max-width: 20rem;
	min-width: 20rem;
	background: var(--destpg-card-bg);
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.6s ease;
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

/* The staggered reveal is OPT IN, and the opt in is in the markup.

   It used to be gated on .evpwt-js alone, which says only that the page
   has JavaScript, not that anything on this page will ever add
   .revealed. The class that clears it is added by tours.js, which is
   enqueued on the front page and nowhere else, so the first other
   template to render a .destpg-card got cards stuck at opacity 0. That
   was the destination tours carousel.

   A track opts in by carrying .ev-cards-animate, and only the section
   whose script does the revealing sets it. A page that renders these
   cards with no reveal script shows them, which is the state that
   should never depend on a script running. .evpwt-js stays in front so
   that no JavaScript at all also means no hidden cards. */
.evpwt-js .ev-cards-animate .destpg-card {
	opacity: 0;
	transform: translateY(30px);
}

.evpwt-js .ev-cards-animate .destpg-card.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpwt-js .ev-cards-animate .destpg-card:nth-child(1) { transition-delay: 0.05s; }
.evpwt-js .ev-cards-animate .destpg-card:nth-child(2) { transition-delay: 0.12s; }
.evpwt-js .ev-cards-animate .destpg-card:nth-child(3) { transition-delay: 0.19s; }
.evpwt-js .ev-cards-animate .destpg-card:nth-child(4) { transition-delay: 0.26s; }
.evpwt-js .ev-cards-animate .destpg-card:nth-child(5) { transition-delay: 0.33s; }
.evpwt-js .ev-cards-animate .destpg-card:nth-child(6) { transition-delay: 0.40s; }

.destpg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 64px rgba(184, 98, 27, 0.25);
	border-color: rgba(184, 98, 27, 0.35);
}

/* Full card overlay link, and the visible button lifted above it so it
   stays clickable. Removing either breaks the v8a accessibility fix. */
.destpg-card-link-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
}

.destpg-card-cta {
	position: relative;
	z-index: 2;
}

.destpg-card-image {
	position: relative;
	width: 100%;
	height: 13.125rem;
	overflow: hidden;
	flex-shrink: 0;
	background: #0a0706;
}

.destpg-card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}

.destpg-card:hover .destpg-card-image img { transform: scale(1.04); }

.destpg-card-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 7.5rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	pointer-events: none;
}

.destpg-card-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	padding: 0.3125rem 0.8125rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 3.125rem;
	z-index: 3;
	box-shadow: 0 4px 14px rgba(184, 98, 27, 0.4);
}

.destpg-card-sale-pill {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	background: var(--destpg-sale-gold);
	color: var(--destpg-sale-dark);
	padding: 0.3125rem 0.75rem;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 3.125rem;
	z-index: 3;
	box-shadow: 0 4px 14px rgba(232, 184, 75, 0.5);
}

/* em on purpose: the icon scales with the pill's own font size. */
.destpg-card-sale-pill-icon {
	font-size: 1.1em;
	line-height: 1;
}

.destpg-card-body {
	padding: 1.25rem 1.25rem 1.125rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.destpg-card-country {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.5rem;
}

.destpg-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.45rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.destpg-card-subtitle {
	font-size: 0.82rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.45;
	margin-bottom: 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.destpg-card-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.875rem;
}

.destpg-card-stat {
	padding: 0.625rem 0.75rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.625rem;
}

.destpg-card-stat-label {
	font-size: 0.57rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--destpg-muted);
	margin-bottom: 0.25rem;
}

.destpg-card-stat-value {
	font-size: 0.87rem;
	font-weight: 700;
	color: #fff;
}

.destpg-card-stat-value.price { color: var(--wp--preset--color--gold-light); }

.destpg-card-stat.on-sale {
	background: rgba(232, 184, 75, 0.07);
	border-color: rgba(232, 184, 75, 0.28);
	position: relative;
	overflow: hidden;
}

.destpg-card-stat.on-sale::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--destpg-sale-gold), #f5d080);
}

.destpg-sale-price-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.destpg-sale-price-new {
	font-size: 0.87rem;
	font-weight: 700;
	color: var(--destpg-sale-gold);
}

.destpg-sale-price-old {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.3);
	text-decoration: line-through;
}

.destpg-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 3.125rem;
	box-shadow: 0 6px 24px rgba(184, 98, 27, 0.4);
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.destpg-card-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.destpg-card-btn:hover::before { opacity: 1; }

.destpg-card-btn:hover {
	transform: translateY(-3px);
}

.destpg-card-btn > * {
	position: relative;
	z-index: 1;
}

.destpg-card-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.destpg-card-btn:hover svg { transform: translateX(3px); }

/* ---------- Dots ---------- */
/* ---------- Pager ----------
   One dot per slide, and on a phone a slide is one card, so there are
   as many dots as there are tours. Unwrapped and centred that row was
   836px in a 480px viewport; wrapped, forty tours made a five row grid
   of dots under the card, on desktop too, where 38 dots at 2.75rem is
   wider than any screen. Now the dots sit on a strip inside a window
   --destpg-dot-window slots wide, and tours.js slides the strip so the
   active dot stays in view. The window count is set here, per width,
   and the script reads it; the counter carries the number the dots
   cannot; the small arrows page on the widths where the side arrows
   are hidden. */
.destpg-dots-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0 1.25rem;
}

/* tours.js sets this when there is nothing to page through. */
.destpg-dots-wrapper.is-hidden { display: none; }

.destpg-dots {
	--destpg-dot-window: 7;
	--destpg-dot-slot: 2rem;
	width: calc(var(--destpg-dot-window) * var(--destpg-dot-slot));
	flex: 0 0 auto;
	overflow: hidden;
}

.destpg-dots-strip {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	transition: transform 0.3s ease;
	will-change: transform;
}

.destpg-dot {
	width: var(--destpg-dot-slot);
	height: 2.75rem;
	min-width: var(--destpg-dot-slot);
	min-height: 2.75rem;
	flex: 0 0 auto;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.destpg-dot::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.destpg-dot:hover::before { background: rgba(255, 255, 255, 0.35); }

/* The outermost dot in view on a side that has more dots beyond it. */
.destpg-dot.is-edge::before {
	transform: scale(0.6);
	opacity: 0.7;
}

.destpg-dot.active::before {
	background: var(--wp--preset--color--rust);
	width: 1.5rem;
	border-radius: 0.25rem;
}

.destpg-pager-count {
	min-width: 3.25rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--destpg-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Shown below 769px, where .destpg-side-btn is display none. */
.destpg-pager-btn {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
	transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.destpg-pager-btn svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: currentColor;
	fill: none;
}

.destpg-pager-btn:hover:not(:disabled) {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.destpg-pager-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

/* ---------- See all ---------- */
.destpg-see-all-wrapper {
	background: var(--wp--preset--color--bg-deep);
	padding: 2rem 0 3rem;
	text-align: center;
}

.destpg-cta-row {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.destpg-see-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: transparent;
	color: var(--wp--preset--color--gold);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid rgba(212, 196, 168, 0.4);
	border-radius: 3.125rem;
	transition: all 0.3s ease;
	cursor: pointer;
}

.destpg-see-all-btn:hover {
	background: rgba(212, 196, 168, 0.08);
	border-color: var(--wp--preset--color--gold);
	color: #fff;
	transform: translateY(-3px);
}

.destpg-see-all-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.destpg-see-all-btn:hover svg { transform: translateX(3px); }

.destpg-see-all-btn--secondary {
	border-color: rgba(184, 98, 27, 0.5);
	color: var(--wp--preset--color--rust);
}

.destpg-see-all-btn--secondary:hover {
	background: rgba(184, 98, 27, 0.08);
	border-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--rust);
}

/* ---------- Bespoke panel ---------- */
.destpg-bespoke {
	background: var(--wp--preset--color--bg-deep);
	border-top: 1px solid rgba(212, 196, 168, 0.08);
	padding: 4.5rem 0 5rem;
	position: relative;
}

.destpg-bespoke-divider {
	max-width: 75rem;
	margin: 0 auto 3.75rem;
	padding: 0 5rem;
}

.destpg-bespoke-divider-line {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 196, 168, 0.3), transparent);
}

.destpg-bespoke-panel {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 5rem;
}

.destpg-bespoke-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3.75rem;
	align-items: start;
}

.destpg-bespoke-visual {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.destpg-bespoke-visual-img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destpg-bespoke-visual:hover .destpg-bespoke-visual-img { transform: scale(1.05); }

.destpg-bespoke-content { padding: 0.625rem 0; }

.destpg-bespoke-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.875rem;
}

.destpg-bespoke-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.destpg-bespoke-content h3 {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.5vw, 2.6rem);
	color: #fff;
	margin-bottom: 1.25rem;
	line-height: 1.15;
	font-weight: 400;
}

.destpg-bespoke-content h3 em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.destpg-bespoke-intro {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.75;
	margin-bottom: 2.1875rem;
}

.destpg-bespoke-steps {
	margin-bottom: 2.1875rem;
	list-style: none;
	padding-left: 0;
}

.destpg-bespoke-step {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding: 1.125rem 0;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
	list-style: none;
}

.destpg-bespoke-step:last-child { border-bottom: none; }

.destpg-bespoke-step .step-num {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	background: linear-gradient(135deg, var(--wp--preset--color--rust-dark) 0%, var(--wp--preset--color--rust) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
}

.destpg-bespoke-step .step-text h4 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0.25rem;
}

.destpg-bespoke-step .step-text p {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.52);
	line-height: 1.55;
	margin: 0;
}

.destpg-bespoke-cta { text-align: left; }

.destpg-bespoke-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	padding: 1rem 2rem;
	border-radius: 3.125rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	border: none;
	transition: all 0.3s ease;
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	position: relative;
	overflow: hidden;
}

.destpg-bespoke-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.destpg-bespoke-cta-btn:hover::before { opacity: 1; }

.destpg-bespoke-cta-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(184, 98, 27, 0.5);
}

.destpg-bespoke-cta-btn > * {
	position: relative;
	z-index: 1;
}

.destpg-bespoke-cta-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	stroke-width: 2.5;
	fill: none;
	transition: transform 0.3s ease;
}

.destpg-bespoke-cta-btn:hover svg { transform: translateX(3px); }

.destpg-bespoke-cta-note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.4);
}

.destpg-bespoke-cta-note svg {
	width: 1rem;
	height: 1rem;
	stroke: #4CAF50;
	stroke-width: 2;
	fill: none;
	flex-shrink: 0;
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.destpg-header            { padding: 2.75rem 1.25rem 1.5rem; }
	.destpg-carousel-section  { padding: 1rem 0 1.5rem; }
	.destpg-carousel-wrapper  { padding: 0; overflow: hidden; }
	.destpg-track             { gap: 0.875rem; padding: 0.25rem 0 0.5rem 1rem; }
	.destpg-side-btn          { display: none; }
	.destpg-pager-btn         { display: flex; }

	.destpg-carousel {
		max-width: 100%;
		width: 100%;
		flex: none;
		overflow: visible;
	}

	.evpwt-js .ev-cards-animate .destpg-card { opacity: 1; transform: translateY(0); }

	.destpg-card {
		flex: 0 0 88vw;
		max-width: 88vw;
		min-width: 88vw;
	}

	.destpg-card-image { height: 12.5rem; }

	.destpg-card-body {
		padding: 0.75rem 1rem 0.875rem;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.destpg-card-title    { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.625rem; }
	.destpg-card-subtitle { font-size: 0.82rem; -webkit-line-clamp: 2; margin-bottom: 0.625rem; flex: 1; }
	.destpg-card-stats    { gap: 0.4375rem; margin-bottom: 0.625rem; flex-shrink: 0; }
	.destpg-card-stat     { padding: 0.5rem 0.625rem; }
	.destpg-card-btn      { padding: 0.75rem 1rem; font-size: 0.72rem; }

	/* Five dots, two arrows and the counter fit a 320px screen: 290px. */
	.destpg-dots         { --destpg-dot-window: 5; --destpg-dot-slot: 1.75rem; }
	.destpg-dots-wrapper { padding: 0 0.75rem; gap: 0.375rem; }

	.destpg-see-all-wrapper { padding: 1.5rem 1.25rem 2.5rem; }

	.destpg-cta-row {
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
	}

	.destpg-see-all-btn { width: 100%; justify-content: center; }

	.destpg-bespoke          { padding: 2.5rem 0 3rem; }
	.destpg-bespoke-divider  { margin-bottom: 2.25rem; padding: 0 1.25rem; }
	.destpg-bespoke-panel    { padding: 0 1.25rem; }
	.destpg-bespoke-grid     { grid-template-columns: 1fr; gap: 0; }
	.destpg-bespoke-visual   { border-radius: 1.25rem 1.25rem 0 0; }
	.destpg-bespoke-visual-img { aspect-ratio: 16 / 9; }

	.destpg-bespoke-content {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(212, 196, 168, 0.08);
		padding: 1.75rem 1.375rem 2rem;
		border-radius: 0 0 1.25rem 1.25rem;
		margin-top: -1px;
	}

	.destpg-bespoke-eyebrow    { font-size: 0.6rem; }
	.destpg-bespoke-content h3 { font-size: 1.85rem; }

	.destpg-bespoke-steps {
		display: flex;
		gap: 0.75rem;
		margin-bottom: 1.75rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.destpg-bespoke-steps::-webkit-scrollbar { display: none; }

	.destpg-bespoke-step {
		flex: 0 0 auto;
		width: calc(33.33% - 0.5rem);
		min-width: 6.25rem;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.125rem 0.75rem;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 1rem;
		border: 1px solid rgba(212, 196, 168, 0.08);
		gap: 0.75rem;
	}

	.destpg-bespoke-step .step-text h4 { font-size: 0.8rem; margin-bottom: 0; }
	.destpg-bespoke-step .step-text p  { display: none; }

	.destpg-bespoke-cta       { text-align: center; }
	.destpg-bespoke-cta-btn   { width: 100%; justify-content: center; }
	.destpg-bespoke-cta-note  { justify-content: center; }
}

/* ---------- 481 to 768 ---------- */
@media (min-width: 481px) and (max-width: 768px) {
	.destpg-header           { padding: 3rem 2rem 1.75rem; }
	.destpg-carousel-section { padding: 1.5rem 0 2.75rem; }
	.destpg-carousel-wrapper { padding: 0; overflow: hidden; }
	.destpg-side-btn         { display: none; }

	.destpg-carousel {
		max-width: 100%;
		width: 100%;
		flex: none;
		overflow: visible;
	}

	.destpg-track { padding-left: 1rem; }

	.destpg-pager-btn { display: flex; }

	.evpwt-js .ev-cards-animate .destpg-card { opacity: 1; transform: translateY(0); }

	.destpg-card {
		flex: 0 0 82vw;
		max-width: 82vw;
		min-width: 82vw;
	}

	.destpg-card-image { height: 13.125rem; }

	.destpg-card-body {
		padding: 0.75rem 1rem 0.875rem;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.destpg-card-title    { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.625rem; }
	.destpg-card-subtitle { font-size: 0.82rem; -webkit-line-clamp: 2; margin-bottom: 0.625rem; flex: 1; }
	.destpg-card-btn      { font-size: 0.72rem; padding: 0.75rem 1rem; }

	.destpg-bespoke-panel   { padding: 0 1.5625rem; }
	.destpg-bespoke-divider { padding: 0 1.5625rem; }
	.destpg-bespoke-grid    { grid-template-columns: 1fr; gap: 0; }
	.destpg-bespoke-visual  { border-radius: 1.25rem 1.25rem 0 0; }
	.destpg-bespoke-visual-img { aspect-ratio: 16 / 9; }

	.destpg-bespoke-content {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(212, 196, 168, 0.08);
		padding: 1.875rem 1.625rem 2.1875rem;
		border-radius: 0 0 1.25rem 1.25rem;
	}

	.destpg-bespoke-content h3 { font-size: 2.1rem; }
	.destpg-bespoke-cta        { text-align: center; }
	.destpg-bespoke-cta-btn    { width: 100%; justify-content: center; }
	.destpg-bespoke-cta-note   { justify-content: center; }

	.destpg-bespoke-steps { display: flex; gap: 0.875rem; }

	.destpg-bespoke-step {
		flex: 1;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.25rem 0.875rem;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(212, 196, 168, 0.08);
		border-radius: 1.125rem;
		gap: 0.75rem;
	}
}

/* ---------- 769 to 1024 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.destpg-header   { padding: 3.5rem 2.5rem 2rem; }
	/* Matches the header's 2.5rem at this width, so the card still
	   starts where the heading starts. */
	.destpg-carousel-wrapper { padding: 0 2.5rem; }
	.destpg-side-btn { width: 2.875rem; height: 2.875rem; min-width: 2.875rem; }

	.destpg-carousel         { max-width: 100%; overflow: hidden; }
	.destpg-carousel-wrapper { overflow: hidden; }

	.destpg-card {
		flex: 0 0 18.125rem;
		max-width: 18.125rem;
		min-width: 18.125rem;
	}

	.destpg-bespoke-panel   { max-width: 59.375rem; padding: 0 2.5rem; }
	.destpg-bespoke-divider { padding: 0 2.5rem; }
	.destpg-bespoke-grid    { gap: 2.5rem; }
	.destpg-bespoke-content h3 { font-size: 2.1rem; }
}

/* ---------- 1025 and up ---------- */
@media (min-width: 1025px) {
	/* The site container, same as .destpg-header. This block used to
	   narrow the wrapper to 75rem with 1.875rem of padding, which is
	   where most of the drift came from. */
	.destpg-carousel-wrapper { max-width: 87.5rem; padding: 0 3rem; overflow: hidden; }
	.destpg-carousel         { max-width: 100%; overflow: hidden; }

	.destpg-side-btn     { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; }
	.destpg-side-btn svg { width: 1.5rem; height: 1.5rem; }

	.destpg-track { gap: 1.5rem; padding: 1rem 0 1.5rem; }

	.destpg-card {
		flex: 0 0 22.5rem;
		max-width: 22.5rem;
		min-width: 22.5rem;
	}

	.destpg-card-image { height: 11.875rem; }
	.destpg-card-body  { padding: 1rem 1.125rem 1rem; }
}

/* ---------- 1440 and up ---------- */
@media (min-width: 1440px) {
	.destpg-bespoke-panel      { max-width: 81.25rem; }
	.destpg-bespoke-grid       { gap: 5rem; }
	.destpg-bespoke-content h3 { font-size: 2.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.destpg-section .destpg-track,
	.destpg-section .destpg-dots-strip,
	.evpdl-page-hero-slides .evpdl-page-hero-slide { transition: none; }

	.destpg-section .destpg-header,
	.evpwt-js .ev-cards-animate .destpg-card {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.destpg-card-image img,
	.destpg-bespoke-visual-img { transition: none; }
}

/* ---------- Focus ---------- */
.destpg-carousel:focus-visible,
.destpg-card-link-wrap:focus-visible,
.destpg-side-btn:focus-visible,
.destpg-pager-btn:focus-visible,
.destpg-dot:focus-visible,
.destpg-see-all-btn:focus-visible,
.destpg-bespoke-cta-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ==================================================================
   DESTINATIONS MAP
   Converted from salvage/homepage-destinations-map-LIVE-20260818.html.

   Removed on the way in: 159 !important declarations, the
   width:100vw / margin-left:calc(-50vw + 50%) full bleed hack, the
   uniqid suffixed element id, and the section's private copies of the
   colour tokens. Colours now come from theme.json.

   The Leaflet overrides below carry no !important either. Leaflet's
   stylesheet is injected into the head at runtime, so it always lands
   after this file; the rules win on specificity instead, which is why
   each one names one class more than the Leaflet rule it is beating
   (.leaflet-touch .leaflet-bar a being the specific one to clear).
   ================================================================== */
.evp-dest {
	position: relative;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

.evp-dest *,
.evp-dest *::before,
.evp-dest *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.evp-dest a {
	text-decoration: none;
	color: inherit;
}

/* ---------- Header ----------
   Left aligned, no gradient rule. Left as the frozen version had it:
   the blog and why choose alignment pass named those two sections only. */
.evp-dest-header {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 5rem 3rem 1.75rem;
	position: relative;
	z-index: 5;
}

.evpwt-js .evp-dest-header {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-dest-header.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-dest-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 1.25rem;
}

.evp-dest-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evp-dest-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin-bottom: 1.25rem;
}

.evp-dest-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evp-dest-descriptor {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.38);
	max-width: 28.75rem;
	margin: 0;
}

/* ---------- Continent tabs and destination buttons (desktop) ---------- */
.evp-dest-controls {
	max-width: 87.5rem;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.evp-dest-tabs-wrap {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 3rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
	overflow-x: auto;
	scrollbar-width: none;
}

.evp-dest-tabs-wrap::-webkit-scrollbar { display: none; }

.evp-dest-tab {
	flex-shrink: 0;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.67rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evp-dest-tab:hover { color: rgba(255, 255, 255, 0.72); }

.evp-dest-tab.is-active {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--rust);
}

.evp-dest-dest-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4375rem;
	padding: 1.125rem 3rem 1.25rem;
}

/* Available destinations render as anchors, coming soon ones as
   buttons, so this has to sit right on both element types. */
.evp-dest-dest-btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 3.125rem;
	padding: 0.375rem 0.875rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.25s ease;
}

.evp-dest-dest-btn:hover {
	background: rgba(184, 98, 27, 0.15);
	border-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--gold);
}

.evp-dest-dest-btn.is-soon {
	color: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.08);
}

.evp-dest-dest-btn.is-soon:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.55);
}

/* Off-continent buttons stay in the flow so the rows do not reshuffle
   on every tab change, but they are inert. */
.evp-dest-dest-btn.is-dimmed {
	opacity: 0.15;
	pointer-events: none;
}

/* ---------- Mobile only blocks, hidden on desktop ---------- */
.evp-dest-list-wrap,
.evp-dest-mobile-legend {
	display: none;
}

/* ---------- Map container ---------- */
.evp-dest-map-outer {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 1.75rem 3rem 2.5rem;
	position: relative;
	z-index: 5;
}

.evp-dest-map-container {
	position: relative;
	height: 70vh;
	min-height: 35rem;
	max-height: 55rem;
	border-radius: 1.5rem;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(212, 196, 168, 0.12);
	box-shadow:
		0 24px 72px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.evpwt-js .evp-dest-map-container {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.evp-dest-map-container.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-dest-map-canvas {
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
}

.evp-dest-map-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--gold);
	z-index: 1000;
	pointer-events: none;
}

.evp-dest-map-loading.is-hidden { display: none; }

.evp-dest-map-loading.has-error { color: #ff6b6b; }

.evp-dest-map-spinner {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	border: 2.5px solid rgba(212, 196, 168, 0.18);
	border-top-color: var(--wp--preset--color--gold);
	border-radius: 50%;
	animation: evpDestSpin 1s linear infinite;
}

.evp-dest-map-loading.has-error .evp-dest-map-spinner { display: none; }

@keyframes evpDestSpin {
	to { transform: rotate(360deg); }
}

.evp-dest-map-legend {
	position: absolute;
	bottom: 1.375rem;
	left: 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.875rem 1.125rem;
	background: rgba(0, 0, 0, 0.82);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.875rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	z-index: 1000;
}

.evp-dest-map-legend-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.72rem;
	color: var(--ev-soft);
}

.evp-dest-map-legend-dot {
	position: relative;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.evp-dest-map-legend-dot.is-available {
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0 12px rgba(184, 98, 27, 0.55);
}

.evp-dest-map-legend-dot.is-available::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgba(184, 98, 27, 0.35);
	animation: evpDestRing 2s ease-out infinite;
}

@keyframes evpDestRing {
	0%   { transform: scale(1);   opacity: 0.8; }
	100% { transform: scale(1.8); opacity: 0; }
}

.evp-dest-map-legend-dot.is-soon {
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Leaflet controls ----------
   See the note at the top of this block: specificity, not !important. */
.evp-dest .leaflet-control-zoom.leaflet-bar {
	border: none;
	border-radius: 0.625rem;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.evp-dest .leaflet-control-zoom a.leaflet-control-zoom-in,
.evp-dest .leaflet-control-zoom a.leaflet-control-zoom-out {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	line-height: 2.25rem;
	font-size: 1.1rem;
	font-weight: 400;
	background: rgba(17, 16, 16, 0.92);
	color: var(--wp--preset--color--gold);
	border: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.evp-dest .leaflet-control-zoom a.leaflet-control-zoom-out {
	border-bottom: none;
}

.evp-dest .leaflet-control-zoom a.leaflet-control-zoom-in:hover,
.evp-dest .leaflet-control-zoom a.leaflet-control-zoom-out:hover {
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evp-dest .leaflet-container .leaflet-control-attribution {
	background: rgba(17, 16, 16, 0.75);
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.6rem;
	border-radius: 0.375rem 0 0 0;
}

.evp-dest .leaflet-control-attribution a { color: rgba(212, 196, 168, 0.5); }

.evp-dest .leaflet-tile-pane { filter: brightness(0.9); }

/* ---------- Hover card ---------- */
.evp-dest-hover-card {
	position: absolute;
	width: 20rem;
	background: rgba(30, 25, 20, 0.97);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1.25rem;
	overflow: hidden;
	pointer-events: none;
	z-index: 2000;
	box-shadow:
		0 24px 56px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	opacity: 0;
	transform: translateY(0.5rem) scale(0.97);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.evp-dest-hover-card.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.evp-dest-hover-card.is-coming-soon { border-color: rgba(255, 255, 255, 0.1); }

.evp-dest-hc-image-wrap {
	position: relative;
	width: 100%;
	height: 8.75rem;
	overflow: hidden;
}

.evp-dest-hc-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.evp-dest-hc-image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 30%, rgba(15, 10, 5, 0.9) 100%);
	pointer-events: none;
}

.evp-dest-hc-body {
	position: relative;
	z-index: 1;
	margin-top: -1.75rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

.evp-dest-hc-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
	margin-bottom: 0.25rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.evp-dest-hc-tagline {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--wp--preset--color--gold);
	opacity: 0.88;
	margin-bottom: 0.75rem;
}

.evp-dest-hc-desc {
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0.875rem;
}

.evp-dest-hc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin-bottom: 0.875rem;
}

.evp-dest-hc-tag {
	background: rgba(212, 196, 168, 0.1);
	color: var(--wp--preset--color--gold);
	border: 1px solid rgba(212, 196, 168, 0.18);
	padding: 0.25rem 0.625rem;
	border-radius: 3.125rem;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.evp-dest-hc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.evp-dest-hc-cta-text {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.evp-dest-hc-cta-text.is-available   { color: var(--wp--preset--color--gold); }
.evp-dest-hc-cta-text.is-coming-soon { color: rgba(255, 255, 255, 0.38); }

.evp-dest-hc-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
}

.evp-dest-hc-arrow.is-available {
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	color: #fff;
}

.evp-dest-hc-arrow.is-coming-soon {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.3);
}

.evp-dest-hc-arrow svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- See all button ----------
   The frozen version was an outline button unique to this section.
   Brought onto the shared spec: rust fill, gold to rust gradient on
   hover, 1rem/2rem padding, 0.72rem type, translateY(-3px). */
.evp-dest-see-all-wrap {
	display: flex;
	justify-content: center;
	padding: 2.5rem 1.25rem 4.5rem;
	position: relative;
	z-index: 5;
}

.evp-dest-see-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.evp-dest-see-all-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evp-dest-see-all-btn:hover::before { opacity: 1; }

.evp-dest-see-all-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evp-dest-see-all-btn > * {
	position: relative;
	z-index: 1;
}

.evp-dest-see-all-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evp-dest-see-all-btn:hover svg { transform: translateX(3px); }

/* ---------- Coming soon modal ---------- */
.evp-dest-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.88);
	backdrop-filter: blur(12px);
	z-index: 10000;
}

.evp-dest-modal.is-open { display: flex; }

.evp-dest-modal-content {
	position: relative;
	width: 92%;
	max-width: 31.25rem;
	max-height: 92vh;
	overflow-y: auto;
	background: rgba(30, 25, 20, 0.97);
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 1.5rem;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.evp-dest-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	font-size: 1.35rem;
	cursor: pointer;
	z-index: 10001;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.evp-dest-modal-close:hover {
	background: rgba(212, 196, 168, 0.2);
	border-color: rgba(212, 196, 168, 0.35);
	transform: rotate(90deg);
}

.evp-dest-modal-image-wrap {
	position: relative;
	width: 100%;
	height: 15rem;
	overflow: hidden;
	border-radius: 1.5rem 1.5rem 0 0;
}

.evp-dest-modal-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.evp-dest-modal-image-wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6.25rem;
	background: linear-gradient(transparent, rgba(30, 25, 20, 0.97));
	pointer-events: none;
}

.evp-dest-modal-body {
	padding: 2rem;
	color: #fff;
}

.evp-dest-modal-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin-bottom: 0.625rem;
}

.evp-dest-modal-eyebrow::before {
	content: '';
	display: block;
	width: 1.25rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evp-dest-modal-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 6vw, 3.2rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	margin-bottom: 0.5rem;
}

.evp-dest-modal-tagline {
	font-size: 0.88rem;
	font-style: italic;
	color: var(--wp--preset--color--gold);
	opacity: 0.88;
	margin-bottom: 1.125rem;
}

.evp-dest-modal-rule {
	width: 2rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1.125rem;
}

.evp-dest-modal-desc {
	font-size: 0.88rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
	margin-bottom: 1.5rem;
}

.evp-dest-modal-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 1.75rem;
}

.evp-dest-modal-tag {
	background: rgba(212, 196, 168, 0.1);
	color: var(--wp--preset--color--gold);
	border: 1px solid rgba(212, 196, 168, 0.2);
	padding: 0.3125rem 0.75rem;
	border-radius: 3.125rem;
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Was a <button> with cursor:default that did nothing when pressed.
   It is a status line, so it is marked up as one now. */
.evp-dest-modal-status {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 1rem 1.5rem;
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	border-radius: 3.125rem;
}

.evp-dest-modal-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4375rem;
	margin-top: 0.875rem;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.32);
}

.evp-dest-modal-note svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: var(--wp--preset--color--rust);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

/* ---------- Mobile accordion ---------- */
.evp-dest-accordion-section { margin-bottom: 0.5rem; }

.evp-dest-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 1.125rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 0.875rem;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.25s ease;
}

.evp-dest-accordion-header:active {
	transform: scale(0.99);
	background: rgba(255, 255, 255, 0.05);
}

.evp-dest-accordion-header.is-open {
	border-radius: 0.875rem 0.875rem 0 0;
	border-bottom-color: transparent;
	background: rgba(212, 196, 168, 0.06);
}

.evp-dest-accordion-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--gold);
	pointer-events: none;
}

.evp-dest-accordion-arrow {
	width: 1.125rem;
	height: 1.125rem;
	color: rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
	pointer-events: none;
	transition: transform 0.28s ease, color 0.28s ease;
}

.evp-dest-accordion-header.is-open .evp-dest-accordion-arrow {
	transform: rotate(180deg);
	color: var(--wp--preset--color--gold);
}

.evp-dest-accordion-body {
	display: none;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-top: none;
	border-radius: 0 0 0.875rem 0.875rem;
	overflow: hidden;
}

.evp-dest-accordion-body.is-open { display: flex; }

.evp-dest-accordion-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.9375rem 1.125rem;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-family: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease;
}

.evp-dest-accordion-item:last-child { border-bottom: none; }
.evp-dest-accordion-item:active     { background: rgba(212, 196, 168, 0.08); }

.evp-dest-accordion-item-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	pointer-events: none;
}

.evp-dest-accordion-dot {
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.evp-dest-accordion-dot.is-available {
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0 8px rgba(184, 98, 27, 0.45);
}

.evp-dest-accordion-dot.is-soon {
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.evp-dest-accordion-country {
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	transition: color 0.2s ease;
}

.evp-dest-accordion-item.is-coming-soon .evp-dest-accordion-country {
	color: rgba(255, 255, 255, 0.42);
}

.evp-dest-accordion-badge {
	padding: 0.1875rem 0.5625rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	flex-shrink: 0;
	pointer-events: none;
}

.evp-dest-accordion-item-arrow {
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
	flex-shrink: 0;
	pointer-events: none;
}

/* ---------- 1024 and up: two column modal ---------- */
@media (min-width: 1024px) {
	.evp-dest-modal-content {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		max-width: 57.5rem;
		max-height: 86vh;
		overflow: hidden;
	}

	.evp-dest-modal-image-wrap {
		width: 48%;
		min-width: 48%;
		height: auto;
		min-height: 100%;
		align-self: stretch;
		flex-shrink: 0;
		border-radius: 1.5rem 0 0 1.5rem;
	}

	.evp-dest-modal-image-wrap::after { display: none; }

	.evp-dest-modal-body {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 52%;
		max-height: 86vh;
		padding: 2.25rem 2.5rem;
		overflow-y: auto;
	}

	.evp-dest-modal-close {
		top: 1.125rem;
		right: 1.125rem;
	}

	.evp-dest-modal-title { font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
}

/* ---------- 769 and up: taller map ---------- */
@media (min-width: 769px) {
	.evp-dest-map-container {
		height: 78vh;
		min-height: 40rem;
	}
}

/* ---------- 1200 and below ---------- */
@media (max-width: 1200px) {
	.evp-dest-header       { padding: 5rem 1.5rem 1.75rem; }
	.evp-dest-tabs-wrap    { padding: 0 1.5rem; }
	.evp-dest-dest-buttons { padding: 1.125rem 1.5rem 1.25rem; }
	.evp-dest-map-outer    { padding: 1.75rem 1.5rem 2.5rem; }
}

/* ---------- 768 and below: accordion replaces the map ---------- */
@media (max-width: 768px) {
	.evp-dest-header {
		padding: 3.25rem 1.25rem 1.75rem;
		text-align: left;
	}

	.evp-dest-eyebrow {
		justify-content: flex-start;
		font-size: 0.6rem;
	}

	.evp-dest-descriptor {
		max-width: 100%;
		text-align: left;
	}

	/* Leaflet never loads below this width, so the map markup goes too. */
	.evp-dest-controls,
	.evp-dest-map-outer {
		display: none;
	}

	.evp-dest-list-wrap {
		display: block;
		padding: 0 1rem 0.5rem;
	}

	.evp-dest-mobile-legend {
		display: flex;
		justify-content: center;
		gap: 1.375rem;
		padding: 1rem 1rem 2rem;
		position: relative;
		z-index: 5;
	}

	.evp-dest-mobile-legend-item {
		display: flex;
		align-items: center;
		gap: 0.4375rem;
		font-size: 0.72rem;
		color: rgba(255, 255, 255, 0.55);
	}

	.evp-dest-mobile-legend-dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.evp-dest-mobile-legend-dot.is-available {
		background: var(--wp--preset--color--rust);
		box-shadow: 0 0 7px rgba(184, 98, 27, 0.5);
	}

	.evp-dest-mobile-legend-dot.is-soon {
		background: rgba(255, 255, 255, 0.22);
		border: 1px solid rgba(255, 255, 255, 0.14);
	}

	.evp-dest-see-all-wrap { padding: 0.5rem 1rem 3.25rem; }

	.evp-dest-see-all-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evp-dest-header    { padding: 2.75rem 1rem 2rem; }
	.evp-dest-list-wrap { padding: 0 0.75rem 0.5rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.evp-dest-map-legend-dot.is-available::after,
	.evp-dest-map-spinner {
		animation: none;
	}

	.evpwt-js .evp-dest-header,
	.evpwt-js .evp-dest-map-container {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.evp-dest-hover-card,
	.evp-dest-accordion-arrow,
	.evp-dest-see-all-btn,
	.evp-dest-see-all-btn svg,
	.evp-dest-modal-close {
		transition: none;
	}
}

/* ---------- Focus ---------- */
.evp-dest-tab:focus-visible,
.evp-dest-dest-btn:focus-visible,
.evp-dest-accordion-header:focus-visible,
.evp-dest-accordion-item:focus-visible,
.evp-dest-see-all-btn:focus-visible,
.evp-dest-modal-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ==================================================================
   DESTINATIONS PAGE: HERO
   parts/section-destinations-hero.php + assets/js/destinations-hero.js

   Converted from salvage/destinations-hero-LIVE-20260527.html.
   Removed on the way in: 85 !important, 128 uses of the uniqid class
   prefix, and the six selector Elementor :has() container reset, which
   has no container left to reset.

   Deliberately parallel to the homepage hero rather than sharing its
   classes. The two look alike but are not the same component: this one
   has a slideshow where the homepage has a video, and coupling them
   would mean one section's change silently altering the other.
   ================================================================== */
.evpdh {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 45% 55%;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
	box-sizing: border-box;
}

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

/* ---------- Left content panel ---------- */
.evpdh-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4rem 5rem 5rem;
	background: var(--wp--preset--color--bg-deep);
}

.evpdh-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 1.25rem;
	opacity: 0;
	animation: evpdhFadeUp 0.8s ease-out 0.2s forwards;
}

.evpdh-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

/* H1, the LCP text. */
.evpdh-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin: 0 0 1.75rem;
	opacity: 0;
	animation: evpdhFadeUp 0.9s ease-out 0.35s forwards;
}

.evpdh-title em {
	color: var(--wp--preset--color--rust);
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
}

/* Same kerning correction as the homepage H1. em, so it tracks the
   fluid clamp() size at every viewport. */
.evpdh-title-kern {
	display: inline-block;
	margin-left: -0.05em;
}

.evpdh-rule {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1.5rem;
	opacity: 0;
	animation: evpdhFadeUp 0.7s ease-out 0.6s forwards;
}

.evpdh-subtitle {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
	max-width: 28.75rem;
	margin: 0 0 2.75rem;
	opacity: 0;
	animation: evpdhFadeUp 0.8s ease-out 0.65s forwards;
}

/* ---------- Calls to action ----------
   Shared button spec: 1rem/2rem padding, 0.72rem type, 0.14em
   tracking, translateY(-3px) on hover, gold to rust gradient. */
.evpdh-cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	opacity: 0;
	animation: evpdhFadeUp 0.8s ease-out 0.8s forwards;
}

.evpdh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3.125rem;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	min-width: 17.5rem;
	white-space: nowrap;
}

.evpdh-btn > * {
	position: relative;
	z-index: 1;
}

.evpdh-btn-primary {
	background: var(--wp--preset--color--rust);
	color: #fff;
	border: 2px solid var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
}

.evpdh-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpdh-btn-primary:hover::before { opacity: 1; }

.evpdh-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpdh-btn-primary svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpdh-btn-primary:hover svg { transform: translateX(3px); }

.evpdh-btn-secondary {
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.evpdh-btn-secondary:hover {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.evpdh-btn-secondary svg {
	width: 1rem;
	height: 1rem;
	fill: rgba(255, 255, 255, 0.85);
	flex-shrink: 0;
	transition: transform 0.3s ease, fill 0.3s ease;
}

.evpdh-btn-secondary:hover svg {
	transform: translateX(3px);
	fill: #fff;
}

/* ---------- Scroll indicator ---------- */
.evpdh-scroll {
	position: absolute;
	bottom: 2.25rem;
	left: 5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.32);
	opacity: 0;
	animation: evpdhFadeUp 0.8s ease-out 1.4s forwards;
}

.evpdh-scroll-line {
	display: block;
	width: 2.25rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
}

/* transform, not left, so the pulse stays off the main thread. */
.evpdh-scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--rust);
	animation: evpdhScrollPulse 2.4s ease-in-out 2s infinite;
	will-change: transform;
}

/* ---------- Right slideshow panel ---------- */
.evpdh-media {
	position: relative;
	background: var(--wp--preset--color--bg-deep);
	overflow: hidden;
}

.evpdh-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.evpdh-slide.is-active { opacity: 1; }

/* Real img, not a background image, so the slide carries srcset and
   the browser can pick a sensible file for the viewport. */
.evpdh-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Left edge fade into the content panel. */
.evpdh-media::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.85) 4%,
		rgba(17, 16, 16, 0.30) 12%,
		rgba(17, 16, 16, 0.06) 22%,
		transparent 35%);
	z-index: 1;
	pointer-events: none;
}

.evpdh-media::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 35%;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.50) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

.evpdh-caption {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	z-index: 2;
	text-align: right;
	opacity: 0;
	animation: evpdhFadeUp 0.8s ease-out 1.2s forwards;
}

.evpdh-caption-label {
	font-size: 0.55rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.32);
	margin: 0 0 0.25rem;
}

.evpdh-caption-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	transition: opacity 0.4s ease;
}

/* ---------- Keyframes ---------- */
@keyframes evpdhFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes evpdhScrollPulse {
	0%   { transform: translateX(-100%); }
	50%  { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}

/* ---------- 1200 and below ---------- */
@media (max-width: 1200px) {
	.evpdh         { grid-template-columns: 48% 52%; }
	.evpdh-content { padding: 4.5rem 3rem 4.5rem 3.5rem; }
	.evpdh-scroll  { left: 3.5rem; }
}

/* ---------- 1024 and below ----------
   Single column, centred, slideshow behind the content. Height uses
   100lvh with a 100vh fallback, matching the homepage hero. svh and
   dvh were tried and rejected there; do not reintroduce them. */
@media (max-width: 1024px) {
	.evpdh {
		display: block;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
		overflow: hidden;
	}

	.evpdh-media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		display: block;
		background: var(--wp--preset--color--bg-deep);
	}

	.evpdh-media::before {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.45) 0%,
			rgba(17, 16, 16, 0.40) 30%,
			rgba(17, 16, 16, 0.75) 65%,
			rgba(17, 16, 16, 0.95) 100%);
	}

	.evpdh-media::after { display: none; }

	.evpdh-caption { display: none; }

	.evpdh-content {
		position: relative;
		z-index: 5;
		background: transparent;
		min-height: 100vh;
		min-height: 100lvh;
		padding: 6.25rem 3.5rem 5rem;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.evpdh-scroll { display: none; }

	/* Eyebrow switches to the gold line, text, line badge. */
	.evpdh-eyebrow {
		justify-content: center;
		color: var(--wp--preset--color--gold);
		font-size: 0.65rem;
		margin-bottom: 1.5rem;
	}

	.evpdh-eyebrow::before {
		width: 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
	}

	.evpdh-eyebrow::after {
		content: '';
		display: block;
		width: 1.75rem;
		height: 1.5px;
		background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
		flex-shrink: 0;
	}

	.evpdh-title {
		font-size: clamp(3.2rem, 8vw, 4.6rem);
		line-height: 1.05;
		margin: 0 0 1.625rem;
		text-align: center;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
	}

	.evpdh-rule {
		width: 3.125rem;
		margin: 0 auto 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	.evpdh-subtitle {
		font-size: 1.05rem;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
		max-width: 36.25rem;
		margin: 0 auto 2.5rem;
		text-align: center;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	.evpdh-cta {
		justify-content: center;
		gap: 0.875rem;
	}

	.evpdh-btn {
		min-width: 15rem;
		padding: 1rem 1.875rem;
		font-size: 0.7rem;
	}
}

/* ---------- 768 and below ---------- */
@media (max-width: 768px) {
	.evpdh-content { padding: 6.875rem 1.5rem 4rem; }

	.evpdh-eyebrow {
		font-size: 0.72rem;
		margin-bottom: 1.5rem;
	}

	.evpdh-eyebrow::before,
	.evpdh-eyebrow::after { width: 1.5rem; }

	.evpdh-title {
		font-size: clamp(3.2rem, 12.5vw, 4.6rem);
		margin-bottom: 1.5rem;
	}

	.evpdh-rule {
		width: 3rem;
		margin-bottom: 1.625rem;
	}

	.evpdh-subtitle {
		font-size: 1.15rem;
		margin-bottom: 2.25rem;
		max-width: 100%;
	}

	.evpdh-cta {
		flex-direction: column;
		width: 100%;
		gap: 0.75rem;
	}

	.evpdh-btn {
		width: 100%;
		min-width: 0;
		max-width: 23.75rem;
		margin: 0 auto;
		padding: 1rem 2rem;
		font-size: 0.72rem;
	}
}

/* ---------- 480 and below ---------- */
@media (max-width: 480px) {
	.evpdh-content { padding: 6rem 1.25rem 3.25rem; }

	.evpdh-title { font-size: clamp(2.9rem, 13vw, 3.9rem); }

	.evpdh-subtitle {
		font-size: 1.08rem;
		margin-bottom: 1.875rem;
	}

	.evpdh-btn {
		max-width: 20rem;
		padding: 1rem 1.75rem;
	}
}

/* ---------- 360 and below ---------- */
@media (max-width: 360px) {
	.evpdh-content { padding: 5.5rem 1rem 2.75rem; }
	.evpdh-title   { font-size: 2.7rem; }

	.evpdh-btn {
		max-width: 17.5rem;
		padding: 0.875rem 1.5rem;
		font-size: 0.7rem;
	}
}

/* ---------- Focus ---------- */
.evpdh-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ---------- Reduced motion ----------
   The reference kept the two second slide crossfade under reduced
   motion, which is the one thing it got wrong. destinations-hero.js
   also stops advancing, so only the first slide is ever shown. */
@media (prefers-reduced-motion: reduce) {
	.evpdh-eyebrow,
	.evpdh-title,
	.evpdh-rule,
	.evpdh-subtitle,
	.evpdh-cta,
	.evpdh-scroll,
	.evpdh-caption {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.evpdh-scroll-line::after {
		animation: none;
		will-change: auto;
	}

	.evpdh-slide,
	.evpdh-caption-name {
		transition: none;
	}
}

/* ==================================================================
   DESTINATIONS PAGE: INTRO PROSE
   parts/section-destinations-intro.php

   The reference captured this block's markup but not its CSS, so this
   is built to the theme's conventions rather than recovered.
   ================================================================== */
.evpdi {
	background: var(--wp--preset--color--bg-deep);
	padding: 5.5rem 3rem 4.5rem;
}

.evpdi-inner {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.evpdi-decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.evpdi-line {
	display: block;
	width: 4rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 196, 168, 0.5));
}

.evpdi-line:last-child {
	background: linear-gradient(90deg, rgba(212, 196, 168, 0.5), transparent);
}

.evpdi-diamond {
	display: block;
	width: 0.4375rem;
	height: 0.4375rem;
	background: var(--wp--preset--color--rust);
	transform: rotate(45deg);
	flex-shrink: 0;
}

.evpdi-prose p {
	font-size: clamp(1.05rem, 1.9vw, 1.3rem);
	font-weight: 300;
	line-height: 1.85;
	color: var(--ev-soft);
	margin: 0;
}

.evpdi-prose a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.35);
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evpdi-prose a:hover {
	color: var(--wp--preset--color--gold-light);
	border-bottom-color: var(--wp--preset--color--gold-light);
}

.evpdi-prose a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpdi-signature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.125rem;
	margin-top: 2.75rem;
}

.evpdi-signature-line {
	display: block;
	width: 2.5rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
	flex-shrink: 0;
}

.evpdi-signature-text {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.evpdi { padding: 5rem 1.5rem 4rem; }
}

@media (max-width: 768px) {
	.evpdi { padding: 4rem 1.25rem 3.25rem; }

	.evpdi-decoration { margin-bottom: 2rem; }
	.evpdi-line       { width: 2.5rem; }

	.evpdi-signature      { gap: 0.75rem; margin-top: 2.25rem; }
	.evpdi-signature-line { width: 1.5rem; }
	.evpdi-signature-text { font-size: 0.58rem; letter-spacing: 0.18em; }
}

@media (max-width: 480px) {
	.evpdi { padding: 3.25rem 1rem 2.75rem; }

	.evpdi-signature-text {
		font-size: 0.55rem;
		white-space: normal;
	}
}

/* ==================================================================
   DESTINATIONS PAGE: CONTINENT SECTIONS
   parts/section-destinations-continents.php

   The content that makes this page worth having. No JS: a grid that
   needs script to appear is a grid a crawler may never see.
   ================================================================== */
.evpdc {
	background: var(--wp--preset--color--bg-deep);
	padding: 1rem 0 5rem;
}

.evpdc-continent {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 3.5rem 3rem 0;
}

.evpdc-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 2.5rem;
}

.evpdc-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}

.evpdc-rule {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 1rem;
}

.evpdc-count {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0;
}

/* auto-fill with a minimum, so one or two destinations sit at their
   natural width instead of stretching across the row. */
.evpdc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 22rem));
	gap: 1.75rem;
}

.evpdc-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1rem;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

a.evpdc-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 196, 168, 0.35);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

a.evpdc-card:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpdc-card-media {
	position: relative;
	height: 12.5rem;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}

.evpdc-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}

a.evpdc-card:hover .evpdc-card-img { transform: scale(1.05); }

.evpdc-card-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, rgba(17, 16, 16, 0.75) 100%);
	pointer-events: none;
}

.evpdc-card-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 1;
	padding: 0.3125rem 0.75rem;
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.evpdc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem 1.375rem 1.375rem;
}

.evpdc-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 0.375rem;
}

.evpdc-card-tagline {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--wp--preset--color--gold);
	opacity: 0.88;
	margin: 0 0 0.75rem;
}

.evpdc-card-desc {
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 1.125rem;
}

/* Pushed to the bottom so cards of differing text length still line
   their call to action up. */
.evpdc-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpdc-card-more svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

a.evpdc-card:hover .evpdc-card-more svg { transform: translateX(3px); }

/* Coming soon: no link, so it reads as inert rather than clickable. */
.evpdc-card--soon {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.1);
}

.evpdc-card--soon .evpdc-card-img {
	filter: grayscale(0.7);
	opacity: 0.55;
}

.evpdc-card--soon .evpdc-card-title { color: rgba(255, 255, 255, 0.62); }
.evpdc-card--soon .evpdc-card-desc  { color: rgba(255, 255, 255, 0.42); }

@media (max-width: 1200px) {
	.evpdc-continent { padding: 3rem 1.5rem 0; }
}

@media (max-width: 768px) {
	.evpdc           { padding: 0.5rem 0 3.5rem; }
	.evpdc-continent { padding: 2.5rem 1.25rem 0; }
	.evpdc-header    { margin-bottom: 1.75rem; }

	.evpdc-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.evpdc-card-media { height: 11rem; }
}

@media (max-width: 480px) {
	.evpdc-continent { padding: 2rem 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	.evpdc-card,
	.evpdc-card-img,
	.evpdc-card-more svg {
		transition: none;
	}

	a.evpdc-card:hover { transform: none; }
	a.evpdc-card:hover .evpdc-card-img { transform: none; }
}

/* ==================================================================
   MAP COMPONENT: THE DESTINATIONS PAGE VARIANTS
   The same parts/section-destinations-map.php, rendered without its
   header and without the See All button. Both of those carried the
   section's vertical padding, so it is restored here.
   ================================================================== */
.evp-dest--no-header .evp-dest-controls { padding-top: 2.5rem; }

.evp-dest--no-see-all .evp-dest-map-outer { padding-bottom: 3.5rem; }

@media (max-width: 768px) {
	.evp-dest--no-header .evp-dest-controls { padding-top: 0; }

	/* Below 768 the map is hidden and the accordion is the section, so
	   the accordion carries the bottom padding instead. */
	.evp-dest--no-see-all .evp-dest-mobile-legend { padding-bottom: 3rem; }
}

/* Shared button spec: 1rem/2rem, 0.72rem type, gold to rust hover. */
.evpco-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.evpco-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpco-btn-primary:hover::before { opacity: 1; }

.evpco-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpco-btn-primary > * {
	position: relative;
	z-index: 1;
}

.evpco-btn-primary svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpco-btn-primary:hover svg { transform: translateX(3px); }

/*
   auto-fit, not a fixed two columns. The list used to be six, which
   divided into two columns as three tidy rows. It is three now, and
   two columns leaves the third tile alone on a row half the width of
   the ones above it. A 6rem minimum fits all three across at 360px,
   which is the narrowest this site is checked at, and still collapses
   to fewer columns if a destination only qualifies for one or two.
*/
.evplo-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: 0.625rem;
}

.evplo-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.125rem 0.625rem;
	min-height: 4.125rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* .evpco-tile::before is gone. It painted a gold to rust gradient over
   the whole tile on hover, which was fine on a flat tile and sits on top
   of the photograph now that tiles carry an image. Its partner rule,
   .evpco-tile:hover::before { opacity: 1 }, went with it: with no
   ::before to reveal it did nothing. The hover treatment is now the
   scrim and the image scale in the overview media panel block at the end
   of this file. Nothing else referenced either rule. */

.evplo-tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 10px 28px rgba(184, 98, 27, 0.3);
}

.evplo-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evplo-tile-label {
	position: relative;
	z-index: 1;
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #fff;
}

/* ================================================
   FEATURED EXPEDITIONS CAROUSEL
   parts/section-featured-carousel.php. One component, two callers:
   the country overview and the location overview.

   This is NOT the destination tours carousel. That one is several
   20rem cards side by side in a scrolling track; this is one card per
   view, filling the track, paged by translateX. Both used to be built
   out of whatever card was to hand, which is how a 20rem card ended up
   in a full width container.

   Recovered from country_overview. The final version used rem; an
   earlier one used em and was corrected, so these are rem.
   ================================================ */

.evpfx-carousel {
	position: relative;
	/* The column this sits in is a grid or flex item, and a track of n
	   cards is n times its width. Without this the item's automatic
	   minimum is its content, so it grows past its track and takes the
	   page's horizontal scrollbar with it. */
	min-width: 0;
}

.evpfx-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding: 0 0.125rem;
}

.evpfx-label {
	margin: 0;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpfx-arrows {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.evpfx-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpfx-arrow:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
}

.evpfx-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* pointer-events with the opacity, so a disabled arrow does not take a
   hover state it cannot act on. */
.evpfx-arrow:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

.evpfx-arrow svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
}

.evpfx-counter {
	margin: 0;
	min-width: 2.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}

/* The number you are on, against the total you are not. */
.evpfx-current {
	color: #fff;
}

/*
   The clip. This is the element that makes the whole thing a carousel
   rather than a row of cards spilling across the page, and it owns the
   corner radius because the cards inside are square.
*/
.evpfx-track-wrap {
	overflow: hidden;
	border-radius: 1.25rem;
}

.evpfx-track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
   The track sizes its slides; the card pins nothing. That is the fix.
   A card that declares its own width is right for a scrolling track of
   several and wrong here, and having both the card and the track hold
   an opinion is how the two disagreed.
*/
.evpfx-track > * {
	flex: 0 0 100%;
	min-width: 0;
	/* There is no global border-box reset in this stylesheet, and the
	   card has a 1px border. Without this the slide is 2px wider than
	   the wrap while translateX(-100%) moves by the wrap's width, so
	   every page drifts 2px further left than the card it is meant to
	   land on. */
	box-sizing: border-box;
}

.evpfx-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.evpfx-dot {
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}

.evpfx-dot.is-active {
	width: 1.5rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--rust);
}

.evpfx-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.evpfx-track,
	.evpfx-arrow,
	.evpfx-dot {
		transition: none;
	}
}

@media (prefers-contrast: more) {
	.evpfx-arrow {
		border-color: #fff;
	}

	.evpfx-counter {
		color: #fff;
	}
}

/* Featured tour card */
/*
   No width and no flex here. .evpfx-track sizes its own slides, so
   this card is whatever the thing holding it says it is.
*/
.evpco-tour-card {
	position: relative;
	background: linear-gradient(145deg, rgba(30, 25, 20, 0.95) 0%, rgba(20, 15, 12, 0.98) 100%);
	border: 1px solid rgba(212, 196, 168, 0.12);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.evpco-tour-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.evpco-tour-card-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpco-card-header {
	position: relative;
	height: 12.5rem;
	overflow: hidden;
}

.evpco-card-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.evpco-tour-card:hover .evpco-card-header img { transform: scale(1.05); }

.evpco-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
}

.evpco-card-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	padding: 0.3125rem 0.75rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 3.125rem;
	z-index: 2;
}

.evpco-card-sale-pill {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.3125rem 0.75rem;
	background: var(--ev-sale-gold);
	color: var(--ev-sale-dark);
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 3.125rem;
	z-index: 3;
	box-shadow: 0 4px 14px rgba(232, 184, 75, 0.5);
}

.evpco-card-sale-pill-icon { font-size: 1.1em; line-height: 1; }

.evpco-card-body { padding: 1.375rem 1.25rem 1.25rem; }

.evpco-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.875rem;
}

.evpco-mini-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.evpco-mini-stat {
	padding: 0.625rem 0.75rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.625rem;
}

.evpco-mini-stat-label {
	font-size: 0.57rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.25rem;
}

.evpco-mini-stat-value {
	font-size: 0.87rem;
	font-weight: 700;
	color: #fff;
}

.evpco-mini-stat-difficulty { color: var(--wp--preset--color--rust); }

.evpco-mini-stat.on-sale {
	position: relative;
	overflow: hidden;
	background: rgba(232, 184, 75, 0.07);
	border-color: rgba(232, 184, 75, 0.28);
}

.evpco-mini-stat.on-sale::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ev-sale-gold), #f5d080);
}

.evpco-sale-price-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.evpco-sale-price-new {
	font-size: 0.87rem;
	font-weight: 700;
	color: var(--ev-sale-gold);
}

.evpco-sale-price-old {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.3);
}

.evpco-card-cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	pointer-events: none;
}

.evpco-card-cta .evpco-btn-primary {
	width: 100%;
	justify-content: center;
}

/* The note is the one thing in the card that is its own link. */
.evpco-card-note {
	text-align: center;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.04em;
	margin: 0;
	pointer-events: auto;
}

.evpco-card-note a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.evpco-card-note a:hover { text-decoration: underline; }

@keyframes evpcoMapPulse {
	0%   { box-shadow: 0 0 0 0 rgba(184, 98, 27, 0.7); }
	70%  { box-shadow: 0 0 0 16px rgba(184, 98, 27, 0); }
	100% { box-shadow: 0 0 0 0 rgba(184, 98, 27, 0); }
}

@keyframes evpcoFadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes evpcoFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes evpcoScrollPulse {
	0%, 100% { transform: scaleY(1); opacity: 0.6; }
	50%      { transform: scaleY(0.7); opacity: 1; }
}

/* ---------- 1101 and up: the desktop layout ---------- */
@media (min-width: 1101px) {

	/*
	 * THE DESTINATION OVERVIEW GRID, AND THE TOUR OVERVIEW GRID.
	 *
	 * Written as one rule on purpose. The location overview once had
	 * its own copy of these numbers a few thousand lines away, drifted
	 * from them, and took three passes to bring back. Two selectors on
	 * one declaration block cannot drift.
	 */
	.evpto-content {
		display: grid;
		grid-template-columns: 1fr 27.5rem;
		gap: 5rem;
		padding: 5rem 3rem;
		align-items: start;
	}
	.evplo-desc { font-size: 1.05rem; margin-bottom: 2.25rem; }

	.evpfx-carousel { position: sticky; top: 5rem; }
	.evpco-card-header { height: 13.75rem; }
	.evpco-card-body { padding: 1.75rem 1.75rem 1.5rem; }
	.evpco-card-title { font-size: 1.4rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.evplo-tile,
	.evpco-tour-card,
	.evpco-btn-primary {
		transition: none;
	}
}

/* ==================================================================
   DESTINATION PAGE: TOURS CAROUSEL
   parts/section-destination-tours.php + assets/js/destination-tours.js

   Converted from salvage/destination-page/02-destination-tours.html.
   Removed on the way in: 58 !important, the uniqid prefix, and the
   width:100vw / margin-left:calc(-50vw + 50%) full bleed hack.

   The cards themselves are the homepage tours cards, .destpg-, shared
   rather than restyled. Only the section chrome lives here.
   ================================================================== */
.evpdt {
	position: relative;
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

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

/* THE SITE CONTAINER, the same repair as .destpg-header.

   The homepage carousel and this one had the same root cause, a full
   bleed header with a 5rem gutter sitting above a carousel that used a
   different box, but the symptom was reversed. There the cards were
   pushed right by an in-flow arrow button. Here the arrows live in
   .evpdt-controls under the track and cost nothing, and .evpdt-container
   was full width with no padding at all, so the cards started 16px from
   the window edge and the heading started at 80px: the cards were 64px
   LEFT of the heading, not right of it.

   One gutter variable now drives both, so they cannot drift apart
   again. */
.evpdt {
	--evpdt-gutter: 3rem;
}

.evpdt-header {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 4.5rem var(--evpdt-gutter) 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .evpdt-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.evpdt-header.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpdt-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 1.25rem;
}

.evpdt-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpdt-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	margin: 0 0 1.25rem;
}

.evpdt-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpdt-descriptor {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.38);
	max-width: 28.75rem;
	margin: 0;
}

/* The gutter is split between this and .evpdt-carousel below, which
   keeps its own 1rem so the card's drop shadow is not clipped flush
   against the scroll edge the way it would be at padding 0. The two
   add up to --evpdt-gutter, so the card lands exactly under the
   heading. Change the variable, not these. */
.evpdt-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 2rem calc(var(--evpdt-gutter) - 1rem) 1rem;
}

.evpdt-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 0 1rem;
}

.evpdt-carousel:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpdt-track {
	display: flex;
	gap: 1.25rem;
	/* Room above and below for the cards nearest the middle, which sit
	   a little larger than their box. See THE ROW HAS DEPTH below. */
	padding: 2rem 0 2.25rem;
	width: fit-content;
	align-items: stretch;
	transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* --------------------------------------------------------------------------
   THE ROW HAS DEPTH.

   A flat row of equal cards says nothing about which of them you are
   looking at. The cards nearest the middle of the window now sit
   forward, at full size and full strength, and they fall back towards
   the edges: smaller, dimmer, and behind their neighbours. The card
   half in view at the edge, the one about to arrive or just gone, is
   furthest back of all, which is what makes the row read as a row you
   are moving along rather than a strip that jumps.

   THE SCALE AND THE OPACITY ARE SET BY SCRIPT, per card, on every page
   change. They are not here because they depend on where each card
   sits relative to the middle, which depends on the page, the card
   width and the viewport. assets/js/carousel.js computes them from the
   same numbers it uses to place the track, so the two cannot disagree;
   this rule only says how they animate and what the resting state is.

   THE TRANSITION MATCHES THE TRACK'S, exactly, so a card settles at
   the moment it arrives rather than before or after it.
   -------------------------------------------------------------------------- */
.evpdt-track > * {
	transform-origin: center center;
	transition:
		transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* With three or fewer cards there is nothing to scroll, so the track
   centres rather than sitting hard left with a gap on the right. */
.evpdt-carousel--few .evpdt-track {
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

/* The dots only, since the arrows moved to the sides of the track. */
.evpdt-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 0.5rem 1rem 0;
}

/*
   THE STAGE IS THE ARROWS' POSITIONING CONTEXT, and it does not clip:
   the buttons overlay the gutter and the outermost card's edge, which
   is what an overlay arrow does. The carousel inside it still clips,
   so the track is cut at the same place it always was.
*/
.evpdt-stage {
	position: relative;
}

.evpdt-arrow {
	position: absolute;
	top: 50%;
	/* The centring translate is part of every transform this button
	   takes, because a second transform replaces the first rather than
	   adding to it. Leaving it out of the hover rule drops the button
	   half its own height. */
	transform: translateY(-50%);
	z-index: 10;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	background: rgba(20, 15, 12, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* Over a photograph now rather than over the page ground, so it
	   carries a shadow and a blur to hold its edge. */
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.evpdt-arrow--prev { left: 0; }
.evpdt-arrow--next { right: 0; }

.evpdt-arrow:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	transform: translateY(-50%) scale(1.07);
}

.evpdt-arrow:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
	transform: translateY(-50%);
}

.evpdt-arrow svg {
	width: 1rem;
	height: 1rem;
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
}

/*
   THE DOTS WRAP, because there is one per page and the page count is
   now the whole catalogue for a country rather than a capped sample.
   Bolivia has fifteen tours, which at 360px is fifteen dots plus two
   arrows on one row: 8px too wide for the viewport, and because the
   dots are built by script it only appeared once the script had run.
   The row is centred, so a wrapped second row still reads as one
   control rather than as a ragged left edge.

   min-width: 0 as well: a flex item defaults to min-width auto, which
   refuses to shrink below its content and is what lets a long row push
   its parent wider instead of wrapping.
*/
.evpdt-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-width: 0;
	gap: 0.5rem;
}

.evpdt-dot {
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}

.evpdt-dot.is-active {
	background: var(--wp--preset--color--rust);
	width: 1.5rem;
	border-radius: 4px;
}

.evpdt-see-all-wrap {
	display: flex;
	justify-content: center;
	padding: 2.5rem 1.25rem 4.5rem;
}

/* Shared button spec. Prominent on purpose: this link is what keeps
   this carousel and /destination/{slug}/tours/ complementary. */
.evpdt-see-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.evpdt-see-all-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpdt-see-all-btn:hover::before { opacity: 1; }

.evpdt-see-all-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpdt-see-all-btn > * {
	position: relative;
	z-index: 1;
}

.evpdt-see-all-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpdt-see-all-btn:hover svg { transform: translateX(3px); }

.evpdt-see-all-btn:focus-visible,
.evpdt-arrow:focus-visible,
.evpdt-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (max-width: 1200px) {
	/* Only the gutter moves. The header and the container both read it,
	   so they stay aligned without either one being restated. */
	.evpdt { --evpdt-gutter: 1.5rem; }
	.evpdt-header { padding: 4rem var(--evpdt-gutter) 2rem; }
}

@media (max-width: 768px) {
	.evpdt { --evpdt-gutter: 1.25rem; }
	.evpdt-header { padding: 3.25rem var(--evpdt-gutter) 1.75rem; }
	.evpdt-container { padding: 1.5rem calc(var(--evpdt-gutter) - 1rem) 0.5rem; }

	/*
	   THE ARROWS STAY ON THE SIDES HERE, SMALLER. The homepage
	   carousel hides its side buttons below this width and leaves the
	   phone to swipe. This one keeps them, because the reason they
	   moved off the control row was that a control which moves the
	   cards should be next to the cards, and that argument is
	   stronger on a phone, not weaker. 2.25rem still clears the 44px
	   tap target once the padding around the glyph is counted.
	*/
	.evpdt-arrow {
		width: 2.25rem;
		height: 2.25rem;
		min-width: 2.25rem;
	}

	.evpdt-arrow svg { width: 0.875rem; height: 0.875rem; }
	.evpdt-see-all-wrap { padding: 2rem 1rem 3.25rem; }
	.evpdt-see-all-btn { width: 100%; max-width: 23.75rem; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.evpdt-track,
	/* The cards too. The script leaves their scale and opacity alone
	   for a reader who asked for no motion, and this makes sure no
	   transition is left waiting on them either. */
	.evpdt-track > *,
	.evpdt-see-all-btn,
	.evpdt-see-all-btn svg,
	.evpdt-arrow,
	.evpdt-dot {
		transition: none;
	}

	.evpwt-js .evpdt-header { transition: none; opacity: 1; transform: none; }
	.evpdt-see-all-btn:hover { transform: none; }
}

/* ==================================================================
   DESTINATION PAGE: LOCATIONS MAP
   parts/section-destination-map.php + assets/js/destination-map.js

   Converted from salvage/destination-page/04-destination-map.html.
   Removed on the way in: 37 !important, the uniqid prefix, and the
   100vw full bleed hack.

   Not the homepage map. That one plots destinations across the world
   and lives in .evp-dest; this plots locations inside one country.
   ================================================================== */
.evpdm {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 0 4rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

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

.evpdm-header {
	position: relative;
	z-index: 1;
	max-width: 87.5rem;
	margin: 0 auto 2rem;
	padding: 0 3rem;
}

.evpwt-js .evpdm-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.evpdm-header.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpdm-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 1.25rem;
}

.evpdm-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpdm-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.evpdm-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/* ---------- Pills ---------- */
.evpdm-pills-wrap {
	position: relative;
	z-index: 1;
	max-width: 87.5rem;
	margin: 0 auto 1.75rem;
	padding: 0 3rem;
}

.evpdm-pills-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	margin: 0 0 0.75rem;
}

.evpdm-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.evpdm-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 3.125rem;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.evpdm-pill:hover {
	background: rgba(184, 98, 27, 0.15);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

.evpdm-pill.is-active {
	background: rgba(184, 98, 27, 0.22);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

.evpdm-pill-num {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

/* ---------- Map ---------- */
.evpdm-map-outer {
	display: none;
	position: relative;
	z-index: 1;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem;
}

.evpdm-map-wrapper {
	position: relative;
	height: 40rem;
	border-radius: 1.5rem;
	overflow: hidden;
	background: #0d0d0d;
	border: 1px solid rgba(212, 196, 168, 0.12);
	box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
}

.evpdm-leaflet {
	width: 100%;
	height: 100%;
}

.evpdm-reset-btn {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5625rem 0.875rem;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 3.125rem;
	font-family: inherit;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.evpdm-reset-btn:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

.evpdm-reset-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpdm-legend {
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1rem;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 3.125rem;
}

.evpdm-legend-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0 12px rgba(184, 98, 27, 0.6);
	flex-shrink: 0;
}

.evpdm-legend-text {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

@keyframes evpdmPulse {
	0%   { box-shadow: 0 0 0 0 rgba(184, 98, 27, 0.7); }
	70%  { box-shadow: 0 0 0 16px rgba(184, 98, 27, 0); }
	100% { box-shadow: 0 0 0 0 rgba(184, 98, 27, 0); }
}

.evpdm-marker-icon {
	background: transparent;
	border: none;
}

/*
 * Every marker used to pulse, which meant none of them stood out. The
 * map no longer travels to the card's location, so this is what says
 * which one the card is about: the lit marker is the only one pulsing,
 * and the rest sit back a little.
 */
.evpdm-marker {
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--rust);
	border: 3px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	opacity: 0.72;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* The marker belonging to the card on screen. */
.evpdm-marker.is-active {
	opacity: 1;
	transform: scale(1.3);
	animation: evpdmPulse 2s ease-out infinite;
}

/*
 * Under the pointer, and the override: a hovered marker takes the
 * emphasis even while another one is the card's. Brighter and faster
 * than is-active so the two are never mistaken for each other when
 * both are on screen at once.
 */
.evpdm-marker:hover,
.evpdm-marker.is-hover {
	opacity: 1;
	transform: scale(1.55);
	border-color: var(--wp--preset--color--gold-light);
	animation: evpdmPulse 1.4s ease-out infinite;
}

/* ---------- Showcase card ---------- */
.evpdm-showcase {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1001;
	width: 20rem;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.97), rgba(28, 22, 16, 0.97));
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.evpdm-showcase.is-hidden {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.evpdm-showcase-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.evpdm-showcase-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpdm-sc-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 3;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.evpdm-sc-close:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.evpdm-sc-close svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke: currentColor;
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
}

.evpdm-sc-img-wrap {
	position: relative;
	height: 9.375rem;
	overflow: hidden;
	background: #000;
}

.evpdm-sc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.evpdm-sc-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
	pointer-events: none;
}

.evpdm-sc-counter {
	position: absolute;
	bottom: 0.625rem;
	left: 0.75rem;
	padding: 0.25rem 0.625rem;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	border-radius: 1.125rem;
	font-size: 0.65rem;
	font-weight: 600;
	color: #fff;
}

.evpdm-sc-counter span { color: var(--wp--preset--color--gold); }

.evpdm-sc-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	transition: width 0.1s linear;
}

.evpdm-sc-body { padding: 1rem 1.125rem 1.125rem; }

.evpdm-sc-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.625rem;
}

.evpdm-sc-divider,
.evpdm-tt-divider,
.evpdm-mob-divider {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 0.625rem;
}

.evpdm-sc-desc {
	font-size: 0.78rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 1rem;
}

.evpdm-sc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.evpdm-sc-dots {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.evpdm-sc-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	min-width: 0.4375rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}

.evpdm-sc-dot.is-active {
	background: var(--wp--preset--color--rust);
	width: 1.125rem;
	border-radius: 4px;
}

.evpdm-sc-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.evpdm-sc-cta svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke: currentColor;
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Hover tooltip ---------- */
.evpdm-tooltip {
	position: absolute;
	z-index: 1100;
	width: 15rem;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.98), rgba(28, 22, 16, 0.98));
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 0.875rem;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.evpdm-tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpdm-tt-img-wrap {
	position: relative;
	height: 6.25rem;
	overflow: hidden;
	background: #000;
}

.evpdm-tt-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.evpdm-tt-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
}

.evpdm-tt-body { padding: 0.75rem 0.875rem 0.875rem; }

.evpdm-tt-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 0.98rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.evpdm-tt-desc {
	font-size: 0.72rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 0.625rem;
}

.evpdm-tt-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.evpdm-tt-cta-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpdm-tt-cta-arrow {
	width: 1.375rem;
	height: 1.375rem;
	background: var(--wp--preset--color--rust);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.evpdm-tt-cta-arrow svg {
	width: 0.6875rem;
	height: 0.6875rem;
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Mobile carousel ---------- */
.evpdm-mobile {
	position: relative;
	z-index: 1;
	padding: 0 1rem;
}

.evpdm-mob-wrap { overflow: hidden; }

.evpdm-mob-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.evpdm-mob-card {
	position: relative;
	flex: 0 0 100%;
	background: linear-gradient(145deg, rgba(30, 25, 20, 0.95), rgba(20, 15, 12, 0.98));
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.evpdm-mob-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.evpdm-mob-card-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpdm-mob-img {
	position: relative;
	height: 12rem;
	overflow: hidden;
	background: #000;
}

.evpdm-mob-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.evpdm-mob-body { padding: 1.125rem 1.25rem 1.25rem; }

.evpdm-mob-country {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 0.375rem;
}

.evpdm-mob-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 0.625rem;
}

.evpdm-mob-desc {
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 1rem;
}

.evpdm-mob-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.evpdm-mob-cta-text {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpdm-mob-arrow {
	width: 1.75rem;
	height: 1.75rem;
	background: linear-gradient(135deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.evpdm-mob-arrow svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke: currentColor;
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpdm-mob-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.evpdm-mob-btn {
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpdm-mob-btn:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.evpdm-mob-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

.evpdm-mob-btn svg {
	width: 0.9375rem;
	height: 0.9375rem;
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
}

.evpdm-mob-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4375rem;
}

.evpdm-mob-dot {
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}

.evpdm-mob-dot.is-active {
	background: var(--wp--preset--color--rust);
	width: 1.5rem;
	border-radius: 4px;
}

.evpdm-pill:focus-visible,
.evpdm-reset-btn:focus-visible,
.evpdm-sc-close:focus-visible,
.evpdm-sc-dot:focus-visible,
.evpdm-mob-btn:focus-visible,
.evpdm-mob-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Leaflet controls, specificity not !important. */
.evpdm .leaflet-container { background: #0d0d0d; }

.evpdm .leaflet-control-zoom.leaflet-bar {
	border: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.evpdm .leaflet-control-zoom a.leaflet-control-zoom-in,
.evpdm .leaflet-control-zoom a.leaflet-control-zoom-out {
	width: 2.25rem;
	height: 2.25rem;
	line-height: 2.25rem;
	font-size: 1.125rem;
	background: rgba(17, 16, 16, 0.9);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.evpdm .leaflet-control-zoom a.leaflet-control-zoom-in:hover,
.evpdm .leaflet-control-zoom a.leaflet-control-zoom-out:hover {
	background: var(--wp--preset--color--rust);
}

/* ---------- 1101 and up: map replaces the mobile carousel ---------- */
@media (min-width: 1101px) {
	.evpdm { padding: 5.5rem 0 5rem; }
	.evpdm-map-outer { display: block; }
	.evpdm-mobile { display: none; }
}

@media (max-width: 1200px) {
	.evpdm-header,
	.evpdm-pills-wrap,
	.evpdm-map-outer { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 768px) {
	.evpdm { padding: 3.5rem 0 3.5rem; }

	.evpdm-header,
	.evpdm-pills-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }

	/* The pills row scrolls rather than wrapping into a tall block. */
	.evpdm-pills-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}

	.evpdm-pills-row::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.evpdm-mob-track,
	.evpdm-tooltip,
	.evpdm-showcase,
	.evpdm-sc-dot,
	.evpdm-mob-dot,
	.evpdm-pill,
	.evpdm-marker {
		transition: none;
	}

	/*
	 * No pulse, so the lit marker is told apart by size and by the
	 * dimming of the others alone. Both are still on.
	 */
	.evpdm-marker,
	.evpdm-marker.is-active,
	.evpdm-marker:hover,
	.evpdm-marker.is-hover { animation: none; }
	.evpwt-js .evpdm-header { transition: none; opacity: 1; transform: none; }
}

/* ==================================================================
   DESTINATION PAGE: STORIES
   parts/section-destination-stories.php

   REWRITTEN FOR BRIEF 16, every rule replaced. What was here made the
   newest post's photograph the background of the whole section, with a
   "Read Article" button over it and the rest as a sidebar. It is one
   photo card and up to four thumbnail rows beside it now: nothing is a
   section background and there is no button.

   HALF THE LIBRARY HAS NO FEATURED IMAGE. Twelve of the twenty five
   cards the nine destinations render today have none, and on Kyrgyzstan
   and Madagascar that is every card. So the imageless states are
   designed rather than tolerated: a feature with no photograph stops
   pretending to be one and becomes a text card sized by its own words,
   and a row with no thumbnail keeps the column at the same tint so the
   list keeps its rhythm.

   No JS. The section is static, and content that needs script to
   appear is content a crawler may never see.
   ================================================================== */

.evpds {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpds-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- The header ---------- */

.evpds-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.evpds-head-text {
	min-width: 0;
}

.evpds-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpds-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evpds-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

.evpds-title-place {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpds-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpds-all svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpds-all:hover {
	color: #fff;
}

.evpds-all:hover svg {
	transform: translateX(0.25rem);
}

.evpds-all:focus-visible,
.evpds-feature:focus-visible,
.evpds-row:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The body ---------- */

.evpds-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

/* ---------- The featured card ---------- */

.evpds-feature {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
	text-decoration: none;
	isolation: isolate;
}

/* With nothing to list beside it the feature takes the width, at a
   wider crop so it is a banner rather than a very tall photograph. */
.evpds-body--alone .evpds-feature {
	aspect-ratio: 21 / 9;
}

/*
   NO PHOTOGRAPH, SO NOT A PHOTO CARD. A fixed ratio with a scrim and
   bottom-set text is a picture frame, and an empty picture frame is
   what this renders on Kyrgyzstan, where not one of the five posts has
   a featured image. Without one the card drops the ratio, takes the
   height of its own words, and carries a hairline and a rust wash so it
   still reads as the feature.
*/
.evpds-feature--noimage {
	display: flex;
	align-items: center;
	aspect-ratio: auto;
	border: 1px solid rgba(212, 196, 168, 0.22);
	background:
		radial-gradient(120% 120% at 8% 0%, rgba(184, 98, 27, 0.17) 0%, rgba(184, 98, 27, 0) 62%),
		var(--wp--preset--color--bg-deep);
}

/* Two classes beat one: the --alone ratio would otherwise win here. */
.evpds-body--alone .evpds-feature--noimage {
	aspect-ratio: auto;
}

.evpds-feature--noimage .evpds-feature-scrim {
	display: none;
}

.evpds-feature--noimage .evpds-feature-text {
	position: static;
	max-width: 42rem;
	padding: clamp(1.75rem, 3vw, 2.75rem);
}

/* Room for a third line: there is no picture competing for it. */
.evpds-feature--noimage .evpds-feature-excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.evpds-feature-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.evpds-feature:hover .evpds-feature-img,
.evpds-feature:focus-visible .evpds-feature-img {
	transform: scale(1.04);
}

.evpds-feature-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(17, 16, 16, 0.1) 0%,
		rgba(17, 16, 16, 0) 35%,
		rgba(17, 16, 16, 0.94) 100%);
}

.evpds-feature-text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	max-width: 40rem;
	padding: 2.25rem;
}

.evpds-meta {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpds-feature-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

/*
   TWO LINES, AND THE CLAMP IS THE WHOLE RULE. The excerpts run from 133
   to 419 characters and the photo card is a fixed height, so an
   unclamped third line pushes the title into the photograph.
*/
.evpds-feature-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.625rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

/* ---------- The list ---------- */

.evpds-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(212, 196, 168, 0.2);
}

.evpds-row {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1.125rem;
	align-items: center;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.2);
	text-decoration: none;
}

.evpds-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 0.5rem;
	background: #1c1715;
	overflow: hidden;
}

/*
   THE COLUMN STAYS, TINTED. Three of Guyana's four rows have no
   thumbnail; dropping the column on those would leave the list ragged,
   and a flat black hole reads as a failed image. The same rust wash as
   the imageless feature makes it the quiet member of a family.
*/
.evpds-thumb--empty {
	background:
		radial-gradient(130% 130% at 10% 0%, rgba(184, 98, 27, 0.2) 0%, rgba(184, 98, 27, 0) 70%),
		#1c1715;
	border: 1px solid rgba(212, 196, 168, 0.16);
}

.evpds-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpds-row-text {
	display: block;
	min-width: 0;
}

.evpds-meta--row {
	font-size: 0.56rem;
	margin-bottom: 0.3rem;
}

.evpds-row-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	transition: color 0.25s ease;
}

.evpds-row:hover .evpds-row-title,
.evpds-row:focus-visible .evpds-row-title {
	color: var(--wp--preset--color--gold);
}

@media (min-width: 1025px) {

	/*
	   THE FEATURE TAKES SEVEN TWELFTHS, the list five. The photograph
	   is the section and the rows are the index to it.
	*/
	.evpds-body {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.evpds-body--alone {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpds-feature {
		aspect-ratio: auto;
		min-height: 28.75rem;
	}

	.evpds-body--alone .evpds-feature {
		aspect-ratio: 21 / 9;
		min-height: 0;
	}

	/*
	   The text card still fills the column, so a Kyrgyzstan feature
	   stands level with the four rows beside it rather than floating
	   short of them. Alone it has no column to match and takes the
	   height of its words.
	*/
	.evpds-feature--noimage {
		aspect-ratio: auto;
	}

	.evpds-body--alone .evpds-feature--noimage {
		aspect-ratio: auto;
		min-height: 0;
	}
}

@media (max-width: 900px) {

	.evpds-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.875rem;
	}

	.evpds-all {
		margin-bottom: 0;
	}
}

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

	.evpds-feature-img,
	.evpds-row-title,
	.evpds-all svg {
		transition: none;
	}

	.evpds-feature:hover .evpds-feature-img,
	.evpds-feature:focus-visible .evpds-feature-img {
		transform: none;
	}
}

/* ==================================================================
   DESTINATION PAGE: WILDLIFE
   parts/section-destination-wildlife.php
   + assets/js/destination-wildlife.js

   Converted from salvage/destination-page/07-wildlife-fauna.html.
   Removed on the way in: 20 !important, the uniqid prefix, and three
   100vw uses.

   Cards are articles, not anchors. The fauna post type is not publicly
   queryable, so a species has no URL to link to.
   ================================================================== */
.evpdw {
	position: relative;
	padding: 4.5rem 0 4rem;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

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

.evpdw-header {
	max-width: 87.5rem;
	margin: 0 auto 2rem;
	padding: 0 3rem;
}

.evpwt-js .evpdw-header {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.evpdw-header.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpdw-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 1.25rem;
}

.evpdw-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
	flex-shrink: 0;
}

.evpdw-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.evpdw-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/* ---------- Carousel ---------- */
.evpdw-carousel-outer {
	max-width: 87.5rem;
	margin: 0 auto;
}

.evpdw-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 0 3rem;
}

.evpdw-carousel:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpdw-track {
	display: flex;
	gap: 1.5rem;
	padding: 1rem 0.25rem 1.75rem;
	width: fit-content;
	align-items: stretch;
	transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* Three or fewer never overflow, so the row centres instead of sitting
   hard left with dead space beside it. */
.evpdw-carousel--few .evpdw-track {
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

.evpdw-card {
	position: relative;
	flex: 0 0 18.75rem;
	max-width: 18.75rem;
	min-width: 18.75rem;
	display: flex;
	flex-direction: column;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.98) 0%, rgba(28, 22, 16, 0.98) 100%);
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.evpdw-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 196, 168, 0.3);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.evpdw-card-img-wrap {
	position: relative;
	height: 13.125rem;
	overflow: hidden;
	background: #0a0706;
	flex-shrink: 0;
}

.evpdw-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.evpdw-card:hover .evpdw-card-img-wrap img { transform: scale(1.06); }

.evpdw-card-img-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
}

/* ---------- IUCN badge ----------
   Coloured by the Red List's own scale, from the tokens in :root, so
   the eight categories cannot pick up eight one-off hex values. */
.evpdw-badge {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	padding: 0.3125rem 0.75rem;
	border-radius: 3.125rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ev-iucn-dd);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.evpdw-badge--lc { background: var(--ev-iucn-lc); }
.evpdw-badge--nt { background: var(--ev-iucn-nt); }
.evpdw-badge--vu { background: var(--ev-iucn-vu); color: #1a1000; }
.evpdw-badge--en { background: var(--ev-iucn-en); }
.evpdw-badge--cr { background: var(--ev-iucn-cr); }
.evpdw-badge--ew { background: var(--ev-iucn-ew); }
.evpdw-badge--ex { background: var(--ev-iucn-ex); }
.evpdw-badge--dd { background: var(--ev-iucn-dd); }

.evpdw-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.375rem 1.375rem 1.25rem;
}

.evpdw-card-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.45rem;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 0.3125rem;
}

.evpdw-card-sci {
	font-size: 0.8rem;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
	margin: 0 0 0.75rem;
}

.evpdw-card-sci em { font-style: italic; }

.evpdw-card-divider {
	display: block;
	width: 1.75rem;
	height: 1.5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	margin-bottom: 0.875rem;
}

/* FOUR LINES ON THE CARD, ALL OF IT IN THE DOM.

   The track is align-items stretch, so every card in a row takes the
   height of the longest description. Across the library those run from
   18 words to 102, which made a row of seven as tall as its worst case.
   The clamp is CSS rather than a PHP substr so the rest of the text
   stays available to the dialog and to a crawler.

   Four lines is the widest clamp that still shortens the long cards
   hard: at this size and width a card fits about 46 characters a line,
   so four lines is roughly 180 characters, which is where the short
   descriptions already sit. */
.evpdw-card-desc {
	font-size: 0.82rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The trigger covers the card. Transparent, so the card's own styling
   shows through, and it carries the focus ring because it is the thing
   that takes focus. */
.evpdw-card-trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
}

.evpdw-card-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/* The fade is the affordance. It sits at the foot of the clamped text
   and says the paragraph continues without adding a second control
   competing with the card's own click target. */
.evpdw-card-body {
	position: relative;
}

.evpdw-card-body::after {
	content: '';
	position: absolute;
	right: 1.375rem;
	bottom: 1.25rem;
	left: 1.375rem;
	height: 1.65em;
	background: linear-gradient(to bottom, rgba(20, 15, 10, 0), rgba(20, 15, 10, 0.97));
	pointer-events: none;
}

/* ---------- Species dialog ---------- */
.evpdw-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.evpdw-modal[hidden] {
	display: none;
}

.evpdw-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(3px);
}

.evpdw-modal-panel {
	position: relative;
	z-index: 1;
	width: min(34rem, 100%);
	max-height: 86vh;
	overflow-y: auto;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.99) 0%, rgba(28, 22, 16, 0.99) 100%);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1.25rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.evpdw-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpdw-modal-close:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.evpdw-modal-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpdw-modal-close svg {
	width: 1.1rem;
	height: 1.1rem;
}

.evpdw-modal-media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.4);
}

.evpdw-modal-media:empty {
	display: none;
}

.evpdw-modal-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.evpdw-modal-body {
	padding: 1.625rem 1.625rem 1.875rem;
}

.evpdw-modal-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}

.evpdw-modal-sci {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
	margin: 0.35rem 0 0;
}

.evpdw-modal-desc {
	font-size: 0.92rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.76);
	margin: 0;
}

/* ---------- Controls ---------- */
.evpdw-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.5rem 3rem 0;
}

.evpdw-nav-btn {
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpdw-nav-btn:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.evpdw-nav-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

.evpdw-nav-btn svg {
	width: 1rem;
	height: 1rem;
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
}

.evpdw-dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.evpdw-dot {
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}

.evpdw-dot.is-active {
	background: var(--wp--preset--color--rust);
	width: 1.5rem;
	border-radius: 4px;
}

.evpdw-count {
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	min-width: 3rem;
	text-align: center;
}

.evpdw-count span { color: #fff; }

.evpdw-nav-btn:focus-visible,
.evpdw-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (max-width: 1200px) {
	.evpdw-header,
	.evpdw-carousel,
	.evpdw-controls { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 768px) {
	.evpdw { padding: 3.5rem 0 3.5rem; }

	.evpdw-header,
	.evpdw-carousel,
	.evpdw-controls { padding-left: 1.25rem; padding-right: 1.25rem; }

	.evpdw-track { gap: 0.875rem; padding: 0.25rem 0 0.5rem; }

	.evpdw-card {
		flex-basis: 17rem;
		max-width: 17rem;
		min-width: 17rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpdw-track,
	.evpdw-card,
	.evpdw-card-img-wrap img,
	.evpdw-nav-btn,
	.evpdw-dot {
		transition: none;
	}

	.evpdw-card:hover { transform: none; }
	.evpdw-card:hover .evpdw-card-img-wrap img { transform: none; }
	.evpwt-js .evpdw-header { transition: none; opacity: 1; transform: none; }
}

/* ==================================================================
   SINGLE TOUR, PASS 1
   Hero, highlights carousel, overview and the enquiry modal.
   Rebuilt from salvage/tour-page/01, 02, 03 and the 03-06 shared
   style block. Colours come from theme.json presets and the :root
   tokens above; nothing here redeclares a brand hex.
   ================================================================== */

/* Difficulty, as a four step scale rather than a colour picked per
   section. The reference set Moderate to the brand rust with an inline
   style, which leaves nothing to say Challenging with: this walks
   green, amber, rust, red so the four values are actually separable. */
:root {
	--ev-diff-easy: #6B8F50;
	--ev-diff-moderate: #C4A046;
	--ev-diff-challenging: #B8621B;
	--ev-diff-extreme: #b3331f;
}

/* Body scroll lock while a modal is open. Set by script, cleared by
   script, and scoped to a class so nothing else can leave the page
   unscrollable. */
.evp-scroll-locked {
	overflow: hidden;
}

/* ---------- Tour hero ---------- */

.evpth {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

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

.evpth-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 3.75rem 5rem 5rem;
	background: var(--wp--preset--color--bg-deep);
	overflow: hidden;
}

/* The faint diagonal hatch behind the copy. */
.evpth-content::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 1.75rem,
		rgba(212, 196, 168, 0.018) 1.75rem,
		rgba(212, 196, 168, 0.018) 1.8125rem
	);
	pointer-events: none;
}

.evpth-content > * {
	position: relative;
	z-index: 1;
}

/* The trail, quieter than the copy under it: 11px, white at 45 per
   cent, the links at 60 and gold on hover. It stops at the country;
   the tour's name is the H1 directly below. */
.evpth-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.45);
}

.evpth-breadcrumbs a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpth-breadcrumbs a:hover {
	color: var(--wp--preset--color--gold);
}

.evpth-breadcrumbs-sep {
	color: rgba(255, 255, 255, 0.3);
}

.evpth-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpth-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

/* The middle dots between the three facts. */
.evpth-eyebrow-sep {
	opacity: 0.55;
}

.evpth-sale {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	width: fit-content;
	margin: 0 0 1rem;
	padding: 0.3125rem 0.875rem;
	border-radius: 3.125rem;
	background: var(--ev-sale-gold);
	color: var(--ev-sale-dark);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 0.25rem 1.125rem rgba(232, 184, 75, 0.35);
}

.evpth-sale::before {
	content: '\2736';
	font-size: 0.75em;
}

/* AS LARGE AS HOLDS TWO LINES, title by title, 4rem at most. The column
   is 45 per cent of the viewport less 140px of padding (508px at
   1440), and --evpth-fit on the element is this title's own largest
   size as a fraction of that column, worked out from its words in
   ecovoyager_tour_title_fit(). Short titles reach the cap and stay on
   one line; the longest live title holds two lines at 41px. */
.evpth-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.75rem, calc((45vw - 140px) * var(--evpth-fit, 0.12)), 4rem);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
	color: #fff;
}

/*
   A TITLE WITH A COLON IS SET AS TWO LINES, and the colon is dropped
   because the break now says what it said. Shared with .evpto-title-*
   on the overview; the only difference between the two sections is the
   size each heading is already set at, which is why everything here is
   in em and inherits it.

   NOT SAND. That is .evpth-subtitle, the hook under the hero's title,
   which holds the tour_subtitle field. The second half of a title is
   still the title, so it stays in the heading's own colour and face
   and is separated by size and opacity alone.

   Both spans are display: block, so the halves never share a line even
   when there is room. A title read as one line is the thing this
   replaces.

   line-height is looser than the heading's 1.05 because this half is
   smaller and more likely to wrap, and 1.05 on a wrapped subtitle sets
   the lines nearly touching.
*/
.evpth-title-main,
.evpto-title-main {
	display: block;
}

.evpth-title-sub,
.evpto-title-sub {
	display: block;
	margin-top: 0.2em;
	font-size: 0.54em;
	line-height: 1.22;
	color: rgba(255, 255, 255, 0.74);
}

.evpth-rule {
	display: block;
	width: 1.875rem;
	height: 0.09375rem;
	margin: 0 0 1.125rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
}

/* THE HOOK: tour_subtitle in the body face, sand, 19px on 1.55, whole:
   never cut, so a long one runs past three lines (ops/field-lengths.json
   says three is the number to write to). The stats bar that sat here
   (duration, from, best time, the trek's altitude) is gone; the
   overview's tiles carry those. */
.evpth-subtitle {
	margin: 0 0 1.75rem;
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--wp--preset--color--gold);
}

/* One button at its own width, and beside it the quiet links. */
.evpth-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem 1.5rem;
}

.evpth-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.25s ease;
}

.evpth-link svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpth-link:hover {
	color: var(--wp--preset--color--gold);
}

.evpth-link:hover svg {
	transform: translateX(0.1875rem);
}

.evpth-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* THE NEXT DEPARTURES, under the buttons: a label and up to three
   dates, each a link into the booking form with that date set, the
   places left beside the date where the departure says. Without any,
   one line. */
.evpth-departures {
	margin-top: 1.375rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.evpth-departures-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.evpth-departures-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpth-departure a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpth-departure a:hover {
	color: var(--wp--preset--color--gold);
}

.evpth-departure time {
	font-weight: 600;
}

.evpth-departure-spots {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gold);
}

.evpth-departure--full a,
.evpth-departure--full .evpth-departure-spots {
	color: rgba(255, 255, 255, 0.45);
}

.evpth-departures-note {
	margin: 0;
}

.evpth-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5625rem;
	padding: 0.875rem 1.625rem;
	border: none;
	border-radius: 3.125rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, color 0.28s ease, background 0.28s ease;
}

.evpth-btn > * {
	position: relative;
	z-index: 1;
}

.evpth-btn svg {
	flex-shrink: 0;
	width: 0.9375rem;
	height: 0.9375rem;
	transition: transform 0.28s ease;
}

.evpth-btn:hover svg {
	transform: translateX(0.1875rem);
}

.evpth-btn-primary {
	flex: none;
	border: 2px solid var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
	box-shadow: 0 0.5rem 1.625rem rgba(184, 98, 27, 0.42);
}

.evpth-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-light) 0%, var(--wp--preset--color--rust) 70%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.evpth-btn-primary:hover::before {
	opacity: 1;
}

.evpth-btn-primary:hover {
	transform: translateY(-0.125rem);
	box-shadow: 0 0.875rem 2rem rgba(184, 98, 27, 0.52);
}

.evpth-btn-primary svg {
	fill: #fff;
}

.evpth-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* A tour with no pictures at all. One column rather than a 55% band
   of empty background where the slideshow would have been. */
.evpth--nomedia {
	display: block;
	min-height: 0;
}

.evpth--nomedia .evpth-content {
	max-width: 60rem;
	margin: 0 auto;
	padding-top: 7rem;
	padding-bottom: 7rem;
}

/* Media panel. */
.evpth-media {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
}

.evpth-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
	will-change: opacity;
}

.evpth-slide.is-active {
	opacity: 1;
}

.evpth-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Feathered edge into the copy panel, and a floor gradient. */
.evpth-media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* Three quarters of the width it had (38 per cent of the panel
	   down to 28.5), so more of the photograph shows. */
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.88) 3%,
		rgba(17, 16, 16, 0.28) 10.5%,
		rgba(17, 16, 16, 0.05) 19.5%,
		transparent 28.5%
	);
}

.evpth-media::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 32%;
	pointer-events: none;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.48), transparent);
}

/* A caption, bottom left, only from the tour's own hero_captions and
   only while its photograph is up. It starts past the dissolve, which
   is near opaque for the first tenth of the panel. */
.evpth-caption {
	position: absolute;
	left: 12%;
	bottom: 2.75rem;
	z-index: 4;
	max-width: 60%;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	background: rgba(17, 16, 16, 0.55);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.evpth-caption.is-active {
	opacity: 1;
}

.evpth-dots {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	z-index: 5;
	display: flex;
	gap: 0.4375rem;
	transform: translateX(-50%);
}

.evpth-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	cursor: pointer;
	transition: background 0.4s ease, transform 0.4s ease;
}

.evpth-dot.is-active {
	background: var(--wp--preset--color--gold);
	transform: scale(1.4);
}

.evpth-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.1875rem;
}

.evpth-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 6;
	height: 0.1875rem;
	background: rgba(255, 255, 255, 0.07);
}

.evpth-progress-bar {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	transition: width 0.05s linear;
}

/* The entrance animation is opt in behind a no-preference query, so
   the resting state of every element here is visible. Starting at
   opacity 0 and relying on an animation to undo it is how a section
   ends up invisible when something upstream does not run. */
@media (prefers-reduced-motion: no-preference) {
	.evpth-eyebrow,
	.evpth-sale,
	.evpth-title,
	.evpth-rule,
	.evpth-subtitle,
	.evpth-cta,
	.evpth-departures {
		animation: evpth-rise 0.8s ease-out backwards;
	}

	.evpth-eyebrow    { animation-delay: 0.2s; }
	.evpth-sale       { animation-delay: 0.35s; }
	.evpth-title      { animation-delay: 0.45s; }
	.evpth-rule       { animation-delay: 0.6s; }
	.evpth-subtitle   { animation-delay: 0.7s; }
	.evpth-cta        { animation-delay: 0.85s; }
	.evpth-departures { animation-delay: 1s; }
}

@keyframes evpth-rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Tour highlights ---------- */

.evptd {
	position: relative;
	display: block;
	padding: 4.5rem 0 4rem;
	overflow-x: hidden;
	/*
	 * ITS OWN STACKING CONTEXT. The card, the controls, the key and the
	 * chip sit at z-index 1001 to clear Leaflet's panes, and the site
	 * header is fixed at 1000: without this they rode over the header
	 * as the page scrolled. Isolated, every z-index in here is settled
	 * among the section's own children, and the section as a whole sits
	 * under the header like any other block.
	 */
	isolation: isolate;
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);
}

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

/* .evptd-header is not styled here. It shares the tour page's header
   alignment rule, which is further down the file next to the other
   section headers it has to line up with. */

.evptd-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evptd-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evptd-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evptd-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evptd-descriptor {
	max-width: 28.75rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.38);
}

/* The entrance is a CSS animation, not a class a script adds. Gating
   it on .evpwt-js would mean "the page has JavaScript", which is not
   the same as "this section's script loaded and ran". The difference
   is what left the tour cards at opacity 0 on the destination page. */
@media (prefers-reduced-motion: no-preference) {
	.evptd-eyebrow,
	.evptd-title,
	.evptd-descriptor {
		animation: evpth-rise 0.7s ease-out backwards;
	}

	.evptd-title      { animation-delay: 0.1s; }
	.evptd-descriptor { animation-delay: 0.2s; }
}


/* ---------- Tour highlights: the map and the strip ----------

   The carousel is gone. The highlights are a map of the route with the
   placed highlights as photo markers, and the same cards in a strip
   under it, smaller and dimmed except for the selected one. The header
   above is unchanged apart from the two item legend beside it; its
   alignment still comes from the shared tour page header rule further
   down the file, which this block does not repeat. */

.evptd {
	--evptd-gutter: clamp(1.25rem, 5vw, 5rem);
}

/* The legend sits at the header's baseline, to the right of the text,
   and drops under it where the two do not fit on one line. Only flex
   properties here: the shared rule owns the width, margin and padding. */
.evptd-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
}

.evptd-header-text {
	min-width: 0;
}

/* ---------- The key, inside the map ----------
   Top right under the controls, which is free on every size: the card
   has the left, the chip the bottom right. Two rows in one panel: the
   marks (a day's sand dot, a highlight's rust pin), then how each leg
   is travelled, one entry per kind on this tour, filled by the shared
   leg helper once the route is drawn. Decoration for the eye; each row
   is still a list for a screen reader. */

.evptd-keys {
	position: absolute;
	top: calc(1.25rem + 2.75rem + 0.5rem);
	right: 1.25rem;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	max-width: calc(100% - 2.5rem);
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.75rem;
	background: rgba(17, 16, 16, 0.84);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	pointer-events: none;
}

.evptd-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evptd-legend[hidden] {
	display: none;
}

.evptd-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* The two keys are the two marks at key size: the sand dot of a day on
   the route and the rust pin of a highlight, white centre and glow. */
.evptd-legend-stop {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 1px rgba(17, 16, 16, 0.7);
}

.evptd-legend-pin {
	position: relative;
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 0.2rem rgba(184, 98, 27, 0.3), 0 0 0.6rem rgba(184, 98, 27, 0.6);
}

.evptd-legend-pin::after {
	content: '';
	position: absolute;
	inset: 0.2rem;
	border-radius: 50%;
	background: #fff;
}

/* ---------- The legs' key, on both maps ----------
   One entry per kind of leg on the tour, built by
   window.ecovoyagerRouteLegs.legend() in tour-itinerary.js: a short
   sample of the line as it is drawn, then the word. The sample is an
   inline SVG so it is the same strokes and dashes the map uses. */

.ev-leg-key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ev-leg-sample {
	flex: 0 0 auto;
	display: block;
	width: 1.75rem;
	height: 0.625rem;
	overflow: visible;
}

/* The plane at the middle of a flight's arc. A divIcon, so .ev-leg-plane
   is the element Leaflet positions and writes its own transform on; the
   glyph inside carries the rotation to the direction of travel. */
.ev-leg-plane {
	pointer-events: none;
	background: none;
	border: 0;
}

.ev-leg-plane-glyph {
	display: block;
	width: 100%;
	height: 100%;
	color: #9FB6C9;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.ev-leg-plane-glyph svg {
	display: block;
	width: 100%;
	height: 100%;
}


/* ---------- Two layouts, by the route's shape ----------

   The map and the strip share one container, .evptd-body. Horizontal
   (evptd--horizontal) is the wide map with the strip below, which is
   also what every phone gets. Vertical (evptd--vertical) puts a tall
   map on the left and the cards in a column beside it on a desktop;
   each card there shows its photograph above its words, with the blurb,
   because the column has the room the strip does not. The map's own
   rules below know nothing of the layout; only the sizes change. */

.evptd-body {
	max-width: 87.5rem;
	margin: 2rem auto 0;
	padding: 0 var(--evptd-gutter);
}

/* The blurb is on every card and shown only where there is room for
   it: the column of the vertical layout. */
.evptd-card-blurb {
	display: none;
}

@media (min-width: 769px) {

	.evptd--vertical .evptd-body {
		display: grid;
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		gap: 1.5rem;
		align-items: start;
	}

	/* Tall, up to most of a screen, so a route running north to south
	   fills it; the column beside it is exactly as tall and scrolls. */
	.evptd--vertical .evptd-map {
		height: min(80vh, 52rem);
	}

	.evptd--vertical .evptd-strip-wrap {
		margin: 0;
		min-width: 0;
	}

	.evptd--vertical .evptd-strip {
		flex-direction: column;
		gap: 1rem;
		height: min(80vh, 52rem);
		padding: 0.25rem 0.5rem 0.25rem 0.25rem;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: y proximity;
		scrollbar-width: thin;
		scrollbar-color: rgba(212, 196, 168, 0.3) transparent;
	}

	.evptd--vertical .evptd-strip::-webkit-scrollbar {
		display: block;
		width: 0.375rem;
	}

	.evptd--vertical .evptd-strip::-webkit-scrollbar-thumb {
		border-radius: 0.375rem;
		background: rgba(212, 196, 168, 0.3);
	}

	.evptd--vertical .evptd-card {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* The photograph above the words, the card as tall as they are. */
	.evptd--vertical .evptd-card-btn {
		display: grid;
		height: auto;
	}

	.evptd--vertical .evptd-card-img {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}

	.evptd--vertical .evptd-card-img::after {
		display: none;
	}

	.evptd--vertical .evptd-card-body {
		position: static;
		gap: 0.4rem;
		padding: 1rem 1.25rem 1.25rem;
	}

	.evptd--vertical .evptd-card-title {
		font-size: 1.35rem;
	}

	.evptd--vertical .evptd-card-blurb {
		display: block;
		font-family: var(--wp--preset--font-family--montserrat);
		font-size: 0.86rem;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.66);
	}
}

/* ---------- The map ---------- */

.evptd-map-wrap {
	min-width: 0;
}

/* Everything that floats over the map is positioned against the frame,
   so the gutter never enters the arithmetic. */
.evptd-map-frame {
	position: relative;
}

/*
 * THE FRAME HOLDS ITS HEIGHT BEFORE LEAFLET ARRIVES, and after, if it
 * never does. A section that collapses and then jumps open when a
 * script lands is worse than a dark panel for a moment, so the height
 * is the frame's own and not the map's. The ground is the colour
 * MapTiler's terrain fades to at its edges, so the first tiles do not
 * flash against black.
 */
.evptd-map {
	position: relative;
	isolation: isolate;
	/* Tall enough that a route running north to south, which is most of
	   them, fills the frame rather than a band across its middle. */
	height: clamp(28rem, 66vh, 46rem);
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: radial-gradient(120% 90% at 50% 40%, #2c2a25, #17150f);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(212, 196, 168, 0.08), 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}

.evptd-map .leaflet-container {
	height: 100%;
	background: #2b2a26;
	font-family: var(--wp--preset--font-family--montserrat);
}

/*
 * THE IMAGERY, DARK. Satellite tiles drained to a third of their colour
 * and half their light, so the relief and the salt still read and the
 * route, the pins and the cards are the brightest things on the map.
 * On the tile pane, so a zoom in progress darkens the same way; the
 * borders, the route and the pins sit in panes above and keep their
 * colour.
 */
.evptd-map .leaflet-tile-pane {
	filter: saturate(0.3) brightness(0.5);
}

/*
 * The attribution is a licence obligation and stays visible, in the
 * section's own colours rather than Leaflet's white box, which is the
 * one thing on a dark page that reads as a bug.
 */
.evptd-map .leaflet-control-attribution {
	margin: 0;
	padding: 0.25rem 0.5rem;
	background: rgba(17, 16, 16, 0.78);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.6rem;
	line-height: 1.4;
}

.evptd-map .leaflet-control-attribution a {
	color: var(--wp--preset--color--gold);
}

/* The controls, top right. Same material as the itinerary's Reset view,
   so the two maps on the page share one vocabulary. */
.evptd-controls {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 1001;
	display: flex;
	gap: 0.5rem;
}

.evptd-ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 3.125rem;
	background: rgba(17, 16, 16, 0.88);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.evptd-ctrl--zoom {
	width: 2.75rem;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
}

.evptd-ctrl:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evptd-ctrl:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* The summary, bottom right above the attribution, because the photo
   card has the left. Facts about the trip, not a caption: days, stops,
   highlights, and where it starts and ends. */
.evptd-chip {
	position: absolute;
	right: 1.25rem;
	bottom: 2.5rem;
	z-index: 1001;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.25rem 0.5rem;
	max-width: 60%;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.75rem;
	background: rgba(17, 16, 16, 0.84);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.evptd-chip span + span::before {
	content: '\00b7';
	margin-right: 0.5rem;
	color: var(--wp--preset--color--gold);
	opacity: 0.6;
}

/* ---------- Day stops ---------- */

.evptd-stop {
	background: none;
	border: none;
	pointer-events: none;
}

/* A tiny sand dot and nothing else: the route's punctuation, not its
   subject, and not a thing to click. The pins are the subject. */
.evptd-stop .evptd-stop-dot {
	position: absolute;
	inset: 0;
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid rgba(17, 16, 16, 0.7);
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	opacity: 0.9;
	box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
}

/* ---------- Highlight pins ---------- */

.evptd-pin {
	background: none;
	border: none;
	cursor: pointer;
}

.evptd-pin:focus-visible {
	outline: none;
}

/* The glow: a soft rust halo under the pin, its own element so it can
   breathe on hover and selection without the pin changing size, and
   so the imagery still reads through it. */
.evptd-pin .evptd-pin-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(184, 98, 27, 0.5) 0%, rgba(184, 98, 27, 0.18) 45%, rgba(184, 98, 27, 0) 70%);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
	pointer-events: none;
}

/*
 * THE PIN: a rust disc with a white centre, 1.75rem across, so it is
 * unmistakable over any imagery and unlike anything else on the map.
 * The selected one grows and a ring pulses out of it; hover lifts it a
 * little and shows its heading.
 */
.evptd-pin .evptd-pin-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 0.125rem solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.evptd-pin .evptd-pin-dot::after {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #fff;
}

/* The pulse ring of the selected pin: drawn out from the pin's edge and
   fading, every two seconds, where the reader allows motion; under
   reduced motion a still ring, set further down the file. */
.evptd-pin .evptd-pin-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.evptd-pin.is-active .evptd-pin-pulse {
	opacity: 0.7;
	transform: translate(-50%, -50%) scale(1.9);
}

@media (prefers-reduced-motion: no-preference) {

	.evptd-pin.is-active .evptd-pin-pulse {
		animation: evptd-pulse 2s ease-out infinite;
	}
}

@keyframes evptd-pulse {

	0% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.6);
	}
}

/* The tooltip: the heading above the pin, on hover and on focus, with a
   small caret. The selected pin's heading is on the card, so it does
   not also hang here. */
.evptd-pin .evptd-pin-tip {
	position: absolute;
	bottom: calc(50% + 1.5rem);
	left: 50%;
	width: max-content;
	max-width: 14rem;
	padding: 0.4rem 0.7rem;
	border-radius: 0.5rem;
	background: rgba(17, 16, 16, 0.92);
	color: #f3ede2;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.74rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0.25rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}

.evptd-pin .evptd-pin-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	border: 0.3rem solid transparent;
	border-top-color: rgba(17, 16, 16, 0.92);
	transform: translateX(-50%);
}

.evptd-pin:hover .evptd-pin-tip,
.evptd-pin:focus-visible .evptd-pin-tip,
.evptd-pin.is-hover .evptd-pin-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Hover is a hint, selection is the statement: same split as the
   itinerary's day items. */
.evptd-pin.is-hover .evptd-pin-dot,
.evptd-pin:hover .evptd-pin-dot {
	border-color: var(--wp--preset--color--gold-light);
	transform: translate(-50%, -50%) scale(1.12);
}

.evptd-pin.is-hover .evptd-pin-glow,
.evptd-pin:hover .evptd-pin-glow {
	transform: translate(-50%, -50%) scale(1.2);
}

.evptd-pin.is-active .evptd-pin-dot {
	border-color: var(--wp--preset--color--gold);
	transform: translate(-50%, -50%) scale(1.3);
}

.evptd-pin.is-active .evptd-pin-glow {
	transform: translate(-50%, -50%) scale(1.6);
}

.evptd-pin:focus-visible .evptd-pin-dot {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The photo card on the map ----------
   Left side, about a third of the map. Same material as the
   itinerary's map card, since it does the same job. Its width is
   measured by tour-highlights.js, which aims the fit and the fly at
   the part of the map the card is not covering, so widening it here
   also widens the strip the route is kept out of, by itself. */
.evptd-mapcard {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1001;
	width: clamp(16rem, 32%, 24rem);
	max-height: calc(100% - 2.5rem);
	margin: 0;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1rem;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.97), rgba(28, 22, 16, 0.97));
	box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.6);
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.evptd-mapcard.is-hidden {
	opacity: 0;
	transform: translateY(0.5rem);
}

.evptd-mapcard-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #000;
}

.evptd-mapcard.has-no-image .evptd-mapcard-media {
	display: none;
}

.evptd-mapcard-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evptd-mapcard-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.875rem 1.125rem 1rem;
}

.evptd-mapcard-day {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
}

.evptd-mapcard-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.15rem, 1.4vw, 1.35rem);
	line-height: 1.2;
	color: #fff;
}

.evptd-mapcard-text {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.66);
}

/* ---------- The strip ---------- */

.evptd-strip-wrap {
	margin: 1.5rem 0 0;
}

.evptd--nomap .evptd-strip-wrap {
	margin-top: 0.5rem;
}

/*
 * A native horizontal scroller with snap points. A phone swipes it, a
 * trackpad scrolls it, the arrow keys move the selection, and there is
 * no transform to keep in step with a page count. The scrollbar is
 * hidden because the dimmed cards at either edge already say that it
 * scrolls, which is the job the old carousel's edge fades did.
 */
.evptd-strip {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0.25rem 0.25rem 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.evptd-strip::-webkit-scrollbar {
	display: none;
}

.evptd-strip:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evptd-card {
	flex: 0 0 16rem;
	scroll-snap-align: center;
	opacity: 0.62;
	transition: opacity 0.3s ease;
}

.evptd-card.is-active,
.evptd-card.is-hover,
.evptd-card:hover {
	opacity: 1;
}

/* With no map there is nothing to select, so nothing is dimmed. */
.evptd--nomap .evptd-card {
	opacity: 1;
}

.evptd-card-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 12.5rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 0.875rem;
	background: #1d1914;
	color: #fff;
	font: inherit;
	text-align: left;
	/*
	 * A black drop shadow on a near black section does nothing; the
	 * inset hairline along the top is what separates a raised surface
	 * from the ground here, as on every card in this section before.
	 */
	box-shadow: inset 0 1px 0 rgba(212, 196, 168, 0.08), 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.evptd-card-btn:hover {
	border-color: rgba(184, 98, 27, 0.45);
	transform: translateY(-0.25rem);
}

.evptd-card.is-active .evptd-card-btn {
	border-color: var(--wp--preset--color--rust);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--rust), 0 1rem 2.5rem rgba(184, 98, 27, 0.25);
}

.evptd-card-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptd-card-img {
	position: absolute;
	inset: 0;
	display: block;
}

.evptd-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.evptd-card-btn:hover .evptd-card-img img {
	transform: scale(1.04);
}

/* The photograph dissolves into the heading; the gradient ends on the
   card's own colour so there is no seam to see. */
.evptd-card-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29, 25, 20, 0) 35%, rgba(29, 25, 20, 0.92) 100%);
	pointer-events: none;
}

.evptd-card-body {
	position: absolute;
	right: 1rem;
	bottom: 0.875rem;
	left: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.evptd-card-day {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptd-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-wrap: balance;
}

/* ---------- Tour overview ---------- */

.evpto {
	position: relative;
	display: block;
	overflow: hidden;
	/* A jump to the section lands its top below the fixed header and the
	   sticky tab bar, which otherwise cover the eyebrow. The bar's height
	   is .evptt's variable, which this panel sits inside. */
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + var(--ev-tab-bar-h, 3.625rem));
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);
	color: rgba(255, 255, 255, 0.78);
}

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

.evpto-content {
	/*
	 * MATCHED TO .evpco-overview-inner, NUMBER FOR NUMBER.
	 *
	 * Same max-width, same padding, same stacking context. The desktop
	 * grid is in the 1101px block below, which is the breakpoint the
	 * destination switches at too.
	 */
	max-width: 80rem;
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	position: relative;
	z-index: 2;
}

.evpto-left {
	width: 100%;
	min-width: 0;
}

/*
 * .evpto-sidebar is gone. The tour's pictures are the media panel now,
 * which is a sibling of the grid rather than a column in it, exactly as
 * .evpco-ovmedia is on a destination with no featured tours.
 */

.evpto-eyebrow {
	/* .evpco-overview-eyebrow. */
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpto-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpto-title {
	/*
	 * .evpco-overview-title. The old clamp started at 2.8rem and ran to
	 * 4.4rem, which is a good deal larger than a country name is set
	 * at, so a tour title outweighed the destination it belongs to.
	 */
	/* Down to the tiles; the hero carries the tour's subtitle now, so
	   there is no standfirst between. */
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 9vw, 3.8rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}


/* ---------- The tiles ----------

   One tile a fact: a small outline icon and the label on one line, the
   value, one line, below. Two across on a phone, three by two on a
   tablet, all six in one row from 1101px, where the text column is 656
   to 704px and a tile 104 to 112px: the tile is its own container and
   the label steps tighter in it; the value is 18px to 1100px and 13px
   from 1101px, the size at which the longest, "Challenging", fits the
   narrowest tile. Every tile in a row is the same size: the grid's
   equal columns give the width, one value line each gives the height,
   and nothing has a fixed or minimum height. A fact the tour does not
   have is not rendered, so the row is as long as the facts are. */

.evpto-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.evpto-tile {
	display: flex;
	flex-direction: column;
	/* Everything in a tile sits on its centre line: the icon and label
	   row, the value, and the sale state's two price lines. The row and
	   the value cap at the tile's width so a long one still ends in its
	   ellipsis instead of poking out both sides. */
	align-items: center;
	text-align: center;
	gap: 0.375rem;
	min-width: 0;
	/* Its own container, so the label can follow the tile's width: six
	   across in the half width column from 1101px leaves each about
	   104px, where the spaced label does not fit beside its icon. */
	container-type: inline-size;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.02);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.evpto-tile:hover {
	border-color: rgba(212, 196, 168, 0.22);
	background: rgba(212, 196, 168, 0.04);
}

.evpto-tile-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 0;
	max-width: 100%;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
	white-space: nowrap;
}

.evpto-tile-head svg {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpto-tile-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.evpto-tile-value {
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	/* One line, always: the tile's width sets the value's size (the
	   desktop step below), not the other way round, so every tile in a
	   row is one value line tall and the same size. A value that still
	   runs long ends in an ellipsis rather than spilling over the border. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A narrow tile, the six across case (86px inside at 1101px; a phone
   tile has 141px and keeps the full label): the label tighter, so
   "Start / end" with its icon still reads on one line, no ellipsis. */
@container (max-width: 8rem) {
	.evpto-tile-head {
		gap: 0.3rem;
		font-size: 0.52rem;
		letter-spacing: 0.08em;
	}

	.evpto-tile-head svg {
		width: 0.875rem;
		height: 0.875rem;
	}
}

/* The sale state: the new price in the sale gold with the badge beside
   it, the old price struck under them. */
.evpto-tile--sale {
	border-top: 2px solid var(--ev-sale-gold);
	background: linear-gradient(135deg, rgba(232, 184, 75, 0.08) 0%, rgba(232, 184, 75, 0.03) 100%);
}

.evpto-difficulty--easy        { color: var(--ev-diff-easy); }
.evpto-difficulty--moderate    { color: var(--ev-diff-moderate); }
.evpto-difficulty--challenging { color: var(--ev-diff-challenging); }
.evpto-difficulty--extreme     { color: var(--ev-diff-extreme); }

.evpto-sale-price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem 0.5rem;
}

.evpto-sale-price-new {
	font-weight: 600;
	color: var(--ev-sale-gold);
}

.evpto-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: 3.125rem;
	background: var(--ev-sale-gold);
	color: var(--ev-sale-dark);
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.evpto-sale-price-was {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.6em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: line-through;
}

@media (min-width: 769px) {
	.evpto-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* All six in one row from the overview's desktop step, six equal
   columns, every tile the same size. The text column is 656px at
   1101px and 704px from 1440px, so a tile is 104 to 112px: the gap and
   the side padding come in, and the value is 13px, the largest size at
   which the longest value, "Challenging", fits a tile at 1101px on one
   line (17px would want a tile 128px inside). */
@media (min-width: 1101px) {
	.evpto-tiles {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.375rem;
		margin-bottom: 2.25rem;
	}

	.evpto-tile {
		padding: 0.75rem 0.5rem;
	}

	.evpto-tile-value {
		font-size: 0.8125rem;
	}
}

/* ---------- The points ----------

   The short lines first, each behind a rust check circle: the six
   things a reader wants before the prose, from overview_points or, while
   that is empty, the first sentences of the overview itself. */

.evpto-points {
	display: grid;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.evpto-point {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.evpto-point svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1875rem;
	fill: none;
	stroke: var(--wp--preset--color--rust);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- The overview, folded ----------

   The prose opens at its first three lines with a fade, and a button
   under it opens the rest. The whole text is in the DOM from the first
   byte; only the height moves, and only once tour-overview.js has found
   the text to be longer than three lines. Without the script the text
   stands open. */

.evpto-desc {
	/*
	 * .evpco-desc. The 45rem cap is gone: the column is 1fr of an 80rem
	 * grid now, so the grid sets the measure the way it does on a
	 * destination, and a second cap inside it only made the prose
	 * narrower than the stats above it.
	 */
	position: relative;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 1.5rem;
}

/* The capture's 1101 step, kept here so it lands after the base above. */
@media (min-width: 1101px) {
	.evpto-desc {
		font-size: 1.05rem;
	}
}

.evpto-desc p {
	margin: 0 0 0.75em;
}

.evpto-desc p:last-child {
	margin-bottom: 0;
}

.evpto-desc strong {
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
}

.evpto-desc.is-folding {
	overflow: hidden;
	/* The script sets --evpto-fold to three lines, measured, and swaps it
	   for the full height to open. */
	max-height: var(--evpto-fold, none);
}

.evpto-desc.is-folding.is-animated {
	transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The fade over the last line and a half of the folded text, in the
   section's own ground, gone once it is open. */
.evpto-desc.is-folding::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2.7em;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0) 0%, var(--wp--preset--color--bg-deep) 100%);
	opacity: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.evpto-desc.is-folding.is-open::after {
	opacity: 0;
}

.evpto-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: -0.5rem 0 1.75rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.evpto-more[hidden] {
	display: none;
}

.evpto-more svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpto-more[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.evpto-more:hover {
	color: #fff;
}

.evpto-more:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.evpto-desc.is-folding.is-animated,
	.evpto-desc.is-folding::after,
	.evpto-more svg,
	.evpto-tile {
		transition: none;
	}
}

.evpto-cta-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: flex-start;
}

.evpto-cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 0.5rem 1.625rem rgba(184, 98, 27, 0.42);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/*
 * The secondary buttons, which are the other tabs. Same shape as the
 * primary so the row reads as one set, hollow so Request Info is still
 * the one being asked for. Follows .evplo-btn--outline, which is the
 * house's existing outline treatment.
 */
.evpto-cta-btn--outline {
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.evpto-cta-btn--outline:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	box-shadow: none;
}

/* The primary's gradient wash has no business on a hollow button. */
.evpto-cta-btn--outline::before {
	display: none;
}

.evpto-cta-btn > * {
	position: relative;
	z-index: 1;
}

.evpto-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-light) 0%, var(--wp--preset--color--rust) 70%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.evpto-cta-btn:hover::before {
	opacity: 1;
}

.evpto-cta-btn:hover {
	transform: translateY(-0.125rem);
	box-shadow: 0 0.875rem 2rem rgba(184, 98, 27, 0.52);
}

.evpto-cta-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evpto-cta-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ---------- Enquiry modal ---------- */

.evpto-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(8, 8, 8, 0.78);
	-webkit-backdrop-filter: blur(0.25rem);
	backdrop-filter: blur(0.25rem);
	overflow-y: auto;
}

.evpto-modal {
	position: relative;
	width: 100%;
	max-width: 33.75rem;
	max-height: calc(100vh - 2.5rem);
	padding: 2.5rem 2.25rem 2.25rem;
	border-radius: 1.25rem;
	background: #fdfcfa;
	color: #1a1a1a;
	box-shadow: 0 1.75rem 5rem rgba(0, 0, 0, 0.5);
	overflow-y: auto;
}

.evpto-modal-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(26, 26, 26, 0.06);
	color: #1a1a1a;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpto-modal-close:hover {
	background: rgba(26, 26, 26, 0.14);
}

.evpto-modal-close svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

.evpto-modal-header {
	margin-bottom: 1.5rem;
	padding-right: 2.25rem;
}

.evpto-modal-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	color: #1a1a1a;
}

.evpto-modal-subtitle {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(44, 62, 80, 0.75);
}

.evpto-form-group {
	margin-bottom: 1rem;
}

.evpto-form-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.7);
}

.evpto-form-required {
	color: var(--wp--preset--color--rust);
}

.evpto-form-input,
.evpto-form-textarea {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(26, 26, 26, 0.18);
	border-radius: 0.625rem;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.evpto-form-textarea {
	resize: vertical;
	line-height: 1.6;
}

.evpto-form-input:focus,
.evpto-form-textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 0.1875rem rgba(184, 98, 27, 0.16);
}

.evpto-form-error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(179, 51, 31, 0.3);
	border-radius: 0.625rem;
	background: rgba(179, 51, 31, 0.08);
	color: #8c2718;
	font-size: 0.85rem;
	line-height: 1.5;
}

.evpto-form-buttons {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.evpto-modal-btn {
	flex: 1;
	padding: 0.875rem 1.25rem;
	border: none;
	border-radius: 3.125rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.evpto-modal-btn-primary {
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpto-modal-btn-primary:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpto-modal-btn-primary:disabled {
	opacity: 0.55;
	cursor: default;
}

.evpto-modal-btn-secondary {
	border: 1px solid rgba(26, 26, 26, 0.2);
	background: transparent;
	color: rgba(26, 26, 26, 0.75);
}

.evpto-modal-btn-secondary:hover {
	background: rgba(26, 26, 26, 0.05);
}

.evpto-modal-btn:focus-visible,
.evpto-modal-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

.evpto-form-done {
	padding: 1.25rem 0.625rem 0.625rem;
	text-align: center;
}

.evpto-form-done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	color: #fff;
	font-size: 1.5rem;
}

.evpto-form-done-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #1a1a1a;
}

.evpto-form-done-text {
	margin: 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(44, 62, 80, 0.8);
}

/* ---------- Tour page: below 900, hero stacks ---------- */

@media (max-width: 900px) {
	.evpth {
		display: block;
		min-height: 100vh;
		min-height: 100svh;
	}

	/* The slideshow becomes the background of the whole section. */
	.evpth-media {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	/* The scrim. The copy sits in the bottom three fifths, so from 40
	   per cent down the overlay is at least 0.82, which puts white text
	   past 4.5 to 1 over the brightest photograph (the salt flat on the
	   Uyuni route, measured); the top keeps the picture. */
	.evpth-media::before {
		background: linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.12) 0%,
			rgba(10, 10, 10, 0.3) 26%,
			rgba(10, 10, 10, 0.82) 40%,
			rgba(10, 10, 10, 0.9) 62%,
			rgba(10, 10, 10, 0.96) 100%
		);
	}

	.evpth-media::after {
		display: none;
	}

	.evpth-dots {
		display: none;
	}

	.evpth-content {
		display: flex;
		min-height: 100vh;
		min-height: 100svh;
		padding: 5rem 1.5rem calc(2.875rem + env(safe-area-inset-bottom, 0px));
		justify-content: flex-start;
		align-items: center;
		text-align: center;
		background: transparent;
	}

	.evpth-content::before {
		display: none;
	}

	.evpth-breadcrumbs {
		justify-content: center;
	}

	/* The one auto margin: everything from the eyebrow down sits in the
	   bottom of the screen, over the scrim, with the button at the foot. */
	.evpth-eyebrow {
		justify-content: center;
		margin-top: auto;
		margin-bottom: 0.75rem;
		font-size: 0.6875rem;
		color: var(--wp--preset--color--gold);
	}

	.evpth-eyebrow::before {
		width: 1.625rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
	}

	.evpth-eyebrow::after {
		content: '';
		display: block;
		flex-shrink: 0;
		width: 1.625rem;
		height: 0.09375rem;
		background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	}

	.evpth-sale {
		margin-right: auto;
		margin-left: auto;
	}

	/* Three lines at most, 36px at most: --evpth-fit-m is this title's
	   largest three line size as a fraction of the column, which is the
	   viewport less the padding (48px here, 32px from the 480 step). */
	.evpth-title {
		margin-bottom: 0.875rem;
		font-size: clamp(1.5rem, calc((100vw - 48px) * var(--evpth-fit-m, 0.1)), 2.25rem);
		line-height: 1.06;
		text-shadow: 0 0.125rem 1.75rem rgba(0, 0, 0, 0.6);
	}

	.evpth-rule {
		width: 2.375rem;
		margin: 0.125rem auto 0;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	/* The hook, centred, 16px, whole. */
	.evpth-subtitle {
		max-width: 25rem;
		margin: 0.75rem auto 0;
		font-size: 1rem;
		text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.6);
	}

	/* The button, the links and the departures, a fixed step under the
	   hook; the eyebrow's auto margin above is what puts the whole block
	   at the foot of the screen. */
	.evpth-cta {
		width: 100%;
		max-width: 25rem;
		margin-top: 1.5rem;
		justify-content: center;
		gap: 0.75rem 1.25rem;
	}

	.evpth-btn-primary {
		width: 100%;
		min-height: 3.25rem;
		padding: 0.9375rem 1.5rem;
		font-size: 0.72rem;
		letter-spacing: 0.16em;
	}

	.evpth-departures {
		max-width: 25rem;
		margin-top: 1rem;
		text-align: center;
	}

	.evpth-departures-list {
		justify-content: center;
	}

	/* The photograph is the whole background here and the copy sits
	   over it, so a caption would land under the buttons. */
	.evpth-caption {
		display: none;
	}
}

/* ---------- Tour page: below 768 ---------- */

@media (max-width: 768px) {
	.evptd {
		padding: 3.5rem 0 3rem;
	}

	/* .evptd-header's phone spacing is not here. It has to be declared
	   after the shared header rule further down the file, or that rule
	   wins on source order and this does nothing. */

	/* Taller than wide: the card takes the bottom and the controls and
	   the key the top, and the route needs the square between them. */
	.evptd-map {
		height: clamp(26rem, 124vw, 34rem);
		border-radius: 0.875rem;
	}

	.evptd-controls {
		top: 0.75rem;
		right: 0.75rem;
		gap: 0.375rem;
	}

	.evptd-ctrl {
		height: 2.375rem;
		padding: 0 0.875rem;
	}

	.evptd-ctrl--zoom {
		width: 2.375rem;
		padding: 0;
	}

	/* Under the controls on a phone too; the key and the controls together
	   are wider than the frame side by side. The fit keeps the route
	   below both: tour-highlights.js measures the band they take. */
	.evptd-legend {
		top: calc(0.75rem + 2.375rem + 0.5rem);
		right: 0.75rem;
		gap: 0.75rem;
		padding: 0.4rem 0.6rem;
		font-size: 0.56rem;
	}

	/* No room for the summary beside the card and the attribution; the
	   header and the strip carry the same facts. */
	.evptd-chip {
		display: none;
	}

	/*
	 * ON A PHONE THE CARD RUNS ALONG THE BOTTOM OF THE MAP, photo on
	 * the left, words on the right, so the map above it keeps a square
	 * of imagery to look at. tour-highlights.js reads its height and
	 * aims the fly at the map above it.
	 */
	.evptd-mapcard {
		top: auto;
		right: 0.75rem;
		/* Clear of the attribution line, which Esri asks to be visible. */
		bottom: 1.6rem;
		left: 0.75rem;
		display: flex;
		width: auto;
		max-height: none;
	}

	.evptd-mapcard-media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}

	.evptd-mapcard-body {
		flex: 1;
		min-width: 0;
		padding: 0.75rem 0.875rem;
	}

	.evptd-mapcard-title {
		font-size: 1rem;
	}

	.evptd-mapcard-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 0.72rem;
	}

	/* The strip swipes. One card fills most of the width so the one
	   that settles in the middle is unmistakably the selected one. */
	.evptd-card {
		flex: 0 0 72vw;
	}

	.evptd-card-btn {
		height: 11rem;
	}

	.evpto-content {
		padding: 3.5rem 1.25rem;
	}

	/*
	 * THE OVERVIEW ON A PHONE: the tiles two a row at the same compact
	 * size as everywhere (the base rules). The heading keeps the one
	 * tour title scale, set with the booking section's title rules. The
	 * section's scroll margin, set with the base rules, keeps its top
	 * below the sticky tab bar when the page lands on it.
	 */
	.evpto-tiles {
		gap: 0.5rem;
		margin-bottom: 1.5rem;
	}

	.evpto-cta-wrap {
		justify-content: stretch;
	}

	.evpto-cta-btn {
		width: 100%;
	}

	.evpto-modal {
		padding: 2rem 1.25rem 1.5rem;
	}

	.evpto-form-buttons {
		flex-direction: column-reverse;
	}
}

/* ---------- Tour page: below 480 ---------- */

@media (max-width: 480px) {
	.evpth-content {
		padding: 4.75rem 1rem calc(2.625rem + env(safe-area-inset-bottom, 0px));
	}

	/* 1rem of padding a side here, so the column is the viewport less
	   32px: 358px at 390, where every live title holds three lines at
	   36px. */
	.evpth-title {
		font-size: clamp(1.5rem, calc((100vw - 32px) * var(--evpth-fit-m, 0.1)), 2.25rem);
	}

	.evptd-card {
		flex: 0 0 88vw;
		min-width: 88vw;
		max-width: 88vw;
	}
}

/* ---------- Tour page: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.evpth-slide,
	.evpth-dot,
	.evpth-progress-bar,
	.evptd-card,
	.evptd-card-btn,
	.evptd-card-img img,
	.evptd-pin .evptd-pin-dot,
	.evptd-pin .evptd-pin-glow,
	.evptd-pin .evptd-pin-tip,
	.evptd-mapcard,
	.evptd-ctrl,
	.evpto-cta-btn {
		transition: none;
	}

	.evpth-btn:hover,
	.evpto-cta-btn:hover,
	.evptd-card-btn:hover {
		transform: none;
	}
}

/* ==================================================================
   

/* ---------- Inclusions ---------- */

.evptc {
	/* Top padding matches the itinerary panel, the other tab panel that
	   carries a full header. It was absent along with the header rules
	   themselves, so the eyebrow sat flush against the tab strip. */
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: 4.5rem;
}

.evptc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
	align-items: start;
}

.evptc-card {
	padding: 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(30, 25, 20, 0.72);
}

.evptc-card-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
}

.evptc-card-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.evptc-card-icon svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evptc-card--yes .evptc-card-icon {
	background: rgba(107, 143, 80, 0.18);
	color: var(--ev-diff-easy);
}

.evptc-card--no .evptc-card-icon {
	background: rgba(179, 51, 31, 0.16);
	color: var(--ev-diff-extreme);
}

.evptc-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: #fff;
}

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

.evptc-list-item {
	position: relative;
	padding: 0 0 0.75rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.74);
}

.evptc-list-item::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
}

.evptc-card--yes .evptc-list-item::before {
	background: var(--ev-diff-easy);
}

.evptc-card--no .evptc-list-item::before {
	background: rgba(255, 255, 255, 0.25);
}

.evptc-list-item:last-child {
	padding-bottom: 0;
}

.evptc-empty {
	margin: 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.4);
}

/* ---------- Pricing ---------- */

.evptp {
	padding-bottom: 5rem;
	/* A jump here (the hero's Pricing link) lands under the fixed header;
	   by then the tab bar has docked into it, so the header alone. */
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + 0.5rem);
}

.evptp-body {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/*
   THE ESTIMATOR AND, BESIDE IT, THE TWO SHORT CARDS. 55 to 45: the
   estimator carries the chips, the figure, the timeline and the button,
   and is the thing somebody came here for; what is included and the
   departures are the two questions that follow it. One column from 900
   down, in that order.
*/
.evptp-grid {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	margin-bottom: 2.5rem;
}

.evptp-aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

/* ---------- The estimator card ---------- */

.evptp-est {
	padding: 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1.25rem;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 100%);
}

.evptp-est.is-sale {
	border-top: 2px solid var(--ev-sale-gold);
}

/* One label everywhere in the section: 11px small caps in sand, over the
   chips, over the figure and at the head of each card beside it. */
.evptp-chips-label,
.evptp-figure-label,
.evptp-card-title {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptp-tiers,
.evptp-group,
.evptp-seasons {
	margin-bottom: 1.25rem;
}

.evptp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
   A chip is a real button (or, for a tier, a real link to its ?tier=
   address, the same one the hero uses). The selected one is filled
   rust; the rest are outlined and lift on hover.
*/
.evptp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evptp-chip:hover {
	border-color: rgba(212, 196, 168, 0.5);
	color: #fff;
}

.evptp-chip.is-selected {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evptp-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptp-chip--tier {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The figure. */
.evptp-figure {
	padding-top: 0.25rem;
}

.evptp-amount {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.5rem, 4.5vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.evptp-symbol {
	margin-right: 0.125rem;
	font-size: 0.5em;
	vertical-align: 0.55em;
}

/* "On request" stands in for the figure, at a size that reads as an
   answer rather than a price. */
.evptp-amount-request {
	display: none;
	font-size: 0.6em;
	color: rgba(255, 255, 255, 0.75);
}

.evptp-est.is-request .evptp-amount-price {
	display: none;
}

.evptp-est.is-request .evptp-amount-request {
	display: inline;
}

.evptp-est.is-sale .evptp-amount-price {
	color: var(--ev-sale-gold);
}

/* The struck price and the chip, on a sale only. */
.evptp-was {
	display: none;
	align-items: center;
	gap: 0.625rem;
	margin: 0.625rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
}

.evptp-est.is-sale:not(.is-request) .evptp-was {
	display: flex;
}

.evptp-off {
	padding: 0.125rem 0.5rem;
	border-radius: 3.125rem;
	background: var(--ev-sale-gold);
	color: var(--ev-sale-dark);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* "$15,600 for 4 travelers · USD · Per person" */
.evptp-total {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

.evptp-est.is-request .evptp-total {
	display: none;
}

.evptp-total-sep {
	opacity: 0.5;
}

/* ---------- The payment timeline ---------- */

/*
   Three steps on one rule: a dot at the start of each, the moment in
   small caps, the figure in the display face, what it is under it.
   Per traveller, from the price shown, and absent while there is none.
*/
.evptp-tl {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.evptp-tl-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(212, 196, 168, 0.2);
}

.evptp-tl-step::before {
	content: '';
	position: absolute;
	top: -0.3125rem;
	left: 0;
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

.evptp-tl-step:nth-child(2)::before {
	background: rgba(212, 196, 168, 0.55);
}

.evptp-tl-step:nth-child(3)::before {
	background: rgba(212, 196, 168, 0.3);
}

.evptp-tl-when {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.evptp-tl-amount {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.375rem;
	line-height: 1;
	color: var(--wp--preset--color--gold-light);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.evptp-tl-amount--text {
	color: #fff;
}

.evptp-tl-what {
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

.evptp-tl-note {
	margin: 0.875rem 0 0;
	font-size: 0.72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

.evptp-est.is-request .evptp-tl,
.evptp-est.is-request .evptp-tl-note {
	display: none;
}

/* The button and the terms line. */
.evptp-act {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
}

.evptp-terms {
	margin: 0.875rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.evptp-terms a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease;
}

.evptp-terms a:hover,
.evptp-terms a:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

.evptp-cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	padding: 1rem 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 0.5rem 1.625rem rgba(184, 98, 27, 0.42);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.evptp-cta-btn > * {
	position: relative;
	z-index: 1;
}

.evptp-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-light) 0%, var(--wp--preset--color--rust) 70%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.evptp-cta-btn:hover::before {
	opacity: 1;
}

.evptp-cta-btn:hover {
	transform: translateY(-0.125rem);
	box-shadow: 0 0.875rem 2rem rgba(184, 98, 27, 0.52);
}

.evptp-cta-btn svg {
	width: 0.9375rem;
	height: 0.9375rem;
	fill: currentColor;
}

.evptp-cta-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ---------- The two cards beside it ---------- */

/* 16px of padding and 1.45 line height: the pair beside the estimator
   may not stand taller than it, and these are the first two things that
   give. If they are not enough, tour-pricing.js puts is-tight on the
   stack and the included list drops to three. */
.evptp-card {
	padding: 1rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
	line-height: 1.45;
}

.evptp-card-title {
	margin-bottom: 0.75rem;
}

.evptp-incl {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 14px, each item held to two lines by the clamp, never cut by hand. */
.evptp-incl-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.evptp-incl-item > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-width: 0;
	overflow: hidden;
}

.evptp-aside.is-tight .evptp-incl-item:nth-child(n+4) {
	display: none;
}

.evptp-incl-item svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.0625rem;
	fill: none;
	stroke: var(--wp--preset--color--rust);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evptp-excl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.45);
	overflow: hidden;
}

.evptp-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.875rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gold);
	transition: color 0.2s ease;
}

.evptp-more svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.evptp-more:hover,
.evptp-more:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

.evptp-more:hover svg {
	transform: translateX(0.1875rem);
}

/* The departure rows reuse .evptp-dep (further down this file); in the
   card they are tighter, so three dates and the private row stand no
   taller than the estimator beside them. */
.evptp-card--departures .evptp-deps {
	gap: 0.5rem;
}

.evptp-card--departures .evptp-dep {
	padding: 0.625rem 0.875rem;
}

/* "Your dates · best May – Oct", one line, the Enquire button at the
   right of it. */
.evptp-dep-dates--private {
	min-width: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evptp-dep-dates--private .evptp-total-sep {
	margin: 0 0.125rem;
}

.evptp-dep-btn--quiet {
	border: 1px solid rgba(212, 196, 168, 0.3);
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
}

.evptp-dep-btn--quiet:hover {
	border-color: rgba(212, 196, 168, 0.6);
	background: rgba(212, 196, 168, 0.08);
}

/* ---------- Every rate, as a strip ---------- */

.evptp-rates {
	margin-bottom: 2rem;
}

.evptp-rates-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
}

/* Which tier's rates the strip is showing, said plainly beside the
   heading rather than left to be inferred from the chips above. */
.evptp-rates-tier {
	display: inline-block;
	margin-left: 0.625rem;
	padding: 0.2rem 0.625rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	vertical-align: 0.3em;
}

.evptp-strip {
	margin-bottom: 1.25rem;
}

.evptp-strip-label {
	margin: 0 0 0.625rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptp-strip-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One small card a rate: the size, the figure, the note under it. The
   chosen size is outlined in rust, in the chosen season's strip. */
.evptp-rc {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.875rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.evptp-rc.is-selected {
	border-color: var(--wp--preset--color--rust);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rust);
}

.evptp-rc-size {
	font-size: 0.78rem;
	font-weight: 600;
	color: #fff;
}

.evptp-rc-price {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--wp--preset--color--gold-light);
	font-variant-numeric: tabular-nums;
}

.evptp-rc-was {
	margin-left: 0.25rem;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.4);
}

.evptp-rc-request,
.evptp-rc-none {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

.evptp-rc-none {
	color: rgba(255, 255, 255, 0.3);
}

.evptp-rc-note {
	font-size: 0.72rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
}

/* The comparison, on a tiered tour, under the strips. */
.evptp-compare {
	margin-top: 2.5rem;
}

/*
 * THE TWIN OFFER, under the rates.
 *
 * Sized and coloured between the body copy and .evptp-footnote below, so it
 * reads as a real offer rather than as small print.
 */
.evptp-twin {
	max-width: 34rem;
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.evptp-twin-lead {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 500;
	color: #fff;
}

.evptp-twin-link {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease;
}

.evptp-twin-link:hover,
.evptp-twin-link:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

/* ---------- The foot: one line, then the numbered notes ---------- */

.evptp-foot {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

.evptp-footnotes {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.evptp-footnote {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.8rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
}

.evptp-footnote-marker {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: rgba(212, 196, 168, 0.16);
	color: var(--wp--preset--color--gold);
	font-size: 0.62rem;
	font-weight: 700;
}

/* One column from 900 down: estimator, included, departures, strips. */
@media (max-width: 900px) {
	.evptp-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.evptp-est {
		padding: 1.375rem 1.25rem;
	}

	.evptp-tl {
		gap: 0 0.5rem;
	}

	.evptp-tl-amount {
		font-size: 1.2rem;
	}

	.evptp-cta-btn {
		width: 100%;
	}

	.evptp-card {
		padding: 1.25rem;
	}

	/* The rows have no price now, so the date and the button stay side
	   by side where the old price row stacked. */
	.evptp-card--departures .evptp-dep {
		flex-direction: row;
		align-items: center;
	}

	/* Beside the button there is no room for the months on one line, so
	   the private row wraps here rather than losing them to an ellipsis. */
	.evptp-dep-dates--private {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.evptp-strip-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* ---------- Pass 2: below 1024, the map column goes ---------- */

/* ---------- Pass 2: below 768 ---------- */

@media (max-width: 768px) {

	.evptc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.evptp-cta-btn {
		justify-content: center;
	}
}

/* ---------- Pass 2: below 480 ---------- */

/* ---------- Pass 2: reduced motion ---------- */


/* ==================================================================
   TOUR TABS + ITINERARY
   The tab container, and the itinerary rebuilt from
   salvage/tour-page/RECOVERED-tour_itinerary_map-v3.3.3.php.
   Stripped from the original: 100vw full bleed, every !important, the
   uniqid prefix and the per-component token block.
   ================================================================== */

/* ---------- Tab container ---------- */

.evptt {
	position: relative;
	display: block;

	/*
	 * The header is fixed, so a fragment landing on this section would
	 * put its top edge underneath it. The tab bar sticks at
	 * --ev-header-h, so clearing the same distance drops the bar exactly
	 * under the header with the panel below it. Same pattern as .evpti
	 * and .evptg further down, which clear the header and the bar
	 * together because they sit inside a panel rather than above one.
	 */
	scroll-margin-top: var(--ev-header-h, 5rem);
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);

	/*
	 * THE STICKY STACK IS TWO NUMBERS, AND EVERYTHING ELSE IS DERIVED.
	 * The site header is fixed at the viewport top, so the tab bar has
	 * to stick below it rather than at 0, and anything sticky inside a
	 * panel has to clear both. The recovered capture kept the header
	 * and bar heights as variables and computed every other offset from
	 * them. The rebuild had lifted two of those computed numbers out as
	 * literals and dropped the variables, which is why the bar stuck at
	 * 0 behind the header and the itinerary map stuck 11px under it.
	 *
	 * Each header value is one pixel under the measured header height,
	 * which is deliberate: the header then covers the bar's hairline
	 * top border instead of leaving a seam above it. The header
	 * measures 81 / 71 / 65 at desktop / 768 / 480 and this ladder
	 * steps with it.
	 */
	--ev-header-h: 5rem;
	--ev-tab-bar-h: 3rem;

	/*
	 * The two offsets the itinerary reads for its sticky map column and
	 * its mobile day nav. Both clear the header and the bar together
	 * while the bar sits below the header. The itinerary keeps the
	 * recovered file's own fallbacks, so it still works when used
	 * outside these tabs.
	 */
	--ev-itin-desktop-map-top: calc(var(--ev-header-h) + var(--ev-tab-bar-h));
	--ev-itin-mobile-day-nav-top: calc(var(--ev-header-h) + var(--ev-tab-bar-h));
}

/*
 * DOCKED, THE BAR IS INSIDE THE HEADER, so the map and the day nav clear
 * the header alone; the sum would leave a band the bar's height above
 * the map. tour-tabs.js sets the class at the same moment it switches
 * the pill sets, so the map moves up as the bar goes under.
 */
html.ev-tabs-docked .evptt {
	--ev-itin-desktop-map-top: var(--ev-header-h);
	--ev-itin-mobile-day-nav-top: var(--ev-header-h);
}

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

.evptt-bar {
	position: sticky;
	top: var(--ev-header-h);
	z-index: 300;
	display: flex;
	align-items: center;
	height: var(--ev-tab-bar-h);
	border-top: 1px solid rgba(212, 196, 168, 0.06);
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
	background: linear-gradient(180deg, #161412 0%, #1c1a17 100%);
	box-shadow: 0 0.375rem 1.375rem rgba(0, 0, 0, 0.35);
}

.evptt-bar-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.evptt-bar-inner::-webkit-scrollbar {
	display: none;
}

/* The tablist itself, centred in the bar: a row of labels the bar's
   full height, and the underline positioned against it. */
.evptt-tabs {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	height: 100%;
}

/*
   A FLAT LABEL, NOT A PILL. 12px uppercase at 0.1em, sand, white when
   selected and on hover, no border, no background, the bar's full height
   so the underline sits on the bar's bottom edge. The mirror in the
   header reuses this wholesale.
*/
.evptt-tab {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: var(--ev-tab-bar-h, 3rem);
	padding: 0 0.875rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
}

/* "Itinerary · 12 days": the count muted after the dot. */
.evptt-tab-count {
	margin-left: 0.5em;
	font-weight: 500;
	letter-spacing: 0.06em;
	opacity: 0.6;
}

.evptt-tab-dot {
	margin-right: 0.5em;
	opacity: 0.6;
}

.evptt-tab:hover,
.evptt-tab.is-selected,
.evptt-tab[aria-selected="true"] {
	color: #fff;
}

.evptt-tab.is-selected .evptt-tab-count,
.evptt-tab[aria-selected="true"] .evptt-tab-count {
	opacity: 0.7;
}

/* The underline: 2px rust at the bottom of the row. The script sets its
   width and slides it with a transform; 200ms, none under reduced
   motion. Until the script has placed it (is-ready on the row), the
   selected label draws the same line itself. */
.evptt-ink {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--rust);
	transform: translateX(0);
	transition: transform 0.2s ease, width 0.2s ease;
	pointer-events: none;
}

.evptt-tab.is-selected::after,
.evptt-tab[aria-selected="true"]::after {
	content: '';
	position: absolute;
	right: 0.875rem;
	bottom: 0;
	left: 0.875rem;
	height: 2px;
	background: var(--wp--preset--color--rust);
}

.is-ready .evptt-tab::after {
	content: none;
}

.evptt-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

.evptt-panel:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/*
 * WHERE THE STRIP SCROLLS, A FADE SAYS SO ON THE SIDE THAT HAS MORE.
 * tour-tabs.js puts is-fade-left and is-fade-right on the bar from the
 * scroll box's position, so the left fade appears only once something
 * has gone past the left edge and the right one goes as the end
 * arrives. The same two classes drive the docked strip in the header.
 */
.evptt-bar.is-fade-right {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
}

.evptt-bar.is-fade-left {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
}

.evptt-bar.is-fade-left.is-fade-right {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}

/*
 * Centring and overflow together clip the left edge the moment the
 * pills stop fitting, so below this width the strip scrolls from the
 * start and snaps instead.
 *
 * 900 is not on the site's 1200/1024/768/480 ladder and is left where
 * the capture put it: it is the width at which the pills stop fitting
 * in the bar, not a layout step.
 */
@media (max-width: 900px) {
	.evptt-bar-inner {
		justify-content: flex-start;
		scroll-snap-type: x proximity;
	}

	.evptt-tab {
		scroll-snap-align: center;
	}
}

@media (max-width: 768px) {
	.evptt {
		--ev-header-h: 4.375rem;
		--ev-tab-bar-h: 3rem;
	}

	.evptt-bar-inner {
		padding: 0 1rem;
	}
}

@media (max-width: 480px) {
	.evptt {
		--ev-header-h: 4rem;
		--ev-tab-bar-h: 3rem;
	}

	.evptt-bar-inner {
		padding: 0 0.75rem;
	}

	.evptt-tab {
		padding: 0 0.75rem;
	}

	.evptt-tab.is-selected::after,
	.evptt-tab[aria-selected="true"]::after {
		right: 0.75rem;
		left: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evptt-tab,
	.evptt-ink {
		transition: none;
	}

	.evptt-bar-inner {
		scroll-behavior: auto;
	}
}

/* ---------- Itinerary ---------- */

/*
 * WHERE A JUMP FROM THE OVERVIEW LANDS.
 *
 * The overview's tab buttons scroll to these two sections, and both sit
 * under a fixed header with a sticky tab bar beneath it. The offset is
 * the one .evptt already computes for its own sticky children rather
 * than a third copy of the same two numbers, and it inherits down from
 * the tabs section these panels live in.
 *
 * The fallback matters: the itinerary and the gallery keep their own
 * defaults so they still land correctly if either is ever rendered
 * outside the tabs.
 */
.evpti,
.evptg {
	scroll-margin-top: var(--ev-itin-desktop-map-top, 8.375rem);
}

.evpti {
	position: relative;
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);
	color: rgba(255, 255, 255, 0.78);

	/*
	 * The tab needs to end somewhere.
	 *
	 * Every other tab pads itself and this one did not: the overview
	 * carries 5rem on .evpto-content, while here the map column is a
	 * full viewport tall and the day column is a bare flex child, so
	 * the section stopped at whichever ran longer and Tour Pricing
	 * started against it. On the map tab that put the Leaflet
	 * attribution bar hard against the pricing heading.
	 *
	 * On the section rather than on either column, so it sits outside
	 * .evpti-layout. The sticky map stops at the layout's bottom edge
	 * and the gap below it is the section's own background.
	 */
	padding-bottom: 5rem;
}

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

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

.evpti-header-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) 2.5rem;
}

.evpti-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpti-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpti-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
}

.evpti-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

/* Desktop 55/45 split. The map is sticky beside a scrolling panel. */
.evpti-layout {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	background: var(--wp--preset--color--bg-deep);
}

.evpti-map-section {
	position: sticky;
	top: var(--ev-itin-desktop-map-top, 4.375rem);
	z-index: 100;
	align-self: flex-start;
	width: 55%;
	height: calc(100vh - var(--ev-itin-desktop-map-top, 4.375rem));
	background: #0d0d0d;
	overflow: hidden;
}

.evpti-panel {
	display: flex;
	flex-direction: column;
	width: 45%;
	border-left: 1px solid rgba(212, 196, 168, 0.1);
	background: var(--wp--preset--color--bg-deep);
}

.evpti-layout--nomap .evpti-panel {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	border-left: none;
}

.evpti-map-leaflet {
	width: 100%;
	height: 100%;
}

.evpti-map-controls {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 1001;
}

.evpti-reset {
	padding: 0.625rem 1.125rem;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 3.125rem;
	background: rgba(17, 16, 16, 0.88);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* The key under Reset View: how each leg of the route is travelled, the
   same panel and the same entries as the highlights map's, built by the
   same helper, so the two maps read alike. Hidden until the route is
   drawn. See .ev-leg-key with the highlights map's key. */
.evpti-legend {
	position: absolute;
	top: calc(1.25rem + 2.125rem + 0.5rem);
	right: 1.25rem;
	z-index: 1001;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem 1rem;
	max-width: calc(100% - 2.5rem);
	margin: 0;
	padding: 0.5rem 0.75rem;
	list-style: none;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.75rem;
	background: rgba(17, 16, 16, 0.84);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	pointer-events: none;
}

.evpti-legend[hidden] {
	display: none;
}

.evpti-reset:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpti-reset:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- The active day's card, over the map ----------
   Bottom left, because Reset View is top right. The width here is not
   only a look: tour-itinerary.js measures this element and pads the
   map's fit by it, which is what keeps the route and the lit marker
   out from under it. */
/*
 * THE CARD GROWS WITH THE COLUMN, AND THE MAP KEEPS OUT OF ITS WAY BY
 * ITSELF. viewPadding() in tour-itinerary.js measures this card's real
 * width at the moment it pads fitBounds and panInside, deliberately,
 * "so the number cannot drift from the CSS". So widening it here also
 * widens the strip of map the route is kept out of, with nothing to
 * keep in step by hand.
 *
 * The floor is the width this card has always been, so no screen gets a
 * smaller card than before; the ceiling stops it eating a map column
 * that is only 55% of the viewport to begin with. Below 768px the whole
 * map section is replaced by the minimap and this card does not exist,
 * which is why a vw term is safe here.
 */
.evpti-mapcard {
	position: absolute;
	bottom: 1.125rem;
	left: 1.125rem;
	z-index: 1001;
	width: clamp(17.5rem, 22vw, 21rem);
	max-width: calc(100% - 2.25rem);
	margin: 0;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1rem;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.97), rgba(28, 22, 16, 0.97));
	box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.6);
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.evpti-mapcard.is-hidden {
	opacity: 0;
	transform: translateY(0.5rem);
}

/*
 * A ratio rather than a fixed height, so the photograph grows with the
 * card instead of staying 8.25rem tall inside a wider frame and getting
 * letterboxed by object-fit. 16:10 is the most generous shape that still
 * leaves the day and the place name the larger half of the card at the
 * narrow end.
 */
.evpti-mapcard-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #000;
}

.evpti-mapcard.has-no-image .evpti-mapcard-media {
	display: none;
}

.evpti-mapcard-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpti-mapcard-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
}

.evpti-mapcard-body {
	display: block;
	padding: 0.875rem 1.125rem 1rem;
}

.evpti-mapcard-day {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

/* Tracks the card, so a wider frame does not leave the place name
   looking stranded under a bigger photograph. */
.evpti-mapcard-name {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.1rem, 1.35vw, 1.28rem);
	line-height: 1.3;
	color: #fff;
}

/* The minimap belongs to mobile; desktop has the real map. */
.evpti-minimap-wrap {
	display: none;
}

/* Day cards. */
.evpti-day-item {
	position: relative;
	display: block;
	width: 100%;
	border-bottom: 1px solid rgba(212, 196, 168, 0.08);
	background: var(--wp--preset--color--bg-deep);
	cursor: pointer;
	transition: background 0.35s ease, box-shadow 0.35s ease;
}

.evpti-day-item::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0.1875rem;
	background: linear-gradient(180deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/*
 * Hover and active used to light this bar identically, so passing the
 * pointer down the column looked exactly like selecting a day and the
 * one real signal was diluted fifteen times over. Hover is now a hint
 * and active is the statement, which is the same split the day number
 * beside it makes.
 */
.evpti-day-item:hover::before {
	opacity: 0.45;
}

.evpti-day-item.is-active::before {
	opacity: 1;
}

.evpti-day-item:hover {
	background: rgba(255, 255, 255, 0.03);
}

.evpti-day-item.is-active {
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 1.875rem rgba(212, 196, 168, 0.04);
}

.evpti-day-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

.evpti-day-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1.75rem 0;
}

/*
 * THIS NUMBER AND THE MAP PIN ARE THE SAME NUMBER, so they are now the
 * same object. Both say "day 8" about the same day, a foot apart on the
 * same screen, and they were drawn in two different design eras: the pin
 * has the map card's warm dark ground with a gold hairline and lights
 * rust when it is the day you are reading, while this was a flat rust to
 * gold disc. Giving them one material means the header number and the
 * pin light up together, which is the relationship the whole section is
 * built on and was the one thing neither of them showed.
 *
 * TWO REAL DEFECTS WENT WITH THE OLD TREATMENT.
 *
 * The gradient ran rust to gold, and gold here is #D4C4A8, a pale sand.
 * White 1rem bold type on the middle of that sweep measures 2.71:1, well
 * under the 4.5:1 it needs at this size. The number is now gold on a
 * dark ground at rest, about 11:1, and white on rust-dark to rust when
 * active, 5.04:1 under the numeral.
 *
 * And every one of the fifteen discs carried a rust glow, so every day
 * looked like the active one and the glow said nothing. The rust halo is
 * now spent on the single active day, which is the same ring this file
 * already uses to mean exactly that.
 */
.evpti-day-number {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	border: 0.09375rem solid rgba(212, 196, 168, 0.38);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.95), rgba(34, 27, 20, 0.95));
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
	transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.evpti-day-number::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -0.09375rem;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--wp--preset--color--rust-dark), var(--wp--preset--color--rust));
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Before is-active and at the same specificity, so the day you are
   reading still wins while the pointer is over one of the others. */
.evpti-day-item:hover .evpti-day-number {
	border-color: rgba(212, 196, 168, 0.7);
	color: #fff;
}

.evpti-day-item:hover .evpti-day-number::before {
	opacity: 0.4;
}

.evpti-day-item.is-active .evpti-day-number {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
	box-shadow: 0 0 0 0.3125rem rgba(184, 98, 27, 0.2), 0 0.375rem 1rem rgba(0, 0, 0, 0.45);
}

.evpti-day-item.is-active .evpti-day-number::before {
	opacity: 1;
}

.evpti-day-header-info {
	min-width: 0;
}

.evpti-day-header-text {
	margin-bottom: 0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

.evpti-day-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

.evpti-day-content {
	position: relative;
	z-index: 2;
	padding: 1.5rem 1.75rem 1.875rem;
}

.evpti-day-description {
	margin-bottom: 1.25rem;
	font-size: 0.92rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.74);
}

.evpti-day-description p {
	margin: 0 0 0.75em;
}

.evpti-day-description p:last-child {
	margin-bottom: 0;
}

/*
 * ---------- The day prose, clamped with a Read more ----------
 *
 * WHY FIVE LINES. Measured across the fifteen day Yunnan itinerary at
 * 1440: the descriptions run 1 to 9 lines, median 7, and hold 1 to 6
 * sentences, median 4. So a literal four sentence cut would hide almost
 * nothing on a typical day while a whole day column stays a wall of
 * text. Five lines collapses twelve of the fifteen days, leaves the
 * three genuinely short ones alone, and takes about 925px out of the
 * column, while still showing enough of the day to decide on it.
 *
 * 1.85em IS EXACTLY ONE LINE BOX here, because line-height on this
 * element is 1.85 and em resolves against its own font-size, so the
 * clamp tracks the type rather than being a pixel number that goes
 * wrong the first time the type changes.
 *
 * A MASK, NOT A GRADIENT OVERLAY. A gradient has to end on the colour
 * behind it, and there are three: the day is bg-deep at rest,
 * rgba(255,255,255,0.03) on hover and rgba(255,255,255,0.04) when it is
 * the active day. An overlay tuned to any one of them bands on the
 * other two. Masking fades the text itself to transparent and lets
 * whatever is behind it show through unchanged, so it is right in all
 * three states and stays right if a fourth is ever added.
 *
 * .is-clamped is added by script, never by the stylesheet, and only
 * once it has measured that the prose actually overflows. With
 * JavaScript off nothing here applies, every day reads in full, and the
 * button ships hidden.
 */
.evpti-day-description.is-clamped {
	max-height: calc(1.85em * 5);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

.evpti-day-description.is-expanding,
.evpti-day-description.is-collapsing {
	overflow: hidden;
	transition: max-height 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.evpti-desc-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	margin: -0.375rem 0 1.25rem;
	padding: 0.375rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s ease;
}

/* display:none, so the label that is not showing is out of the
   accessibility tree as well as off the screen. */
.evpti-desc-more-label--less,
.evpti-desc-more[aria-expanded="true"] .evpti-desc-more-label--more {
	display: none;
}

.evpti-desc-more[aria-expanded="true"] .evpti-desc-more-label--less {
	display: inline;
}

/* The theme sets display on this button, which would beat the hidden
   attribute's own user agent rule, so it is restated here. Without it a
   day whose prose does not overflow would still show the control. */
.evpti-desc-more[hidden] {
	display: none;
}

.evpti-desc-more-icon {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpti-desc-more[aria-expanded="true"] .evpti-desc-more-icon {
	transform: rotate(180deg);
}

.evpti-desc-more:hover,
.evpti-desc-more:focus-visible {
	color: var(--wp--preset--color--rust);
}

.evpti-desc-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 0.125rem;
}

/* Gallery. has-3 puts a hero image beside two stacked, which is the
   recovered file's 1.5fr/1fr grid. */
.evpti-gallery-grid {
	position: relative;
	display: grid;
	gap: 0.5rem;
	height: 16.25rem;
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.evpti-gallery-grid.has-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.evpti-gallery-grid.has-2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.evpti-gallery-grid.has-3 {
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(2) { grid-row: 1; grid-column: 2; }
.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(3) { grid-row: 2; grid-column: 2; }

/* A button, not a link. See the note on .evptg-item. */
.evpti-gallery-image {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	font: inherit;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.evpti-gallery-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.evpti-gallery-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.3s ease;
}

.evpti-gallery-image:hover {
	z-index: 10;
	transform: scale(1.03);
	box-shadow: 0 0.5rem 1.5625rem rgba(184, 98, 27, 0.25);
}

.evpti-gallery-image:hover::before {
	background: rgba(0, 0, 0, 0.15);
}

.evpti-gallery-image:hover img {
	transform: scale(1.02);
}

.evpti-gallery-image:focus-visible {
	z-index: 11;
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evpti-image-gallery {
	margin-bottom: 1.25rem;
}

/* Lodge trigger. */
/* A trigger, not a panel. The description and the amenities are the
   modal's, so this is the category, the name and the way in. */
.evpti-lodge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.25rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.evpti-lodge::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0.125rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpti-lodge:hover {
	border-color: rgba(212, 196, 168, 0.28);
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4);
}

.evpti-lodge:hover::before {
	opacity: 1;
}

.evpti-lodge:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpti-lodge-text {
	display: block;
	min-width: 0;
}

/* Says what the box is. Small on purpose: it is a label above the
   name, not a heading competing with it. */
.evpti-lodge-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

/* A real category, where one is set, reads as a qualifier on the label
   rather than a second label. */
.evpti-lodge-qual::before {
	content: '\00b7';
	margin: 0 0.4em;
	opacity: 0.65;
}

.evpti-lodge-name {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	line-height: 1.3;
	color: #fff;
}

.evpti-lodge-hint {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--rust);
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.evpti-lodge:hover .evpti-lodge-hint {
	opacity: 1;
}

.evpti-lodge-arrow {
	width: 0.85rem;
	height: 0.85rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpti-lodge:hover .evpti-lodge-arrow {
	transform: translateX(0.2rem);
}

/* ---------- The trigger when the accommodation has a photograph ----------

   Rare on purpose: 17 of the 295 accommodation records in the library
   carry an image, all of them in the two Guyana tours. So this is the
   variant and the plain card is the norm, which is why every rule here
   hangs off --has-image and none of them touch .evpti-lodge itself.

   THE FADE IS A MASK, NOT A GRADIENT OVERLAY, for the same reason
   .evpwtg-showcase--has-image gave (that section went in the October
   2026 redesign): an overlay has to be faded to a
   literal colour, and this card sits on rgba white over whatever the
   section behind it is, so any literal would match at one point and seam
   everywhere else. Masking fades the image itself to transparent and lets
   the real card background come through, which cannot disagree with
   itself and needs no second rule for the other theme. Same stops as that
   showcase, mirrored, because the image sits on the right here and has to
   soften towards the text rather than away from it.

   ABSOLUTELY POSITIONED, WHICH IS WHAT RULES OUT LAYOUT SHIFT. The media
   is out of flow, so the card height is decided entirely by its text and
   the image cannot move anything whenever it happens to arrive. The card
   already carries position: relative and overflow: hidden, so the picture
   is clipped to the existing 1rem radius with nothing new to maintain.
   ---------------------------------------------------------------- */

/*
 * display: block rather than a second flex or grid declaration. The base
 * rule is a flex row, and simply turning that off puts the hint under the
 * name on its own line, because the text span is a block and the hint is
 * an inline-flex following it. justify-content, align-items and gap all
 * become inert, so there is nothing to override.
 *
 * THIS CARD IS TALLER THAN THE PLAIN ONE, by the hint line plus its
 * margin. That is inherent in moving the hint below the title and is not
 * layout shift: a card never changes state, so nothing reflows. Two cards
 * of different heights is the itinerary doing what it already does.
 */
.evpti-lodge--has-image {
	display: block;
	/* Keeps the text clear of the picture and its fade. */
	padding-right: 46%;
}

.evpti-lodge--has-image .evpti-lodge-hint {
	margin-top: 0.5rem;
}

.evpti-lodge-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44%;
	max-width: 15rem;
	/* The card is the button, so the picture must never eat a click. */
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to left, #000 0, #000 75%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0, #000 75%, transparent 100%);
}

.evpti-lodge-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- The day's trekking figures ----------
   A row of small label and value pairs above the prose. auto-fit rather
   than a fixed column count because a day carries between one and five
   of these depending on what was filled in, and a fixed grid would
   leave a hole where a figure was not entered. */
.evpti-trek {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-left: 2px solid var(--wp--preset--color--rust);
	border-radius: 0.625rem;
	background: rgba(255, 255, 255, 0.03);
}

.evpti-trek-item {
	min-width: 0;
}

.evpti-trek-label {
	margin: 0 0 0.2rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

.evpti-trek-value {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.3;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.evpti-day-meals {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	margin: 0;
	padding-top: 0.875rem;
	border-top: 1px solid rgba(212, 196, 168, 0.1);
}

.evpti-day-meals-label {
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}

.evpti-day-meals-value {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.78);
}

/* Day pills. Desktop hides them; the sticky map is the wayfinding. */
.evpti-day-nav {
	display: none;
}

/*
 * Leaflet markers, scoped so other maps keep theirs.
 *
 * The dot is smaller than the icon box, so it has to be centred in it or
 * every pin sits up and left of its own coordinate. Leaflet writes
 * iconSize onto this element as inline width and height and anchors it
 * at its centre; the dot is 30px inside that 34px box.
 *
 * inset plus margin auto rather than flex on this element. Leaflet owns
 * this node, sets position and a transform on it and loads its own
 * stylesheet after ours, so a display declaration here is not reliably
 * ours to make: measured, it left the dot 2px up and 2px left of centre
 * on every marker. Centring from the child instead depends on nothing
 * but the box being positioned, which Leaflet guarantees because that is
 * how it places markers at all.
 */
.evpti-marker {
	background: none;
	border: none;
}

/*
 * ONE MARKER IS LIT AND THE REST ARE NOT, and the rust is what says which.
 * Every marker used to carry the full rust to gold gradient, so is-active
 * was a 22% scale and a warmer shadow and nothing else: on a route of
 * fifteen identical pins that is not enough to find the day you are
 * reading. The resting state is now a warm grey and the gradient belongs
 * to the active day alone.
 *
 * THE GRADIENT IS A PSEUDO-ELEMENT, NOT A BACKGROUND SWAP, for two
 * reasons. CSS cannot transition between a flat colour and a gradient, so
 * a background swap would snap rather than cross-fade as the reader
 * scrolls from one day to the next; fading one layer's opacity does. And
 * it keeps the number out of it. Dimming the whole dot with a filter was
 * the obvious first try and it is wrong: brightness() takes the white
 * numeral down with the ground it sits on, which left 1.2:1 on the grey
 * markers. The numeral stays #fff in every state and the layer beneath it
 * is the only thing that changes, so the small bold type keeps 6.2:1 when
 * dull and better than that when lit.
 *
 * isolation plus z-index -1 puts that layer above the dot's own
 * background and below its text, which is what makes one element carry
 * two grounds without a second span in the icon markup.
 *
 * THE RESTING MARKER IS THE MAP CARD IN MINIATURE. It was a flat grey
 * disc with a white ring, which is the generic map pin every library
 * ships and belongs to no particular site. It now carries the same
 * material as .evpti-mapcard sitting a few hundred pixels away: the same
 * 145deg warm-dark gradient, a gold hairline at the thickness the house
 * eyebrow rule uses, and the gold the card's own DAY label is set in. So
 * the pins read as part of this page rather than as Leaflet's defaults
 * left where they fell.
 */
.evpti-marker .evpti-marker-dot {
	position: absolute;
	inset: 0;
	margin: auto;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 0.09375rem solid rgba(212, 196, 168, 0.38);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.95), rgba(34, 27, 20, 0.95));
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.55);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease,
		color 0.25s ease;
}

/*
 * THE LIT GRADIENT LOST ITS PALE END. It ran rust to gold, and gold here
 * is #D4C4A8, a pale sand: white type on that corner measures 1.7:1, so
 * the numeral on the one marker the eye is being sent to was the least
 * legible thing on the map. Rust-dark to rust keeps it unmistakably the
 * brand colour, reads richer at this size, and holds the numeral above
 * 4.5:1 across the whole sweep instead of only at one end.
 */
.evpti-marker .evpti-marker-dot::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.09375rem;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--wp--preset--color--rust-dark), var(--wp--preset--color--rust));
	opacity: 0;
	transition: opacity 0.25s ease;
}

/*
 * Dulling the markers also dulled the signal that they are clickable, so
 * hover and keyboard focus bring the rust part of the way up and lift the
 * pin slightly. Both sit above is-active in source order and at equal
 * specificity, so the active day still wins when the pointer is over one
 * of the others.
 */
.evpti-marker:hover .evpti-marker-dot,
.evpti-marker:focus-visible .evpti-marker-dot {
	border-color: rgba(212, 196, 168, 0.7);
	color: #fff;
	transform: scale(1.08);
}

.evpti-marker:hover .evpti-marker-dot::before,
.evpti-marker:focus-visible .evpti-marker-dot::before {
	opacity: 0.4;
}

/*
 * The halo is the ring this codebase already uses to say "this one", at
 * 0 0 0 <n> rgba(184, 98, 27, <low>), rather than the soft rust drop
 * shadow that was here. A ring reads as deliberate at pin size where a
 * blur just reads as smudge, and it grows the active marker's footprint
 * past the plain 1.2 scale without making the disc itself heavy.
 */
.evpti-marker.is-active .evpti-marker-dot {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
	transform: scale(1.28);
	box-shadow: 0 0 0 0.3125rem rgba(184, 98, 27, 0.22), 0 0.375rem 1rem rgba(0, 0, 0, 0.5);
}

.evpti-marker.is-active .evpti-marker-dot::before {
	opacity: 1;
}

.evpti-mini-marker span {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	border: 0.15625rem solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.4);
}

/* Modals. */
.evpti-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(6, 6, 6, 0.9);
	-webkit-backdrop-filter: blur(0.25rem);
	backdrop-filter: blur(0.25rem);
}

/*
 * A column, so the caption is laid out under the frame rather than
 * clipped by it. The frame is a 3:2 box at the full modal width, which
 * is about 667px tall at 1000px wide: on a 768px laptop screen that
 * alone fills the 90vh cap, and with overflow hidden the lodge name,
 * description and amenities were cut off with no way to scroll to them.
 * The description now lives only in this modal, so that was the whole
 * reading gone. The frame is capped at 55vh and letterboxes, since the
 * image is object-fit contain, and the caption scrolls if a long
 * description still overflows on a short screen.
 */
.evpti-modal-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 62.5rem;
	max-width: 90vw;
	max-height: 90vh;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: #14120f;
	overflow: hidden;
}

.evpti-modal-display {
	flex: 0 0 auto;
	width: 100%;
	max-height: 55vh;
	aspect-ratio: 3 / 2;
	background: #0d0d0d;
}

.evpti-modal-display img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.evpti-modal-caption {
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.25rem 1.5rem 1.5rem;
	overflow-y: auto;
}

.evpti-modal-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	color: #fff;
}

.evpti-modal-day {
	padding: 0.1875rem 0.625rem;
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.evpti-modal-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

.evpti-modal-counter {
	position: absolute;
	top: 1.125rem;
	left: 1.125rem;
	z-index: 3;
	margin: 0;
	padding: 0.3125rem 0.75rem;
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.68rem;
	font-weight: 600;
}

.evpti-modal-close {
	position: absolute;
	top: 1.125rem;
	right: 1.125rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpti-modal-close:hover {
	background: var(--wp--preset--color--rust);
}

.evpti-modal-nav {
	position: absolute;
	top: 30%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpti-modal-nav.prev { left: 1.125rem; }
.evpti-modal-nav.next { right: 1.125rem; }

.evpti-modal-nav:hover {
	background: var(--wp--preset--color--rust);
}

.evpti-modal-close:focus-visible,
.evpti-modal-nav:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Tour tabs and itinerary: 768 and below ---------- */

@media (max-width: 768px) {
	/* The desktop map is not shown, so it is not built either. */
	.evpti-map-section {
		display: none;
	}

	.evpti-layout {
		flex-direction: column;
	}

	.evpti-panel {
		width: 100%;
		border-left: none;
	}

	.evpti-day-nav {
		position: sticky;
		top: var(--ev-itin-mobile-day-nav-top, 0);
		z-index: 200;
		display: flex;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid rgba(212, 196, 168, 0.12);
		background: var(--wp--preset--color--bg-deep);
		box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.4);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.evpti-day-nav::-webkit-scrollbar {
		display: none;
	}

	.evpti-day-pill {
		flex-shrink: 0;
		padding: 0.5rem 1.125rem;
		border: 1px solid rgba(212, 196, 168, 0.15);
		border-radius: 3.125rem;
		background: rgba(255, 255, 255, 0.05);
		color: rgba(255, 255, 255, 0.45);
		font-family: var(--wp--preset--font-family--montserrat);
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		white-space: nowrap;
		cursor: pointer;
		transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}

	.evpti-day-pill.is-active {
		border-color: var(--wp--preset--color--rust);
		background: var(--wp--preset--color--rust);
		color: #fff;
		box-shadow: 0 0.25rem 0.875rem rgba(184, 98, 27, 0.4);
	}

	.evpti-day-pill:focus-visible {
		outline: 2px solid var(--wp--preset--color--gold);
		outline-offset: 2px;
	}

	.evpti-minimap-wrap {
		position: relative;
		display: block;
		background: var(--wp--preset--color--bg-deep);
	}

	.evpti-minimap {
		display: block;
		width: 100%;
		height: 15rem;
		background: #0d0d0d;
	}

	.evpti-minimap-wrap::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 500;
		height: 3.75rem;
		background: linear-gradient(to bottom, transparent, var(--wp--preset--color--bg-deep));
		pointer-events: none;
	}

	.evpti-minimap-label {
		position: absolute;
		top: 0.875rem;
		left: 0.875rem;
		z-index: 600;
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.4375rem 1rem;
		border: 1px solid rgba(212, 196, 168, 0.2);
		border-radius: 3.125rem;
		background: rgba(18, 14, 10, 0.88);
		-webkit-backdrop-filter: blur(0.625rem);
		backdrop-filter: blur(0.625rem);
	}

	.evpti-minimap-eyebrow {
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--gold);
	}

	.evpti-minimap-count {
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		color: rgba(255, 255, 255, 0.45);
	}

	.evpti-minimap .leaflet-control-container {
		display: none;
	}

	/*
	 * Mobile reorders the day: description, gallery, lodge, then meals.
	 * The recovered file puts badges last; that slot is kept for when
	 * activity_badges gets a field.
	 */
	.evpti-day-content {
		display: flex;
		flex-direction: column;
		padding: 1.25rem 1.25rem 1.75rem;
	}

	.evpti-day-description { order: 1; }
	/* Same slot as the prose it belongs to. Without this the button
	   would take the default order of 0 and jump above the description
	   it controls, which is the one place it must never be. */
	.evpti-desc-more       { order: 1; }
	.evpti-image-gallery   { order: 2; }
	.evpti-lodge           { order: 3; }
	.evpti-day-meals       { order: 4; }

	.evpti-day-header {
		gap: 0.875rem;
		padding: 1rem 1.25rem 0;
	}

	.evpti-day-number {
		width: 2.375rem;
		height: 2.375rem;
		font-size: 0.94rem;
	}

	/* Deliberately larger than desktop. Reading a day on a phone is the
	   primary use, not a compressed version of the desktop card. */
	.evpti-day-title       { font-size: 1.65rem; line-height: 1.2; }
	.evpti-day-header-text { font-size: 0.85rem; }
	.evpti-day-description { font-size: 1.15rem; line-height: 1.85; }
	.evpti-lodge-label     { font-size: 0.8rem; }
	.evpti-lodge-name      { font-size: 1.5rem; }
	.evpti-lodge-hint      { font-size: 0.72rem; }

	/* The name is long and the hint will not shrink, so on a phone the
	   trigger stacks rather than squeezing the place name to two
	   characters a line. */
	.evpti-lodge {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	/*
	 * NO PICTURE ON A PHONE. At this width the card is already stacked by
	 * the rule above, so the hint is under the name whether there is an
	 * image or not and that half of the treatment is already true here.
	 * What is left is a masked strip about 150px wide on a 390px card, a
	 * quarter of which is fade, which reads as a smudge behind the text
	 * rather than as a property. Hiding it also means a phone renders the
	 * same card either way, so the common path cannot regress on the
	 * commonest device.
	 */
	.evpti-lodge--has-image {
		display: flex;
		padding-right: 1.25rem;
	}

	.evpti-lodge--has-image .evpti-lodge-hint {
		margin-top: 0;
	}

	.evpti-lodge-media {
		display: none;
	}

	/* The grid becomes a scroll-snap carousel at 78% card width. */
	.evpti-gallery-grid,
	.evpti-gallery-grid.has-1,
	.evpti-gallery-grid.has-2,
	.evpti-gallery-grid.has-3 {
		display: flex;
		height: auto;
		gap: 0.625rem;
		border-radius: 0;
		box-shadow: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.evpti-gallery-grid::-webkit-scrollbar {
		display: none;
	}

	.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(1),
	.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(2),
	.evpti-gallery-grid.has-3 .evpti-gallery-image:nth-child(3) {
		grid-row: auto;
		grid-column: auto;
	}

	.evpti-gallery-image {
		flex: 0 0 78%;
		aspect-ratio: 4 / 3;
		border-radius: 0.875rem;
		scroll-snap-align: center;
		overflow: hidden;
	}

	.evpti-modal-nav {
		top: auto;
		bottom: 1.125rem;
	}
}

/* ---------- Tour tabs and itinerary: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.evpti-day-item,
	.evpti-day-item::before,
	.evpti-gallery-image,
	.evpti-gallery-image img,
	.evpti-lodge,
	.evpti-lodge-arrow,
	.evpti-mapcard,
	.evpti-day-pill,
	.evpti-reset,
	.evpti-marker .evpti-marker-dot,
	/* The lit layer fades in on the active day, so it belongs here too.
	   The marker still changes colour, it just changes at once. */
	.evpti-marker .evpti-marker-dot::before,
	/* The prose still opens and closes, it just does it at once. The
	   script checks this query too and skips the height animation
	   rather than leaving a transition running with no duration. */
	.evpti-day-description.is-expanding,
	.evpti-day-description.is-collapsing,
	.evpti-desc-more-icon,
	/* The day number still changes with the day, at once. */
	.evpti-day-number,
	.evpti-day-number::before,
	.evptt-tab,
	.evptt-tab::after {
		transition: none;
	}

	.evpti-gallery-image:hover,
	.evpti-lodge:hover,
	.evpti-lodge:hover .evpti-lodge-arrow,
	.evpti-mapcard.is-hidden,
	.evpti-gallery-image:hover img {
		transform: none;
	}
}

/* ---------- Itinerary: activity badges and lodge amenities ---------- */

.evpti-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpti-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem 0.8125rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: rgba(212, 196, 168, 0.08);
	color: var(--wp--preset--color--gold);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpti-badge:hover {
	border-color: rgba(212, 196, 168, 0.4);
	background: rgba(212, 196, 168, 0.15);
}

/* The lodge modal's checklist. */
.evpti-amenities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.25rem;
	margin: 1.125rem 0 0;
	padding: 1.125rem 0 0;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	list-style: none;
}

.evpti-amenity {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.evpti-amenity::before {
	content: '';
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.5rem;
	height: 0.3125rem;
	border-left: 0.125rem solid var(--wp--preset--color--gold);
	border-bottom: 0.125rem solid var(--wp--preset--color--gold);
	transform: rotate(-45deg);
}

@media (max-width: 768px) {
	.evpti-badges {
		order: 5;
		margin-top: 0.25rem;
	}

	.evpti-badge {
		padding: 0.4375rem 0.875rem;
		font-size: 0.85rem;
	}

	.evpti-amenities {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpti-badge {
		transition: none;
	}
}

/* ==================================================================
   TOUR MOSAIC GALLERY
   Behaviour from tour_mosaic_gallery v3's changelog, appearance from
   the v2 capture's CSS, which v3 did not change. The three grid
   patterns are lifted from it exactly.
   Stripped: 100vw full bleed, !important, the global .mosaic-item
   names that collided when two instances shared a page, and the
   per-component token block.
   ================================================================== */

.evptg {
	position: relative;
	display: block;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	line-height: 1.6;
}

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

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

.evptg-body {
	position: relative;
	background: var(--wp--preset--color--bg-deep);
}

/* A page never exceeds the screen. */
.evptg-viewport {
	position: relative;
	height: 78vh;
	min-height: 28.125rem;
	max-height: 56.25rem;
	overflow: hidden;
}

.evptg-track {
	display: flex;
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.evptg-page {
	display: grid;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	gap: 0.25rem;
	padding: 0.25rem;
}

/* Pattern A: large top-left, two small top-right, wide mid-right,
   two across the bottom. */
.evptg-page--a {
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

.evptg-page--a .evptg-item:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; }
.evptg-page--a .evptg-item:nth-child(2) { grid-column: 2;     grid-row: 1; }
.evptg-page--a .evptg-item:nth-child(3) { grid-column: 3;     grid-row: 1; }
.evptg-page--a .evptg-item:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.evptg-page--a .evptg-item:nth-child(5) { grid-column: 1 / 2; grid-row: 3; }
.evptg-page--a .evptg-item:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }

/* Pattern B: mirrored, large top-right. */
.evptg-page--b {
	grid-template-columns: 1fr 1fr 2fr;
	grid-template-rows: 1fr 1fr 1fr;
}

.evptg-page--b .evptg-item:nth-child(1) { grid-column: 1;     grid-row: 1; }
.evptg-page--b .evptg-item:nth-child(2) { grid-column: 2;     grid-row: 1; }
.evptg-page--b .evptg-item:nth-child(3) { grid-column: 3;     grid-row: 1 / 3; }
.evptg-page--b .evptg-item:nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
.evptg-page--b .evptg-item:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
.evptg-page--b .evptg-item:nth-child(6) { grid-column: 3;     grid-row: 3; }

/* Pattern C: wide top-right, wide mid-left, large bottom-right. The
   third row is taller, which is what makes the bottom tile read as the
   large one. */
.evptg-page--c {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1.2fr;
}

.evptg-page--c .evptg-item:nth-child(1) { grid-column: 1;     grid-row: 1; }
.evptg-page--c .evptg-item:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.evptg-page--c .evptg-item:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.evptg-page--c .evptg-item:nth-child(4) { grid-column: 3;     grid-row: 2; }
.evptg-page--c .evptg-item:nth-child(5) { grid-column: 1;     grid-row: 3; }
.evptg-page--c .evptg-item:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }

/* A partial last page.

   The mosaic places every tile explicitly, so a page holding four
   images would leave two tile-shaped holes in the middle of the grid.
   v3's answer was to emit no placeholder cells, which stops the black
   squares but not the holes. These fills replace the pattern entirely
   for a short page, so the images that are there use the whole
   viewport. The pattern class is still on the element, so the override
   has to beat it: it is later in the file and equally specific. */
.evptg-page--fill-1,
.evptg-page--fill-2,
.evptg-page--fill-3,
.evptg-page--fill-4,
.evptg-page--fill-5 {
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr 1fr;
}

.evptg-page--fill-1 .evptg-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }

.evptg-page--fill-2 .evptg-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.evptg-page--fill-2 .evptg-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; }

.evptg-page--fill-3 .evptg-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.evptg-page--fill-3 .evptg-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.evptg-page--fill-3 .evptg-item:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }

.evptg-page--fill-4 .evptg-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.evptg-page--fill-4 .evptg-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.evptg-page--fill-4 .evptg-item:nth-child(3) { grid-column: 1 / 4; grid-row: 2; }
.evptg-page--fill-4 .evptg-item:nth-child(4) { grid-column: 4 / 7; grid-row: 2; }

.evptg-page--fill-5 .evptg-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.evptg-page--fill-5 .evptg-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.evptg-page--fill-5 .evptg-item:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.evptg-page--fill-5 .evptg-item:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
.evptg-page--fill-5 .evptg-item:nth-child(5) { grid-column: 5 / 7; grid-row: 2; }

/* Tiles. */
/*
 * A button, not a link. It opens the lightbox rather than navigating,
 * and a link straight to a .jpg is a crawlable dead end: 419 of them on
 * 23 pages in the October audit. The reset below is only what a button
 * needs and an anchor did not, so the tile looks exactly as it did.
 */
.evptg-item {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	font: inherit;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
	background: #111;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}

.evptg-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.evptg-item::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.evptg-item:hover img,
.evptg-item:focus-visible img {
	transform: scale(1.05);
}

.evptg-item:hover::after,
.evptg-item:focus-visible::after {
	opacity: 1;
}

.evptg-item:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
	z-index: 3;
}

/* Captions slide up on hover, from the attachment caption. */
.evptg-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 1rem;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.evptg-item:hover .evptg-caption,
.evptg-item:focus-visible .evptg-caption {
	transform: translateY(0);
}

/* Controls. */
.evptg-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1.5rem 1.25rem 2rem;
}

.evptg-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0.09375rem solid rgba(212, 196, 168, 0.4);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.evptg-nav:hover:not(:disabled) {
	border-color: var(--wp--preset--color--gold);
	background: rgba(212, 196, 168, 0.15);
}

.evptg-nav:disabled {
	opacity: 0.2;
	cursor: not-allowed;
}

.evptg-nav:focus-visible,
.evptg-dot:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptg-dots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.evptg-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.evptg-dot.is-active {
	background: var(--wp--preset--color--gold);
	transform: scale(1.35);
}

/* Lightbox. */
.evptg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.5rem 1.25rem 4.5rem;
	background: rgba(4, 4, 4, 0.94);
}

.evptg-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.evptg-lightbox-close {
	position: absolute;
	top: 1.125rem;
	right: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evptg-lightbox-close:hover {
	background: var(--wp--preset--color--rust);
}

.evptg-lightbox-nav {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.25s ease;
}

.evptg-lightbox-nav.prev { left: 1.25rem; }
.evptg-lightbox-nav.next { right: 1.25rem; }

.evptg-lightbox-nav:hover {
	background: var(--wp--preset--color--rust);
}

.evptg-lightbox-close:focus-visible,
.evptg-lightbox-nav:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptg-lightbox-counter {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	transform: translateX(-50%);
}

/* ---------- Gallery: 768 and below ---------- */

@media (max-width: 768px) {
	.evptg-viewport {
		height: 65vh;
		min-height: 23.75rem;
	}

	.evptg-page {
		gap: 0.1875rem;
		padding: 0.1875rem;
	}
}

/* ---------- Gallery: 480 and below ---------- */

@media (max-width: 480px) {
	.evptg-viewport {
		height: 68vh;
		min-height: 21.25rem;
	}

	/*
	 * Two columns, four tiles. The fifth and sixth of each page are not
	 * dropped from the document, only from the grid: the lightbox walks
	 * the whole gallery, so they are still reachable by swiping from the
	 * fourth. See the report.
	 */
	.evptg-page--a,
	.evptg-page--b,
	.evptg-page--c {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}

	.evptg-page--a .evptg-item:nth-child(1),
	.evptg-page--b .evptg-item:nth-child(1),
	.evptg-page--c .evptg-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }

	.evptg-page--a .evptg-item:nth-child(2),
	.evptg-page--b .evptg-item:nth-child(2),
	.evptg-page--c .evptg-item:nth-child(2) { grid-column: 1; grid-row: 2; }

	.evptg-page--a .evptg-item:nth-child(3),
	.evptg-page--b .evptg-item:nth-child(3),
	.evptg-page--c .evptg-item:nth-child(3) { grid-column: 2; grid-row: 2; }

	.evptg-page--a .evptg-item:nth-child(4),
	.evptg-page--b .evptg-item:nth-child(4),
	.evptg-page--c .evptg-item:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }

	.evptg-page--a .evptg-item:nth-child(n + 5),
	.evptg-page--b .evptg-item:nth-child(n + 5),
	.evptg-page--c .evptg-item:nth-child(n + 5) {
		display: none;
	}

	/* A short page has no fifth or sixth tile to hide, so it keeps its
	   fill layout and simply stacks. */
	.evptg-page--fill-1,
	.evptg-page--fill-2,
	.evptg-page--fill-3,
	.evptg-page--fill-4,
	.evptg-page--fill-5 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, 1fr);
	}

	.evptg-page--fill-1 .evptg-item,
	.evptg-page--fill-2 .evptg-item,
	.evptg-page--fill-3 .evptg-item,
	.evptg-page--fill-4 .evptg-item,
	.evptg-page--fill-5 .evptg-item {
		grid-column: auto;
		grid-row: auto;
	}

	.evptg-page--fill-1 .evptg-item:nth-child(1),
	.evptg-page--fill-3 .evptg-item:nth-child(1),
	.evptg-page--fill-5 .evptg-item:nth-child(1) {
		grid-column: 1 / 3;
	}

	.evptg-controls {
		padding: 1rem 0.9375rem 1.5rem;
	}

	.evptg-lightbox-nav {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.25rem;
	}

	.evptg-lightbox-nav.prev { left: 0.625rem; }
	.evptg-lightbox-nav.next { right: 0.625rem; }

	/* The caption has nowhere to hover on a touch screen, so it sits
	   open rather than being unreachable. */
	.evptg-caption {
		padding: 0.625rem;
		font-size: 0.72rem;
		transform: translateY(0);
		background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
	}
}

/* ---------- Gallery: reduced motion and high contrast ---------- */

@media (prefers-reduced-motion: reduce) {
	.evptg-track,
	.evptg-item img,
	.evptg-caption,
	.evptg-dot,
	.evptg-nav {
		transition: none;
	}

	.evptg-item:hover img,
	.evptg-item:focus-visible img {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evptg-item {
		border: 1px solid #fff;
	}

	.evptg-nav {
		border-color: #fff;
		color: #fff;
	}
}

/* ================================================
   SINGLE TOUR, PASS 3
   Booking, the floating CTA's modal, locations and the FAQ.
   Rebuilt from salvage/tour-page/08, 11, 12 and 13. Testimonials and
   related tours have no rules here: both reuse a component that is
   already styled, section-testimonials and the destination tours
   carousel respectively.
   ================================================================== */

/* Form validation red. Deliberately its own token rather than
   borrowing --ev-iucn-cr: that scale is data encoding for Red List
   categories, and its own comment says nobody should be picking those
   values as a colour. An invalid email is not a critically endangered
   species. */
:root {
	--ev-form-error: #d9534f;
}

/* ---------- Shared tour section header ----------

   One block for four sections rather than four near identical copies.
   The pricing section shipped in pass 2 with these four classes in its
   markup and no rules at all behind them, so its heading was rendering
   at browser defaults; adding evptp here is that fix as well as the
   base for the three new sections.

   The What's Included tab panel joined in pass 4. It had the identical
   defect and for the identical reason: header markup written, header
   rules never. Its grid below already uses this exact max-width and
   gutter, so the header now lines up with the cards under it.

   .evptd-header, the highlights header, joined in a later pass. It had
   been left out on purpose, on the grounds that it is full bleed with a
   rule under it and a much larger title, so merging it would change how
   it looks. That was the wrong trade: what it actually looked like was
   the one section header on the tour page hanging further left than
   every other one. It is aligned with the rest now and keeps its rule
   and its spacing in the rule below. The overview and itinerary tab
   panels still carry their own headers, which already use this same
   max-width and gutter.

   A consequence worth knowing: the carousel under this header stays
   full bleed at a flat 1.25rem, because its edge fades are what signal
   that it scrolls. So above roughly 1400px the header text sits inboard
   of the first card. That is the same relationship the header has to
   the section edges everywhere else on the page. */

.evptc-header,
.evptd-header,
.evptp-header,
.evptb-header,
.evptl-header,
.evptf-header {
	max-width: 87.5rem;
	margin: 0 auto 3rem;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* Highlights is the only one of these with a rule under it, so it keeps
   its own room below the text and sits closer to what follows. Declared
   after the shared rule, not with the rest of the .evptd block above,
   because the shared rule would otherwise win on source order and take
   both of these with it. */
.evptd-header {
	margin-bottom: 0.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The phone tightening, here rather than in the section's own 768 block
   above, for the same source order reason. A media query adds no
   specificity, so a rule for this element written earlier in the file
   than the shared alignment rule simply loses. */
@media (max-width: 768px) {
	.evptd-header {
		padding-bottom: 2rem;
	}
}

.evptc-eyebrow,
.evptp-eyebrow,
.evptb-eyebrow,
.evptl-eyebrow,
.evptf-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evptc-eyebrow::before,
.evptp-eyebrow::before,
.evptb-eyebrow::before,
.evptl-eyebrow::before,
.evptf-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evptc-title,
.evptp-title,
.evptb-title,
.evptl-title,
.evptf-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

/*
 * ONE TITLE SCALE ON A TOUR PAGE.
 *
 * There used to be three: clamp(2rem, 4vw, 3rem) on the standard
 * sections, clamp(2.4rem, 5vw, 3.75rem) on the itinerary and booking,
 * and clamp(2.8rem, 5.5vw, 4.4rem) on Tour Highlights, 48, 60 and 70px
 * at 1440. Readers saw the pricing header as small, not as a tier, and
 * the Highlights size on every section as too big, so every section
 * heading on a tour page now takes the middle one: 60px at 1440, 38px
 * on a phone. Scoped to the tour page body class so the wildlife,
 * testimonial and related tour headings keep their own sizes on the
 * destination and home pages, and so this wins over each section's own
 * rule wherever it sits in the file. The booking modal keeps its
 * smaller dialog size.
 */
.single-tour .evptd-title,
.single-tour .evpto-title,
.single-tour .evpti-title,
.single-tour .evpdw-title,
.single-tour .evptc-title,
.single-tour .evptp-title,
.single-tour .evptb-title,
.single-tour .ev-t-title,
.single-tour .evpdt-title,
.single-tour .evptl-title,
.single-tour .evptf-title {
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	line-height: 1.05;
}

.evptc-title em,
.evpto-title em,
.evptp-title em,
.evptb-title em,
.evptl-title em,
.evptf-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evptc-descriptor,
.evptp-descriptor,
.evptb-descriptor,
.evptl-descriptor,
.evptf-descriptor {
	max-width: 38rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.45);
}

/*
   THE PRICING AND BOOKING STANDFIRSTS ARE SET, not body copy. Both
   captures give them the same treatment and the shared rule above was
   rendering them as upright grey sans:

     .tp-…-header-sub  EB Garamond italic, gold, clamp(1rem,2vw,1.2rem),
                       max-width 600px, line-height 1.5
     .bk-…-desc        EB Garamond italic, gold at 0.85, 1.1em,
                       max-width 380px, line-height 1.7

   PLAYFAIR, NOT EB GARAMOND. The capture's stack is 'EB Garamond',
   'Playfair Display', serif, and EB Garamond is not loaded on this
   site and never was: functions.php enqueues Playfair Display with its
   italics and Montserrat, and nothing else. So the capture's own stack
   falls through to Playfair here, which is what this says outright
   rather than naming a face the browser will not find.

   Scoped to these two rather than folded into the rule above, because
   that rule also dresses evptc, evptl and evptf and I have not checked
   their captures. If those want the same treatment it is one more
   selector here, not a change to the shared default.
*/
.evptp-descriptor,
.evptb-descriptor {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

.evptp-descriptor {
	max-width: 37.5rem;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.5;
}

.evptb-descriptor {
	max-width: 23.75rem;
	font-size: 1.1rem;
	line-height: 1.7;
	opacity: 0.85;
}

.evptf-descriptor a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.evptf-descriptor a:hover {
	color: var(--wp--preset--color--gold-light);
}

/* ================================================
   BOOK YOUR ADVENTURE
   ================================================ */

/* ==================================================================
   THE BOOKING FORM OWNS ITS BOX MODEL

   Same reason the tour cards do: this stylesheet has no global reset,
   only per section ones, and nothing here declared a box-sizing.

   .evptb-input is width: 100% with 0.9rem of horizontal padding and a
   1px border. In content-box that came to the cell width plus 30.8px,
   measured at 31px, on the name, email, phone and textarea. The
   selects were unaffected because Chrome's own stylesheet already
   makes a select border-box, which is why only some controls looked
   wrong.

   That 31px is the "stray vertical bar". The left column's input
   overran its cell by more than the 1.25rem grid gap, so the rounded
   right end of Full Name came to rest immediately left of Email, and
   the right end of Phone immediately left of the travel toggle. A
   light hairline the height of an input, on the right column only,
   because only the right column has something overflowing into it.

   Scoped to the two wrappers rather than to a page, so it travels with
   the form: the inline section and the floating CTA modal render the
   same fragment.
   ================================================================== */

.evptb,
.evptb *,
.evptb *::before,
.evptb *::after,
.evptb-modal-overlay,
.evptb-modal-overlay *,
.evptb-modal-overlay *::before,
.evptb-modal-overlay *::after {
	box-sizing: border-box;
}

.evptb {
	padding: 1rem 0 5rem;
}

.evptb-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.evptb-trust-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.evptb-trust-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 50%;
	color: var(--wp--preset--color--gold);
}

.evptb-trust-icon svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
   THE HEADER SITS BESIDE THE FORM, not above it. Both were full width
   blocks, the header capped at 87.5rem and the card centred at 52rem,
   so the copy explaining the form was stacked above a card floating
   alone in the middle of the page. The capture has one grid at 1fr and
   1.4fr.

   The header and card keep their own rules for the stacked case; the
   grid overrides the widths and padding it now owns.

   THE COLUMNS START TOGETHER, THEY ARE NOT CENTRED AGAINST EACH OTHER.
   The capture centres them and this rule used to as well. Beside a form
   that is a good deal taller than four lines of copy, what centring
   actually produced was a header floating at mid height: it began below
   the top of the card and ended above the bottom of it, which reads as
   a small block adrift rather than as the heading of the thing next to
   it. Starting them together puts the eyebrow on the card's top edge,
   which is what it is the heading of. The eyebrow carries no top
   margin, so there is nothing between the two but the grid.

   Only the horizontal axis is left to the tablet block below, where the
   two columns become one and centring is the right answer again.
*/
/*
 * 87.5rem, WHICH IS WHAT EVERY OTHER SECTION ON THIS PAGE USES. This was
 * 75rem, so the booking section sat 200px narrower than the pricing
 * table above it and the FAQ below it, with the same padding either
 * side, which read as the page pinching in at the one section that asks
 * for something. The shared header alignment rule further up this file
 * is the reference: max-width 87.5rem, padding 0 clamp(1.25rem, 5vw,
 * 5rem). Matching both means the eyebrow here starts on the same
 * vertical line as the eyebrow of every section around it.
 *
 * The 1fr 1.4fr split is untouched. It is the thing that makes this
 * section read as a form with a case beside it rather than another
 * stack, and the extra 200px goes to both columns in proportion: the
 * header column grows from 413px to 497px at 1440, which is what stops
 * the title wrapping where the wider sections do not.
 */
.evptb-inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 4rem;
	align-items: start;
	/*
	 * THE PADDING HAS TO BE ADDED BACK, because this section sets
	 * border-box on itself and everything inside it while the shared
	 * header rule those other sections use is content-box. The same
	 * declared 87.5rem therefore means two different things: 87.5rem of
	 * content for pricing and the FAQ, 87.5rem including the padding
	 * here. A plain 87.5rem closed most of the gap and still left 160px
	 * of it at 1920. Adding the padding to the cap makes the content box
	 * 87.5rem in both, so the eyebrow here starts on the same vertical
	 * line as the eyebrow above it at every width.
	 */
	max-width: calc(87.5rem + 2 * clamp(1.25rem, 5vw, 5rem));
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/*
   LEFT ALIGNED ON DESKTOP. I put text-align: center here as a base
   rule and that was wrong: in the capture it is not a base rule at all,
   it lives in @media (min-width: 769px) and (max-width: 1024px)
   alongside the eyebrow centring and the single 680px column. It is
   what the header does when the two columns collapse, not what it does
   beside the form.
*/
.evptb-inner .evptb-header {
	max-width: none;
	margin: 0;
	padding: 0;
}

.evptb-inner .evptb-card {
	max-width: none;
	margin: 0;
}

.evptb-card {
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1.25rem;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 100%);
}

/*
   THE TABLET COLLAPSE, verbatim from the capture. One 680px column,
   40px gap, and the header centres itself only here: the eyebrow's
   leading rule centres with it, the standfirst takes auto margins and
   the trust list turns into a centred wrapping row.

   This is the block I previously hoisted into the base rule, which
   left the desktop header centred beside the form when it should be
   flush left.
*/
@media (min-width: 769px) and (max-width: 1024px) {
	.evptb-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		max-width: 42.5rem;
	}

	.evptb-inner .evptb-header {
		text-align: center;
	}

	.evptb-inner .evptb-eyebrow {
		justify-content: center;
	}

	.evptb-inner .evptb-descriptor {
		margin-left: auto;
		margin-right: auto;
	}

	.evptb-inner .evptb-trust {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.5rem;
	}
}

/*
   ONE COLUMN BELOW 768, left aligned. The capture has no rule for this
   because Elementor stacked it. Header first: it says what the form is
   for and what happens after you send it, which is what a visitor
   needs before deciding to fill it in.
*/
@media (max-width: 768px) {
	.evptb-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.evptb-noscript {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(184, 98, 27, 0.5);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.evptb-noscript a {
	color: var(--wp--preset--color--gold);
}

/* ---------- The form ---------- */

.evptb-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.evptb-row--full {
	grid-template-columns: 1fr;
}

.evptb-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.evptb-label {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evptb-required {
	color: var(--wp--preset--color--rust);
}

.evptb-input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	color: #fff;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.evptb-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evptb-input:hover {
	border-color: rgba(255, 255, 255, 0.24);
}

.evptb-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-color: transparent;
}

.evptb-input[aria-invalid='true'] {
	border-color: var(--ev-form-error);
}

/* The native arrow is replaced rather than left to the platform,
   because on a dark ground the system control paints its own light
   background and breaks the row. */
.evptb-select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4C4A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.evptb-select option {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evptb-select option:disabled {
	color: rgba(255, 255, 255, 0.35);
}

.evptb-textarea {
	resize: vertical;
	min-height: 5.5rem;
	line-height: 1.6;
}

/* A date input's own indicator is a dark glyph on a dark ground.
   Inverting it is the only way to see it without replacing the whole
   control. */
.evptb-input[type='date']::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.6;
	cursor: pointer;
}

.evptb-field-error {
	display: block;
	min-height: 1rem;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--ev-form-error);
}

/* ---------- The scheduled / private toggle ----------

   Only ever on the page when the tour has both. There is no rule here
   that hides it, because in a single mode state it is not rendered. */

/* No bottom margin. It sits in its own row now and the row spaces it. */
.evptb-toggle {
	margin: 0;
	padding: 0;
	border: 0;
}

/*
   Capped. The toggle's row is full width, and a two option segmented
   control stretched across 52rem reads as a banner rather than a
   control.
*/
.evptb-toggle-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 26rem;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.25);
}

.evptb-toggle-option {
	margin: 0;
	cursor: pointer;
}

/* The radio itself is the control and stays in the accessibility tree
   and in the tab order. It is only visually replaced by the label
   beside it, which is why this is not display:none. */
.evptb-toggle-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.evptb-toggle-option span {
	display: block;
	padding: 0.6rem 0.5rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	transition: background 0.2s ease, color 0.2s ease;
}

.evptb-toggle-option input:checked + span {
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evptb-toggle-option input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptb-toggle-option:hover input:not(:checked) + span {
	color: rgba(255, 255, 255, 0.85);
}

/* The date panes. The inactive one carries hidden and disabled from
   the markup; [hidden] is already handled globally, so there is
   nothing to declare for the closed state. */
.evptb-pane {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.evptb-total {
	display: block;
	margin: 0 0 1.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gold);
}

.evptb-turnstile-wrap {
	margin-bottom: 1.25rem;
}

.evptb-error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--ev-form-error);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: #fff;
}

.evptb-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.95rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evptb-submit:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evptb-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evptb-submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* ---------- The success panel ---------- */

.evptb-done {
	padding: 2rem 1rem;
	text-align: center;
}

.evptb-done:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.evptb-done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 50%;
	font-size: 1.25rem;
	color: var(--wp--preset--color--gold);
}

.evptb-done-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
}

.evptb-done-text {
	max-width: 30rem;
	margin: 0 auto;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ================================================
   THE BOOKING MODAL
   The floating button itself reuses .ev-floating-cta.
   ================================================ */

.evptb-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) 1rem;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.8);
}

.evptb-modal {
	position: relative;
	width: 100%;
	max-width: 40rem;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--bg-deep);
}

.evptb-modal-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evptb-modal-close svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evptb-modal-close:hover {
	border-color: rgba(212, 196, 168, 0.4);
	color: #fff;
}

.evptb-modal-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptb-modal-header {
	margin-bottom: 1.75rem;
	padding-right: 2.5rem;
}

.evptb-modal-eyebrow {
	margin: 0 0 0.625rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

.evptb-modal-title {
	margin: 0 0 0.625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 3.5vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evptb-modal-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evptb-modal-desc {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.45);
}

/* ================================================
   EXPLORE THE PLACES YOU'LL VISIT
   ================================================ */

.evptl {
	padding: 1rem 0 5rem;
}

.evptl-country-wrap {
	max-width: 87.5rem;
	margin: 0 auto 2.5rem;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evptl-country {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 1.25rem;
	text-decoration: none;
	isolation: isolate;
}

.evptl-country-img {
	display: block;
	width: 100%;
	height: clamp(14rem, 32vw, 22rem);
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evptl-country-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.1) 100%);
}

.evptl-country-content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.evptl-country-rule {
	display: block;
	width: 2.5rem;
	height: 0.125rem;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--rust);
}

.evptl-country-name {
	margin: 0 0 0.625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.1;
	color: #fff;
}

.evptl-country-desc {
	max-width: 40rem;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--ev-soft);
}

.evptl-country-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptl-country-cta svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evptl-country:hover .evptl-country-img {
	transform: scale(1.04);
}

.evptl-country:hover .evptl-country-cta svg {
	transform: translate(0.15rem, -0.15rem);
}

.evptl-country:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The locations strip ---------- */

.evptl-carousel-wrap {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evptl-carousel {
	position: relative;
}

.evptl-track {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.evptl-track::-webkit-scrollbar {
	display: none;
}

.evptl-item {
	flex: 0 0 20rem;
	max-width: 20rem;
	scroll-snap-align: start;
}

.evptl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.025);
	text-decoration: none;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.evptl-card:hover {
	border-color: rgba(212, 196, 168, 0.35);
	transform: translateY(-0.25rem);
}

.evptl-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evptl-card-img {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.evptl-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.evptl-card:hover .evptl-card-img img {
	transform: scale(1.05);
}

.evptl-card-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.625rem;
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.65);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptl-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: space-between;
	padding: 1.125rem 1.25rem 1.25rem;
}

.evptl-card-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	line-height: 1.3;
	color: #fff;
}

.evptl-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evptl-card-cta svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evptl-arrow {
	position: absolute;
	top: 35%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.9);
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.evptl-arrow.prev {
	left: calc(clamp(1.25rem, 5vw, 5rem) - 1.375rem);
}

.evptl-arrow.next {
	right: calc(clamp(1.25rem, 5vw, 5rem) - 1.375rem);
}

.evptl-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evptl-arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evptl-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptl-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ================================================
   FREQUENTLY ASKED QUESTIONS
   ================================================ */

.evptf {
	padding: 1rem 0 5rem;
}

.evptf-groups {
	display: grid;
	gap: 3rem;
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evptf-group-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--wp--preset--color--gold);
}

.evptf-group-intro {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.4);
}

.evptf-items {
	display: grid;
	gap: 0.625rem;
}

.evptf-item {
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s ease;
}

.evptf-item:hover {
	border-color: rgba(212, 196, 168, 0.28);
}

/* The heading exists so the questions are a real document outline.
   It carries none of the heading styling: the button inside it is the
   visible thing. */
.evptf-question-heading {
	margin: 0;
	font: inherit;
}

.evptf-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 1.25rem;
	border: 0;
	border-radius: 0.75rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.925rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	color: #fff;
	cursor: pointer;
}

.evptf-question:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

.evptf-question[aria-expanded='true'] {
	color: var(--wp--preset--color--gold);
}

/* Takes the slack so a long question wraps inside the button instead of
   pushing the icon off the end of the row. */
.evptf-question-text {
	flex: 1 1 auto;
	min-width: 0;
}

.evptf-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 50%;
	color: var(--wp--preset--color--gold);
	transition: transform 0.3s ease, background 0.3s ease;
}

.evptf-icon svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* The plus becomes a minus by rotation, so there is one icon in the
   markup rather than two swapped by script. The vertical stroke turns
   onto the horizontal one and disappears behind it. */
.evptf-question[aria-expanded='true'] .evptf-icon {
	transform: rotate(45deg);
	background: rgba(184, 98, 27, 0.2);
}

/* The open and close animation. grid-template-rows going 0fr to 1fr
   animates to the content's real height without anything measuring it
   in JavaScript. The closed state is the hidden attribute, which the
   global [hidden][hidden] rule already handles, so this rule only ever
   applies to a panel that is on its way open or shut. */
.evptf-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.evptf-answer.is-open {
	grid-template-rows: 1fr;
}

/*
 * THE GUTTER IS THE CONTAINER'S, NOT EACH ELEMENT'S
 *
 * It used to be written onto .evptf-answer-inner p and onto ul and ol,
 * which aligned exactly those three and nothing else. The answer is a
 * wysiwyg field, so it can also hold a heading, a blockquote, a table or
 * a figure, and every one of those sat flush against the side of the
 * panel while the paragraphs beside it were indented. Moving it here
 * lines all of them up with the question above, whose own padding is
 * this same 1.25rem, and it cannot be forgotten for the next element
 * type someone types into the editor.
 *
 * It also fixes a bug the per element rules were hiding. The
 * > :last-child rule below zeroes the bottom margin of whatever ends
 * the answer, and it outranks .evptf-answer-inner ul on specificity, so
 * an answer ending in a list had no space under it at all. Only an
 * answer ending in a paragraph was spaced, by a p:last-child rule doing
 * the container's job. The container does that job now.
 */
.evptf-answer-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 1.25rem;
}

/*
 * The divider and the room around it exist only while the panel is open.
 * On a zero height grid row a border still paints, which would leave a
 * hairline under every closed question. The same reasoning, and the same
 * hook, as the FAQ page's own accordion.
 *
 * Opening adds height, and the animation is on the outer grid row, so it
 * animates to the taller figure rather than fighting it.
 */
.evptf-answer.is-open .evptf-answer-inner {
	padding-top: 1.125rem;
	padding-bottom: 1.25rem;
	border-top: 1px solid rgba(212, 196, 168, 0.1);
}

/*
 * Children carry the rhythm between themselves and nothing else. The
 * first and last edges are the container's, so an element arriving with
 * a margin of its own cannot double the gap or close it.
 */
.evptf-answer-inner > :first-child {
	margin-top: 0;
}

.evptf-answer-inner > :last-child {
	margin-bottom: 0;
}

.evptf-answer-inner p {
	margin: 0 0 0.875rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.55);
}

.evptf-answer-inner a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Left padding is the list marker's indent now, not the panel gutter. */
.evptf-answer-inner ul,
.evptf-answer-inner ol {
	margin: 0 0 0.875rem;
	padding: 0 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.55);
}

.evptf-answer-inner li + li {
	margin-top: 0.375rem;
}

/* ================================================
   PASS 3: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evptl-item {
		flex: 0 0 18rem;
		max-width: 18rem;
	}
}

@media (max-width: 768px) {
	.evptb-row {
		grid-template-columns: 1fr;
	}

	.evptb-trust {
		gap: 0.75rem 1.25rem;
	}

	.evptl-item {
		flex: 0 0 75vw;
		max-width: 75vw;
	}

	/* Off the card edges and into the gutter is not available at this
	   width, so the arrows come inside the track. */
	.evptl-arrow.prev {
		left: 0.25rem;
	}

	.evptl-arrow.next {
		right: 0.25rem;
	}

	.evptf-groups {
		gap: 2.25rem;
	}
}

@media (max-width: 480px) {
	.evptb,
	.evptl,
	.evptf {
		padding-bottom: 3.5rem;
	}

	.evptb-card {
		padding: 1.25rem;
		border-radius: 1rem;
	}

	.evptb-trust {
		flex-direction: column;
	}

	.evptb-modal {
		padding: 1.25rem;
	}

	/*
	   FULL SCREEN ON A PHONE, AND ONLY THE DEPARTURES ONE. A booking
	   form is eight controls and a notes box, which at this width is
	   taller than the viewport whatever the gutter is, so the gutter
	   and the rounded corners only cost usable width.

	   PHONES ONLY, because this block is the 480 breakpoint. Above it
	   the modal stays the inset card it is everywhere else, with its
	   border and corners, which at 700px and up is the right shape.

	   Scoped by data-ev-form-action, which is on the departures overlay
	   and nowhere else, because the tour page's modal is out of scope
	   here and keeps the inset card at every width. The overlay is
	   already overflow-y: auto, so the form scrolls inside this.
	*/
	.evptb-modal-overlay[data-ev-form-action] {
		padding: 0;
	}

	/*
	   max-width is cleared as well. It is 40rem on the card, which is
	   wider than any viewport this block applies to, so it changes
	   nothing today: it is here so that moving this breakpoint up
	   cannot quietly produce a half-width panel with squared corners.
	*/
	.evptb-modal-overlay[data-ev-form-action] > .evptb-modal {
		max-width: none;
		min-height: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	.evptb-modal-header {
		margin-bottom: 1.25rem;
	}

	.evptf-question {
		padding: 0.9rem 1rem;
		font-size: 0.875rem;
	}

	/* Follows the question down to a 1rem gutter, and on the container
	   so every element type follows with it. The list rule that used to
	   sit here is gone: a list's left padding is only its marker indent
	   now, which does not change with the viewport. */
	.evptf-answer-inner {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ================================================
   PASS 3: REDUCED MOTION AND CONTRAST
   ================================================ */

@media (prefers-reduced-motion: reduce) {
	.evptb-submit,
	.evptb-input,
	.evptb-toggle-option span,
	.evptl-card,
	.evptl-card-img img,
	.evptl-country-img,
	.evptl-country-cta svg,
	.evptl-arrow,
	.evptf-item,
	.evptf-icon,
	.evptf-answer {
		transition: none;
	}

	.evptb-submit:hover,
	.evptl-card:hover,
	.evptl-card:hover .evptl-card-img img,
	.evptl-country:hover .evptl-country-img,
	.evptl-country:hover .evptl-country-cta svg {
		transform: none;
	}

	.evptl-track {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evptb-card,
	.evptb-input,
	.evptb-toggle-options,
	.evptl-card,
	.evptf-item {
		border-color: #fff;
	}

	.evptb-trust-item,
	.evptb-descriptor,
	.evptl-descriptor,
	.evptf-descriptor,
	.evptf-group-intro,
	.evptf-answer-inner p,
	.evptf-answer-inner ul,
	.evptf-answer-inner ol {
		color: #fff;
	}
}

/* ================================================
   DESTINATION PAGE: BESPOKE TOURS
   Rebuilt from salvage/destination-page/03-bespoke-tours.html, which is
   bespoke_tours v3. Dropped on the way in: the uniqid class prefix, the
   width:100vw / margin-left:calc(-50vw + 50%) full bleed hack on the
   mosaic, and roughly forty !important.
   ================================================================== */

.evpbt {
	padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
	background: var(--wp--preset--color--bg-deep);
}

.evpbt-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- Hero ---------- */

.evpbt-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.evpbt-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.4rem 0.9rem;
	/*
	 * The rust tint and the rust border are the capture's, not the
	 * parchment border this had. Both are in
	 * salvage/destination-page/03-bespoke-tours.html.
	 */
	background: rgba(184, 98, 27, 0.12);
	border: 1px solid rgba(184, 98, 27, 0.28);
	border-radius: 3.125rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* The rust dot before the label. Decorative, so it is a pseudo-element
   rather than a span the screen reader would have to skip. */
.evpbt-pill::before {
	content: '';
	flex-shrink: 0;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
}

.evpbt-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpbt-title em {
	display: block;
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpbt-hero-desc {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.5);
}

/*
 * A bordered frame with the three stats divided inside it, which is what
 * the capture has. This was a flex row under a single top rule, so the
 * numbers floated with nothing holding them together.
 */
.evpbt-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 2.25rem;
	padding: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
}

.evpbt-stat {
	padding: 1.125rem 0.875rem;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.evpbt-stat:last-child {
	border-right: 0;
}

.evpbt-stat-num {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.65rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.evpbt-stat-label {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.evpbt-hero-btn,
.evpbt-bottom-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.75rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evpbt-hero-btn svg,
.evpbt-bottom-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpbt-hero-btn:hover,
.evpbt-bottom-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evpbt-hero-btn:hover svg,
.evpbt-bottom-btn:hover svg {
	transform: translateX(0.2rem);
}

.evpbt-hero-btn:focus-visible,
.evpbt-bottom-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The stacked visual ---------- */

.evpbt-visual {
	position: relative;
	/*
	 * 34.375rem is the capture's 550px. The three cards are positioned
	 * against this box, so it has to be tall enough for the stagger; at
	 * the old 26rem they overlapped into a single slab. It steps down
	 * with the viewport the way the capture's own breakpoints did.
	 */
	height: clamp(16rem, 34vw, 34.375rem);
}

.evpbt-img-stack {
	position: absolute;
	overflow: hidden;
	/* 20px and the capture's two layer shadow: a deep drop plus a hairline
	   ring, which is what separates the cards where they overlap. */
	border-radius: 1.25rem;
	box-shadow:
		0 1.875rem 5rem rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.05);
}

.evpbt-img-stack img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * THE STAGGER IS THE CAPTURE'S, AS PROPORTIONS.
 *
 * 03-bespoke-tours.html places these at fixed pixel sizes inside a
 * 550px tall column: 340x420 at the top left, 280x340 dropped 80px and
 * pushed right, and 200x240 sitting on the bottom edge inset from the
 * left, each with a degree or two of rotation. Those are kept as
 * percentages of the column so the arrangement survives a narrower
 * panel instead of overflowing it.
 *
 * The z-order is the capture's too, and it is not the source order:
 * the small bottom card sits above both of the larger ones, which is
 * what makes the group read as a stack rather than a row.
 */
.evpbt-img-1 {
	top: 0;
	left: 0;
	width: 53%;
	height: 76%;
	z-index: 3;
	transform: rotate(-2deg) scale(1.02);
}

.evpbt-img-2 {
	top: 14.5%;
	right: 0;
	width: 44%;
	height: 62%;
	z-index: 2;
	transform: rotate(1deg) translateY(-0.625rem);
}

.evpbt-img-3 {
	bottom: 0;
	left: 19%;
	width: 31%;
	height: 44%;
	z-index: 4;
	transform: rotate(2deg) scale(1.03);
}

/* ---------- Experiences header ---------- */

.evpbt-experiences {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.evpbt-exp-header {
	margin-bottom: 2.5rem;
	text-align: center;
}

.evpbt-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpbt-eyebrow::before,
.evpbt-eyebrow::after {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpbt-exp-title {
	margin: 0 0 0.625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evpbt-exp-subtitle {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.4);
}

/* ================================================
   THINGS TO DO: THE HOUSE SECTION HEADER

   Taken from .evpdw (Flora and Fauna) and .evpwtg (When to Go), which
   sat on this same destination page and were identical to each other:
   an eyebrow left aligned with ONE rule before it, a Playfair title
   with a rust italic accent, and a quiet descriptor beneath.

   ONLY THIS COPY OF THAT HEADER IS LEFT ON THE DESTINATION PAGE.
   .evpwtg went with the When to Go section in the October 2026
   redesign, .evpds was rewritten in brief 16 and no longer uses
   italics, and .evpdw now renders only on the tour page.

   The header above was the only one on the page centred, with a rule on
   both sides of its eyebrow and a smaller lede in a fainter grey, which
   is why it read as a different kind of component.

   A MODIFIER, NOT A REWRITE OF THOSE RULES. This part renders locations
   too, through parts/section-location-bespoke.php, and a location has to
   keep the header it has. So the base rules are left exactly as they are
   and everything here hangs off a class only a destination is given. The
   thirteen destinations still on the carousel share this header and are
   restyled with it, which is intended.

   IT STAYS AN h3 AND IS SIZED AS A SUBSECTION. The section own h2,
   "Experience {Country}, Your Way", is clamp(2.2rem, 4.4vw, 3.4rem)
   directly above, and the tiles below are h4 with the experiences h5. So
   this takes the house treatment one step down from the
   clamp(2.2rem, 4.5vw, 3.6rem) an h2 gets: same family, same weight,
   same accent, visibly subordinate.
   ================================================ */

.evpbt-exp-header--section {
	text-align: left;
}

/* One rule, before the words, which is what the house eyebrows do. */
.evpbt-exp-header--section .evpbt-eyebrow {
	justify-content: flex-start;
	margin: 0 0 1.25rem;
}

.evpbt-exp-header--section .evpbt-eyebrow::after {
	display: none;
}

.evpbt-exp-header--section .evpbt-eyebrow::before {
	flex-shrink: 0;
}

.evpbt-exp-header--section .evpbt-exp-title {
	margin: 0 0 0.875rem;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.08;
}

.evpbt-exp-header--section .evpbt-exp-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/* .evpwtg-descriptor's values, including the measure; that rule is
   gone with the When to Go section, so these numbers are the record. */
.evpbt-exp-header--section .evpbt-exp-subtitle {
	max-width: 28.75rem;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.38);
}

/* ---------- Experience cards ---------- */

.evpbt-carousel {
	position: relative;
}

.evpbt-track {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.evpbt-track::-webkit-scrollbar {
	display: none;
}

.evpbt-item {
	flex: 0 0 calc((100% - 2.5rem) / 3);
	max-width: calc((100% - 2.5rem) / 3);
	scroll-snap-align: start;
	display: flex;
}

.evpbt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.025);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 0.4s ease, border-color 0.35s ease, box-shadow 0.4s ease;
}

.evpbt-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 4;
	height: 0.125rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	opacity: 0;
	transition: opacity 0.35s ease;
}

.evpbt-card:hover::before,
.evpbt-card:focus-visible::before {
	opacity: 1;
}

.evpbt-card:hover {
	transform: translateY(-0.5rem);
	border-color: rgba(212, 196, 168, 0.24);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6);
}

.evpbt-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpbt-card-photo {
	position: relative;
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: rgba(255, 255, 255, 0.04);
}

.evpbt-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evpbt-card:hover .evpbt-card-photo img {
	transform: scale(1.05);
}

/* The gradient that carries the photo into the body below it. */
.evpbt-card-photo::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 3rem;
	background: linear-gradient(to bottom, transparent, rgba(17, 16, 16, 0.9));
	pointer-events: none;
}

.evpbt-card-num {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 3;
	padding: 0.3rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0.375rem;
	background: rgba(0, 0, 0, 0.4);
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	color: #fff;
}

.evpbt-card-icon {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.42);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.evpbt-card-icon svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: none;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2;
	stroke-linecap: round;
}

.evpbt-card:hover .evpbt-card-icon {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	transform: rotate(45deg);
}

.evpbt-card-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.375rem 1.5rem 1.625rem;
}

.evpbt-card-title {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
}

.evpbt-card-divider {
	display: block;
	width: 2rem;
	height: 0.125rem;
	margin-bottom: 0.75rem;
	border-radius: 0.125rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	transition: width 0.35s ease;
}

.evpbt-card:hover .evpbt-card-divider {
	width: 3.25rem;
}

.evpbt-card-desc {
	display: block;
	margin-bottom: 1.25rem;
	font-size: 0.825rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.5);
}

.evpbt-card-cta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpbt-card-cta-line {
	display: block;
	width: 1.25rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--gold);
	transition: width 0.35s ease;
}

.evpbt-card:hover .evpbt-card-cta-line {
	width: 2.25rem;
}

.evpbt-card-cta svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Carousel controls ---------- */

.evpbt-arrow {
	position: absolute;
	top: 40%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.92);
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.evpbt-arrow.prev {
	left: -1.375rem;
}

.evpbt-arrow.next {
	right: -1.375rem;
}

.evpbt-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpbt-arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpbt-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpbt-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.evpbt-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.evpbt-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(212, 196, 168, 0.28);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}

.evpbt-dot.is-active {
	width: 1.5rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--rust);
}

.evpbt-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Bottom call to action ---------- */

.evpbt-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 100%);
}

.evpbt-bottom-title {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpbt-bottom-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpbt-bottom-sub {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.45);
}

/* ================================================
   BESPOKE: MODALS
   ================================================ */

.evpbt-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) 1rem;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.8);
}

.evpbt-modal {
	position: relative;
	width: 100%;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--bg-deep);
}

.evpbt-booking {
	max-width: 38rem;
}

.evpbt-detail {
	max-width: 52rem;
}

.evpbt-modal-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.85);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evpbt-modal-close svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evpbt-modal-close:hover {
	border-color: rgba(212, 196, 168, 0.4);
	color: #fff;
}

.evpbt-modal-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Detail modal ---------- */

.evpbt-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.evpbt-detail-img {
	position: relative;
	min-height: 18rem;
	background: rgba(255, 255, 255, 0.04);
}

.evpbt-detail-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpbt-detail-content {
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.evpbt-detail-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpbt-detail-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpbt-detail-divider {
	display: block;
	width: 2.5rem;
	height: 0.125rem;
	margin-bottom: 1.25rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
}

.evpbt-detail-desc {
	margin: 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.55);
}

.evpbt-detail-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 0.5rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.evpbt-detail-cta svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: currentColor;
}

.evpbt-detail-cta:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--bg-deep);
}

.evpbt-detail-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Enquiry modal ---------- */

.evpbt-modal-header {
	margin-bottom: 1.25rem;
	padding-right: 2.5rem;
}

.evpbt-modal-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpbt-modal-tag {
	display: inline-block;
	margin: 0.75rem 0 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(184, 98, 27, 0.5);
	border-radius: 3.125rem;
	background: rgba(184, 98, 27, 0.14);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
}

.evpbt-fg {
	margin-bottom: 1rem;
}

.evpbt-fl {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evpbt-req {
	color: var(--wp--preset--color--rust);
}

.evpbt-fi {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	color: #fff;
	transition: border-color 0.2s ease;
}

.evpbt-fi::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evpbt-fi:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-color: transparent;
}

.evpbt-fs {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4C4A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.evpbt-fs option {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evpbt-ft {
	resize: vertical;
	min-height: 5rem;
	line-height: 1.6;
}

.evpbt-form-error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--ev-form-error);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: #fff;
}

.evpbt-form-btns {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1.5rem;
}

.evpbt-btn {
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.evpbt-btn-primary {
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpbt-btn-primary:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpbt-btn-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.evpbt-btn-secondary {
	border-color: rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
}

.evpbt-btn-secondary:hover {
	border-color: rgba(212, 196, 168, 0.5);
	color: #fff;
}

.evpbt-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpbt-done {
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.evpbt-done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 50%;
	font-size: 1.25rem;
	color: var(--wp--preset--color--gold);
}

.evpbt-done-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
}

.evpbt-done-text {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ================================================
   BESPOKE: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evpbt-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpbt-visual {
		min-height: 20rem;
	}

	.evpbt-item {
		flex: 0 0 calc((100% - 1.25rem) / 2);
		max-width: calc((100% - 1.25rem) / 2);
	}

	/* Off the card edges is not available once the gutter narrows, so
	   the arrows come inside the track. */
	.evpbt-arrow.prev {
		left: 0.25rem;
	}

	.evpbt-arrow.next {
		right: 0.25rem;
	}

	.evpbt-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpbt-detail-img {
		min-height: 14rem;
	}
}

@media (max-width: 768px) {
	.evpbt-item {
		flex: 0 0 82%;
		max-width: 82%;
	}






	.evpbt-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.evpbt-item {
		flex: 0 0 88%;
		max-width: 88%;
	}

	.evpbt-stats {
		gap: 1.25rem 1.75rem;
	}

	.evpbt-form-btns {
		flex-direction: column-reverse;
	}

	.evpbt-btn {
		width: 100%;
	}

}

/* ================================================
   BESPOKE: REDUCED MOTION AND CONTRAST
   ================================================ */

@media (prefers-reduced-motion: reduce) {
	.evpbt-card,
	.evpbt-card::before,
	.evpbt-card-photo img,
	.evpbt-card-divider,
	.evpbt-card-cta-line,
	.evpbt-card-icon,
	.evpbt-arrow,
	.evpbt-dot,
	.evpbt-hero-btn,
	.evpbt-bottom-btn,
	.evpbt-hero-btn svg,
	.evpbt-bottom-btn svg,
	.evpbt-fi,
	.evpbt-btn {
		transition: none;
	}

	.evpbt-card:hover,
	.evpbt-hero-btn:hover,
	.evpbt-bottom-btn:hover,
	.evpbt-card:hover .evpbt-card-photo img,
	.evpbt-card:hover .evpbt-card-icon {
		transform: none;
	}

	.evpbt-track {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evpbt-card,
	.evpbt-fi,
	.evpbt-bottom,
	.evpbt-modal {
		border-color: #fff;
	}

	.evpbt-hero-desc,
	.evpbt-exp-subtitle,
	.evpbt-card-desc,
	.evpbt-bottom-sub,
	.evpbt-detail-desc,
	.evpbt-stat-label {
		color: #fff;
	}
}

/* ================================================
   DESTINATION TOURS LISTING
   /destination/{slug}/tours/. No reference capture exists for this
   route, so nothing here is recovered markup. It is assembled from
   parts the design system already has: the shared section header
   treatment, the .destpg- card, and the gold-on-dark control styling
   the enquiry and booking forms established.
   ================================================================== */

.evpdl-page {
	display: block;
	padding: clamp(6rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
	background: var(--wp--preset--color--bg-deep);
}

.evpdl-page-head,
.evpdl-listing {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- Breadcrumbs ---------- */

.evpdl-crumbs {
	margin-bottom: 1.5rem;
}

.evpdl-crumbs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.4);
}

.evpdl-crumbs-list li + li::before {
	content: '/';
	margin-right: 0.5rem;
	color: rgba(255, 255, 255, 0.25);
}

.evpdl-crumbs-list a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.evpdl-crumbs-list a:hover {
	color: var(--wp--preset--color--gold);
}

.evpdl-crumbs-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpdl-crumbs-list [aria-current='page'] {
	color: var(--wp--preset--color--gold);
}

/* ---------- Head ---------- */

.evpdl-page-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
}

.evpdl-page-intro {
	max-width: 42rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evpdl-page-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.evpdl-page-back svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpdl-page-back:hover svg {
	transform: translateX(-0.2rem);
}

.evpdl-page-back:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Controls ---------- */

.evpdl-controls {
	margin: 2.5rem 0 1.25rem;
	padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem);
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
}

.evpdl-sort {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.evpdl-sort-label {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evpdl-sort-select {
	appearance: none;
	min-width: 14rem;
	padding: 0.6rem 2.25rem 0.6rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background-color: rgba(0, 0, 0, 0.25);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4C4A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.85rem;
	color: #fff;
}

.evpdl-sort-select option {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evpdl-sort-select:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* The panel is open on desktop and collapsed on small screens, decided
   here rather than by script so it is right on first paint. */
.evpdl-filters {
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	padding-top: 1rem;
}

.evpdl-filters-summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	list-style: none;
}

.evpdl-filters-summary::-webkit-details-marker {
	display: none;
}

.evpdl-filters-summary svg {
	width: 0.9rem;
	height: 0.9rem;
	margin-left: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpdl-filters[open] .evpdl-filters-summary svg {
	transform: rotate(180deg);
}

.evpdl-filters-summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpdl-filters-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	font-size: 0.65rem;
	color: #fff;
}

.evpdl-filters-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.25rem 1.75rem;
	padding-top: 1.25rem;
}

.evpdl-facet {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.evpdl-facet-legend {
	padding: 0;
	margin-bottom: 0.625rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evpdl-facet-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Twelve months read as a wrapping row rather than a tall column. */
.evpdl-facet-options--months {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 0.75rem;
}

.evpdl-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
}

.evpdl-check input {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--wp--preset--color--rust);
	cursor: pointer;
}

.evpdl-check:hover {
	color: #fff;
}

.evpdl-check input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpdl-reset {
	justify-self: start;
	align-self: end;
	padding: 0.55rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.evpdl-reset:hover {
	border-color: var(--wp--preset--color--gold);
	color: #fff;
}

.evpdl-reset:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Count ---------- */

.evpdl-count {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

/* ---------- Grid ---------- */

.evpdl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
	transition: opacity 0.2s ease;
}

.is-loading .evpdl-grid {
	opacity: 0.45;
}

/* The card is the shared .destpg-card. The carousel pins it to 20rem so
   the track can scroll; in a grid the cell decides, so the modifier
   releases the three width declarations and nothing else. */
.destpg-card--grid {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	height: 100%;
}

/* ---------- Empty states ---------- */

.evpdl-empty,
.evpdl-noresults {
	max-width: 34rem;
	margin: 3rem auto;
	padding: 2.5rem 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
}

.evpdl-empty-title,
.evpdl-noresults-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
}

.evpdl-empty-text,
.evpdl-noresults-text {
	margin: 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evpdl-empty-btn,
.evpdl-noresults-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpdl-empty-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpdl-empty-btn:hover,
.evpdl-noresults-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpdl-empty-btn:focus-visible,
.evpdl-noresults-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Pagination ---------- */

/* ==================================================================
   THE LISTING HERO: ITS HEIGHT, AND WHERE THE TEXT STOPS

   One hero for /destination/{x}/tours/ and /destination/{x}/tours/{style}/.
   It began on the style pages; the unfiltered listing, which used to
   show a strip of three gallery images beside the text, now renders the
   same thing with the destination's own photograph. The modifiers are
   .evpdl-page--hero on main and .evpdl-page-head--hero on the head, and
   both are absent when there is no picture, which leaves the head the
   plain block it always was.
   ================================================================== */

/*
 * THE IMAGE STARTS AT THE TOP OF THE PAGE AND RUNS UNDER THE HEADER.
 *
 * .evpdl-page carries padding-top: clamp(6rem, 12vw, 9rem), and an earlier
 * attempt replaced it with the header's height, which still left a band of
 * page ground above the photograph. The header is transparent until the
 * visitor scrolls, so there is nothing to clear: the image belongs
 * underneath it, which is what .evpdh does. Zero here, and the clearance
 * moves onto the text block below.
 *
 * This also makes the admin bar a non issue. WordPress pushes the whole
 * document down with a margin on html, so the hero still begins at the top
 * of the page wherever that now is.
 */
.evpdl-page--hero {
	padding-top: 0;
}

/*
 * ONE SCREEN BELOW THE HEADER, CAPPED, WITH A FLOOR.
 *
 * min() so a tall desktop window does not turn the listing's hero into a
 * full screen advertisement, and max() so a short window still leaves the
 * photograph room to read as one. .evpdh uses the same svh with vh behind it
 * pairing, because the large viewport height leaves a phone hero taller than
 * the visible area while the toolbars are showing.
 */
.evpdl-page--hero .evpdl-page-hero {
	display: grid;
	/*
	 * ONE COLUMN BY DEFAULT, AND IT IS DECLARED RATHER THAN IMPLICIT.
	 * minmax(0, 1fr) is a definite track that can shrink below its
	 * content's max-content width, which an implicit auto column cannot.
	 * That is what stops a long line of prose widening the column it is
	 * supposed to be constrained by.
	 */
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	min-height: max(28rem, min(calc(100vh - var(--ev-header-h, 5rem)), 40rem));
	min-height: max(28rem, min(calc(100svh - var(--ev-header-h, 5rem)), 40rem));
}

/*
 * THE HEADER CLEARANCE, ON THE TEXT.
 *
 * padding-top of exactly the header's height, with align-items: center on
 * the hero, centres the text in the area BELOW the header rather than in the
 * hero as a whole. That falls out of the arithmetic: with a head box of
 * content plus one header of padding, centring puts the content's centre at
 * (H + header) / 2, which is also the centre of the region from the header
 * to the bottom of the hero.
 */
.evpdl-page--hero .evpdl-page-head--hero {
	padding-top: var(--ev-header-h, 5rem);
	padding-bottom: 0;
}

/*
 * THE TEXT STOPS BEFORE THE IMAGE, DERIVED FROM THE IMAGE'S OWN WIDTH.
 *
 * The media is the right 58 per cent, so the dark side is the left 42 and
 * the text has to end before it with clear space. A fixed rem cap cannot
 * hold that: the image's left edge tracks the viewport while a rem does not,
 * and at 1920px the old 42rem cap let the text run about 200px under the
 * photograph.
 *
 * WHY THIS WORKS AT EVERY WIDTH. The head is a direct child of the hero, so
 * a percentage in its margin or max-width resolves against the HERO's width,
 * which is the viewport. The page container's left offset is
 * max(0px, (100% - 87.5rem) / 2), the same expression .evpdl-listing's
 * margin: 0 auto produces, so the text's left edge lands exactly where the
 * tour cards below it start. Subtracting that offset from 42% puts the head's
 * right edge exactly on the image's left edge, and the 2rem padding-right
 * holds the clear space inside it.
 *
 * Measured at three widths: text right edge to image left edge is 32px at
 * 1025, 1440 and 1920, and the text's left edge matches the listing's at all
 * three.
 *
 * No viewport units, so the scrollbar cannot make the text and the cards
 * disagree about where the page starts.
 */
@media (min-width: 1025px) {

	/*
	 * THE TEXT COLUMN IS A GRID TRACK, NOT A PERCENTAGE MAX-WIDTH.
	 *
	 * The first attempt capped the head with
	 * max-width: calc(42% - max(0px, (100% - 87.5rem) / 2)) and it did not
	 * bind: the head was a grid item in an implicit auto column, so the
	 * percentage was a cyclic dependency and was treated as auto while the
	 * track was sized. The column then grew to the widest child, and the
	 * lede ran into the photograph.
	 *
	 * Track sizes resolve against the grid container instead, which is the
	 * hero and therefore the viewport, so these are definite:
	 *
	 *   max(0px, (100% - 87.5rem) / 2)  the page container's left margin,
	 *                                   so the text lines up with the cards
	 *   minmax(36rem, 1fr)              the text, never narrower than 36rem
	 *   minmax(0, 58%)                  the image, up to 58% of what is left
	 *
	 * THE IMAGE YIELDS TO THE TEXT FLOOR, WHICH IS WHY THE THIRD TRACK IS A
	 * minmax AND NOT A BARE 58%. 36rem is 576px and 42 per cent of a 1280px
	 * window is 537.6, so a fixed 58 per cent image and a 36rem column cannot
	 * both hold. With a base size of 0 the image track takes up to 58 per
	 * cent of what is left after the text's minimum is met, so below about
	 * 1400px the image is a little narrower and the text keeps its floor,
	 * and above it the image reaches 58 per cent while the text grows past
	 * the floor. Nothing can overflow, because the image track can shrink.
	 *
	 * A grid item cannot exceed its track, so every child of the head is
	 * bounded by the column whatever max-width it inherits, including
	 * .evpdl-page-intro's own 42rem.
	 *
	 * The media is absolutely positioned, so it is out of flow, ignores
	 * these tracks and still bleeds to the right edge at full height. The
	 * third track only reserves the space.
	 */
	.evpdl-page--hero .evpdl-page-hero {
		grid-template-columns:
			max(0px, (100% - 87.5rem) / 2)
			minmax(36rem, 1fr)
			minmax(0, 58%);
	}

	/*
	 * THE IMAGE IS A GRID ITEM HERE, NOT AN ABSOLUTE BOX.
	 *
	 * It was position: absolute with width: 58%, which put it out of flow and
	 * made it ignore the tracks. Real Chrome caught what arithmetic did not:
	 * adding the 36rem floor widened the text track while the image stayed at
	 * 42 per cent of the viewport, so at 1025 the text ran 107px into the
	 * picture. One split cannot be described by two rules without drifting.
	 *
	 * As a grid item it takes the third track, so the text column and the
	 * image are the same decision. It still reaches the hero's right edge,
	 * because the hero is full width with no padding, and align-self: stretch
	 * gives it the full row height against the hero's align-items: center.
	 */
	.evpdl-page--hero .evpdl-page-hero-media {
		position: relative;
		grid-column: 3;
		grid-row: 1;
		align-self: stretch;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
	}

	.evpdl-page--hero .evpdl-page-head--hero {
		grid-column: 2;
		grid-row: 1;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		padding-right: 2rem;
	}

	/*
	 * The 42rem cap from the earlier commit is redundant now that the column
	 * itself is capped, and it would stop the title using the full width of
	 * the dark side. The title wraps instead, which is the point.
	 */
	.evpdl-page--hero .evpdl-page-head--hero > .evpdl-crumbs,
	.evpdl-page--hero .evpdl-page-head--hero > .evpdl-page-title,
	.evpdl-page--hero .evpdl-page-head--hero > .evpdl-page-intro,
	.evpdl-page--hero .evpdl-page-head--hero > .evpdl-page-back {
		max-width: none;
	}
}

@media (max-width: 1024px) {

	/*
	 * Unchanged: the image sits behind the content with the vertical scrim
	 * defined further up. Only the vertical room is set here, because
	 * centred text over a photograph needs its edges kept clear.
	 */
	.evpdl-page--hero .evpdl-page-head--hero {
		grid-column: 1;
		padding-bottom: 3.5rem;
	}
}

/* ==================================================================
   THE LISTING HERO: THE PHOTOGRAPH
   ================================================================== */

/*
 * The page continues the picture the visitor came from on the destination
 * page (the style's own on a style page, the destination's hero on the
 * listing), filling the right of the hero to the viewport edge.
 *
 * NO VIEWPORT UNITS. This project removed the 100vw breakout idiom on
 * purpose, and main.css still has zero live 100vw declarations. So the
 * wrapper is full width because it is a plain block in <main>, and the media
 * is a PERCENTAGE of it, which reaches the viewport edge with nothing that
 * can disagree with the scrollbar.
 *
 * .evpdl-page-head keeps its own max-width, centring and padding, so the
 * text column is exactly where it was.
 */
.evpdl-page-hero {
	position: relative;
}

/*
 * 58% rather than half, measured against the text column this replaced: the
 * old strip layout gave the text minmax(0, 42rem) and the pictures the rest,
 * which at 1440px is about 42.5% of the viewport and at 1920px about 44%.
 * 58 leaves the fade room to finish before it reaches the text.
 */
.evpdl-page-hero-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
	pointer-events: none;
}

/*
 * THE FADE IS THE HOUSE ONE, copied from .evpdh-media rather than tuned
 * again. The same stops are already in the homepage hero, the destinations
 * hero, the about hero and the giving back hero, and a seventh variant would
 * be a seventh thing to keep in step.
 */
.evpdl-page-hero-media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.85) 4%,
		rgba(17, 16, 16, 0.30) 12%,
		rgba(17, 16, 16, 0.06) 22%,
		transparent 35%);
}

/* The bottom lift, also .evpdh-media's, so the page ground meets the image. */
.evpdl-page-hero-media::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 35%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.50) 0%, transparent 100%);
}

.evpdl-page-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * THE PAGE BOX WITHOUT ITS BOTTOM PADDING, for a page whose hero is
 * followed by a section that brings its own: the tours page's curated
 * grid, the news archive's list. The listings keep the padding because
 * their cards sit directly in the box.
 */
.evpdl-page--flush {
	padding-bottom: 0;
}

/*
 * THE SLIDES. A hero can carry several pictures stacked in the media box,
 * one visible, crossfading on .is-active the way .evpto-ovmedia-img does;
 * the first carries is-active from the server so the hero is never blank
 * before the script runs. The box already clips and already carries the
 * scrim above them (z-index 1 on its pseudo elements), so a slide needs
 * nothing but its place and its fade. The crossfade is the shared
 * overview-media.js rotator, which reads data-interval off the box. The
 * tours page shows the tours' heroes this way, the news archive the
 * latest articles'.
 */
.evpdl-page-hero-slides .evpdl-page-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.evpdl-page-hero-slides .evpdl-page-hero-slide.is-active {
	opacity: 1;
}

/*
 * The text sits above the image and keeps its own container. No background of
 * its own, because the fade is what separates it from the picture.
 */
.evpdl-page-head--hero {
	position: relative;
	z-index: 5;
}

@media (min-width: 75rem) {

	/*
	 * The text column is held to the 42rem the old strip layout gave it, so
	 * the lede cannot run under the image on a wide screen.
	 */
	.evpdl-page-head--hero > .evpdl-crumbs,
	.evpdl-page-head--hero > .evpdl-page-title,
	.evpdl-page-head--hero > .evpdl-page-intro,
	.evpdl-page-head--hero > .evpdl-page-back {
		max-width: 42rem;
	}
}

/*
 * MOBILE IS .evpdh-media'S ANSWER, not a different one: the image goes behind
 * the content full width with a vertical scrim over it, rather than being
 * hidden or stacked above the text. Same breakpoint, same stops.
 */
@media (max-width: 1024px) {

	.evpdl-page-hero-media {
		position: absolute;
		inset: 0;
		width: auto;
	}

	.evpdl-page-hero-media::before {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.45) 0%,
			rgba(17, 16, 16, 0.40) 30%,
			rgba(17, 16, 16, 0.75) 65%,
			rgba(17, 16, 16, 0.95) 100%);
	}

	.evpdl-page-hero-media::after {
		display: none;
	}
}

/* ==================================================================
   THE TOURS LISTING: KEEP EXPLORING
   ================================================================== */

/*
 * The style pages were dead ends, so this sends a reader sideways to the
 * destination's other styles and to the full listing.
 *
 * CONTAINER IS THE PAGE'S OWN. Identical max-width, centring and padding to
 * .evpdl-page-head and .evpdl-listing, so the section lines up with the cards
 * above it instead of being nearly aligned.
 *
 * NOT A COPY OF THE FULL BLEED STYLES SECTION on the destination page. That
 * one is a choice between three photographs; this is a next step, so it is a
 * quiet row of cards with a rule above it.
 */
.evpdl-more {
	max-width: 87.5rem;
	margin: 4rem auto 0;
	padding: 3rem clamp(1.25rem, 5vw, 5rem) 0;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
}

.evpdl-more-title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

/*
 * The same three, two, one steps .evpdl-grid uses, at the same breakpoints,
 * so the two grids on the page change shape together. minmax(0, 1fr) rather
 * than 1fr is what stops a long tour name forcing the row wider than the
 * viewport.
 */
.evpdl-more-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpdl-more-item {
	display: block;
	min-width: 0;
}

/*
 * The surface is .evpdl-empty's: same border, same radius, same barely there
 * fill. An existing dark ground card treatment rather than a new one.
 */
.evpdl-more-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.evpdl-more-link:hover {
	border-color: rgba(196, 117, 58, 0.55);
	background: rgba(255, 255, 255, 0.04);
}

.evpdl-more-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
}

.evpdl-more-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
}

.evpdl-more-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A card whose place has no picture anywhere, in a row where others do.
 * The same box at the same ratio, in the page's own colours with a faint
 * lift, so the row keeps one shape and the gap is a surface rather than a
 * hole. Not an image: nothing is substituted for the photograph that is
 * not there.
 */
.evpdl-more-media--empty {
	background:
		linear-gradient(135deg, rgba(212, 196, 168, 0.08) 0%, rgba(212, 196, 168, 0.02) 55%, transparent 100%),
		var(--wp--preset--color--bg-deep);
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
}

.evpdl-more-body {
	display: block;
	padding: 1.375rem 1.5rem 1.5rem;
}

.evpdl-more-name {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
	color: #fff;
}

.evpdl-more-link:hover .evpdl-more-name {
	color: var(--wp--preset--color--gold-light);
}

.evpdl-more-meta {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(212, 196, 168, 0.72);
}

.evpdl-more-sep {
	color: rgba(212, 196, 168, 0.4);
}

.evpdl-more-price {
	color: #fff;
}

@media (prefers-reduced-motion: no-preference) {

	.evpdl-more-link:hover {
		transform: translateY(-0.125rem);
	}
}

@media (max-width: 1024px) {

	.evpdl-more-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {

	.evpdl-more {
		margin-top: 3rem;
		padding-top: 2.25rem;
	}

	.evpdl-more-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.evpdl-pagination {
	margin-top: 3rem;
}

.evpdl-pagination-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpdl-pagination-list .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evpdl-pagination-list a.page-numbers:hover {
	border-color: var(--wp--preset--color--gold);
	color: #fff;
}

.evpdl-pagination-list a.page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpdl-pagination-list .page-numbers.current {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpdl-pagination-list .page-numbers.dots {
	border-color: transparent;
	color: rgba(255, 255, 255, 0.35);
}

/* ================================================
   404
   The theme had none, so every missing URL rendered a header and a
   footer with nothing between them.
   ================================================ */

.evp-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: clamp(6rem, 12vw, 9rem) clamp(1.25rem, 5vw, 5rem) clamp(4rem, 8vw, 6rem);
	background: var(--wp--preset--color--bg-deep);
}

.evp-404-inner {
	max-width: 34rem;
	text-align: center;
}

.evp-404-code {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(3.5rem, 10vw, 6rem);
	line-height: 1;
	color: rgba(212, 196, 168, 0.22);
}

.evp-404-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	color: #fff;
}

.evp-404-text {
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evp-404-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

.evp-404-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9rem 1.6rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease;
}

.evp-404-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evp-404-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evp-404-link {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evp-404-btn:focus-visible,
.evp-404-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ================================================
   TOURS LISTING: BREAKPOINTS
   ================================================ */

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

@media (max-width: 768px) {
	.evpdl-sort {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.evpdl-sort-select {
		min-width: 0;
		width: 100%;
	}

	/* Collapsed by default on a phone, where the panel would otherwise
	   push the first card below the fold. */
	.evpdl-filters:not([open]) .evpdl-filters-body {
		display: none;
	}

	.evpdl-filters-body {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

@media (max-width: 480px) {
	.evpdl-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpdl-pagination-list .page-numbers {
		min-width: 2.25rem;
		height: 2.25rem;
		padding: 0 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpdl-grid,
	.evpdl-page-back svg,
	.evpdl-filters-summary svg,
	.evpdl-reset,
	.evpdl-pagination-list .page-numbers,
	.evpdl-empty-btn,
	.evpdl-noresults-btn,
	.evp-404-btn {
		transition: none;
	}

	.evpdl-page-back:hover svg {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evpdl-controls,
	.evpdl-empty,
	.evpdl-noresults,
	.evpdl-pagination-list .page-numbers {
		border-color: #fff;
	}

	.evpdl-page-intro,
	.evpdl-count,
	.evpdl-check,
	.evpdl-empty-text,
	.evpdl-noresults-text,
	.evp-404-text {
		color: #fff;
	}
}

/* ================================================
   SCHEDULED DEPARTURES
   /scheduled-departures/. Rebuilt from
   salvage/scheduled-departures-LIVE-20260511.html. Dropped on the way
   in: the uniqid prefix, the !important on the empty state, and the
   CSS background-image the cards used for photography.
   ================================================================== */

/* Availability colours. Tokens rather than three one-off hex values,
   for the reason the IUCN scale is tokenised: they encode a state, they
   appear on the badge, the dot and the card, and three places is three
   chances for them to drift apart. */
:root {
	--ev-dep-available: #6fcf97;
	--ev-dep-limited: #f1c40f;
	--ev-dep-full: #e07070;
}

.evpsd {
	display: block;
	background: var(--wp--preset--color--bg-deep);
}

/* ---------- Hero ---------- */

.evpsd-hero {
	padding: clamp(7rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
}

.evpsd-hero-inner,
.evpsd-filterbar-inner,
.evpsd-list,
.evpsd-cta-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evpsd-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpsd-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpsd-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
}

.evpsd-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}

.evpsd-hero-sub {
	max-width: 44rem;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

/* ---------- Filter bar ---------- */

.evpsd-filterbar {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
	background: rgba(17, 16, 16, 0.94);
	backdrop-filter: blur(0.75rem);
}

.evpsd-filterbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.evpsd-filter-label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.evpsd-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.evpsd-pill {
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evpsd-pill:hover {
	border-color: rgba(212, 196, 168, 0.45);
	color: #fff;
}

.evpsd-pill.is-active {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpsd-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpsd-toggle {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-left: auto;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

/* The checkbox stays in the tab order and the accessibility tree; only
   its appearance is replaced by the track beside it. */
.evpsd-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.evpsd-toggle-track {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 2.25rem;
	height: 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.25);
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.3);
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpsd-toggle-track::after {
	content: '';
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: transform 0.25s ease, background 0.25s ease;
}

.evpsd-toggle input:checked + .evpsd-toggle-track {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
}

.evpsd-toggle input:checked + .evpsd-toggle-track::after {
	transform: translateX(1rem);
	background: #fff;
}

.evpsd-toggle input:focus-visible + .evpsd-toggle-track {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Month groups ---------- */

.evpsd-list {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.evpsd-month + .evpsd-month {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.evpsd-month-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.14);
}

.evpsd-month-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	color: #fff;
}

.evpsd-month-name em {
	font-style: normal;
	color: var(--wp--preset--color--gold);
}

.evpsd-month-count {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.evpsd-cards {
	display: grid;
	gap: 1rem;
}

/* ---------- Card ---------- */

.evpsd-card {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr) 14rem;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.evpsd-card:hover {
	transform: translateY(-0.25rem);
	border-color: rgba(212, 196, 168, 0.3);
}

.evpsd-card.is-full {
	opacity: 0.55;
}

.evpsd-card.is-full:hover {
	transform: none;
	border-color: rgba(212, 196, 168, 0.12);
}

.evpsd-card-image {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	min-height: 11rem;
}

.evpsd-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evpsd-card:not(.is-full):hover .evpsd-card-image img {
	transform: scale(1.05);
}

.evpsd-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
}

.evpsd-card-country {
	margin: 0;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpsd-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 500;
	line-height: 1.25;
}

.evpsd-card-title a {
	color: #fff;
	text-decoration: none;
}

.evpsd-card-title a:hover {
	color: var(--wp--preset--color--gold);
}

.evpsd-card-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpsd-card-dates {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
}

.evpsd-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
}

.evpsd-card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
}

.evpsd-card-meta-item svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpsd-card-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	border-left: 1px solid rgba(212, 196, 168, 0.1);
}

/* ---------- Availability badge ---------- */

.evpsd-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 3.125rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.evpsd-badge-dot {
	display: block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

.evpsd-badge--available {
	border: 1px solid rgba(111, 207, 151, 0.28);
	background: rgba(111, 207, 151, 0.12);
	color: var(--ev-dep-available);
}

.evpsd-badge--limited {
	border: 1px solid rgba(241, 196, 15, 0.28);
	background: rgba(241, 196, 15, 0.12);
	color: var(--ev-dep-limited);
}

.evpsd-badge--full {
	border: 1px solid rgba(224, 112, 112, 0.28);
	background: rgba(224, 112, 112, 0.12);
	color: var(--ev-dep-full);
}

/* Only the limited dot pulses, and only when motion is welcome. It is
   the one state that is telling you to hurry. */
@media (prefers-reduced-motion: no-preference) {
	.evpsd-badge--limited .evpsd-badge-dot {
		animation: evpsd-pulse 2s ease-in-out infinite;
	}
}

@keyframes evpsd-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* ---------- Price ---------- */

.evpsd-price {
	margin: 0;
}

.evpsd-price-from,
.evpsd-price-pp {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
}

.evpsd-price-amount {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: #fff;
}

.evpsd-price.is-on-sale .evpsd-price-amount {
	color: var(--ev-sale-gold);
}

.evpsd-price-was {
	margin-left: 0.4em;
	font-size: 0.62em;
	color: rgba(255, 255, 255, 0.4);
}

/* ---------- Book button ---------- */

.evpsd-book-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpsd-book-btn svg {
	width: 0.9rem;
	height: 0.9rem;
	margin-left: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpsd-book-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpsd-book-btn:hover svg {
	transform: translateX(0.2rem);
}

.evpsd-book-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpsd-book-btn:disabled {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	cursor: default;
}

/* ---------- The two card actions ----------

   Book This Date over View Tour, stacked and both the full width of
   the price column. Stacked rather than side by side because at the
   12rem this column gets at 1024px two buttons in a row would each be
   too narrow for an uppercase label at this tracking.

   The picture's link is a plain block wrapper and deliberately has no
   look of its own: the hover already belongs to the card.
*/

.evpsd-card-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	box-sizing: border-box;
}

/*
   BORDER BOX ON THE BUTTONS, which the rest of this section does not
   get: the theme resets box-sizing per section and .evpsd never had
   one. The buttons are width: 100% with 1.1rem of side padding, so in
   content-box they came out 35px wider than the column and spent the
   aside's padding to do it. It also made the pair uneven, because the
   outline variant adds a 1px border and the filled one does not, so
   View Tour measured 2px wider than Book This Date.

   Scoped to these two rather than the whole section, because a
   section-wide reset would change every other element on the page for
   a problem that is only here.
*/
.evpsd-book-btn {
	box-sizing: border-box;
}

.evpsd-card-image-link {
	display: block;
	width: 100%;
	height: 100%;
}

/*
   View Tour. The same geometry, type and arrow as the primary, and the
   rust it already uses, as an outline instead of a fill. No new colour
   and no second shape: the two read as one pair with one of them
   quieter, which is what a secondary action is.
*/
.evpsd-book-btn--ghost {
	border: 1px solid rgba(184, 98, 27, 0.5);
	background: transparent;
	color: var(--ev-rust-text);
}

.evpsd-book-btn--ghost:hover {
	border-color: var(--wp--preset--color--rust);
	background: rgba(184, 98, 27, 0.1);
	color: #fff;
}

/* ---------- Empty states ---------- */

.evpsd-empty {
	max-width: 34rem;
	margin: 3rem auto;
	padding: 3rem 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
}

.evpsd-empty--none {
	margin-top: clamp(3rem, 6vw, 5rem);
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.evpsd-empty-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.6rem;
	font-weight: 400;
	color: #fff;
}

.evpsd-empty-text {
	margin: 0 auto 1.75rem;
	max-width: 30rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evpsd-empty-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evpsd-empty-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpsd-empty-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpsd-empty-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

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

.evpsd-cta {
	padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
}

.evpsd-cta-inner {
	max-width: 48rem;
	text-align: center;
}

.evpsd-cta-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpsd-cta-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpsd-cta-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpsd-cta-text {
	margin: 0 auto 2rem;
	max-width: 38rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.5);
}

.evpsd-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.9rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evpsd-cta-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpsd-cta-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evpsd-cta-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ================================================
   SCHEDULED DEPARTURES: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evpsd-card {
		grid-template-columns: 12rem minmax(0, 1fr) 12rem;
	}

	.evpsd-card-body,
	.evpsd-card-aside {
		padding: 1.25rem;
	}
}

@media (max-width: 768px) {
	/* The three column card becomes one column: picture, then the
	   detail, then the price and the button. */
	.evpsd-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpsd-card-image {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.evpsd-card-aside {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 1rem;
		border-top: 1px solid rgba(212, 196, 168, 0.1);
		border-left: 0;
	}

	/*
	   The aside is a row at this width, with the badge and the price
	   on the left. The actions wrap onto their own line underneath and
	   claim all of it, which is what stops two uppercase labels being
	   squeezed beside a price.

	   flex-basis rather than width, because in a row the basis is the
	   main axis and that is what makes a wrapped item take the whole
	   line. It is reset to auto at 480 below, where the aside goes back
	   to a column: basis follows the main axis, so 100% there would set
	   the HEIGHT to the full height of the aside instead.
	*/
	.evpsd-card-actions {
		flex-basis: 100%;
	}

	.evpsd-book-btn {
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}

	/*
	   Centred labels need the arrow to stop claiming all the slack, or
	   the text sits left of centre by exactly the arrow's width.
	*/
	.evpsd-book-btn svg {
		margin-left: 0;
	}

	.evpsd-toggle {
		margin-left: 0;
	}

	.evpsd-filterbar {
		position: static;
	}
}

@media (max-width: 480px) {
	.evpsd-card-aside {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	   Back to a column here, so the basis set at 768 would be a height.
	   align-items: stretch above already gives the actions the full
	   width, which is all they needed.
	*/
	.evpsd-card-actions {
		flex-basis: auto;
	}

	.evpsd-book-btn {
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}

	.evpsd-book-btn svg {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpsd-card,
	.evpsd-card-image img,
	.evpsd-pill,
	.evpsd-toggle-track,
	.evpsd-toggle-track::after,
	.evpsd-book-btn,
	.evpsd-book-btn svg,
	.evpsd-empty-btn,
	.evpsd-cta-btn {
		transition: none;
	}

	.evpsd-card:hover,
	.evpsd-cta-btn:hover,
	.evpsd-card:not(.is-full):hover .evpsd-card-image img,
	.evpsd-book-btn:hover svg {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evpsd-card,
	.evpsd-pill,
	.evpsd-empty,
	.evpsd-toggle-track {
		border-color: #fff;
	}

	.evpsd-hero-sub,
	.evpsd-card-meta-item,
	.evpsd-month-count,
	.evpsd-empty-text,
	.evpsd-cta-text,
	.evpsd-price-from,
	.evpsd-price-pp {
		color: #fff;
	}
}

/* ================================================
   LOCATION PAGE: OVERVIEW
   Rebuilt from salvage/location-page/01-location-overview.html, which
   is location_overview v8.3. Dropped on the way in: the uniqid prefix,
   the 100vw full bleed hack, and the ninety-odd !important the hero
   slides carried to defeat third-party img rules, which are not needed
   here because nothing else on this site styles a bare img.
   ================================================================== */

/*
   v8.3 CONTRAST SPLIT
   The version notes record the brand rust measuring about 3.98:1 on
   charcoal, which fails AA for small text. v8.3 split the token: a
   lighter rust for small text on dark, and a darker one for surfaces
   carrying white text. The brand rust stays what it is and is still
   correct for borders, fills and large display type.
*/
:root {
	--ev-rust-text: #D2762E;
	--ev-rust-btn: #A85614;
}

/* ---------- Hero ---------- */

.evplo-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	/* svh wins where it is supported: on iOS, vh includes the toolbar
	   that is about to slide away, so a 100vh hero is short by its
	   height the moment anyone scrolls. */
	min-height: 100svh;
	overflow: hidden;
	text-align: center;
	background: var(--wp--preset--color--bg-deep);
}

/*
   The background stack. Absolutely positioned real images, NOT
   background-attachment: fixed, which blanks the whole element on iOS.
   The script translates this container for the parallax; will-change
   keeps that on the compositor.
*/
.evplo-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	will-change: transform;
}

.evplo-slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.evplo-slide.is-active {
	opacity: 1;
}

.evplo-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(17, 16, 16, 0.55) 0%, rgba(17, 16, 16, 0.35) 40%, rgba(17, 16, 16, 0.92) 100%),
		radial-gradient(ellipse at center, transparent 30%, rgba(17, 16, 16, 0.5) 100%);
}

.evplo-crumbs {
	position: absolute;
	top: clamp(6rem, 11vw, 8.5rem);
	left: 0;
	right: 0;
	z-index: 2;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/*
 * .evplo-crumbs-list is gone from the markup. It was an <ol> with
 * justify-content: center inside a nav as wide as half the panel, which
 * is what put the location breadcrumb right of the eyebrow, the H1, the
 * rule, the tagline and the buttons. Its slash separator was drawn by a
 * li + li::before that the flat markup has no element for.
 */

.evplo-hero-content {
	position: relative;
	z-index: 2;
	max-width: 56rem;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evplo-hero-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* Small rust text on a dark ground: the AA-safe token, not the
	   brand rust. See the note at the top of this block. */
	color: var(--ev-rust-text);
}

.evplo-hero-badge-line {
	display: block;
	width: 2.5rem;
	height: 0.0625rem;
	background: currentColor;
	opacity: 0.6;
}

.evplo-hero-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
}

.evplo-hero-subtitle {
	max-width: 42rem;
	margin: 0 auto 2rem;
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	line-height: 1.6;
	color: var(--ev-soft);
}

.evplo-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.evplo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* White on rust: the darker token, which carries white at AA. */
.evplo-btn--primary {
	background: var(--ev-rust-btn);
	color: #fff;
}

.evplo-btn--primary:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evplo-btn--outline {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.evplo-btn--outline:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

.evplo-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evplo-scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transform: translateX(-50%);
}

.evplo-scroll-label {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.evplo-scroll-line {
	display: block;
	width: 0.0625rem;
	height: 3rem;
	background: linear-gradient(to bottom, rgba(212, 196, 168, 0.6), transparent);
}

/* ---------- Quick nav ---------- */

.evplo-quicknav {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
	background: rgba(17, 16, 16, 0.94);
	backdrop-filter: blur(0.75rem);
}

/*
 * CENTRED, AS THE DESTINATION QUICK NAV IS.
 *
 * margin auto centred the container but left the items packed to
 * its left edge, so on a wide screen the bar read as off centre.
 * The destination solves this with justify-content: center from
 * 1101px up and flex-start below, where the bar scrolls instead.
 * Same two rules here.
 */
.evplo-quicknav-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.25rem;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
	overflow-x: auto;
	scrollbar-width: none;
}

@media (min-width: 1101px) {
	.evplo-quicknav-inner {
		justify-content: center;
		overflow-x: visible;
		padding: 0 3rem;
	}
}

.evplo-quicknav-inner::-webkit-scrollbar {
	display: none;
}

.evplo-navitem {
	flex-shrink: 0;
	padding: 1.1rem 1rem;
	border-bottom: 0.125rem solid transparent;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evplo-navitem:hover {
	color: #fff;
}

.evplo-navitem.is-active {
	border-bottom-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--gold);
}

.evplo-navitem:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

/* ---------- Overview ---------- */

/*
 * position relative, because .evplo-ovmedia is absolutely positioned
 * against this section the way .evpco-ovmedia is against its own.
 * Without it the panel escapes to whatever is positioned further up
 * the tree and lands nowhere useful, which is what happened when the
 * panel was first added here.
 */
.evplo-overview {
	position: relative;
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background: var(--wp--preset--color--bg-deep);
}

/*
 * MATCHED TO .evpco-overview-inner, NUMBER FOR NUMBER.
 *
 * This was 87.5rem wide with a 24rem sidebar against the
 * destination's 80rem with 27.5rem, which gave the location's text
 * column about eleven rem more than the destination's. Side by side
 * the two pages did not look like the same site.
 *
 * The gap follows too, 5rem rather than a clamp, because the column
 * widths and the gutter between them are one measurement.
 */
.evplo-overview-inner {
	display: grid;
	grid-template-columns: 1fr 27.5rem;
	gap: 5rem;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 3rem;
	align-items: start;

	/*
	 * THIS IS WHAT KEEPS THE PROSE ON TOP OF THE IMAGE PANEL.
	 *
	 * .evplo-ovmedia is position absolute with z-index 1, covering the
	 * right 54% of the section. Without a stacking context of its own
	 * this grid is unpositioned, so the panel paints over the text and
	 * the left column reads as cut off from about halfway across.
	 *
	 * .evpco-overview-inner carries exactly these two declarations, at
	 * main.css 8683 and 8684, in its base rule rather than in the
	 * desktop override. Copying only the override's grid values, which
	 * is what happened here, silently drops them.
	 */
	position: relative;
	z-index: 2;
}

/*
   The reveal. The content is fully visible by default and only
   animates when the script says the hero has scrolled far enough,
   which is what keeps it readable with no JavaScript: the class is
   never added, and the default is the finished state.
*/
@media (prefers-reduced-motion: no-preference) {
	.evplo-overview-left > *,
	.evplo-sidebar {
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.evplo-revealed .evplo-overview-left > *,
	.evplo-revealed .evplo-sidebar {
		opacity: 1;
		transform: translateY(0);
	}

	.evplo-overview-left > :nth-child(2) { transition-delay: 0.06s; }
	.evplo-overview-left > :nth-child(3) { transition-delay: 0.12s; }
	.evplo-overview-left > :nth-child(4) { transition-delay: 0.18s; }
	.evplo-overview-left > :nth-child(5) { transition-delay: 0.24s; }
	.evplo-sidebar { transition-delay: 0.18s; }
}

/* No left column, so the carousel is the section and takes the width. */
.evplo-overview-inner--tours-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 32rem;
}

.evplo-overview-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evplo-title-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

/* The parent country's flag. 46x30 is the aspect the capture uses. */
.evplo-flag {
	flex: 0 0 2.875rem;
	width: 2.875rem;
	height: 1.875rem;
	object-fit: cover;
	border: 0.125rem solid rgba(255, 255, 255, 0.15);
	border-radius: 0.25rem;
}

.evplo-overview-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evplo-tagline {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
}

.evplo-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 1.75rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.02);
}

.evplo-stat {
	padding: 0.9rem 0.75rem;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.evplo-stat:nth-child(even) {
	border-right: 0;
}

.evplo-stat:nth-last-child(-n+2) {
	border-bottom: 0;
}

.evplo-stat-label {
	margin: 0 0 0.3rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.evplo-stat-value {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.evplo-desc {
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
}

.evplo-desc p {
	margin: 0 0 1rem;
}

.evplo-desc p:last-child {
	margin-bottom: 0;
}

.evplo-desc strong {
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
}

.evplo-desc a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Features: a wrapping row of pills, one short string each. */
.evplo-features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evplo-feature {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.8rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: rgba(212, 196, 168, 0.08);
	font-size: 0.73rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--gold);
}

/* ---------- Featured tours carousel ---------- */

/*
   The panel only. The carousel inside it is the shared
   .evpfx- component, which this page does not restyle: the location
   copy of that chrome was a second implementation of one thing, and
   the one it was a copy of had the clip that this one was missing.
*/
.evplo-carousel-panel {
	position: sticky;
	top: 5rem;
	padding: 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
}

/* The sidebar is a grid item beside a minmax(0, 1fr) column. Its own
   automatic minimum still has to be told to be zero. */
.evplo-sidebar {
	min-width: 0;
}

/* ---------- Map and gallery ---------- */

.evplo-mapgallery {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 1.25rem;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem) clamp(3.5rem, 7vw, 6rem);
	align-items: stretch;
}

.evplo-map-wrap {
	position: relative;
	min-height: 30rem;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
}

.evplo-map {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.03);
}

.evplo-map-float {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	/* Above Leaflet's own panes, which sit in the 400s. */
	z-index: 500;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 0.875rem;
	background: rgba(17, 16, 16, 0.92);
	backdrop-filter: blur(0.5rem);
}

.evplo-map-float-label {
	margin: 0 0 0.3rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evplo-map-float-title {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: #fff;
}

.evplo-map-float-coords {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.45);
}

.evplo-map-float-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.evplo-map-float-link svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}

.evplo-map-float-link:hover {
	color: var(--wp--preset--color--gold-light);
}

.evplo-map-float-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* A grid child defaults to min-width:auto, which refuses to shrink
   below its content and pushes the whole row wide. */
.evplo-gallery-wrap {
	min-width: 0;
}

.evplo-gallery-wrap--full {
	grid-column: 1 / -1;
}

.evplo-gallery {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.03);
}

.evplo-gallery-track {
	position: relative;
	aspect-ratio: 3 / 2;
}

.evplo-gallery-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.25s ease;
	pointer-events: none;
}

.evplo-gallery-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.evplo-gallery-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evplo-gallery-track.is-dragging .evplo-gallery-slide {
	transition: opacity 0.5s ease;
}

.evplo-gallery-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.5rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.9), transparent);
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.evplo-gallery-counter {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.55);
	font-size: 0.65rem;
	font-weight: 600;
	color: #fff;
}

.evplo-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.85);
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.evplo-gallery-nav svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evplo-gallery-nav.prev { left: 0.75rem; }
.evplo-gallery-nav.next { right: 0.75rem; }

.evplo-gallery-nav:hover {
	border-color: var(--wp--preset--color--gold);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evplo-gallery-nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* One scrollable row, never a wrapping grid. */
.evplo-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-bottom: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.evplo-thumbs::-webkit-scrollbar {
	display: none;
}

.evplo-thumb {
	flex: 0 0 5rem;
	width: 5rem;
	height: 3.25rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 0.5rem;
	background: transparent;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.evplo-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evplo-thumb:hover {
	opacity: 0.85;
}

.evplo-thumb.is-active {
	border-color: var(--wp--preset--color--gold);
	opacity: 1;
}

.evplo-thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ================================================
   LOCATION OVERVIEW: BREAKPOINTS
   ================================================ */

@media (max-width: 1200px) {
	/*
	   :not(), because this rule and the --tours-only modifier have the
	   same specificity and this one is further down the file, so it was
	   winning. A location with nothing but a tours carousel carries
	   --tours-only, which asks for one column inside a 32rem cap; this
	   rule handed it two, and the 20rem second column left the first
	   one 132px wide. The carousel, the track and the featured card all
	   collapsed to fit, and the card's own button then stood 7px proud
	   of it. Only between 1025 and 1200: at 1024 the next rule happens
	   to ask for one column anyway, which is why it looked fine either
	   side of the band.
	*/
	/*
	 * The sidebar no longer narrows to 20rem here. The destination
	 * holds 27.5rem from 1101px up and simply stacks below it, and a
	 * sidebar that shrinks on the way down was the other half of why
	 * the two columns never matched.
	 */
	.evplo-overview-inner:not(.evplo-overview-inner--tours-only) {
		gap: 3rem;
	}
}

@media (max-width: 1024px) {
	.evplo-overview-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.evplo-carousel-panel {
		position: static;
	}

	/* The map column is gone below this width, and the script checks
	   the same number before it fetches Leaflet, so a phone never
	   downloads the library for a column it will not show. */
	.evplo-mapgallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.evplo-map-wrap {
		display: none;
	}
}

@media (max-width: 768px) {
	.evplo-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.evplo-hero-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.evplo-btn {
		justify-content: center;
	}

	.evplo-gallery-track {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1025px) {
	.evplo-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.evplo-stat {
		border-bottom: 0;
	}

	.evplo-stat:nth-child(even) {
		border-right: 1px solid rgba(255, 255, 255, 0.08);
	}

	.evplo-stat:last-child {
		border-right: 0;
	}
}

@media (max-width: 480px) {
	/* .evplo-crumbs used to be display: none here. See the note in the
	   split panel block: it is the page's only way back up the tree. */

	.evplo-thumb {
		flex-basis: 4rem;
		width: 4rem;
		height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evplo-slide,
	.evplo-btn,
	.evplo-navitem,
	.evplo-gallery-slide,
	.evplo-gallery-nav,
	.evplo-thumb {
		transition: none;
	}

	.evplo-btn--primary:hover {
		transform: none;
	}

	/* No parallax, and the stack stays where the markup put it. */
	.evplo-hero-bg {
		transform: none;
	}

	.evplo-thumbs {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evplo-stats,
	.evplo-feature,
	.evplo-carousel-panel,
	.evplo-gallery,
	.evplo-map-wrap,
	.evplo-thumb {
		border-color: #fff;
	}

	.evplo-hero-subtitle,
	.evplo-desc,
	.evplo-map-float-coords {
		color: #fff;
	}
}

/* ================================================
   LOCATION PAGE: A CLOSER LOOK
   The field journal. Rebuilt from
   salvage/location-page/04-a-closer-look.html. Dropped on the way in:
   the uniqid prefix and the 100vw full bleed hack.

   Nothing else on the site does this, so unlike the tours and bespoke
   sections beside it there was nothing to reuse.
   ================================================================== */

.evpal {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background: var(--wp--preset--color--bg-deep);
}

.evpal-wrap {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evpal-head {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.evpal-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(0.9rem, 2vw, 1.1rem);
	font-style: italic;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
}

.evpal-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpal-heading em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

/*
   Plate, prose, index. The row height is fixed so the prose scrolls
   inside its column rather than the whole section growing with the
   longest chapter, which is what makes the plate stay put while you
   read and what the scroll affordance below refers to.
*/
.evpal-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 14rem;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
	height: clamp(34rem, 68vh, 44rem);
}

/*
 * WITH NO CHAPTER PICTURES THE PICTURE COLUMN IS NOT RESERVED. The plate is
 * not rendered at all in that case, so a track for it would leave a gap the
 * width of a photograph. Below 1024px the grid is already one column, so only
 * the two desktop definitions need this.
 */
.evpal-grid--noplate {
	grid-template-columns: minmax(0, 1fr) 14rem;

	/*
	 * AND IT IS AS TALL AS ITS PROSE. The fixed height exists so the
	 * reading column matches the photograph beside it. With no
	 * photograph it was reserving up to 44rem for text that needed half
	 * of it, which trades an empty box for an empty space. .evpal-prose
	 * keeps its overflow rule and simply never needs to scroll.
	 */
	height: auto;
}

/* ---------- The plate ---------- */

.evpal-plate {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.03);
}

/*
   Two images, one slot. Both are stacked and transparent; whichever
   carries is-front is the one you see. The incoming image is decoded
   before the class moves, so the crossfade never lands half painted.
*/
.evpal-plate-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.evpal-plate-img.is-front {
	opacity: 1;
}

.evpal-plate-cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 3rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.9), transparent);
}

.evpal-plate-line {
	display: block;
	flex: 0 0 1.75rem;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--gold);
	opacity: 0.7;
}

.evpal-plate-loc {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- The reading column ---------- */

.evpal-read {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.evpal-read:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.5rem;
}

.evpal-count {
	flex: 0 0 auto;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.evpal-count b {
	font-weight: 700;
	color: var(--ev-rust-text);
}

.evpal-of {
	color: rgba(255, 255, 255, 0.3);
}

.evpal-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.evpal-chapter {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.evpal-title {
	flex: 0 0 auto;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

/* The prose is the thing that scrolls. */
.evpal-prose {
	flex: 1 1 auto;
	min-height: 0;
	padding-right: 1rem;
	overflow-y: auto;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(242, 236, 226, 0.66);
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 196, 168, 0.3) transparent;
}

.evpal-prose p {
	margin: 0 0 1.1rem;
}

.evpal-prose p:last-child {
	margin-bottom: 0;
}

.evpal-prose strong {
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
}

.evpal-prose a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
   The scroll affordance. Hidden by default and revealed by the class
   the script adds only while the active prose can scroll further, so
   it is never a gradient over finished text. Not an entrance
   animation, whatever the class name in the capture suggested.
*/
.evpal-fade {
	position: absolute;
	right: 1rem;
	bottom: 0;
	left: 0;
	height: 4.5rem;
	background: linear-gradient(to top, var(--wp--preset--color--bg-deep) 10%, transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.evpal-body.show-fade .evpal-fade {
	opacity: 1;
}

/* ---------- The index ---------- */

.evpal-index {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-width: 0;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(212, 196, 168, 0.16);
}

.evpal-index-label {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
}

.evpal-index-inner {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	overflow: hidden;
}

.evpal-item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0.5rem 0.7rem 0;
	border: 0;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evpal-item-num {
	flex: 0 0 auto;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.3);
	transition: color 0.2s ease;
}

.evpal-item-title {
	min-width: 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s ease;
}

.evpal-item:hover .evpal-item-title {
	color: #fff;
}

.evpal-item[aria-selected='true'] {
	border-bottom-color: var(--wp--preset--color--rust);
}

.evpal-item[aria-selected='true'] .evpal-item-num {
	color: var(--ev-rust-text);
}

.evpal-item[aria-selected='true'] .evpal-item-title {
	color: var(--wp--preset--color--gold);
}

.evpal-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ================================================
   A CLOSER LOOK: BREAKPOINTS
   ================================================ */

@media (max-width: 1200px) {
	.evpal-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11rem;
	}

	.evpal-grid--noplate {
		grid-template-columns: minmax(0, 1fr) 11rem;
	}
}

@media (max-width: 1024px) {
	/*
	   One column: the index becomes a horizontal strip above the
	   plate, then the plate, then the prose. The fixed row height goes
	   with it, because nothing is sitting beside anything any more.
	*/
	.evpal-grid {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.evpal-plate {
		order: 2;
		aspect-ratio: 3 / 2;
	}

	.evpal-read {
		order: 3;
	}

	.evpal-index {
		order: 1;
		flex-direction: column;
		gap: 0.625rem;
		padding-left: 0;
		padding-bottom: 0.875rem;
		border-left: 0;
		border-bottom: 1px solid rgba(212, 196, 168, 0.16);
	}

	.evpal-index-inner {
		flex-direction: row;
		gap: 0.5rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.evpal-index-inner::-webkit-scrollbar {
		display: none;
	}

	.evpal-item {
		flex: 0 0 auto;
		align-items: center;
		padding: 0.55rem 0.9rem;
		border: 1px solid rgba(212, 196, 168, 0.2);
		border-radius: 3.125rem;
	}

	.evpal-item[aria-selected='true'] {
		border-color: var(--wp--preset--color--rust);
		background: rgba(184, 98, 27, 0.14);
	}

	/* The prose scrolls with the page here, not inside a fixed box. */
	.evpal-prose {
		padding-right: 0;
		overflow-y: visible;
	}

	.evpal-chapter {
		height: auto;
	}

	.evpal-fade {
		display: none;
	}
}

@media (max-width: 480px) {
	.evpal-item-title {
		font-size: 0.75rem;
	}

	.evpal-plate {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpal-plate-img,
	.evpal-fade,
	.evpal-item,
	.evpal-item-num,
	.evpal-item-title {
		transition: none;
	}

	.evpal-index-inner {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evpal-plate,
	.evpal-index,
	.evpal-item {
		border-color: #fff;
	}

	.evpal-prose,
	.evpal-item-title,
	.evpal-plate-loc {
		color: #fff;
	}
}


/* ================================================
   LOCATION PAGE: STORIES
   location_blog_section v2.1. A different component from the
   destination page's stories, not the same one twice: there the
   featured story's picture IS the section background and the others
   are a thumbnail row; here the featured story is a 44/56 horizontal
   card and the others are a three-up carousel.
   ================================================================== */

.evpls {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background: var(--wp--preset--color--bg-deep);
}

.evpls-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evpls-header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.evpls-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evpls-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpls-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpls-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

/* v2.1 raised this from 0.38 to 0.72 alpha for AA. */
.evpls-descriptor {
	max-width: 42rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- The featured story ---------- */

.evpls-featured {
	position: relative;
	display: grid;
	grid-template-columns: 44% 56%;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.025);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.evpls-featured:hover {
	border-color: rgba(212, 196, 168, 0.3);
	transform: translateY(-0.25rem);
}

/*
   The whole card is one link, laid over it. The heading is not a
   second anchor to the same place, so the card is announced once.
*/
.evpls-featured-link,
.evpls-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.evpls-featured-link:focus-visible,
.evpls-card-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpls-featured-media {
	position: relative;
	overflow: hidden;
	min-height: 18rem;
}

.evpls-featured-media img,
.evpls-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evpls-featured:hover .evpls-featured-media img,
.evpls-card:hover .evpls-card-media img {
	transform: scale(1.04);
}

.evpls-featured-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.875rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.evpls-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.evpls-cat {
	color: var(--wp--preset--color--gold);
}

.evpls-read {
	color: rgba(255, 255, 255, 0.4);
}

.evpls-featured-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

/* v2.1 raised excerpts from 0.55 to 0.68 alpha for AA. */
.evpls-featured-excerpt,
.evpls-card-excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

.evpls-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpls-more svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpls-featured:hover .evpls-more svg {
	transform: translateX(0.2rem);
}

/* ---------- The carousel ---------- */

.evpls-carousel {
	position: relative;
}

.evpls-track {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.evpls-track::-webkit-scrollbar {
	display: none;
}

.evpls-item {
	flex: 0 0 calc((100% - 2.5rem) / 3);
	max-width: calc((100% - 2.5rem) / 3);
	scroll-snap-align: start;
	display: flex;
}

.evpls-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.evpls-card:hover {
	border-color: rgba(212, 196, 168, 0.28);
	transform: translateY(-0.25rem);
}

.evpls-card-media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.evpls-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.125rem 1.25rem 1.375rem;
}

.evpls-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
}

.evpls-arrow {
	position: absolute;
	top: 35%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.92);
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.evpls-arrow.prev { left: -1.375rem; }
.evpls-arrow.next { right: -1.375rem; }

.evpls-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpls-arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--gold);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evpls-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpls-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.evpls-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.evpls-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(212, 196, 168, 0.28);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}

.evpls-dot.is-active {
	width: 1.5rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--rust);
}

.evpls-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpls-all {
	margin: 2rem 0 0;
	text-align: center;
}

.evpls-all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.evpls-all-link svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpls-all-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ================================================
   LOCATION PAGE: BEST TIME TO VISIT
   The single source of seasonal data on the site.
   ================================================ */

/*
   No new rating palette. --ev-season-* already exists for the
   destination page's When to Go, and the whole point of this section
   is that seasonal data has one source; two palettes for one fact is
   the same drift in colour form. When When to Go is rebuilt to
   aggregate from locations it will still be reading these.
*/

.evpbtv {
	position: relative;
	background: var(--wp--preset--color--bg-deep);
}

.evpbtv-layout {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	min-height: 44rem;
}

/* The image panel is absolute inside its column so the crossfading
   stack can sit on top of each other without the column collapsing. */
.evpbtv-image-side {
	position: relative;
	overflow: hidden;
}

.evpbtv-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.evpbtv-panel.is-active {
	opacity: 1;
}

.evpbtv-panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpbtv-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(17, 16, 16, 0.25), rgba(17, 16, 16, 0.75));
}

.evpbtv-content {
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem);
}

/* Centred, which is the capture's, and the one header on the page that
   is: it sits in a narrow column beside the image rather than across
   the full width, so left-aligning it would leave it hanging. */
.evpbtv-header {
	margin-bottom: 2rem;
	text-align: center;
}

.evpbtv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evpbtv-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpbtv-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpbtv-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpbtv-subtitle {
	max-width: 34rem;
	margin: 0 auto;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- Season accordion ---------- */

.evpbtv-seasons {
	display: grid;
	gap: 0.625rem;
	margin-bottom: 2.5rem;
}

.evpbtv-season {
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.875rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s ease;
}

.evpbtv-season.is-open {
	border-color: rgba(212, 196, 168, 0.3);
}

.evpbtv-season-heading {
	margin: 0;
	font: inherit;
}

.evpbtv-season-btn {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 0;
	border-radius: 0.875rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	text-align: left;
	cursor: pointer;
}

.evpbtv-season-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

.evpbtv-season-name-group {
	min-width: 0;
}

.evpbtv-season-name {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	line-height: 1.25;
	color: #fff;
}

.evpbtv-season-months {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.25rem;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.45);
}

.evpbtv-season-months svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpbtv-weather {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.evpbtv-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 3.125rem;
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.6);
}

.evpbtv-pill svg {
	width: 0.7rem;
	height: 0.7rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpbtv-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.65rem;
	border-radius: 3.125rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.evpbtv-badge-dot {
	display: block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

/*
   Same five treatments as the destination page's badges, including the
   dark text on gold, which is there because white on #C4A046 does not
   reach AA. The legend swatch carries the same modifier, so the
   swatch and the badge cannot disagree.
*/
.evpbtv-badge--peak       { background: var(--ev-season-peak); }
.evpbtv-badge--great      { background: var(--ev-season-great); color: #1a1000; }
.evpbtv-badge--good       { background: var(--ev-season-good); }
.evpbtv-badge--shoulder   { background: var(--ev-season-shoulder); }
.evpbtv-badge--off_season { background: var(--ev-season-off); }

.evpbtv-detail {
	padding: 0 1.25rem 1.25rem;
}

.evpbtv-season-desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

/* What the season is actually good for. Short pills, same shape as a
   tour day's activity badges. */
.evpbtv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.evpbtv-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1875rem 0.625rem;
	border-radius: 3.125rem;
	background: rgba(212, 196, 168, 0.12);
	font-size: 0.72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.evpbtv-tag svg {
	width: 0.6875rem;
	height: 0.6875rem;
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- The twelve month bar ---------- */

.evpbtv-months-label {
	margin: 0 0 0.5rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
}

.evpbtv-climate {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

.evpbtv-months {
	margin-bottom: 1.25rem;
}

.evpbtv-month-bar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.evpbtv-month-cell {
	padding: 0.5rem 0.2rem 0.55rem;
	border-bottom: 0.1875rem solid rgba(255, 255, 255, 0.08);
	font-weight: 600;
	text-align: center;
	vertical-align: bottom;
}

.evpbtv-month-name {
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/*
   The dot is decoration; the rating is also in the cell as text for a
   screen reader, so colour is never the only thing carrying it.
*/
.evpbtv-month-dot {
	display: block;
	width: 0.35rem;
	height: 0.35rem;
	margin: 0.35rem auto 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
}

.evpbtv-month-cell.is-peak       { border-bottom-color: var(--ev-season-peak); }
.evpbtv-month-cell.is-great      { border-bottom-color: var(--ev-season-great); }
.evpbtv-month-cell.is-good       { border-bottom-color: var(--ev-season-good); }
.evpbtv-month-cell.is-shoulder   { border-bottom-color: var(--ev-season-shoulder); }
.evpbtv-month-cell.is-off_season { border-bottom-color: var(--ev-season-off); }

.evpbtv-month-cell.is-peak       .evpbtv-month-dot { background: var(--ev-season-peak); }
.evpbtv-month-cell.is-great      .evpbtv-month-dot { background: var(--ev-season-great); }
.evpbtv-month-cell.is-good       .evpbtv-month-dot { background: var(--ev-season-good); }
.evpbtv-month-cell.is-shoulder   .evpbtv-month-dot { background: var(--ev-season-shoulder); }
.evpbtv-month-cell.is-off_season .evpbtv-month-dot { background: var(--ev-season-off); }

.evpbtv-month-temp {
	padding: 0.45rem 0.2rem 0;
	font-size: 0.65rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.42);
}

.evpbtv-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpbtv-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.45);
}

/* Shape only. The evpbtv-badge-- modifier alongside it is what paints
   the swatch, which is why the legend cannot drift from the badges. */
.evpbtv-legend-dot {
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
}

/* ================================================
   LOCATION PAGE: GETTING THERE
   ================================================ */

.evpgt {
	background: var(--wp--preset--color--bg-deep);
}

.evpgt-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem) 0;
}

.evpgt-header {
	margin-bottom: 2.5rem;
}

.evpgt-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evpgt-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpgt-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpgt-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpgt-desc {
	max-width: 38rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Route tabs ---------- */

.evpgt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.evpgt-tab {
	padding: 0.7rem 1.2rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evpgt-tab:hover {
	border-color: rgba(212, 196, 168, 0.45);
	color: #fff;
}

.evpgt-tab[aria-selected='true'] {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evpgt-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* One panel is shown; the rest carry the hidden attribute, which the
   global [hidden][hidden] rule already turns off. */
.evpgt-panels {
	margin: 0;
}

.evpgt-tab-name {
	display: inline-block;
}

.evpgt-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40%;
	gap: 0;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
}

.evpgt-panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpgt-panel-content {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.evpgt-panel-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

.evpgt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
}

.evpgt-stat-label {
	margin: 0 0 0.3rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.evpgt-stat-value {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.evpgt-panel-body {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.68);
}

.evpgt-panel-body p {
	margin: 0 0 1rem;
}

.evpgt-panel-body p:last-child {
	margin-bottom: 0;
}

.evpgt-tip {
	padding: 1rem 1.1rem;
	border-left: 0.1875rem solid var(--wp--preset--color--rust);
	border-radius: 0 0.5rem 0.5rem 0;
	background: rgba(184, 98, 27, 0.1);
}

.evpgt-tip-label {
	margin: 0 0 0.35rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evpgt-tip-text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

.evpgt-panel-visual {
	position: relative;
	min-height: 20rem;
	overflow: hidden;
}

.evpgt-panel-visual img,
.evpgt-cta-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpgt-panel-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(17, 16, 16, 0.65), transparent 60%);
}

/* ---------- Mobile route strip ---------- */

.evpgt-mobile {
	display: none;
}

.evpgt-mob-track {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.evpgt-mob-track::-webkit-scrollbar {
	display: none;
}

.evpgt-mob-item {
	flex: 0 0 86%;
	max-width: 86%;
	scroll-snap-align: start;
}

.evpgt-mob-card {
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
}

.evpgt-mob-media {
	position: relative;
	aspect-ratio: 16 / 9;
}

.evpgt-mob-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpgt-mob-dur {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border-radius: 3.125rem;
	background: rgba(0, 0, 0, 0.65);
	font-size: 0.62rem;
	font-weight: 600;
	color: #fff;
}

.evpgt-mob-body {
	display: grid;
	gap: 0.75rem;
	padding: 1.1rem 1.25rem 1.375rem;
}

.evpgt-mob-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
}

.evpgt-mob-desc {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

.evpgt-mob-stats {
	margin: 0;
}

.evpgt-mob-stat dt {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.evpgt-mob-stat dd {
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
}

.evpgt-mob-tip {
	padding: 0.75rem 0.9rem;
	border-left: 0.1875rem solid var(--wp--preset--color--rust);
	border-radius: 0 0.375rem 0.375rem 0;
	background: rgba(184, 98, 27, 0.1);
}

.evpgt-mob-tip-label {
	margin: 0 0 0.25rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evpgt-mob-tip-text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.evpgt-mob-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.evpgt-mob-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(212, 196, 168, 0.28);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}

.evpgt-mob-dot.is-active {
	width: 1.5rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--rust);
}

.evpgt-mob-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Plan your trip ---------- */

/* The card is inset from the page gutter, not full bleed. */
.evpgt-cta {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding: 0 clamp(1.25rem, 5vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.evpgt-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40%;
	max-width: 87.5rem;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 100%);
}

.evpgt-cta-left {
	padding: clamp(1.75rem, 4vw, 3rem);
}

.evpgt-cta-eyebrow {
	margin: 0 0 0.875rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpgt-cta-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpgt-cta-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpgt-cta-body {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

.evpgt-cta-features {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.evpgt-cta-feature {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.evpgt-cta-feature::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
}

.evpgt-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.75rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--ev-rust-btn);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evpgt-cta-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evpgt-cta-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evpgt-cta-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpgt-cta-visual {
	position: relative;
	min-height: 18rem;
	overflow: hidden;
}

.evpgt-cta-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(17, 16, 16, 0.6), transparent 55%);
}

/* ---------- The enquiry modal ---------- */

.evpgt-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) 1rem;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.8);
}

.evpgt-modal {
	position: relative;
	width: 100%;
	max-width: 36rem;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--bg-deep);
}

.evpgt-modal-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evpgt-modal-close svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evpgt-modal-close:hover {
	border-color: rgba(212, 196, 168, 0.4);
	color: #fff;
}

.evpgt-modal-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpgt-modal-header {
	margin-bottom: 1rem;
	padding-right: 2.5rem;
}

.evpgt-modal-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpgt-modal-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evpgt-modal-note {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.45);
}

.evpgt-fg {
	margin-bottom: 1rem;
}

.evpgt-fl {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evpgt-req {
	color: var(--wp--preset--color--rust);
}

.evpgt-fi {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	color: #fff;
	transition: border-color 0.2s ease;
}

.evpgt-fi::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evpgt-fi:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-color: transparent;
}

.evpgt-ft {
	resize: vertical;
	min-height: 5rem;
	line-height: 1.6;
}

.evpgt-turnstile {
	margin: 1.25rem 0 0;
}

.evpgt-error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--ev-form-error);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: #fff;
}

.evpgt-form-btns {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1.5rem;
}

.evpgt-btn {
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.evpgt-btn-primary {
	background: var(--ev-rust-btn);
	color: #fff;
}

.evpgt-btn-primary:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evpgt-btn-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.evpgt-btn-secondary {
	border-color: rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
}

.evpgt-btn-secondary:hover {
	border-color: rgba(212, 196, 168, 0.5);
	color: #fff;
}

.evpgt-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpgt-done {
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.evpgt-done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 50%;
	font-size: 1.25rem;
	color: var(--wp--preset--color--gold);
}

.evpgt-done-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
}

.evpgt-done-text {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ================================================
   OTHER COUNTRY LOCATIONS
   The shared destination map, plus the links back out that only a
   location page needs.
   ================================================ */

.evpdm-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1rem 0 0;
}

.evpdm-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.evpdm-link:hover {
	color: var(--wp--preset--color--gold-light);
}

.evpdm-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ================================================
   PASS 3: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evpls-item {
		flex: 0 0 calc((100% - 1.25rem) / 2);
		max-width: calc((100% - 1.25rem) / 2);
	}

	.evpls-arrow.prev { left: 0.25rem; }
	.evpls-arrow.next { right: 0.25rem; }

	/*
	   BTV drops the two column split for a dark overlay: the image
	   becomes the section's background and the content sits on it.
	*/
	.evpbtv-layout {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.evpbtv-image-side {
		position: absolute;
		inset: 0;
	}

	.evpbtv-scrim {
		background: linear-gradient(to bottom, rgba(17, 16, 16, 0.86), rgba(17, 16, 16, 0.94));
	}

	.evpbtv-content {
		position: relative;
		z-index: 1;
	}

	/* Tabs are hidden below here and the card strip is the section. */
	.evpgt-desktop {
		display: none;
	}

	.evpgt-mobile {
		display: block;
	}

	.evpgt-cta-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpgt-cta-visual {
		order: -1;
		min-height: 14rem;
	}

	.evpgt-cta-scrim {
		background: linear-gradient(to top, rgba(17, 16, 16, 0.7), transparent 60%);
	}
}

@media (max-width: 768px) {
	.evpls-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpls-featured-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.evpls-item {
		flex: 0 0 82%;
		max-width: 82%;
	}

	/* Arrows are hidden on a phone: the strip is swiped. */
	.evpls-arrow {
		display: none;
	}

	.evpbtv-season-btn {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.625rem;
	}

	.evpbtv-month-name {
		font-size: 0.5rem;
	}

	.evpbtv-month-temp {
		font-size: 0.55rem;
	}
}

@media (max-width: 480px) {
	.evpls-inner,
	.evpgt-inner {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.evpls-item {
		flex: 0 0 88%;
		max-width: 88%;
	}

	.evpgt-form-btns {
		flex-direction: column-reverse;
	}

	.evpgt-btn {
		width: 100%;
	}

	/* Twelve columns will not fit legibly, so the bar scrolls. */
	.evpbtv-months {
		overflow-x: auto;
	}

	.evpbtv-month-bar {
		min-width: 30rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpls-featured,
	.evpls-card,
	.evpls-featured-media img,
	.evpls-card-media img,
	.evpls-more svg,
	.evpls-arrow,
	.evpls-dot,
	.evpbtv-panel,
	.evpbtv-season,
	.evpgt-tab,
	.evpgt-mob-dot,
	.evpgt-cta-btn,
	.evpgt-fi,
	.evpgt-btn {
		transition: none;
	}

	.evpls-featured:hover,
	.evpls-card:hover,
	.evpls-featured:hover .evpls-featured-media img,
	.evpls-card:hover .evpls-card-media img,
	.evpls-featured:hover .evpls-more svg,
	.evpgt-cta-btn:hover {
		transform: none;
	}

	.evpls-track,
	.evpgt-mob-track {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evpls-featured,
	.evpls-card,
	.evpbtv-season,
	.evpgt-panel,
	.evpgt-mob-card,
	.evpgt-cta-inner,
	.evpgt-fi,
	.evpgt-tab {
		border-color: #fff;
	}

	.evpls-descriptor,
	.evpls-featured-excerpt,
	.evpls-card-excerpt,
	.evpbtv-subtitle,
	.evpbtv-season-desc,
	.evpbtv-climate,
	.evpgt-desc,
	.evpgt-panel-body,
	.evpgt-cta-body,
	.evpgt-cta-feature {
		color: #fff;
	}
}


/* ================================================
   VISUALLY HIDDEN, GLOBALLY

   WordPress core emits .screen-reader-text itself, in gallery captions,
   comment forms and skip links, and expects the theme to define it.
   Nothing here did, so a table caption and twelve month ratings on the
   location page were being read out AND shown. Sections that already
   have their own *-sr-only keep it; new markup uses this.

   clip-path over the old clip: the rectangle stays a rectangle, and
   `clip` is deprecated. Both are set, oldest last, for browsers that
   ignore the new one.
   ================================================ */

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

/* A skip link is the one that has to come back. */
.screen-reader-text:focus {
	z-index: 100000;
	top: 0.3125rem;
	left: 0.3125rem;
	width: auto;
	height: auto;
	padding: 0.9375rem 1.4375rem;
	border-radius: 0.1875rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: normal;
	clip-path: none;
	clip: auto;
}

/* ================================================
   BLOG ARTICLE

   THE ONLY LIGHT PAGE ON THE SITE. White ground, #333 text, with
   exactly two dark blocks: the hero and the end-of-article booking
   block. Everything between is light, including the in-column tour
   highlight, which is the whole point of the v3.1 redesign: the
   article does not go dark to sell something halfway through.

   Rebuilt from salvage/blog-page/RECOVERED-blog-post-template-v3.4.php.
   Dropped on the way in: the per-render wp_rand() selector prefix, the
   !important on nearly every declaration, the width:100vw full bleed,
   and the CSS background images on every tour card.

   NO FULL BLEED HACK. The old template needed width:100vw with
   margin-left:calc(-50vw + 50%) because Elementor wrapped its content
   in a max-width container. Nothing wraps these parts, so the hero and
   the booking block are already the width of the page and their inner
   elements carry the max-width. 100vw would also overshoot by the
   scrollbar, which is what the standing rule against it is about.

   The page-level tokens are scoped to .evb rather than :root, because
   they are a light palette and every other page on the site is dark.
   ================================================ */

/*
   THE LIGHT PALETTE, SHARED BY THE TWO READING TEMPLATES.
   single-blog.php and page.php. Everything else on the site is dark;
   these two are the pages somebody sits and reads, and they were given
   a light ground for that reason. Defining it once means the prose
   rules below can serve both without re-tuning a single colour.
*/
.evb,
.evp-page {
	/* Light palette, the reading templates only. */
	--evb-ink: #333;
	--evb-ink-strong: #1a1a1a;
	--evb-ink-soft: #5b5b5b;
	--evb-ink-mute: #8a8a8a;
	--evb-line: rgba(0, 0, 0, 0.08);
	--evb-line-warm: rgba(212, 196, 168, 0.4);
	--evb-warm: #faf8f5;

	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--evb-ink);
	background: #fff;

	/*
	   CLIP, NOT HIDDEN. overflow:hidden creates a scroll container,
	   which makes position:sticky stick to that box instead of the
	   viewport and killed the desktop contents sidebar once. clip does
	   the same containment without the scroll context. hidden stays
	   underneath for anything that does not know clip.
	*/
	overflow-x: hidden;
	overflow-x: clip;
}

/* The sheet locks the page behind it. */
body.evb-locked {
	overflow: hidden;
}

/* ---------- Reading progress ---------- */

.evb-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	height: 0.1875rem;
	background: transparent;
	pointer-events: none;
}

.evb-progress-bar {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
	transition: width 0.1s linear;
}

/* ---------- Hero ---------- */

.evb-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 62vh;
	min-height: 62svh;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
}

/*
   No !important on the size. The old rule needed it to beat Astra and
   Elementor's img { height:auto !important }; neither ships on this
   site any more.
*/
.evb-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.evb-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0.35) 0%, rgba(17, 16, 16, 0.55) 45%, rgba(17, 16, 16, 0.92) 100%);
}

/*
   NO PHOTOGRAPH: A TITLING BAND, NOT AN EMPTY PHOTO HERO.

   62vh of flat bg-deep with the title pinned to the bottom left is most
   of a screen of nothing, and plenty of articles ship without a hero
   image. This drops the viewport height and borrows the shape the dark
   page heads already use on this site, .evpm-hero and the destination
   and location heads: bg-deep, one rust wash from the top left, a warm
   hairline closing the band, and padding that clears the fixed header
   rather than a min-height that guesses at it.
*/
.evb-hero--flat {
	min-height: 0;
	padding: calc(var(--ev-header-h, 5rem) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
	background:
		radial-gradient(60rem 28rem at 12% 0%, rgba(184, 98, 27, 0.16), transparent 62%),
		var(--wp--preset--color--bg-deep);
}

/* The band's own padding does the spacing; the inner only insets. */
.evb-hero--flat .evb-hero-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/*
   The title is the only thing in a flat hero, so it is allowed a wider
   measure than it gets over a photograph, where 18ch keeps it clear of
   the image.
*/
.evb-hero--flat .evb-title {
	max-width: 24ch;
}

.evb-hero-inner {
	position: relative;
	width: 100%;
	max-width: 75rem;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
}

.evb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.62);
}

.evb-breadcrumb a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color 0.2s ease;
}

.evb-breadcrumb a:hover {
	color: var(--wp--preset--color--gold);
}

.evb-breadcrumb a:focus-visible,
.evb-hero a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evb-breadcrumb-sep {
	color: rgba(255, 255, 255, 0.3);
}

.evb-breadcrumb-current {
	max-width: 40ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.85);
}

.evb-category {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evb-category::before {
	content: '';
	display: block;
	width: 1.875rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evb-title {
	max-width: 18ch;
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.08;
	color: #fff;
}

.evb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
}

.evb-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.72);
}

.evb-meta-item svg {
	width: 0.9375rem;
	height: 0.9375rem;
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evb-meta-dot {
	width: 0.1875rem;
	height: 0.1875rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
}

/* ---------- Share bar ---------- */

/*
   A CLOSING BAND, SO THE RULE IS ON TOP.

   This used to sit between the hero and the first line and the border
   was on the bottom, drawing the line that separated the dark hero from
   the article. It now ends the article, so the line belongs above it,
   closing the prose off from the furniture. The extra space above is
   the gap between the last paragraph and the band; below it is tight,
   because what follows is a block with its own generous top padding.
*/
.evb-share {
	position: relative;
	z-index: 2;
	margin-top: 1rem;
	border-top: 1px solid var(--evb-line);
	background: #fff;
	padding: 1.5rem 0 0.5rem;
}

.evb-share-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.evb-share-label {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--evb-ink-mute);
}

.evb-share-label::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evb-share-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* 44px, which is the smallest a touch target should be. */
.evb-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--evb-line);
	border-radius: 50%;
	background: #fff;
	color: var(--evb-ink-soft);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.evb-share-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evb-share-btn[href^='mailto'] svg,
#evb-copy svg {
	fill: none;
	stroke: currentColor;
}

.evb-share-btn:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evb-share-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

.evb-share-btn.is-copied {
	border-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--rust);
}

/* ---------- The article container ---------- */

/*
   THE MEASURE IS SET BY THE TRACK.

   This grid used to be minmax(0, 1fr) beside the sidebar, which inside
   a 75rem frame gave the article column about 830px: near enough a
   hundred characters a line, where the eye loses the start of the next
   one. page.php, the other reading template, already caps its prose at
   72ch and says so; the blog never got the same treatment because its
   column is sized by the grid rather than by a max-width on the prose.
   So the track carries the measure instead.

   THE EMPTY MIDDLE TRACK IS DOING A JOB. Narrowing the article alone
   would have indented it from everything else on the page: the hero
   title, the share label, the section headings and the story nav all
   start at the frame's padding edge. The slack goes into a middle
   track that collapses to nothing when it is not needed, so the
   article keeps that left edge and the sidebar still sits flush right.
*/
.evb-container {
	display: grid;
	grid-template-columns: minmax(0, 40rem) minmax(0, 1fr) 21rem;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	max-width: 75rem;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem) 3.5rem;
}

/* Third track, not second: the second is the slack. */
.evb-sidebar {
	grid-column: 3;
}

/*
   THE TWO READING TEMPLATES KEEP SHARING THIS.

   17px over a 70 character measure, with the leading pulled back from
   1.85 to 1.75: 1.85 was set when the line was a hundred characters
   long and needed the extra air to stay trackable. A shorter line needs
   less, and the tighter block reads as a block rather than a list of
   lines. Changing it here rather than on .evb-article alone is
   deliberate, for the reason the palette above is shared: these are the
   two pages somebody sits and reads, and they should read the same.
*/
.evb-article,
.evp-prose {
	min-width: 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--evb-ink);
}

.evb-lead,
.evp-lead {
	position: relative;
	margin-bottom: 2.5rem;
	padding-left: 1.5rem;
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.75;
	color: var(--evb-ink-strong);
}

.evb-lead::before,
.evp-lead::before {
	content: '';
	position: absolute;
	top: 0.35rem;
	bottom: 0.35rem;
	left: 0;
	width: 0.1875rem;
	border-radius: 0.125rem;
	background: var(--wp--preset--color--rust);
}

.evb-lead p:last-child,
.evp-lead p:last-child {
	margin-bottom: 0;
}

.evb-empty {
	margin: 0;
	font-style: italic;
	color: var(--evb-ink-mute);
}

.evb-article h2,
.evp-prose h2 {
	position: relative;
	margin: 3rem 0 1.25rem;
	padding-top: 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--evb-ink-strong);
	/* The anchor sits under a fixed header when jumped to. */
	scroll-margin-top: 5rem;
}

.evb-article h2::before,
.evp-prose h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 0.125rem;
	background: var(--wp--preset--color--rust);
}

.evb-article h3,
.evp-prose h3 {
	margin: 2.25rem 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

/*
   One full line of leading between paragraphs. At 1.375rem the gap was
   smaller than the space between two lines inside a paragraph, so the
   breaks did not read as breaks and a long article arrived as one grey
   slab. The paragraph is the unit a reader scans by; it has to be
   visible.
*/
.evb-article p,
.evp-prose p {
	margin: 0 0 1.75rem;
}

.evb-article a,
.evp-prose a {
	color: var(--ev-rust-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.evb-article a:hover,
.evp-prose a:hover {
	color: var(--wp--preset--color--rust-dark);
}

.evb-article a:focus-visible,
.evp-prose a:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

/*
 * THE TOUR CARDS IN THE ARTICLE ARE ANCHORS, NOT PROSE LINKS.
 *
 * The three rules above are for links inside body copy. The inline tour
 * cards are also anchors and they also sit inside .evb-article, so they
 * were picking all of it up: ".evb-article a" is one class plus one
 * element and beats the bare ".evb-inline-card" that already asks for
 * text-decoration: none and color: inherit. The result was every line of
 * every card, title, subtitle and CTA alike, drawn with a prose
 * underline and forced to the rust link colour.
 *
 * Scoped to .evb-article rather than fixed on the card rule itself,
 * because the card rule is not wrong: it is only ever lost in here.
 * The :hover pair is separate because ".evb-article a:hover" carries the
 * extra pseudo-class and would otherwise still repaint the text.
 */
.evb-article .evb-inline-hero,
.evb-article .evb-inline-card {
	color: inherit;
	text-decoration: none;
}

.evb-article .evb-inline-hero:hover,
.evb-article .evb-inline-card:hover {
	color: inherit;
	text-decoration: none;
}

.evb-article ul,
.evb-article ol,
.evp-prose ul,
.evp-prose ol {
	margin: 0 0 1.75rem;
	padding-left: 1.25rem;
}

.evb-article li,
.evp-prose li {
	margin-bottom: 0.5rem;
}

.evb-article img,
.evp-prose img {
	max-width: 100%;
	height: auto;
}

.evb-article strong,
.evp-prose strong {
	color: var(--evb-ink-strong);
}

/* Highlight box */
.evb-callout {
	position: relative;
	margin: 2.5rem 0;
	padding: 1.75rem 1.75rem 1.75rem 2.25rem;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--evb-warm);
}

.evb-callout::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0.3125rem;
	background: var(--wp--preset--color--rust);
}

.evb-callout-title {
	margin: 0 0 0.625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

.evb-callout p:last-child {
	margin-bottom: 0;
}

/* Pull quote */
.evb-quote {
	position: relative;
	margin: 3rem 0;
	padding: 0 0 0 3rem;
}

.evb-quote::before {
	content: '\201C';
	position: absolute;
	top: -1rem;
	left: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.evb-quote blockquote,
.evp-prose blockquote {
	margin: 0;
}

.evb-quote blockquote p,
.evp-prose blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--evb-ink-strong);
}

.evb-quote figcaption {
	margin-top: 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--evb-ink-mute);
}

/* In-article image */
.evb-figure {
	margin: 3rem 0;
}

.evb-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

.evb-figure figcaption {
	margin-top: 0.75rem;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--evb-ink-mute);
}

/* ---------- In-column tour highlight: light, no price ---------- */

.evb-inline-head {
	margin: 3rem 0 1.25rem;
}

.evb-inline-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.5rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-inline-eyebrow::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evb-inline-htitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

.evb-inline-hero,
.evb-inline-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(184, 98, 27, 0.22);
	border-radius: 1.25rem;
	background: var(--evb-warm);
	color: inherit;
	text-decoration: none;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.evb-inline-hero:hover,
.evb-inline-card:hover {
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0.875rem 2.5rem rgba(0, 0, 0, 0.08);
	transform: translateY(-0.1875rem);
}

.evb-inline-hero:focus-visible,
.evb-inline-card:focus-visible,
.evb-region-card:focus-visible,
.evb-book-hero:focus-visible,
.evb-book-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
}

.evb-inline-hero {
	display: flex;
	align-items: stretch;
	margin: 3.25rem 0;
}

.evb-inline-hero-img {
	position: relative;
	flex: 0 0 13.125rem;
	overflow: hidden;
}

.evb-inline-hero-img img,
.evb-inline-card-img img,
.evb-book-hero-img img,
.evb-book-card-img img,
.evb-region-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evb-inline-hero:hover .evb-inline-hero-img img,
.evb-inline-card:hover .evb-inline-card-img img,
.evb-book-hero:hover .evb-book-hero-img img,
.evb-book-card:hover .evb-book-card-img img,
.evb-region-card:hover .evb-region-card-img img {
	transform: scale(1.04);
}

.evb-inline-hero-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.75rem;
}

.evb-inline-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--evb-ink-strong);
}

.evb-inline-desc {
	max-width: 52ch;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--evb-ink-soft);
}

.evb-inline-link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.375rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-inline-link svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evb-inline-hero:hover .evb-inline-link svg,
.evb-inline-card:hover .evb-inline-link svg {
	transform: translateX(0.2rem);
}

.evb-inline-grid {
	display: grid;
	gap: 1.125rem;
	margin: 0 0 3.25rem;
}

.evb-inline-grid.evb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evb-inline-grid.evb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
   PICTURES AND CARDS ARE NOT PROSE, SO THEY DO NOT TAKE THE MEASURE.

   The 40rem track is the right width for a line of text and the wrong
   width for a photograph or a row of three tour cards: at the measure
   alone the three up grid gives each card about 197px. These take back
   5rem of the slack track beside the article.

   RIGHT ONLY. The left edge is the one the whole page lines up on, so
   a picture that stepped out on both sides would break the alignment
   the middle track exists to protect. Growing to the right instead
   reads as the picture reaching toward the margin, which is what a
   wide figure in a narrow column is supposed to do.

   Guarded at 1200px because below that the slack track has already
   collapsed and there is nothing left to borrow.

   It sits here, after the four rules it adjusts, because each of those
   sets the margin shorthand, and a shorthand later in the file would
   reset anything this set earlier.
*/
@media (min-width: 1200px) {

	.evb-figure,
	.evb-inline-head,
	.evb-inline-grid,
	.evb-article .evb-inline-hero {
		width: calc(100% + 5rem);
		max-width: none;
	}
}

.evb-inline-card {
	display: flex;
	flex-direction: column;
}

.evb-inline-card-img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.evb-inline-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.125rem 1.25rem 1.375rem;
}

/* ---------- The contents sidebar ---------- */

.evb-sidebar {
	position: sticky;
	top: 6.25rem;
	/* Without this the sidebar stretches to the row height and there is
	   nothing left to stick. */
	align-self: start;
	max-height: calc(100vh - 8rem);
}

.evb-toc {
	max-height: calc(100vh - 8rem);
	padding: 1.75rem 1.5rem;
	overflow-y: auto;
	border: 1px solid var(--evb-line-warm);
	border-radius: 1.125rem;
	background: #fff;
	box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.05);
}

.evb-toc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.375rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-toc-eyebrow::before {
	content: '';
	display: block;
	width: 1.25rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

/*
   A paragraph, not a heading. Navigation chrome in the outline is
   what the v3.4 pass demoted, and the mobile sheet's heading is the
   same decision.
*/
.evb-toc-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

.evb-toc-list {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.evb-toc-list a {
	display: flex;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.5rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--evb-ink-soft);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.evb-toc-list a:hover {
	background: var(--evb-warm);
	color: var(--evb-ink-strong);
}

.evb-toc-list a.is-active {
	background: var(--evb-warm);
	color: var(--ev-rust-text);
	font-weight: 600;
}

.evb-toc-list a:focus-visible,
.evb-toc-sheet-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

.evb-toc-num {
	min-width: 1rem;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

.evb-toc-progress {
	padding-top: 1rem;
	border-top: 1px solid var(--evb-line);
}

.evb-toc-progress-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.5rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--evb-ink-mute);
}

.evb-toc-progress-bar {
	height: 0.25rem;
	overflow: hidden;
	border-radius: 0.125rem;
	background: var(--evb-line);
}

.evb-toc-progress-fill {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
	transition: width 0.1s linear;
}

/* ---------- End-of-article booking block: dark, priced ---------- */

.evb-book {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
	padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
}

.evb-book-inner {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.evb-book-header {
	max-width: 40rem;
	margin-bottom: 2.5rem;
}

.evb-book-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-book-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evb-book-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evb-book-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evb-book-hero,
.evb-book-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
	text-decoration: none;
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.evb-book-hero:hover,
.evb-book-card:hover {
	border-color: rgba(212, 196, 168, 0.35);
	transform: translateY(-0.1875rem);
}

.evb-book-hero {
	display: flex;
	align-items: stretch;
}

.evb-book-hero-img {
	position: relative;
	flex: 0 0 23.75rem;
	overflow: hidden;
}

.evb-book-pill {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.35rem 0.75rem;
	border-radius: 3.125rem;
	background: var(--ev-rust-btn);
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
}

.evb-book-hero-body,
.evb-book-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	min-width: 0;
	padding: 1.75rem;
}

.evb-book-country {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evb-book-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

.evb-book-desc {
	max-width: 50ch;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
}

.evb-book-stats,
.evb-inline-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	margin-top: 0.375rem;
}

.evb-book-stats.is-single,
.evb-inline-stats.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.evb-chip {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.625rem;
	background: rgba(255, 255, 255, 0.04);
}

.evb-chip-l {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evb-chip-v {
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
}

.evb-chip-v.is-price {
	color: var(--wp--preset--color--gold);
}

/*
 * The same chip on the light card. Only the colours change, so the
 * structure above is shared rather than copied: the dark values are
 * white-on-dark and have to be re-stated for a warm background, and
 * gold on near-white does not have the contrast to be a price.
 */
.evb-inline-stats .evb-chip {
	border-color: rgba(184, 98, 27, 0.18);
	background: rgba(184, 98, 27, 0.05);
}

.evb-inline-stats .evb-chip-l {
	color: var(--evb-ink-soft);
}

.evb-inline-stats .evb-chip-v {
	color: var(--evb-ink-strong);
}

.evb-inline-stats .evb-chip-v.is-price {
	color: var(--ev-rust-text);
}

/*
 * The pre-sale price, beside the one being asked. Lighter and smaller
 * than the live price so the two cannot be misread for each other; the
 * line through is the s element's own.
 */
.evb-chip-was {
	margin-left: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.62;
}

.evb-book-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: auto;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	background: var(--ev-rust-btn);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	transition: background 0.25s ease;
}

.evb-book-hero:hover .evb-book-cta,
.evb-book-card:hover .evb-book-cta {
	background: var(--wp--preset--color--rust-dark);
}

.evb-book-cta svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: currentColor;
}

.evb-book-hero .evb-book-cta {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.evb-book-grid {
	display: grid;
	gap: 1.5rem;
}

.evb-book-grid.evb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evb-book-grid.evb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.evb-book-card {
	display: flex;
	flex-direction: column;
}

.evb-book-card-img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.evb-book-footer {
	margin: 2.5rem 0 0;
	text-align: center;
}

.evb-book-viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 3.125rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.evb-book-viewall:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evb-book-viewall:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evb-book-viewall svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* ---------- Carousel dots, both themes ---------- */

/*
   Built by the script, and only meaningful once the grid has become a
   scroll-snap track, which is a breakpoint thing. Hidden up here so
   building them unconditionally costs nothing.
*/
.evb-dots {
	display: none;
}

.evb-dot {
	width: 1.75rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.evb-dot::before {
	content: '';
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 auto;
	border-radius: 50%;
	transition: background 0.25s ease, width 0.25s ease;
}

.evb-dots.is-light .evb-dot::before { background: rgba(0, 0, 0, 0.18); }
.evb-dots.is-dark  .evb-dot::before { background: rgba(255, 255, 255, 0.22); }

.evb-dot.is-active::before {
	width: 1.25rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--rust);
}

.evb-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

/* ---------- More from this region ---------- */

.evb-region {
	max-width: 75rem;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(3.5rem, 6vw, 6rem);
}

.evb-region-header {
	max-width: 40rem;
	margin-bottom: 2rem;
}

.evb-region-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-region-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evb-region-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--evb-ink-strong);
}

.evb-region-grid {
	display: grid;
	gap: 1.25rem;
}

.evb-region-grid.evb-cols-1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 35rem;
}

.evb-region-grid.evb-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evb-region-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--evb-line-warm);
	border-radius: 1.125rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.evb-region-card:hover {
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0.875rem 2.5rem rgba(0, 0, 0, 0.08);
	transform: translateY(-0.1875rem);
}

.evb-region-card-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--evb-warm);
}

.evb-region-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem 1.375rem 1.5rem;
}

.evb-region-card-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

.evb-region-card-desc {
	flex: 1;
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--evb-ink-soft);
}

.evb-region-link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evb-region-link svg {
	width: 0.8125rem;
	height: 0.8125rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evb-region-card:hover .evb-region-link svg {
	transform: translateX(0.2rem);
}

/* ---------- Previous and next ---------- */

.evb-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 75rem;
	margin: 0 auto 3.5rem;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.evb-post-nav.is-single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 43rem;
}

.evb-post-nav-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--evb-line);
	border-radius: 1rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.evb-post-nav-card.is-next {
	flex-direction: row-reverse;
	text-align: right;
}

.evb-post-nav-card:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--evb-warm);
}

.evb-post-nav-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
}

.evb-post-nav-arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--evb-line);
	border-radius: 50%;
	color: var(--ev-rust-text);
}

.evb-post-nav-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

.evb-post-nav-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.evb-post-nav-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--evb-ink-mute);
}

.evb-post-nav-title {
	overflow: hidden;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--evb-ink-strong);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- Mobile contents sheet, and back to top ---------- */

/*
   The button is display:none up here, not just visually absent: above
   the breakpoint the sidebar is the contents list, and a second control
   for the same thing would be a second thing to tab through.
*/
.evb-toc-fab {
	display: none;
	position: fixed;
	right: 1.25rem;
	bottom: 5.25rem;
	z-index: 55;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ev-rust-btn);
	color: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.evb-toc-fab svg {
	width: 1.375rem;
	height: 1.375rem;
}

.evb-toc-fab:focus-visible,
.evb-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evb-toc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evb-toc-backdrop.is-open {
	opacity: 1;
}

.evb-toc-sheet {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95;
	max-height: 75vh;
	padding: 0.75rem 1.25rem 1.5rem;
	overflow-y: auto;
	border-radius: 1.25rem 1.25rem 0 0;
	background: #fff;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.evb-toc-sheet.is-open {
	transform: translateY(0);
}

.evb-toc-handle {
	display: block;
	width: 2.75rem;
	height: 0.25rem;
	margin: 0 auto 0.75rem;
	border-radius: 0.125rem;
	background: rgba(0, 0, 0, 0.15);
}

.evb-toc-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.evb-toc-sheet-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--evb-ink-strong);
}

.evb-toc-sheet-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--evb-line);
	border-radius: 50%;
	background: #fff;
	color: var(--evb-ink-soft);
	cursor: pointer;
}

.evb-toc-sheet-close svg {
	width: 1.125rem;
	height: 1.125rem;
}

.evb-toc-sheet-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

.evb-toc-sheet-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.evb-toc-sheet-list a {
	display: flex;
	gap: 0.75rem;
	padding: 0.875rem 0.5rem;
	border-bottom: 1px solid var(--evb-line);
	font-size: 0.9rem;
	color: var(--evb-ink);
	text-decoration: none;
}

.evb-toc-sheet-list a.is-active {
	color: var(--ev-rust-text);
	font-weight: 600;
}

.evb-toc-sheet-num {
	min-width: 1.25rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

.evb-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 55;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--evb-line-warm);
	border-radius: 50%;
	background: #fff;
	color: var(--ev-rust-text);
	box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

.evb-to-top svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ================================================
   BLOG ARTICLE: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	/*
	   The sidebar goes; the sheet takes over below here. The track
	   keeps the measure rather than reverting to 1fr, which on a
	   tablet would have handed the article the full 75rem frame and
	   a longer line than it has on a desktop. Centred rather than left
	   aligned because with the sidebar gone there is nothing on the
	   right for it to line up against.
	*/
	.evb-container {
		grid-template-columns: minmax(0, 40rem);
		justify-content: center;
	}

	.evb-sidebar {
		display: none;
	}

	.evb-toc-fab {
		display: flex;
	}
}

@media (max-width: 900px) {
	/*
	   Two and three tour grids become scroll-snap tracks with the next
	   card peeking. The dots appear with them.
	*/
	.evb-inline-grid.evb-cols-2,
	.evb-inline-grid.evb-cols-3,
	.evb-book-grid.evb-cols-2,
	.evb-book-grid.evb-cols-3 {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.evb-inline-grid::-webkit-scrollbar,
	.evb-book-grid::-webkit-scrollbar {
		display: none;
	}

	.evb-inline-grid.evb-cols-2 > .evb-inline-card,
	.evb-inline-grid.evb-cols-3 > .evb-inline-card,
	.evb-book-grid.evb-cols-2 > .evb-book-card,
	.evb-book-grid.evb-cols-3 > .evb-book-card {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.evb-dots {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		margin-top: 1rem;
	}

	.evb-region-grid.evb-cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.evb-title {
		max-width: 100%;
	}

	.evb-breadcrumb-current {
		max-width: 24ch;
	}

	/* Both horizontal cards stack. */
	.evb-inline-hero,
	.evb-book-hero {
		flex-direction: column;
	}

	.evb-inline-hero-img,
	.evb-book-hero-img {
		flex: none;
		aspect-ratio: 16 / 9;
	}

	.evb-book-hero .evb-book-cta,
	.evb-book-cta {
		align-self: stretch;
	}

	.evb-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.evb-post-nav-card.is-next {
		flex-direction: row;
		text-align: left;
	}

	.evb-share-inner {
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.evb-inline-grid.evb-cols-2 > .evb-inline-card,
	.evb-inline-grid.evb-cols-3 > .evb-inline-card,
	.evb-book-grid.evb-cols-2 > .evb-book-card,
	.evb-book-grid.evb-cols-3 > .evb-book-card {
		flex: 0 0 88%;
	}

	.evb-quote {
		padding-left: 2rem;
	}

	.evb-quote::before {
		font-size: 3.25rem;
	}

	.evb-toc-fab {
		width: 3rem;
		height: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evb-progress-bar,
	.evb-toc-progress-fill,
	.evb-inline-hero,
	.evb-inline-card,
	.evb-book-hero,
	.evb-book-card,
	.evb-region-card,
	.evb-share-btn,
	.evb-post-nav-card,
	.evb-toc-sheet,
	.evb-toc-backdrop,
	.evb-dot::before,
	.evb-inline-hero-img img,
	.evb-inline-card-img img,
	.evb-book-hero-img img,
	.evb-book-card-img img,
	.evb-region-card-img img,
	.evb-inline-link svg,
	.evb-region-link svg,
	.evb-book-cta {
		transition: none;
	}

	.evb-inline-hero:hover,
	.evb-inline-card:hover,
	.evb-book-hero:hover,
	.evb-book-card:hover,
	.evb-region-card:hover,
	.evb-inline-hero:hover .evb-inline-hero-img img,
	.evb-inline-card:hover .evb-inline-card-img img,
	.evb-book-hero:hover .evb-book-hero-img img,
	.evb-book-card:hover .evb-book-card-img img,
	.evb-region-card:hover .evb-region-card-img img,
	.evb-inline-hero:hover .evb-inline-link svg,
	.evb-inline-card:hover .evb-inline-link svg,
	.evb-region-card:hover .evb-region-link svg {
		transform: none;
	}

	.evb-inline-grid,
	.evb-book-grid {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.evb-inline-hero,
	.evb-inline-card,
	.evb-region-card,
	.evb-post-nav-card,
	.evb-toc,
	.evb-share-btn {
		border-color: var(--evb-ink);
	}

	.evb-inline-desc,
	.evb-region-card-desc,
	.evb-toc-list a {
		color: var(--evb-ink);
	}

	.evb-book-hero,
	.evb-book-card {
		border-color: #fff;
	}

	.evb-book-desc {
		color: #fff;
	}
}


/* ================================================
   THE /tours/ PAGE

   Rebuilt from the three captures in salvage/tours-page/. Dropped on
   the way in: the wp_rand() selector prefix, the !important on every
   declaration including the custom property definitions, the 100vw
   full bleed, and the CSS background images.

   NOT TABBED. Curated Experiences and Custom Adventures were panels
   behind a "Choose Your Path" prompt until April 2026. Continuous
   scroll now, so there are no panel or tab rules here at all.

   --ev-deep is the capture's --deep #141211, a shade between bg-deep
   and charcoal used for the alternating section grounds. It is here
   rather than in theme.json's palette because theme.json colours
   appear in the editor's colour picker, and this is structural: it is
   the ground two sections sit on, not a colour anybody should be
   painting a paragraph with.
   ================================================ */

:root {
	--ev-deep: #141211;
	--ev-charcoal: #1a1a1a;
}

.evo {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evo-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

/* ---------- Hero ---------- */

/*
 * THE HERO IS THE LISTING HERO. parts/section-tours-hero.php renders
 * .evpdl-page-hero and its parts, so every rule for the picture, the text
 * column, the height, the phone scrim and the crossfading slides is THE
 * LISTING HERO further up and nothing here. Only the tag pills and the
 * stats strip, which are this page's, are below, and they sit under the
 * lede in the text column with the spacing the old hero gave them.
 */

.evo-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.evo-hero-tag {
	padding: 0.3125rem 0.875rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 3.125rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evo-hero-stats {
	display: flex;
	gap: 3rem;
	margin: 2rem 0 0;
}

.evo-hero-stat-number {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.evo-hero-stat-label {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- Curated experiences ---------- */

.evo-cur {
	background: var(--ev-deep);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	scroll-margin-top: 5rem;
}

.evo-cur-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3.75rem);
}

.evo-cur-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.evo-cur-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evo-cur-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evo-cur-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4.5vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evo-cur-heading em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evo-cur-count {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* ---------- The filter bar ---------- */

.evo-cur-filters {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: end;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(0, 0, 0, 0.28);
}

.evo-cur-filter {
	min-width: 0;
}

.evo-cur-filter-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evo-cur-search-wrap {
	position: relative;
	display: block;
}

.evo-cur-search-wrap svg {
	position: absolute;
	top: 50%;
	left: 0.875rem;
	width: 0.9rem;
	height: 0.9rem;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

.evo-cur-search,
.evo-cur-select {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.3);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.85rem;
	color: #fff;
	transition: border-color 0.2s ease;
}

.evo-cur-search {
	padding-left: 2.25rem;
}

.evo-cur-search::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evo-cur-search:hover,
.evo-cur-select:hover {
	border-color: rgba(212, 196, 168, 0.3);
}

.evo-cur-search:focus-visible,
.evo-cur-select:focus-visible,
.evo-cur-slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evo-cur-slider-wrap {
	display: block;
}

.evo-cur-slider {
	width: 100%;
	accent-color: var(--wp--preset--color--rust);
}

.evo-cur-price-out {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

.evo-cur-clear {
	padding: 0.75rem 1.125rem;
	border: 1px solid rgba(212, 196, 168, 0.25);
	border-radius: 0.5rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evo-cur-clear:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evo-cur-clear:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evo-cur-results {
	margin: 0 0 1.25rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- The grid ---------- */

.evo-cur-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
	transition: opacity 0.25s ease;
}

/*
 * Explore EcoVoyager Destinations, under the grid. The .evpdl-more row
 * from the tours subpages, between two sections that carry their own
 * vertical padding, so its top margin goes and its bottom padding
 * matches the curated section's rhythm. Nothing else is restated: the
 * cards, the title and the media are the row's own rules.
 */
.evo-destinations {
	margin-top: 0;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/*
 * A page turn in place: the grid dims while the next page's cards are
 * on their way and comes back when they land. tours-page.js also holds
 * the grid's height during the swap, so nothing below it jumps.
 */
.evo-cur.is-loading .evo-cur-grid {
	opacity: 0.45;
}

.evo-cur-empty {
	padding: 3rem 1.25rem;
	text-align: center;
}

.evo-cur-empty-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	color: #fff;
}

.evo-cur-empty-text {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Pagination ---------- */

/*
   Real anchors to real URLs, one per page, each self-canonical. The
   version this replaces rendered every tour and toggled a hidden class
   that used display:none !important to beat the card's own
   display:block. Nothing here needs to win a specificity fight because
   nothing here is hiding anything.
*/
.evo-cur-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 2.5rem;
}

.evo-cur-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evo-cur-page:hover {
	border-color: var(--wp--preset--color--gold);
	color: #fff;
}

.evo-cur-page:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evo-cur-page.is-current {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evo-cur-page.is-disabled {
	opacity: 0.25;
}

.evo-cur-page svg {
	width: 1rem;
	height: 1rem;
}

.evo-cur-showing {
	margin: 1rem 0 0;
	font-size: 0.72rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
}

/* ---------- What's included ---------- */

.evo-inc {
	background: var(--ev-charcoal);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	scroll-margin-top: 5rem;
}

.evo-inc-inner,
.evo-steps-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3.75rem);
}

.evo-inc-header,
.evo-steps-header {
	max-width: 44rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

.evo-inc-header .evo-eyebrow,
.evo-steps-header .evo-eyebrow {
	justify-content: center;
}

.evo-inc-heading,
.evo-steps-heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4.5vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evo-inc-heading em,
.evo-steps-heading em,
.evo-final-heading em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evo-inc-desc,
.evo-steps-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.62);
}

/*
   Real photography and no icons. That was a deliberate call in the
   April rebuild: an icon set on top of a photograph set was two visual
   languages doing the same job.
*/
.evo-inc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evo-inc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.evo-inc-card:hover {
	border-color: rgba(212, 196, 168, 0.3);
	transform: translateY(-0.25rem);
}

.evo-inc-card-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.evo-inc-card-img img,
.evo-step-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evo-inc-card:hover .evo-inc-card-img img {
	transform: scale(1.04);
}

.evo-inc-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.375rem 1.5rem;
}

.evo-inc-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.evo-inc-card-text {
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
}

/* ---------- How it works ---------- */

.evo-steps {
	background: var(--ev-deep);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.evo-steps-list {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.evo-step {
	display: grid;
	grid-template-columns: 26rem minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
}

/* Alternating, by class rather than :nth-child, so removing a step in
   the admin cannot leave two photographs side by side. */
.evo-step.is-flipped {
	grid-template-columns: minmax(0, 1fr) 26rem;
}

.evo-step.is-flipped .evo-step-photo {
	order: 2;
}

.evo-step-photo {
	align-self: stretch;
	min-height: 18rem;
	overflow: hidden;
}

.evo-step-body {
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

.evo-step.is-flipped .evo-step-body {
	padding-right: 0;
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.evo-step-number {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 2.5rem;
	line-height: 1;
	color: rgba(212, 196, 168, 0.28);
}

.evo-step-title {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

.evo-step-role {
	margin: 0 0 1rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evo-step-rule {
	display: block;
	width: 2.25rem;
	height: 0.125rem;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--rust);
}

.evo-step-text {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.68);
}

.evo-step-features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evo-step-feature {
	padding: 0.3rem 0.75rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- Final CTA ---------- */

.evo-final {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
	padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 3.75rem);
	text-align: center;
}

.evo-final-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.3) saturate(0.8);
}

.evo-final-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0.75), rgba(17, 16, 16, 0.92));
}

.evo-final-inner {
	position: relative;
	z-index: 2;
	max-width: 44rem;
	margin: 0 auto;
}

.evo-final-inner .evo-eyebrow {
	justify-content: center;
}

.evo-final-heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evo-final-desc {
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

.evo-final-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--ev-rust-btn);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evo-final-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evo-final-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evo-final-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evo-final-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.45);
}

.evo-final-note svg {
	width: 0.85rem;
	height: 0.85rem;
}

/* ================================================
   THE SHARED ENQUIRY MODAL
   parts/section-enquiry-modal.php. The fourth enquiry form on the site
   and the first shared one; the tour booking modal, the bespoke modal
   and Getting There are still their own copies and should move here.
   ================================================ */

.evem-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) 1rem;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.8);
}

body.evem-locked {
	overflow: hidden;
}

.evem {
	position: relative;
	width: 100%;
	max-width: 36rem;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

.evem-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.evem-close svg {
	width: 1rem;
	height: 1rem;
}

.evem-close:hover {
	border-color: rgba(212, 196, 168, 0.4);
	color: #fff;
}

.evem-close:focus-visible,
.evem-fi:focus-visible,
.evem-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evem-header {
	margin-bottom: 0.75rem;
	padding-right: 2.5rem;
}

.evem-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evem-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evem-note {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.45);
}

.evem-fg {
	margin-bottom: 1rem;
}

.evem-fl {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evem-req {
	color: var(--wp--preset--color--rust);
}

.evem-fi {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	color: #fff;
}

.evem-fi::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evem-ft {
	min-height: 5rem;
	line-height: 1.6;
	resize: vertical;
}

.evem-turnstile {
	margin-top: 0.25rem;
}

.evem-error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--ev-form-error);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: #fff;
}

.evem-btns {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.evem-btn {
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.evem-btn-primary {
	background: var(--ev-rust-btn);
	color: #fff;
}

.evem-btn-primary:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evem-btn-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.evem-btn-secondary {
	border-color: rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
}

.evem-btn-secondary:hover {
	border-color: rgba(212, 196, 168, 0.5);
	color: #fff;
}

.evem-done {
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.evem-done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 50%;
	font-size: 1.25rem;
	color: var(--wp--preset--color--gold);
}

.evem-done-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	color: #fff;
}

.evem-done-text {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ================================================
   TOURS PAGE: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evo-cur-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.evo-cur-clear {
		grid-column: 1 / -1;
	}

	.evo-step,
	.evo-step.is-flipped {
		grid-template-columns: minmax(0, 1fr);
	}

	.evo-step.is-flipped .evo-step-photo {
		order: 0;
	}

	.evo-step-photo {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.evo-step-body,
	.evo-step.is-flipped .evo-step-body {
		padding: clamp(1.5rem, 3vw, 2.5rem);
	}
}

@media (max-width: 768px) {
	.evo-hero-tag {
		min-height: 2.25rem;
		display: inline-flex;
		align-items: center;
		padding: 0.4375rem 1rem;
		font-size: 0.72rem;
	}

	.evo-hero-stats {
		gap: 0;
		justify-content: space-between;
		width: 100%;
	}

	.evo-hero-stat {
		flex: 1;
		text-align: center;
	}

	.evo-cur-filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.evo-cur-header {
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.evo-hero-stat-number {
		font-size: 1.5rem;
	}

	.evo-hero-stat-label {
		font-size: 0.58rem;
	}

	.evo-cur-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.evem-btns {
		flex-direction: column-reverse;
	}

	.evem-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evo-cur-grid {
		transition: none;
	}

	.evo-inc-card,
	.evo-inc-card-img img,
	.evo-step-photo img,
	.evo-final-btn,
	.evo-cur-page,
	.evo-cur-clear,
	.evo-cur-search,
	.evo-cur-select,
	.evem-btn,
	.evem-close {
		transition: none;
	}

	.evo-inc-card:hover,
	.evo-inc-card:hover .evo-inc-card-img img,
	.evo-final-btn:hover {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evo-inc-card,
	.evo-step,
	.evo-step-feature,
	.evo-cur-page,
	.evo-cur-filters,
	.evo-cur-search,
	.evo-cur-select,
	.evem,
	.evem-fi {
		border-color: #fff;
	}

	.evo-inc-card-text,
	.evo-step-text,
	.evo-inc-desc,
	.evo-steps-desc,
	.evo-final-desc,
	.evo-cur-results {
		color: #fff;
	}
}


/* ================================================
   THE /inspiration/ PAGE

   Rebuilt from salvage/inspiration-page/inspiration-page-LIVE-20260611.html.
   Dropped on the way in: the per-render uniqid in every selector and
   every id, the !important, and the 100vw.

   Two things in here are load-bearing rather than decorative:

   .evi-hero-bg has an aspect ratio, so the hero image arriving does not
   move the page. The 1 June review listed that as already correct and
   it stays correct.

   .evi-filters is display:none until the script unhides it. Filtering
   is client driven, so the controls do nothing without it.
   ================================================ */

.evi {
	background: var(--wp--preset--color--bg-deep);
	color: #fff;
}

/* ---------- Hero ---------- */

.evi-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 82vh;
	min-height: 82svh;
	overflow: hidden;
	padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 5vw, 3.75rem) clamp(4rem, 8vh, 6rem);
	text-align: center;
	background: var(--wp--preset--color--bg-deep);
}

/*
   The aspect ratio is what stops the layout shifting when the
   photograph lands. Absolutely positioned images have no intrinsic
   contribution to their parent, so without it the hero is only as tall
   as its text until the file arrives.
*/
.evi-hero-bg {
	position: absolute;
	inset: 0;
	aspect-ratio: 16 / 9;
	min-height: 100%;
}

.evi-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.42) saturate(0.85);
}

.evi-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 0%, rgba(17, 16, 16, 0.55) 100%),
		linear-gradient(to bottom, rgba(17, 16, 16, 0.55) 0%, rgba(17, 16, 16, 0.25) 40%, rgba(17, 16, 16, 0.9) 100%);
}

.evi-hero-content {
	position: relative;
	z-index: 2;
	max-width: 52rem;
}

.evi-hero-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	margin: 0 0 1.5rem;
}

.evi-hero-badge-line {
	display: block;
	width: clamp(1.5rem, 6vw, 3rem);
	height: 0.0625rem;
	background: rgba(212, 196, 168, 0.5);
}

.evi-hero-badge-text {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evi-hero-title {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 8vw, 6rem);
	font-weight: 400;
	line-height: 1.02;
	color: #fff;
}

.evi-hero-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}

.evi-hero-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}

.evi-hero-rule-line {
	display: block;
	width: clamp(2rem, 8vw, 4.5rem);
	height: 0.0625rem;
	background: linear-gradient(90deg, transparent, rgba(212, 196, 168, 0.55));
}

.evi-hero-rule-line:last-of-type {
	background: linear-gradient(90deg, rgba(212, 196, 168, 0.55), transparent);
}

.evi-hero-rule-diamond {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}

.evi-hero-subtitle {
	max-width: 40rem;
	margin: 0 auto;
	font-size: 0.98rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72);
}

.evi-hero-scroll {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 6vh, 4rem);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.25s ease;
}

.evi-hero-scroll:hover {
	color: var(--wp--preset--color--gold);
}

.evi-hero-scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.evi-hero-scroll-line {
	display: block;
	width: 0.0625rem;
	height: 2.5rem;
	background: linear-gradient(to bottom, rgba(212, 196, 168, 0.6), transparent);
}

/* ---------- The intro prose ---------- */

/*
   The block that did not exist. Narrow measure, because it is the only
   thing on the page anybody is expected to read as prose rather than
   scan as a grid.
*/
.evi-intro {
	background: var(--ev-deep);
	padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
}

.evi-intro-inner {
	max-width: 46rem;
	margin: 0 auto;
}

.evi-intro-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evi-intro-body {
	font-size: 1rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.72);
}

.evi-intro-body p {
	margin: 0 0 1.25rem;
}

.evi-intro-body p:last-child {
	margin-bottom: 0;
}

.evi-intro-body a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.0625rem;
	transition: color 0.2s ease;
}

.evi-intro-body a:hover {
	color: var(--wp--preset--color--gold-light);
}

.evi-intro-body a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- The listing ---------- */

.evi-main {
	background: var(--ev-deep);
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 6rem);
	scroll-margin-top: 5rem;
}

.evi-main-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3.75rem);
}

.evi-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.evi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evi-eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evi-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4.5vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evi-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

/* The heading takes focus when the grid changes, and a focus ring on a
   heading nobody clicked is confusing, so it is only shown to keyboard
   navigation, which is what focus-visible already means. */
.evi-title:focus {
	outline: none;
}

.evi-title:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.evi-count {
	margin: 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- Filters ---------- */

.evi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.evi-filter {
	padding: 0.6rem 1.1rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 3.125rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.62);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evi-filter:hover {
	border-color: rgba(212, 196, 168, 0.45);
	color: #fff;
}

.evi-filter.is-active {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evi-filter:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- The grid ---------- */

.evi-grid-wrap {
	position: relative;
}

/*
   Three across, then two, then one. auto-fill rather than a fixed
   three, so a last row of one or two does not stretch to fill.
*/
.evi-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* While a fetch is in flight. Not a spinner: the cards are still there
   and still readable, they are simply about to be replaced. */
.evi.is-loading .evi-grid {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.evi-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.evi-card:hover {
	border-color: rgba(212, 196, 168, 0.32);
	transform: translateY(-0.25rem);
}

.evi-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evi-card-img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
}

.evi-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evi-card:hover .evi-card-img img {
	transform: scale(1.04);
}

.evi-card-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	padding: 0.3rem 0.7rem;
	border-radius: 3.125rem;
	background: rgba(17, 16, 16, 0.78);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evi-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.5rem;
}

.evi-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.42);
}

.evi-card-date,
.evi-card-read {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.evi-card-meta svg {
	width: 0.8rem;
	height: 0.8rem;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}

.evi-card-title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.evi-card-rule {
	display: block;
	width: 2rem;
	height: 0.125rem;
	margin-bottom: 0.875rem;
	background: var(--wp--preset--color--rust);
}

.evi-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 1.25rem;
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
}

.evi-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evi-card-more svg {
	width: 0.85rem;
	height: 0.85rem;
	transition: transform 0.25s ease;
}

.evi-card:hover .evi-card-more svg {
	transform: translateX(0.2rem);
}

.evi-empty {
	padding: 4rem 1.25rem;
	text-align: center;
}

.evi-empty-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.4rem;
	color: #fff;
}

.evi-empty-text {
	max-width: 32rem;
	margin: 0 auto;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Pagination ---------- */

.evi-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 2.5rem;
}

.evi-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border: 1px solid rgba(212, 196, 168, 0.2);
	border-radius: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evi-page:hover {
	border-color: var(--wp--preset--color--gold);
	color: #fff;
}

.evi-page:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evi-page.is-current {
	border-color: var(--wp--preset--color--rust);
	background: var(--ev-rust-btn);
	color: #fff;
}

.evi-page svg {
	width: 1rem;
	height: 1rem;
}

.evi-page-gap {
	padding: 0 0.25rem;
	color: rgba(255, 255, 255, 0.3);
}

/* ---------- Newsletter ---------- */

.evi-news {
	background: var(--ev-charcoal);
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3.75rem);
}

.evi-news-inner {
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 3rem);
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
}

.evi-news-line {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4rem;
	height: 0.125rem;
	background: var(--wp--preset--color--rust);
	transform: translateX(-50%);
}

.evi-news-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evi-news-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 400;
	color: #fff;
}

.evi-news-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evi-news-desc {
	max-width: 34rem;
	margin: 0 auto 1.75rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.62);
}

.evi-news-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9rem 1.75rem;
	border-radius: 0.5rem;
	background: var(--ev-rust-btn);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evi-news-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evi-news-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evi-news-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* ---------- Final CTA ---------- */

.evi-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3.75rem);
	background: var(--wp--preset--color--bg-deep);
	text-align: center;
}

.evi-cta-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.3) saturate(0.8);
}

.evi-cta-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0.78), rgba(17, 16, 16, 0.93));
}

.evi-cta-inner {
	position: relative;
	z-index: 2;
	max-width: 44rem;
	margin: 0 auto;
}

.evi-cta-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evi-cta-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evi-cta-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evi-cta-desc {
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

.evi-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin: 0;
}

.evi-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	background: var(--ev-rust-btn);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.evi-cta-btn:hover {
	background: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evi-cta-btn:focus-visible,
.evi-cta-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evi-cta-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evi-cta-link {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.evi-cta-link:hover {
	color: var(--wp--preset--color--gold-light);
}

/* ================================================
   INSPIRATION: BREAKPOINTS
   ================================================ */

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

@media (max-width: 768px) {
	.evi-hero {
		min-height: 70vh;
		min-height: 70svh;
	}

	.evi-header {
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.evi-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.evi-hero-subtitle {
		font-size: 0.9rem;
	}

	.evi-cta-actions {
		flex-direction: column;
		gap: 1rem;
	}

	.evi-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evi-card,
	.evi-card-img img,
	.evi-card-more svg,
	.evi-filter,
	.evi-page,
	.evi-news-btn,
	.evi-cta-btn,
	.evi-hero-scroll,
	.evi.is-loading .evi-grid {
		transition: none;
	}

	.evi-card:hover,
	.evi-card:hover .evi-card-img img,
	.evi-card:hover .evi-card-more svg,
	.evi-news-btn:hover,
	.evi-cta-btn:hover {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evi-card,
	.evi-filter,
	.evi-page,
	.evi-news-inner {
		border-color: #fff;
	}

	.evi-card-excerpt,
	.evi-card-meta,
	.evi-count,
	.evi-hero-subtitle,
	.evi-intro-body,
	.evi-news-desc,
	.evi-cta-desc {
		color: #fff;
	}
}


/* ================================================
   THE /contact/ PAGE

   The 25 March redesign, from
   salvage/contact-page/contact-page-LIVE-20260527.html. Dark charcoal
   editorial, compact header, three-column horizontal form, contact
   methods as a strip below it.

   Dropped on the way in: the !important on nearly every declaration,
   which the March work added to beat the old theme and which Astra and
   Elementor's removal made pointless; the width:100vw with
   margin-left:calc(-50vw + 50%) full bleed, which is unnecessary
   because these parts are direct children of body; and the em font
   sizes, which were not load-bearing.

   NO HERO RULES. The capture's own notes describe one; the file has
   neither the markup nor a single selector for it. See
   parts/section-contact-header.php.

   THE SELECT ARROW TRAP
   The March fix, preserved: the shared select rule must set
   background-color, never the `background` shorthand. The shorthand
   resets background-image, which is where the arrow lives, and the
   selects fall back to the browser's own control.
   ================================================ */

.evc {
	background: var(--ev-charcoal);
	color: #fff;
}

body.evc-locked {
	overflow: hidden;
}

/* ---------- Header ---------- */

.evc-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
}

.evc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evc-eyebrow-line {
	display: block;
	width: 1.75rem;
	height: 0.0625rem;
	background: var(--wp--preset--color--rust);
}

.evc-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evc-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}

.evc-header-logo {
	flex-shrink: 0;
}

.evc-header-logo img {
	display: block;
	width: auto;
	max-width: 11rem;
	height: auto;
}

/* ---------- The form ---------- */

.evc-form-section {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evc-form-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 5vw, 4rem);
}

.evc-form-intro {
	max-width: 46rem;
	margin: 0 0 2.5rem;
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.7);
}

.evc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}

.evc-span-3 {
	grid-column: 1 / -1;
}

.evc-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.evc-label {
	margin-bottom: 0.625rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ev-rust-text);
}

.evc-req {
	color: var(--wp--preset--color--rust);
}

.evc-input {
	display: block;
	width: 100%;
	/*
	   There is no global border-box reset in this stylesheet, and this
	   control is width:100% with 1.25rem of padding and a border. Without
	   this it is its container plus 2.6rem, which overflowed the page
	   below 900px where the grid stops being three columns.
	*/
	box-sizing: border-box;
	min-height: 3.375rem;
	padding: 1rem 1.25rem;
	/*
	   background-COLOR, not the shorthand. The shorthand resets
	   background-image, and the select below paints its arrow there.
	*/
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.625rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	line-height: 1.4;
	color: #fff;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.evc-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.evc-input:hover {
	border-color: rgba(212, 196, 168, 0.28);
}

.evc-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.06);
}

.evc-input.has-error {
	border-color: var(--ev-form-error);
	background-color: rgba(239, 68, 68, 0.06);
}

.evc-select {
	padding-right: 2.75rem;
	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B8621B" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg>');
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* The open list is the browser's, and on a dark control it needs a
   dark ground or the options come back white on white. */
.evc-select option {
	background-color: var(--ev-charcoal);
	color: #fff;
}

.evc-textarea {
	min-height: 8.5rem;
	line-height: 1.65;
	resize: vertical;
}

.evc-error {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--ev-form-error);
}

.evc-turnstile {
	margin-top: 0.25rem;
}

.evc-submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 0.5rem;
}

.evc-submit-note {
	max-width: 34rem;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.45);
}

.evc-submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.625rem;
	padding: 1.0625rem 2.25rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--ev-rust-btn);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.3);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.evc-submit:hover {
	background: var(--wp--preset--color--rust-dark);
	border-color: var(--wp--preset--color--rust-dark);
	transform: translateY(-1px);
}

.evc-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evc-submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.evc-submit svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.evc-submit.is-sending span::after {
	content: '\2026';
}

.evc-form-msg {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--ev-form-error);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #fff;
}

/* ---------- Connect With Us ---------- */

.evc-connect {
	padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 7vw, 6rem);
}

.evc-connect-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.evc-connect-header {
	margin-bottom: 2rem;
}

.evc-connect-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	color: #fff;
}

.evc-connect-subtitle {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evc-methods {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1rem;
	list-style: none;
}

.evc-method {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem 1.75rem;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
	transition: background 0.3s ease;
}

.evc-method:last-child {
	border-right: 0;
}

.evc-method:hover {
	background: rgba(255, 255, 255, 0.02);
}

.evc-method-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(184, 98, 27, 0.14);
	color: var(--wp--preset--color--gold);
}

.evc-method-icon.is-instagram {
	background: rgba(225, 48, 108, 0.14);
	color: #e1306c;
}

.evc-method-icon.is-facebook {
	background: rgba(24, 119, 242, 0.14);
	color: #1877f2;
}

.evc-method-icon svg {
	width: 1.1rem;
	height: 1.1rem;
}

.evc-method-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.evc-method-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evc-method-value {
	font-size: 0.85rem;
	line-height: 1.5;
	color: #fff;
	overflow-wrap: break-word;
}

/* No underline. It was removed deliberately and the hover colour is
   what carries the affordance. */
.evc-method-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.evc-method-link:hover {
	color: var(--wp--preset--color--gold);
}

.evc-method-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The confirmation ---------- */

.evc-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(0.625rem);
}

.evc-modal {
	position: relative;
	width: 100%;
	max-width: 30rem;
	padding: clamp(2rem, 5vw, 3.4375rem) clamp(1.5rem, 4vw, 3.125rem);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1.5rem;
	background: var(--ev-charcoal);
	box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.6);
	text-align: center;
}

.evc-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.evc-modal-close:hover {
	border-color: rgba(212, 196, 168, 0.4);
	color: #fff;
}

.evc-modal-close svg {
	width: 1rem;
	height: 1rem;
}

.evc-modal-close:focus-visible,
.evc-modal-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evc-modal-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.5rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 50%;
	color: var(--wp--preset--color--gold);
}

.evc-modal-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.evc-modal-title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 400;
	color: #fff;
}

.evc-modal-text {
	margin: 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.62);
}

.evc-modal-btn {
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: 3.125rem;
	background: var(--ev-rust-btn);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evc-modal-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

/* ================================================
   CONTACT: BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
	.evc-methods {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.evc-method:nth-child(3) {
		border-right: 0;
	}
}

@media (max-width: 900px) {
	.evc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.evc-header-inner {
		align-items: flex-start;
	}

	.evc-header-logo img {
		max-width: 8rem;
	}
}

@media (max-width: 768px) {
	.evc-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.evc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.evc-methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.evc-method {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.evc-method:last-child {
		border-bottom: 0;
	}

	.evc-submit-row {
		flex-direction: column;
		align-items: stretch;
	}

	.evc-submit {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.evc-methods {
		grid-template-columns: minmax(0, 1fr);
	}

	.evc-input {
		font-size: 1rem;
	}
}

@media (max-width: 360px) {
	.evc-title {
		font-size: 2.1rem;
	}

	.evc-form-intro {
		font-size: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evc-input,
	.evc-submit,
	.evc-method,
	.evc-method-link,
	.evc-modal-close,
	.evc-modal-btn {
		transition: none;
	}

	.evc-submit:hover {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evc-input,
	.evc-methods,
	.evc-method,
	.evc-modal {
		border-color: #fff;
	}

	.evc-form-intro,
	.evc-submit-note,
	.evc-connect-subtitle,
	.evc-method-label,
	.evc-modal-text {
		color: #fff;
	}
}

/* ================================================
   STATIC PAGES, SEARCH FORM, SEARCH RESULTS

   page.php is light and shares the blog's prose rules; the palette is
   declared once for .evb and .evp-page together, further up. Only the
   page furniture is here.

   search.php and the 404 stay dark. The line: long-form prose is
   light, navigation surfaces are dark.
   ================================================ */

/* ---------- page.php: the header ---------- */

.evp-head {
	border-bottom: 1px solid var(--evb-line);
	background: var(--evb-warm);
}

.evp-head-inner {
	max-width: 48rem;
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 4vw, 3rem);
}

.evp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--evb-ink-mute);
}

.evp-crumbs a {
	color: var(--evb-ink-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.evp-crumbs a:hover {
	color: var(--ev-rust-text);
}

.evp-crumbs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
}

.evp-crumbs-sep {
	color: var(--evb-ink-mute);
}

.evp-crumbs-current {
	max-width: 40ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--evb-ink-strong);
}

.evp-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--evb-ink-strong);
}

.evp-subtitle {
	max-width: 46ch;
	margin: 1rem 0 0;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.7;
	color: var(--evb-ink-soft);
}

.evp-updated {
	margin: 1.5rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--evb-ink-mute);
}

/* ---------- page.php: the reading column ---------- */

.evp-body {
	max-width: 48rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vw, 6rem);
}

/*
   70 to 75 characters. The measure is set here rather than on
   .evb-article, which is a grid column beside a sticky sidebar and is
   sized by the grid.
*/
.evp-prose {
	max-width: 72ch;
}

/* The first heading in the body should not push away from the header. */
.evp-prose > *:first-child {
	margin-top: 0;
}

.evp-prose > *:last-child {
	margin-bottom: 0;
}

/*
   the_content() emits block markup, which the blog's flexible content
   never does. These are the block wrappers a text page actually
   produces; everything inside them is already covered by the shared
   prose rules.
*/
.evp-prose figure {
	margin: 2rem 0;
}

.evp-prose figcaption {
	margin-top: 0.75rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--evb-ink-mute);
}

.evp-prose hr {
	margin: 3rem 0;
	border: 0;
	border-top: 1px solid var(--evb-line);
}

/*
   THE TABLE RULES SERVE THE BLOG BODY TOO. A text_section is a wysiwyg
   field, so an article can carry a table (the festival dates in the
   Tibet guide are the first), and without .evb-article on these
   selectors it rendered as a bare browser table: no borders, no header
   ground, 1px of padding.
*/
.evb-article table,
.evp-prose table {
	width: 100%;
	margin: 0 0 1.75rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.evb-article th,
.evb-article td,
.evp-prose th,
.evp-prose td {
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--evb-line);
	text-align: left;
	vertical-align: top;
}

.evb-article th,
.evp-prose th {
	background: var(--evb-warm);
	font-weight: 600;
	color: var(--evb-ink-strong);
}

/* A wide table scrolls in its own box rather than the page. */
.evp-prose .wp-block-table {
	overflow-x: auto;
}

/*
   The blog body has no block wrapper to scroll in, so on a phone the
   table itself becomes the scrolling box. It stays full width because
   its content is always wider than the column, and only scrolls when
   the columns cannot shrink any further.
*/
@media (max-width: 640px) {
	.evb-article table {
		display: block;
		overflow-x: auto;
		font-size: 0.88rem;
	}

	.evb-article th,
	.evb-article td {
		padding: 0.55rem 0.65rem;
	}
}

.evp-prose code {
	padding: 0.1em 0.35em;
	border-radius: 0.25rem;
	background: var(--evb-warm);
	font-size: 0.92em;
}

/* ---------- The search form ---------- */

.evp-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	width: 100%;
}

.evp-searchform-field {
	box-sizing: border-box;
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 0.04);
	font-family: inherit;
	font-size: 0.95rem;
	color: #fff;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.evp-searchform-field::placeholder {
	color: rgba(255, 255, 255, 0.38);
}

.evp-searchform-field:focus {
	border-color: var(--wp--preset--color--gold);
	background-color: rgba(255, 255, 255, 0.07);
	outline: none;
}

.evp-searchform-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease;
}

.evp-searchform-submit svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.evp-searchform-submit:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evp-searchform-field:focus-visible,
.evp-searchform-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- 404: the search box ---------- */

.evp-404-search {
	max-width: 26rem;
	margin: 0 auto 2rem;
	text-align: left;
}

/* ---------- Search results ---------- */

.evps {
	min-height: 60vh;
	padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 5rem) clamp(4rem, 8vw, 6rem);
	background: var(--wp--preset--color--bg-deep);
}

.evps-inner {
	max-width: 64rem;
	margin: 0 auto;
}

.evps-head {
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.evps-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evps-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	/*
	   A search term is somebody's typing, not our copy: it can be one
	   unbroken 80-character string, and without this it would push the
	   page sideways.
	*/
	overflow-wrap: break-word;
}

.evps-title em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

.evps-count {
	margin: 0.875rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

.evps-count-page::before {
	content: '·';
	margin: 0 0.5rem;
	color: rgba(255, 255, 255, 0.3);
}

.evps-form {
	max-width: 30rem;
	margin-top: 1.75rem;
}

.evps-group {
	margin-top: clamp(2.25rem, 5vw, 3rem);
}

.evps-group-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.evps-group-count {
	padding: 0.15rem 0.5rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.07);
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
}

/*
   The grid the reused cards sit in. A layout rule, not a card: the
   tour card and the blog card are exactly the ones the tours listing
   and the inspiration grid render, and this only decides how many fit
   across.
*/
.evps-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}

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

.evps-result + .evps-result {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.evps-result-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0.75rem;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.evps-result-link:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

.evps-result-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evps-result-media {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border-radius: 0.375rem;
	background: rgba(255, 255, 255, 0.05);
}

.evps-result-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evps-result-body {
	flex: 1 1 auto;
	min-width: 0;
}

.evps-result-title {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	line-height: 1.35;
	color: #fff;
}

.evps-result-text {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.86rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.45);
}

.evps-result-arrow {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.25);
	transition: color 0.2s ease, transform 0.2s ease;
}

.evps-result-arrow svg {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evps-result-link:hover .evps-result-arrow {
	color: var(--wp--preset--color--gold);
	transform: translateX(0.2rem);
}

/* ---------- Search: pagination ---------- */

.evps-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.evps-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.55rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.375rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.evps-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--gold);
	color: #fff;
}

.evps-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evps-pagination .page-numbers.dots {
	border-color: transparent;
	color: rgba(255, 255, 255, 0.35);
}

.evps-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- Search: nothing found ---------- */

.evps-empty {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.evps-empty-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 400;
	color: #fff;
}

.evps-empty-text {
	max-width: 44ch;
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evps-empty-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.evps-empty-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9rem 1.6rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.25s ease;
}

.evps-empty-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evps-empty-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evps-empty-link {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evps-empty-btn:focus-visible,
.evps-empty-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.evps-result-media {
		width: 3.5rem;
		height: 3.5rem;
	}

	.evps-result-title {
		font-size: 1.02rem;
	}

	.evps-result-arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evp-searchform-field,
	.evp-searchform-submit,
	.evps-result-link,
	.evps-result-arrow,
	.evps-pagination .page-numbers,
	.evps-empty-btn {
		transition: none;
	}

	.evps-result-link:hover .evps-result-arrow {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.evp-searchform-field,
	.evps-pagination .page-numbers {
		border-color: #fff;
	}

	.evps-count,
	.evps-group-title,
	.evps-result-text,
	.evps-empty-text {
		color: #fff;
	}
}

/* ================================================
   THE ABOUT PAGE

   Ported from six raw-HTML captures written for Elementor HTML
   widgets, each carrying its own style block. Everything below was
   rewritten on the way in: no !important anywhere, rem throughout, and
   the Elementor :has() wrapper override deleted rather than
   propagated.

   THE GROUNDS ALTERNATE. The captures had Mission and What We Do both
   on bg-deep and adjacent, so the seam between them vanished. Mission
   moves to charcoal, which fixes that seam and happens to give the
   whole page a clean ladder:

       hero        bg-deep
       mission     charcoal
       what we do  bg-deep
       our story   charcoal
       why         bg-deep

   BREAKPOINTS ARE THE HERO'S LADDER, 1200 / 1024 / 768 / 480 / 360.
   Why EcoVoyager and What We Do shipped with a single 768 rule, so
   their two-column grids held all the way down to 769px. The missing
   steps are added here.

   REVEALS ARE GATED ON .evpwt-js, the class a tiny inline snippet in
   wp_head puts on <html>. The hidden state only exists when the script
   that undoes it can run, so with JS off the page renders complete.
   The hero's entrance animations are not gated: they are pure CSS
   keyframes and finish on their own.

   STAGGERS USE --ev-i, an index the template sets on each card. The
   captures hardcoded nth-child(2), (3) and (4), so a fifth card would
   have revealed with no delay and arrived ahead of the rest.
   ================================================ */

:root {
	/*
	   The raised panel behind a Why EcoVoyager card. Lighter than
	   bg-deep so the cards read as lifted without needing a shadow
	   until hover. Not a theme.json palette entry: it is a structural
	   surface, not a colour anybody should paint text with.
	*/
	--ev-panel: #181818;
}

/* ================================================
   HERO
   ================================================ */

.ev-about-hero {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	min-height: 100vh;
	/* clip, not hidden: hidden creates a scroll context and breaks
	   position: sticky on any descendant. */
	overflow: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
	box-sizing: border-box;
}

.ev-about-hero *,
.ev-about-hero *::before,
.ev-about-hero *::after {
	box-sizing: border-box;
}

/* ---------- Left: the content panel ---------- */

/*
   The solid background here is what hides the video underneath on
   desktop. There is no clipping involved.
*/
.ev-about-hero__content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4rem 5rem 5rem;
	background: var(--wp--preset--color--bg-deep);
}

.ev-about-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	opacity: 0;
	animation: evAboutHeroFadeUp 0.8s ease-out 0.2s forwards;
}

.ev-about-hero__eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

/* The LCP element. Nothing above it is deferred. */
.ev-about-hero__title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.ev-about-hero__title em {
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
	color: var(--wp--preset--color--rust);
}

.ev-about-hero__rule {
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	opacity: 0;
	animation: evAboutHeroFadeUp 0.7s ease-out 0.6s forwards;
}

.ev-about-hero__subtitle {
	max-width: 28.75rem;
	margin: 0 0 2.75rem;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
	opacity: 0;
	animation: evAboutHeroFadeUp 0.8s ease-out 0.65s forwards;
}

.ev-about-hero__cta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	opacity: 0;
	animation: evAboutHeroFadeUp 0.8s ease-out 0.8s forwards;
}

/*
   THIS IS THE CANONICAL BUTTON SPEC for the site: 1rem 2rem padding,
   0.72rem type, a 3.125rem radius, and the gold-to-rust gradient
   revealed on hover by a ::before rather than by swapping background.
*/
.ev-about-hero__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-width: 17.5rem;
	padding: 1rem 2rem;
	overflow: hidden;
	border-radius: 3.125rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.ev-about-hero__btn > * {
	position: relative;
	z-index: 1;
}

.ev-about-hero__btn svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	transition: transform 0.3s ease, fill 0.3s ease;
}

.ev-about-hero__btn--primary {
	border: 2px solid var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
}

.ev-about-hero__btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ev-about-hero__btn--primary svg {
	fill: #fff;
}

.ev-about-hero__btn--primary:hover::before {
	opacity: 1;
}

.ev-about-hero__btn--primary:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.875rem 2.25rem rgba(184, 98, 27, 0.55);
}

.ev-about-hero__btn--primary:hover svg {
	transform: translateX(0.1875rem);
}

.ev-about-hero__btn--secondary {
	border: 2px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
}

.ev-about-hero__btn--secondary svg {
	fill: rgba(255, 255, 255, 0.85);
}

.ev-about-hero__btn--secondary:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.ev-about-hero__btn--secondary:hover svg {
	transform: translateX(0.1875rem);
	fill: #fff;
}

.ev-about-hero__btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.ev-about-hero__scroll {
	position: absolute;
	bottom: 2.25rem;
	left: 5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.32);
	opacity: 0;
	animation: evAboutHeroFadeUp 0.8s ease-out 1.4s forwards;
}

.ev-about-hero__scroll-line {
	position: relative;
	display: block;
	width: 2.25rem;
	height: 0.0625rem;
	overflow: clip;
	background: rgba(255, 255, 255, 0.2);
}

/*
   translateX, not the left property, so the pulse stays on the
   compositor thread instead of laying out every frame. will-change
   promotes it before the animation starts.

   This is the only animation on the page that loops forever, and it
   is on a pseudo-element, which is why pausing it off screen is a
   class on the section rather than a style set from script. The
   capture set animationPlayState on the section itself and that
   pauses nothing: the property is not inherited and the section has
   no animation of its own.
*/
.ev-about-hero__scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--rust);
	animation: evAboutHeroScrollPulse 2.4s ease-in-out 2s infinite;
	will-change: transform;
}

.ev-about-hero.is-offscreen .ev-about-hero__scroll-line::after {
	animation-play-state: paused;
}

@keyframes evAboutHeroScrollPulse {
	0% {
		transform: translateX(-100%);
	}

	50% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

@keyframes evAboutHeroFadeUp {
	from {
		opacity: 0;
		transform: translateY(1.375rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Right: the video panel ---------- */

.ev-about-hero__media {
	position: relative;
	overflow: clip;
	background: var(--wp--preset--color--bg-deep);
}

.ev-about-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* The left edge fades into the content panel. */
.ev-about-hero__media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.85) 4%,
		rgba(17, 16, 16, 0.3) 12%,
		rgba(17, 16, 16, 0.06) 22%,
		transparent 35%);
	pointer-events: none;
}

.ev-about-hero__media::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 35%;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.5) 0%, transparent 100%);
	pointer-events: none;
}

/* ================================================
   MISSION
   ================================================ */

.ev-mission {
	padding: 5.625rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	overflow: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--ev-charcoal);
}

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

.ev-mission__wrap {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.ev-mission__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 35rem;
	overflow: clip;
	border-radius: 1.625rem;
	box-shadow: 0 1.875rem 4.375rem rgba(0, 0, 0, 0.55);
}

/* ---------- The carousel ---------- */

.ev-mission__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ev-mission__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}

/*
   The first slide carries is-active in the markup, so the right image
   is on screen before any script runs and stays there if none does.
*/
.ev-mission__slide.is-active {
	opacity: 1;
	z-index: 1;
}

/*
   The zoom runs continuously on every slide rather than restarting on
   each change, which is what stops a visible snap at the crossfade.
*/
.ev-mission__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.05);
	animation: evMissionKen 18s ease-in-out infinite alternate;
}

@keyframes evMissionKen {
	0% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1.2);
	}
}

/*
   The gradient sits above the slides and below the card. Move it
   either way and the copy loses its contrast or the photograph
   disappears. It runs 0.92 where the card sits down to 0.1 on the open
   side, so the image stays readable.
*/
.ev-mission__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(100deg,
		rgba(17, 16, 16, 0.92) 0%,
		rgba(17, 16, 16, 0.72) 38%,
		rgba(17, 16, 16, 0.25) 70%,
		rgba(17, 16, 16, 0.1) 100%);
	pointer-events: none;
}

/* ---------- The card ---------- */

.ev-mission__card {
	position: relative;
	z-index: 3;
	max-width: 33.75rem;
	margin: 0 0 0 6%;
	padding: 2.875rem 2.875rem 3.125rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.25rem;
	background: rgba(17, 16, 16, 0.55);
	backdrop-filter: blur(6px);
}

.evpwt-js .ev-mission__card {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.ev-mission.is-in .ev-mission__card {
	opacity: 1;
	transform: translateY(0);
}

.ev-mission__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.ev-mission__eyebrow::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
}

.ev-mission__title {
	margin: 0 0 1.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.2vw, 2.7rem);
	font-weight: 400;
	line-height: 1.18;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.ev-mission__title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.ev-mission__statement {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.82);
}

/* The link out to /philosophy/, above the tagline in the card. */
.ev-mission__more {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
}

.ev-mission__more a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 0.0625rem solid currentColor;
	padding-bottom: 0.125rem;
}

.ev-mission__more a:hover,
.ev-mission__more a:focus-visible {
	color: inherit;
}

.ev-mission__tagline {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

.ev-mission__tagline::before {
	content: '';
	display: block;
	width: 1.875rem;
	height: 0.125rem;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
}

/* ================================================
   WHAT WE DO

   --ev-wwd-gutter is read by both the wrap's padding and the mobile
   carousel's negative margin. They have to be the same number for the
   strip to reach the viewport edge, and two literals drift.
   ================================================ */

.ev-wwd {
	--ev-wwd-gutter: 1.5rem;

	padding: 6.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	overflow: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

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

.ev-wwd__wrap {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 var(--ev-wwd-gutter);
}

.ev-wwd__head {
	margin-bottom: 3.375rem;
	text-align: center;
}

.evpwt-js .ev-wwd__head {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ev-wwd.is-in .ev-wwd__head {
	opacity: 1;
	transform: translateY(0);
}

.ev-wwd__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.125rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.ev-wwd__eyebrow::before,
.ev-wwd__eyebrow::after {
	content: '';
	display: block;
	width: 2.125rem;
	height: 0.09375rem;
}

.ev-wwd__eyebrow::before {
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust));
}

.ev-wwd__eyebrow::after {
	background: linear-gradient(90deg, var(--wp--preset--color--rust), transparent);
}

.ev-wwd__title {
	margin: 0 0 1.125rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 4.2vw, 3.6rem);
	font-weight: 400;
	line-height: 1.12;
	color: #fff;
}

.ev-wwd__title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.ev-wwd__sub {
	max-width: 37.5rem;
	margin: 0 auto;
	font-size: 1.02rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.6);
}

.ev-wwd__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.625rem;
}

.ev-wwd__card {
	position: relative;
	height: 26.25rem;
	overflow: clip;
	border-radius: 1.375rem;
	transition: box-shadow 0.4s ease;
}

.evpwt-js .ev-wwd__card {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
}

.ev-wwd.is-in .ev-wwd__card {
	opacity: 1;
	transform: translateY(0);
	/* Index driven, so a fifth card keeps the sequence. */
	transition-delay: calc(var(--ev-i, 0) * 0.08s);
}

.ev-wwd__card:hover {
	box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.4);
}

/*
   A real img, not a background. These four files are the ones whose
   CSS backgrounds rendered broken once already.
*/
.ev-wwd__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.8s ease;
}

.ev-wwd__card:hover .ev-wwd__img {
	transform: scale(1.08);
}

.ev-wwd__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.15) 100%);
	transition: background 0.4s ease;
	pointer-events: none;
}

.ev-wwd__card:hover .ev-wwd__scrim {
	background: linear-gradient(0deg, rgba(184, 98, 27, 0.92) 0%, rgba(184, 98, 27, 0.5) 45%, rgba(0, 0, 0, 0.2) 100%);
}

.ev-wwd__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 2.25rem;
}

.ev-wwd__num {
	display: block;
	margin-bottom: 0.625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 3.4rem;
	line-height: 1;
	color: rgba(212, 196, 168, 0.35);
	transition: color 0.4s ease;
}

.ev-wwd__card:hover .ev-wwd__num {
	color: rgba(255, 255, 255, 0.55);
}

.ev-wwd__card-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.7rem;
	font-weight: 500;
	color: #fff;
}

.ev-wwd__uline {
	display: block;
	width: 3rem;
	height: 0.125rem;
	margin-bottom: 0.875rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	transition: width 0.4s ease, background 0.4s ease;
}

.ev-wwd__card:hover .ev-wwd__uline {
	width: 5.625rem;
	background: linear-gradient(90deg, #fff, transparent);
}

.ev-wwd__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

/* ================================================
   OUR STORY
   ================================================ */

.ev-story {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 42.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	overflow: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--ev-charcoal);
}

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

.ev-story__pic {
	position: relative;
	overflow: clip;
}

.ev-story__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.04);
	animation: evStoryKen 24s ease-in-out infinite alternate;
}

@keyframes evStoryKen {
	0% {
		transform: scale(1.04) translateY(0);
	}

	100% {
		transform: scale(1.12) translateY(-0.75rem);
	}
}

/* The photo dissolves into the panel rather than meeting it at a line. */
.ev-story__pic::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
		rgba(26, 26, 26, 0) 0%,
		rgba(26, 26, 26, 0.12) 35%,
		rgba(26, 26, 26, 0.5) 70%,
		rgba(26, 26, 26, 0.9) 90%,
		rgba(26, 26, 26, 1) 100%);
	pointer-events: none;
}

.ev-story__cap {
	position: absolute;
	bottom: 1.75rem;
	left: 2rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.ev-story__cap::before {
	content: '';
	display: block;
	width: 1.375rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--gold);
}

.ev-story__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 6.25rem 5rem 6.25rem 3rem;
}

.ev-story__inner {
	max-width: 35rem;
}

.evpwt-js .ev-story__inner {
	opacity: 0;
	transform: translateX(2.5rem);
	transition: opacity 1s ease, transform 1s ease;
}

.ev-story.is-in .ev-story__inner {
	opacity: 1;
	transform: translateX(0);
}

.ev-story__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.ev-story__eyebrow::after {
	content: '';
	display: block;
	width: 3.125rem;
	height: 0.09375rem;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), transparent);
}

/*
   There is deliberately no divider ornament between this and the
   paragraphs. The earlier build had one and the rewrite removed it.
*/
.ev-story__opening {
	margin: 0 0 2rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 2.2vw, 1.95rem);
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}

.ev-story__opening em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.ev-story__paras {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.ev-story__paras p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.65);
}

.evpwt-js .ev-story__paras p {
	opacity: 0;
	transform: translateY(1.125rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ev-story.is-in .ev-story__paras p {
	opacity: 1;
	transform: translateY(0);
	/* 0.25s, then 0.15s per paragraph. Index driven, so a fourth
	   paragraph does not arrive ahead of the third. */
	transition-delay: calc(0.25s + var(--ev-i, 0) * 0.15s);
}

.ev-story__closing {
	margin-top: 2.5rem;
	padding-top: 1.875rem;
	border-top: 1px solid rgba(212, 196, 168, 0.15);
}

.evpwt-js .ev-story__closing {
	opacity: 0;
	transform: translateY(1.125rem);
	transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s;
}

.ev-story.is-in .ev-story__closing {
	opacity: 1;
	transform: translateY(0);
}

.ev-story__tagline {
	margin: 0 0 1.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wp--preset--color--rust);
}

.ev-story__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	transition: gap 0.3s ease, color 0.3s ease;
}

.ev-story__cta:hover {
	gap: 1.125rem;
	color: #fff;
}

.ev-story__cta svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
	transition: transform 0.3s ease;
}

.ev-story__cta:hover svg {
	transform: translateX(0.1875rem);
}

.ev-story__cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ================================================
   WHY ECOVOYAGER

   Shipped as captured. One revision exists after this and could not be
   recovered: the user asked for a gradient so the text panel stopped
   hiding the photographs, and the reply is empty in the transcript.
   The gradient below is the one that was already there when that was
   said. Nothing has been invented to replace it.
   ================================================ */

.ev-why {
	padding: 6.875rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	overflow: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

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

.ev-why__wrap {
	max-width: 71.25rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.ev-why__head {
	margin-bottom: 3.75rem;
	text-align: center;
}

.evpwt-js .ev-why__head {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ev-why.is-in .ev-why__head {
	opacity: 1;
	transform: translateY(0);
}

.ev-why__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.125rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.ev-why__eyebrow::before,
.ev-why__eyebrow::after {
	content: '';
	display: block;
	width: 2.125rem;
	height: 0.09375rem;
}

.ev-why__eyebrow::before {
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust));
}

.ev-why__eyebrow::after {
	background: linear-gradient(90deg, var(--wp--preset--color--rust), transparent);
}

.ev-why__title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 400;
	color: #fff;
}

.ev-why__title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.ev-why__sub {
	max-width: 37.5rem;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.6);
}

.ev-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
}

/* Lighter than the section ground, so a card reads as raised without
   a shadow until hover. */
.ev-why__card {
	overflow: clip;
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1.25rem;
	background: var(--ev-panel);
	transition: box-shadow 0.45s ease, border-color 0.45s ease;
}

.evpwt-js .ev-why__card {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.ev-why.is-in .ev-why__card {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--ev-i, 0) * 0.09s);
}

.ev-why__card:hover {
	border-color: rgba(184, 98, 27, 0.32);
	box-shadow: 0 1.5rem 3.4375rem rgba(0, 0, 0, 0.4);
}

.ev-why__media {
	position: relative;
	height: 14.375rem;
	overflow: clip;
}

.ev-why__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s ease;
}

.ev-why__card:hover .ev-why__img {
	transform: scale(1.07);
}

.ev-why__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(24, 24, 24, 0) 50%, rgba(24, 24, 24, 0.85) 100%);
	pointer-events: none;
}

.ev-why__body {
	padding: 2rem 2rem 2.25rem;
}

.ev-why__body h3 {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.45rem;
	font-weight: 500;
	color: #fff;
}

.ev-why__rule {
	display: block;
	width: 2.625rem;
	height: 0.125rem;
	margin-bottom: 1rem;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
}

.ev-why__body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.78;
	color: rgba(255, 255, 255, 0.64);
}

/* ================================================
   ABOUT: BREAKPOINTS
   The hero's ladder, applied to every section.
   ================================================ */

@media (max-width: 1200px) {
	.ev-about-hero {
		grid-template-columns: 48% 52%;
	}

	.ev-about-hero__content {
		padding: 4.5rem 3rem 4.5rem 3.5rem;
	}

	.ev-about-hero__scroll {
		left: 3.5rem;
	}

	.ev-story__content {
		padding: 5rem 3.5rem 5rem 2.5rem;
	}
}

@media (max-width: 1024px) {
	/* ---- Hero: the media fills the section, content sits over it ---- */

	.ev-about-hero {
		display: block;
		position: relative;
		min-height: 100vh;
		/*
		   lvh, NOT dvh. dvh makes the bar shift while the iOS Safari
		   URL bar shows and hides. The known cost of lvh is a slightly
		   below-fold edge on first paint. Deliberate.
		*/
		min-height: 100lvh;
	}

	.ev-about-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
	}

	.ev-about-hero__media::before {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.45) 0%,
			rgba(17, 16, 16, 0.4) 30%,
			rgba(17, 16, 16, 0.75) 65%,
			rgba(17, 16, 16, 0.95) 100%);
	}

	.ev-about-hero__media::after {
		display: none;
	}

	.ev-about-hero__content {
		position: relative;
		z-index: 5;
		min-height: 100vh;
		min-height: 100lvh;
		padding: 6.25rem 3.5rem 5rem;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: transparent;
	}

	.ev-about-hero__scroll {
		display: none;
	}

	.ev-about-hero__eyebrow {
		justify-content: center;
		margin-bottom: 1.5rem;
		font-size: 0.65rem;
		color: var(--wp--preset--color--gold);
	}

	.ev-about-hero__eyebrow::before {
		width: 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
	}

	.ev-about-hero__eyebrow::after {
		content: '';
		display: block;
		flex-shrink: 0;
		width: 1.75rem;
		height: 0.09375rem;
		background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
	}

	.ev-about-hero__title {
		margin: 0 0 1.625rem;
		font-size: clamp(3.2rem, 8vw, 4.6rem);
		line-height: 1.05;
		text-align: center;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
	}

	.ev-about-hero__rule {
		width: 3.125rem;
		margin: 0 auto 1.75rem;
		background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
	}

	.ev-about-hero__subtitle {
		max-width: 36.25rem;
		margin: 0 auto 2.5rem;
		font-size: 1.05rem;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
		text-align: center;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	.ev-about-hero__cta {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.875rem;
		width: auto;
	}

	.ev-about-hero__btn {
		min-width: 15rem;
		padding: 1rem 1.875rem;
		font-size: 0.7rem;
	}

	/* ---- Mission ---- */

	.ev-mission {
		padding: 4.375rem 0;
	}

	.ev-mission__panel {
		min-height: 0;
	}

	.ev-mission__card {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.ev-mission__panel::after {
		background: linear-gradient(180deg, rgba(17, 16, 16, 0.55) 0%, rgba(17, 16, 16, 0.78) 100%);
	}

	/*
	   ---- What We Do ----
	   The capture had no 1024 rule at all, so a 2x2 grid of 26rem cards
	   held down to 769px.
	*/

	.ev-wwd {
		padding: 5.5rem 0;
	}

	.ev-wwd__head {
		margin-bottom: 2.75rem;
	}

	.ev-wwd__grid {
		gap: 1.25rem;
	}

	.ev-wwd__card {
		height: 23.75rem;
	}

	.ev-wwd__body {
		padding: 1.75rem;
	}

	.ev-wwd__num {
		font-size: 2.8rem;
	}

	.ev-wwd__card-title {
		font-size: 1.5rem;
	}

	/* ---- Our Story: stacks ---- */

	.ev-story {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.ev-story__pic {
		height: 27.5rem;
	}

	.ev-story__pic::after {
		background: linear-gradient(to bottom,
			rgba(26, 26, 26, 0) 0%,
			rgba(26, 26, 26, 0.55) 60%,
			rgba(26, 26, 26, 1) 100%);
	}

	.ev-story__content {
		padding: 4rem 2.5rem 5rem;
		justify-content: center;
		text-align: center;
	}

	.ev-story__inner {
		max-width: 43.75rem;
	}

	.evpwt-js .ev-story__inner {
		transform: translateY(1.875rem);
	}

	.ev-story.is-in .ev-story__inner {
		transform: translateY(0);
	}

	.ev-story__eyebrow {
		justify-content: center;
	}

	.ev-story__eyebrow::after {
		display: none;
	}

	.ev-story__closing {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/*
	   ---- Why EcoVoyager ----
	   Same missing step as What We Do. The grid stays two across but
	   the cards stop being cramped.
	*/

	.ev-why {
		padding: 5.5rem 0;
	}

	.ev-why__head {
		margin-bottom: 3rem;
	}

	.ev-why__grid {
		gap: 1.25rem;
	}

	.ev-why__media {
		height: 12.5rem;
	}

	.ev-why__body {
		padding: 1.625rem 1.625rem 1.875rem;
	}

	.ev-why__body h3 {
		font-size: 1.3rem;
	}
}

@media (max-width: 768px) {
	/* ---- Hero ---- */

	.ev-about-hero__content {
		padding: 6.875rem 1.5rem 4rem;
	}

	.ev-about-hero__eyebrow {
		margin-bottom: 1.5rem;
		font-size: 0.72rem;
	}

	.ev-about-hero__eyebrow::before,
	.ev-about-hero__eyebrow::after {
		width: 1.5rem;
	}

	.ev-about-hero__title {
		margin-bottom: 1.5rem;
		font-size: clamp(3.2rem, 12.5vw, 4.6rem);
	}

	.ev-about-hero__rule {
		width: 3rem;
		margin-bottom: 1.625rem;
	}

	.ev-about-hero__subtitle {
		max-width: 100%;
		margin-bottom: 2.25rem;
		font-size: 1.15rem;
		line-height: 1.7;
	}

	.ev-about-hero__cta {
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
	}

	.ev-about-hero__btn {
		width: 100%;
		min-width: 0;
		max-width: 23.75rem;
		margin: 0 auto;
		padding: 1.0625rem 2rem;
		font-size: 0.72rem;
	}

	/* ---- Mission ---- */

	.ev-mission__wrap {
		padding: 0 0.875rem;
	}

	.ev-mission__card {
		padding: 2.25rem 1.625rem 2.5rem;
		backdrop-filter: blur(4px);
	}

	/* ---- What We Do: the grid becomes a swipeable strip ---- */

	.ev-wwd {
		padding: 5rem 0;
	}

	.ev-wwd__head {
		margin-bottom: 2.5rem;
	}

	.ev-wwd__eyebrow {
		font-size: 0.85rem;
	}

	/*
	   The mobile minimum is LARGER than the desktop minimum. That is
	   deliberate and was asked for; it is not a typo.
	*/
	.ev-wwd__title {
		font-size: clamp(2.7rem, 11vw, 3.6rem);
	}

	.ev-wwd__sub {
		font-size: 1.08rem;
	}

	.ev-wwd__grid {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Bleeds to the viewport edge against the wrap's own padding.
		   Both read the same custom property so they cannot drift. */
		margin: 0 calc(var(--ev-wwd-gutter) * -1);
		padding: 0.25rem var(--ev-wwd-gutter) 0.875rem;
	}

	.ev-wwd__grid::-webkit-scrollbar {
		display: none;
	}

	/* 84%, so the next card peeks and signals that the strip moves. */
	.ev-wwd__card {
		flex: 0 0 84%;
		height: 26.25rem;
		scroll-snap-align: center;
	}

	.ev-wwd__body {
		padding: 1.875rem;
	}

	.ev-wwd__num {
		font-size: 3.4rem;
	}

	.ev-wwd__card-title {
		font-size: 1.7rem;
	}

	/* ---- Our Story ---- */

	.ev-story__pic {
		height: 22.5rem;
	}

	.ev-story__content {
		padding: 3.25rem 1.5rem 4rem;
	}

	.ev-story__opening {
		font-size: clamp(1.35rem, 5vw, 1.6rem);
	}

	.ev-story__cap {
		bottom: 1.375rem;
		left: 1.375rem;
	}

	/* ---- Why EcoVoyager: one column ---- */

	.ev-why {
		padding: 5rem 0;
	}

	.ev-why__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.375rem;
	}

	.ev-why__media {
		height: 13.75rem;
	}

	.ev-why__body {
		padding: 2rem 2rem 2.25rem;
	}

	.ev-why__body h3 {
		font-size: 1.45rem;
	}
}

@media (max-width: 480px) {
	/* ---- Hero ---- */

	.ev-about-hero__content {
		padding: 6rem 1.25rem 3.25rem;
	}

	.ev-about-hero__eyebrow {
		margin-bottom: 1.25rem;
		font-size: 0.66rem;
	}

	.ev-about-hero__eyebrow::before,
	.ev-about-hero__eyebrow::after {
		width: 1.25rem;
	}

	.ev-about-hero__title {
		margin-bottom: 1.375rem;
		font-size: clamp(2.9rem, 13vw, 3.9rem);
	}

	.ev-about-hero__rule {
		width: 2.5rem;
		margin-bottom: 1.375rem;
	}

	.ev-about-hero__subtitle {
		margin-bottom: 1.875rem;
		font-size: 1.08rem;
	}

	.ev-about-hero__btn {
		max-width: 20rem;
		padding: 1rem 1.75rem;
	}

	/* ---- Mission ---- */

	.ev-mission {
		padding: 3.5rem 0;
	}

	.ev-mission__panel {
		border-radius: 1.25rem;
	}

	.ev-mission__card {
		padding: 1.875rem 1.25rem 2.125rem;
	}

	.ev-mission__title {
		font-size: 1.85rem;
	}

	.ev-mission__statement {
		font-size: 0.95rem;
		line-height: 1.8;
	}

	/* ---- What We Do ---- */

	.ev-wwd {
		--ev-wwd-gutter: 1.25rem;

		padding: 4rem 0;
	}

	.ev-wwd__title {
		font-size: clamp(2.2rem, 11vw, 2.9rem);
	}

	.ev-wwd__sub {
		font-size: 1rem;
	}

	.ev-wwd__card {
		flex-basis: 86%;
		height: 24rem;
	}

	.ev-wwd__body {
		padding: 1.5rem;
	}

	.ev-wwd__num {
		font-size: 2.8rem;
	}

	.ev-wwd__card-title {
		font-size: 1.45rem;
	}

	/* ---- Our Story ---- */

	.ev-story__pic {
		height: 18rem;
	}

	.ev-story__content {
		padding: 2.75rem 1.25rem 3.5rem;
	}

	.ev-story__eyebrow {
		font-size: 0.72rem;
	}

	/* ---- Why EcoVoyager ---- */

	.ev-why {
		padding: 4rem 0;
	}

	.ev-why__wrap {
		padding: 0 1.25rem;
	}

	.ev-why__head {
		margin-bottom: 2.5rem;
	}

	.ev-why__media {
		height: 12rem;
	}

	.ev-why__body {
		padding: 1.625rem 1.5rem 1.875rem;
	}

	.ev-why__body h3 {
		font-size: 1.3rem;
	}
}

@media (max-width: 360px) {
	.ev-about-hero__content {
		padding: 5.5rem 1rem 2.75rem;
	}

	.ev-about-hero__title {
		font-size: 2.7rem;
	}

	.ev-about-hero__subtitle {
		font-size: 1rem;
	}

	.ev-about-hero__btn {
		max-width: 17.5rem;
		padding: 0.875rem 1.5rem;
		font-size: 0.7rem;
	}

	.ev-mission__card {
		padding: 1.625rem 1.125rem 1.875rem;
	}

	.ev-mission__title {
		font-size: 1.65rem;
	}

	.ev-wwd__title {
		font-size: 2.1rem;
	}

	.ev-wwd__card {
		height: 22.5rem;
	}

	.ev-wwd__num {
		font-size: 2.4rem;
	}

	.ev-story__pic {
		height: 15rem;
	}

	.ev-story__opening {
		font-size: 1.25rem;
	}

	.ev-why__media {
		height: 10.5rem;
	}

	.ev-why__body h3 {
		font-size: 1.2rem;
	}
}

/* ================================================
   ABOUT: REDUCED MOTION

   Last, so these win on equal specificity without !important.

   The hero becomes a static poster: the video is paused from script
   and every entrance animation is off. Mission holds on its first
   image, because the script returns before it ever starts the
   interval. Every reveal is forced visible.
   ================================================ */

@media (prefers-reduced-motion: reduce) {
	.ev-about-hero__eyebrow,
	.ev-about-hero__rule,
	.ev-about-hero__subtitle,
	.ev-about-hero__cta,
	.ev-about-hero__scroll {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.ev-about-hero__scroll-line::after {
		animation: none;
		will-change: auto;
	}

	.ev-about-hero__btn,
	.ev-about-hero__btn svg,
	.ev-about-hero__btn--primary::before {
		transition: none;
	}

	.ev-about-hero__btn--primary:hover {
		transform: none;
	}

	.ev-mission__img {
		animation: none;
		transform: scale(1.04);
	}

	.ev-mission__slide {
		transition: none;
	}

	.evpwt-js .ev-mission__card,
	.evpwt-js .ev-wwd__head,
	.evpwt-js .ev-wwd__card,
	.evpwt-js .ev-story__inner,
	.evpwt-js .ev-story__paras p,
	.evpwt-js .ev-story__closing,
	.evpwt-js .ev-why__head,
	.evpwt-js .ev-why__card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ev-wwd__img,
	.ev-wwd__scrim,
	.ev-wwd__num,
	.ev-wwd__uline,
	.ev-why__img,
	.ev-story__cta,
	.ev-story__cta svg {
		transition: none;
	}

	.ev-story__img {
		animation: none;
		transform: scale(1.04);
	}

	.ev-wwd__card:hover .ev-wwd__img,
	.ev-why__card:hover .ev-why__img {
		transform: none;
	}
}

/* ================================================
   THE FAQ PAGE

   Ported from faq-page/faq-page-recovered.html, raw HTML written for
   an Elementor HTML widget. No !important survives, rem throughout,
   and the three things the capture's own header called out are fixed.

   NO 100vw. The capture went full bleed with
   width: 100vw; margin-left: calc(-50vw + 50%), which measures the
   viewport including the vertical scrollbar and pushes the page
   sideways by however wide that is. Nothing replaces it: the page
   template puts this section straight in the document flow and no
   ancestor constrains it, which is how every other full width section
   on this site works now.

   overflow-x IS clip, NOT hidden, AND THAT ONE IS LOAD BEARING.
   hidden on a block coerces overflow-y to auto, which makes a scroll
   container, which makes position: sticky stick to that box instead of
   the viewport. The left category rail is sticky. With the 100vw gone
   there is nothing left to clip anyway, but clip is what the rule says
   and clip cannot break the rail.

   ONE OFFSET, NOT THREE. --evp-faq-offset replaces three separate
   hardcoded 100px values: the sticky top, the scroll-margin-top on
   each category, and the scroll offset in faq.js, which reads this
   property rather than carrying its own copy. The site header is
   fixed and measures 81px on desktop, 71px at 768 and 65px at 480, so
   the offset steps down with it.
   ================================================ */

.evp-faq {
	--evp-faq-offset: 6.25rem;

	position: relative;
	overflow-x: clip;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--ev-charcoal);
}

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

.evp-faq button {
	font-family: inherit;
	cursor: pointer;
}

/*
   One rule where the capture had three blocks of overrides. They were
   beating Astra's link underlines; Astra is gone, so the base style is
   simply correct and the answer links opt back in below.
*/
.evp-faq a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Header ---------- */

.evp-faq-header {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 5rem 3rem 2.5rem;
	text-align: center;
}

.evpwt-js .evp-faq-header {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-faq-header.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-faq-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	margin: 0 0 1.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-faq-eyebrow::before,
.evp-faq-eyebrow::after {
	content: '';
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evp-faq-title {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evp-faq-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}

.evp-faq-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.125rem;
	margin-bottom: 1.5rem;
}

.evp-faq-rule-line {
	width: 4.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 196, 168, 0.75), transparent);
}

.evp-faq-rule-diamond {
	width: 0.5625rem;
	height: 0.5625rem;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
	box-shadow: 0 0 0.875rem rgba(212, 196, 168, 0.55);
}

.evp-faq-subtitle {
	max-width: 40rem;
	margin: 0 auto;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ev-soft);
}

/* ---------- The filter box ---------- */

.evp-faq-search-wrap {
	position: relative;
	max-width: 45rem;
	margin: 0 auto 3.5rem;
	padding: 0 3rem;
}

.evpwt-js .evp-faq-search-wrap {
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.evp-faq-search-wrap.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-faq-search-inner {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 3.125rem;
	background-color: rgba(255, 255, 255, 0.04);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.evp-faq-search-inner:focus-within {
	border-color: rgba(212, 196, 168, 0.45);
	background-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(184, 98, 27, 0.12);
}

.evp-faq-search-icon {
	position: absolute;
	left: 1.375rem;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: rgba(212, 196, 168, 0.6);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.evp-faq-search-input {
	width: 100%;
	padding: 1.125rem 3.5rem;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: #fff;
}

.evp-faq-search-input::placeholder {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.4);
}

.evp-faq-search-clear {
	position: absolute;
	right: 1.125rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.6);
	transition: background 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-faq-search-clear.visible {
	display: flex;
}

.evp-faq-search-clear:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.evp-faq-search-clear svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.evp-faq-search-meta {
	display: none;
	margin-top: 0.875rem;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}

.evp-faq-search-meta.visible {
	display: block;
}

.evp-faq-search-meta strong {
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

/* ---------- Layout ---------- */

.evp-faq-layout {
	display: grid;
	grid-template-columns: 17.5rem minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem;
}

/* ---------- The category rail ---------- */

.evp-faq-nav {
	position: sticky;
	top: var(--evp-faq-offset);
	align-self: start;
	padding-right: 0.5rem;
}

.evpwt-js .evp-faq-nav {
	opacity: 0;
	transform: translateX(-0.75rem);
	transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.evp-faq-nav.vis {
	opacity: 1;
	transform: translateX(0);
}

.evp-faq-nav-label {
	margin: 0 0 1.125rem;
	padding-left: 1.125rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-faq-nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evp-faq-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	padding: 0.75rem 1.125rem;
	border-left: 2px solid transparent;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.62);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-faq-nav-item:hover {
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.9);
}

.evp-faq-nav-item.active {
	border-left-color: var(--wp--preset--color--rust);
	background: rgba(184, 98, 27, 0.06);
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

.evp-faq-nav-count {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.32);
}

.evp-faq-nav-item.active .evp-faq-nav-count {
	color: rgba(212, 196, 168, 0.7);
}

/* ---------- Categories ---------- */

.evp-faq-content {
	min-width: 0;
}

.evp-faq-category {
	margin-bottom: 3.5rem;
	scroll-margin-top: var(--evp-faq-offset);
}

.evp-faq-category:last-child {
	margin-bottom: 0;
}

/*
   A class, not an inline style. The capture set cat.style.display from
   the filter, which beats every stylesheet rule and cannot be
   overridden by a media query or a print sheet.
*/
.evp-faq-category.is-empty {
	display: none;
}

.evp-faq-category-header {
	margin-bottom: 1.5rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evp-faq-category-label {
	margin: 0 0 0.5rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-faq-category-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 2.2vw, 1.95rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

/* ---------- The accordion ---------- */

.evp-faq-items {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.evp-faq-item {
	overflow: clip;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.875rem;
	background: rgba(255, 255, 255, 0.025);
	transition: border-color 0.3s ease, background 0.3s ease;
}

.evp-faq-item:hover {
	border-color: rgba(212, 196, 168, 0.14);
}

.evp-faq-item.open {
	border-color: rgba(184, 98, 27, 0.28);
	background: rgba(255, 255, 255, 0.04);
}

.evp-faq-item.hidden {
	display: none;
}

.evp-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.125rem;
	width: 100%;
	min-height: 3.75rem;
	padding: 1.25rem 1.5rem;
	border: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.005em;
	text-align: left;
	color: #fff;
	transition: color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-faq-question:hover,
.evp-faq-item.open .evp-faq-question {
	color: var(--wp--preset--color--gold);
}

.evp-faq-chevron {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--rust);
	transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s ease;
}

.evp-faq-chevron svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evp-faq-item.open .evp-faq-chevron {
	transform: rotate(180deg);
	color: var(--wp--preset--color--gold);
}

/*
   NO MAGIC MAX-HEIGHT. The capture opened to max-height: 1200px, which
   silently clips any answer taller than that, and the two longest
   answers on this page were already close to it. A grid row animating
   from 0fr to 1fr collapses and expands to whatever the content
   actually is, with no number to outgrow.
*/
.evp-faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.evp-faq-item.open .evp-faq-answer {
	grid-template-rows: 1fr;
}

.evp-faq-answer-inner {
	overflow: hidden;
	padding: 0 1.5rem;
}

/*
   The divider only exists when the panel is open. On a zero height
   grid row a border still paints, which would leave a hairline under
   every closed question.
*/
.evp-faq-item.open .evp-faq-answer-inner {
	padding-bottom: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.evp-faq-answer-inner p {
	margin: 1.125rem 0 0;
	font-size: 0.92rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
}

.evp-faq-answer-inner a {
	padding-bottom: 1px;
	border-bottom: 1px solid rgba(212, 196, 168, 0.32);
	color: var(--wp--preset--color--gold);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evp-faq-answer-inner a:hover {
	border-bottom-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

/* ---------- Nothing matched ---------- */

.evp-faq-no-results {
	display: none;
	padding: 3.5rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
}

.evp-faq-no-results.visible {
	display: block;
}

.evp-faq-no-results-icon {
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 1.125rem;
	opacity: 0.3;
}

.evp-faq-no-results-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 1.5;
}

.evp-faq-no-results-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.3rem;
	font-weight: 400;
	color: #fff;
}

.evp-faq-no-results-text {
	margin: 0 0 1.25rem;
	font-size: 0.88rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.evp-faq-no-results-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.375rem;
	border: 1.5px solid rgba(212, 196, 168, 0.4);
	border-radius: 3.125rem;
	background: transparent;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.evp-faq-no-results-btn:hover {
	border-color: var(--wp--preset--color--gold);
	background: rgba(212, 196, 168, 0.08);
	color: #fff;
}

/* ---------- Closing call to action ---------- */

.evp-faq-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	max-width: 87.5rem;
	margin: 5.5rem auto 0;
	padding: 4rem 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evpwt-js .evp-faq-cta {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evp-faq-cta.vis {
	opacity: 1;
	transform: translateY(0);
}

.evp-faq-cta-body {
	flex: 1;
}

.evp-faq-cta-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-faq-cta-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evp-faq-cta-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evp-faq-cta-text {
	max-width: 33.75rem;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

.evp-faq-cta-btn {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	overflow: clip;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evp-faq-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evp-faq-cta-btn > * {
	position: relative;
	z-index: 1;
}

.evp-faq-cta-btn:hover::before {
	opacity: 1;
}

.evp-faq-cta-btn:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.875rem 2.25rem rgba(184, 98, 27, 0.55);
}

.evp-faq-cta-btn svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: #fff;
	transition: transform 0.3s ease;
}

.evp-faq-cta-btn:hover svg {
	transform: translateX(0.1875rem);
}

/* ---------- Focus ---------- */

.evp-faq-question:focus-visible,
.evp-faq-nav-item:focus-visible,
.evp-faq-search-clear:focus-visible,
.evp-faq-cta-btn:focus-visible,
.evp-faq-no-results-btn:focus-visible,
.evp-faq-answer-inner a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   The ring goes on the pill, not on the input inside it. An outline on
   the input alone draws a rectangle inside a rounded border, which
   looks like a rendering fault; the wrapper takes it so the shape
   matches. The :focus-within tint stays underneath as the fallback for
   anything that does not know :has().
*/
.evp-faq-search-input:focus-visible {
	outline: none;
}

.evp-faq-search-inner:has(.evp-faq-search-input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ================================================
   FAQ: BREAKPOINTS
   The capture had 1024 / 768 / 480 only. 1200 and 360 are the steps
   the rest of the site uses.
   ================================================ */

@media (max-width: 1200px) {
	.evp-faq-header {
		padding: 4.5rem 2.5rem 2.25rem;
	}

	.evp-faq-search-wrap {
		padding: 0 2.5rem;
	}

	.evp-faq-layout {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 2.75rem;
		padding: 0 2.5rem;
	}

	.evp-faq-cta {
		gap: 2.5rem;
		padding: 3.5rem 2.5rem;
	}
}

@media (max-width: 1024px) {
	/* The rail stops being a rail and becomes a scrollable chip row. */
	.evp-faq-header {
		padding: 4rem 2.5rem 2rem;
	}

	.evp-faq-search-wrap {
		margin-bottom: 2.5rem;
		padding: 0 2.5rem;
	}

	.evp-faq-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding: 0 2.5rem;
	}

	.evp-faq-nav {
		position: static;
		padding: 0 0 0.5rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.evp-faq-nav-label {
		margin-bottom: 0.875rem;
		padding-left: 0;
	}

	.evp-faq-nav-list {
		flex-direction: row;
		gap: 0.5rem;
		overflow-x: auto;
		padding-bottom: 0.75rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.evp-faq-nav-list::-webkit-scrollbar {
		display: none;
	}

	.evp-faq-nav-item {
		flex-shrink: 0;
		padding: 0.625rem 1.125rem;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 3.125rem;
		background: rgba(255, 255, 255, 0.04);
		font-size: 0.78rem;
		white-space: nowrap;
	}

	.evp-faq-nav-item.active {
		border-color: rgba(184, 98, 27, 0.45);
		background: rgba(184, 98, 27, 0.18);
	}

	.evp-faq-cta {
		flex-direction: column;
		align-items: center;
		gap: 1.75rem;
		margin-top: 4rem;
		padding: 3.25rem 2.5rem;
		text-align: center;
	}

	.evp-faq-cta-text {
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.evp-faq {
		--evp-faq-offset: 5.25rem;
	}

	.evp-faq-header {
		padding: 3.25rem 1.25rem 1.75rem;
	}

	.evp-faq-rule-line {
		width: 3.125rem;
	}

	.evp-faq-search-wrap {
		margin-bottom: 2rem;
		padding: 0 1.25rem;
	}

	.evp-faq-search-input {
		padding: 1rem 3.125rem;
		font-size: 0.92rem;
	}

	.evp-faq-search-icon {
		left: 1.125rem;
		width: 1rem;
		height: 1rem;
	}

	.evp-faq-search-clear {
		right: 0.875rem;
		width: 1.625rem;
		height: 1.625rem;
	}

	.evp-faq-layout {
		gap: 1.75rem;
		padding: 0 1rem;
	}

	.evp-faq-category {
		margin-bottom: 2.75rem;
	}

	.evp-faq-category-header {
		margin-bottom: 1.125rem;
		padding-bottom: 0.875rem;
	}

	.evp-faq-question {
		gap: 0.875rem;
		min-height: 3.5rem;
		padding: 1.125rem 1.25rem;
		font-size: 0.95rem;
	}

	.evp-faq-answer-inner {
		padding: 0 1.25rem;
	}

	.evp-faq-item.open .evp-faq-answer-inner {
		padding-bottom: 1.375rem;
	}

	.evp-faq-answer-inner p {
		font-size: 0.9rem;
	}

	.evp-faq-cta {
		gap: 1.5rem;
		margin-top: 3.25rem;
		padding: 2.75rem 1.25rem;
	}

	.evp-faq-cta-text {
		font-size: 0.88rem;
	}

	.evp-faq-cta-btn {
		justify-content: center;
		width: 100%;
		max-width: 20rem;
		min-height: 3rem;
		padding: 1rem 1.75rem;
		font-size: 0.7rem;
	}
}

@media (max-width: 480px) {
	.evp-faq {
		--evp-faq-offset: 4.75rem;
	}

	.evp-faq-header {
		padding: 2.75rem 1rem 1.5rem;
	}

	.evp-faq-search-wrap {
		padding: 0 1rem;
	}

	.evp-faq-question {
		padding: 1rem 1.125rem;
		font-size: 0.92rem;
	}

	.evp-faq-answer-inner {
		padding: 0 1.125rem;
	}

	.evp-faq-item.open .evp-faq-answer-inner {
		padding-bottom: 1.25rem;
	}

	.evp-faq-cta-btn {
		max-width: 17.5rem;
		padding: 0.9375rem 1.5rem;
	}
}

@media (max-width: 360px) {
	.evp-faq-header {
		padding: 2.5rem 0.875rem 1.25rem;
	}

	.evp-faq-title {
		font-size: 2.4rem;
	}

	.evp-faq-search-wrap {
		padding: 0 0.875rem;
	}

	.evp-faq-search-input {
		padding: 0.875rem 2.875rem;
	}

	.evp-faq-layout {
		padding: 0 0.875rem;
	}

	.evp-faq-question {
		padding: 0.9375rem 1rem;
		font-size: 0.88rem;
	}

	.evp-faq-cta-btn {
		max-width: 100%;
	}
}

/* ================================================
   FAQ: REDUCED MOTION
   Last, so these win on equal specificity without !important. The
   accordion still opens, it just snaps.
   ================================================ */

@media (prefers-reduced-motion: reduce) {
	.evpwt-js .evp-faq-header,
	.evpwt-js .evp-faq-search-wrap,
	.evpwt-js .evp-faq-nav,
	.evpwt-js .evp-faq-cta {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evp-faq-answer,
	.evp-faq-chevron,
	.evp-faq-item,
	.evp-faq-question,
	.evp-faq-nav-item,
	.evp-faq-search-inner,
	.evp-faq-search-clear,
	.evp-faq-no-results-btn,
	.evp-faq-cta-btn,
	.evp-faq-cta-btn::before,
	.evp-faq-cta-btn svg,
	.evp-faq-answer-inner a {
		transition: none;
	}

	.evp-faq-cta-btn:hover {
		transform: none;
	}

	.evp-faq-cta-btn:hover svg {
		transform: none;
	}
}

/* ================================================
   THE MEMBERSHIPS AND ASSOCIATIONS PAGE

   Redesigned 30 September 2026. The port of the Wayback capture kept
   the old site's page: a full screen centred hero with a diamond
   divider over a photograph that had been missing since the
   migration, three dark cards in a row that became a swipe carousel
   on a phone, and a centred closing block. The owner called it a relic
   of the past website. This is the page rebuilt on the site's current
   furniture.

   THE HERO HAS NO PHOTOGRAPH. The first rebuild gave it the listing
   hero with the tours' pictures crossfading; the owner asked for a
   simpler hero without imagery that still looks current. It is the
   site's typography on the page ground with an index of the three
   organizations beside it, see HERO below. The crumb and the pills
   reuse the listing hero's classes. The page's container is the
   listing's, 87.5rem with the same side padding, so everything lines
   up from the hero down.

   THE ORGANIZATIONS ARE ROWS, NOT CARDS. Each is a logo plate beside
   its text, the plate alternating sides, the rows separated by the
   hairline the keep exploring rows use. On a phone the rows stack;
   there is no carousel and no swipe hint, because three organizations
   do not need paging.

   ONE GROUND, bg-deep throughout, like the listings.

   BOX SIZING IS SCOPED HERE, because main.css has no global reset and
   two bugs on this project have come from assuming otherwise. It is
   scoped to the page wrapper so it travels with the page.

   REVEALS ARE GATED ON .evpwt-js, the class a tiny inline snippet in
   wp_head puts on <html>. The hidden state only exists when the script
   that undoes it can run, so with JS off the page renders complete.
   ================================================ */

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

.ev-memberships {
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

.ev-memberships a {
	text-decoration: none;
}

/* ================================================
   HERO
   No photograph, by decision: the owner asked for a simpler hero than
   the listings', without imagery, that still looks current. Two
   columns in the listing's container: the title, the lede and the
   pills on the left; on the right an index of the three organizations
   linking to their rows. One rust glow behind the text and a hairline
   at the foot of the band are the only decoration.
   ================================================ */

.evpm-hero {
	position: relative;
	/* The header is fixed and transparent until the visitor scrolls,
	   so the band starts at the top of the page and clears it with
	   padding, the way .evpdl-page does. */
	padding: calc(var(--ev-header-h, 5rem) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
	overflow: clip;
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
	background:
		radial-gradient(60rem 28rem at 12% 0%, rgba(184, 98, 27, 0.16), transparent 62%),
		var(--wp--preset--color--bg-deep);
}

.evpm-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
	align-items: end;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evpm-hero-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #fff;
	text-wrap: balance;
}

/* The same accent the listing hero title uses. */
.evpm-hero-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}

.evpm-hero-lede {
	max-width: 36rem;
	margin: 0;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.62);
}

/* ---------- The index ---------- */

.evpm-hero-index-label {
	margin: 0 0 0.75rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(212, 196, 168, 0.6);
}

.evpm-hero-index-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(212, 196, 168, 0.18);
}

/*
   Each entry is one link laid out as a small grid: the acronym and the
   category on the first line, the full name under them, the arrow on
   the right spanning both. The hover moves the arrow down, since the
   link goes down the page.
*/
.evpm-hero-index-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"acronym kind arrow"
		"name name arrow";
	column-gap: 0.75rem;
	row-gap: 0.3rem;
	align-items: center;
	padding: 1rem 0.25rem 1rem 0;
	border-bottom: 1px solid rgba(212, 196, 168, 0.18);
	color: #fff;
	transition: padding-left 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.evpm-hero-index-acronym {
	grid-area: acronym;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

/* The category follows the acronym on the same line, after a gold dot. */
.evpm-hero-index-kind {
	grid-area: kind;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(212, 196, 168, 0.7);
}

.evpm-hero-index-kind::before {
	content: "";
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

.evpm-hero-index-name {
	grid-area: name;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
}

.evpm-hero-index-arrow {
	grid-area: arrow;
	width: 1.125rem;
	height: 1.125rem;
	stroke: var(--wp--preset--color--gold);
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease, stroke 0.25s ease;
}

.evpm-hero-index-item:hover {
	padding-left: 0.5rem;
}

.evpm-hero-index-item:hover .evpm-hero-index-arrow {
	stroke: var(--wp--preset--color--rust);
	transform: translateY(0.2rem);
}

.evpm-hero-index-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
	border-radius: 0.25rem;
}

/* The rows are the index's targets; land them below the fixed header. */
.evpm-org {
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + 1rem);
}

@media (max-width: 1024px) {
	.evpm-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.evpm-hero-index {
		max-width: 36rem;
	}
}

/*
   On a phone the band is tightened so the section below it shows at
   the fold: the listing heroes settle around 40rem there and a hero
   that fills the screen is what the old page did.
*/
@media (max-width: 768px) {
	.evpm-hero {
		padding-top: calc(var(--ev-header-h, 5rem) + 1.5rem);
		padding-bottom: 2.5rem;
	}

	.evpm-hero-inner {
		gap: 2rem;
	}

	.evpm-hero-title {
		font-size: clamp(2.4rem, 11vw, 3.4rem);
	}

	.evpm-hero-lede {
		font-size: 0.98rem;
	}

	.evpm-hero-index-item {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.evpm-hero-index-name {
		font-size: 1.05rem;
	}
}

@media (hover: none) {
	.evpm-hero-index-item:hover {
		padding-left: 0;
	}

	.evpm-hero-index-item:hover .evpm-hero-index-arrow {
		stroke: var(--wp--preset--color--gold);
		transform: none;
	}

	.evpm-hero-index-item:active .evpm-hero-index-arrow {
		stroke: var(--wp--preset--color--rust);
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpm-hero-index-item,
	.evpm-hero-index-arrow {
		transition: none;
	}
}

/* ================================================
   THE ORGANIZATIONS
   ================================================ */

.evpm-orgs {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem) 0;
}

/* ---------- Section head ---------- */

.evpm-header {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1.5rem clamp(2rem, 5vw, 5rem);
	align-items: end;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.evpwt-js .evpm-header {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpm-header.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* The eyebrow is shared by the section head and the closing panel. */
.evpm-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpm-eyebrow::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evpm-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

/* The same accent the listing hero title uses. */
.evpm-title em {
	font-style: normal;
	color: var(--wp--preset--color--rust);
}

.evpm-note {
	max-width: 34rem;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- The rows ---------- */

.evpm-org {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.75rem, 4vw, 4.5rem);
	align-items: center;
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
}

/*
   THE ROWS FADE, THEY DO NOT TRANSLATE, and that is load bearing.
   Every other reveal on this page lifts its target a rem and a quarter
   as it fades. These rows are the hero index's anchor targets, and the
   browser computes a fragment jump from the element's CURRENT
   transformed position: with the row still sitting 20px low, it
   scrolled 20px too far and the row then rose out from under the
   landing, ending 20px above where scroll-margin-top asked for.
   Measured 30 September 2026: two of the three anchors rested at 76px
   with the header 81px tall, so the row's top edge sat behind the
   header; the third passed only because it happened to be revealed
   already. An anchor target must not move after the jump.
*/
.evpwt-js .evpm-org {
	opacity: 0;
	transition: opacity 0.7s ease;
}

.evpm-org.revealed {
	opacity: 1;
}

/*
   Even rows put the plate on the right. Grid placement rather than
   direction: rtl, so the DOM and the tab order stay logo, then text,
   and nothing about the text reverses.
*/
.evpm-org:nth-child(even) .evpm-org-logo {
	grid-column: 2;
	grid-row: 1;
}

.evpm-org:nth-child(even) .evpm-org-body {
	grid-column: 1;
	grid-row: 1;
}

/*
   The logo plate. A light plate behind a transparent PNG, with the
   image contained rather than covered: cropping a logo is worse than
   letterboxing it. A landscape ratio because two of the three marks
   are landscape and the third, the GSTC mark, is a compact portrait
   that reads fine letterboxed. Nothing sits over the plate any more;
   the category label moved into the row's eyebrow.
*/
.evpm-org-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	padding: clamp(1.5rem, 4vw, 3.25rem);
	border-radius: 1rem;
	background-color: #faf8f5;
	overflow: clip;
}

.evpm-org-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	-webkit-user-drag: none;
}

/*
   The ATTA badge. ATTA's members.js appends a link and an img into
   this div and writes inline styles on both: 15px of padding on the
   div, max-height 300px and width 100% on the image. The !important
   rules exist only to beat those inline declarations, so the badge is
   contained in the plate like the two logos beside it. Sizing the
   image by max-width and max-height with auto dimensions keeps the
   badge's ratio whichever side the plate limits, and that matters
   because phones get a different badge: ATTA's script serves the
   portrait 318 by 500 one there, see note 5 in
   parts/section-memberships-list.php, so the height limit is the one
   that does the work on a phone and the width limit on a desktop.
*/
.evpm-atta-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}

.evpm-atta-badge a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 100%;
}

.evpm-atta-badge img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto;
	max-height: 100% !important;
	object-fit: contain;
	-webkit-user-drag: none;
}

/* ---------- The text ---------- */

.evpm-org-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Acronym, then the category, separated by a gold dot. */
.evpm-org-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.875rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpm-org-kind {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 600;
	color: rgba(212, 196, 168, 0.75);
}

.evpm-org-kind::before {
	content: "";
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

.evpm-org-name {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.evpm-org-desc {
	max-width: 40rem;
	margin: 0 0 1.5rem;
	font-size: 0.98rem;
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.62);
}

.evpm-commitments {
	display: grid;
	gap: 0.625rem;
	width: 100%;
	max-width: 40rem;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.evpm-commitments li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	font-size: 0.86rem;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.evpm-commitments li::before {
	content: "";
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
}

/* The outbound link, a pill in the hero tags' outline, filling on hover. */
.evpm-org-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.375rem;
	border: 1px solid rgba(212, 196, 168, 0.35);
	border-radius: 3.125rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.evpm-org-link:hover {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpm-org-link svg {
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpm-org-link:hover svg {
	transform: translateX(0.2rem);
}

.evpm-org-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ================================================
   CLOSING CTA
   A bordered panel in the same container as the rows: the text on
   the left, the button on the right.
   ================================================ */

.evpm-closing {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.evpm-closing-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 1.25rem;
	background: rgba(28, 22, 16, 0.6);
}

.evpwt-js .evpm-closing-inner {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpm-closing-inner.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpm-closing-title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.evpm-closing-body {
	max-width: 38rem;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.6);
}

.evpm-closing-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	overflow: clip;
	padding: 1rem 2.125rem;
	border-radius: 3.125rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.evpm-closing-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpm-closing-cta:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.875rem 2.5rem rgba(184, 98, 27, 0.55);
}

.evpm-closing-cta:hover::before {
	opacity: 1;
}

.evpm-closing-cta span,
.evpm-closing-cta svg {
	position: relative;
	z-index: 1;
}

.evpm-closing-cta svg {
	width: 0.9375rem;
	height: 0.9375rem;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpm-closing-cta:hover svg {
	transform: translateX(0.25rem);
}

.evpm-closing-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ================================================
   1024 AND BELOW
   The section head's two columns stack.
   ================================================ */
@media (max-width: 1024px) {
	.evpm-header {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.evpm-note {
		max-width: 40rem;
	}
}

/* ================================================
   768 AND BELOW
   The rows stack, plate above text, on every row alike.
   ================================================ */
@media (max-width: 768px) {
	.evpm-org {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.evpm-org:nth-child(even) .evpm-org-logo,
	.evpm-org:nth-child(even) .evpm-org-body {
		grid-column: 1;
		grid-row: auto;
	}

	.evpm-org-logo {
		max-width: 30rem;
		aspect-ratio: 16 / 9;
	}

	.evpm-closing-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* ================================================
   480 AND BELOW
   ================================================ */
@media (max-width: 480px) {
	.evpm-org-desc {
		font-size: 0.93rem;
		line-height: 1.75;
	}

	.evpm-commitments li {
		font-size: 0.84rem;
	}

	.evpm-closing-cta {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 1.125rem 1.75rem;
	}
}

/* ================================================
   TOUCH DEVICES
   Hover states stick on touch, so they are turned off where there is
   no hover, and a small active state replaces them.
   ================================================ */
@media (hover: none) {
	.evpm-org-link:hover {
		border-color: rgba(212, 196, 168, 0.35);
		background: transparent;
		color: var(--wp--preset--color--gold);
	}

	.evpm-org-link:hover svg {
		transform: none;
	}

	.evpm-closing-cta:hover {
		transform: none;
		box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	}

	.evpm-closing-cta:hover::before { opacity: 0; }
	.evpm-closing-cta:hover svg { transform: none; }

	.evpm-org-link:active {
		border-color: var(--wp--preset--color--rust);
		color: #fff;
		background: var(--wp--preset--color--rust);
	}

	.evpm-closing-cta:active {
		transform: scale(0.98);
		transition: transform 0.15s ease;
	}
}

/* ================================================
   REDUCED MOTION
   Everything visible, nothing moving. The reveal targets are listed
   with the .evpwt-js prefix because that is where their hidden state
   is defined, and a rule without it would not reach them.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
	.evpwt-js .evpm-header,
	.evpwt-js .evpm-org,
	.evpwt-js .evpm-closing-inner {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evpm-org-link,
	.evpm-org-link svg,
	.evpm-closing-cta,
	.evpm-closing-cta::before,
	.evpm-closing-cta svg {
		transition: none;
	}
}

/* ================================================
   THE GIVING BACK AND SUSTAINABILITY PAGE

   Ported from four captures in salvage/giving-back-page/, recovered
   from chat history rather than from Wayback. Each shipped as a
   standalone HTML document with its own reset and font link.

   ONE BREAKPOINT LADDER, 1200 / 1024 / 768 / 480 / 360.

   The four captures had four ladders and no two shared a mobile
   transition point, so the page reflowed in four separate stages as the
   viewport narrowed:

       hero        1100 / 900 / 480
       philosophy  1100 / 768
       partners    1200 / 900 / 768 / 480
       gallery      900 / 600 / 380

   Everything below is on the site standard, the same one the About
   hero uses. The mapping: 1100 and 900 both became 1024 where they
   were the single column switch, 600 became 768, 380 became 480, and
   the missing steps were added.

   The one place the ladder is not simply renumbered is the hero. Its
   capture switched to the overlay layout at 900, and the partners wall
   dropped from six columns to three at 1200. Both are kept at the
   width that suits the content: the hero overlay at 1024, the wall at
   1200. Same ladder, different rungs used.

   NO !important ANYWHERE IN THIS BLOCK.

   The partners capture was saturated with it, roughly every
   declaration. That was not stylistic: the section was overridden by
   WordPress when first placed on the page and rebuilt with !important
   throughout to defeat Astra and Elementor. Both are gone. The hero,
   philosophy and gallery captures had none and were already correct.

   THE SWIPE HINT ORDERING IS LOAD BEARING. In the captures the base
   rule that hides it sat at the very bottom of the stylesheet and the
   768 query re-showed it with !important. Strip the !important and
   source order alone would hide it at every width. The base rule is
   above the media query here, which is what actually makes it correct.

   BOX SIZING IS SCOPED to the page wrapper, because main.css has no
   global reset and three bugs on this project have come from assuming
   otherwise.

   REVEALS ARE GATED ON .evpwt-js, the class a tiny inline snippet in
   wp_head puts on <html>, so with JS off nothing is ever hidden. The
   hero's entrance animations are not gated: they are pure CSS
   keyframes and finish on their own.
   ================================================ */

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

.ev-giving {
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

.ev-giving a {
	text-decoration: none;
}

/* Shared divider ornament, used by the hero and the philosophy block. */
.ev-giving .evp-gb-dline {
	display: block;
	width: 3rem;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), transparent);
}

.ev-giving .evp-gb-ddiamond {
	display: block;
	width: 0.4375rem;
	height: 0.4375rem;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}

@keyframes evpGbFadeUp {
	from { opacity: 0; transform: translateY(1.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes evpGbScrollPulse {
	0%   { left: -100%; }
	50%  { left: 0; }
	100% { left: 100%; }
}

/* ================================================
   HERO
   ================================================ */

.evp-gb-hero {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	min-height: 100vh;
	/* clip, not hidden: hidden creates a scroll context and would break
	   position: sticky on any descendant. */
	overflow: clip;
}

.evp-gb-hero-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4rem 5rem 5rem;
	background: var(--wp--preset--color--bg-deep);
}

.evp-gb-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 0.2s forwards;
}

.evp-gb-hero-eyebrow::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evp-gb-hero-title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(3rem, 4.5vw, 5.2rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 0.4s forwards;
}

.evp-gb-hero-title em {
	color: var(--wp--preset--color--rust);
	font-style: italic;
}

.evp-gb-hero-divider {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 2rem;
	opacity: 0;
	animation: evpGbFadeUp 0.7s ease-out 0.6s forwards;
	-webkit-user-select: none;
	user-select: none;
}

.evp-gb-hero-subtitle {
	max-width: 26.25rem;
	margin: 0 0 3rem;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 0.65s forwards;
}

.evp-gb-hero-actions {
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 0.8s forwards;
}

.evp-gb-hero-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	overflow: clip;
	padding: 1rem 2.125rem;
	border-radius: 3.125rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-gb-hero-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evp-gb-hero-cta:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.875rem 2.5rem rgba(184, 98, 27, 0.55);
}

.evp-gb-hero-cta:hover::before {
	opacity: 1;
}

.evp-gb-hero-cta span,
.evp-gb-hero-cta svg {
	position: relative;
	z-index: 1;
}

.evp-gb-hero-cta svg {
	width: 0.9375rem;
	height: 0.9375rem;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evp-gb-hero-cta:hover svg {
	transform: translateX(0.25rem);
}

.evp-gb-hero-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* The partners section is the CTA's scroll target and takes focus. */
.evp-gb-partners:focus {
	outline: none;
}

.evp-gb-partners:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -0.5rem;
}

.evp-gb-hero-scroll {
	position: absolute;
	bottom: 2.25rem;
	left: 5rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 1.4s forwards;
}

.evp-gb-scroll-line {
	position: relative;
	display: block;
	overflow: clip;
	width: 2rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

.evp-gb-scroll-line::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--rust);
	animation: evpGbScrollPulse 2s ease-in-out 1.8s infinite;
}

/* ---------- The slideshow ---------- */

.evp-gb-hero-media {
	position: relative;
	background-color: #1c2a1c;
}

/*
   Five stacked images, one visible. The capture swapped a background on
   one panel and cross-faded a second over it on a 1300ms timeout tied
   to this 1.2s transition. One class toggle instead, and no timeout to
   keep in step.
*/
.evp-gb-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.evp-gb-hero-slide.is-active {
	opacity: 1;
}

.evp-gb-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		#111010 0%,
		rgba(17, 16, 16, 0.85) 4%,
		rgba(17, 16, 16, 0.3) 12%,
		rgba(17, 16, 16, 0.06) 22%,
		transparent 35%);
}

.evp-gb-hero-media::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 35%;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.55) 0%, transparent 100%);
}

.evp-gb-hero-tag {
	position: absolute;
	right: 2.5rem;
	bottom: 2.75rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.375rem;
	opacity: 0;
	animation: evpGbFadeUp 0.8s ease-out 1.2s forwards;
}

.evp-gb-tag-region {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evp-gb-tag-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.3rem;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.5);
}

.evp-gb-tag-line {
	width: 2rem;
	height: 0.09375rem;
	margin-left: auto;
	background: var(--wp--preset--color--rust);
}

/* ================================================
   PHILOSOPHY
   ================================================ */

.evp-gb-phil {
	position: relative;
	padding: 6.25rem 5rem;
	overflow: clip;
	background: var(--wp--preset--color--bg-deep);
}

/* The hairline is inset to match the section padding, so it aligns
   with the content rather than spanning the viewport. Re-inset at each
   breakpoint; keep the two in step. */
.evp-gb-phil::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5rem;
	right: 5rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
}

.evp-gb-phil-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 5rem;
	align-items: start;
	margin-bottom: 3.5rem;
}

.evpwt-js .evp-gb-phil-left {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.evp-gb-phil-left.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-phil-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-gb-phil-eyebrow::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evp-gb-phil-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 4vw, 3.8rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evp-gb-phil-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evp-gb-phil-right {
	padding-top: 0.5rem;
}

.evpwt-js .evp-gb-phil-right {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.evp-gb-phil-right.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-phil-divider {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.75rem;
	-webkit-user-select: none;
	user-select: none;
}

.evp-gb-phil-body {
	margin: 0;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.5);
}

.evp-gb-phil-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.evpwt-js .evp-gb-phil-images {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.evp-gb-phil-images.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-phil-img {
	display: block;
	width: 100%;
	height: 23.75rem;
	object-fit: cover;
	object-position: center;
	border-radius: 0.75rem;
}

/* ================================================
   PARTNERS AND INITIATIVES
   ================================================ */

.evp-gb-partners {
	position: relative;
	padding: 6.25rem 5rem;
	overflow: clip;
	background: var(--wp--preset--color--bg-deep);
}

.evp-gb-partners::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5rem;
	right: 5rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
}

.evp-gb-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 5rem;
	align-items: end;
	margin-bottom: 4.5rem;
}

.evpwt-js .evp-gb-header {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.evp-gb-header.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-gb-eyebrow::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
}

.evp-gb-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 4vw, 3.8rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evp-gb-title em {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evp-gb-note {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- Sub dividers ---------- */

.evp-gb-sub-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.evpwt-js .evp-gb-sub-divider {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.evp-gb-sub-divider.revealed {
	opacity: 1;
}

.evp-gb-sub-divider-line {
	display: block;
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
	-webkit-user-select: none;
	user-select: none;
}

.evp-gb-sub-divider-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.22);
	white-space: nowrap;
}

/* ---------- Partner wall ---------- */

.evp-gb-wall {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin: 0 0 4rem;
	padding: 0;
	list-style: none;
	overflow: clip;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1rem;
}

.evpwt-js .evp-gb-wall {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.evp-gb-wall.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-wall-item {
	display: flex;
	min-width: 0;
}

.evp-gb-cell {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	overflow: clip;
	height: 11.25rem;
	padding: 1.125rem;
	text-align: left;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
	-webkit-tap-highlight-color: transparent;
}

.evp-gb-wall-item:last-child .evp-gb-cell {
	border-right: none;
}

/*
   The picture sits in its own layer under the scrim. A logo is
   contained rather than covered: cover cropped the four logo cells,
   which was survivable at 180px in a six column grid and is not once a
   cell can be 78% of a phone. The plate colour behind it comes from the
   registry, because the logos have transparent areas.
*/
.evp-gb-cell-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.evp-gb-cell-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.evp-gb-cell-media.is-logo {
	padding: 1.75rem;
}

.evp-gb-cell-media.is-logo .evp-gb-cell-img {
	object-fit: contain;
}

.evp-gb-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(17, 16, 16, 0.35) 0%,
		rgba(17, 16, 16, 0.75) 60%,
		rgba(17, 16, 16, 0.88) 100%);
	transition: opacity 0.4s ease;
}

.evp-gb-cell:hover::before {
	opacity: 0.6;
}

.evp-gb-cell::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 0.1875rem;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
	opacity: 0;
	transition: opacity 0.35s ease;
}

.evp-gb-cell:hover::after {
	opacity: 1;
}

.evp-gb-cell:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

.evp-gb-cell-text {
	position: relative;
	z-index: 3;
}

.evp-gb-cell-name {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
}

.evp-gb-cell-region {
	display: block;
	font-size: 0.52rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

/* ---------- Spotlights ---------- */

.evp-gb-spotlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpwt-js .evp-gb-spotlights {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.evp-gb-spotlights.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evp-gb-spotlight {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: clip;
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1.125rem;
	background: rgba(28, 22, 16, 0.97);
	transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.evp-gb-spotlight::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 0.1875rem;
	background: linear-gradient(90deg, var(--wp--preset--color--rust), var(--wp--preset--color--gold));
	opacity: 0;
	transition: opacity 0.35s ease;
}

.evp-gb-spotlight:hover {
	border-color: rgba(184, 98, 27, 0.3);
	box-shadow: 0 1.125rem 3.125rem rgba(184, 98, 27, 0.12);
	transform: translateY(-0.25rem);
}

.evp-gb-spotlight:hover::before {
	opacity: 1;
}

.evp-gb-spotlight-media {
	position: relative;
	display: block;
	flex-shrink: 0;
	height: 12.5rem;
}

.evp-gb-spotlight-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Two of the three are framed better from the top of the picture. */
.evp-gb-spotlight-img.evp-gb-img-top {
	object-position: center top;
}

.evp-gb-spotlight-media::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5rem;
	background: linear-gradient(transparent, rgba(28, 22, 16, 0.97));
}

.evp-gb-spotlight-tag {
	position: absolute;
	bottom: 1rem;
	left: 1.5rem;
	z-index: 3;
	margin: 0;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evp-gb-spotlight-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.375rem 1.5rem 1.75rem;
}

.evp-gb-spotlight-region {
	display: block;
	margin: 0 0 0.625rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-gb-spotlight-name {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
}

.evp-gb-spotlight-desc {
	flex: 1;
	margin: 0 0 1.375rem;
	font-size: 0.82rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.48);
}

.evp-gb-spotlight-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	margin-top: auto;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	transition: gap 0.3s ease, color 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.evp-gb-spotlight-link:hover {
	gap: 0.8125rem;
	color: var(--wp--preset--color--gold);
}

.evp-gb-spotlight-link svg {
	flex-shrink: 0;
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evp-gb-spotlight-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
	border-radius: 0.1875rem;
}

/* ---------- The swipe hint ----------
   Hidden by default and shown only where a row becomes a carousel.
   This base rule must stay ABOVE the 768 media query: in the captures
   it sat below and only lost on desktop by way of !important. */
.evp-gb-hint {
	display: none;
}

/* ================================================
   GALLERY MOSAIC
   ================================================ */

.evp-gb-gallery {
	position: relative;
	padding: 6.25rem 5rem;
	background: var(--wp--preset--color--bg-deep);
}

.evp-gb-gallery::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5rem;
	right: 5rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
}

/*
    +---------------+-------+-------+
    |               |   2   |   3   |   row 1, 280px
    |       1       +-------+-------+
    |               |       4       |   row 2, 280px
    +---------------+---------------+
      col 1     2       3       4
*/
.evp-gb-gal-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: 17.5rem 17.5rem;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evp-gb-gal-cell {
	position: relative;
	overflow: clip;
	min-height: 0;
	border-radius: 0.875rem;
}

.evp-gb-gal-cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.evp-gb-gal-cell:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.evp-gb-gal-cell:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.evp-gb-gal-cell:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }

.evp-gb-gal-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.evp-gb-gal-cell::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, rgba(17, 16, 16, 0.85) 100%);
}

/*
   THE LABELS ARE ALWAYS VISIBLE. They used to be opacity 0 until hover,
   which meant a keyboard user never saw them at all and a touch user
   only did because touch has no hover. The cells are photographs rather
   than controls now, so there is no hover state left to reveal them
   with, and no reason to hide them in the first place.
*/
.evp-gb-gal-label {
	position: absolute;
	bottom: 1.125rem;
	left: 1.25rem;
	z-index: 2;
	display: block;
}

.evp-gb-gal-region {
	display: block;
	margin-bottom: 0.1875rem;
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evp-gb-gal-caption {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 0.95rem;
	color: #fff;
}

.evp-gb-gal-cell:nth-child(1) .evp-gb-gal-caption { font-size: 1.3rem; }
.evp-gb-gal-cell:nth-child(4) .evp-gb-gal-caption { font-size: 1.1rem; }

/* ================================================
   1200 AND BELOW
   ================================================ */
@media (max-width: 1200px) {
	.evp-gb-hero-content { padding: 4.5rem 3rem 4.5rem 3.5rem; }
	.evp-gb-hero-scroll { left: 3.5rem; }

	.evp-gb-phil { padding: 6.25rem 3.5rem; }
	.evp-gb-phil::before { left: 3.5rem; right: 3.5rem; }
	.evp-gb-phil-inner { gap: 0 3.5rem; }

	.evp-gb-partners { padding: 6.25rem 3.5rem; }
	.evp-gb-partners::before { left: 3.5rem; right: 3.5rem; }
	.evp-gb-header { gap: 0 3.5rem; }

	/* Six logos across stops reading well before the layout breaks. */
	.evp-gb-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.evp-gb-gallery { padding: 6.25rem 3.5rem; }
	.evp-gb-gallery::before { left: 3.5rem; right: 3.5rem; }
}

/* ================================================
   1024 AND BELOW
   The hero becomes a single full bleed block with the content
   overlaid and anchored to the bottom, where thumbs reach.
   ================================================ */
@media (max-width: 1024px) {
	.evp-gb-hero {
		display: block;
		position: relative;
		min-height: 100vh;
		/*
		   lvh, NOT dvh. The capture used dvh, which makes the layout
		   shift while the iOS Safari URL bar shows and hides. The About
		   hero settled on lvh two months later and that decision
		   supersedes this file. The known cost is a slightly below fold
		   edge on first paint. Deliberate.
		*/
		min-height: 100lvh;
		overflow: clip;
	}

	.evp-gb-hero-media {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
	}

	.evp-gb-hero-media::before {
		background: linear-gradient(
			180deg,
			rgba(17, 16, 16, 0.55) 0%,
			rgba(17, 16, 16, 0.4) 30%,
			rgba(17, 16, 16, 0.75) 65%,
			rgba(17, 16, 16, 0.95) 100%);
	}

	.evp-gb-hero-media::after { display: none; }

	.evp-gb-hero-content {
		position: relative;
		z-index: 5;
		min-height: 100vh;
		min-height: 100lvh;
		padding: 7.5rem 1.5rem 3.75rem;
		justify-content: flex-end;
		background: transparent;
	}

	.evp-gb-hero-scroll { display: none; }
	.evp-gb-hero-tag { display: none; }

	.evp-gb-hero-eyebrow {
		margin-bottom: 1.125rem;
		font-size: 0.62rem;
		letter-spacing: 0.22em;
		color: var(--wp--preset--color--gold);
	}

	.evp-gb-hero-eyebrow::before {
		width: 1.375rem;
		background: var(--wp--preset--color--gold);
	}

	.evp-gb-hero-title {
		margin-bottom: 1.375rem;
		font-size: clamp(2.6rem, 10vw, 3.8rem);
		line-height: 1.05;
		text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.4);
	}

	.evp-gb-hero-divider { margin-bottom: 1.375rem; }
	.evp-gb-hero-divider .evp-gb-dline { width: 2.25rem; }

	.evp-gb-hero-subtitle {
		max-width: none;
		margin-bottom: 2rem;
		font-size: 0.95rem;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
		text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.5);
	}

	.evp-gb-hero-actions { width: 100%; }

	.evp-gb-hero-cta {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 1.125rem 1.75rem;
	}

	/* The header's two columns stack here rather than at 900, which is
	   not a breakpoint this site uses anywhere else. */
	.evp-gb-header {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		margin-bottom: 3.5rem;
	}

	.evp-gb-phil-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem 0;
	}

	/* The mosaic becomes a carousel here, one rung earlier than the
	   capture's 900, so it changes with the rest of the page. */
	.evp-gb-gallery { padding: 5rem 0; }
	.evp-gb-gallery::before { left: 1.375rem; right: 1.375rem; }

	.evp-gb-gal-grid {
		display: flex;
		grid-template-columns: none;
		grid-template-rows: none;
		gap: 0.875rem;
		padding: 0 1.375rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 1.375rem;
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.evp-gb-gal-grid::-webkit-scrollbar { display: none; }

	.evp-gb-gal-cell,
	.evp-gb-gal-cell:nth-child(1),
	.evp-gb-gal-cell:nth-child(2),
	.evp-gb-gal-cell:nth-child(3),
	.evp-gb-gal-cell:nth-child(4) {
		grid-column: auto;
		grid-row: auto;
		flex: 0 0 82%;
		height: 23.75rem;
		scroll-snap-align: start;
	}

	.evp-gb-gal-label { bottom: 1.375rem; left: 1.5rem; }
	.evp-gb-gal-region { font-size: 0.55rem; }

	.evp-gb-gal-caption,
	.evp-gb-gal-cell:nth-child(1) .evp-gb-gal-caption,
	.evp-gb-gal-cell:nth-child(4) .evp-gb-gal-caption { font-size: 1.2rem; }

	.evp-gb-gallery .evp-gb-hint {
		margin: 1.125rem 1.375rem 0;
	}
}

/* ================================================
   768 AND BELOW
   Both partner rows become snapping carousels that bleed to the
   viewport edge.
   ================================================ */
@media (max-width: 768px) {
	.evp-gb-phil { padding: 5rem 1.75rem; }
	.evp-gb-phil::before { left: 1.75rem; right: 1.75rem; }
	.evp-gb-phil-images { grid-template-columns: minmax(0, 1fr); }
	.evp-gb-phil-img { height: 16.25rem; }

	.evp-gb-partners { padding: 4.5rem 0; }
	.evp-gb-partners::before { left: 1.375rem; right: 1.375rem; }

	.evp-gb-header { margin-bottom: 3rem; padding: 0 1.375rem; }
	.evp-gb-title { font-size: clamp(2rem, 8vw, 2.8rem); }
	.evp-gb-note { font-size: 0.9rem; line-height: 1.75; }

	.evp-gb-sub-divider { margin: 0 1.375rem 1.375rem; gap: 0.75rem; }

	.evp-gb-wall {
		display: flex;
		grid-template-columns: none;
		gap: 0.75rem;
		margin: 0 0 1rem;
		padding: 0 1.375rem;
		border: none;
		border-radius: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 1.375rem;
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.evp-gb-wall::-webkit-scrollbar { display: none; }

	.evp-gb-wall-item { flex: 0 0 78%; scroll-snap-align: start; }

	.evp-gb-cell,
	.evp-gb-wall-item:last-child .evp-gb-cell {
		height: 12.5rem;
		padding: 1.25rem;
		border: 1px solid rgba(255, 255, 255, 0.07);
		border-radius: 0.875rem;
	}

	.evp-gb-cell-name { font-size: 0.78rem; }
	.evp-gb-cell-region { font-size: 0.55rem; }

	.evp-gb-spotlights {
		display: flex;
		grid-template-columns: none;
		gap: 0.875rem;
		padding: 0 1.375rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 1.375rem;
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.evp-gb-spotlights::-webkit-scrollbar { display: none; }

	.evp-gb-spotlight {
		flex: 0 0 85%;
		scroll-snap-align: start;
		border-radius: 0.875rem;
	}

	.evp-gb-spotlight-media { height: 11.25rem; }
	.evp-gb-spotlight-tag { bottom: 0.875rem; left: 1.25rem; }
	.evp-gb-spotlight-body { padding: 1.25rem 1.25rem 1.5rem; }
	.evp-gb-spotlight-name { margin-bottom: 0.75rem; font-size: 1.1rem; }
	.evp-gb-spotlight-desc { margin-bottom: 1.125rem; font-size: 0.82rem; line-height: 1.7; }

	/* 44px minimum tap target, without moving the link visually. */
	.evp-gb-spotlight-link {
		min-height: 2.75rem;
		margin-top: -0.75rem;
		margin-bottom: -0.25rem;
		padding: 0.75rem 0;
	}

	.evp-gb-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		font-size: 0.55rem;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.3);
		-webkit-user-select: none;
		user-select: none;
	}

	.evp-gb-hint svg {
		width: 0.875rem;
		height: 0.875rem;
		stroke: currentColor;
		fill: none;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.evp-gb-partners .evp-gb-hint {
		margin: 0 0 3.25rem;
		padding: 0 1.375rem;
	}
}

/* ================================================
   480 AND BELOW
   ================================================ */
@media (max-width: 480px) {
	.evp-gb-hero-content { padding: 6.875rem 1.25rem 3rem; }
	.evp-gb-hero-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
	.evp-gb-hero-subtitle { margin-bottom: 1.75rem; font-size: 0.9rem; }

	.evp-gb-phil { padding: 4rem 1.25rem; }
	.evp-gb-phil::before { left: 1.25rem; right: 1.25rem; }

	.evp-gb-partners::before { left: 1.125rem; right: 1.125rem; }
	.evp-gb-header { padding: 0 1.125rem; }
	.evp-gb-title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
	.evp-gb-note { font-size: 0.88rem; }
	.evp-gb-sub-divider { margin: 0 1.125rem 1.375rem; }
	.evp-gb-sub-divider-label { font-size: 0.55rem; letter-spacing: 0.2em; }

	.evp-gb-wall,
	.evp-gb-spotlights {
		padding: 0 1.125rem;
		scroll-padding-inline-start: 1.125rem;
	}

	.evp-gb-partners .evp-gb-hint { padding: 0 1.125rem; }
	.evp-gb-wall-item { flex-basis: 82%; }
	.evp-gb-cell { height: 11.25rem; }
	.evp-gb-spotlight { flex-basis: 88%; }

	.evp-gb-gallery::before { left: 1.125rem; right: 1.125rem; }

	.evp-gb-gal-grid {
		padding: 0 1.125rem;
		scroll-padding-inline-start: 1.125rem;
	}

	.evp-gb-gallery .evp-gb-hint { margin: 1.125rem 1.125rem 0; }

	.evp-gb-gal-cell,
	.evp-gb-gal-cell:nth-child(1),
	.evp-gb-gal-cell:nth-child(2),
	.evp-gb-gal-cell:nth-child(3),
	.evp-gb-gal-cell:nth-child(4) {
		flex-basis: 86%;
		height: 21.25rem;
	}
}

/* ================================================
   360 AND BELOW
   A card at 82% of a 360 viewport leaves no room for the snap
   gutter, so the basis comes down with the card heights.
   ================================================ */
@media (max-width: 360px) {
	.evp-gb-hero-title { font-size: clamp(2.1rem, 12vw, 2.8rem); }

	.evp-gb-wall-item { flex-basis: 86%; }
	.evp-gb-spotlight { flex-basis: 90%; }
	.evp-gb-spotlight-body { padding: 1.125rem 1.125rem 1.375rem; }

	.evp-gb-gal-cell,
	.evp-gb-gal-cell:nth-child(1),
	.evp-gb-gal-cell:nth-child(2),
	.evp-gb-gal-cell:nth-child(3),
	.evp-gb-gal-cell:nth-child(4) {
		flex-basis: 88%;
		height: 18.75rem;
	}
}

/* ================================================
   TOUCH DEVICES
   Hover sticks on touch, so it is turned off where there is no
   hover and a small active state replaces it.
   ================================================ */
@media (hover: none) {
	.evp-gb-hero-cta:hover {
		transform: none;
		box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	}

	.evp-gb-hero-cta:hover::before { opacity: 0; }
	.evp-gb-hero-cta:hover svg { transform: none; }
	.evp-gb-hero-cta:active { transform: scale(0.98); transition: transform 0.15s ease; }

	.evp-gb-cell:hover::before { opacity: 1; }
	.evp-gb-cell:hover::after { opacity: 0; }

	.evp-gb-spotlight:hover {
		border-color: rgba(212, 196, 168, 0.1);
		box-shadow: none;
		transform: none;
	}

	.evp-gb-spotlight:hover::before { opacity: 0; }

	.evp-gb-spotlight-link:hover {
		gap: 0.4375rem;
		color: var(--wp--preset--color--rust);
	}

	.evp-gb-spotlight-link:active { color: var(--wp--preset--color--gold); }
}

/* ================================================
   REDUCED MOTION
   Everything visible, nothing moving. The slideshow holds on the
   first slide: giving-back.js never starts its timer under reduced
   motion, so no crossfade runs at all.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
	.evp-gb-hero-eyebrow,
	.evp-gb-hero-title,
	.evp-gb-hero-divider,
	.evp-gb-hero-subtitle,
	.evp-gb-hero-actions,
	.evp-gb-hero-scroll,
	.evp-gb-hero-tag {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.evp-gb-scroll-line::after { animation: none; }

	.evp-gb-hero-slide { transition: none; }

	.evpwt-js .evp-gb-phil-left,
	.evpwt-js .evp-gb-phil-right,
	.evpwt-js .evp-gb-phil-images,
	.evpwt-js .evp-gb-header,
	.evpwt-js .evp-gb-sub-divider,
	.evpwt-js .evp-gb-wall,
	.evpwt-js .evp-gb-spotlights {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evp-gb-hero-cta,
	.evp-gb-hero-cta::before,
	.evp-gb-hero-cta svg,
	.evp-gb-cell::before,
	.evp-gb-cell::after,
	.evp-gb-spotlight,
	.evp-gb-spotlight::before,
	.evp-gb-spotlight-link {
		transition: none;
	}
}



/* ================================================
   THE MISSION PAGE

   Ported from mission-page/RECOVERED-mission-page.html, a Wayback
   capture of 11 June 2026.

   IT WAS A LIGHT PAGE AND IT IS DARK NOW.

   The capture is cream and white with #333 text: --cream #F8F6F3,
   body background #fff. Every other page on this site is #111010 with
   white text, and the header and footer are dark on every route, so a
   cream body would have been sandwiched between two dark bars and read
   as a rendering fault rather than a design.

   This is the documented rebuild rule rather than a preference. Every
   recovered section on this project carries the same instruction:
   "Background #111010 via token. Buttons use the shared spec." The
   page is old enough to predate the dark redesign, which is the likely
   reason it was still light.

   Reverting is one block: swap the ground and text tokens below.

   186 !important REMOVED. The recovery notes say "No !important
   anywhere, which is correct. Do not add any." That is wrong about
   this file: the stylesheet carries 186 of them. None survive.

   ONE BREAKPOINT LADDER, 1200 / 1024 / 768 / 480 / 360. The capture
   had 1024 / 768 / 480, which is the site ladder missing its top and
   bottom rungs, so this only adds the two.

   STAGGERS USE --ev-i, an index the template sets on each card, rather
   than the JS transitionDelay the capture wrote. Same behaviour, works
   for any number of cards, and nothing about initial state is applied
   by script.

   REVEALS ARE GATED ON .evpwt-js, the class a tiny inline snippet in
   wp_head puts on <html>, so with JS off nothing is ever hidden. The
   hero's entrance is pure CSS keyframes and is not gated.
   ================================================ */

.ev-mission-page,
.ev-mission-page *,
.ev-mission-page *::before,
.ev-mission-page *::after {
	box-sizing: border-box;
}

.ev-mission-page {
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

.ev-mission-page a {
	text-decoration: none;
}

/* The two grounds the section rhythm alternates between. */
.evpms-statement,
.evpms-impact {
	background: #181818;
}

.evpms-pillars,
.evpms-cta {
	background: var(--wp--preset--color--bg-deep);
}

.evpms-inner {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

@keyframes evpmsFadeUp {
	from { opacity: 0; transform: translateY(1.25rem); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes evpmsDiamond {
	0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
	50%      { transform: rotate(45deg) scale(1.2); opacity: 0.7; }
}

/* ================================================
   HERO
   ================================================ */

.evpms-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 9rem 1.25rem 5rem;
	text-align: center;
	/*
	   NO PHOTOGRAPH. The captured hero was a darkened Unsplash stock
	   image, one of five placeholders on the page. A token gradient
	   until there is a real picture for it.
	*/
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(184, 98, 27, 0.16) 0%, transparent 60%),
		var(--wp--preset--color--bg-deep);
}

.evpms-hero-inner {
	max-width: 56.25rem;
	padding: 0 1.25rem;
}

.evpms-hero-eyebrow {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0;
	animation: evpmsFadeUp 0.6s ease forwards;
}

.evpms-hero-title {
	margin: 0 0 1.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 6vw, 5rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
	opacity: 0;
	animation: evpmsFadeUp 0.6s ease 0.1s forwards;
}

.evpms-hero-subtitle {
	max-width: 43.75rem;
	margin: 0 auto;
	font-size: clamp(1.05rem, 2.5vw, 1.4rem);
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.75);
	opacity: 0;
	animation: evpmsFadeUp 0.6s ease 0.2s forwards;
}

/* ================================================
   SHARED SECTION HEADER
   ================================================ */

.evpms-header {
	margin-bottom: 4.375rem;
	text-align: center;
}

.evpms-eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpwt-js .evpms-eyebrow {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.evpms-header.revealed .evpms-eyebrow {
	opacity: 1;
	transform: translateY(0);
}

.evpms-title {
	position: relative;
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	text-wrap: balance;
}

.evpwt-js .evpms-title {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.evpms-header.revealed .evpms-title {
	opacity: 1;
	transform: translateY(0);
}

.evpms-highlight {
	position: relative;
	color: var(--wp--preset--color--rust);
}

/*
   The underline sits BEHIND the word but IN FRONT of the section.
   The capture used z-index -1, which on a section with its own
   background paints it behind that background and makes it invisible.
   A positioned ::after at z-index 0 under text at z-index 1 does the
   same job without leaving the stacking context.
*/
.evpms-highlight::after {
	content: "";
	position: absolute;
	bottom: 0.3125rem;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0.625rem;
	background: rgba(212, 196, 168, 0.28);
	transition: width 0.8s ease 0.6s;
}

.evpms-header.revealed .evpms-highlight::after {
	width: 100%;
}

.evpms-title,
.evpms-highlight {
	isolation: isolate;
}

.evpms-highlight {
	z-index: 1;
}

.evpms-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 1.875rem;
	-webkit-user-select: none;
	user-select: none;
}

.evpwt-js .evpms-rule {
	opacity: 0;
	transition: opacity 0.6s ease 0.3s;
}

.evpms-header.revealed .evpms-rule {
	opacity: 1;
}

.evpms-rule-line {
	width: 3.75rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust), transparent);
}

.evpms-rule-diamond {
	width: 0.625rem;
	height: 0.625rem;
	background: var(--wp--preset--color--rust);
	transform: rotate(45deg);
	animation: evpmsDiamond 2s ease-in-out infinite;
}

.evpms-subtitle {
	max-width: 40.625rem;
	margin: 0 auto;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

.evpwt-js .evpms-subtitle {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.evpms-header.revealed .evpms-subtitle {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================
   MISSION STATEMENT
   ================================================ */

.evpms-statement {
	padding: 6.25rem 0;
}

.evpms-statement-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.75rem;
	align-items: center;
}

.evpms-quote {
	position: relative;
	margin: 0;
}

.evpwt-js .evpms-quote {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.evpms-quote.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpms-quote::before {
	content: "\201C";
	position: absolute;
	top: -1.875rem;
	left: -0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 6rem;
	line-height: 1;
	color: rgba(184, 98, 27, 0.28);
	pointer-events: none;
}

.evpms-quote-text {
	position: relative;
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.6;
	color: #fff;
}

.evpms-quote-author {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpms-shots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpwt-js .evpms-shots {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.evpms-shots.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* The first photograph spans both columns, the other two sit beneath. */
.evpms-shot {
	position: relative;
	overflow: clip;
	height: 11.25rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.04);
}

.evpms-shot:first-child {
	grid-column: 1 / -1;
	height: 15rem;
}

.evpms-shot-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.evpms-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.8) 0%, transparent 55%);
}

.evpms-shot-label {
	position: absolute;
	bottom: 0.875rem;
	left: 1rem;
	right: 1rem;
	z-index: 2;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.9);
}

/* ================================================
   PILLARS
   ================================================ */

.evpms-pillars {
	padding: 6.25rem 0;
}

.evpms-pillar-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpms-pillar {
	display: flex;
	flex-direction: column;
	overflow: clip;
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1rem;
	background: rgba(28, 22, 16, 0.6);
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.evpwt-js .evpms-pillar {
	opacity: 0;
	transform: translateY(1.5rem);
	/* The stagger, from the index the template sets. */
	transition:
		opacity 0.7s ease calc( var( --ev-i, 0 ) * 0.1s ),
		transform 0.7s ease calc( var( --ev-i, 0 ) * 0.1s ),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.evpms-pillar-grid.revealed .evpms-pillar {
	opacity: 1;
	transform: translateY(0);
}

.evpms-pillar:hover {
	border-color: rgba(184, 98, 27, 0.3);
	box-shadow: 0 1.125rem 3.125rem rgba(184, 98, 27, 0.12);
	transform: translateY(-0.25rem);
}

.evpms-pillar-media {
	display: block;
	flex-shrink: 0;
	height: 10rem;
}

.evpms-pillar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpms-pillar-body {
	padding: 1.75rem;
}

.evpms-pillar-title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.evpms-pillar-desc {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.5);
}

/* ================================================
   IMPACT
   ================================================ */

.evpms-impact {
	padding: 6.25rem 0;
}

.evpms-impact-intro {
	max-width: 46.875rem;
	margin: 0 auto 3.75rem;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.85;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
}

.evpms-impact-intro strong {
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}

.evpwt-js .evpms-impact-intro {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpms-impact-intro.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpms-impact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpms-impact-card {
	display: flex;
	flex-direction: column;
	overflow: clip;
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 1.125rem;
	background: rgba(28, 22, 16, 0.97);
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.evpwt-js .evpms-impact-card {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s ease calc( var( --ev-i, 0 ) * 0.15s ),
		transform 0.7s ease calc( var( --ev-i, 0 ) * 0.15s ),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.evpms-impact-grid.revealed .evpms-impact-card {
	opacity: 1;
	transform: translateY(0);
}

.evpms-impact-card:hover {
	border-color: rgba(184, 98, 27, 0.3);
	box-shadow: 0 1.125rem 3.125rem rgba(184, 98, 27, 0.12);
	transform: translateY(-0.25rem);
}

.evpms-impact-media {
	display: block;
	flex-shrink: 0;
	height: 12.5rem;
	background: rgba(255, 255, 255, 0.04);
}

.evpms-impact-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.evpms-impact-body {
	padding: 1.5rem 1.5rem 1.75rem;
}

.evpms-impact-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
}

.evpms-impact-desc {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.5);
}

/* ================================================
   CLOSING CTA
   ================================================ */

.evpms-cta {
	padding: 6.25rem 0 7.5rem;
	text-align: center;
}

.evpms-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.evpwt-js .evpms-cta-buttons {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpms-cta-buttons.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpms-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	overflow: clip;
	padding: 1rem 2.125rem;
	border-radius: 3.125rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.evpms-btn svg {
	width: 0.9375rem;
	height: 0.9375rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.evpms-btn:hover svg {
	transform: translateX(0.25rem);
}

.evpms-btn--primary {
	color: #fff;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
}

.evpms-btn--primary:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.875rem 2.5rem rgba(184, 98, 27, 0.55);
}

.evpms-btn--secondary {
	color: var(--wp--preset--color--gold);
	border: 1px solid rgba(212, 196, 168, 0.35);
}

.evpms-btn--secondary:hover {
	color: var(--wp--preset--color--bg-deep);
	background: var(--wp--preset--color--gold);
	transform: translateY(-0.1875rem);
}

.evpms-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ================================================
   1200 AND BELOW
   ================================================ */
@media (max-width: 1200px) {
	.evpms-statement-grid { gap: 2.5rem; }
	.evpms-pillar-body { padding: 1.5rem; }
}

/* ================================================
   1024 AND BELOW
   ================================================ */
@media (max-width: 1024px) {
	.evpms-hero { min-height: 60vh; padding: 8rem 1.25rem 4rem; }

	.evpms-statement-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }

	.evpms-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.evpms-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.evpms-header { margin-bottom: 3.5rem; }
}

/* ================================================
   768 AND BELOW
   ================================================ */
@media (max-width: 768px) {
	.evpms-hero { padding: 7rem 1.25rem 3.5rem; }

	.evpms-statement,
	.evpms-pillars,
	.evpms-impact { padding: 4.5rem 0; }

	.evpms-cta { padding: 4.5rem 0 5.625rem; }

	.evpms-impact-grid { grid-template-columns: minmax(0, 1fr); }

	.evpms-quote::before { font-size: 4.5rem; top: -1.25rem; }

	.evpms-impact-intro { margin-bottom: 2.5rem; font-size: 1rem; }

	.evpms-btn { justify-content: center; width: 100%; max-width: 22rem; }
}

/* ================================================
   480 AND BELOW
   ================================================ */
@media (max-width: 480px) {
	.evpms-inner { padding: 0 1.125rem; }

	.evpms-hero { padding: 6.5rem 1.125rem 3rem; }
	.evpms-hero-inner { padding: 0; }

	.evpms-pillar-grid { grid-template-columns: minmax(0, 1fr); }

	.evpms-shots { grid-template-columns: minmax(0, 1fr); }
	.evpms-shot,
	.evpms-shot:first-child { height: 12.5rem; }

	.evpms-pillar-body { padding: 1.375rem; }
	.evpms-impact-body { padding: 1.375rem 1.25rem 1.5rem; }
}

/* ================================================
   360 AND BELOW
   ================================================ */
@media (max-width: 360px) {
	.evpms-hero-title { font-size: clamp(2rem, 11vw, 2.6rem); }
	.evpms-quote-text { font-size: 1.15rem; }
	.evpms-shot,
	.evpms-shot:first-child { height: 11rem; }
}

/* ================================================
   TOUCH DEVICES
   ================================================ */
@media (hover: none) {
	.evpms-pillar:hover,
	.evpms-impact-card:hover {
		border-color: rgba(212, 196, 168, 0.1);
		box-shadow: none;
		transform: none;
	}

	.evpms-btn--primary:hover {
		transform: none;
		box-shadow: 0 0.5rem 1.75rem rgba(184, 98, 27, 0.4);
	}

	.evpms-btn--secondary:hover {
		color: var(--wp--preset--color--gold);
		background: none;
		transform: none;
	}

	.evpms-btn:hover svg { transform: none; }
	.evpms-btn:active { transform: scale(0.98); transition: transform 0.15s ease; }
}

/* ================================================
   REDUCED MOTION

   SCOPED TO THIS PAGE. The capture ended with a universal
   *, *::before, *::after rule carrying !important and no scoping.
   Harmless in a standalone document; in a theme stylesheet it would
   have killed every animation and transition on every page for any
   visitor with reduced motion set, including the components that
   already handle it properly.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
	.evpms-hero-eyebrow,
	.evpms-hero-title,
	.evpms-hero-subtitle {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.evpms-rule-diamond { animation: none; }

	.evpwt-js .evpms-eyebrow,
	.evpwt-js .evpms-title,
	.evpwt-js .evpms-rule,
	.evpwt-js .evpms-subtitle,
	.evpwt-js .evpms-quote,
	.evpwt-js .evpms-shots,
	.evpwt-js .evpms-pillar,
	.evpwt-js .evpms-impact-intro,
	.evpwt-js .evpms-impact-card,
	.evpwt-js .evpms-cta-buttons {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evpms-highlight::after { width: 100%; transition: none; }

	.evpms-pillar,
	.evpms-impact-card,
	.evpms-btn,
	.evpms-btn svg { transition: none; }
}



/* ================================================
   CUSTOMER SERVICE EXCELLENCE PAGE

   Ported from salvage/service-excellence-page/RECOVERED-service-excellence-page.html,
   built 8 February 2026 and never published.

   THE NAMESPACE. The capture's own recovery notes call it the worst on
   the project and they are right: .container, .highlight, .quote,
   .btn-primary, .section-header, .line, .diamond, .card-title, .author
   and two dozen more, all unscoped, several of them written as
   descendant selectors so they only looked scoped. Every one of them
   is evpse- here. Nothing in this block can match anything outside the
   page.

   THE REDUCED MOTION RULE. The capture ended with

       @media (prefers-reduced-motion: reduce) {
           *, *::before, *::after { ... !important }
       }

   Harmless in a standalone document. Dropped into a theme stylesheet
   it would have killed every animation and transition on every page
   for any visitor with reduced motion set, including the components
   that already handle it properly. The version at the bottom of this
   block names this page's elements and carries no !important.

   IT WAS A LIGHT PAGE AND IT IS DARK NOW, ALTERNATING.

   The capture alternated a cream (#F5F3EF to #E8E4DC) against a near
   black (#1a1a1a to #2d2d2d), section by section, and the alternation
   is doing real work: it separates the three phases so they read as
   three, and it lands the commitments on their own ground. Flattening
   it to one colour would lose that.

   So the alternation is kept and the palette is the site's: the deep
   ground for the odd sections, a raised #181818 for the even ones,
   which is the same pair the mission page uses. Cream against near
   black becomes raised against deep. The header and footer are dark on
   every route, so cream sections here would have read as a rendering
   fault rather than a design.

   The shared testimonials part sits between the commitments and the
   closing CTA and paints its own deep ground, which is why the
   commitments are raised and the CTA is raised: the rhythm still
   alternates across the part this page does not own.

   ONE BREAKPOINT LADDER, 1200 / 1024 / 768 / 480 / 360. The capture
   had 1024 / 900 / 768 / 480, where 900 existed only for the
   testimonials component that is not here any more.

   STAGGERS USE --ev-i, an index the template sets on each card. The
   capture used nth-child hardcoded to five cards per grid and six
   commitment items, so a sixth card would have appeared with no delay.

   THE GRAIN TEXTURE was five inline SVG data URIs with five different
   pattern ids, one per section. One rule now, on one class.

   THE FLOATING LINE DRAWINGS were eight full copies of the same two
   SVGs, redrawn at each section with different stroke colours. One
   <symbol> each in parts/service-icons.php, coloured here through
   currentColor.
   ================================================ */

.ev-service-page,
.ev-service-page *,
.ev-service-page *::before,
.ev-service-page *::after {
	box-sizing: border-box;
}

.ev-service-page {
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

.ev-service-page a {
	text-decoration: none;
}

.evpse-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* The two grounds the section rhythm alternates between. */
.evpse-philosophy,
.evpse-phase--raised,
.evpse-commitments,
.evpse-cta {
	background: #181818;
}

.evpse-phase--deep {
	background: var(--wp--preset--color--bg-deep);
}

.evpse-philosophy,
.evpse-phase,
.evpse-commitments,
.evpse-cta {
	position: relative;
	overflow: clip;
}

/*
   The grain. One rule, one data URI, replacing five that differed only
   in the pattern id they declared and then never reused.
*/
.evpse-philosophy::before,
.evpse-phase::before,
.evpse-commitments::before,
.evpse-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="0.5" fill="%23fff" opacity="0.03"/><circle cx="75" cy="75" r="0.3" fill="%23fff" opacity="0.02"/></svg>') repeat;
}

.evpse-inner {
	position: relative;
	z-index: 2;
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 2.5rem;
}

.evpse-inner--narrow {
	max-width: 53.125rem;
}

@keyframes evpseFadeUp {
	from { opacity: 0; transform: translateY(1.875rem); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes evpseFloatRotate {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-1.25rem) rotate(8deg); }
}

@keyframes evpseFloatSway {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(0.75rem); }
}

@keyframes evpseDiamond {
	0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
	50%      { transform: rotate(45deg) scale(1.2); opacity: 0.7; }
}

/* ================================================
   FLOATING LINE DRAWINGS

   Decoration. aria-hidden in the markup, pointer-events none here, and
   hidden outright below 768 where there is no margin for them to sit
   in.
   ================================================ */

.evpse-float {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	color: var(--wp--preset--color--gold);
	opacity: 0.07;
}

.evpse-float--compass {
	top: 10%;
	right: 5%;
	width: 6.875rem;
	height: 6.875rem;
	animation: evpseFloatRotate 20s ease-in-out infinite;
}

.evpse-float--globe {
	bottom: 15%;
	left: 4%;
	width: 5.625rem;
	height: 5.625rem;
	animation: evpseFloatSway 18s ease-in-out infinite;
}

.evpse-phase--raised .evpse-float {
	color: var(--wp--preset--color--rust);
	opacity: 0.1;
}

/* ================================================
   HERO
   ================================================ */

.evpse-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 9rem 1.25rem 5rem;
	overflow: clip;
	text-align: center;
	background: var(--wp--preset--color--bg-deep);
}

.evpse-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
   The capture stacked a gradient and an inset box-shadow vignette as
   two absolutely positioned elements. One element, both effects: the
   shadow needs a box and the gradient needs a background, and a single
   span can carry each.
*/
.evpse-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0.55) 0%, rgba(17, 16, 16, 0.7) 50%, rgba(17, 16, 16, 0.85) 100%);
	box-shadow: inset 0 0 9.375rem rgba(0, 0, 0, 0.4);
}

.evpse-hero .evpse-float {
	z-index: 2;
	opacity: 0.1;
}

.evpse-hero .evpse-float--compass {
	top: 15%;
	right: 8%;
	width: 7.5rem;
	height: 7.5rem;
}

.evpse-hero .evpse-float--globe {
	bottom: 20%;
	left: 6%;
	width: 6.25rem;
	height: 6.25rem;
}

.evpse-hero-inner {
	position: relative;
	z-index: 3;
	max-width: 56.25rem;
	padding: 0 1.25rem;
}

.evpse-hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9375rem;
	margin: 0 0 1.5625rem;
	opacity: 0;
	animation: evpseFadeUp 0.8s ease 0.2s forwards;
}

.evpse-hero-eyebrow-line {
	width: 2.5rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
}

.evpse-hero-eyebrow-text {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpse-hero-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	text-wrap: balance;
	opacity: 0;
	animation: evpseFadeUp 0.8s ease 0.4s forwards;
}

.evpse-hero-title .evpse-highlight {
	color: var(--wp--preset--color--gold);
}

/* The hero highlight is colour only, with no underline to draw. */
.evpse-hero-title .evpse-highlight::after {
	content: none;
}

/* ================================================
   PHILOSOPHY
   ================================================ */

.evpse-philosophy {
	padding: 5rem 0;
}

.evpse-philosophy-text {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.9;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
}

.evpwt-js .evpse-philosophy-text {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.evpse-philosophy-text.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================
   SHARED SECTION HEADER
   ================================================ */

.evpse-header {
	margin-bottom: 4.375rem;
	text-align: center;
}

.evpse-cta .evpse-header {
	margin-bottom: 2.5rem;
}

.evpse-eyebrow {
	display: block;
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpse-phase--raised .evpse-eyebrow,
.evpse-commitments .evpse-eyebrow {
	color: var(--wp--preset--color--rust);
}

.evpwt-js .evpse-eyebrow {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.evpse-header.revealed .evpse-eyebrow {
	opacity: 1;
	transform: translateY(0);
}

.evpse-title {
	margin: 0 0 1.5625rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	text-wrap: balance;
	isolation: isolate;
}

.evpwt-js .evpse-title {
	opacity: 0;
	transform: translateY(1.875rem);
	transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.evpse-header.revealed .evpse-title {
	opacity: 1;
	transform: translateY(0);
}

/*
   THE UNDERLINE SITS BEHIND THE WORD, NOT BEHIND THE SECTION. The
   capture used z-index -1, which on a section that paints its own
   background puts the underline behind that background and makes it
   invisible. A positioned ::after at z-index 0 under text at z-index 1
   does the same job inside the heading's own stacking context.
*/
.evpse-highlight {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--gold);
}

.evpse-phase--raised .evpse-highlight,
.evpse-commitments .evpse-highlight,
.evpse-cta .evpse-highlight {
	color: var(--wp--preset--color--rust);
}

.evpse-highlight::after {
	content: "";
	position: absolute;
	bottom: 0.3125rem;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0.5rem;
	background: rgba(184, 98, 27, 0.4);
	transition: width 0.8s ease 0.6s;
}

.evpse-phase--raised .evpse-highlight::after,
.evpse-commitments .evpse-highlight::after,
.evpse-cta .evpse-highlight::after {
	background: rgba(212, 196, 168, 0.3);
}

.evpse-header.revealed .evpse-highlight::after {
	width: 100%;
}

.evpse-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 1.875rem;
	-webkit-user-select: none;
	user-select: none;
}

.evpwt-js .evpse-rule {
	opacity: 0;
	transition: opacity 0.6s ease 0.3s;
}

.evpse-header.revealed .evpse-rule {
	opacity: 1;
}

.evpse-rule-line {
	width: 3.75rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
}

.evpse-rule-diamond {
	width: 0.5rem;
	height: 0.5rem;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
	animation: evpseDiamond 2s ease-in-out infinite;
}

.evpse-phase--raised .evpse-rule-line,
.evpse-commitments .evpse-rule-line {
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust), transparent);
}

.evpse-phase--raised .evpse-rule-diamond,
.evpse-commitments .evpse-rule-diamond {
	background: var(--wp--preset--color--rust);
}

.evpse-intro {
	max-width: 43.75rem;
	margin: 0 auto;
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

.evpwt-js .evpse-intro {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.evpse-header.revealed .evpse-intro {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================
   PHASE CARDS
   ================================================ */

.evpse-phase {
	padding: 6.25rem 0;
}

.evpse-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpse-card,
.evpse-commit {
	position: relative;
	overflow: clip;
	border-radius: 1.5rem;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s ease, box-shadow 0.5s ease;
}

.evpse-card {
	padding: 2.5rem 2.1875rem;
	border: 1px solid rgba(212, 196, 168, 0.12);
	background: rgba(255, 255, 255, 0.04);
}

.evpse-phase--raised .evpse-card {
	border-color: rgba(184, 98, 27, 0.16);
	background: rgba(28, 22, 16, 0.7);
}

.evpwt-js .evpse-card {
	opacity: 0;
	transform: translateY(2.5rem);
	/* The stagger, from the index the template sets. */
	transition:
		opacity 0.7s ease calc( var( --ev-i, 0 ) * 0.08s ),
		transform 0.7s ease calc( var( --ev-i, 0 ) * 0.08s ),
		border-color 0.5s ease,
		box-shadow 0.5s ease;
}

.evpse-cards.revealed .evpse-card {
	opacity: 1;
	transform: translateY(0);
}

/* The hover wash. One rule for both card kinds. */
.evpse-card::before,
.evpse-commit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(135deg, rgba(212, 196, 168, 0.1), rgba(184, 98, 27, 0.05));
	transition: opacity 0.4s ease;
}

.evpse-card:hover::before,
.evpse-commit:hover::before {
	opacity: 1;
}

.evpse-card:hover {
	transform: translateY(-0.5rem);
	border-color: rgba(212, 196, 168, 0.25);
	box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.3);
}

.evpse-phase--raised .evpse-card:hover {
	border-color: rgba(184, 98, 27, 0.3);
	box-shadow: 0 1.25rem 3.125rem rgba(184, 98, 27, 0.14);
}

.evpse-card-icon,
.evpse-commit-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.125rem;
	height: 3.125rem;
	border-radius: 0.875rem;
	background: rgba(212, 196, 168, 0.12);
}

.evpse-card-icon {
	margin-bottom: 1.375rem;
}

.evpse-phase--raised .evpse-card-icon,
.evpse-commit-icon {
	background: rgba(184, 98, 27, 0.14);
}

.evpse-card-icon svg,
.evpse-commit-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--wp--preset--color--gold);
}

.evpse-phase--raised .evpse-card-icon svg,
.evpse-commit-icon svg {
	fill: var(--wp--preset--color--rust);
}

.evpse-card-title {
	position: relative;
	z-index: 1;
	margin: 0 0 0.9375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.evpse-card-text {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.62);
}

/* ================================================
   COMMITMENTS
   ================================================ */

.evpse-commitments {
	padding: 6.25rem 0;
}

.evpse-commit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpse-commit {
	padding: 2.1875rem 1.875rem;
	border: 1px solid rgba(184, 98, 27, 0.16);
	background: rgba(28, 22, 16, 0.9);
	text-align: center;
}

.evpwt-js .evpse-commit {
	opacity: 0;
	transform: translateY(2.5rem);
	transition:
		opacity 0.7s ease calc( var( --ev-i, 0 ) * 0.06s ),
		transform 0.7s ease calc( var( --ev-i, 0 ) * 0.06s ),
		border-color 0.5s ease,
		box-shadow 0.5s ease;
}

.evpse-commit-grid.revealed .evpse-commit {
	opacity: 1;
	transform: translateY(0);
}

.evpse-commit:hover {
	transform: translateY(-0.5rem);
	border-color: rgba(184, 98, 27, 0.3);
	box-shadow: 0 1.5625rem 3.75rem rgba(184, 98, 27, 0.14);
}

.evpse-commit-icon {
	margin: 0 auto 1.25rem;
}

.evpse-commit-title {
	position: relative;
	z-index: 1;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.evpse-commit-text {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 0.93rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

/* ================================================
   CLOSING CTA
   ================================================ */

.evpse-cta {
	padding: 6.25rem 0;
	text-align: center;
}

.evpse-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

.evpwt-js .evpse-cta-buttons {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpse-cta-buttons.revealed {
	opacity: 1;
	transform: translateY(0);
}

.evpse-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2.25rem;
	border-radius: 3.125rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}

.evpse-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.3s ease;
}

.evpse-btn:hover svg {
	transform: translateX(0.25rem);
}

.evpse-btn--primary {
	color: #fff;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.5rem 1.5625rem rgba(184, 98, 27, 0.35);
}

.evpse-btn--primary:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.75rem 2.1875rem rgba(184, 98, 27, 0.5);
}

.evpse-btn--secondary {
	color: var(--wp--preset--color--gold);
	border: 2px solid rgba(212, 196, 168, 0.35);
}

.evpse-btn--secondary:hover {
	color: var(--wp--preset--color--bg-deep);
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	transform: translateY(-0.1875rem);
}

.evpse-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0.25rem;
}

/* ================================================
   1200 AND BELOW
   ================================================ */
@media (max-width: 1200px) {
	.evpse-card { padding: 2.1875rem 1.875rem; }
	.evpse-inner { padding: 0 2rem; }
}

/* ================================================
   1024 AND BELOW
   ================================================ */
@media (max-width: 1024px) {
	.evpse-hero { min-height: 60vh; padding: 8rem 1.25rem 4rem; }

	.evpse-commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.evpse-header { margin-bottom: 3.5rem; }

	.evpse-phase,
	.evpse-commitments,
	.evpse-cta { padding: 5rem 0; }
}

/* ================================================
   768 AND BELOW
   ================================================ */
@media (max-width: 768px) {
	.evpse-hero { min-height: 55vh; padding: 7rem 1.25rem 3.5rem; }

	.evpse-inner { padding: 0 1.5625rem; }

	.evpse-philosophy { padding: 3.75rem 0; }
	.evpse-philosophy-text { font-size: 1.05rem; }

	.evpse-phase,
	.evpse-commitments,
	.evpse-cta { padding: 4.375rem 0; }

	.evpse-header { margin-bottom: 3.125rem; }

	.evpse-cards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.evpse-commit-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

	.evpse-card { padding: 1.875rem 1.5625rem; }

	/* No margin for them to float in at this width. */
	.evpse-float { display: none; }
}

/* ================================================
   480 AND BELOW
   ================================================ */
@media (max-width: 480px) {
	.evpse-hero { min-height: 50vh; padding: 6.5rem 1.125rem 3rem; }
	.evpse-hero-inner { padding: 0; }
	.evpse-hero-eyebrow-line { width: 1.75rem; }

	.evpse-inner { padding: 0 1.125rem; }

	.evpse-philosophy { padding: 3.125rem 0; }
	.evpse-philosophy-text { font-size: 1rem; line-height: 1.8; }

	.evpse-phase,
	.evpse-commitments,
	.evpse-cta { padding: 3.5rem 0; }

	.evpse-header { margin-bottom: 2.1875rem; }
	.evpse-intro { font-size: 1rem; }

	.evpse-card { padding: 1.5625rem 1.25rem; }
	.evpse-card-title { font-size: 1.2rem; }
	.evpse-card-text { font-size: 0.9rem; }

	.evpse-commit { padding: 1.5625rem 1.25rem; }

	.evpse-btn { justify-content: center; width: 100%; max-width: 22rem; }
}

/* ================================================
   360 AND BELOW
   ================================================ */
@media (max-width: 360px) {
	.evpse-hero-title { font-size: clamp(1.9rem, 10vw, 2.4rem); }
	.evpse-hero-eyebrow { gap: 0.625rem; }
	.evpse-hero-eyebrow-text { font-size: 0.7rem; letter-spacing: 0.2em; }
	.evpse-card-icon,
	.evpse-commit-icon { width: 2.75rem; height: 2.75rem; }
}

/* ================================================
   TOUCH DEVICES
   ================================================ */
@media (hover: none) {
	.evpse-card:hover,
	.evpse-commit:hover {
		transform: none;
		box-shadow: none;
	}

	.evpse-card:hover::before,
	.evpse-commit:hover::before { opacity: 0; }

	.evpse-phase--deep .evpse-card:hover { border-color: rgba(212, 196, 168, 0.12); }
	.evpse-phase--raised .evpse-card:hover,
	.evpse-commit:hover { border-color: rgba(184, 98, 27, 0.16); }

	.evpse-btn--primary:hover {
		transform: none;
		box-shadow: 0 0.5rem 1.5625rem rgba(184, 98, 27, 0.35);
	}

	.evpse-btn--secondary:hover {
		color: var(--wp--preset--color--gold);
		background: none;
		border-color: rgba(212, 196, 168, 0.35);
		transform: none;
	}

	.evpse-btn:hover svg { transform: none; }
	.evpse-btn:active { transform: scale(0.98); transition: transform 0.15s ease; }
}

/* ================================================
   REDUCED MOTION

   SCOPED TO THIS PAGE. See the note at the top of this block for what
   the capture had here and why it could not be ported.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
	.evpse-hero-eyebrow,
	.evpse-hero-title {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.evpse-float,
	.evpse-rule-diamond { animation: none; }

	.evpwt-js .evpse-philosophy-text,
	.evpwt-js .evpse-eyebrow,
	.evpwt-js .evpse-title,
	.evpwt-js .evpse-rule,
	.evpwt-js .evpse-intro,
	.evpwt-js .evpse-card,
	.evpwt-js .evpse-commit,
	.evpwt-js .evpse-cta-buttons {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.evpse-highlight::after { width: 100%; transition: none; }

	.evpse-card,
	.evpse-commit,
	.evpse-card::before,
	.evpse-commit::before,
	.evpse-btn,
	.evpse-btn svg { transition: none; }
}


/* ==========================================================================
   DESTINATION AND LOCATION HEROES: THE SPLIT PANEL
   ==========================================================================

   Both heroes used to centre their text over the photograph behind a
   gradient. The tour hero does not: it puts the text in a panel on the
   left and lets the image have the right half, full bleed and unobscured.

   This brings the two to that shape, and the reason is not only
   consistency. The standing rule is that a text panel over an image needs
   a gradient to stay readable; not overlapping the image at all removes
   the requirement rather than satisfying it, so there is no scrim to tune
   and no contrast to lose when a pale photograph is swapped in.

   These rules come after the originals and override them rather than
   editing in place, so the slideshow, the progress bar and the entrance
   animation keep working untouched.

   Heights stay on 100lvh with a 100vh fallback, per the standing rule.
   dvh is deliberately not used: it reflows as mobile browser chrome
   collapses.
   ========================================================================== */

.evplo-hero {
	display: grid;
	/*
	 * THE PANEL GIVES GROUND AS THE WINDOW WIDENS, AND NONE BEFORE.
	 *
	 * It was a flat 45%, taken verbatim from .evpth rather than as a
	 * 50/50 approximation of it, because the tour hero gives the
	 * photograph the larger half. Flat is the part that stopped being
	 * right: at 1280 the panel has about 12px to spare on the longest
	 * title the library has, and at 1920 it has nearly 300px of empty
	 * track. One number cannot be correct at both.
	 *
	 * So the panel is 45% until roughly 1280 and then gives ground:
	 * 43.5% at 1440, 40% at 1920, with a floor at 38% so a very wide
	 * window does not strand the text in a column. The two constants
	 * are chosen so the ramp meets 45% exactly where the max takes
	 * over, which is why nothing moves at 1280 or below.
	 *
	 * MEASURED, NOT PICKED. Eight of the longest destination and
	 * location titles were laid out at 1280, 1440 and 1920 and the
	 * wrapped line count compared against the flat 45%. Nothing moved
	 * at 1280 or 1440. At 1920 one title, Peak Lenin Base Camp, goes
	 * from one line to two, which is how it already sets at 1440.
	 *
	 * The second track is 1fr rather than a matching percentage, so the
	 * photograph takes whatever the panel leaves and the two can never
	 * disagree about what is left. .evpth keeps its own flat 45%: the
	 * tour hero was not in this brief and is unchanged.
	 */
	--ev-hero-panel: clamp(38%, calc(30% + 12rem), 45%);
	/*
	 * The H1's size, declared here rather than on the H1, because the
	 * globe beside it is sized off the same number and the two must not
	 * drift. See the globe's own note for the arithmetic.
	 */
	--ev-hero-title-size: clamp(2.5rem, 4.6vw, 4rem);
	grid-template-columns: var(--ev-hero-panel) 1fr;
	align-items: stretch;
	justify-content: stretch;
	text-align: left;
}

/* The image stack stops being a backdrop and becomes the right column. */
.evplo-hero-bg {
	position: relative;
	inset: auto;
	grid-column: 2;
	grid-row: 1;
	min-height: 100%;
}

/* No text sits over the photograph now, so the scrim has nothing to do. */
/*
 * The scrim element goes; the ::after does not. It was a 180deg wash
 * over a full bleed photograph, which the split panel has no use for,
 * but it is the right pseudo-element to carry the tour hero's edge
 * gradient: it already sits at inset: 0 with z-index 1, and the slides
 * under it set no z-index of their own, so it paints above them.
 */
.evplo-hero-scrim {
	display: none;
}

/* --------------------------------------------------------------------------
   THE GLOBE BESIDE THE NAME. Destination and location heroes.

   Both page types use these rules and the same script. On a
   destination the globe highlights the country; on a location it
   highlights the parent's country and pulses a marker at the place
   itself, which is a difference in the payload, not in the layout.

   The eyebrow and the H1 are a column inside a row, with the globe as
   the row's second item. The column restates the panel's own 1.25rem
   gap, because a nested flex container does not inherit one, so nothing
   between the eyebrow and the title moves.

   THE GLOBE IS SIZED BY THE ROW, NOT BY A NUMBER. align-self: stretch
   makes it as tall as the eyebrow and the title together, and
   aspect-ratio: 1 makes it square off that height. The title block
   measures 89px at 1200 and 98px at 1440, so the globe follows the type
   scale without anyone keeping two values in step, which is the whole
   reason it is expressed this way.

   IT FITS, MEASURED. The tightest destination name in the library is
   Madagascar, which leaves 119px beside it at 1200 and 134px at 1440.
   The globe plus its 1rem gap is 105px at 1200 and 114px at 1440, so
   the title keeps its single line on every destination at every width
   the row is shown at.

   AND IT IS NOT SHOWN BELOW 1200. Between the 900px stacking point and
   1200 there is no room: at 1024 the panel's text column is 326px and
   Madagascar's H1 alone is 252px of it. The row stays, the globe goes,
   and the hero is what it was.

   The box has no background of its own. Until the script has drawn the
   canvas there is nothing to see, which is the right state for a
   decoration that may never arrive: no empty circle, no spinner.
   -------------------------------------------------------------------------- */
.evplo-hero-identity {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
}

.evplo-hero-identity-text {
	display: flex;
	flex-direction: column;
	/* The panel's own gap, restated. See the note above. */
	gap: 1.25rem;
	min-width: 0;
}

.evplo-hero-globe {
	display: none;
	position: relative;
	flex: none;
	/*
	 * THE SIZE IS THE TITLE BLOCK, COMPUTED, NOT STRETCHED.
	 *
	 * It was align-self: stretch with aspect-ratio: 1, which reads well
	 * and is circular: the globe's width came from the row's height,
	 * the row's height came from the text column, and the text column's
	 * width came from what the globe left. On a destination every title
	 * is one line and it settled; on a location it does not. Bartang
	 * Valley wraps to two, and Chrome sized the row from the one line
	 * it had measured first, so the globe came out 98px against a title
	 * that had grown to 134 and overflowed the row it was in.
	 *
	 * So the size is stated instead, out of the three things the block
	 * is made of: one line of the title, the panel's gap, and the
	 * eyebrow. The title's size is --ev-hero-title-size, declared once
	 * on the hero and read by the H1 as well, so the globe tracks the
	 * type scale rather than a copy of it. It comes to 89px at 1200 and
	 * 98px at 1440, which is what the stretched version measured on the
	 * titles that fitted.
	 *
	 * A title that wraps makes the block taller than the globe, and the
	 * globe centres against it rather than growing, which is the right
	 * way round: it is a mark beside a name, not a column.
	 */
	align-self: center;
	width: calc( ( var(--ev-hero-title-size) * 1.05 ) + 1.25rem + 0.6875rem );
	height: calc( ( var(--ev-hero-title-size) * 1.05 ) + 1.25rem + 0.6875rem );
}

/*
   THE CANVAS IS OUT OF FLOW, WHICH IS WHAT MAKES THE SIZING WORK.
   A canvas with no width or height attribute is intrinsically 300 by
   150, and in the flow that intrinsic width is what the box reports as
   its content size: the globe came out 300px square and stretched the
   whole row to match. Absolutely positioned it contributes nothing, so
   the row's height is the eyebrow and the title alone, align-self
   stretch makes that the globe's height, and aspect-ratio turns it
   into the width.
*/
.evpco-globe-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* It fades in once the first frame is on it, so the arrival is the
	   spin rather than a square appearing. */
	opacity: 0;
	transition: opacity 0.5s ease;
}

.evplo-hero-globe[data-ready] .evpco-globe-canvas {
	opacity: 1;
}

@media (min-width: 1200px) {

	.evplo-hero-globe {
		display: block;
	}
}

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

	.evpco-globe-canvas {
		transition: none;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   THE PANEL HAS ITS OWN LIGHT, AND THE WHOLE FRAME HAS A GRAIN.

   The text half was flat bg-deep: a black rectangle with type on it, next
   to a photograph. Two things give it depth without giving it decoration.

   ONE WARM SOURCE, OFF TO THE UPPER LEFT, in the rust the site already
   uses for an accent, at an alpha low enough to read as light on a dark
   wall rather than as a coloured panel. A second, much fainter and cooler
   pool sits low on the same side, so the panel is not lit evenly from one
   point. The same device opens the memberships page, which is where it
   was first used, so this is the house treatment rather than a new one.
   Confined to the panel's own track, which it reads from
   --ev-hero-panel so the light and the column cannot drift apart: it
   must not wash over the photograph.

   AND A GRAIN ACROSS BOTH HALVES, which is the part that actually settles
   the gradient. A wide fade between two near blacks has to cross a lot of
   ground in very few values, and 8 bit alpha cannot land on all of them,
   so it steps. Smoothing the curve removes the corners but not the steps.
   A little noise dithers them: the eye averages it and the bands stop
   resolving. It is three and a half per cent over a dark ground, so it
   reads as film rather than as texture, and it costs no request because
   the tile is an inline SVG.

   Both are pointer-events: none and sit at z-index 1, above the
   photograph's own gradients and below the content panel at 2.

   BELOW 900 THE LIGHT GOES AND THE GRAIN STAYS. Stacked, there is no left
   column to light: the photograph is full bleed behind the text and the
   scrim in the stacked block does the modelling.
   -------------------------------------------------------------------------- */
.evplo-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var(--ev-hero-panel);
	height: 100%;
	pointer-events: none;
	background:
		radial-gradient(38rem 30rem at 16% 20%, rgba(184, 98, 27, 0.16), transparent 70%),
		radial-gradient(26rem 22rem at 2% 96%, rgba(212, 196, 168, 0.045), transparent 72%);
}

.evplo-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* --------------------------------------------------------------------------
   THE PHOTOGRAPH FADES INTO THE PANEL RATHER THAN BUTTING AGAINST IT.

   Copied from .evpth-media::before, stop for stop. That rule is
   tour-specific, not shared: the tour hero's media half is .evpth-media
   and these two use .evpco-hero-bg / .evplo-hero-bg, so there was no
   class the destination and location heroes could have been using
   "properly" to inherit it. It had to be written across.

   The tour hero also carries a second gradient, .evpth-media::after, a
   32% bottom fade. That one is not copied here: it shapes the
   photograph rather than the join, and the brief is the join.
   -------------------------------------------------------------------------- */
.evplo-hero-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* The house fade, smoothed; see --ev-fade-x where it is declared. */
	background: var(--ev-fade-x);
}

/*
 * And the tour hero's second gradient, .evpth-media::after: a bottom
 * fade over the last 32% of the frame. Same pseudo-element for the same
 * job as over there, which is why the join moved to ::before rather
 * than the two being folded into one multi-layer background. Folding
 * them would have meant restating this rule's height as a colour stop,
 * and then restating both layers again in the stacked override below.
 *
 * z-index 1 rather than the tour hero's 2: .evpco-hero-bg sets no
 * z-index, so it opens no stacking context and these compete in the
 * hero grid, where the content panel sits at 2. One keeps the panel on
 * top whatever the DOM order.
 */
.evplo-hero-bg::after {
	content: '';
	position: absolute;
	/*
	 * top: auto is the whole fix for the band across the Bolivia hero,
	 * and it is why the destination had one and the location did not.
	 *
	 * .evpco-hero-bg::after already existed, at line 8319, carrying
	 * inset: 0 for the old full bleed scrim. inset sets all four
	 * offsets, so top: 0 survived into this rule, which sets right,
	 * bottom, left and height but never mentioned top. An absolutely
	 * positioned box with top, bottom AND height all specified is over
	 * constrained, and CSS resolves that by ignoring bottom, so the box
	 * became top: 0, height: 32%: a band across the upper third with a
	 * hard cut where it ends, darkest along that cut because the
	 * gradient runs to top.
	 *
	 * .evplo-hero-bg::after had no earlier rule at all, so its top
	 * stayed auto and bottom: 0 placed it correctly. Same declarations,
	 * different cascade. .evpth-media::after has no earlier rule either,
	 * which is why the tour hero was always right.
	 */
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 32%;
	pointer-events: none;
	/*
	 * Eased for the same reason as the join above. Two stops is one
	 * straight line, and its top edge was a corner across the frame at
	 * exactly 32 per cent. The end values are unchanged: 0.48 along the
	 * bottom, nothing at the top.
	 */
	background: linear-gradient(
		to top,
		rgba(17, 16, 16, 0.48) 0%,
		rgba(17, 16, 16, 0.467) 10%,
		rgba(17, 16, 16, 0.43) 20%,
		rgba(17, 16, 16, 0.376) 30%,
		rgba(17, 16, 16, 0.311) 40%,
		rgba(17, 16, 16, 0.24) 50%,
		rgba(17, 16, 16, 0.169) 60%,
		rgba(17, 16, 16, 0.104) 70%,
		rgba(17, 16, 16, 0.05) 80%,
		rgba(17, 16, 16, 0.013) 90%,
		rgba(17, 16, 16, 0) 100%
	);
}

.evplo-hero-content {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	gap: 1.25rem;
	padding: clamp(2rem, 5vw, 4.5rem);
	max-width: none;
	z-index: 2;
}

/* Breadcrumb: plain text at the top of the panel, not a translucent pill. */
/* --------------------------------------------------------------------------
   THE BREADCRUMB IS A PANEL CHILD, AND BOTH TAKE THE TOUR HERO'S FORM.

   It was absolutely positioned near the top of the section on both page
   types, which put it under the site header with a large empty gap
   beneath it, and gave it a left edge that only coincidentally matched
   the panel's. In the flow it is the panel's first child, so the one
   left edge and the panel's 1.25rem rhythm both come for free, and the
   space above it is the whole top half of the hero.

   The type is .evpth-breadcrumbs to the value: 0.72rem, 0.04em, no
   text-transform, and the same three greys. The destination was
   uppercase in a translucent pill with a blur; the location was
   sentence case with a slash separator centred in a half width nav.
   Neither matched the tour hero, and they did not match each other.
   -------------------------------------------------------------------------- */
.evplo-crumbs {
	position: static;
	inset: auto;
	z-index: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.5);
}

.evplo-crumbs a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.evplo-crumbs a:hover {
	color: var(--wp--preset--color--gold);
}

.evplo-crumbs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evplo-crumbs-sep {
	color: rgba(255, 255, 255, 0.28);
	font-size: 1em;
	line-height: 1;
}

.evplo-crumbs-current {
	color: var(--wp--preset--color--gold);
	font-weight: 400;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ONE TYPE SCALE AND ONE LEFT EDGE FOR THE WHOLE PANEL.

   The two heroes carried separate values for every element in here: the
   H1 at 11vw/5.5rem against 6vw/4.5rem, the eyebrow gold at 0.2em
   against rust at 0.24em, the tagline unbounded at 1.05rem against
   42rem at 1.25rem. Both are now the tour hero's, which is the scale
   actually tuned for a half width panel: 11vw was written for a full
   bleed centred hero and is far too large beside a photograph.

   Every bottom margin goes to zero as well. The panel is a flex column
   with gap: 1.25rem, so a margin here does not replace that gap, it
   adds to it, and the two heroes were adding different amounts.

   margin: 0 also fixes the tagline's left edge. .evplo-hero-subtitle
   was margin: 0 auto 2rem, and an auto side margin in a flex column
   absorbs the free space, so the tagline centred itself against a panel
   whose other children all sat hard left.
   -------------------------------------------------------------------------- */
.evplo-hero-badge,
.evplo-hero-title,
.evplo-hero-subtitle {
	margin: 0;
}

.evplo-hero-badge {
	justify-content: flex-start;
	gap: 0.625rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evplo-hero-badge-line {
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
	opacity: 1;
}

.evplo-hero-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--ev-hero-title-size);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	text-shadow: none;
}

.evplo-hero-subtitle {
	max-width: 27.5rem;
	font-size: clamp(0.88rem, 1.4vw, 1rem);
	font-weight: 300;
	line-height: 1.78;
	letter-spacing: normal;
	color: var(--ev-soft);
}

/* The rule under the H1, as the tour hero has. */
.evplo-hero-rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	background: var(--wp--preset--color--rust, #b45309);
	margin: 0;
}

/* --------------------------------------------------------------------------
   THE CALL TO ACTION BLOCK IS A TWO ROW GRID.
   The primary spans both columns, so it is exactly as wide as the two
   pills plus the gap between them. width: max-content is what keeps the
   block from stretching to the panel: the two 1fr tracks resolve to the
   wider pill's content, the container to twice that plus the gap, and
   the spanning primary to the whole of it. If the primary's own label is
   the wider of the two, the tracks grow to it instead and the pills
   match the primary, which is the same alignment read the other way.

   The gap is the tour hero's 0.75rem in both axes rather than a new
   value, and this replaces the flex row that shipped with the split
   panel, where the primary sat at its own content width beside a pill.

   THE ONE PILL CASE needs no rule of its own. The empty second track
   still resolves to the pill's width, so the lone pill keeps single
   column width and does not stretch under the primary. La Paz and
   Santa Cruz de la Sierra are the two that land here.

   THE ZERO PILL CASE needs no rule either, and it shrinks rather than
   holding a width. With no pill there is no second row to align to, so a
   fixed width would be a measurement of a layout that is not on the
   page: max-content resolves to the primary's own label. Tajikistan is
   the only page in this state today.
   -------------------------------------------------------------------------- */
.evplo-hero-ctas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.75rem;
	width: max-content;
	max-width: 100%;
	justify-content: start;
	justify-items: stretch;
	align-items: stretch;
}

.evplo-hero-ctas > .evplo-btn--primary {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   ONE BUTTON, TWO PREFIXES.

   The destination's were pills at radius 3.125rem; the location's were
   rectangles at 0.5rem, which was the most visible difference between
   the two heroes. The location primary also had no arrow and no glow.
   Both now take the tour hero's button: the same radius, the same
   0.5rem/1.625rem rust shadow, the same gradient wash on hover, and the
   arrow that slides on hover.

   Geometry stays at the destination's 1rem/2rem rather than the tour
   hero's 0.875rem/1.625rem. The tour hero sets its own smaller padding
   because three buttons share one row there; these blocks put at most
   two in a row and the larger tap target is worth keeping.
   -------------------------------------------------------------------------- */
.evplo-hero-ctas > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	border-radius: 3.125rem;
	border-width: 2px;
	border-style: solid;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.evplo-hero-ctas > .evplo-btn--primary {
	font-weight: 700;
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
	box-shadow: 0 0.5rem 1.625rem rgba(184, 98, 27, 0.42);
}

.evplo-hero-ctas > .evplo-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-light) 0%, var(--wp--preset--color--rust) 70%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.evplo-hero-ctas > .evplo-btn--primary:hover::before {
	opacity: 1;
}

.evplo-hero-ctas > .evplo-btn--primary:hover {
	background: var(--wp--preset--color--rust);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.875rem 2rem rgba(184, 98, 27, 0.52);
}

/* The label and the arrow ride above the gradient wash. */
.evplo-hero-ctas > .evplo-btn--primary > * {
	position: relative;
	z-index: 1;
}

.evplo-hero-ctas > .evplo-btn--primary svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evplo-hero-ctas > .evplo-btn--primary:hover svg {
	transform: translateX(3px);
}

.evplo-hero-ctas > .evplo-btn--outline {
	font-weight: 600;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: rgba(255, 255, 255, 0.85);
	box-shadow: none;
}

.evplo-hero-ctas > .evplo-btn--outline:hover {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transform: none;
}

.evplo-hero-ctas > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

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

	.evplo-hero-ctas > a,
	.evplo-hero-ctas > .evplo-btn--primary svg {
		transition: none;
	}

	.evplo-hero-ctas > .evplo-btn--primary:hover {
		transform: none;
	}

	.evplo-hero-ctas > .evplo-btn--primary:hover svg {
		transform: none;
	}
}

/* The scroll cue belongs to the text panel, not the middle of the page. */
.evplo-scroll {
	left: clamp(2rem, 5vw, 4.5rem);
	transform: none;
}

/* --------------------------------------------------------------------------
   BELOW THE SPLIT THE HERO OVERLAYS, IT DOES NOT STACK.

   The photograph goes full bleed and the content sits on it, which is
   what both heroes did before the alignment work. Stacking was the wrong
   call: on a phone there is no second column to put the panel in, so a
   40vh image band spends the top of the screen on a picture that the
   content then pushes off it.

   The standing rule was never "no text over images", it was "text over
   images needs a gradient", and the gradient comes back with the
   overlay.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

	.evplo-hero {
		display: block;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
		overflow: hidden;
	}

	.evplo-hero-bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		min-height: 0;
	}

	/* --------------------------------------------------------------
	   THE SCRIM. Structure is the pre-alignment treatment: the
	   destination's 180deg ramp with the location's radial vignette
	   composited over it. The stops are not the old ones, and that is
	   measured rather than taste.

	   White text over a near-black scrim of alpha a, on an image of
	   relative luminance L, composites to L(1-a). Against Bolivia's
	   salt flat at roughly L=0.9, AA needs a >= 0.80 for body text and
	   a >= 0.67 for the H1. The old stops opened at 0.30 and the
	   location's dipped to 0.35 at the 40% mark, which is 1.5:1 and
	   2.3:1 on that image: the two heroes that most needed the scrim
	   were the two it was thinnest for.

	   These stops hold roughly 0.80 through the middle of the frame,
	   where the content sits, which measures 4.9:1 on the salt flat and
	   6:1 on Madagascar's sunset. The vignette is transparent at the
	   centre so it deepens the edges without lifting the middle.
	   -------------------------------------------------------------- */
	.evplo-hero-bg::before {
		background:
			radial-gradient(ellipse at center, transparent 25%, rgba(17, 16, 16, 0.55) 100%),
			linear-gradient(
				180deg,
				rgba(10, 10, 10, 0.62) 0%,
				rgba(10, 10, 10, 0.78) 38%,
				rgba(10, 10, 10, 0.86) 72%,
				rgba(10, 10, 10, 0.92) 100%
			);
	}

	/*
	 * The desktop bottom fade goes off. It exists to soften a join
	 * against a panel, and at this width there is no panel to join to.
	 */
	.evplo-hero-bg::after {
		display: none;
	}

	/*
	 * And the panel's light goes with it, for the same reason: there is
	 * no left column at this width. The grain stays, so the stacked
	 * scrim gets the same dithering the split one does.
	 */
	.evplo-hero::before {
		display: none;
	}

	.evplo-hero-content {
		position: relative;
		z-index: 2;
		min-height: 100vh;
		min-height: 100lvh;
		justify-content: center;
		padding: clamp(1.5rem, 6vw, 2.5rem);
	}

	/*
	 * Nothing to reposition any more: the breadcrumb is a panel child at
	 * every width, so the stacked panel carries it without help. What
	 * the location did do below 480px was hide it, which loses the only
	 * way back up the tree on a phone. It stays.
	 */

	.evplo-scroll {
		display: none;
	}

	/*
	 * Stacked, the panel is the full page width and max-content would
	 * leave the block looking lost in it. 25rem is the tour hero's own
	 * mobile ceiling (.evpth-cta), not a new number.
	 */
	.evplo-hero-ctas {
		width: 100%;
		max-width: 25rem;
	}
}

/*
 * Two columns stop fitting before the panel does. The destination pill
 * carries 2rem of padding on each side, so at 25rem a track is under
 * 10rem and "Getting There" starts wrapping to three lines. One column
 * below this, which is what these blocks did at every width before the
 * split panel landed, and grid-column: 1 / -1 on the primary is still
 * correct in a single column grid.
 */
@media (max-width: 480px) {

	.evplo-hero-ctas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Form collection notice and field help ----------
   Both sit inside forms that render on light and dark grounds, so the
   colour is inherited rather than declared and the contrast comes from
   opacity. One rule covers all six forms. */
.ecovoyager-form-notice,
.evptb-help {
	font-size: 0.82rem;
	line-height: 1.6;
	margin: 0.75rem 0 0;
	color: inherit;
	opacity: 0.72;
}

.ecovoyager-form-notice a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   EcoVoyager: country overview improvements
   Append to assets/css/main.css.

   TWO CHANGES:
   1. .evpco-tile becomes a photo tile instead of a flat translucent box.
   2. New .evpco-ovmedia panel, used only when a destination has no
      featured tours. Full height image on the right that dissolves into
      the section background as it travels left.

   REMOVE FIRST: the existing .evpco-tile::before rule, the one painting a
   gold to rust gradient on hover. It will sit on top of the photograph.
   Everything else in the overview block stays as it is.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. IMAGE TILES
   -------------------------------------------------------------------------- */

.evplo-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: 0.625rem;
}

.evplo-tile {
	position: relative;
	display: block;
	padding: 0;
	min-height: 7.5rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.evplo-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.evplo-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 15, 12, 0.92) 0%,
		rgba(20, 15, 12, 0.45) 45%,
		rgba(20, 15, 12, 0.10) 100%
	);
}

.evplo-tile-label {
	position: absolute;
	left: 0.875rem;
	right: 0.875rem;
	bottom: 0.8rem;
	z-index: 2;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.evplo-tile-label::after {
	content: '';
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-top: 0.45rem;
	background: var(--wp--preset--color--rust);
	transition: width 0.3s ease;
}

.evplo-tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 10px 28px rgba(184, 98, 27, 0.3);
}

.evplo-tile:hover .evplo-tile-img {
	transform: scale(1.06);
	opacity: 1;
}

.evplo-tile:hover .evplo-tile-label::after {
	width: 3rem;
}

.evplo-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (min-width: 1101px) {
	.evplo-tiles {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: 0.75rem;
	}
	.evplo-tile {
		min-height: 9.5rem;
		border-radius: 0.875rem;
	}
	.evplo-tile-label {
		font-size: 0.72rem;
		left: 1rem;
		right: 1rem;
		bottom: 0.95rem;
	}
}


/* --------------------------------------------------------------------------
   2. MEDIA PANEL, NO FEATURED TOURS
   The panel is absolutely positioned inside .evpco-overview, which is
   already position:relative. It sits at z-index 1, under the existing
   z-index 2 on .evpco-overview-inner, so the prose always wins without
   any change to the text column.
   The dissolve is a gradient overlay in the section background colour
   rather than a CSS mask, so there is no browser support question and no
   visible seam.
   -------------------------------------------------------------------------- */

.evplo-overview--media,
.evpto--media {
	overflow: hidden;
}

.evplo-ovmedia,
.evpto-ovmedia {
	display: none;
}

.evplo-ovmedia-img,
.evpto-ovmedia-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1.2s ease;
}

/* First frame is painted server side so the panel is never blank. */
.evplo-ovmedia-img.is-active,
.evpto-ovmedia-img.is-active {
	opacity: 1;
}

.evplo-ovmedia::after,
.evpto-ovmedia::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 1101px) {
	.evplo-overview--media .evplo-overview-inner,
	.evpto--media .evpto-content {
		grid-template-columns: minmax(0, 1fr);
		min-height: 34rem;
		align-content: center;
	}

	.evplo-overview--media .evplo-overview-left,
	.evpto--media .evpto-left {
		max-width: 41rem;
	}

	.evplo-ovmedia,
	.evpto-ovmedia {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 54%;
		z-index: 1;
	}

	/* Horizontal dissolve into the section background, plus a light top
	   and bottom feather so the panel does not read as a pasted rectangle
	   against the sections above and below. */
	.evplo-ovmedia::after,
	.evpto-ovmedia::after {
		background:
			linear-gradient(
				to bottom,
				var(--wp--preset--color--bg-deep) 0%,
				transparent 14%,
				transparent 86%,
				var(--wp--preset--color--bg-deep) 100%
			),
			linear-gradient(
				to right,
				var(--wp--preset--color--bg-deep) 0%,
				rgba(20, 15, 12, 0.92) 18%,
				rgba(20, 15, 12, 0.55) 42%,
				rgba(20, 15, 12, 0.18) 68%,
				rgba(20, 15, 12, 0.04) 100%
			);
	}
}

@media (min-width: 1400px) {
	.evplo-ovmedia,
	.evpto-ovmedia {
		width: 50%;
	}
	.evplo-overview--media .evplo-overview-left,
	.evpto--media .evpto-left {
		max-width: 44rem;
	}
}

/* Under 1101px the overview grid collapses to one column, so an absolute
   panel would land on the text. It becomes a banner under the tiles,
   feathered at the top for the same dissolve in the other axis. */
@media (max-width: 1100px) {
	.evplo-ovmedia--mobile,
	.evpto-ovmedia--mobile {
		display: block;
		position: relative;
		height: 15rem;
		margin: 1.5rem -1rem -3rem;
	}
	.evplo-ovmedia--mobile::after,
	.evpto-ovmedia--mobile::after {
		background: linear-gradient(
			to bottom,
			var(--wp--preset--color--bg-deep) 0%,
			rgba(20, 15, 12, 0.35) 45%,
			rgba(20, 15, 12, 0.15) 100%
		);
	}
}

@media (min-width: 1101px) {
	.evplo-ovmedia--mobile,
	.evpto-ovmedia--mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evplo-tile,
	.evplo-tile-img,
	.evplo-tile-label::after,
	.evplo-ovmedia-img,
	.evpto-ovmedia-img {
		transition: none;
	}
	.evplo-tile:hover {
		transform: none;
	}
	.evplo-tile:hover .evplo-tile-img {
		transform: none;
	}
}

/* ==========================================================================
   Inspiration: section navigation
   ==========================================================================

   Deliberately heavier than .evi-filter below it. The sections are real
   pages and the filters are a refinement inside whichever one you are on,
   so the two sets must not read as one row of equal controls. Sections get
   a solid active state and a larger type size; filters keep the quiet
   outline they had.
   ========================================================================== */

.evi-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.16);
}

.evi-section {
	padding: 0.7rem 1.35rem;
	border: 1px solid rgba(212, 196, 168, 0.28);
	border-radius: 3.125rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.72);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.evi-section:hover {
	border-color: rgba(212, 196, 168, 0.55);
	color: #fff;
}

.evi-section.is-active {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

.evi-section:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (max-width: 1100px) {
	.evi-section {
		padding: 0.6rem 1rem;
		font-size: 0.68rem;
	}
}

/* ==================================================================
   NEWS: the split article and the archive
   ================================================================== */

/* ---------- The split article ----------

   THE GEOMETRY IS THE WHOLE DESIGN, so it is worth stating plainly.

   The reference this was built from sized the image by the viewport:
   the grid was min-height 100vh and the panel was height 100vh. A news
   item here is two to five paragraphs, so that produced a full height
   photograph beside a short column and several hundred pixels of dead
   panel.

   Here the row is sized by the text and the image is capped rather than
   fixed. .evpnw-media is a grid cell, so it stretches to the row, and
   the row is as tall as .evpnw-body. The image inside takes
   min(100%, viewport), where 100% resolves against that stretched cell.

     short article  the cell is short, min picks it, and the image is
                    exactly as tall as the text and never taller
     long article   min picks the viewport, and the image sticks while
                    the reader moves past it

   So sticky engages only when there is something to scroll past, and it
   does it as a consequence of the geometry. No script, no breakpoint,
   nothing measured.

   On a very short item the image becomes a wide letterbox. That is
   accepted deliberately: a min-height would be the one thing that makes
   the image taller than the text again. */

.evpnw {
	display: grid;
	grid-template-columns: 44% 1fr;
	background: var(--wp--preset--color--bg-deep);
	font-family: var(--wp--preset--font-family--montserrat);
}

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

.evpnw-media {
	/*
	 * NO overflow HERE, AND THAT IS THE WHOLE POINT.
	 * position: sticky resolves against the nearest ancestor with a
	 * scrolling box, and overflow: hidden creates one even though nobody
	 * can scroll it. With it set, the image stuck to this cell rather
	 * than to the viewport, which looks exactly like sticky not working
	 * at all. Nothing can overflow the cell anyway: the image is width
	 * 100%, height is capped at the cell, and object-fit crops inside
	 * its own box.
	 */
	position: relative;
	background: #0d0d0d;
}

.evpnw-img {
	position: sticky;
	top: var(--ev-header-h);
	display: block;
	width: 100%;
	height: min(100%, calc(100vh - var(--ev-header-h)));
	object-fit: cover;
}

.evpnw-body {
	padding: clamp(2.25rem, 5vw, 5.5rem) clamp(1.375rem, 4vw, 4.5rem);
	max-width: 46rem;
}

/* No hero, so no panel. One column at a readable measure, centred.
   This is the intended layout for operational news rather than a
   fallback, and it is the same convention as .evpth--nomedia. */
.evpnw--nomedia {
	grid-template-columns: 1fr;
}

.evpnw--nomedia .evpnw-body {
	max-width: 44rem;
	margin: 0 auto;
}

.evpnw-kicker {
	margin: 0 0 1.125rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpnw-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.875rem, 3.9vw, 3.125rem);
	font-weight: 400;
	line-height: 1.08;
	color: #fff;
	text-wrap: balance;
}

.evpnw-standfirst {
	margin: 1.125rem 0 0;
	max-width: 56ch;
	font-size: 1.1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

.evpnw-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
	margin: 1.625rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(212, 196, 168, 0.14);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

.evpnw-prose {
	margin-top: 2.125rem;
}

.evpnw-prose p {
	margin: 0 0 1.15em;
	max-width: 66ch;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
}

.evpnw-prose p:last-child {
	margin-bottom: 0;
}

.evpnw-prose a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.evpnw-source {
	margin: 2.125rem 0 0;
	padding-top: 1.125rem;
	border-top: 1px solid rgba(212, 196, 168, 0.14);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
}

.evpnw-source a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Below 880 it stacks: image first at a normal aspect ratio, then text.
   Sticky comes off with it, because a panel that sticks above the words
   it belongs to is just a thing in the way on a phone. */
@media (max-width: 880px) {
	.evpnw {
		grid-template-columns: 1fr;
	}

	.evpnw-img {
		position: static;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.evpnw-body {
		max-width: none;
	}
}

/* ---------- The News archive ----------
   The hero is the listing hero (THE LISTING HERO, further up), with the
   latest articles' pictures crossfading on the right; archive-news.php
   renders it. The list below is this. */
.evpna {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem) 5rem;
	font-family: var(--wp--preset--font-family--montserrat);
}

.evpna-list {
	display: grid;
	gap: 1.5rem;
}

.evpna-card {
	display: grid;
	grid-template-columns: 18rem 1fr;
	gap: 1.75rem;
	align-items: start;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
}

.evpna-card:last-child {
	border-bottom: 0;
}

/*
 * A news item with no photograph is the common case, not the exception,
 * so the card collapses to one column rather than leaving the body in an
 * 18rem track with the picture column empty beside it. Same convention
 * as evpnw--nomedia on the article itself: the absence is a layout, and
 * it is named.
 */
.evpna-card--nomedia {
	grid-template-columns: 1fr;
}

/*
 * height: auto IS THE FIX FOR THE TALL PICTURES. wp_get_attachment_image()
 * writes width and height attributes, and the height attribute is a
 * presentational hint the browser honours as a height in pixels unless
 * the stylesheet says otherwise. This rule set the width and an aspect
 * ratio but never the height, so a portrait photograph 768 by 1152
 * rendered 1152px tall in an 18rem column: the ratio was ignored because
 * both dimensions were already definite. With the height freed the ratio
 * binds and every picture is the same 16 by 10 frame.
 */
.evpna-card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0.75rem;
}

.evpna-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin: 0 0 0.625rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.45);
}

.evpna-card-country {
	color: var(--wp--preset--color--gold);
}

.evpna-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-wrap: balance;
}

.evpna-card-title a {
	color: inherit;
	text-decoration: none;
}

.evpna-card-title a:hover {
	color: var(--wp--preset--color--gold);
}

.evpna-card-standfirst {
	margin: 0.75rem 0 0;
	max-width: 62ch;
	font-size: 0.925rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

.evpna-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3rem;
}

.evpna-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid rgba(212, 196, 168, 0.18);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.evpna-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpna-empty {
	padding: 3rem 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 768px) {
	.evpna-card {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.evpna-card-title {
		font-size: 1.3rem;
	}
}

/* ---------- News: focus and reduced motion ---------- */
.evpnw-prose a:focus-visible,
.evpnw-source a:focus-visible,
.evpna-card-title a:focus-visible,
.evpna-pagination .page-numbers:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/*
 * The image is NOT unstuck for prefers-reduced-motion. Sticky is layout,
 * not animation: nothing moves, nothing transitions, and the image holds
 * still while the reader scrolls past it. Honouring the preference here
 * gave those readers a different layout for no benefit, and it was the
 * second reason the image did not stick. The real motion on this page,
 * the smooth scrolling, is honoured where it is actually declared.
 */

/* ==================================================================
   TOUR COMFORT TIERS: the hero selector and the comparison
   ==================================================================

   NOTHING HERE IS SIZED FOR THREE. The strip is a flex row that wraps,
   and the comparison table's columns are auto width, so two tiers give
   two and four would give four. A grid of three columns would have
   looked deliberate right up until the first two-tier tour.

   The strip borrows .evptt-tab's shape on purpose: same pill, same
   uppercase tracking, same rust gradient for the selected one. It is the
   same gesture as the tab bar below it and it should not look like a
   different control.
   ================================================================== */

.evpth-tiers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	margin: 0 0 1.25rem;
}

.evpth-tiers-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evpth-tiers-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.evpth-tier {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 3.125rem;
	background: rgba(255, 255, 255, 0.035);
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/*
 * THE SIGNAL GOES ON THE INACTIVE PILLS, NOT THE ACTIVE ONE.
 *
 * The selected pill is already the loudest thing in the row: solid rust
 * fill, a rust glow, white text. It is the one pill the visitor does not
 * need to act on, so animating it would aim attention at a dead end. The
 * two beside it are the problem. Outlined, muted, no shadow, sitting
 * under a small caps label, they read as tags describing the tour rather
 * than as a choice being offered.
 *
 * WHAT WAS HERE BEFORE: border alpha 0.14 to 0.32, background 0.035
 * white to 0.09 sand, text 0.72 white to full. Three changes all under
 * the threshold where anybody notices, and no shadow and no movement at
 * all. The border step in particular is two barely visible values of the
 * same colour.
 *
 * SCOPED WITH :not(.is-selected) RATHER THAN LEFT TO CASCADE ORDER. The
 * old rule styled every pill and was merely overridden by .is-selected
 * further down, which worked only because the two set the same four
 * properties. A lift is a property .is-selected does not set, so without
 * the :not() the active pill would rise on hover as well.
 *
 * :focus is in the selector alongside :hover, so a pill reached by
 * keyboard gets all of this AND the gold outline below. Focus is
 * therefore strictly louder than hover, never quieter.
 */
.evpth-tier:not(.is-selected):hover,
.evpth-tier:not(.is-selected):focus {
	border-color: rgba(212, 196, 168, 0.55);
	background: rgba(212, 196, 168, 0.14);
	color: #fff;
	/* The inset top highlight is the one .is-selected already uses, so a
	   hovered pill reads as the same material catching light rather than
	   as a different kind of object. */
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	/* A transform, so the lift cannot reflow the row, the CTA under it or
	   the itinerary under that. */
	transform: translateY(-1px);
}

.evpth-tier.is-selected {
	border-color: var(--wp--preset--color--rust);
	background: linear-gradient(135deg, var(--wp--preset--color--rust) 0%, var(--wp--preset--color--rust-dark) 100%);
	color: #fff;
	box-shadow: 0 0.25rem 1rem rgba(184, 98, 27, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.evpth-tier:focus-visible,
.evptp-compare-table a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- The one time invitation ----------

   A single non-looping double glow on the two pills that are not
   selected, so somebody landing on the page sees that the row does
   something. Two swells inside ONE pass, finished in under four seconds
   including the delay, because this row sits above a long itinerary and
   anything still moving while somebody reads becomes an irritation fast.

   NO JAVASCRIPT AND NO INTERSECTION OBSERVER. The strip is inside the
   hero, so "the first time it scrolls into view" and "page load" are the
   same moment for this component. A CSS animation on load is the whole
   requirement, and a scroll trigger would be machinery for a case that
   cannot arise.

   ON A PSEUDO ELEMENT, NOT ON THE PILL. An animation outranks normal
   declarations in the cascade, so animating the pill's own border would
   have made hover do nothing for as long as the cue ran. This ring is a
   separate layer the pill's own states never touch. It is absolutely
   positioned so it cannot reflow anything, and pointer-events: none so
   it cannot swallow a click on what is a real link.

   Fill mode is left at none on purpose. The ring returns to opacity 0
   when the animation ends instead of holding a final frame, so nothing
   is left pinned over the resting state.
   ---------------------------------------------------------------- */

.evpth-tier:not(.is-selected) {
	position: relative;
}

.evpth-tier:not(.is-selected)::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: inherit;
	box-shadow: 0 0 0.75rem rgba(212, 196, 168, 0.3);
	opacity: 0;
	pointer-events: none;
	animation: evpthTierInvite 2.6s ease-in-out 1.1s 1;
}

/*
 * Once the visitor has used the control the URL carries ?tier=, the hero
 * template adds this class and the cue never fires again. Without it the
 * glow would replay on every tier switch, which is precisely the
 * irritation the one pass rule exists to prevent, and it would be aimed
 * at somebody who has already proved they found the row.
 */
.evpth-tiers--chosen .evpth-tier::after {
	content: none;
}

@keyframes evpthTierInvite {
	0%   { opacity: 0; }
	18%  { opacity: 0.9; }
	38%  { opacity: 0; }
	56%  { opacity: 0.9; }
	78%  { opacity: 0; }
	100% { opacity: 0; }
}

/*
 * REDUCED MOTION REMOVES THE MOTION, IT DOES NOT SLOW IT.
 *
 * content: none means the ring is never generated at all, so there is no
 * element for an animation to run on. animation: none is belt and braces
 * for the same thing.
 *
 * The hover lift goes too, and so does the quarter second transition on
 * every pill: a 1px rise and a colour fade are both motion. What stays is
 * the colour, border and shadow change itself, which is what makes the
 * pill look clickable in the first place. It simply arrives instantly.
 */
@media (prefers-reduced-motion: reduce) {
	.evpth-tier {
		transition: none;
	}

	.evpth-tier:not(.is-selected)::after {
		content: none;
		animation: none;
	}

	.evpth-tier:not(.is-selected):hover,
	.evpth-tier:not(.is-selected):focus {
		transform: none;
	}
}

.evpth-tier-summary {
	max-width: 46rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- The comparison, above the rates ---------- */

.evptp-compare {
	margin: 0 0 2.5rem;
}

/* Tiers across and four attributes down gets wide fast. It scrolls in
   its own box so the page body never scrolls sideways. */
.evptp-compare-scroll {
	overflow-x: auto;
}

.evptp-compare-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.evptp-compare-table th,
.evptp-compare-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.1);
	text-align: left;
	vertical-align: top;
	color: rgba(255, 255, 255, 0.78);
}

.evptp-compare-table thead th {
	border-bottom: 1px solid rgba(212, 196, 168, 0.22);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.evptp-compare-table thead th a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.evptp-compare-table thead th a:hover {
	color: #fff;
}

.evptp-compare-table tbody th {
	width: 1%;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
}

/* The selected tier's column is tinted rather than outlined, because a
   border on one column of a collapsed table fights its neighbours. */
.evptp-compare-table thead th.is-selected,
.evptp-compare-table tbody td.is-selected {
	background: rgba(184, 98, 27, 0.1);
	color: #fff;
}

.evptp-compare-table thead th.is-selected a {
	color: #fff;
}

.evptp-compare-price {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.25rem;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.evpth-tiers {
		gap: 0.5rem;
	}

	.evpth-tiers-strip {
		width: 100%;
	}

	.evpth-tier {
		flex: 1 1 auto;
	}
}

/* ==================================================================
   DESTINATION TOURS SUBPAGE: the hero's two tone title
   ==================================================================

   The three image strip that used to sit beside this title at 75rem and
   above is gone: the listing renders the same single full height
   photograph the style pages do. See THE LISTING HERO further up.
   ================================================================== */

/* The orange italic half of the title, the same device and the same rust
   as .evptd-title em on the Tour Highlights heading. */
.evpdl-page-title em {
	font-style: italic;
	color: var(--wp--preset--color--rust);
}
/* ==================================================================
   TOUR PRICING: the departure rows
   ==================================================================

   Used by the Departures card in parts/section-tour-pricing.php: a
   date and its state, and a Book button that opens the booking modal
   with that date set (data-ev-book-departure, read by tour-booking.js),
   or a disabled Sold Out. The card's own tweaks sit with the pricing
   block further up.
   ================================================================== */

/* ---------- The departure rows ---------- */

.evptp-deps {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evptp-dep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	box-sizing: border-box;
	padding: 1.125rem 1.375rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.875rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.evptp-dep:not(.is-full):hover {
	border-color: rgba(184, 98, 27, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

/* Sold out is quieter, the same way the listing's full card is, but it
   is still legible: it is an answer, not an absence. */
.evptp-dep.is-full {
	opacity: 0.6;
}

.evptp-dep-when {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.evptp-dep-dates {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.0625rem;
	font-weight: 400;
	color: #fff;
}

.evptp-dep-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.evptp-dep-dot {
	display: block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

/* The site's own departure state tokens, so a date reads the same
   colour here as it does on the departures listing. */
.evptp-dep-status--available { color: var(--ev-dep-available); }
.evptp-dep-status--limited   { color: var(--ev-dep-limited); }
.evptp-dep-status--full      { color: var(--ev-dep-full); }

.evptp-dep-money {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.evptp-dep-price {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
	text-align: right;
}

.evptp-dep-amount {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.375rem;
	color: #fff;
	white-space: nowrap;
}

.evptp-dep-was {
	margin-left: 0.3rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.45);
}

.evptp-dep-price.is-on-sale .evptp-dep-amount {
	color: var(--wp--preset--color--gold);
}

.evptp-dep-basis {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* The same button as the departures listing's, in this section's
   vocabulary: existing rust, existing geometry, same arrow. */
.evptp-dep-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	padding: 0.65rem 1.1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.25s ease;
}

.evptp-dep-btn svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evptp-dep-btn:hover {
	background: var(--wp--preset--color--rust-dark);
}

.evptp-dep-btn:hover svg {
	transform: translateX(0.2rem);
}

.evptp-dep-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evptp-dep-btn:disabled {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	cursor: default;
}

@media (max-width: 768px) {
	/*
	   A departure row stacks: the date and its state, then the price
	   and the button side by side underneath. Side by side at this
	   width would put a Playfair date range and a price in about 9rem
	   each and wrap both of them.
	*/
	.evptp-dep {
		flex-direction: column;
		align-items: stretch;
		gap: 0.875rem;
	}

	.evptp-dep-money {
		justify-content: space-between;
	}

	.evptp-dep-price {
		text-align: left;
	}
}

/* ================================================
   COOKIE CONSENT
   parts/section-cookie-consent.php, assets/js/consent.js.

   A calm bar across the bottom on desktop and a compact sheet on
   phones. Never a full screen wall: a visitor can read the page, and
   the page they came to read is the reason they are here.

   NO LAYOUT SHIFT. position: fixed, so it is out of flow and nothing
   reflows when it appears or goes. The only thing it adds to the
   document is padding at the very bottom, set from the measured height
   in consent.js, which extends the scroll range rather than moving
   anything visible. That padding is what lets the contact form's submit
   button and the footer be scrolled clear of the bar.

   EQUAL CHOICES. .evcc-btn--choice is the one class behind Accept all,
   Reject all and Save choices: same geometry, same weight, same colour.
   The rust filled button the rest of the site uses for a primary action
   is deliberately absent, because the visual pull of it is exactly what
   makes a consent banner non compliant.
   ================================================ */

.evcc {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9000;
	background: rgba(17, 16, 16, 0.97);
	border-top: 0.0625rem solid rgba(212, 196, 168, 0.22);
	box-shadow: 0 -0.75rem 2.5rem rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--wp--preset--font-family--montserrat);
}

@supports (backdrop-filter: blur(0.5rem)) {
	.evcc {
		background: rgba(17, 16, 16, 0.88);
		backdrop-filter: blur(0.625rem);
	}
}

.evcc-inner {
	max-width: 75rem;
	margin: 0 auto;
	padding: 1.125rem 1.5rem;
}

/* The first layer is one line of text and the choices beside it. */
.evcc-layer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.evcc-text {
	flex: 1 1 22rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.evcc-link {
	color: var(--wp--preset--color--gold-light);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.evcc-link:hover,
.evcc-link:focus-visible {
	color: #fff;
}

.evcc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
}

.evcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.375rem;
	border-radius: 3.125rem;
	font-family: inherit;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

/* Accept all, Reject all and Save choices. Identical, on purpose. */
.evcc-btn--choice {
	min-width: 9.5rem;
	border: 0.09375rem solid rgba(212, 196, 168, 0.55);
	background: rgba(212, 196, 168, 0.08);
	color: var(--wp--preset--color--gold-light);
}

.evcc-btn--choice:hover {
	border-color: var(--wp--preset--color--gold-light);
	background: rgba(212, 196, 168, 0.16);
	color: #fff;
}

/* Manage choices and Back. Not a consent answer, so not dressed as one. */
.evcc-btn--quiet {
	border: 0.09375rem solid transparent;
	background: none;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.evcc-btn--quiet:hover {
	color: #fff;
}

.evcc-btn:focus-visible,
.evcc-link:focus-visible,
.evcc-check:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--gold-light);
	outline-offset: 0.1875rem;
}

/* ---- the categories panel ---- */

.evcc-panel {
	display: block;
}

.evcc-title {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
}

.evcc-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.875rem 1.75rem;
	margin: 0 0 1.125rem;
	padding: 0;
	list-style: none;
}

.evcc-cat {
	margin: 0;
}

.evcc-cat-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

/* Necessary is the only row that cannot be toggled. */
.evcc-cat:first-child .evcc-cat-label {
	cursor: default;
}

.evcc-check {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0 0;
	accent-color: var(--wp--preset--color--rust);
	cursor: pointer;
}

.evcc-check:disabled {
	cursor: default;
	opacity: 0.6;
}

.evcc-cat-name {
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.evcc-cat-text {
	margin: 0.375rem 0 0 1.5rem;
	font-size: 0.75rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.68);
}

/* ---- the document makes room for the bar ---- */

body.has-evcc {
	padding-bottom: var(--evcc-height, 0);
}

/* ---- phones: a compact sheet, still not a wall ---- */

@media (max-width: 48rem) {
	.evcc {
		border-radius: 0.875rem 0.875rem 0 0;
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.evcc-inner {
		padding: 1rem 1.125rem 1.25rem;
	}

	.evcc-layer {
		gap: 0.875rem;
	}

	.evcc-text {
		flex-basis: 100%;
		font-size: 0.78125rem;
	}

	.evcc-actions {
		width: 100%;
		gap: 0.5rem;
	}

	/*
	 * Accept and Reject share the row and the width, so neither is the
	 * bigger target. Manage sits under them at full width.
	 */
	.evcc-btn--choice {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.8125rem 0.75rem;
	}

	.evcc-btn--quiet {
		flex: 1 1 100%;
		order: 3;
		padding: 0.5rem;
	}

	.evcc-cats {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evcc-btn {
		transition: none;
	}
}

/* ================================================
   THE COOKIE TABLE on /cookie-preferences/

   Rendered by [ecovoyager_cookie_table] from the declared inventory in
   ecovoyager-core/includes/consent.php. The page is .evp-prose, which
   is the light reading ground single-blog.php uses, so this borrows
   that palette rather than the banner's dark one.

   Scrolls inside its own wrapper on a narrow screen, so five columns
   never make the page itself scroll sideways.
   ================================================ */

.evck-table-wrap {
	overflow-x: auto;
	margin: 1.75rem 0 1rem;
	-webkit-overflow-scrolling: touch;
}

.evck-table {
	width: 100%;
	min-width: 38rem;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8125rem;
}

.evck-table th,
.evck-table td {
	padding: 0.6875rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 0.0625rem solid rgba(17, 16, 16, 0.12);
}

.evck-table th {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom-width: 0.125rem;
	border-bottom-color: rgba(17, 16, 16, 0.3);
}

.evck-table code {
	font-size: 0.78125rem;
	overflow-wrap: break-word;
}

.evck-note {
	margin: 0 0 1.75rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	opacity: 0.8;
}

/* ================================================
   HEADER REFINEMENTS

   The wordmark beside the logo is gone and the mark itself is now the
   home link, so these replace the old .logo-icon and .logo-text rules.
   The rest is what the header was missing rather than a restyle: the
   list the nav items now sit in, a current section state for the
   attribute that was already on every link, dropdowns a keyboard can
   open, and focus rings that are visible on both the dark header and
   the light scrolled one.
   ================================================ */

.logo-link {
	display: flex;
	align-items: center;
	height: 2.8125rem;
	border-radius: 0.25rem;
	transition: transform 0.3s ease;
}

.logo-link:hover { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.logo-link { transition: none; }
	.logo-link:hover { transform: none; }
}

.logo-link img {
	display: block;
	height: 100%;
	width: auto;
	object-fit: contain;
}

/*
 * The ul carries the row now. .nav-menu is the nav element and keeps
 * its own display and its tab docking rules, but with a single child
 * its gap no longer does anything, so the breakpoint below mirrors the
 * one on .nav-menu at 1024px rather than leaving the nav to tighten
 * something that is no longer a flex row of links.
 */
.nav-list {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 64rem) {
	.nav-list { gap: 1.875rem; }
}

/*
 * THE HEADER RAN OUT OF ROOM BEFORE THE MOBILE MENU TOOK OVER.
 *
 * The desktop row is logo, nav, Contact Us, and the mobile toggle only
 * replaces it at 768px. Measured across the band between: the space
 * between the last nav link and the button is 87px at 1024, 45px at
 * 940, 25px at 900, 5px at 860 and nothing at all from 820 down, where
 * Inspiration's underline runs into the pill. The row was not
 * overflowing the viewport, so there was no scrollbar to give it away:
 * the two flexible columns either side of the nav had simply been
 * squeezed to zero and the button was sitting against the nav.
 *
 * The nav keeps working down to the handover instead, on a tighter
 * gap, a smaller label and a shorter pill. Scoped to .header-cta so
 * the floating call to action and the mobile contact button, which
 * share the button rule, keep their full size.
 *
 * Inert below 768, where the nav and the button are display:none.
 */
@media (max-width: 56.25rem) {

	.nav-list { gap: 1.125rem; }

	.nav-link {
		font-size: 0.85rem;
		letter-spacing: 0.0125rem;
	}

	.header-cta .contact-button {
		padding: 0.75rem 1.125rem;
		font-size: 0.64rem;
		letter-spacing: 0.11em;
	}
}

/* The current section, which nothing used to show. */
.nav-link.is-current::after { width: 100%; }

.nav-link.is-current {
	color: #fff;
	font-weight: 600;
}

.ecovoyager-header.scrolled .nav-link.is-current { color: var(--wp--preset--color--rust); }

/*
 * KEYBOARD CAN OPEN THE MENUS NOW. They were :hover only, so a visitor
 * tabbing through the header could reach Destinations and Tours but
 * never any of the links inside them. Same declarations as the hover
 * rule, including the translateX the centring depends on.
 */
.nav-item.has-dropdown:focus-within .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/*
 * Focus rings for the three that had none. .nav-link and
 * .mobile-menu-toggle already had one, white at 3px with a 2px offset,
 * turning gold on the scrolled header, so they are deliberately not
 * named here: restating them would override a working rule with a
 * different colour for no reason. These match that treatment rather
 * than inventing a second one.
 */
.logo-link:focus-visible,
.contact-button:focus-visible,
.mega-menu a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

.ecovoyager-header.scrolled .logo-link:focus-visible,
.ecovoyager-header.scrolled .mega-menu a:focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/*
 * THE NAV SITS DEAD CENTRE, which it did not before.
 *
 * .header-container is space-between with three in flow children, so
 * the nav's position was a function of how wide the logo block happened
 * to be. Dropping the wordmark narrowed that block by about 170px and
 * pulled the nav left with it, leaving it neither aligned to the logo
 * nor centred in the viewport.
 *
 * Equal flex columns either side fix the nav to the middle whatever the
 * logo and the button measure. It also lines the nav up with the tour
 * page's docked tab pills, which are absolutely positioned at left 50%
 * and translated back by half their width, so the pills now arrive in
 * exactly the space the nav leaves rather than a little to its right.
 *
 * The dock relies on the nav holding its place while it fades out; it
 * leaves by opacity and visibility rather than display, so the column
 * widths do not move during the transition.
 */
.header-container > .logo-section,
.header-container > .header-cta {
	flex: 1 1 0;
	min-width: max-content;
}

.header-container > .nav-menu {
	flex: 0 0 auto;
}

/* ==========================================================================
   THE DESTINATION HERO, AND THE SECTION TAB STRIP ON ITS BOTTOM EDGE
   parts/section-destination-hero.php, assets/js/destination-nav.js.

   THE GUIDE HERO'S SHAPE, NOT THE OLD SPLIT PANEL'S. One photograph across
   the whole width, the country name on it, one deck line, one button, and
   the strip welded to the bottom. The continent badge, the globe, the rule,
   the scroll cue, the progress bar, the slideshow, the video and the
   parallax are all gone, and so is the .evpco- CSS that drew them.

   NOTHING HERE SHARES A SELECTOR WITH .evpco-* OR .evplo-*. That was the
   whole point of a new prefix: the location hero still renders from the
   .evplo- half of the rules the old destination hero shared with it, and it
   has to go on rendering exactly as it did.
   ========================================================================== */

.evpdh {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100lvh;
	isolation: isolate;
	background: var(--wp--preset--color--bg-deep);
	overflow: hidden;
}

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

/*
   WITH NO PHOTOGRAPH, THE GUIDE'S DARK PANEL. The same rust glow at the
   same stops, so a destination with no usable image reads as a designed
   state rather than a missing one. It is shorter, too: there is no picture
   to give a full screen to.
*/
.evpdh--dark {
	min-height: max(30rem, 62vh);
	background:
		radial-gradient(110% 90% at 18% 32%, rgba(184, 98, 27, 0.16) 0%, rgba(184, 98, 27, 0) 56%),
		var(--wp--preset--color--bg-deep);
}

.evpdh-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.evpdh-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	transform-origin: center;
}

/*
   THE VIDEO, WHERE A DESTINATION HAS ONE. Over the still and under the
   scrim, the same box, the same crop. assets/js/destination-nav.js clones
   it out of an inert template and inserts it here, and only above 900px
   with motion allowed, so a phone has no element and fetches nothing.

   NO KEN BURNS ON IT. The zoom belongs to .evpdh--photo .evpdh-img and is
   named there; this is deliberately not in that selector, because a video
   that is already moving does not need the still's slow push as well.
*/
.evpdh-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	border: 0;
}

/*
   ONE SCRIM, WEIGHTED TO THE FOOT. The photograph is almost untouched in
   its upper two thirds and the text sits in the dark at the bottom, which
   is the opposite of the old hero's left-to-right wash over everything.
*/
.evpdh-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(17, 16, 16, 0.30) 0%,
		rgba(17, 16, 16, 0.05) 30%,
		rgba(17, 16, 16, 0.20) 55%,
		rgba(17, 16, 16, 0.88) 100%);
}

/*
   THE HOUSE FRAME. The crumbs at the top, the title block at the foot, and
   the space between them is the photograph. The bottom padding clears the
   tab strip, which is lifted onto this edge by a negative margin and would
   otherwise sit on the button.
*/
.evpdh-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: calc(var(--ev-header-h, 5rem) + clamp(1.25rem, 3vw, 2.5rem)) clamp(1.25rem, 5vw, 5rem) calc(4rem + clamp(1.75rem, 4vw, 3rem));
	flex: 1 1 auto;
}

.evpdh-crumbs {
	margin: 0;
}

.evpdh-block {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}

.evpdh-text {
	min-width: 0;
}

/*
   THE COUNTRY, AND NOTHING ELSE. Upright: the italic went the way of the
   rest of the decoration.

   THE CLAMP TOP IS THE BRIEF'S 9.25rem, AND IT WAS MEASURED. The brief
   asked for the top value to come down if any of the long names wrapped
   at 1440. None does: Kyrgyzstan, Kazakhstan, Madagascar, Tajikistan,
   Greenland, Indonesia and Venezuela are all one line at 144px with the
   button beside them, and all one line at 390 where the clamp bottoms out
   at 56px. See docs/destination-redesign/03-report.md.
*/
.evpdh-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(3.5rem, 10vw, 9.25rem);
	font-style: normal;
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.015em;
	color: #fff;
	text-wrap: balance;
}

.evpdh-deck {
	max-width: 40rem;
	margin: 1.1rem 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: clamp(0.9rem, 0.78rem + 0.3vw, 1.05rem);
	font-style: normal;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var(--wp--preset--color--gold);
	text-wrap: pretty;
}

/*
   THE BUTTON IS .evpco-btn-primary's SPEC UNDER ITS OWN CLASS, so the base
   button can change without moving this one, and this one can change
   without moving every other call to action on the site.
*/
.evpdh-cta {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--rust);
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evpdh-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpdh-cta:hover::before {
	opacity: 1;
}

.evpdh-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpdh-cta > * {
	position: relative;
	z-index: 1;
}

.evpdh-cta svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: #fff;
	transition: transform 0.3s ease;
}

.evpdh-cta:hover svg {
	transform: translateX(3px);
}

.evpdh-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   THE ARROW BELONGS BESIDE THE WORDS, NOT UNDER THEM.

   Two heroes share the evpdh prefix. On /destinations/ .evpdh-cta is a
   div holding .evpdh-btn children, and at 768 and below that older hero
   stacks them: flex-direction column and full width, around line 8403.
   On a destination and a location .evpdh-cta is the button itself, so
   the same rule stacked its label and its arrow, and "EXPLORE GUYANA
   TOURS" came out two lines tall with the arrow under the words at 390.

   Scoped to .evpdh-block, which only this hero has, so the listing
   page keeps its rule exactly. The full width the old rule also sets is
   kept: a full width button at 390 is right, only the direction was
   wrong.
*/
@media (max-width: 768px) {

	.evpdh-block .evpdh-cta {
		flex-direction: row;
		flex-wrap: nowrap;
	}
}

/*
   THE LOCATION HERO'S THREE ADDITIONS.

   TWO HEROES SHARE THE evpdh PREFIX in this stylesheet: an older one
   around line 7960 and this one. .evpdh-eyebrow and .evpdh-cta are
   both already taken by the older one, so these rules sit here, after
   it, where source order makes them win. The same trap caught brief 24
   with .evpdh-scroll.

   The eyebrow's own paragraph is already right: the older hero's rule
   gives it rust, uppercase, the letter spacing and the short rule
   before it, and that is exactly what the destination page's section
   eyebrows look like. What it has no rule for is a link inside it,
   because that hero never put one there. Without this the country name
   renders as a browser default: blue, underlined, purple once visited.
*/
.evpdh-eyebrow a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpdh-eyebrow a:visited {
	color: inherit;
}

.evpdh-eyebrow a:hover,
.evpdh-eyebrow a:focus-visible {
	color: var(--wp--preset--color--gold);
}

.evpdh-eyebrow a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   The row the location hero's two buttons sit in. A destination has one
   button and no wrapper, so this element is only ever on a location.
   It is the second child of .evpdh-block, which is a flex row with the
   text on the left, so it keeps the primary button where the
   destination page puts it and lets the guide button sit beside it.
*/
.evpdh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

/*
   THE OLDER HERO SETS flex-wrap: wrap ON .evpdh-cta and this one never
   overrode it, so the label and the arrow are two flex lines the
   moment the button is given a width: at 390, where the button is full
   width, VIEW TOURS came out two lines tall with the arrow under the
   word. The destination page never saw it because its button is sized
   by its content at every width.
*/
.evpdh-actions .evpdh-cta,
.evpdh-cta-guide {
	flex-direction: row;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/*
   The outline pill beside the primary. Brief 22 section 2c's button,
   the same one Design your own trip uses, so a reader meets one shape
   of secondary button on the page rather than two.

   THE SVG NEEDS A SIZE. Without one the inline arrow has no intrinsic
   dimensions and fills whatever space it is given: on Kaieteur Falls
   at 1440 it drew itself 431 pixels square across the foot of the
   hero, which is the black diagonal bar in Alex's screenshot. Every
   other button in this stylesheet sets it; this one was missed.
*/
.evpdh-cta-guide {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.evpdh-cta-guide:visited {
	color: #fff;
}

.evpdh-cta-guide svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpdh-cta-guide:hover {
	border-color: #fff;
}

.evpdh-cta-guide:hover svg {
	transform: translateX(0.25rem);
}

.evpdh-cta-guide:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   Phones: the two buttons are full width and stacked, as brief 02
   asks for every button pair on this page.
*/
@media (max-width: 767px) {
	.evpdh-actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.evpdh-actions .evpdh-cta,
	.evpdh-cta-guide {
		width: 100%;
	}
}

/* The sentinel destination-nav.js appends to tell the strip it has left
   the hero. One pixel at the hero's foot, behind everything. */
.evpdh-sentinel {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   THE TAB STRIP

   A SIBLING OF THE HERO, LIFTED ONTO ITS BOTTOM EDGE. It has to sit on the
   photograph and then stick under the site header for the rest of the page,
   and a sticky element only sticks while its own parent is in view, so it
   cannot be a child of the hero. The negative margin is its height exactly.
   -------------------------------------------------------------------------- */

.evpdh-nav {
	position: sticky;
	top: var(--ev-header-h, 5rem);
	z-index: 300;
	height: 4rem;
	margin-top: -4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(17, 16, 16, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

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

/*
   THE BLUR IS WHAT MAKES ONE LOOK WORK OVER BOTH. The strip reads over the
   photograph and over whatever section is under it, so nothing changes when
   it sticks but the rounding, which there is none of. is-stuck is kept for
   the next brief rather than drawing anything today.
*/
.evpdh-nav-inner {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	width: 100%;
	max-width: 87.5rem;
	height: 100%;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.evpdh-nav-inner::-webkit-scrollbar {
	display: none;
}

/*
   THE SCROLL AREA. Below 1025px this is display:contents, so it is not
   in the layout at all and .evpdh-nav-inner scrolls the whole row the
   way it has since brief 02. Above it, the overflow moves in here and
   the row outside stops scrolling, which is what lets .evpdh-nav-cta
   stay put while the tabs slide under it at 1025 to 1280.
*/
.evpdh-tabwrap {
	display: contents;
}

/*
   THE TOURS BUTTON IN THE STRIP. The rust primary at strip scale, and
   no arrow: the strip is a dense row and an arrow at 0.68rem is noise.

   HIDDEN WITH visibility, NOT display. The strip's width would jump on
   the frame it sticks if the button joined the row then, and a jump in
   a sticky element is the one place it is most visible.
*/
.evpdh-nav-cta {
	display: none;
	flex: 0 0 auto;
	align-self: center;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0 1.25rem;
	border-radius: 3.125rem;
	background: #b8621b;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.evpdh-nav-cta:hover {
	background: #a0551a;
}

.evpdh-nav-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   margin-right auto rather than justify-content space-between: a scroll
   container with space-between clips its first item once the row overflows,
   which on a phone is every destination with more than three sections.
*/
.evpdh-tabs {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	height: 100%;
	margin-right: auto;
}

.evpdh-tab {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 0.875rem;
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.evpdh-tab:first-child {
	padding-left: 0;
}

.evpdh-tab:hover,
.evpdh-tab.is-selected {
	color: #fff;
}

.evpdh-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -4px;
}

/* The sliding underline, placed by assets/js/section-ink.js. Until it has
   run the selected tab draws its own; is-ready on the row hands over, so
   there is never a frame with none and never one with two. */
.evpdh-ink {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--rust);
	transform: translateX(0);
	transition: transform 0.2s ease, width 0.2s ease;
	pointer-events: none;
}

.evpdh-tab.is-selected::after {
	content: '';
	position: absolute;
	right: 0.875rem;
	bottom: 0;
	left: 0.875rem;
	height: 2px;
	background: var(--wp--preset--color--rust);
}

.evpdh-tab:first-child.is-selected::after {
	left: 0;
}

.evpdh-tabs.is-ready .evpdh-tab::after {
	content: none;
}

/* The guide link: the strip's last item, and simply absent when the
   destination has no live guide. Nothing reserves its space. */
.evpdh-guide {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	align-self: center;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.evpdh-guide svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpdh-guide:hover {
	color: #fff;
}

.evpdh-guide:hover svg {
	transform: translateX(0.2rem);
}

@media (min-width: 1025px) {

	/*
	   The row stops scrolling and the wrapper takes over, so the button
	   and the guide link are outside whatever moves.
	*/
	.evpdh-nav-inner {
		overflow: visible;
	}

	.evpdh-tabwrap {
		display: flex;
		flex: 1 1 auto;
		align-items: stretch;
		min-width: 0;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.evpdh-tabwrap::-webkit-scrollbar {
		display: none;
	}

	.evpdh-nav-cta {
		display: inline-flex;
		margin-left: 1.5rem;
		visibility: hidden;
		opacity: 0;
	}

	/*
	   ONLY WHILE THE STRIP IS STUCK. Under the hero the hero's own
	   Explore button is on screen two inches above this one, and two
	   rust pills saying the same thing is worse than none.
	*/
	.evpdh-nav.is-stuck .evpdh-nav-cta {
		visibility: visible;
		opacity: 1;
	}

	/*
	   AND NOT INSIDE THE TOURS SECTION. The tours are in front of the
	   reader; a button offering to show them is furniture.
	   destination-nav.js sets this from the same observer that moves the
	   underline, so the button and the lit tab can never disagree.
	*/
	.evpdh-nav.is-stuck.is-in-tours .evpdh-nav-cta {
		visibility: hidden;
		opacity: 0;
	}
}

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

	.evpdh-nav-cta {
		transition: none;
	}
}

.evpdh-guide:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   EVERY SECTION THE STRIP POINTS AT CLEARS THE HEADER AND THE STRIP. Without
   this an anchor lands with its heading under both of them.
*/
.single-destination #overview,
.single-destination #tours,
.single-destination #your-trip,
.single-destination #experiences,
.single-destination #where-to-go,
.single-destination #wildlife,
.single-destination #planning,
.single-destination #stories,
.single-location #overview,
.single-location #tours,
.single-location #your-trip,
.single-location #closer-look,
.single-location #things-to-do,
.single-location #planning,
.single-location #nearby,
.single-location #stories {
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + 4rem);
}

@media (max-width: 900px) {

	.evpdh {
		min-height: 70vh;
		min-height: 70svh;
	}

	.evpdh-scrim {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.35) 0%,
			rgba(17, 16, 16, 0.10) 35%,
			rgba(17, 16, 16, 0.90) 100%);
	}

	.evpdh-inner {
		padding-bottom: calc(3.5rem + clamp(1.5rem, 4vw, 2.5rem));
	}

	/* The button goes under the title rather than beside it: at this width
	   a row leaves the title two words wide. */
	.evpdh-block {
		flex-direction: column;
		align-items: flex-start;
	}

	.evpdh-nav {
		height: 3.5rem;
		margin-top: -3.5rem;
	}

	.single-destination #overview,
	.single-destination #tours,
	.single-destination #your-trip,
	.single-destination #experiences,
	.single-destination #where-to-go,
	.single-destination #wildlife,
	.single-destination #planning,
	.single-destination #stories,
	.single-location #overview,
	.single-location #tours,
	.single-location #your-trip,
	.single-location #closer-look,
	.single-location #things-to-do,
	.single-location #planning,
	.single-location #nearby,
	.single-location #stories {
		scroll-margin-top: calc(var(--ev-header-h, 4.375rem) + 3.5rem);
	}
}

/*
   MOTION, only where the reader has not asked for less, and only the
   guide's two: the photograph grows from 1 to 1.06 over twenty seconds,
   once; the crumbs, the title block and the button rise twelve pixels,
   staggered. Nothing else moves.
*/
@media (prefers-reduced-motion: no-preference) {

	.evpdh--photo .evpdh-img {
		animation: evpdh-zoom 20s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}

	.evpdh-crumbs,
	.evpdh-text,
	.evpdh-cta {
		animation: evpdh-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.evpdh-text {
		animation-delay: 80ms;
	}

	.evpdh-cta {
		animation-delay: 160ms;
	}
}

@keyframes evpdh-zoom {

	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}

@keyframes evpdh-rise {

	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
   TRANSFORM AND SIZE, NOT COLOUR. The animations above are already inside a
   no-preference query, but three transitions on this hero are not, and the
   closing pass measured them still running under reduce: the CTA lifts, its
   arrow slides, and the underline travels between tabs.

   IT HAS TO BE HERE AND NOT WITH THE OTHER HERO. There is a second, older
   .evpdh block thirty-two thousand lines above this one, with its own reduce
   query. A rule placed there has the same specificity as .evpdh-cta here and
   loses to it on source order, which is exactly what the first attempt did.

   The colour fades on .evpdh-tab and .evpdh-guide stay. A colour change is
   not movement, and this query is about movement.
*/
@media (prefers-reduced-motion: reduce) {

	.evpdh-cta,
	.evpdh-cta svg,
	.evpdh-guide svg,
	.evpdh-ink {
		transition: none;
	}
}

/* ==========================================================================
   THE DESTINATION OVERVIEW
   parts/section-destination-overview.php, assets/js/destination-gallery.js.

   THE GUIDE INTRO'S SHAPE, with a swipe gallery where the guide puts three
   staggered pictures. The flag, the tagline, the four stats, the three
   shortcut tiles, the featured carousel and the crossfading media panel are
   all gone; what is left is the eyebrow, one heading, one paragraph and the
   photographs.
   ========================================================================== */

.evpdo {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpdo-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.25rem);
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* The place, small, after a short rule in the brand rust: the guide's
   eyebrow, to the value. */
.evpdo-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpdo-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 2rem;
	height: 1px;
	background: var(--wp--preset--color--rust);
}

/*
   THE SHARED SECTION TITLE SCALE, ON BOTH PAGES THAT USE THE PART. The tour
   pages set this size under .single-tour, so this cannot be a site rule; it
   is a list of the scopes that want it.

   THE LOCATION PAGE JOINED THAT LIST IN LOCATION BRIEF 02. When this was
   written the location page had an overview of its own and was deliberately
   left out, so that its own heading scale survived. It now renders
   section-destination-overview.php, and without this scope its H2 fell all
   the way back to the browser default: 24px, bold, with 19.92px margins
   above and below, which is both the small heading and the gap under it
   that Alex photographed on Kaieteur Falls.
*/
.single-destination .evpdo-title,
.single-location .evpdo-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	text-wrap: balance;
}

/*
   A LEAD, NOT A BLOCK. The guide's measure and type. No gold em and no
   italic: if the field carries an <em> it is rendered upright, because the
   tour work took the italic accent off the rest of the site.
*/
.evpdo-lead {
	max-width: 38rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: clamp(1.05rem, 1.25vw, 1.125rem);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.88);
	text-wrap: pretty;
}

.evpdo-lead p {
	margin: 0 0 1.1rem;
}

.evpdo-lead p:last-child {
	margin-bottom: 0;
}

.evpdo-lead em,
.evpdo-lead i {
	font-style: normal;
}

/*
   NO BOLD IN THE OPENING PARAGRAPH. The lead is one paragraph of prose at
   one weight; a bold run inside it reads as a pull quote the editor did not
   mean, and twenty-one location narratives carry one. The text is kept, the
   emphasis is not, which is the same decision the em rule above makes.

   This is the overview component's rule, so it holds on both pages. No
   destination overview contains the tag today, nought of fifteen, so no
   destination page changes; a destination that gains one later gets the
   same treatment, which is the point.
*/
.evpdo-lead strong,
.evpdo-lead b {
	font-weight: inherit;
	color: inherit;
}

.evpdo-lead a {
	color: var(--wp--preset--color--gold);
	text-underline-offset: 0.2em;
}

/* ---------- The gallery ---------- */

.evpdo-gallery {
	min-width: 0;
}

/*
   A SCROLL TRACK, SNAPPED. The swipe, the snap and the keyboard are the
   browser's; assets/js/destination-gallery.js only adds the two buttons and
   the dots. It scrolls inside its own box and never the page.
*/
.evpdo-track {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.evpdo-track::-webkit-scrollbar {
	display: none;
}

.evpdo-track:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.evpdo-slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	border-radius: 0.875rem;
	overflow: hidden;
	scroll-snap-align: start;
}

.evpdo-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
   THE CAPTION IS OVER THE PICTURE, ON A GRADIENT OF ITS OWN. No caption on
   the attachment means no figcaption and no gradient: an empty black band
   at the foot of a photograph is worse than nothing.
*/
.evpdo-cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.5rem 1rem 0.875rem;
	background: linear-gradient(to top, rgba(17, 16, 16, 0.78) 0%, rgba(17, 16, 16, 0) 100%);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	line-height: 1.45;
}

.evpdo-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.evpdo-dots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.evpdo-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.3);
	transition: width 0.25s ease, background-color 0.25s ease;
}

.evpdo-dot.is-active {
	width: 1.375rem;
	background: var(--wp--preset--color--rust);
}

.evpdo-arrows {
	display: flex;
	gap: 0.5rem;
}

.evpdo-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.evpdo-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

.evpdo-arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.06);
}

.evpdo-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.evpdo-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/*
   PHONES AND SMALL TABLETS: one column, and the pictures between the
   heading and the paragraph. The order is the point of the three being
   siblings rather than two wrapped blocks.
*/
.evpdo-head {
	order: 1;
}

.evpdo-gallery {
	order: 2;
}

.evpdo-lead {
	order: 3;
}

/*
   THE BUTTONS ARE A POINTER AFFORDANCE. On a touch screen the track is
   swiped and the row below it is two controls nobody uses, so only the dots
   stay to say how many pictures there are.
*/
@media (hover: none) {

	.evpdo-arrows {
		display: none;
	}

	.evpdo-controls {
		justify-content: flex-start;
	}
}

@media (min-width: 1025px) {

	/*
	   TWO COLUMNS: the text at a reading measure on the left, the gallery
	   in what is left. The two blocks of text stack in column one and the
	   gallery spans both rows, centred against them.
	*/
	.evpdo--media .evpdo-inner {
		grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
		grid-template-areas:
			"head gallery"
			"lead gallery";
		align-items: center;
		column-gap: clamp(2rem, 3.5vw, 4.5rem);
		row-gap: clamp(1.25rem, 2vw, 1.75rem);
	}

	.evpdo--media .evpdo-head {
		grid-area: head;
		align-self: end;
	}

	.evpdo--media .evpdo-lead {
		grid-area: lead;
		align-self: start;
	}

	.evpdo--media .evpdo-gallery {
		grid-area: gallery;
	}

	/* The next picture peeks at the edge, so the track reads as something
	   with more in it. */
	.evpdo--track .evpdo-slide {
		flex-basis: 92%;
	}
}

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

	.evpdo-track {
		scroll-behavior: auto;
	}

	.evpdo-dot,
	.evpdo-arrow {
		transition: none;
	}
}

/* ==========================================================================
   THE DESTINATION TOURS SECTION
   parts/section-destination-tours-lead.php,
   assets/js/destination-tour-chips.js.

   ONE LEAD CARD AND A STATIC GRID, NOT A CAROUSEL. Everything on screen is
   in the DOM at load: no track, no arrows, no dots, no autoplay. The only
   script shows and hides compact cards the chips filter.

   .evpdt-* IS A DIFFERENT SECTION AND STILL LIVE. That is the carousel, and
   it still draws the tour page's More Adventures and the location page's
   tours. Nothing here shares a selector with it.
   ========================================================================== */

.evpdtl {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpdtl-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- The header ---------- */

/*
   THE COUNT SITS WITH THE HEADING, BOTTOM ALIGNED. It is the line that
   justifies View all, so it belongs beside the title rather than under the
   cards where nobody reaching for the button would read it.
*/
.evpdtl-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.evpdtl-head-text {
	min-width: 0;
}

/* The tours carousel's eyebrow, to the value: this section replaced that
   one on this page and should not arrive looking like a different house. */
.evpdtl-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpdtl-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evpdtl-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

/* A colour, not an emphasis, so a span and not an em: nothing in this
   section is italic and nothing has an italic to unset. */
.evpdtl-title-accent {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpdtl-count {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

/*
   THE LINE THAT EXPLAINS THE CARDS BELOW IT, on a location no set tour
   stops at. Sixty-five of the eighty-two are in that state. Without it the
   reader sees four tours under a country heading and cannot tell that none
   of them goes where they are standing. Brief 02 section 4: Montserrat 300,
   0.95rem, 75 per cent white.
*/
.evpdtl-none {
	margin: 0.75rem 0 0;
	max-width: 44rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	text-wrap: pretty;
}

/* ==================================================================
   A CLOSER LOOK, the location page's own section. Prefix evplc.
   Location brief 02 section 6, Option A2 from the design chat.

   An index that follows the scroll on the left, chapters on the right
   with the photograph floated into the text. The float is the whole
   idea: a chapter longer than its picture wraps under it rather than
   leaving a column of white space beside it.
   ================================================================== */

.evplc {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: #111010;
}

.evplc-inner {
	max-width: 85rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 4rem);
}

/* ---------- The index column ---------- */

.evplc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evplc-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evplc-title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.evplc-title-place {
	color: var(--wp--preset--color--rust);
}

.evplc-index {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(212, 196, 168, 0.22);
}

.evplc-index-item {
	border-bottom: 1px solid rgba(212, 196, 168, 0.22);
}

.evplc-index-link {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 0 0.25rem;
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.evplc-index-num {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--gold);
	transition: color 0.25s ease;
}

.evplc-index-text {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.25s ease;
}

.evplc-index-link:hover .evplc-index-text,
.evplc-index-link:focus-visible .evplc-index-text {
	color: #fff;
}

/*
   THE CURRENT ROW. The rule sits outside the row's own box, which is
   why the negative margin and the matching padding: the border has to
   be in the gutter rather than eat into the text.
*/
.evplc-index-item.is-current .evplc-index-link {
	border-left: 2px solid var(--wp--preset--color--rust);
	margin-left: -1rem;
	padding-left: 0.875rem;
}

.evplc-index-item.is-current .evplc-index-num {
	color: var(--wp--preset--color--rust);
}

.evplc-index-item.is-current .evplc-index-text {
	color: #fff;
}

.evplc-index-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The chapters ---------- */

.evplc-list {
	border-top: 1px solid rgba(212, 196, 168, 0.22);
}

/*
   FLOW ROOT, so the floated photograph is inside its own chapter and
   the next chapter's border does not ride up beside it.
*/
.evplc-chapter {
	display: flow-root;
	padding: 2.25rem 0;
	border-bottom: 1px solid rgba(212, 196, 168, 0.22);
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + 5.5rem);
}

.evplc-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.25rem;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0.875rem;
}

.evplc-num {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--wp--preset--color--rust);
}

.evplc-heading {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.12;
	color: #fff;
	text-wrap: pretty;
}

.evplc-body {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
	transition: max-height 0.3s ease;
}

.evplc-body p {
	margin: 0 0 1rem;
	text-wrap: pretty;
}

.evplc-body p:last-child {
	margin-bottom: 0;
}

/* No italic anywhere on this site since the tour work. */
.evplc-body em,
.evplc-body i {
	font-style: normal;
}

.evplc-body strong,
.evplc-body b {
	font-weight: inherit;
	color: inherit;
}

.evplc-body a {
	color: var(--wp--preset--color--gold);
	text-underline-offset: 0.2em;
}

/*
   THE CLAMP. Four lines at this line height is 7rem. The fade is a
   pseudo element rather than a gradient on the body, because the body
   has text in it and a background gradient would sit behind the words
   rather than over them.
*/
.evplc-body.is-clamped {
	position: relative;
	max-height: 7rem;
	overflow: hidden;
}

.evplc-body.is-clamped::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3.5rem;
	background: linear-gradient(to bottom, rgba(17, 16, 16, 0) 0%, #111010 100%);
	pointer-events: none;
}

.evplc-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: color 0.25s ease;
}

.evplc-more:hover {
	color: #fff;
}

.evplc-more-chev {
	width: 1rem;
	height: 1rem;
	transition: transform 0.25s ease;
}

.evplc-more[aria-expanded='true'] .evplc-more-chev {
	transform: rotate(180deg);
}

.evplc-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Desktop: two columns, the index sticky ---------- */

@media (min-width: 1025px) {

	.evplc-inner {
		display: grid;
		grid-template-columns: 22.5rem minmax(0, 1fr);
		column-gap: 6rem;
		align-items: start;
	}

	/*
	   The strip is 4rem under a 5rem header, and the brief asks for a
	   rem and a half of air under that.
	*/
	.evplc-aside {
		position: sticky;
		top: calc(var(--ev-header-h, 5rem) + 5.5rem);
	}

	.evplc-img {
		float: left;
		width: 18.75rem;
		margin: 0 2.25rem 1rem 0;
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Phones: one column, the picture above the heading ---------- */

@media (max-width: 767px) {

	.evplc-aside {
		margin-bottom: 2rem;
	}

	.evplc-img {
		float: none;
		width: 100%;
		margin: 0 0 1.25rem;
		aspect-ratio: 16 / 10;
	}
}

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

	.evplc-body,
	.evplc-more-chev,
	.evplc-index-link,
	.evplc-index-num,
	.evplc-index-text {
		transition: none;
	}
}

/* ==================================================================
   PLAN YOUR VISIT, the location page's own section. Prefix evplp.
   Location brief 02 section 8. No script: one state, always.
   ================================================================== */

.evplp {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: #111010;
}

.evplp-inner {
	max-width: 85rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 4rem);
}

.evplp-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.evplp-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evplp-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evplp-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	text-wrap: balance;
}

.evplp-title-place {
	color: var(--wp--preset--color--rust);
}

.evplp-sub {
	max-width: 26rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	text-wrap: pretty;
}

/* ---------- Best time ---------- */

.evplp-best {
	margin-bottom: 3rem;
}

.evplp-best-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.evplp-best-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.evplp-best-months {
	color: var(--wp--preset--color--gold);
}

.evplp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evplp-key {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evplp-key::before {
	content: '';
	display: block;
	width: 0.75rem;
	height: 0.375rem;
	border-radius: 3px;
}

.evplp-key--peak::before {
	background: #b8621b;
}

.evplp-key--good::before {
	background: rgba(212, 196, 168, 0.75);
}

.evplp-key--wet::before {
	background: rgba(212, 196, 168, 0.18);
}

/*
   TWELVE CELLS, ALWAYS TWELVE. A grid rather than a flex row, so the
   months line up with each other at every width instead of the long
   abbreviations taking more space than the short ones.
*/
.evplp-months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.375rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.evplp-month {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: center;
}

.evplp-bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: rgba(212, 196, 168, 0.18);
}

.evplp-month-name {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.evplp-month--peak .evplp-bar {
	background: #b8621b;
}

.evplp-month--great .evplp-bar,
.evplp-month--good .evplp-bar {
	background: rgba(212, 196, 168, 0.75);
}

.evplp-month--peak .evplp-month-name,
.evplp-month--great .evplp-month-name,
.evplp-month--good .evplp-month-name {
	color: #fff;
}

.evplp-summary {
	max-width: 52rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	text-wrap: pretty;
}

/* ---------- The routes ---------- */

.evplp-routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.evplp-route {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.125rem;
	background: #1a1614;
}

.evplp-route-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.evplp-route-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evplp-route-cost {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.evplp-route-time {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.evplp-route-body {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	text-wrap: pretty;
}

.evplp-tip {
	padding-top: 0.875rem;
	border-top: 1px solid rgba(212, 196, 168, 0.14);
}

.evplp-tip-label {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evplp-tip-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	text-wrap: pretty;
}

/* ---------- The guide card, where there is nothing else ---------- */

.evplp-card {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
	margin-bottom: 2.5rem;
	padding: 1.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.125rem;
	background: #1a1614;
}

.evplp-cover {
	display: block;
	overflow: hidden;
	border-radius: 0.875rem;
}

.evplp-cover-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.evplp-card-lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: pretty;
}

/* ---------- The buttons ---------- */

.evplp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.evplp-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.evplp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(184, 98, 27, 0.45);
}

.evplp-btn-guide {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s ease;
}

.evplp-btn-guide:visited {
	color: #fff;
}

.evplp-btn-guide:hover {
	border-color: #fff;
}

.evplp-btn svg,
.evplp-btn-guide svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evplp-btn:hover svg,
.evplp-btn-guide:hover svg {
	transform: translateX(0.25rem);
}

.evplp-btn:focus-visible,
.evplp-btn-guide:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {

	/*
	   THE MONTH BAR STAYS TWELVE ACROSS. Six and six would read as two
	   half years, and the labels are three characters: twelve cells of
	   a 390 pixel screen is twenty-six pixels each, which fits.
	*/
	.evplp-months {
		gap: 0.25rem;
	}

	.evplp-month-name {
		font-size: 0.5rem;
		letter-spacing: 0.04em;
	}

	.evplp-card {
		grid-template-columns: minmax(0, 1fr);
	}

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

	/*
	   NOWRAP IS WHAT OVERFLOWED. The buttons are full width and stacked
	   here, and a label that refuses to wrap sets a min-content width a
	   hundred per cent cannot shrink below: "Read the guide" at this
	   tracking came out 408 pixels inside a 350 pixel column and pushed
	   the whole page sideways. On a phone the label wraps instead.
	*/
	.evplp-btn,
	.evplp-btn-guide {
		/* Not inherited here: the guide button computes content-box. */
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 0.875rem 1.25rem;
		white-space: normal;
		text-align: center;
	}
}

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

	.evplp-btn,
	.evplp-btn-guide,
	.evplp-btn svg,
	.evplp-btn-guide svg {
		transition: none;
	}

	.evplp-btn:hover {
		transform: none;
	}
}

/* ---------- The style chips ---------- */

.evpdtl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.evpdtl-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0 1.375rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.evpdtl-chip:hover {
	border-color: var(--wp--preset--color--gold);
}

.evpdtl-chip.is-on {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

.evpdtl-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The lead card ---------- */

.evpdtl-lead {
	position: relative;
	display: block;
	height: clamp(22rem, 32vw, 28.75rem);
	border-radius: 1.375rem;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
	text-decoration: none;
	isolation: isolate;
}

.evpdtl-lead-media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.evpdtl-lead-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.evpdtl-lead:hover .evpdtl-lead-img {
	transform: scale(1.04);
}

/*
   TWO WASHES, NOT ONE. A 90deg wash carries the text column and leaves the
   right of the photograph as shot; a short lift along the foot keeps the
   button and the price legible over a bright horizon.
*/
.evpdtl-lead-scrim {
	position: absolute;
	inset: 0;
	display: block;
	background:
		linear-gradient(90deg,
			rgba(17, 16, 16, 0.92) 0%,
			rgba(17, 16, 16, 0.78) 32%,
			rgba(17, 16, 16, 0.25) 60%,
			rgba(17, 16, 16, 0) 100%),
		linear-gradient(to top, rgba(17, 16, 16, 0.6) 0%, rgba(17, 16, 16, 0) 40%);
}

.evpdtl-lead-flag {
	position: absolute;
	top: 2.5rem;
	left: 2.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}

.evpdtl-lead-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 4px rgba(184, 98, 27, 0.25);
}

.evpdtl-lead-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: block;
	max-width: 38rem;
	padding: 2.5rem;
}

.evpdtl-lead-meta {
	display: block;
	margin-bottom: 0.875rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.evpdtl-lead-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	text-wrap: balance;
}

.evpdtl-lead-sub {
	display: block;
	max-width: 29rem;
	margin-bottom: 1.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

.evpdtl-lead-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/*
   THE BUTTON IS A SPAN. The whole card is the anchor, and an anchor inside
   an anchor is not markup a browser will keep. It takes the house primary's
   values and none of its interactivity, because the card owns that.
*/
.evpdtl-lead-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 1rem 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.evpdtl-lead-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpdtl-lead:hover .evpdtl-lead-btn::before {
	opacity: 1;
}

.evpdtl-lead:hover .evpdtl-lead-btn {
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpdtl-lead-btn > * {
	position: relative;
	z-index: 1;
}

.evpdtl-lead-btn svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: #fff;
	transition: transform 0.3s ease;
}

.evpdtl-lead:hover .evpdtl-lead-btn svg {
	transform: translateX(3px);
}

.evpdtl-lead:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpdtl-lead-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
}

.evpdtl-from {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpdtl-lead-price .evpdtl-price,
.evpdtl-lead-price .evpdtl-price-sale {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1;
	color: #fff;
}

.evpdtl-lead-price .evpdtl-price-sale {
	color: var(--ev-sale-gold);
}

.evpdtl-price-was {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.3);
}

/* ---------- The compact cards ---------- */

.evpdtl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.evpdtl-card {
	position: relative;
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 1.125rem;
	align-items: center;
	padding: 0.875rem 1.25rem 0.875rem 0.875rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.125rem;
	background: rgba(30, 25, 20, 0.6);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.evpdtl-card:hover {
	transform: translateY(-4px);
	border-color: rgba(184, 98, 27, 0.6);
}

.evpdtl-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* A rust line that draws itself along the foot on hover. scaleX from the
   left, so it grows rather than fading in. */
.evpdtl-card-rule {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--wp--preset--color--rust);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s ease;
}

.evpdtl-card:hover .evpdtl-card-rule {
	transform: scaleX(1);
}

.evpdtl-card-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 0.75rem;
	overflow: hidden;
}

/* No image is a flat panel. Nothing is substituted, no placeholder and no
   photograph borrowed from another tour. */
.evpdtl-card-thumb--empty {
	background: #1c1715;
}

.evpdtl-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evpdtl-card-text {
	display: block;
	min-width: 0;
}

.evpdtl-card-meta {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.evpdtl-card-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.375rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evpdtl-card-price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.evpdtl-card-price .evpdtl-from {
	font-size: 0.56rem;
}

.evpdtl-card-price .evpdtl-price,
.evpdtl-card-price .evpdtl-price-sale {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	color: #fff;
}

.evpdtl-card-price .evpdtl-price-sale {
	color: var(--ev-sale-gold);
}

.evpdtl-card-price .evpdtl-price-was {
	font-size: 0.75rem;
}

/* The chips can empty the grid: the five compact cards are the top of the
   list, not a sample of every style. */
.evpdtl-empty {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
}

.evpdtl-empty-link {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	text-underline-offset: 0.25em;
}

/* ---------- View all ---------- */

.evpdtl-all-wrap {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.evpdtl-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.4);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evpdtl-all svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.25s ease;
}

.evpdtl-all:hover {
	color: #fff;
	border-bottom-color: #fff;
}

.evpdtl-all:hover svg {
	transform: translateX(0.25rem);
}

.evpdtl-all:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ---------- Narrower ---------- */

/*
   THE TEXT BLOCK WIDENS BEFORE THE TITLE WRAPS TO A THIRD LINE.

   The brief fixes the block at 38rem, the title at clamp(2rem, 3.2vw,
   2.875rem) and the padding at 2.5rem, and asks for the longest published
   title to sit on one or two lines at 1440. Those four cannot all hold:
   the clamp grows the type faster than a fixed box grows, so Namibia's
   "11-Day Namibia Desert and Remote North Fly-in Safari", 52 characters,
   is two lines at 1024 and three at 1440 in a 38rem block.

   38rem stays everywhere the type is small enough for it. Above 1200px the
   block goes to 44rem, which is the width that holds 52 characters in two
   lines at the clamp's ceiling. The subtitle keeps its own 29rem, so the
   paragraph measure the brief set is untouched; only the heading gets the
   extra room, and only where there is room to give.
*/
@media (min-width: 1200px) {

	.evpdtl-lead-body {
		max-width: 44rem;
	}
}

@media (max-width: 1024px) {

	.evpdtl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
   TWO COLUMNS, SO THE THIRD CARD GOES, AND ONLY IN THAT BAND.

   Brief 24 section 6 is one row and never two, and between 701 and 1024
   three cards in two columns is two rows. Under 701 the grid is a single
   column and all three are a list rather than a second row, so the floor
   matters: the first cut of this had no floor and hid the third card on a
   phone as well, where the brief asks for all three.

   The card that drops is not content lost. Every tour it could have shown
   is one tap away through View all, which renders whenever the country
   has more than four.
*/
@media (min-width: 701px) and (max-width: 1024px) {

	.evpdtl-grid .evpdtl-card:nth-child(3) {
		display: none;
	}
}

@media (max-width: 900px) {

	/*
	   THE PHOTOGRAPH NEEDS MORE HEIGHT ONCE THE TEXT IS OVER IT RATHER THAN
	   BESIDE IT, and the wash turns through 90 degrees with it.
	*/
	.evpdtl-lead {
		height: clamp(26rem, 120vw, 32rem);
	}

	.evpdtl-lead-scrim {
		background: linear-gradient(180deg,
			rgba(17, 16, 16, 0.1) 0%,
			rgba(17, 16, 16, 0.85) 100%);
	}

	.evpdtl-lead-flag {
		top: 1.25rem;
		left: 1.25rem;
	}

	.evpdtl-lead-body {
		max-width: none;
		padding: 1.25rem;
	}

	/* The price reads above the button rather than beside it: side by side
	   at this width the button loses its label to two lines. */
	.evpdtl-lead-row {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.875rem;
	}

	.evpdtl-lead-btn {
		width: 100%;
	}

	.evpdtl-count {
		white-space: normal;
	}

	.evpdtl-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}
}

@media (max-width: 700px) {

	.evpdtl-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	/* Colour only. No lift, no growing rule, no slow zoom. */
	.evpdtl-lead-img,
	.evpdtl-card,
	.evpdtl-card-rule,
	.evpdtl-lead-btn,
	.evpdtl-lead-btn svg,
	.evpdtl-all svg {
		transition: none;
	}

	.evpdtl-lead:hover .evpdtl-lead-img {
		transform: none;
	}

	.evpdtl-card:hover {
		transform: none;
	}

	.evpdtl-card:hover .evpdtl-card-rule {
		transform: scaleX(0);
	}
}

/* ==========================================================================
   DESIGN YOUR OWN TRIP
   parts/section-destination-your-trip.php, assets/js/your-trip.js.
   The modal it opens is parts/section-enquiry-modal-bespoke.php and keeps
   the .evpbt- prefix, because it is the same dialog the location page opens.

   ONE WIDE CARD: a slow crossfade on the left, the pitch and one button on
   the right. It replaces the whole bespoke section on a destination, which
   was a header, an experience carousel or a Things to Do mosaic, a stats
   row and a closing block. None of that is here.
   ========================================================================== */

.evpyt {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

/* The old #bespoke target. It draws nothing and takes no space; it only
   gives a link somewhere to land, under the header and the tab strip. */
.evpyt-alias {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--ev-header-h, 5rem) + 4rem);
}

.evpyt-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.evpyt-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 38.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.5rem;
	background: rgba(30, 25, 20, 0.97);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

/*
   WITH NO PHOTOGRAPH THE CARD IS THE TEXT ALONE, held to a reading measure
   and centred, rather than a text column with an empty half beside it. The
   guide's dark hero glow stands in for the picture.
*/
.evpyt-card--noimage {
	min-height: 0;
	background:
		radial-gradient(110% 90% at 18% 32%, rgba(184, 98, 27, 0.16) 0%, rgba(184, 98, 27, 0) 56%),
		rgba(30, 25, 20, 0.97);
}

.evpyt-card--noimage .evpyt-body {
	max-width: 40rem;
	margin: 0 auto;
}

/* ---------- The photograph panel ---------- */

.evpyt-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--bg-deep);
}

/*
   EVERY PICTURE IS STACKED AND ONLY ONE IS OPAQUE. A crossfade needs both
   frames painted at once, so they are absolutely positioned on top of each
   other rather than swapped in and out.
*/
.evpyt-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.evpyt-slide.is-active {
	opacity: 1;
}

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

/*
   TWO WASHES. One carries the photograph into the text panel so there is no
   edge between them, and a short lift along the foot keeps the caption
   legible. The direction changes with the layout, below.
*/
.evpyt-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(30, 25, 20, 0) 55%, rgba(30, 25, 20, 0.97) 100%),
		linear-gradient(to top, rgba(30, 25, 20, 0.75) 0%, rgba(30, 25, 20, 0) 45%);
}

.evpyt-caption {
	position: absolute;
	right: 1.25rem;
	bottom: 1rem;
	left: 1.25rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	transition: opacity 1.5s ease-in-out;
}

/* No caption on the picture showing means no band of nothing. */
.evpyt-caption:empty {
	display: none;
}

/* ---------- The text panel ---------- */

.evpyt-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: 1.5rem;
}

.evpyt-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.06;
	color: #fff;
	text-wrap: balance;
}

/* The place on its own line, in rust. A span and not an em: it is a
   colour, and there is no italic here to unset. */
.evpyt-title-place {
	display: block;
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpyt-lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
	text-wrap: pretty;
}

.evpyt-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.evpyt-step {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
}

.evpyt-step-num {
	flex: 0 0 1.75rem;
	width: 1.75rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.3;
	color: var(--wp--preset--color--gold);
}

.evpyt-step-text {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.evpyt-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}

/* The house primary's values under this section's own class, so the base
   button can change without moving this one. */
.evpyt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 1rem 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evpyt-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evpyt-btn:hover::before {
	opacity: 1;
}

.evpyt-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evpyt-btn > * {
	position: relative;
	z-index: 1;
}

.evpyt-btn svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: #fff;
	transition: transform 0.3s ease;
}

.evpyt-btn:hover svg {
	transform: translateX(3px);
}

.evpyt-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   TWO BUTTONS SIDE BY SIDE, AND THE NOTE DROPS UNDER THEM. With one
   button the row is a column and the note sits beside it, which is what
   every destination without a guide still gets. The modifier is on the
   row rather than on the note, so the note does not have to know whether
   there is a guide.
*/
/*
   TWO BUTTONS THAT WRAP RATHER THAN OVERRUN. This was a grid of two
   max-content columns, which cannot wrap: a label wider than the space
   left simply ran past the card's right edge, which is what "Read the
   Kaieteur Falls guide" did at 1440. Flex with a wrap does the same job
   at every width it used to fit at, and drops the second button onto its
   own line at the widths it did not.

   The note keeps a line to itself, as the grid gave it.
*/
.evpyt-row--pair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.evpyt-row--pair .evpyt-note {
	flex: 0 0 100%;
}

/* The outline twin of .evpyt-btn: same height, same radius, no fill. */
.evpyt-btn-guide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.evpyt-btn-guide svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpyt-btn-guide:hover {
	border-color: #fff;
}

.evpyt-btn-guide:hover svg {
	transform: translateX(0.25rem);
}

.evpyt-btn-guide:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpyt-note {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}

/* Both buttons full width and stacked on a phone, the note under them. */
@media (max-width: 600px) {

	.evpyt-row--pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpyt-row--pair .evpyt-btn,
	.evpyt-btn-guide {
		width: 100%;
	}
}

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

	.evpyt-btn-guide,
	.evpyt-btn-guide svg {
		transition: none;
	}

	.evpyt-btn-guide:hover svg {
		transform: none;
	}
}

@media (min-width: 1025px) {

	/*
	   THE PICTURE TAKES WHAT THE TEXT DOES NOT. A fixed 35rem text column
	   and the rest to the photograph, so the panel grows with the window
	   and the reading measure does not.
	*/
	.evpyt-card {
		grid-template-columns: minmax(0, 1fr) 35rem;
	}

	/* With no photograph there is no left column to hold open, so the
	   card is one column and the text is centred in it rather than
	   pushed right with an empty half beside it. */
	.evpyt-card--noimage {
		grid-template-columns: minmax(0, 1fr);
	}

	.evpyt-card--noimage .evpyt-body {
		padding: 3.5rem;
	}

	.evpyt-media {
		aspect-ratio: auto;
	}

	/* The wash turns through 90 degrees with the layout: the photograph
	   now dissolves rightwards into the text rather than downwards. */
	.evpyt-scrim {
		background:
			linear-gradient(90deg, rgba(30, 25, 20, 0) 55%, rgba(30, 25, 20, 0.97) 100%),
			linear-gradient(to top, rgba(30, 25, 20, 0.75) 0%, rgba(30, 25, 20, 0) 45%);
	}

	.evpyt-body {
		padding: 3.5rem 3.5rem 3.5rem 2rem;
	}

	/* The note beside the button, not under it, once there is room. */
	.evpyt-row {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
		flex-wrap: wrap;
	}

	.evpyt-note {
		max-width: 14rem;
	}
}

/*
   THE SLOW ZOOM, the hero's: 1 to 1.06 over twenty seconds on whichever
   picture is showing. Restarted each time a slide becomes active, because
   the animation is on the class.
*/
@media (prefers-reduced-motion: no-preference) {

	.evpyt-slide.is-active .evpyt-img {
		animation: evpyt-zoom 20s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}
}

@keyframes evpyt-zoom {

	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}

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

	/* The script never starts the ticker under reduced motion, so the
	   first picture is the only one that will ever be active. These make
	   sure it arrives without a fade and never moves. */
	.evpyt-slide,
	.evpyt-caption,
	.evpyt-btn,
	.evpyt-btn svg,
	.evpyt-btn::before {
		transition: none;
	}

	.evpyt-btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   TOP EXPERIENCES
   parts/section-destination-experiences.php. No script at all.

   A MOSAIC OF SIX, two rows of three. It replaced the bespoke experiences
   carousel, the detail modal a card opened, and the Things to Do tiles that
   opened panels of cards. Nothing here opens anything.
   ========================================================================== */

.evpex {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpex-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- The header ---------- */

.evpex-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.evpex-head-text {
	min-width: 0;
}

.evpex-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpex-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evpex-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

.evpex-title-place {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/* The link into the guide's reasons to go. Absent, not disabled, when the
   guide has no such section. */
.evpex-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.evpex-more svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpex-more:hover {
	color: #fff;
}

.evpex-more:hover svg {
	transform: translateX(0.25rem);
}

.evpex-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ---------- The mosaic ---------- */

.evpex-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evpex-item {
	min-width: 0;
}

/*
   THE TILE IS AN ANCHOR OR A DIV, and the rules are the same for both.
   display:flex with the content pushed to the foot, so the text block sits
   on the bottom edge whether the tile has a picture or not.
*/
.evpex-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	height: 100%;
	border-radius: 1.125rem;
	background: #1c1715;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
}

.evpex-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.evpex-tile:hover .evpex-img,
a.evpex-tile:focus-visible .evpex-img {
	transform: scale(1.04);
}

/* Omitted entirely on a tile with no picture: there is nothing to darken,
   and a scrim over the flat surface would read as a second colour. */
.evpex-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(17, 16, 16, 0) 35%, rgba(17, 16, 16, 0.92) 100%);
}

.evpex-body {
	position: relative;
	z-index: 2;
	display: block;
	padding: 1.375rem;
}

.evpex-tag {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpex-tile-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.25rem, 1.75vw, 1.5625rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.12;
	color: #fff;
	text-wrap: balance;
}

.evpex-text {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	text-wrap: pretty;
}

.evpex-go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpex-go svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

a.evpex-tile:hover .evpex-go svg {
	transform: translateX(0.2rem);
}

a.evpex-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   THE REVEAL, AND EVERYWHERE IT DOES NOT HAPPEN.

   Only with a pointer that can hover, and only on a tile that has a
   photograph for the text to be hidden over. A touch screen has no hover
   to give, a tile with no picture has nothing to show instead, and a
   reader who asked for less motion gets the text outright. In all three
   the rule below simply never applies, so the text is visible from the
   start rather than being revealed and then un-revealed.
*/
@media (hover: hover) and (pointer: fine) {

	.evpex-tile:not(.evpex-tile--noimage) .evpex-reveal {
		display: block;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.35s ease, opacity 0.35s ease;
	}

	/* focus-within as well as hover, so tabbing to a linked tile opens it. */
	.evpex-tile:not(.evpex-tile--noimage):hover .evpex-reveal,
	.evpex-tile:not(.evpex-tile--noimage):focus-within .evpex-reveal,
	.evpex-tile:not(.evpex-tile--noimage):focus-visible .evpex-reveal {
		max-height: 16rem;
		opacity: 1;
	}
}

@media (max-width: 900px) {

	.evpex-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The link reads under the heading once the header stacks. */
	.evpex-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.875rem;
	}
}

@media (max-width: 560px) {

	.evpex-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	/*
	   No zoom, no sliding arrow, and no reveal: the text is simply there.
	   A media query cannot cancel another one, so the hover rule above is
	   re-stated open here rather than removed.

	   IT HAS TO CARRY THE SAME SELECTOR, :not() included. The hover rule
	   is .evpex-tile:not(.evpex-tile--noimage) .evpex-reveal, and :not()
	   counts its argument's specificity, so a plainer .evpex-tile
	   .evpex-reveal loses to it however late it appears. Matched here, and
	   later in the file, so this wins. Measured: without the :not() the
	   text stayed hidden under reduced motion.
	*/
	.evpex-img,
	.evpex-go svg,
	.evpex-more svg,
	.evpex-reveal {
		transition: none;
	}

	a.evpex-tile:hover .evpex-img,
	a.evpex-tile:focus-visible .evpex-img {
		transform: none;
	}

	.evpex-tile:not(.evpex-tile--noimage) .evpex-reveal {
		max-height: none;
		opacity: 1;
		overflow: visible;
		/* The plain .evpex-reveal above is one class and loses to this
		   selector's three, which is why transition is repeated here. */
		transition: none;
	}
}

/* ==========================================================================
   WHERE TO GO
   parts/section-destination-where.php, assets/js/destination-where.js.

   A full width map, then a row of location cards. The pin is the tour
   highlights map's at 14px and the card is feature/tour-locations', both
   ported under this prefix so neither branch waits on the other.

   .evpdm-* IS A DIFFERENT SECTION AND STILL LIVE: the location page's
   "Other {Country} destinations", with its showcase card, counter, progress
   bar and pill row. Nothing here shares a selector with it.
   ========================================================================== */

.evpwh {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpwh-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- The header ---------- */

.evpwh-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.evpwh-head-text {
	min-width: 0;
}

.evpwh-head-aside {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.25rem;
}

.evpwh-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpwh-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evpwh-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

.evpwh-title-place {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpwh-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpwh-more svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.evpwh-more:hover {
	color: #fff;
}

.evpwh-more:hover svg {
	transform: translateX(0.25rem);
}

.evpwh-more:focus-visible,
.evpwh-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
   THE ARROWS SIT ON THE CARDS.

   They were a pair in the section header, beside the H2, which put them
   508px and one map above the row they move. Alex's screenshot of Bhutan
   at 1440 is four cards running off the right edge with nothing on screen
   that looks like a way to reach them: the scrollbar is hidden, the wheel
   belongs to the page, and the only controls were somewhere else.

   CENTRED ON THE PHOTOGRAPH, NOT ON THE CARD. A strip card is 20rem wide
   and its picture is 16:10, so the picture is 12.5rem tall and its middle
   is 6.25rem down. Centring on the whole card would put the buttons over
   the name and the tagline underneath it.
*/
.evpwh-strip-wrap {
	position: relative;
}

.evpwh-arrow {
	position: absolute;
	top: 6.25rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(17, 16, 16, 0.85);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/*
   HALF OUTSIDE THE STRIP, where the section's own padding leaves room, so
   they frame the row rather than cover its first and last card.
*/
.evpwh-arrow--prev {
	left: -1.375rem;
}

.evpwh-arrow--next {
	right: -1.375rem;
}

.evpwh-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

.evpwh-arrow:hover {
	border-color: #fff;
}

.evpwh-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Nothing to go back to, or nothing further on. */
.evpwh-strip-wrap:not( .has-prev ) .evpwh-arrow--prev,
.evpwh-strip-wrap:not( .has-next ) .evpwh-arrow--next {
	visibility: hidden;
	opacity: 0;
}

/*
   THE FADE SAYS THERE IS MORE. A hidden scrollbar and a row that ends at
   the section's edge look identical to a row that ends; four rem of the
   page's own ground over the last card is what tells them apart. It
   tracks the scroll from the same handler the arrows do.
*/
.evpwh-strip-wrap::before,
.evpwh-strip-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0.5rem;
	z-index: 1;
	width: 4rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.evpwh-strip-wrap::before {
	left: 0;
	background: linear-gradient(270deg, rgba(17, 16, 16, 0), #111010);
}

.evpwh-strip-wrap::after {
	right: 0;
	background: linear-gradient(90deg, rgba(17, 16, 16, 0), #111010);
}

.evpwh-strip-wrap.has-prev::before,
.evpwh-strip-wrap.has-next::after {
	opacity: 1;
}

/*
   A GRID OF FIVE DOES NOT MOVE, so it gets no buttons and no gradient
   over nothing.
*/
.evpwh-strip-wrap--grid::before,
.evpwh-strip-wrap--grid::after {
	display: none;
}

/* ---------- The map ---------- */

/*
   THE FRAME HOLDS ITS HEIGHT BEFORE LEAFLET ARRIVES, and after, if it
   never does, so the cards below never jump. The ground is the tour map's
   dark radial, so the first tiles do not flash against black.
*/
.evpwh-map {
	position: relative;
	isolation: isolate;
	height: clamp(24rem, 48vw, 27.5rem);
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: radial-gradient(120% 90% at 50% 40%, #2c2a25, #17150f);
	overflow: hidden;
}

.evpwh-map .leaflet-container {
	height: 100%;
	background: #2b2a26;
	font-family: var(--wp--preset--font-family--montserrat);
}

/* The imagery drained the way the tour map drains it, on the tile pane so
   a zoom in progress darkens with it and the pins keep their colour. */
.evpwh-map .leaflet-tile-pane {
	filter: saturate(0.3) brightness(0.5);
}

.evpwh-map .leaflet-control-attribution {
	margin: 0;
	padding: 0.25rem 0.5rem;
	background: rgba(17, 16, 16, 0.72);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.6rem;
}

.evpwh-map .leaflet-control-attribution a {
	color: rgba(255, 255, 255, 0.7);
}

.evpwh-map .leaflet-control-zoom a {
	border: 1px solid rgba(212, 196, 168, 0.18);
	background: rgba(17, 16, 16, 0.82);
	color: #fff;
}

.evpwh-map .leaflet-control-zoom a:hover {
	background: rgba(17, 16, 16, 0.95);
	color: var(--wp--preset--color--gold);
}

/* ---------- The pins ---------- */

/*
   THE PAGE'S OWN PLACE, on the location page's Nearby map. Larger and
   fully rust, so the reader can tell at a glance which pin is the
   place they are reading about. It has no card: scaling the icon
   rather than resizing it keeps Leaflet's anchor maths correct.
*/
.evpwh-pin--self {
	transform: scale(1.4);
	z-index: 500 !important;
}

.evpwh-pin--self .evpwh-pin-dot {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}
.evpwh-pin {
	background: none;
	border: none;
}

.evpwh-pin .evpwh-pin-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(184, 98, 27, 0.5) 0%, rgba(184, 98, 27, 0.18) 45%, rgba(184, 98, 27, 0) 70%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* 14px, the brief's size: the tour map's pin reduced, not redrawn. */
.evpwh-pin .evpwh-pin-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

.evpwh-pin .evpwh-pin-dot::after {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
}

.evpwh-pin:hover .evpwh-pin-dot,
.evpwh-pin.is-active .evpwh-pin-dot {
	transform: translate(-50%, -50%) scale(1.3);
}

.evpwh-pin .evpwh-pin-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.evpwh-pin.is-active .evpwh-pin-pulse {
	opacity: 0.7;
	transform: translate(-50%, -50%) scale(2.2);
}

@media (prefers-reduced-motion: no-preference) {

	.evpwh-pin.is-active .evpwh-pin-pulse {
		animation: evpwh-pulse 2s ease-out infinite;
	}
}

@keyframes evpwh-pulse {

	0% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(3);
	}
}

/*
   THE PERMANENT LABEL beside each pin. Leaflet draws a permanent tooltip
   whatever it overlaps, so placeLabels() in destination-where.js tries
   four positions and marks what still does not fit .is-hidden. A hidden
   label comes back with .is-revealed while its place is lit.
*/
.evpwh-map .leaflet-tooltip.evpwh-label {
	padding: 0.2rem 0.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: rgba(17, 16, 16, 0.72);
	box-shadow: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.evpwh-map.evpwh-map--labels .leaflet-tooltip.evpwh-label {
	opacity: 1;
}

/*
   NOT display:none. The pass measures these boxes, and a box with no
   layout has no size to measure, so a hidden label is transparent and
   untouchable rather than gone.

   THE OPACITY ITSELF IS SET IN THE SCRIPT, not here. Leaflet writes
   style.opacity on every tooltip it opens, so a rule in this file loses
   to it whatever its specificity. This class carries the half the
   stylesheet can still win, and destination-where.js carries the other.
*/
.evpwh-map .leaflet-tooltip.evpwh-label.is-hidden {
	pointer-events: none;
}

.evpwh-map .leaflet-tooltip.evpwh-label::before {
	display: none;
}

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

	/* The pass still runs; only the fade goes. */
	.evpwh-map .leaflet-tooltip.evpwh-label {
		transition: none;
	}
}

/* ---------- The cards ---------- */

.evpwh-cards {
	display: grid;
	gap: 1.125rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

/*
   FIVE OR FEWER ARE EQUAL COLUMNS, so a country with three places gets
   three wide cards rather than three narrow ones and a gap.
*/
.evpwh-cards--grid {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

/*
   SIX OR MORE SCROLL. A sixth column makes every card too narrow to carry
   a 16:10 picture and a name, so past five the row becomes a strip of
   fixed width cards that snaps.
*/
.evpwh-cards--strip {
	grid-auto-flow: column;
	grid-auto-columns: 20rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the lift on hover, which would otherwise clip. */
	padding-bottom: 0.5rem;
}

.evpwh-cards--strip::-webkit-scrollbar {
	display: none;
}

.evpwh-cards--strip .evpwh-card-item {
	scroll-snap-align: start;
}

.evpwh-card-item {
	min-width: 0;
}

/*
   A SPAN, NOT AN ANCHOR, SINCE BRIEF 22. The card holds two links now and
   an anchor cannot contain another, so the card is a plain box and
   .evpwh-card-go stretches over it. Everything else about it is unchanged,
   including the hover rules below, which work on a span.
*/
.evpwh-card {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.evpwh-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: 0.875rem;
	border-radius: 0.875rem;
	background: #1c1715;
	overflow: hidden;
}

.evpwh-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.evpwh-card:hover .evpwh-card-img,
.evpwh-card:focus-within .evpwh-card-img {
	transform: scale(1.04);
}

.evpwh-card-name {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.3rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	transition: color 0.25s ease;
}

.evpwh-card:hover .evpwh-card-name,
.evpwh-card:focus-within .evpwh-card-name {
	color: var(--wp--preset--color--gold);
}

.evpwh-card-tagline {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
}

/* One line, and the gap the brief asks for. */
.evpwh-card-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1.5rem;
}

.evpwh-card-go {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gold);
}

/*
   THE FIRST LINK IS THE CARD. Its ::after covers the picture, the title
   and the tagline, so a click anywhere on the card goes to the place. The
   guide link is raised above it, which is the only reason it stays
   clickable.
*/
.evpwh-card-go:not( .evpwh-card-go--guide )::after {
	content: '';
	position: absolute;
	inset: 0;
}

.evpwh-card-go--guide {
	position: relative;
	z-index: 1;
	color: rgba(255, 255, 255, 0.72);
}

.evpwh-card-go--guide:hover {
	color: var(--wp--preset--color--gold);
}

.evpwh-card-go:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* The two second lit state a pin click gives a card. */
.evpwh-card.is-lit .evpwh-card-media {
	box-shadow: 0 0 0 2px var(--wp--preset--color--rust);
}

.evpwh-card.is-lit .evpwh-card-name {
	color: var(--wp--preset--color--gold);
}

@media (max-width: 1024px) {

	/* auto-fit rather than a column per card: at this width five equal
	   columns are narrower than the picture needs. */
	.evpwh-cards--grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}
}

@media (max-width: 900px) {

	/*
	   NO MAP BELOW 901px. The frame is not drawn and the script refuses
	   to fetch Leaflet at this width, so a phone downloads no mapping
	   library for a map it cannot see. The cards are the section.
	*/
	.evpwh-map {
		display: none;
	}

	.evpwh-cards {
		margin-top: 0;
	}

	/*
	   INSIDE THE STRIP AT THIS WIDTH. The section's gutter is a clamp and
	   at 1024 it is too narrow to hold half a button outside the row, so
	   they come in and sit over the picture's edge.
	*/
	.evpwh-arrow--prev {
		left: 0.5rem;
	}

	.evpwh-arrow--next {
		right: 0.5rem;
	}

	.evpwh-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.875rem;
	}

	.evpwh-head-aside {
		margin-bottom: 0;
		flex-wrap: wrap;
	}
}

@media (max-width: 560px) {

	/* One column, always a list: a strip of 20rem cards on a 390px
	   screen is a card and a sliver of the next. */
	.evpwh-cards--grid,
	.evpwh-cards--strip {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax(0, 1fr);
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.evpwh-arrow {
		display: none;
	}

	.evpwh-strip-wrap::before,
	.evpwh-strip-wrap::after {
		display: none;
	}
}

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

	.evpwh-card,
	.evpwh-card-img,
	.evpwh-card-name,
	.evpwh-more svg,
	.evpwh-pin .evpwh-pin-dot {
		transition: none;
	}

	.evpwh-card:hover .evpwh-card-img,
	.evpwh-card:focus-visible .evpwh-card-img {
		transform: none;
	}

	.evpwh-cards--strip {
		scroll-behavior: auto;
	}

	.evpwh-arrow,
	.evpwh-strip-wrap::before,
	.evpwh-strip-wrap::after {
		transition: none;
	}
}

/* ==========================================================================
   WILDLIFE GRID
   parts/section-destination-wildlife-grid.php,
   assets/js/destination-wildlife-grid.js.

   A field guide: a species opens in place rather than in a modal, and the
   open card takes two columns of the grid.

   .evpdw-* IS A DIFFERENT SECTION AND STILL LIVE: the tour page's "Wildlife
   on This Route", a carousel with a species dialog. Nothing here shares a
   selector with it.
   ========================================================================== */

.evpwl {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evpwl-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- The header ---------- */

.evpwl-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.evpwl-head-text {
	min-width: 0;
}

.evpwl-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evpwl-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evpwl-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 5.5vw, 4.4rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

.evpwl-title-place {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

.evpwl-count {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

/* ---------- The chips ---------- */

.evpwl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.evpwl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.6rem;
	padding: 0 1.25rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.evpwl-chip-n {
	font-variant: normal;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55);
}

.evpwl-chip:hover {
	border-color: var(--wp--preset--color--gold);
}

.evpwl-chip.is-on {
	border-color: var(--wp--preset--color--rust);
	background: rgba(184, 98, 27, 0.18);
}

.evpwl-chip.is-on .evpwl-chip-n {
	color: rgba(255, 255, 255, 0.8);
}

.evpwl-chip:focus-visible,
.evpwl-card:focus-visible,
.evpwl-close:focus-visible,
.evpwl-showmore:focus-visible,
.evpwl-tours:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
}

/* ---------- The grid ---------- */

.evpwl-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: start;
}

.evpwl-item {
	min-width: 0;
}

/*
   AN OPEN SPECIES TAKES TWO COLUMNS. There is room for the picture beside
   the text at that width and not at one, which is the whole reason the card
   opens in place rather than in a dialog.
*/
.evpwl-item.is-open {
	grid-column: span 2;
}

.evpwl-card {
	display: block;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1rem;
	background: rgba(30, 25, 20, 0.6);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.evpwl-card:hover {
	transform: translateY(-3px);
	border-color: rgba(184, 98, 27, 0.5);
}

.evpwl-item.is-open .evpwl-card {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	border-color: rgba(184, 98, 27, 0.5);
	background: rgba(184, 98, 27, 0.08);
	transform: none;
}

/*
   4:3, NOT SQUARE. Brief 26 shows two rows before Show more, and a
   square photograph makes a row about a third taller than it needs to
   be: two rows of squares is most of a screen before anything else.
*/
.evpwl-media {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.75rem;
	border-radius: 0.625rem;
	background: #1c1715;
	overflow: hidden;
}

.evpwl-item.is-open .evpwl-media {
	margin-bottom: 0;
}

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

.evpwl-text {
	display: block;
	min-width: 0;
}

.evpwl-status {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
}

.evpwl-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ev-iucn-dd);
}

.evpwl-dot--lc { background: var(--ev-iucn-lc); }
.evpwl-dot--nt { background: var(--ev-iucn-nt); }
.evpwl-dot--vu { background: var(--ev-iucn-vu); }
.evpwl-dot--en { background: var(--ev-iucn-en); }
.evpwl-dot--cr { background: var(--ev-iucn-cr); }
.evpwl-dot--ew { background: var(--ev-iucn-ew); }
.evpwl-dot--ex { background: var(--ev-iucn-ex); }

.evpwl-status-label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.evpwl-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.375rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpwl-item.is-open .evpwl-name {
	font-size: 1.875rem;
}

/* UPRIGHT. The species name was italic here and nowhere else the tour and
   guide work has been through; the italic goes with the rest. */
.evpwl-sci {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 400;
	color: var(--wp--preset--color--gold);
}

.evpwl-more {
	display: block;
}

.evpwl-desc {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: pretty;
}

.evpwl-tours {
	display: inline-block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gold);
}

.evpwl-tours:hover {
	color: #fff;
}

.evpwl-close {
	margin-top: 0.875rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 3.125rem;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.evpwl-close:hover {
	border-color: var(--wp--preset--color--gold);
}

/* ---------- Show more ---------- */

.evpwl-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.evpwl-showmore {
	min-height: 2.75rem;
	padding: 0 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.evpwl-showmore:hover {
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1100px) {

	.evpwl-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {

	.evpwl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The picture goes back above the text: 15rem beside it leaves the
	   description about ten characters wide at this width. */
	.evpwl-item.is-open .evpwl-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.evpwl-item.is-open .evpwl-media {
		margin-bottom: 0;
	}

	.evpwl-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}

	.evpwl-count {
		white-space: normal;
	}
}

@media (max-width: 420px) {

	.evpwl-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: there is no second column to span into. */
	.evpwl-item.is-open {
		grid-column: auto;
	}
}

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

	.evpwl-card,
	.evpwl-chip,
	.evpwl-close,
	.evpwl-showmore {
		transition: none;
	}

	.evpwl-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   PLANNING
   parts/section-destination-planning.php. No script.

   One wide card that presents the country's travel guide as the place for
   practical answers. Nothing the guide says is restated: a seasonal
   sentence, three one-line facts, and a link per question it answers.

   Without a guide the card is not drawn at all and the section is the
   heading and the sentence at the house lead measure.
   ========================================================================== */

.evppl {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(212, 196, 168, 0.12);
	background: var(--wp--preset--color--bg-deep);
}

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

.evppl-inner {
	width: 100%;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* ---------- Shared type ---------- */

.evppl-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evppl-eyebrow::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--rust);
}

.evppl-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.06;
	color: #fff;
	text-wrap: balance;
}

.evppl-title-place {
	color: var(--wp--preset--color--rust);
	font-style: normal;
}

/*
   THE PITCH LINE, AND THE ONLY SHAPE THIS SECTION HAS. Brief 22
   replaced the seasonal sentence in the card with it; brief 26 deleted
   the no-guide shape that was the sentence's last home, so .evppl-season
   went with it.
*/
.evppl-lead {
	margin: 0 0 1.75rem;
	max-width: 36rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

/* ---------- The card ---------- */

.evppl-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 36rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.5rem;
	background: rgba(30, 25, 20, 0.97);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.evppl-card--noimage {
	min-height: 0;
}

.evppl-cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background:
		radial-gradient(110% 90% at 18% 32%, rgba(184, 98, 27, 0.16) 0%, rgba(184, 98, 27, 0) 56%),
		var(--wp--preset--color--bg-deep);
	text-decoration: none;
}

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

/*
   TWO WASHES. One carries the photograph into the text panel so there is
   no edge between them; the other lifts the foot so the three lines of
   cover text read over whatever is behind them. The direction of the
   first changes with the layout, below.
*/
.evppl-cover-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(30, 25, 20, 0) 40%, rgba(30, 25, 20, 0.97) 100%),
		linear-gradient(to top, rgba(30, 25, 20, 0.85) 0%, rgba(30, 25, 20, 0) 50%);
}

.evppl-cover-text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	padding: 2rem;
}

.evppl-kicker {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evppl-cover-title {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.evppl-updated {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
}

.evppl-cover:focus-visible,
.evppl-btn:focus-visible,
.evppl-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- The text panel ---------- */

.evppl-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.625rem;
	padding: 1.5rem;
}

.evppl-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.625rem;
	column-gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evppl-link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.evppl-link svg {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	fill: var(--wp--preset--color--rust);
	transition: transform 0.2s ease;
}

.evppl-link:hover {
	color: #fff;
}

.evppl-link:hover svg {
	transform: translateX(0.2rem);
}

/* The house primary's values under this section's own class. */
.evppl-btn {
	position: relative;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 1rem 2rem;
	border: 2px solid var(--wp--preset--color--rust);
	border-radius: 3.125rem;
	background: var(--wp--preset--color--rust);
	box-shadow: 0 8px 28px rgba(184, 98, 27, 0.4);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evppl-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--rust) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evppl-btn:hover::before {
	opacity: 1;
}

.evppl-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(184, 98, 27, 0.55);
}

.evppl-btn > * {
	position: relative;
	z-index: 1;
}

.evppl-btn svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: #fff;
	transition: transform 0.3s ease;
}

.evppl-btn:hover svg {
	transform: translateX(3px);
}

@media (min-width: 701px) {

	/* Two columns of links once there is room for two to read. */
	.evppl-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {

	.evppl-card {
		grid-template-columns: 32.5rem minmax(0, 1fr);
	}

	.evppl-cover {
		aspect-ratio: auto;
	}

	/* The wash turns through 90 degrees with the layout: the cover now
	   dissolves rightwards into the text rather than downwards. */
	.evppl-cover-scrim {
		background:
			linear-gradient(270deg, rgba(30, 25, 20, 0.97) 0%, rgba(30, 25, 20, 0) 60%),
			linear-gradient(to top, rgba(30, 25, 20, 0.85) 0%, rgba(30, 25, 20, 0) 50%);
	}

	.evppl-body {
		padding: 3rem 3.25rem 3rem 2.5rem;
	}
}

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

	.evppl-btn,
	.evppl-btn svg,
	.evppl-btn::before,
	.evppl-link,
	.evppl-link svg {
		transition: none;
	}

	.evppl-btn:hover {
		transform: none;
	}
}