/*
	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.

   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-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/* 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-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: italic;
}

/* ---------- 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: italic;
}

.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: italic;
}

.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% - 28rem);
	opacity: var(--ev-dock-in, 0);
	transform: translate(-50%, calc(-50% + (1 - var(--ev-dock-in, 0)) * 0.5rem));
	visibility: hidden;
	pointer-events: none;
}

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

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

/* The mirror pills 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;
		/*
		 * The scroll box clips the selected pill's glow square unless
		 * there is room inside it. The same allowance .evptt-bar-inner
		 * gives its pills, for the same reason.
		 */
		padding: 0.5rem 0.75rem;
		gap: 0.375rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		transform: none;
		-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::-webkit-scrollbar {
		display: none;
	}

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

	.header-dock-tab {
		scroll-snap-align: center;
		min-height: 2.375rem;
		padding: 0.625rem 1.125rem;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}

	.ecovoyager-header.is-tabs-docking .logo-text {
		display: none;
	}

	.ecovoyager-header.is-tabs-docking .logo-icon {
		margin-right: 0;
	}

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

@media (max-width: 480px) {
	.header-dock-tab {
		min-height: 2.25rem;
		padding: 0.5625rem 0.9375rem;
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}
}


/* ==================================================================
   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: italic;
}

.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: italic;
	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: italic;
}

.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: italic;
}

.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: italic;
}

.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; }
}

/* ==================================================================
   DESTINATION PAGE: COUNTRY OVERVIEW
   assets/js/country-overview.js, and four parts that were one file
   until the split: section-destination-hero.php,
   section-destination-quick-nav.php, section-destination-overview.php
   and section-destination-map-gallery.php. The .evpco- prefix is
   shared across all four and the rules below are not grouped by part,
   because the layout they describe spans them.

   Converted from salvage/destination-page/01-country-overview.html.
   Removed on the way in: 117 !important, the uniqid prefix on every
   selector and id, and the section's private colour tokens.

   The reference used --charcoal (#1A1A1A) as the section background.
   That is the old value; #111010 via the token is the current one.
   ================================================================== */

/* ---------- Hero ---------- */
.evpco-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100lvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	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;
}

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

.evpco-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* The reference needed !important on every one of these to defeat a
   third-party img rule forcing height:auto. There is no such rule in
   this theme, so plain declarations hold. */
.evpco-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	margin: 0;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.evpco-slide.is-active { opacity: 1; }

.evpco-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.30) 0%,
		rgba(0, 0, 0, 0.50) 40%,
		rgba(0, 0, 0, 0.65) 70%,
		rgba(0, 0, 0, 0.80) 100%);
	pointer-events: none;
}

.evpco-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 1.25rem;
}

.evpco-breadcrumbs {
	position: absolute;
	top: 4.5rem;
	left: 1rem;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem 0.5rem;
	max-width: calc(100% - 2rem);
	padding: 0.5625rem 1rem;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 3.125rem;
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.evpwt-js .evpco-breadcrumbs {
	opacity: 0;
	animation: evpcoFadeUp 0.8s ease-out 0.4s forwards;
}

.evpco-breadcrumbs a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.evpco-breadcrumbs a:hover { color: var(--wp--preset--color--gold); }

.evpco-breadcrumbs-sep {
	color: rgba(255, 255, 255, 0.35);
	font-size: 1.1em;
	line-height: 1;
}

.evpco-breadcrumbs-current {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	white-space: nowrap;
}

.evpco-hero-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.evpwt-js .evpco-hero-badge {
	opacity: 0;
	animation: evpcoFadeUp 0.9s ease-out 0.3s forwards;
}

.evpco-hero-badge-line {
	display: block;
	width: 1.75rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--rust));
}

.evpco-hero-badge-line:last-child {
	background: linear-gradient(90deg, var(--wp--preset--color--rust), transparent);
}

.evpco-hero-badge-text {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpco-hero-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.8rem, 11vw, 5.5rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1.125rem;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.evpwt-js .evpco-hero-title {
	opacity: 0;
	animation: evpcoFadeUp 1s ease-out 0.5s forwards;
}

.evpco-hero-subtitle {
	font-size: clamp(0.9rem, 2.5vw, 1.05rem);
	font-weight: 300;
	color: var(--ev-soft);
	letter-spacing: 0.05em;
	margin: 0 0 2rem;
}

.evpwt-js .evpco-hero-subtitle {
	opacity: 0;
	animation: evpcoFadeUp 1s ease-out 0.7s forwards;
}

.evpco-hero-ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.evpwt-js .evpco-hero-ctas {
	opacity: 0;
	animation: evpcoFadeUp 1s ease-out 0.9s forwards;
}

/* 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); }

.evpco-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 3.125rem;
	transition: all 0.3s ease;
}

.evpco-btn-outline:hover {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.evpco-scroll {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	z-index: 2;
}

.evpwt-js .evpco-scroll {
	opacity: 0;
	animation: evpcoFadeIn 1s ease-out 1.4s forwards;
}

.evpco-scroll-line {
	display: block;
	width: 1px;
	height: 1.875rem;
	background: linear-gradient(180deg, rgba(212, 196, 168, 0.6), transparent);
	animation: evpcoScrollPulse 2s ease-in-out infinite;
}

.evpco-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
	z-index: 3;
}

.evpco-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	transition: width 0.05s linear;
}

/* ---------- Quick nav ---------- */
.evpco-quick-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(18, 14, 10, 0.97);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--wp--preset--font-family--montserrat);
}

.evpco-quick-nav-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 0.75rem;
}

.evpco-quick-nav-inner::-webkit-scrollbar { display: none; }

.evpco-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.9375rem 0.875rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.evpco-nav-item:hover,
.evpco-nav-item.is-active {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--rust);
}

.evpco-nav-item:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/* ---------- Overview panel ---------- */
.evpco-overview {
	position: relative;
	background: var(--wp--preset--color--bg-deep);
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
}

.evpco-overview-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	position: relative;
	z-index: 2;
}

.evpco-overview-left {
	width: 100%;
	min-width: 0;
}

.evpco-overview-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 0.875rem;
}

.evpco-overview-eyebrow::after {
	content: '';
	flex: 1;
	max-width: 3rem;
	height: 1px;
	background: var(--wp--preset--color--rust);
	opacity: 0.5;
}

.evpco-title-row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 0.625rem;
}

.evpco-flag {
	width: 2.875rem;
	height: 1.875rem;
	object-fit: cover;
	border-radius: 4px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
	flex: 0 0 2.875rem;
	display: block;
}

.evpco-overview-title {
	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;
	margin: 0;
}

.evpco-tagline {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: italic;
	font-size: clamp(0.9rem, 2.5vw, 1.2rem);
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
	line-height: 1.5;
	margin: 0 0 1.375rem 0.125rem;
}

.evpco-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: rgba(255, 255, 255, 0.02);
}

.evpco-stat {
	padding: 0.875rem 0.75rem;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * THESE TWO ARE TWO COLUMN RULES AND HAVE TO SAY SO.
 *
 * Unscoped they applied at every width, and a class plus a
 * pseudo-class outranks the bare .evpco-stat in the min-width 1101px
 * block below, because a media query adds no specificity. So at four
 * columns :nth-child(even) went on suppressing the right border of
 * items 2 and 4. Item 4 is :last-child and wanted none anyway, which
 * is why only one divider was ever visibly missing: the one after
 * Language, between Language and Currency.
 *
 * Scoped to the width the two column grid actually occupies, item 2
 * is the right hand edge at mobile and an interior cell at desktop,
 * and each gets the border that layout calls for. Nothing here
 * changes spacing, sizing or type.
 */
@media (max-width: 1100px) {
	.evpco-stat:nth-child(even) { border-right: none; }
	.evpco-stat:nth-last-child(-n+2) { border-bottom: none; }
}

.evpco-stat-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
	margin-bottom: 0.3125rem;
}

.evpco-stat-value {
	font-size: 0.88rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
}

.evpco-desc {
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 1.5rem;
}

.evpco-desc p { margin: 0 0 1em; }
.evpco-desc p:last-child { margin-bottom: 0; }
.evpco-desc em { color: var(--wp--preset--color--gold-light); font-style: italic; }
.evpco-desc strong { color: var(--wp--preset--color--gold-light); font-weight: 600; }

/*
   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.
*/
.evpco-tiles,
.evplo-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: 0.625rem;
}

.evpco-tile,
.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. */

.evpco-tile:hover,
.evplo-tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 10px 28px rgba(184, 98, 27, 0.3);
}

.evpco-tile:focus-visible,
.evplo-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpco-tile-label,
.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;
	}
}

/* ---------- The column the carousel sits in ---------- */
.evpco-sidebar {
	width: 100%;
	min-width: 0;
}

/* 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; }

/* ---------- Map and gallery ---------- */
.evpco-map-gallery {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #0d0d0d;
	font-family: var(--wp--preset--font-family--montserrat);
	color: #fff;
}

.evpco-map-wrap {
	display: none;
	position: relative;
	background: #0d0d0d;
}

.evpco-leaflet-map {
	width: 100%;
	height: 100%;
}

@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); }
}

.evpco-pulse-marker,
.evpco-loc-marker {
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--rust);
	border: 3px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	animation: evpcoMapPulse 2s ease-out infinite;
}

.evpco-loc-marker {
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
}

.evpco-loc-marker:hover { transform: scale(1.15); }

/* Leaflet gives the divIcon a white box by default. */
.evpco-marker-icon {
	background: transparent;
	border: none;
}

.evpco-map-float {
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	max-width: 16.25rem;
	padding: 1.25rem;
	background: rgba(10, 10, 10, 0.92);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.125rem;
	z-index: 1000;
}

.evpco-map-float-label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 0.375rem;
}

.evpco-map-float-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 0.375rem;
}

.evpco-map-float-coords {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 0.875rem;
}

.evpco-map-float-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

.evpco-map-float-link:hover { color: #fff; }

.evpco-map-float-link svg {
	width: 0.8125rem;
	height: 0.8125rem;
	fill: currentColor;
	flex-shrink: 0;
}

/* Marker tooltip, structured mode */
.evpco-marker-tooltip {
	position: absolute;
	z-index: 1100;
	width: 16.25rem;
	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;
}

.evpco-marker-tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.evpco-marker-tooltip-body { padding: 0.875rem 1rem 0.75rem; }

.evpco-marker-tooltip-eyebrow {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 0.375rem;
}

.evpco-marker-tooltip-name {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.evpco-marker-tooltip-ctas {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.evpco-marker-tooltip-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5625rem 0.75rem;
	background: rgba(184, 98, 27, 0.18);
	border: 1px solid rgba(184, 98, 27, 0.35);
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.evpco-marker-tooltip-cta:hover {
	background: rgba(184, 98, 27, 0.32);
	border-color: rgba(184, 98, 27, 0.6);
}

.evpco-marker-tooltip-cta.is-location {
	background: rgba(212, 196, 168, 0.08);
	border-color: rgba(212, 196, 168, 0.25);
}

.evpco-marker-tooltip-cta.is-location:hover {
	background: rgba(212, 196, 168, 0.15);
	border-color: rgba(212, 196, 168, 0.45);
}

.evpco-marker-tooltip-cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.evpco-marker-tooltip-cta-eyebrow {
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(212, 196, 168, 0.7);
}

.evpco-marker-tooltip-cta-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evpco-marker-tooltip-cta.is-location .evpco-marker-tooltip-cta-label {
	color: var(--wp--preset--color--gold-light);
}

.evpco-marker-tooltip-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;
	margin-left: 0.625rem;
	transition: transform 0.2s ease;
}

.evpco-marker-tooltip-cta.is-location .evpco-marker-tooltip-cta-arrow {
	background: rgba(212, 196, 168, 0.3);
}

.evpco-marker-tooltip-cta:hover .evpco-marker-tooltip-cta-arrow { transform: translateX(2px); }

.evpco-marker-tooltip-cta-arrow svg {
	width: 0.6875rem;
	height: 0.6875rem;
	stroke: #fff;
	fill: none;
	stroke-width: 2.5;
}

.evpco-marker-tooltip-close {
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	width: 1.5rem;
	height: 1.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: none;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.evpco-marker-tooltip-close:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* Gallery */
.evpco-gallery-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 0;
	min-width: 0;
	overflow: hidden;
}

.evpco-gallery {
	position: relative;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0 0.75rem;
}

.evpco-gallery-track-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 0.875rem;
	width: 100%;
}

.evpco-gallery-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	touch-action: pan-x;
}

.evpco-gallery-slide {
	flex: 0 0 100%;
	position: relative;
	aspect-ratio: 3 / 2;
	width: 100%;
	background: #000;
}

.evpco-gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 6s ease;
}

.evpco-gallery-slide.is-active img { transform: scale(1.04); }

.evpco-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem 1.25rem 1.125rem;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
	z-index: 4;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.evpco-gallery-track-wrap:hover .evpco-gallery-caption,
.evpco-gallery-slide.is-active .evpco-gallery-caption {
	opacity: 1;
	pointer-events: auto;
}

.evpco-gallery-caption-title {
	display: block;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 0.375rem;
}

.evpco-gallery-caption-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpco-gallery-caption-meta-sep {
	width: 3px;
	height: 3px;
	background: rgba(212, 196, 168, 0.45);
	border-radius: 50%;
	flex-shrink: 0;
}

.evpco-gallery-caption-meta a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 196, 168, 0.4);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.evpco-gallery-caption-meta a:hover {
	color: #fff;
	border-color: #fff;
}

.evpco-gallery-caption-meta a.evpco-meta-link-tour {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--rust);
}

.evpco-gallery-caption-meta a.evpco-meta-link-tour:hover {
	color: var(--wp--preset--color--gold-light);
	border-bottom-color: var(--wp--preset--color--gold);
}

.evpco-gallery-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.1);
	z-index: 6;
}

.evpco-gallery-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--rust));
	transition: width 0.1s linear;
}

.evpco-gallery-playpause,
.evpco-gallery-expand {
	position: absolute;
	top: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.evpco-gallery-playpause {
	left: 0.75rem;
	border-radius: 50%;
}

.evpco-gallery-expand {
	right: 0.75rem;
	border-radius: 0.5rem;
}

.evpco-gallery-playpause:hover,
.evpco-gallery-expand:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.evpco-gallery-playpause svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.evpco-gallery-expand svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2; fill: none; }

.evpco-gallery-playpause .evpco-icon-play { display: none; }
.evpco-gallery-playpause .evpco-icon-pause { display: block; }
.evpco-gallery-playpause[aria-pressed="true"] .evpco-icon-play { display: block; }
.evpco-gallery-playpause[aria-pressed="true"] .evpco-icon-pause { display: none; }

.evpco-gallery-counter {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	padding: 0.3125rem 0.6875rem;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 1.125rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
	z-index: 5;
}

.evpco-gallery-counter span { color: var(--wp--preset--color--gold); }

.evpco-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background 0.3s ease, transform 0.3s ease;
}

.evpco-gallery-nav:hover {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-50%) scale(1.08);
}

.evpco-gallery-nav:hover svg { stroke: #111010; }

.evpco-gallery-nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.evpco-gallery-nav svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 2.5;
	fill: none;
}

.evpco-gallery-nav.prev { left: 0.625rem; }
.evpco-gallery-nav.next { right: 0.625rem; }

.evpco-mobile-map-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.875rem 0.75rem 0;
	padding: 0.6875rem 1rem;
	background: rgba(184, 98, 27, 0.1);
	border: 1px solid rgba(184, 98, 27, 0.3);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.evpco-mobile-map-link:hover {
	background: rgba(184, 98, 27, 0.22);
	border-color: rgba(184, 98, 27, 0.55);
	color: #fff;
}

.evpco-mobile-map-link svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
	flex-shrink: 0;
}

.evpco-gallery-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0 0.75rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.evpco-gallery-thumbs::-webkit-scrollbar { display: none; }

.evpco-gallery-thumb {
	display: block;
	width: 3.5rem;
	height: 2.5rem;
	min-width: 3.5rem;
	padding: 0;
	border-radius: 0.5rem;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.4;
	border: 2px solid transparent;
	background: #000;
	flex-shrink: 0;
	text-decoration: none;
	transition: opacity 0.4s ease, border-color 0.4s ease;
}

.evpco-gallery-thumb:hover { opacity: 0.75; }

.evpco-gallery-thumb.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--gold);
}

.evpco-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lightbox, fallback mode only */
.evpco-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.96);
	display: none;
	align-items: center;
	justify-content: center;
}

.evpco-lightbox.is-open { display: flex; }

.evpco-lightbox-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evpco-lightbox-img {
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
	transition: opacity 0.3s ease;
}

.evpco-lightbox-caption {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	font-style: italic;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.65);
	text-align: center;
	max-width: 80vw;
	margin: 0;
}

.evpco-lightbox-close,
.evpco-lightbox-prev,
.evpco-lightbox-next {
	position: absolute;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.evpco-lightbox-close {
	top: 1.25rem;
	right: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.125rem;
	line-height: 1;
}

.evpco-lightbox-close:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
}

.evpco-lightbox-prev,
.evpco-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3.25rem;
	height: 3.25rem;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
}

.evpco-lightbox-prev { left: 1.25rem; }
.evpco-lightbox-next { right: 1.25rem; }

.evpco-lightbox-prev:hover,
.evpco-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.5);
}

.evpco-lightbox-prev:disabled,
.evpco-lightbox-next:disabled { opacity: 0.3; }

.evpco-lightbox-prev svg,
.evpco-lightbox-next svg {
	width: 1.375rem;
	height: 1.375rem;
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
	pointer-events: none;
}

.evpco-lightbox-counter {
	position: absolute;
	top: 1.375rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.1em;
}

.evpco-lightbox-counter span { color: #fff; }

/* Leaflet controls. Leaflet's stylesheet is injected at runtime so it
   lands after this file; these win on specificity, not !important. */
.evpco-map-gallery .leaflet-container { background: #0d0d0d; }

.evpco-map-gallery .leaflet-control-zoom.leaflet-bar {
	border: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.evpco-map-gallery .leaflet-control-zoom a.leaflet-control-zoom-in,
.evpco-map-gallery .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);
}

.evpco-map-gallery .leaflet-control-zoom a.leaflet-control-zoom-in:hover,
.evpco-map-gallery .leaflet-control-zoom a.leaflet-control-zoom-out:hover {
	background: var(--wp--preset--color--rust);
}

/* ---------- Reveal utility ---------- */
.evpwt-js .evpco-fade {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.evpco-fade.is-visible {
	opacity: 1;
	transform: translateY(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; }
}

/* ---------- 768 and up ---------- */
@media (min-width: 768px) {
	.evpco-breadcrumbs {
		top: 3.5rem;
		left: 2rem;
		font-size: 0.62rem;
		padding: 0.625rem 1.125rem;
		gap: 0.5rem 0.625rem;
	}
}

/* ---------- 1101 and up: the desktop layout ---------- */
@media (min-width: 1101px) {
	.evpco-hero-content {
		padding: 0 3rem;
		max-width: 68.75rem;
	}

	.evpco-hero-ctas {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.evpco-breadcrumbs {
		top: 4.375rem;
		left: 3rem;
		font-size: 0.66rem;
		padding: 0.6875rem 1.25rem;
		gap: 0.625rem;
	}

	.evpco-quick-nav-inner {
		justify-content: center;
		overflow-x: visible;
		padding: 0 3rem;
	}

	.evpco-nav-item {
		padding: 1.125rem 1.75rem;
		font-size: 0.68rem;
	}

	/*
	 * 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.
	 */
	.evpco-overview-inner,
	.evpto-content {
		display: grid;
		grid-template-columns: 1fr 27.5rem;
		gap: 5rem;
		padding: 5rem 3rem;
		align-items: start;
	}

	.evpco-overview-left { width: auto; }
	.evpco-sidebar { width: auto; }

	.evpco-desc { font-size: 1.05rem; margin-bottom: 2.25rem; }
	.evplo-desc { font-size: 1.05rem; margin-bottom: 2.25rem; }
	.evpco-tagline { font-size: 1.2rem; margin-bottom: 1.875rem; }

	.evpco-stats {
		grid-template-columns: repeat(4, 1fr);
		margin-bottom: 2rem;
	}

	.evpco-stat {
		border-bottom: none;
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		padding: 1.25rem 1rem;
	}

	.evpco-stat:last-child { border-right: none; }

	/* Roomier minimum with the space to spare. Still auto-fit, because
	   the number of tiles depends on what the destination actually
	   has: anywhere from one to three. */
	.evpco-tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
	.evpco-tile { padding: 1.375rem 0.75rem; min-height: 4.875rem; border-radius: 0.875rem; }
	.evpco-tile-label { font-size: 0.7rem; }

	.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; }

	.evpco-map-gallery { flex-direction: row; min-height: 40.625rem; }

	.evpco-map-wrap {
		display: block;
		flex: 0 0 40%;
		max-width: 40%;
		min-height: 40.625rem;
	}

	.evpco-gallery-wrap {
		flex: 0 0 60%;
		max-width: 60%;
		padding: 2.5rem 0;
		justify-content: center;
	}

	.evpco-gallery { padding: 0 3.125rem; }
	.evpco-gallery-slide { aspect-ratio: 16 / 10; }
	.evpco-gallery-nav.prev { left: 3.4375rem; }
	.evpco-gallery-nav.next { right: 3.4375rem; }

	.evpco-gallery-thumbs { gap: 0.75rem; margin-top: 1.125rem; padding: 0 3.125rem; }
	.evpco-gallery-thumb { width: 5.5rem; height: 3.625rem; min-width: 5.5rem; border-radius: 0.625rem; }

	.evpco-mobile-map-link { display: none; }

	.evpco-lightbox-prev { left: 1.75rem; }
	.evpco-lightbox-next { right: 1.75rem; }
}

/* ---------- 1400 and up ---------- */
@media (min-width: 1400px) {
	.evpco-map-gallery { min-height: 46.875rem; }
	.evpco-map-wrap { min-height: 46.875rem; }
	.evpco-gallery { padding: 0 3.75rem; }
	.evpco-gallery-nav.prev { left: 4.0625rem; }
	.evpco-gallery-nav.next { right: 4.0625rem; }
	.evpco-gallery-thumb { width: 6.75rem; height: 4.375rem; min-width: 6.75rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.evpco-gallery-track,
	.evpco-gallery-slide img,
	.evpco-marker-tooltip,
	.evpco-tile,
	.evplo-tile,
	.evpco-tour-card,
	.evpco-btn-primary {
		transition: none;
	}

	.evpwt-js .evpco-fade { transition: none; opacity: 1; transform: none; }

	.evpwt-js .evpco-breadcrumbs,
	.evpwt-js .evpco-hero-badge,
	.evpwt-js .evpco-hero-title,
	.evpwt-js .evpco-hero-subtitle,
	.evpwt-js .evpco-hero-ctas,
	.evpwt-js .evpco-scroll {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.evpco-scroll-line,
	.evpco-pulse-marker,
	.evpco-loc-marker {
		animation: none;
	}

	.evpco-slide { transition: none; }
	.evpco-scroll { transform: translateX(-50%); }
}

/* ==================================================================
   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: italic;
}

.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: italic;
}

/* ---------- 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

   Converted from salvage/destination-page/06-stories-editorial.html.
   Removed on the way in: 311 !important, every one of them there only
   because the reference scoped each rule to a uniqid id, and the
   width:100vw / margin-left:calc(-50vw + 50%) full bleed hack.

   No JS. The section is static, and content that needs script to
   appear is content a crawler may never see.
   ================================================================== */
.evpds {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 37.5rem;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--bg-deep);
}

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

/* The featured story's hero image, as the section ground. */
.evpds-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.evpds-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.evpds-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(17, 16, 16, 0.55) 0%,
			rgba(17, 16, 16, 0.30) 30%,
			rgba(17, 16, 16, 0.45) 70%,
			rgba(17, 16, 16, 0.88) 100%),
		linear-gradient(90deg,
			rgba(17, 16, 16, 0.75) 0%,
			rgba(17, 16, 16, 0.25) 55%,
			rgba(17, 16, 16, 0.55) 100%);
	pointer-events: none;
}

.evpds-header {
	position: relative;
	z-index: 2;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.875rem, 5vw, 5rem) 0;
}

.evpds-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--gold);
	margin: 0 0 1rem;
}

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

.evpds-heading {
	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;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.evpds-heading em {
	color: var(--wp--preset--color--rust);
	font-style: italic;
}

.evpds-content {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.875rem, 4vw, 3.125rem) clamp(1.875rem, 5vw, 5rem) clamp(2.5rem, 5vw, 3.75rem);
}

/* ---------- Featured story ---------- */
.evpds-featured {
	flex: 1;
	min-width: 0;
	max-width: 37.5rem;
}

.evpds-cat {
	display: inline-block;
	padding: 0.375rem 1rem;
	background: var(--wp--preset--color--rust);
	color: #fff;
	border-radius: 1.25rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.evpds-feat-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 0.875rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.evpds-feat-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.evpds-feat-title a:hover { color: var(--wp--preset--color--gold); }

.evpds-feat-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1rem;
}

.evpds-feat-meta time,
.evpds-feat-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
}

.evpds-feat-meta svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: var(--wp--preset--color--gold);
	fill: none;
	flex-shrink: 0;
	opacity: 0.8;
}

.evpds-feat-excerpt {
	font-size: 0.92rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 1.75rem;
	max-width: 34rem;
}

/* Shared button spec. */
.evpds-feat-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: 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;
}

.evpds-feat-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;
}

.evpds-feat-cta:hover::before { opacity: 1; }

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

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

.evpds-feat-cta svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

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

/* ---------- Sidebar list ---------- */
.evpds-sidebar {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.evpds-sidebar-label {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 0.375rem;
}

.evpds-sidebar-card {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.625rem;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.875rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.evpds-sidebar-card:hover {
	background: rgba(0, 0, 0, 0.6);
	border-color: rgba(212, 196, 168, 0.3);
	transform: translateX(3px);
}

.evpds-sidebar-thumb {
	display: block;
	width: 4rem;
	height: 4rem;
	border-radius: 0.625rem;
	overflow: hidden;
	flex-shrink: 0;
	background: #000;
}

.evpds-sidebar-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.evpds-sidebar-card:hover .evpds-sidebar-thumb img { transform: scale(1.1); }

.evpds-sidebar-info {
	display: block;
	flex: 1;
	min-width: 0;
}

.evpds-sidebar-card-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 0.375rem;
	/* Two lines, then ellipsis. Titles here run long. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.evpds-sidebar-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evpds-sidebar-card-cat { color: var(--wp--preset--color--gold); }

.evpds-sidebar-arrow {
	width: 1rem;
	height: 1rem;
	stroke: rgba(255, 255, 255, 0.35);
	fill: none;
	flex-shrink: 0;
	transition: stroke 0.25s ease, transform 0.25s ease;
}

.evpds-sidebar-card:hover .evpds-sidebar-arrow {
	stroke: var(--wp--preset--color--gold);
	transform: translateX(2px);
}

.evpds-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.375rem;
	padding: 0.625rem 0.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	align-self: flex-start;
	transition: color 0.25s ease;
}

.evpds-all:hover { color: #fff; }

.evpds-all svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.evpds-all:hover svg { transform: translateX(3px); }

.evpds-feat-cta:focus-visible,
.evpds-feat-title a:focus-visible,
.evpds-sidebar-card:focus-visible,
.evpds-all:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- 1024 and up: featured beside the list ---------- */
@media (min-width: 1024px) {
	.evpds-content {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: clamp(2.5rem, 6vw, 6.25rem);
	}

	.evpds-sidebar {
		width: 24rem;
		flex-shrink: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpds-sidebar-card,
	.evpds-sidebar-thumb img,
	.evpds-sidebar-arrow,
	.evpds-feat-cta,
	.evpds-feat-cta svg,
	.evpds-all,
	.evpds-all svg {
		transition: none;
	}

	.evpds-sidebar-card:hover,
	.evpds-feat-cta:hover { transform: none; }

	.evpds-sidebar-card:hover .evpds-sidebar-thumb 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: italic;
}

/* ---------- 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; }
}

/* ==================================================================
   DESTINATION PAGE: WHEN TO GO
   parts/section-when-to-go.php + assets/js/when-to-go.js

   Converted from salvage/destination-page/05-when-to-go.html, minus
   its location carousel. That per-location seasonality was dropped in
   favour of country level data, so the loc-card rules are not here.

   Removed on the way in: the uniqid prefix on every selector and the
   !important that came with it, and the 100vw hack.
   ================================================================== */
.evpwtg {
	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);
}

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

.evpwtg-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 3rem;
}

.evpwtg-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 ---------- */
.evpwtg-header { margin-bottom: 2.5rem; }

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

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

.evpwtg-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;
}

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

.evpwtg-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 0 1.25rem;
}

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

.evpwtg-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;
}

/* ---------- Month timeline ---------- */
.evpwtg-timeline { margin-bottom: 2rem; }

.evpwtg-months {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.evpwtg-months::-webkit-scrollbar { display: none; }

.evpwtg-month {
	flex: 1 1 0;
	min-width: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 0.5rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 196, 168, 0.1);
	border-radius: 0.75rem;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.evpwtg-month:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(212, 196, 168, 0.28);
	color: #fff;
	transform: translateY(-2px);
}

.evpwtg-month.is-active {
	background: rgba(184, 98, 27, 0.18);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

/* A month with no row is inert but still occupies its slot, so the
   strip is twelve wide on every destination. */
.evpwtg-month.is-empty {
	opacity: 0.3;
	cursor: default;
}

.evpwtg-month-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.evpwtg-month[data-rating="peak"] .evpwtg-month-dot {
	background: var(--ev-season-peak);
	box-shadow: 0 0 6px rgba(184, 98, 27, 0.55);
}

.evpwtg-month[data-rating="great"]      .evpwtg-month-dot { background: var(--ev-season-great); }
.evpwtg-month[data-rating="good"]       .evpwtg-month-dot { background: var(--ev-season-good); }
.evpwtg-month[data-rating="shoulder"]   .evpwtg-month-dot { background: var(--ev-season-shoulder); }
.evpwtg-month[data-rating="off_season"] .evpwtg-month-dot { background: var(--ev-season-off); }

.evpwtg-swipe-hint {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
}

.evpwtg-swipe-hint svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Showcase panel ---------- */
.evpwtg-showcase {
	position: relative;
	overflow: hidden;
	padding: 2.25rem 2rem 2rem;
	background: linear-gradient(145deg, rgba(12, 8, 5, 0.97) 0%, rgba(28, 22, 16, 0.97) 100%);
	border: 1px solid rgba(212, 196, 168, 0.12);
	border-radius: 1.25rem;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.evpwtg-showcase:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* The photograph, when the month has one. Optional by design: a
   destination can ship twelve images, borrow from its gallery, or have
   neither and let the ghosted abbreviation carry the panel. */
.evpwtg-showcase-img {
	position: relative;
	margin: -2.25rem -2rem 1.5rem;
	height: 14rem;
	overflow: hidden;
	background: #000;
}

/* Slides, not one picture. The month's panel rotates through every
   location sitting at the month's top rating, cross fading on opacity
   the way the tour overview carousel does. One location at that rating
   means one slide and nothing moves. */
.evpwtg-showcase-slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.evpwtg-showcase-slide.is-active {
	opacity: 1;
}

.evpwtg-showcase-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 8, 5, 0.25) 0%, rgba(12, 8, 5, 0.85) 100%);
	pointer-events: none;
}

/* Without a photograph the ghosted abbreviation is the panel's only
   visual anchor, so it sits large and top right. With one it steps
   back out of the way. */
.evpwtg-showcase-month-bg {
	position: absolute;
	top: -1.5rem;
	right: 1rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(6rem, 16vw, 12rem);
	font-weight: 400;
	line-height: 1;
	color: rgba(212, 196, 168, 0.05);
	pointer-events: none;
	user-select: none;
}

.evpwtg-showcase-content {
	position: relative;
	z-index: 1;
}

.evpwtg-showcase-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 0.875rem;
}

.evpwtg-showcase-month {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.1;
	color: #fff;
	margin: 0;
}

.evpwtg-showcase-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.75rem;
	border-radius: 3.125rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ev-season-off);
}

.evpwtg-showcase-badge svg {
	width: 0.625rem;
	height: 0.625rem;
	fill: currentColor;
	flex-shrink: 0;
}

.evpwtg-showcase-badge--peak       { background: var(--ev-season-peak); }
.evpwtg-showcase-badge--great      { background: var(--ev-season-great); color: #1a1000; }
.evpwtg-showcase-badge--good       { background: var(--ev-season-good); }
.evpwtg-showcase-badge--shoulder   { background: var(--ev-season-shoulder); }
.evpwtg-showcase-badge--off_season { background: var(--ev-season-off); }

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

.evpwtg-locations-label {
	margin: 0 0 1.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/*
   The location cards. These are the capture's, restored: the first
   build of this section dropped them because the destination carried
   its own seasonality and there was nothing per location to show.

   IT DOES PAGE, and the note that used to sit here saying it did not
   was wrong. Three cards fit at desktop width and a month can list
   twelve, so a plain scroll-snap track with a hidden scrollbar left
   everything past the third unreachable: no arrows, no dots, nothing
   to drag. Guyana shipped that way and its September panel offered
   five places and showed two and a half.

   Restored from the capture, which had the whole thing: arrows that
   hide at the ends rather than sitting there disabled, dots that
   rebuild when the month changes, and a page count that follows the
   breakpoint. See assets/js/when-to-go.js.
*/
.evpwtg-carousel {
	position: relative;
}

/*
   Inset rather than hung outside the track. The capture put these at
   left/right -23px, which works inside Elementor's padded column and
   would hang off the viewport here, where the showcase content has no
   horizontal padding of its own at 360.
*/
.evpwtg-arrow {
	position: absolute;
	top: calc(50% - 1.5rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	padding: 0;
	font: inherit;
	color: var(--wp--preset--color--gold);
	background: rgba(20, 18, 16, 0.82);
	border: 1px solid rgba(212, 196, 168, 0.15);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.evpwtg-arrow--prev {
	left: 0.5rem;
}

.evpwtg-arrow--next {
	right: 0.5rem;
}

.evpwtg-arrow svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.evpwtg-arrow:hover {
	background: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

/*
   Hidden, not disabled. A disabled control at the end of a strip is
   still a tab stop that does nothing; this one leaves the tab order.
*/
.evpwtg-arrow.is-hidden {
	display: none;
}

.evpwtg-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
	margin-top: 0.5rem;
}

/*
   The visible dot is 0.5rem and the button around it is 2.75rem, which
   is the touch target. Same treatment as .destpg-dot on this page, so
   the two carousels on one screen do not disagree. Wrapping matters:
   one dot per page and a page of one card on a phone means a month
   with twelve places is twelve dots.
*/
.evpwtg-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	margin: 0;
	font: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(184, 98, 27, 0.3);
}

.evpwtg-dot::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	background: rgba(212, 196, 168, 0.2);
	border-radius: 50%;
	transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.evpwtg-dot:hover::before {
	background: rgba(212, 196, 168, 0.4);
}

.evpwtg-dot.is-active::before {
	width: 1.5rem;
	background: var(--wp--preset--color--rust);
	border-radius: 0.25rem;
}

.evpwtg-arrow:focus-visible,
.evpwtg-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpwtg-loc-track {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0.25rem 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.evpwtg-loc-track::-webkit-scrollbar {
	display: none;
}

.evpwtg-loc-item {
	display: flex;
	flex: 0 0 calc((100% - 2.5rem) / 3);
	max-width: calc((100% - 2.5rem) / 3);
	scroll-snap-align: start;
}

.evpwtg-loc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 1.125rem;
	background: rgba(255, 255, 255, 0.03);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
}

.evpwtg-loc-card:hover {
	border-color: rgba(212, 196, 168, 0.3);
	transform: translateY(-0.25rem);
}

/* One link over the whole card, and the only one in it. */
.evpwtg-loc-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.evpwtg-loc-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evpwtg-loc-img {
	flex-shrink: 0;
	height: 10.625rem;
	overflow: hidden;
	background: #0d0d0d;
}

.evpwtg-loc-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evpwtg-loc-card:hover .evpwtg-loc-img img {
	transform: scale(1.05);
}

.evpwtg-loc-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.375rem;
}

.evpwtg-loc-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.evpwtg-loc-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
}

/* The card's own rating, which is the one that is actually about this
   place. It borrows the showcase badge colours so the country badge
   above and the location badges below cannot drift apart. */
.evpwtg-loc-badge {
	flex-shrink: 0;
	padding: 0.2rem 0.55rem;
	border-radius: 3.125rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.evpwtg-loc-season {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ev-rust-text);
}

.evpwtg-loc-season svg {
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
}

.evpwtg-loc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 0.75rem;
}

.evpwtg-loc-weather {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
}

.evpwtg-loc-weather svg {
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
}

/* Two lines. Season descriptions are 35 to 50 words by the content
   rules, which is a paragraph, and this is a card. */
.evpwtg-loc-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 0.875rem;
	font-size: 0.8rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
}

.evpwtg-loc-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.evpwtg-loc-more svg {
	width: 0.85rem;
	height: 0.85rem;
	transition: transform 0.25s ease;
}

.evpwtg-loc-card:hover .evpwtg-loc-more svg {
	transform: translateX(0.2rem);
}

/* ---------- Location cards: breakpoints ---------- */
@media (max-width: 1024px) {
	.evpwtg-loc-item {
		flex: 0 0 calc((100% - 1.25rem) / 2);
		max-width: calc((100% - 1.25rem) / 2);
	}
}

@media (max-width: 768px) {
	.evpwtg-loc-item {
		flex: 0 0 78%;
		max-width: 78%;
	}
}

@media (max-width: 480px) {
	.evpwtg-loc-item {
		flex: 0 0 88%;
		max-width: 88%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpwtg-loc-card,
	.evpwtg-loc-img img,
	.evpwtg-loc-more svg {
		transition: none;
	}

	.evpwtg-loc-card:hover,
	.evpwtg-loc-card:hover .evpwtg-loc-img img,
	.evpwtg-loc-card:hover .evpwtg-loc-more svg {
		transform: none;
	}

	.evpwtg-loc-track {
		scroll-behavior: auto;
	}

	.evpwtg-arrow,
	.evpwtg-dot::before {
		transition: none;
	}
}

@media (prefers-contrast: more) {
	.evpwtg-loc-card {
		border-color: #fff;
	}

	.evpwtg-loc-desc,
	.evpwtg-loc-weather,
	.evpwtg-locations-label {
		color: #fff;
	}
}

/* ---------- Legend ---------- */
.evpwtg-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1rem 1.5rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(212, 196, 168, 0.06);
	border-radius: 0.75rem;
}

.evpwtg-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.evpwtg-legend-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.evpwtg-legend-dot--peak {
	background: var(--ev-season-peak);
	box-shadow: 0 0 6px rgba(184, 98, 27, 0.5);
}

.evpwtg-legend-dot--great      { background: var(--ev-season-great); }
.evpwtg-legend-dot--good       { background: var(--ev-season-good); }
.evpwtg-legend-dot--shoulder   { background: var(--ev-season-shoulder); }
.evpwtg-legend-dot--off_season { background: var(--ev-season-off); }

.evpwtg-month:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---------- 1024 and up: the image becomes a column ---------- */
@media (min-width: 1024px) {
	/*
	 * THE PANEL'S OWN PADDING IS WHY THE PICTURE SAT INSET.
	 * This used to zero padding-left only, so the grid's content box
	 * still started 2.25rem below the panel's top edge and ended 2rem
	 * above its bottom. height: 100% then filled a track that was
	 * already short, and the panel showed above and below the image.
	 * The capture pads the content, not the panel, and so does this now:
	 * the panel keeps only its right padding and the text column carries
	 * the vertical rhythm.
	 */
	.evpwtg-showcase--has-image {
		display: grid;
		grid-template-columns: 42% 1fr;
		gap: 2.25rem;
		align-items: stretch;
		padding: 0 2rem 0 0;
	}

	/*
	 * THE FADE IS A MASK, NOT A GRADIENT OVERLAY.
	 * The capture faded the image's right edge into a flat --card-bg
	 * with an ::after. This panel's background is a 145deg gradient
	 * rather than a flat colour, so any literal an overlay faded to
	 * would match at one point down the edge and seam everywhere else.
	 * Masking the column instead lets the panel's real background show
	 * through the fade, which cannot disagree with itself.
	 *
	 * 75% is the owner's "roughly a quarter of the image column",
	 * expressed as a share of the column so it holds at every width.
	 * The capture's 80px was about an eighth of it.
	 */
	.evpwtg-showcase--has-image .evpwtg-showcase-img {
		margin: 0;
		height: 100%;
		min-height: 20rem;
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 75%, transparent 100%);
		mask-image: linear-gradient(to right, #000 0, #000 75%, transparent 100%);
	}

	.evpwtg-showcase--has-image .evpwtg-showcase-img::after {
		background: linear-gradient(90deg, rgba(12, 8, 5, 0.15) 0%, rgba(12, 8, 5, 0.55) 100%);
	}

	/* The vertical padding the panel gave up, so the text keeps the
	   rhythm it had while the picture runs edge to edge. */
	.evpwtg-showcase--has-image .evpwtg-showcase-content {
		padding: 2.25rem 0 2rem;
	}

	.evpwtg-showcase--has-image .evpwtg-showcase-month-bg {
		top: -1rem;
		right: 1.5rem;
		font-size: clamp(5rem, 9vw, 8rem);
	}
}

@media (max-width: 1200px) {
	.evpwtg-inner { padding: 0 1.5rem; }
}

@media (max-width: 768px) {
	.evpwtg { padding: 3.5rem 0 3.5rem; }
	.evpwtg-inner { padding: 0 1.25rem; }

	/* The strip scrolls rather than squeezing twelve months into a
	   phone width. */
	.evpwtg-month {
		flex: 0 0 4.25rem;
		min-width: 4.25rem;
	}

	.evpwtg-swipe-hint { display: flex; }

	.evpwtg-showcase { padding: 1.75rem 1.25rem 1.5rem; }
	.evpwtg-showcase-img { margin: -1.75rem -1.25rem 1.25rem; height: 11rem; }
	.evpwtg-showcase-month-bg { top: -1rem; right: 0.5rem; }
	.evpwtg-legend { gap: 0.875rem; padding: 0.875rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.evpwtg-month { transition: none; }
	.evpwtg-month:hover:not(:disabled) { transform: none; }
	.evpwt-js .evpwtg-header { transition: none; opacity: 1; transform: none; }

	/* The script does not rotate at all here, so this is only belt and
	   braces for the one swap it still makes: dropping a slide whose
	   file is missing and promoting the next. */
	.evpwtg-showcase-slide { transition: 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;
}

.evpth-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
}

.evpth-breadcrumbs a {
	color: rgba(255, 255, 255, 0.7);
	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.28);
}

.evpth-breadcrumbs-current {
	color: var(--wp--preset--color--gold);
}

.evpth-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.875rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	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);
}

.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;
}

.evpth-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.5rem, 4.6vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
}

.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);
}

.evpth-stats {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0 0 1.375rem;
}

.evpth-stat-label {
	margin-bottom: 0.3125rem;
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}

.evpth-stat-value {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evpth-stat-value s {
	margin-right: 0.375rem;
	font-size: 0.75em;
	color: rgba(255, 255, 255, 0.35);
}

.evpth-stat-divider {
	flex-shrink: 0;
	width: 1px;
	height: 2.125rem;
	background: linear-gradient(180deg, transparent, rgba(212, 196, 168, 0.45), transparent);
}

.evpth-subtitle {
	max-width: 27.5rem;
	margin: 0 0 2.375rem;
	font-size: clamp(0.88rem, 1.4vw, 1rem);
	font-weight: 300;
	line-height: 1.78;
	color: var(--ev-soft);
}

.evpth-cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.evpth-cta-row {
	display: flex;
	gap: 0.75rem;
}

.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: 1;
	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-secondary {
	flex: 1;
	border: 0.09375rem solid rgba(255, 255, 255, 0.28);
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
}

.evpth-btn-secondary:hover {
	border-color: rgba(212, 196, 168, 0.65);
	background: rgba(212, 196, 168, 0.06);
	color: var(--wp--preset--color--gold-light);
}

.evpth-btn-secondary svg {
	fill: rgba(255, 255, 255, 0.7);
}

.evpth-btn-secondary:hover svg {
	fill: var(--wp--preset--color--gold-light);
}

.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;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--bg-deep) 0%,
		rgba(17, 16, 16, 0.88) 4%,
		rgba(17, 16, 16, 0.28) 14%,
		rgba(17, 16, 16, 0.05) 26%,
		transparent 38%
	);
}

.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);
}

.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-stats,
	.evpth-subtitle,
	.evpth-cta {
		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-stats    { animation-delay: 0.65s; }
	.evpth-subtitle { animation-delay: 0.75s; }
	.evpth-cta      { animation-delay: 0.9s; }
}

@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;
	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: italic;
	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; }
}

.evptd-carousel-wrap {
	position: relative;
	padding: 1rem 0 1.5rem;
}

/*
 * STAYS AT 1.25rem. The arrows overlap the cards at the two edges, which
 * looks like a bug and is not: the header alignment rule further down
 * this file records that this carousel is deliberately full bleed
 * "because its edge fades are what signal that it scrolls", and that the
 * header sitting inboard of the first card is the same relationship it
 * has to the section edges everywhere else on the page. Widening this to
 * clear the arrows was tried and reverted; it aligned the first card and
 * silently undid that decision, and it cannot fix the right hand side
 * anyway, because padding does not clip an overflowing track. The arrows
 * float over the fades, which is where they are meant to be.
 */
.evptd-carousel {
	position: relative;
	padding: 0 1.25rem;
	overflow: hidden;
}

.evptd-carousel:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

.evptd-track {
	display: flex;
	gap: 1.125rem;
	align-items: stretch;
	transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* With three or fewer cards there is nothing to scroll to, so the
   track centres rather than sitting hard left. */
.evptd-carousel--few .evptd-track {
	flex-wrap: wrap;
	justify-content: center;
}

/* Edge fades, driven by the same two facts as the arrows. */
.evptd-carousel::before,
.evptd-carousel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	width: 2.5rem;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.evptd-carousel::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--bg-deep), transparent);
	opacity: 0;
}

.evptd-carousel.has-prev::before {
	opacity: 1;
}

.evptd-carousel::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--bg-deep), transparent);
	opacity: 1;
}

.evptd-carousel.at-end::after,
.evptd-carousel--few::after {
	opacity: 0;
}

/*
 * VISIBLE ENOUGH TO FIND, NOT LOUD ENOUGH TO SHOUT.
 *
 * At rest this was a 0.25 alpha hairline on a 0.72 alpha ground, which
 * composites to #423d36 on the section's #111010: 1.77:1, below the 3:1
 * that a control's own outline needs to be made out, and easy to scroll
 * straight past on a section that is the main reason to keep scrolling.
 *
 * The target is 3:1 rather than a guess, and it is not louder than the
 * site either: of the eight carousel arrows in this file the range at
 * rest runs 1.35:1 to 3.21:1, so this lands at the top of a range the
 * house already uses rather than outside it. The ring does the work, the
 * ground stays dark and the chevron stays gold, so it is still an
 * outlined control and not a filled button. Rust is held back for hover,
 * where it already was.
 *
 * 3rem rather than 2.75rem also takes the tap target past the 44px
 * minimum with room to spare, which is the same problem on a phone.
 */
.evptd-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(212, 196, 168, 0.45);
	border-radius: 50%;
	background: rgba(24, 21, 18, 0.92);
	color: var(--wp--preset--color--gold);
	/* The same lit top edge the highlight cards use, so the control reads
	   as sitting above them rather than printed on them. */
	box-shadow: inset 0 1px 0 rgba(212, 196, 168, 0.12), 0 0.375rem 1rem rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease,
		box-shadow 0.3s ease;
}

.evptd-arrow.prev { left: 0.5rem; }
.evptd-arrow.next { right: 0.5rem; }

.evptd-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evptd-arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--rust);
	background: var(--wp--preset--color--rust);
	color: #fff;
}

/*
 * The previous arrow is disabled at load, which is the state most
 * readers will ever see it in. At 0.28 it was invisible, so the control
 * read as one lone arrow with nothing to pair it with. Raised enough
 * that the pair is legible as a pair, and still plainly the inactive
 * half of it.
 */
.evptd-arrow:disabled {
	opacity: 0.45;
	box-shadow: none;
	cursor: default;
}

.evptd-arrow:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evptd-card {
	/*
	 * Opaque, and named, because the picture now fades into the body
	 * below it: a gradient can only dissolve that seam if it ends on
	 * exactly the colour the body is, and it cannot end on a
	 * translucent one without the last of the photograph showing
	 * through. rgba(30, 25, 20, 0.95) over this section's #111010
	 * composites to #1d1914, so this is the same colour to look at as
	 * the translucent value it replaces.
	 *
	 * The zero alpha twin is written out rather than using the keyword
	 * transparent, which is rgba(0, 0, 0, 0) and drags the midpoint of
	 * the gradient towards grey.
	 */
	--evptd-card-bg: #1d1914;
	--evptd-card-bg-0: rgba(29, 25, 20, 0);

	position: relative;
	display: flex;
	flex: 0 0 17.5rem;
	flex-direction: column;
	min-width: 17.5rem;
	max-width: 17.5rem;
	border: 1px solid rgba(212, 196, 168, 0.16);
	border-radius: 1.25rem;
	background: var(--evptd-card-bg);
	/*
	 * A BLACK DROP SHADOW ON A NEAR BLACK SECTION DOES NOTHING. The card
	 * was #1d1914 on #111010, a four percent lift, with a black shadow
	 * under it, so it read as a smudge rather than an object. The inset
	 * hairline along the top edge is what separates it: a lit edge is how
	 * a raised surface reads on a dark ground, where a shadow cannot.
	 */
	box-shadow: inset 0 1px 0 rgba(212, 196, 168, 0.08), 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.evptd-card:hover {
	border-color: rgba(184, 98, 27, 0.45);
	box-shadow: inset 0 1px 0 rgba(212, 196, 168, 0.14), 0 1.5rem 4rem rgba(184, 98, 27, 0.25);
	transform: translateY(-0.375rem);
}

.evptd-card-img {
	position: relative;
	flex-shrink: 0;
	height: 16.25rem;
	overflow: hidden;
	background: #0d0d0d;
}

.evptd-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.evptd-card:hover .evptd-card-img img {
	transform: scale(1.04);
}

/* The picture dissolves into the body instead of stopping at a line.
   The last stop is the card's own colour, which is what removes the
   seam: below this the body is that same flat colour, so there is no
   edge left to see. It sits inside the image box, so the hover scale
   happens under it and the gradient does not move. */
.evptd-card-img::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 58%;
	background: linear-gradient(
		180deg,
		var(--evptd-card-bg-0) 0%,
		rgba(29, 25, 20, 0.62) 52%,
		var(--evptd-card-bg) 100%
	);
	pointer-events: none;
}

.evptd-card-body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1.25rem 1.375rem;
	text-align: center;
}

/*
 * THE TEXT ONLY CARD IS THE CARD. highlight_image exists on the field
 * group and not one of the 296 highlight rows across all 32 tours sets
 * it, so this is not a fallback for a missing picture, it is what this
 * section is. It was being treated as the degraded case: a centred line
 * of serif floating in a 9rem box, five of which in a row read as empty
 * panels rather than as the moments that sell the trip.
 *
 * THE FIX IS AN ANCHOR, NOT AN ORNAMENT. Headings here run from 7 to 78
 * characters, median 40, so with the text centred every card put its
 * words in a different place and the row had no line to read along.
 * Anchoring the rule and the heading to the bottom left gives every card
 * the same edge whatever its length, which is what makes a row of uneven
 * phrases look composed. The rule itself is the house eyebrow bar, the
 * same 1.75rem by 0.09375rem rust it is everywhere else on this site.
 *
 * The layered ground is scoped here rather than to .evptd-card because
 * --evptd-card-bg has a job on the picture card: the gradient that
 * dissolves the photograph into the body has to end on exactly the
 * colour the body is, and it cannot do that against a gradient. A card
 * with a picture keeps the flat colour and keeps working.
 */
.evptd-card--textonly {
	background:
		radial-gradient(120% 95% at 0% 100%, rgba(184, 98, 27, 0.17), rgba(184, 98, 27, 0) 62%),
		linear-gradient(160deg, #241f19 0%, #17130f 100%);
}

.evptd-card--textonly:hover {
	background:
		radial-gradient(120% 95% at 0% 100%, rgba(184, 98, 27, 0.28), rgba(184, 98, 27, 0) 66%),
		linear-gradient(160deg, #2a241d 0%, #17130f 100%);
}

.evptd-card--textonly .evptd-card-body {
	min-height: 13rem;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 1.5rem;
	text-align: left;
}

.evptd-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	/* Centred text wraps better split evenly than ragged. */
	text-wrap: balance;
}

.evptd-card--textonly .evptd-card-title {
	font-size: clamp(1.2rem, 1.45vw, 1.38rem);
	line-height: 1.28;
}

.evptd-card--textonly .evptd-card-title::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	margin-bottom: 0.875rem;
	background: var(--wp--preset--color--rust);
	transition: width 0.4s ease;
}

.evptd-card--textonly:hover .evptd-card-title::before {
	width: 3rem;
}

/* ---------- Tour overview ---------- */

.evpto {
	position: relative;
	display: block;
	overflow: hidden;
	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.
	 */
	margin: 0;
	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;
}

.evpto-subtitle {
	/* .evpco-tagline. */
	margin: 0 0 1.375rem 0.125rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: italic;
	font-size: clamp(0.9rem, 2.5vw, 1.2rem);
	line-height: 1.5;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
}

.evpto-stats {
	/* .evpco-stats. */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: rgba(255, 255, 255, 0.02);
}

.evpto-stat {
	/*
	 * .evpco-stat, plus the position and the transition this one needs
	 * for its on-sale state, which a destination stat has no equivalent
	 * of and so cannot supply.
	 */
	position: relative;
	padding: 0.875rem 0.75rem;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.3s ease;
}

.evpto-stat:hover {
	background: rgba(212, 196, 168, 0.04);
}

.evpto-stat:nth-child(even) {
	border-right: none;
}

.evpto-stat:nth-last-child(-n + 2) {
	border-bottom: none;
}

.evpto-stat.on-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-stat-label {
	/* .evpco-stat-label. */
	margin-bottom: 0.3125rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}

.evpto-stat-value {
	/* .evpco-stat-value. */
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.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;
	gap: 0.5rem;
}

.evpto-sale-price-new {
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.2;
	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.56em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.evpto-sale-price-was {
	display: block;
	margin-top: 0.0625rem;
	font-size: 0.75em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: line-through;
}

/*
 * .evpto-body and .evpto-body--has-carousel are gone. They were a grid
 * inside a single column, which is the thing this section stopped
 * doing: the outer .evpto-content is the grid now, exactly as
 * .evpco-overview-inner is on a destination.
 */

/*
   THE DESKTOP STEP, which was missing. The capture carries a
   min-width: 1101px block over these base rules and without it the
   section stops at its tablet appearance on every screen:

     the stats bar stays the 2x2 its base rule builds, instead of
     becoming a single row of four with vertical rules between
     the image column stays at its base 480px and 56px gap instead of
     stepping up to 540px and 64px, which is why it reads narrow
     the standfirst stays at its base size

   1101 rather than 1100 or 1024 because that is the capture's own
   number, and the base rules below it are correct as they are.
*/
@media (min-width: 1101px) {
	.evpto-stats {
		grid-template-columns: repeat(4, 1fr);
		margin-bottom: 2.25rem;
	}

	.evpto-stat {
		padding: 1.25rem 1rem;
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: none;
	}

	/*
	   The base rules strip the right border on every even cell and the
	   bottom border on the last two, which is what a 2x2 needs. In one
	   row only the last cell loses its right border, so both have to be
	   put back before that is applied.
	*/
	.evpto-stat:nth-child(even) {
		border-right: 1px solid rgba(255, 255, 255, 0.08);
	}

	.evpto-stat:nth-last-child(-n + 2) {
		border-bottom: none;
	}

	.evpto-stat:last-child {
		border-right: none;
	}


}

.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.
	 */
	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-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 1024 ---------- */

@media (max-width: 1024px) {
}

/* ---------- 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;
	}

	.evpth-media::before {
		background: linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.2) 0%,
			rgba(10, 10, 10, 0.18) 28%,
			rgba(10, 10, 10, 0.55) 52%,
			rgba(10, 10, 10, 0.84) 72%,
			rgba(10, 10, 10, 0.97) 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;
	}

	/* Auto margins split the free space so the title block floats
	   centred while the stats and buttons anchor to the bottom. */
	.evpth-eyebrow {
		justify-content: center;
		margin-top: auto;
		margin-bottom: 0.75rem;
		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;
	}

	.evpth-title {
		margin-bottom: 0.875rem;
		font-size: clamp(2.6rem, 10vw, 3.9rem);
		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);
	}

	/* Frosted pill bar, so labels stay readable over any photograph. */
	.evpth-stats {
		width: 100%;
		max-width: 25rem;
		gap: 0;
		margin: auto 0 1rem;
		padding: 0;
		border: 1px solid rgba(212, 196, 168, 0.16);
		border-radius: 0.875rem;
		background: rgba(10, 10, 10, 0.5);
		-webkit-backdrop-filter: blur(1rem);
		backdrop-filter: blur(1rem);
		align-items: stretch;
		justify-content: center;
		overflow: hidden;
	}

	.evpth-stat {
		flex: 1;
		padding: 0.8125rem 0.625rem;
		text-align: center;
	}

	.evpth-stat-label {
		margin-bottom: 0.25rem;
		font-size: 0.5rem;
		letter-spacing: 0.17em;
	}

	.evpth-stat-value {
		font-size: 1.08rem;
	}

	.evpth-stat-divider {
		width: 1px;
		height: auto;
		margin: 0.625rem 0;
		align-self: stretch;
		background: rgba(212, 196, 168, 0.16);
	}

	/* Recovers the vertical room the stats bar takes. */
	.evpth-subtitle {
		display: none;
	}

	.evpth-cta {
		width: 100%;
		max-width: 25rem;
		gap: 0.625rem;
	}

	.evpth-btn-primary {
		width: 100%;
		flex: none;
		min-height: 3.25rem;
		padding: 0.9375rem 1.5rem;
		font-size: 0.72rem;
		letter-spacing: 0.16em;
	}

	.evpth-btn-secondary {
		flex: 1;
		min-width: 0;
		min-height: 3rem;
		padding: 0.8125rem 0.625rem;
		font-size: 0.65rem;
		letter-spacing: 0.12em;
	}

	.evpth-btn-secondary svg {
		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. */

	.evptd-card {
		flex: 0 0 82vw;
		min-width: 82vw;
		max-width: 82vw;
	}

	.evptd-card-img {
		height: 13.125rem;
	}

	.evpto-content {
		padding: 3.5rem 1.25rem;
	}

	.evpto-stats {
		grid-template-columns: 1fr;
	}

	.evpto-stat {
		border-right: none;
	}

	.evpto-stat:nth-last-child(-n + 2) {
		border-bottom: 1px solid rgba(212, 196, 168, 0.08);
	}

	.evpto-stat:last-child {
		border-bottom: none;
	}

	.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));
	}

	.evpth-title {
		font-size: clamp(2.4rem, 11.5vw, 3.4rem);
	}

	.evpth-stat-label {
		font-size: 0.46rem;
		letter-spacing: 0.13em;
	}

	.evpth-stat-value {
		font-size: 0.95rem;
	}

	.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-track,
	.evptd-card,
	.evptd-card-img img,
	/* The rule under the heading grows on hover, so it belongs here with
	   the rest. The card still changes, it just changes at once. */
	.evptd-card--textonly .evptd-card-title::before,
	.evpto-cta-btn {
		transition: none;
	}

	.evpth-btn:hover,
	.evpto-cta-btn:hover,
	.evptd-card: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;
}

.evptp-body {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/*
   THE PRICE CARD AND THE RATES SIT SIDE BY SIDE. The card was capped
   at 22rem and left in normal flow, so it stood alone against half a
   page of empty background with the rate table stacked below it. The
   capture has them as one grid, auto and 1fr: the card takes the width
   it needs and the table takes the rest.

   Only when both exist. A tour with no group_rates has no second
   column to fill, and a lone card in a 1fr track would stretch to the
   full page width, so the grid is declared on the pair rather than on
   the container.
*/
.evptp-showcase-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
	margin-bottom: 2rem;
}

.evptp-showcase {
	min-width: 17.5rem;
	max-width: 22rem;
	margin-bottom: 2rem;
	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%);
}

/* Inside the grid the gap does the spacing. */
.evptp-showcase-grid .evptp-showcase,
.evptp-showcase-grid .evptp-rates {
	margin-bottom: 0;
}

/* The quiet half of price_basis, under the figure. */
.evptp-showcase-note {
	/* Capture: card-note margin-bottom 22px, card-divider 18px. */
	margin: 0.25rem 0 1.375rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

.evptp-showcase-divider {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 0 1.125rem;
	background: linear-gradient(90deg, rgba(212, 196, 168, 0.2), transparent);
}

/*
   The notes cell is two lines: a static basis label, then the row's
   own note beneath it.
*/
.evptp-rate-notes {
	line-height: 1.45;
}

.evptp-rate-basis {
	display: block;
}

.evptp-showcase.is-on-sale {
	border-top: 2px solid var(--ev-sale-gold);
}

.evptp-showcase-label {
	margin: 0 0 0.625rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}

.evptp-showcase-amount {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.evptp-showcase.is-on-sale .evptp-showcase-amount {
	color: var(--ev-sale-gold);
}

.evptp-symbol {
	margin-right: 0.125rem;
	font-size: 0.5em;
	vertical-align: 0.55em;
}

.evptp-showcase-was {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0.625rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
}

.evptp-showcase-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;
}

.evptp-showcase-stats {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
}

.evptp-showcase-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.375rem 0;
}

/* Capture: 0.58rem, 700, 0.12em, uppercase, --muted. */
.evptp-showcase-stat dt {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* Capture: Playfair Display, 1rem, 500. It is a figure, not a label. */
.evptp-showcase-stat dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
}

.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;
}

/* Wide tables scroll inside their own box rather than the page. */
/*
   No outer border and no radius. The capture's table is
   border-collapse: collapse with border: none and border-spacing: 0,
   and the only rule on it is the border-bottom under each row. The box
   this used to draw around the whole thing was not in the design.
*/
.evptp-table-wrap {
	overflow-x: auto;
}

.evptp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.evptp-table th,
.evptp-table td {
	padding: 0.875rem 1.125rem;
	text-align: left;
	border-bottom: 1px solid rgba(212, 196, 168, 0.08);
}

.evptp-table thead th {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.evptp-table tbody th {
	font-weight: 500;
	color: #fff;
}

.evptp-table tbody tr:last-child th,
.evptp-table tbody tr:last-child td {
	border-bottom: none;
}

.evptp-rate-price {
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
	white-space: nowrap;
}


/*
   ONE COLUMN BELOW 768. The capture has no rule for this, because
   Elementor was stacking the columns for it. Card first, rates under
   it: the figure is the answer to "how much", and the table is the
   detail behind it. The card drops its width cap so it does not sit
   as a narrow box against a full width table.
*/
@media (max-width: 768px) {
	.evptp-showcase-grid {
		grid-template-columns: 1fr;
	}

	.evptp-showcase-grid .evptp-showcase {
		min-width: 0;
		max-width: none;
	}
}

/*
 * THE TWIN OFFER, under the rate table.
 *
 * Sized and coloured between the body copy and .evptp-footnote below, so it
 * reads as a real offer rather than as small print. max-width holds the line
 * length where the rates column is wide; at 768px the section's existing grid
 * collapse gives it the full width and no media query of its own is needed.
 *
 * The lead phrase is display block so the bold half leads its own line, the
 * same treatment .evptp-rate-size gives a label in white above its note.
 */
.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;
}

/*
 * Underlined rather than given an icon: the brief rules out icons, and colour
 * alone is not enough to mark a link.
 */
.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);
}

.evptp-footnotes {
	margin: 1.75rem 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;
}

.evptp-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(212, 196, 168, 0.12);
}

.evptp-cta-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.35rem;
	color: #fff;
}

.evptp-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-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;
}

/* ---------- 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-showcase {
		max-width: none;
	}

	.evptp-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.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: 4rem;

	/*
	 * The two offsets the itinerary reads for its sticky map column and
	 * its mobile day nav. Both clear the header and the bar together.
	 * 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));
}

.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: center;
	justify-content: center;
	gap: 0.5rem;
	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;
}

.evptt-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.6875rem 1.625rem;
	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.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.evptt-tab:hover {
	border-color: rgba(212, 196, 168, 0.32);
	background: rgba(212, 196, 168, 0.09);
	color: #fff;
}

.evptt-tab:active {
	transform: scale(0.97);
}

.evptt-tab.is-selected,
.evptt-tab[aria-selected="true"] {
	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);
}

.evptt-tab.is-selected:hover,
.evptt-tab[aria-selected="true"]:hover {
	border-color: #c97224;
	background: linear-gradient(135deg, #c97224 0%, #a85a18 100%);
}

.evptt-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.evptt-panel:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/*
 * 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, with a fade on the right to say so.
 *
 * 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 five pills stop fitting
 * in the bar, not a layout step.
 */
@media (max-width: 900px) {
	.evptt-bar {
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
	}

	.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: 3.625rem;
	}

	.evptt-bar-inner {
		gap: 0.375rem;
		padding: 0 1rem;
	}

	.evptt-tab {
		min-height: 2.375rem;
		padding: 0.625rem 1.125rem;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}
}

@media (max-width: 480px) {
	.evptt {
		--ev-header-h: 4rem;
		--ev-tab-bar-h: 3.5rem;
	}

	.evptt-bar-inner {
		gap: 0.3125rem;
		padding: 0 0.75rem;
	}

	.evptt-tab {
		min-height: 2.25rem;
		padding: 0.5625rem 0.9375rem;
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evptt-tab {
		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: italic;
	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;
}

.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; }

.evpti-gallery-image {
	position: relative;
	display: block;
	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 gives: 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) {
	.evptt-tab {
		padding: 0.9375rem 0.75rem;
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}

	/* 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. */
.evptg-item {
	position: relative;
	display: block;
	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;
}

/*
 * BOOKING MOVES UP A TIER, TO THE ONE THE ITINERARY ALREADY USES.
 *
 * There are three title scales on a tour page: clamp(2rem, 4vw, 3rem)
 * on the standard sections, clamp(2.4rem, 5vw, 3.75rem) on the
 * itinerary, and clamp(2.8rem, 5.5vw, 4.4rem) on Tour Highlights. At
 * 1440 that is 48, 60 and 70px. Book Your Adventure was on the first
 * and sat two tiers below the headers either side of it, in the one
 * section on the page that asks the reader to do something.
 *
 * It takes the itinerary's tier rather than the Highlights one, which
 * stays the single showpiece. Declared on its own rather than by adding
 * this selector to the shared rule above, because that rule is also
 * what keeps What's Included, Pricing, Places and the FAQ agreeing with
 * each other, and they should not move.
 */
.evptb-title {
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	line-height: 1.05;
}

.evptc-title em,
.evptp-title em,
.evptb-title em,
.evptl-title em,
.evptf-title em {
	font-style: italic;
	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: italic;
	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;
	}

	.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: italic;
	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
   sit on this same destination page and are identical to each other and
   to .evpds: an eyebrow left aligned with ONE rule before it, a Playfair
   title with a rust italic accent, and a quiet descriptor beneath.

   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: italic;
}

/* .evpwtg-descriptor to the value, including the measure. */
.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: italic;
	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-sub {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.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-modal-note {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.45);
}

.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);
}

/* ================================================
   THINGS TO DO: THE CATEGORY MOSAIC

   Six photographic tiles that each open a panel of experiences beneath
   their own row. It replaces the experiences carousel on a destination
   that has ttd_categories rows; every other destination and every
   location keeps the carousel, so nothing here may touch .evpbt.

   Every colour is an existing token or an existing rgba from this file.
   The mockup carried its own --bg, --sand and --rust; those are mapped
   onto the real tokens here rather than reintroduced.

   TILES AND PANELS ARE SIBLINGS IN ONE GRID, and a panel is placed by
   order rather than by moving the DOM. A tile takes order i*2 and an
   open panel takes the order of the last tile in its row plus one, so
   it lands under that row and pushes the rows below it down. See
   assets/js/destination-ttd.js.
   ================================================ */

.evttd {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

/* ---------- The tiles ---------- */

.evttd-tile {
	position: relative;
	display: block;
	/*
	 * The 2 column tablet band declares no height of its own and inherits
	 * this, so it scales with the desktop figure rather than needing a
	 * third number to keep in step.
	 */
	height: 16.5rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.875rem;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/*
 * A CATEGORY WITH NO PHOTOGRAPH IS A QUIET SURFACE, NOT A PLACEHOLDER
 * PICTURE. Same rgba white as the lodge trigger, so it reads as the same
 * material as the rest of the page rather than as a missing image. This
 * is how the section ships until the photographs are added.
 */
.evttd-tile--noimg {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(212, 196, 168, 0.2);
}

/*
 * AND IT IS LAID OUT AS A CARD, NOT AS AN EMPTY PHOTO FRAME.
 *
 * The base tile is 16.5rem tall with its text absolutely positioned at the
 * bottom, over the scrim. That is right over a photograph and wrong without
 * one: measured at 1440 it left about 200px of empty black above a 20.8px
 * title, which is why the categories read as faint labels stranded in boxes.
 *
 * Here the count and the text return to normal flow and the height becomes a
 * minimum, so the card is as tall as it needs to be and the grid keeps the
 * row even. The photographed tile above is untouched.
 */
.evttd-tile--noimg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	height: auto;
	min-height: 11rem;
	padding: 1.25rem 1.375rem;
}

.evttd-tile--noimg .evttd-tile-count {
	position: static;
	order: -1;
	margin-bottom: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.evttd-tile--noimg .evttd-tile-text {
	position: static;
	padding: 0;
}

/*
 * The house rule, above the category name. .evpbt-eyebrow::before draws the
 * same 1.75rem by 0.09375rem rust bar above every section heading on this
 * page, so a category wearing it reads as part of the same family.
 */
.evttd-tile--noimg .evttd-tile-title::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	margin-bottom: 0.875rem;
	background: var(--wp--preset--color--rust);
}

.evttd-tile-media {
	position: absolute;
	inset: 0;
}

.evttd-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.evttd-tile:hover .evttd-tile-img {
	transform: scale(1.04);
}

/*
 * The scrim, and it is what carries the contrast. At the bottom, where the
 * title and blurb sit, it is 0.92 of the page's own near black, so white
 * text clears AA over a bright photograph and not only over a dark one.
 * Checked against a light image rather than against the mockup's gradients.
 */
.evttd-tile-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(17, 16, 16, 0.92),
		rgba(17, 16, 16, 0.25) 60%,
		rgba(17, 16, 16, 0.05)
	);
}

.evttd-tile-text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.125rem;
}

.evttd-tile-title {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.4rem, 1.9vw, 1.6rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evttd-tile-blurb {
	display: block;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--wp--preset--color--gold);
}

.evttd-tile-count {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	padding: 0.25rem 0.5625rem;
	border-radius: 3.125rem;
	background: rgba(17, 16, 16, 0.7);
	font-size: 0.7rem;
	color: #fff;
}

.evttd-tile:hover {
	border-color: rgba(184, 98, 27, 0.4);
}

.evttd-tile[aria-expanded="true"] {
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 1px var(--wp--preset--color--rust);
}

.evttd-tile:focus-visible,
.evttd-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------- The panel ---------- */

/*
 * hidden has to be said explicitly. The UA sheet's [hidden] rule is a
 * display: none that a display declaration on the same element overrides,
 * and this element is a grid, so without this a closed panel would stay on
 * screen for everybody with JavaScript.
 */
.evttd-panel[hidden] {
	display: none;
}

/*
 * THE PANEL READS AS THE OPEN TILE'S PANEL. It carried the same faint gold
 * hairline and the same surface as the tiles, so an open panel looked like
 * another tile that happened to be wide. The rust border is the one the open
 * tile wears, and the darker ground puts the panel behind the tiles rather
 * than alongside them.
 */
.evttd-panel {
	grid-column: 1 / -1;
	padding: 1.5rem 1.5rem 0.5rem;
	border: 1px solid rgba(184, 98, 27, 0.3);
	border-radius: 0.875rem;
	background: rgba(255, 255, 255, 0.02);
	animation: evttdOpen 0.35s ease;
}

@keyframes evttdOpen {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.evttd-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid rgba(212, 196, 168, 0.12);
}

.evttd-panel-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.evttd-close {
	flex: 0 0 auto;
	padding: 0.375rem 0.75rem;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 3.125rem;
	background: none;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.74rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.evttd-close:hover,
.evttd-close:focus-visible {
	border-color: var(--wp--preset--color--rust);
	color: #fff;
}

.evttd-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.125rem;
	margin: 0;
	padding: 0.375rem 0 1rem;
	list-style: none;
}

.evttd-item {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.evttd-item-media {
	display: block;
	overflow: hidden;
	border: 1px solid rgba(212, 196, 168, 0.14);
	border-radius: 0.625rem;
}

.evttd-item-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * THE ACTIVITY HEADER, WHICH WAS THE WEAKEST THING IN THE SECTION. It was
 * 16.8px against a 13.12px description, both at weight 400, which is a step
 * of 1.28: a panel of thirty-one of them read as one block of prose rather
 * than as thirty-one cards. It is now 1.2rem with the house rust rule above
 * it, so the eye lands on every title before it reads any of the text.
 */
.evttd-item-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.22;
	color: #fff;
}

.evttd-item-title::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 0.09375rem;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--rust);
}

.evttd-item-desc {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

/*
 * AN EXPERIENCE WITH NO PHOTOGRAPH DROPS THE PICTURE SPACE ENTIRELY and
 * keeps its text. A hairline above it does the separating the image used
 * to do, so a panel of text-only cards still reads as a set of cards
 * rather than as one block of prose. This is the state the whole section
 * ships in.
 */
/*
 * The near invisible hairline this used to draw is now the rust rule above
 * the title, which separates the cards and marks the heading in one device
 * instead of doing neither well.
 */
.evttd-item--noimg {
	padding-top: 0;
	border-top: 0;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1000px) {
	.evttd-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.evttd {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.evttd {
		grid-template-columns: 1fr;
	}

	.evttd-tile {
		height: 11rem;
	}

	.evttd-panel {
		padding: 1.125rem 1rem 0.25rem;
	}

	/*
	 * A CATEGORY OF EIGHT MUST NOT BECOME AN ENDLESS SCROLL, so on a phone
	 * an experience is a row: a small picture on the left and the text
	 * beside it, rather than a full width photograph above every card.
	 */
	.evttd-list {
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}

	.evttd-item {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 0.75rem;
		align-items: start;
	}

	/*
	 * Beside a picture the rule would sit in the narrow text column and read
	 * as a stray dash, so the photographed row keeps the title alone. The
	 * text-only row, which is every row today, keeps it.
	 */
	.evttd-item:not(.evttd-item--noimg) .evttd-item-title::before {
		display: none;
	}

	.evttd-item-media {
		grid-row: 1 / 3;
	}

	/* With no picture there is no left column to align against. */
	.evttd-item--noimg {
		display: block;
	}

	/*
	 * display: block drops the flex gap with it, so the title and its
	 * description butted together. The larger title made that visible;
	 * the spacing was already missing.
	 */
	.evttd-item--noimg .evttd-item-title {
		margin-bottom: 0.5rem;
	}
}

/*
 * REDUCED MOTION REMOVES THE MOTION RATHER THAN SHORTENING IT. The panel
 * appears with no animation, the tile picture does not move on hover, and
 * the state transitions are instant. What stays is every colour and border
 * change, so the open tile is still obviously the open one.
 */
@media (prefers-reduced-motion: reduce) {
	.evttd-panel {
		animation: none;
	}

	.evttd-tile,
	.evttd-tile-img,
	.evttd-close {
		transition: none;
	}

	.evttd-tile:hover .evttd-tile-img {
		transform: none;
	}
}

/* ================================================
   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-modal-note,
	.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. .evpts 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: italic;
	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;
}

/* ---------- 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: italic;
	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;
	}

	.evpsd-book-btn {
		width: auto;
		margin-left: auto;
	}

	.evpsd-toggle {
		margin-left: 0;
	}

	.evpsd-filterbar {
		position: static;
	}
}

@media (max-width: 480px) {
	.evpsd-card-aside {
		flex-direction: column;
		align-items: stretch;
	}

	.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: italic;
	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: italic;
	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: italic;
	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: italic;
	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: italic;
	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%);
}

.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 ---------- */

.evb-share {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--evb-line);
	background: #fff;
	padding: 1.125rem 0;
}

.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 ---------- */

.evb-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18.75rem;
	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;
}

.evb-article,
.evp-prose {
	min-width: 0;
	font-size: 1.02rem;
	line-height: 1.85;
	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);
}

.evb-article p,
.evp-prose p {
	margin: 0 0 1.375rem;
}

.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;
}

.evb-article ul,
.evb-article ol,
.evp-prose ul,
.evp-prose ol {
	margin: 0 0 1.375rem;
	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)); }

.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: italic;
	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 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	margin-top: 0.375rem;
}

.evb-book-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);
}

.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. */
	.evb-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.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: italic;
	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: italic;
	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: italic;
	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: italic;
	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: italic;
	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: anywhere;
}

/* 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: anywhere;
}

.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: italic;
	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);
}

.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: italic;
	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: italic;
	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: italic;
	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: italic;
	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: italic;
	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: italic;
}

.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: italic;
}

.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.
   ========================================================================== */

.evpco-hero,
.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. */
.evpco-hero-bg,
.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.
   -------------------------------------------------------------------------- */
.evpco-hero-identity,
.evplo-hero-identity {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
}

.evpco-hero-identity-text,
.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;
}

.evpco-hero-globe,
.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;
}

.evpco-hero-globe[data-ready] .evpco-globe-canvas,
.evplo-hero-globe[data-ready] .evpco-globe-canvas {
	opacity: 1;
}

@media (min-width: 1200px) {

	.evpco-hero-globe,
	.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.
   -------------------------------------------------------------------------- */
.evpco-hero::before,
.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%);
}

.evpco-hero::after,
.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.
   -------------------------------------------------------------------------- */
.evpco-hero-bg::before,
.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.
 */
.evpco-hero-bg::after,
.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%
	);
}

.evpco-hero-content,
.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.
   -------------------------------------------------------------------------- */
.evpco-breadcrumbs,
.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);
}

.evpco-breadcrumbs a,
.evplo-crumbs a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.evpco-breadcrumbs a:hover,
.evplo-crumbs a:hover {
	color: var(--wp--preset--color--gold);
}

.evpco-breadcrumbs a:focus-visible,
.evplo-crumbs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.evpco-breadcrumbs-sep,
.evplo-crumbs-sep {
	color: rgba(255, 255, 255, 0.28);
	font-size: 1em;
	line-height: 1;
}

.evpco-breadcrumbs-current,
.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.
   -------------------------------------------------------------------------- */
.evpco-hero-badge,
.evplo-hero-badge,
.evpco-hero-title,
.evplo-hero-title,
.evpco-hero-subtitle,
.evplo-hero-subtitle {
	margin: 0;
}

.evpco-hero-badge,
.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);
}

.evpco-hero-badge-line,
.evplo-hero-badge-line {
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 0.09375rem;
	background: var(--wp--preset--color--rust);
	opacity: 1;
}

/* The destination wraps its eyebrow text in a span of its own; the
   location does not. Both inherit the block above either way. */
.evpco-hero-badge-text {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.evpco-hero-title,
.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;
}

.evpco-hero-subtitle,
.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. */
.evpco-hero-rule,
.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.
   -------------------------------------------------------------------------- */
.evpco-hero-ctas,
.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;
}

.evpco-hero-ctas > .evpco-btn-primary,
.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.
   -------------------------------------------------------------------------- */
.evpco-hero-ctas > a,
.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;
}

.evpco-hero-ctas > .evpco-btn-primary,
.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);
}

.evpco-hero-ctas > .evpco-btn-primary::before,
.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;
}

.evpco-hero-ctas > .evpco-btn-primary:hover::before,
.evplo-hero-ctas > .evplo-btn--primary:hover::before {
	opacity: 1;
}

.evpco-hero-ctas > .evpco-btn-primary:hover,
.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. */
.evpco-hero-ctas > .evpco-btn-primary > *,
.evplo-hero-ctas > .evplo-btn--primary > * {
	position: relative;
	z-index: 1;
}

.evpco-hero-ctas > .evpco-btn-primary svg,
.evplo-hero-ctas > .evplo-btn--primary svg {
	width: 1rem;
	height: 1rem;
	fill: #fff;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.evpco-hero-ctas > .evpco-btn-primary:hover svg,
.evplo-hero-ctas > .evplo-btn--primary:hover svg {
	transform: translateX(3px);
}

.evpco-hero-ctas > .evpco-btn-outline,
.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;
}

.evpco-hero-ctas > .evpco-btn-outline:hover,
.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;
}

.evpco-hero-ctas > a:focus-visible,
.evplo-hero-ctas > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.evpco-hero-ctas > a,
	.evplo-hero-ctas > a,
	.evpco-hero-ctas > .evpco-btn-primary svg,
	.evplo-hero-ctas > .evplo-btn--primary svg {
		transition: none;
	}

	.evpco-hero-ctas > .evpco-btn-primary:hover,
	.evplo-hero-ctas > .evplo-btn--primary:hover {
		transform: none;
	}

	.evpco-hero-ctas > .evpco-btn-primary:hover svg,
	.evplo-hero-ctas > .evplo-btn--primary:hover svg {
		transform: none;
	}
}

/* The scroll cue belongs to the text panel, not the middle of the page. */
.evpco-scroll,
.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) {

	.evpco-hero,
	.evplo-hero {
		display: block;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
		overflow: hidden;
	}

	.evpco-hero-bg,
	.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.
	   -------------------------------------------------------------- */
	.evpco-hero-bg::before,
	.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.
	 */
	.evpco-hero-bg::after,
	.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.
	 */
	.evpco-hero::before,
	.evplo-hero::before {
		display: none;
	}

	.evpco-hero-content,
	.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.
	 */

	.evpco-scroll,
	.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.
	 */
	.evpco-hero-ctas,
	.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) {

	.evpco-hero-ctas,
	.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
   -------------------------------------------------------------------------- */

.evpco-tiles,
.evplo-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: 0.625rem;
}

.evpco-tile,
.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;
}

.evpco-tile-img,
.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;
}

.evpco-tile-scrim,
.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%
	);
}

.evpco-tile-label,
.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;
}

.evpco-tile-label::after,
.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;
}

.evpco-tile:hover,
.evplo-tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 10px 28px rgba(184, 98, 27, 0.3);
}

.evpco-tile:hover .evpco-tile-img,
.evplo-tile:hover .evplo-tile-img {
	transform: scale(1.06);
	opacity: 1;
}

.evpco-tile:hover .evpco-tile-label::after,
.evplo-tile:hover .evplo-tile-label::after {
	width: 3rem;
}

.evpco-tile:focus-visible,
.evplo-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (min-width: 1101px) {
	.evpco-tiles,
	.evplo-tiles {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: 0.75rem;
	}
	.evpco-tile,
	.evplo-tile {
		min-height: 9.5rem;
		border-radius: 0.875rem;
	}
	.evpco-tile-label,
	.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.
   -------------------------------------------------------------------------- */

.evpco-overview--media,
.evplo-overview--media,
.evpto--media {
	overflow: hidden;
}

.evpco-ovmedia,
.evplo-ovmedia,
.evpto-ovmedia {
	display: none;
}

.evpco-ovmedia-img,
.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. */
.evpco-ovmedia-img.is-active,
.evplo-ovmedia-img.is-active,
.evpto-ovmedia-img.is-active {
	opacity: 1;
}

.evpco-ovmedia::after,
.evplo-ovmedia::after,
.evpto-ovmedia::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 1101px) {
	.evpco-overview--media .evpco-overview-inner,
	.evplo-overview--media .evplo-overview-inner,
	.evpto--media .evpto-content {
		grid-template-columns: minmax(0, 1fr);
		min-height: 34rem;
		align-content: center;
	}

	.evpco-overview--media .evpco-overview-left,
	.evplo-overview--media .evplo-overview-left,
	.evpto--media .evpto-left {
		max-width: 41rem;
	}

	.evpco-ovmedia,
	.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. */
	.evpco-ovmedia::after,
	.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) {
	.evpco-ovmedia,
	.evplo-ovmedia,
	.evpto-ovmedia {
		width: 50%;
	}
	.evpco-overview--media .evpco-overview-left,
	.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) {
	.evpco-ovmedia--mobile,
	.evplo-ovmedia--mobile,
	.evpto-ovmedia--mobile {
		display: block;
		position: relative;
		height: 15rem;
		margin: 1.5rem -1rem -3rem;
	}
	.evpco-ovmedia--mobile::after,
	.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) {
	.evpco-ovmedia--mobile,
	.evplo-ovmedia--mobile,
	.evpto-ovmedia--mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpco-tile,
	.evplo-tile,
	.evpco-tile-img,
	.evplo-tile-img,
	.evpco-tile-label::after,
	.evplo-tile-label::after,
	.evpco-ovmedia-img,
	.evplo-ovmedia-img,
	.evpto-ovmedia-img {
		transition: none;
	}
	.evpco-tile:hover,
	.evplo-tile:hover {
		transform: none;
	}
	.evpco-tile:hover .evpco-tile-img,
	.evplo-tile:hover .evplo-tile-img {
		transform: none;
	}
}

/* ==========================================================================
   Destination hero: optional video
   ==========================================================================

   The video lies in the same box as .evpco-slide and is measured the same
   way, because it is standing in for exactly that: the poster still is
   rendered underneath it as a single slide, and the two have to land on
   the same pixels or the swap shows as a jump when the first frame paints.
   object-position matches .evpco-slide's center 30% for the same reason.

   No z-index here on purpose. .evpco-slide sets none either, so the two
   sit in one layer and document order decides, which is why the template
   prints the video after the stills rather than before them. Giving this
   a z-index would put it above .evpco-hero-bg::before and ::after as
   well, and those two gradients are what make the panel text readable.
   ========================================================================== */

.evpco-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	margin: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
}

/*
 * THE POSTER STILL IS THE FALLBACK, AND IT IS ALREADY THERE.
 *
 * Hiding the video is the whole of it: the single .evpco-slide behind it
 * is the poster, so what is left is a static hero that looks like every
 * other destination. Nothing rotates, because the template gave the
 * slideshow one slide and it stops at fewer than two.
 *
 * 1100px is this file's own breakpoint, shared with the map, and it
 * matches BREAKPOINT in assets/js/country-overview.js. The heroes on the
 * home and about pages answer to 1024px; they are a different layout and
 * they can keep it.
 *
 * Both of these also run in JavaScript, where the element is removed
 * rather than hidden so no bytes are spent on it. This is here so the
 * fallback holds while that script is still loading, and if it never
 * loads at all.
 */
@media (max-width: 1100px) {
	.evpco-hero-video {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evpco-hero-video {
		display: 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;
}

/* Which tier's rates the table below is showing, said plainly next to
   the heading rather than left to be inferred from the selector 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;
}

@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 deposit, and the rate table as a matrix
   ==================================================================

   The rate table sits under a Playfair heading and beside a price card
   with a real gradient, a hairline border and a 3.25rem figure in the
   display face. Plain rows with one border colour did not hold up next
   to either, so the treatment here gives the table the same materials:
   the gold eyebrow for column heads, the gold-light for figures, the
   same hairline family for rules, and one tinted band to separate a
   season column from its neighbour.

   Every colour is an existing token or an existing rgba from this file.
   Nothing new is invented.
   ================================================================== */

/* ---------- The deposit, in the price card ---------- */

.evptp-deposit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.375rem;
}

.evptp-deposit-label {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: 0.7;
}

/* Deliberately a long way short of the headline figure. The price is the
   3.25rem Playfair above; this is a secondary fact and reads as one. */
.evptp-deposit-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;
}

.evptp-deposit-note {
	max-width: 26rem;
	margin: 0 0 1.375rem;
	font-size: 0.72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- The matrix table ---------- */

.evptp-table--matrix {
	/* Digits in a price column have to line up, and the season columns
	   are compared against each other down the page. */
	font-variant-numeric: tabular-nums;
}

/* The group size column carries the label and its note, so it needs room
   the price columns do not. Everything else shares what is left. */
.evptp-table--matrix th[scope="row"] {
	width: 40%;
	min-width: 9rem;
	vertical-align: top;
}

.evptp-rate-size {
	display: block;
	font-weight: 500;
	color: #fff;
}

/*
 * The note used to be its own column, where "Per person sharing"
 * repeated on all four rows of a season pair and held a whole column
 * open to say one thing. It belongs to the row label, so it sits under
 * it, muted and smaller than the figure it is qualifying.
 */
.evptp-rate-note {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.45;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
}

/* A season column head. Wraps rather than forcing a scroll, because
   "Low season (Jan to Jun)" on one line is wider than the price under
   it needs and the table is narrow enough already. */
.evptp-table--matrix .evptp-col-season {
	white-space: normal;
	line-height: 1.4;
}

.evptp-table--matrix td {
	vertical-align: top;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-light);
}

/*
 * A faint band on every second season column, so a row of three or four
 * figures can be read across without the eye losing its line. nth-child
 * counts from the row label, so 3 and 5 are the second and fourth
 * seasons.
 */
.evptp-table--matrix td:nth-child(3),
.evptp-table--matrix thead th:nth-child(3),
.evptp-table--matrix td:nth-child(5),
.evptp-table--matrix thead th:nth-child(5) {
	background: rgba(255, 255, 255, 0.022);
}

/* On request is an answer, not a missing figure, so it is legible but
   quieter than a number and does not borrow the gold. */
.evptp-rate-request {
	font-size: 0.8rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

/* A size that is simply not offered in one season. A rule for the eye,
   with real words beside it for a screen reader. */
.evptp-rate-none {
	color: rgba(255, 255, 255, 0.28);
}

/* ---------- The comparison, now full width below ---------- */

.evptp-compare {
	margin-top: 2.5rem;
}

@media (max-width: 768px) {
	/*
	 * THE TABLE STAYS A TABLE, AND SCROLLS INSIDE ITS OWN BOX.
	 *
	 * At 390px a label column plus two season columns is about 21rem,
	 * which fits. Three or more seasons will not, and .evptp-table-wrap
	 * already carries overflow-x: auto so the overflow is the table's and
	 * never the page body's.
	 *
	 * Not rebuilt as stacked cards on small screens. The whole point of
	 * the redesign is reading one party size across the seasons on one
	 * line, and cards put each season back on its own line, which is the
	 * layout this replaced.
	 */
	.evptp-table--matrix {
		font-size: 0.8125rem;
	}

	.evptp-table--matrix th,
	.evptp-table--matrix td {
		padding: 0.75rem 0.75rem;
	}

	.evptp-table--matrix th[scope="row"] {
		width: auto;
		min-width: 7.5rem;
	}

	.evptp-table--matrix td {
		font-size: 0.9375rem;
	}

	.evptp-deposit-amount {
		font-size: 1.25rem;
	}
}

/* ================================================
   TOUR STYLE SECTION, FULL BLEED
   parts/section-destination-tour-types.php
   assets/js/destination-tour-types.js

   Edge to edge above the tours carousel on a destination selling more than
   one style of trip. One column per style; the active one widens and reveals
   its text while the section's background crossfades to that style's picture.

   NOTHING BREAKS OUT OF ANYTHING. Five section banners in this file record
   the same decision: 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. body has no max-width and the sections are its direct
   children, so full bleed is the absence of a container, not a trick. There
   are no 100vw declarations here for the same reason: 100vw includes the
   scrollbar, which is what caused that overflow.

   ONE SET OF IMAGES, TWO LAYOUTS. .evpts-col-media is absolutely positioned
   in both, and what changes is which ancestor it resolves against: the
   column is position static on the hover layout, so the image covers the
   whole section, and position relative in the carousel, so it covers its own
   slide. That is what keeps this to one image per style rather than two.

   THE WIDENING IS flex-grow, NOT width, so growing one column shrinks the
   others by exactly as much and nothing can overlap or overflow at any
   viewport.
   ================================================ */

.evpts {
	position: relative;
	display: block;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	color: #fff;
	/* The ground a style with no photograph shows. Never a placeholder. */
	background: var(--wp--preset--color--bg-deep);
	/*
	 * THE SPACE ABOVE IS THE HOUSE SECTION RHYTHM. Every other section on
	 * this page opens with padding: 4.5rem 0 4rem, so 4.5rem is the gap a
	 * section leaves above itself. The section above this one is the country
	 * overview, which ends on its gallery and has no bottom spacing of its
	 * own, so without this the columns butt straight into it.
	 *
	 * A MARGIN, NOT PADDING, because this section declares its own height and
	 * box-sizing is border-box globally: padding here would come out of the
	 * columns rather than sitting above them.
	 */
	margin-top: 4.5rem;
	/*
	 * THE FIXED HEADER IS SUBTRACTED, from the token that already owns its
	 * height: --ev-header-h is 5rem, stepping to 4.375rem and then 4rem at
	 * the same breakpoints the header itself steps at, so this follows it
	 * rather than guessing. The pattern is the theme's own, from the
	 * itinerary map: height: min(100%, calc(100vh - var(--ev-header-h))).
	 *
	 * vh first, then svh where it is supported: on iOS vh counts a toolbar
	 * that is about to slide away.
	 */
	height: min(calc(100vh - var(--ev-header-h, 5rem)), 46rem);
	height: min(calc(100svh - var(--ev-header-h, 5rem)), 46rem);
	min-height: 32rem;
}

/* ---- no visible header ---- */

/*
 * THE HEADING IS IN THE MARKUP AND HIDDEN, NOT DELETED. The eyebrow, the
 * visible heading and the lede are gone from the section, but the h2 stays at
 * the same level so the page's heading order is unbroken and
 * aria-labelledby on the section still names something real. It carries
 * .screen-reader-text, which is the theme's own visually hidden class.
 *
 * The top padding that used to clear the fixed site header went with the
 * visible heading: nothing is drawn up there any more.
 */

/* ---- the columns ---- */

.evpts-cols {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: hidden;
}

.evpts-track {
	display: flex;
	height: 100%;
}

.evpts-col {
	position: relative;
	display: flex;
	min-width: 0;
	/* Bottom aligned, so the revealed text pushes the title upward. */
	align-items: flex-end;
}

/* ---- the picture, and the crossfade ---- */

/*
 * THE BUG THIS FIXES, AND WHY pointer-events IS THE WHOLE OF IT.
 *
 * On the hover layout the column is position: static, so inset: 0 here
 * resolves against .evpts-cols and every media layer covers the WHOLE
 * section rather than its own column. All three sit at z-index 0 in one
 * stacking context, so DOM order decides paint order and the LAST column's
 * layer ends up on top of the other two, blanketing the section.
 *
 * opacity: 0 does not remove an element from hit testing. Only
 * pointer-events, visibility or display do. So every pointer position that
 * was not directly over a .evpts-col-body, which is z-index 2, landed
 * inside the last column, fired mouseenter for that column once, and then
 * never fired again because the pointer never left that one layer. That is
 * exactly the reported symptom: the first hover works and then switching
 * columns does nothing.
 *
 * It also sent every click on empty space to the last column's CTA.
 *
 * These layers are decorative and aria-hidden, so nothing is lost by taking
 * them out of hit testing, and the column box underneath is hit testable on
 * its own account even while static.
 */
.evpts-col-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

/*
 * THE PLATE IS WHAT THE PARALLAX MOVES, and it is oversized so a drift can
 * never show an edge.
 *
 * The script's travel is capped at 15% of the section's height in each
 * direction, so 15% of overscan top and bottom is exactly enough and the
 * figures are tied together on purpose: change one and the other has to move.
 * Expressed as percentages of the media layer, which is inset: 0 on the
 * section, so this holds at the 32rem minimum height and at the 46rem cap
 * without either being named here.
 *
 * .evpts-col-media keeps overflow: hidden, so the overscan is clipped rather
 * than painted outside the section.
 */
.evpts-col-plate {
	position: absolute;
	top: -15%;
	right: 0;
	left: 0;
	height: 130%;
	display: block;
	will-change: transform;
}

.evpts-col-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/*
 * The overlay rides on the picture rather than being its own element, so
 * there is one thing to fade and no empty div per column.
 */
.evpts-col-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.25) 40%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

.evpts-col-body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 2rem 1.75rem 2.5rem;
}

.evpts-col-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.evpts-col-desc {
	margin: 0.875rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.evpts-col-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	align-items: center;
	margin: 0.875rem 0 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand, #d4c4a8);
}

.evpts-col-from b {
	color: #fff;
	font-weight: 600;
}

/*
 * THE BUTTON IS .evpco-btn-primary, THE DESTINATION HERO'S OWN. It is applied
 * as that class in the markup rather than reproduced here, so this section
 * cannot drift from the button a reader met one screen above it: the rust
 * pill, the gold gradient on hover, the lift, the shadow, the sliding arrow
 * and the focus ring all come from there.
 *
 * This class carries placement and nothing else. Anything more would be a
 * restyle of a shared component from inside one section.
 */
.evpts-col-cta {
	margin-top: 1.25rem;
}

/* ================================================
   THE CAROUSEL, WHICH IS THE DEFAULT

   Everything above is layout neutral. This is the carousel, and the hover
   layout below overrides it, so a browser that understands neither query
   still gets the version that works without hover.
   ================================================ */

.evpts-col {
	/* One slide per style, the width carousel.js measures. */
	flex: 0 0 100%;
}

.evpts-col-media {
	opacity: 1;
}

.evpts-controls {
	position: absolute;
	right: 0;
	bottom: 1rem;
	left: 0;
	z-index: 3;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
}

.evpts-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(15, 14, 12, 0.55);
	color: #fff;
	cursor: pointer;
}

.evpts-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.evpts-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

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

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

.evpts-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

.evpts-dot.is-active {
	background: var(--wp--preset--color--rust);
}

/* The carousel shows everything, so nothing is collapsed. */
.evpts-col-reveal {
	display: block;
}

/* Room for the controls under the text. */
.evpts-cols {
	padding-bottom: 0;
}

.evpts-track {
	/* Space so the controls do not sit on the button. */
	padding-bottom: 4rem;
}

/* ================================================
   THE HOVER LAYOUT

   Only where hover exists and the pointer is fine, so a touch laptop at
   1400px keeps the carousel. This is the one definition of that, and
   assets/js/destination-tour-types.js reads the same string.
   ================================================ */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {

	.evpts-track {
		padding-bottom: 0;
	}

	.evpts-col {
		flex: 1 1 0;
		/*
		 * THE DIVIDER IS THIS BORDER, AND IT HAS TO OUTRANK THE PICTURES.
		 *
		 * A static block's border paints in step 3 of its stacking context,
		 * after the negative z-index children in step 2 but before the
		 * z-index: 0 ones. With the media layers at z-index: 0 the picture and
		 * its overlay painted over the border, so a divider vanished the
		 * moment a column went active and flickered through a crossfade.
		 * Moving the media to z-index: -1 puts it in step 2, below the border,
		 * which is why there is no separate divider element here: the border
		 * is already on the box that widens, so it moves with the column and
		 * runs its full height for nothing.
		 *
		 * STATIC, AND THAT IS THE MECHANISM. With no position of its own the
		 * column stops being the containing block, so .evpts-col-media
		 * resolves against .evpts-cols and covers the whole section. The body
		 * keeps position relative and its own z-index, so it still sits above
		 * every picture.
		 */
		border-left: 1px solid rgba(255, 255, 255, 0.22);
		position: static;
		transition: flex-grow 0.6s ease;
	}

	.evpts-col:first-child {
		border-left: 0;
	}

	.evpts-col.is-active {
		flex-grow: 1.7;
	}

	/*
	 * Only the active style's picture is visible; the rest wait at zero.
	 *
	 * z-index: -1 is what keeps the dividers on top of them. See the border on
	 * .evpts-col above: it is why the picture cannot paint over the 1px lines.
	 * The section's own background is outside this stacking context, so a
	 * negative layer here is still above it and nothing disappears.
	 */
	.evpts-col-media {
		z-index: -1;
		opacity: 0;
		transition: opacity 0.7s ease;
	}

	.evpts-col.is-active .evpts-col-media {
		opacity: 1;
	}

	.evpts-col-img {
		transform: scale(1.05);
		transition: transform 1.4s ease;
	}

	.evpts-col.is-active .evpts-col-img {
		transform: scale(1);
	}

	.evpts-col-body {
		padding: 2.5rem 2rem 3rem;
	}

	/*
	 * COLLAPSED WITH grid-template-rows AND opacity, NEVER display OR
	 * visibility. The CTA of a collapsed column has to stay in the tab
	 * order: focusin on the column reveals it, so it is never a focused
	 * link nobody can see, and either of those two properties would take it
	 * out of the tab order and break that.
	 */
	.evpts-col-reveal {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		overflow: hidden;
		transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
	}

	.evpts-col.is-active .evpts-col-reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.evpts-col-reveal > * {
		min-height: 0;
	}

	/* The pointer target is the whole column, by the click handler. */
	.evpts-col {
		cursor: pointer;
	}

	.evpts-controls {
		display: none;
	}
}

/* ---- narrow screens ---- */
@media (max-width: 600px) {
	.evpts-col-body {
		padding: 1.5rem 1.25rem 2rem;
	}
}

/*
 * prefers-reduced-motion REMOVES THE MOTION, it does not slow it down. The
 * column still widens and still reveals its text; the width, the scale and
 * the crossfade simply arrive at their new values immediately.
 */
@media (prefers-reduced-motion: reduce) {
	.evpts-col,
	.evpts-col-media,
	.evpts-col-img,
	.evpts-col-plate,
	.evpts-col-reveal {
		transition: none;
	}

	/*
	 * The script already refuses to paint under reduced motion and clears any
	 * transform it had set. This is the belt to that braces, so a plate cannot
	 * be left drifted by a preference changed mid session.
	 */
	.evpts-col-plate {
		transform: none;
		will-change: auto;
	}

	.evpts-col-img,
	.evpts-col.is-active .evpts-col-img {
		transform: none;
	}
}