/**
 * Exclusive Yala Safari — front page & chrome
 */

/* theme.json sets elements.heading to the dark "contrast" colour, and WordPress
   emits that as a rule on h1-h6 directly. A direct rule beats inheritance, so a
   heading inside one of these dark sections ignored the section's own bone
   colour and rendered near-black on near-black. Opt them back in. */
.eys-hero :is(h1, h2, h3, h4, h5, h6),
.eys-atmosphere :is(h1, h2, h3, h4, h5, h6),
.eys-why :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

:root {
	--eys-bronze: #9a7b4f;
	--eys-gold: #c4a574;
	--eys-ink: #14110e;
	--eys-earth: #2c2620;
	--eys-muted: #6f6559;
	--eys-bone: #faf8f4;
	--eys-night: #1a1714;
	--eys-sand: #e8e0d4;
	--eys-font: "Outfit", "Segoe UI", sans-serif;
	--eys-display: "Cormorant Garamond", Georgia, serif;
	/* Rendered header height: 72px logo, 1.1rem padding above and below, 1px
	   border. Plugin styles that pin things below the header read this too. */
	--eys-header-h: 6.75rem;
	--eys-admin-bar-h: 0px;
}

body {
	font-family: var(--eys-font);
	background: var(--eys-bone);
	color: var(--eys-ink);
}

/* —— Site header —— */
/* Pinned on every page. On the front page it is fixed so it can keep
   overlaying the hero. Everywhere else the wrapper WordPress puts around it is
   sticky instead (see below), so the header still reserves its own row and
   nothing underneath is covered. */
.eys-header {
	position: fixed;
	top: var(--eys-admin-bar-h);
	right: 0;
	left: 0;
	z-index: 30;
	width: 100%;
	padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
	pointer-events: none;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Transparent over the hero, but once the page moves the bone nav text would
   sit on the light sections below with nothing behind it. chrome.js adds
   .is-scrolled as soon as the page scrolls. */
.eys-header.is-scrolled {
	background: rgba(20, 17, 14, 0.94);
	backdrop-filter: blur(10px);
	border-bottom-color: rgba(196, 165, 116, 0.18);
}

/* Sticky has to sit on the <header class="wp-block-template-part"> that
   WordPress wraps the template part in. That wrapper is exactly as tall as the
   header, and a sticky element cannot leave its parent, so a sticky
   .eys-header had no room to move and scrolled away with the page. The
   wrapper's own parent, .wp-site-blocks, spans the whole document. */
body:not(.home) .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--eys-admin-bar-h);
	z-index: 30;
}

body:not(.home) .eys-header {
	position: relative;
	top: auto;
	background: rgba(20, 17, 14, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(196, 165, 116, 0.18);
}

/* The logged-in admin bar is fixed above 600px, so anything pinned to the top
   has to sit below it. Below 600px the bar scrolls away with the page. */
body.admin-bar {
	--eys-admin-bar-h: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--eys-admin-bar-h: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--eys-admin-bar-h: 0px;
	}
}

/* A pinned header covers whatever an in-page link scrolls to - the nav's #faq
   link would otherwise land its heading underneath the bar. */
html {
	scroll-padding-top: calc(var(--eys-header-h) + 0.25rem);
}

.eys-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	pointer-events: auto;
}

.eys-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--eys-bone);
}

.eys-header__logo {
	display: block;
	height: 72px;
	width: auto;
	max-width: min(240px, 46vw);
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.eys-header__nav {
	display: flex;
	align-items: center;
	gap: 1.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eys-header__nav a {
	color: rgba(250, 248, 244, 0.88);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.eys-header__nav a:hover {
	color: var(--eys-gold);
}

.eys-header__dropdown {
	position: relative;
}

.eys-header__dropdown > a::after {
	content: "";
	display: inline-block;
	margin-left: 0.35rem;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom-width: 0;
	vertical-align: 0.15em;
	opacity: 0.7;
}

.eys-header__submenu {
	position: absolute;
	top: calc(100% + 0.55rem);
	left: 50%;
	z-index: 40;
	visibility: hidden;
	opacity: 0;
	/* Hiding is delayed so a cursor that clips a corner on the way to an
	   item does not lose the panel. */
	transition: opacity 0.14s ease, visibility 0s linear 0.28s;
	min-width: 15.5rem;
	margin: 0;
	padding: 0.45rem 0;
	list-style: none;
	border: 1px solid rgba(196, 165, 116, 0.28);
	border-radius: 6px;
	background: rgba(20, 17, 14, 0.97);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	transform: translateX(-50%);
}

/* The panel sits 9px below the trigger and overhangs it by 67px each side,
   so the direct path to an item leaves the hover target. This bridges the
   gap across the panel's full width. */
.eys-header__dropdown::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 15.5rem;
	height: 0.75rem;
	transform: translateX(-50%);
	display: none;
}

.eys-header__dropdown:hover::before,
.eys-header__dropdown:focus-within::before,
.eys-header__dropdown.is-open::before {
	display: block;
}

.eys-header__dropdown:hover > .eys-header__submenu,
.eys-header__dropdown:focus-within > .eys-header__submenu,
.eys-header__dropdown.is-open > .eys-header__submenu {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.eys-header__submenu a {
	display: block;
	padding: 0.7rem 1.1rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.eys-header__submenu li:first-child a {
	color: var(--eys-gold);
	border-bottom: 1px solid rgba(196, 165, 116, 0.2);
	margin-bottom: 0.2rem;
	padding-bottom: 0.7rem;
}

.eys-header__cta {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0.55rem 1rem;
	border: 1px solid rgba(196, 165, 116, 0.55);
	border-radius: 4px;
	background: rgba(20, 17, 14, 0.35);
	color: var(--eys-gold) !important;
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.eys-header__cta:hover {
	background: rgba(196, 165, 116, 0.18);
	color: var(--eys-bone) !important;
}

.eys-header__tools {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-left: 1rem;
}

.eys-header__switcher {
	position: relative;
	z-index: 45;
	color: var(--eys-bone);
}

.eys-header__switcher .eat-switcher,
.eys-header__switcher .eat-switcher__toggle {
	color: var(--eys-bone);
	--eat-switcher-text: var(--eys-bone);
	--eat-switcher-hover-text: var(--eys-gold);
	--eat-switcher-border: rgba(196, 165, 116, 0.55);
}

.eys-header__switcher .eat-switcher__toggle {
	padding: 0.45rem 1.65rem 0.45rem 0.7rem;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	background: rgba(20, 17, 14, 0.35);
}

.eys-header__switcher .eat-switcher__menu {
	color: var(--eys-ink);
	background: #faf8f4;
	--eat-switcher-text: #14110e;
	--eat-switcher-hover-text: #14110e;
	--eat-switcher-hover-bg: rgba(196, 165, 116, 0.22);
	--eat-switcher-current-text: #14110e;
	--eat-switcher-current-bg: rgba(196, 165, 116, 0.18);
}

.eys-header__switcher .eat-switcher__menu a,
.eys-header__switcher .eat-switcher__menu .eat-switcher__name,
.eys-header__switcher .eat-switcher__menu .eat-switcher__flag-emoji {
	color: #14110e !important;
	-webkit-text-fill-color: #14110e;
	letter-spacing: 0.02em;
}

.eys-header__toggle {
	display: none;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.4rem 0.55rem;
	border: 1px solid rgba(196, 165, 116, 0.45);
	border-radius: 4px;
	background: rgba(20, 17, 14, 0.35);
	color: var(--eys-gold);
	font-family: var(--eys-font);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.eys-header__toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 16px;
}

.eys-header__toggle-box span,
.eys-header__toggle-box::before,
.eys-header__toggle-box::after {
	display: block;
	height: 1.5px;
	background: currentColor;
}

.eys-header__toggle-box span {
	width: 100%;
}

.eys-header__nav-wrap {
	margin-left: auto;
}

@media (max-width: 720px) {
	/* The drawer is given flex-basis:100% so it drops to its own row, but the
	   row never existed: without wrapping it stayed on the brand's flex line
	   and ran 116px past the viewport. */
	.eys-header__inner {
		flex-wrap: wrap;
	}

	.eys-header__logo {
		height: 56px;
	}

	.eys-header__toggle {
		display: inline-flex;
		justify-content: center;
		/* Was 36x16. 44px is the comfortable minimum for a thumb. */
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0.5rem 0.7rem;
		/* Last in the tools row, so the burger sits in the right corner
		   rather than between the switcher and the Book Now button. */
		order: 3;
	}

	.eys-header__brand {
		order: 1;
	}

	.eys-header__tools {
		order: 2;
		margin-left: auto;
	}

	.eys-header__toggle-label {
		display: none;
	}

	.eys-header__cta {
		padding: 0.45rem 0.75rem;
		font-size: 0.68rem;
	}

	.eys-header__switcher .eat-switcher__name {
		max-width: 5.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.eys-header__nav-wrap {
		display: none;
		order: 3;
		flex-basis: 100%;
		margin: 0.5rem 0 0;
		padding: 0.75rem 0 0.25rem;
		border-top: 1px solid rgba(196, 165, 116, 0.22);
		/* The drawer hangs off a burger in the right corner, so its contents
		   read from that edge back inwards. */
		text-align: right;
	}

	.eys-header.is-nav-open .eys-header__nav-wrap {
		display: block;
	}

	/* The header is transparent and fixed over the hero on the front page, so
	   an open drawer has to bring its own surface or it reads straight through
	   onto the headline. Pinned, it also cannot scroll with the page, so a
	   drawer taller than the screen (a phone held sideways) scrolls inside
	   itself instead of cutting off the last links. */
	.eys-header.is-nav-open {
		background: rgba(20, 17, 14, 0.98);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid rgba(196, 165, 116, 0.25);
		max-height: calc(100vh - var(--eys-admin-bar-h));
		max-height: calc(100svh - var(--eys-admin-bar-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 56px logo instead of 72px. */
	:root {
		--eys-header-h: 5.75rem;
	}

	.eys-header__nav {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.85rem;
	}

	.eys-header__submenu {
		position: static;
		/* The desktop rule centres the panel with translateX(-50%). Going
		   static drops left:50% but keeps the transform, which pushed the
		   drawer submenu 86px off the left edge and clipped every item. */
		left: auto;
		transform: none;
		visibility: visible;
		opacity: 1;
		transition: none;
		min-width: 0;
		/* Indent from the right edge now that the drawer is right-aligned. */
		margin: 0.4rem 0.6rem 0 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.eys-header__dropdown > a::after {
		display: none;
	}

	.eys-header__dropdown::before {
		display: none;
	}
}

/* —— Hero —— */
.eys-hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: var(--eys-bone);
	background: var(--eys-night);
}

.eys-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.eys-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

@media (min-width: 801px) {
	.eys-hero__media img {
		transform: scale(1.08);
		animation: eys-kenburns 28s ease-in-out infinite alternate;
		will-change: transform;
	}
}

@keyframes eys-kenburns {
	from {
		transform: scale(1.08) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.16) translate3d(-1.5%, -1%, 0);
	}
}

.eys-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0.25) 38%, rgba(20, 17, 14, 0.72) 72%, rgba(20, 17, 14, 0.94) 100%),
		radial-gradient(ellipse 80% 55% at 70% 35%, rgba(154, 123, 79, 0.22), transparent 60%);
	pointer-events: none;
}

.eys-hero__content {
	width: min(1200px, 92vw);
	margin: 0 auto;
	padding: 0 0 clamp(7.5rem, 14vh, 10rem);
}

.eys-hero__brand {
	margin: 0 0 0.85rem;
	font-family: var(--eys-display);
	font-size: clamp(2.75rem, 7.2vw, 5.75rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: var(--eys-bone);
	text-wrap: balance;
	opacity: 0;
	transform: translateY(18px);
	animation: eys-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.eys-hero__brand em {
	font-style: italic;
	font-weight: 500;
	color: var(--eys-gold);
}

.eys-hero__rule {
	width: 0;
	height: 2px;
	margin: 0 0 1.25rem;
	border: 0;
	background: linear-gradient(90deg, var(--eys-gold), transparent);
	width: min(12rem, 40vw);
	transform: scaleX(0);
	transform-origin: left center;
	animation: eys-draw 1.1s ease 0.55s forwards;
}

@keyframes eys-draw {
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.eys-hero__rule {
		animation: none;
		transform: scaleX(1);
	}
}

.eys-hero__headline {
	margin: 0 0 0.75rem;
	max-width: 28ch;
	font-family: var(--eys-font);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: rgba(250, 248, 244, 0.88);
	opacity: 0;
	transform: translateY(14px);
	animation: eys-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.eys-hero__lede {
	margin: 0 0 1.75rem;
	max-width: 38ch;
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(250, 248, 244, 0.68);
	opacity: 0;
	transform: translateY(14px);
	animation: eys-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.eys-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	opacity: 0;
	transform: translateY(14px);
	animation: eys-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@media (max-width: 800px) {
	.eys-hero__headline,
	.eys-hero__lede,
	.eys-hero__actions,
	.eys-hero__rule {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.eys-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.85rem;
	padding: 0.7rem 1.35rem;
	border-radius: 4px;
	border: 1px solid transparent;
	font-family: var(--eys-font);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.eys-btn--primary {
	background: color-mix(in srgb, var(--eys-gold) 78%, #fff);
	color: var(--eys-earth);
}

.eys-btn--primary:hover {
	background: var(--eys-gold);
	transform: translateY(-1px);
}

.eys-btn--outline {
	border-color: rgba(154, 123, 79, 0.45);
	color: var(--eys-bronze);
	background: transparent;
}

.eys-btn--outline:hover {
	background: rgba(154, 123, 79, 0.1);
	color: var(--eys-ink);
}

.eys-btn--ghost {
	background: transparent;
	border-color: rgba(250, 248, 244, 0.35);
	color: var(--eys-bone);
}

.eys-btn--ghost:hover {
	border-color: var(--eys-gold);
	color: var(--eys-gold);
}

@keyframes eys-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.eys-hero__media img {
		animation: none;
		transform: scale(1.05);
	}

	.eys-hero__brand,
	.eys-hero__headline,
	.eys-hero__lede,
	.eys-hero__actions {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.eys-hero__rule {
		width: min(12rem, 40vw);
		animation: none;
	}

	.eys-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* —— Book bar band —— */
.eys-book-band {
	position: relative;
	z-index: 20;
	margin-top: -4.5rem;
	padding: 0 clamp(1rem, 4vw, 2rem) 0;
	pointer-events: auto;
}

.eys-book-band .eys-book-bar {
	max-width: 1100px;
	box-shadow: 0 18px 48px rgba(20, 17, 14, 0.18);
	pointer-events: auto;
	position: relative;
	z-index: 21;
}

/* —— Sections shared —— */
.eys-section {
	padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 4vw, 2rem);
}

.eys-section__inner {
	width: min(1200px, 100%);
	margin: 0 auto;
}

.eys-eyebrow {
	margin: 0 0 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eys-bronze);
}

.eys-section__title {
	margin: 0 0 0.85rem;
	font-family: var(--eys-display);
	font-size: clamp(2rem, 4.5vw, 3.35rem);
	font-weight: 600;
	line-height: 1.08;
	color: var(--eys-ink);
	text-wrap: balance;
}

.eys-section__lede {
	margin: 0 0 2.5rem;
	max-width: 42ch;
	font-size: 1.05rem;
	color: var(--eys-muted);
}

.eys-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.eys-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* —— Experiences —— */
.eys-experiences {
	background:
		radial-gradient(ellipse 70% 50% at 0% 0%, rgba(154, 123, 79, 0.08), transparent 55%),
		var(--eys-bone);
}

.eys-exp-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--eys-sand);
}

.eys-exp {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
	gap: 1rem 2rem;
	align-items: baseline;
	padding: 1.65rem 0;
	border-bottom: 1px solid var(--eys-sand);
	text-decoration: none;
	color: inherit;
	transition: background 0.25s ease;
}

.eys-exp:hover .eys-exp__name {
	color: var(--eys-bronze);
}

.eys-exp__time {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eys-bronze);
}

.eys-exp__name {
	margin: 0 0 0.25rem;
	font-family: var(--eys-display);
	font-size: clamp(1.55rem, 2.6vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--eys-ink);
	transition: color 0.25s ease;
}

.eys-exp__desc {
	margin: 0;
	font-size: 0.95rem;
	color: var(--eys-muted);
	max-width: 36ch;
}

.eys-exp__from {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--eys-earth);
	white-space: nowrap;
}

.eys-exp__from > span:first-child {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eys-muted);
	margin-bottom: 0.15rem;
}

.eys-exp__unit {
	display: inline;
	margin-left: 0.2rem;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--eys-muted);
}

@media (max-width: 800px) {
	.eys-exp {
		grid-template-columns: 1fr;
		gap: 0.45rem;
	}
}

/* —— Atmosphere —— */
.eys-atmosphere {
	position: relative;
	min-height: clamp(420px, 62vh, 640px);
	display: grid;
	align-items: end;
	overflow: hidden;
	color: var(--eys-bone);
	background: var(--eys-night);
}

.eys-atmosphere__media {
	position: absolute;
	inset: 0;
}

.eys-atmosphere__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.eys-atmosphere__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 17, 14, 0.88) 0%, rgba(20, 17, 14, 0.45) 48%, rgba(20, 17, 14, 0.2) 100%);
}

.eys-atmosphere__copy {
	position: relative;
	z-index: 1;
	width: min(1200px, 92vw);
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.eys-atmosphere__copy .eys-eyebrow {
	color: var(--eys-gold);
}

.eys-atmosphere__copy h2 {
	margin: 0 0 0.85rem;
	max-width: 14ch;
	font-family: var(--eys-display);
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--eys-bone);
}

.eys-atmosphere__copy p {
	margin: 0;
	max-width: 34ch;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(250, 248, 244, 0.72);
}

/* —— Why / inclusions —— */
.eys-why {
	background: var(--eys-night);
	color: var(--eys-bone);
}

.eys-why .eys-section__title {
	color: var(--eys-bone);
}

.eys-why .eys-section__lede {
	color: rgba(250, 248, 244, 0.62);
}

.eys-why .eys-eyebrow {
	color: var(--eys-gold);
}

.eys-why-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eys-why-item h3 {
	margin: 0 0 0.45rem;
	font-family: var(--eys-display);
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--eys-bone);
}

.eys-why-item p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(250, 248, 244, 0.62);
}

.eys-why-item::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: 1rem;
	background: linear-gradient(90deg, var(--eys-gold), transparent);
}

@media (max-width: 800px) {
	.eys-why-grid {
		grid-template-columns: 1fr;
	}
}

/* —— Wildlife gallery —— */
.eys-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.55rem;
	padding: 0.55rem;
	background: var(--eys-ink);
}

.eys-gallery figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.eys-gallery figure:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
	min-height: 100%;
}

.eys-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.eys-gallery figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 1.75rem 0.75rem 0.65rem;
	background: linear-gradient(transparent, rgba(20, 17, 14, 0.82));
	color: var(--eys-bone);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eys-gallery figure:hover img {
	transform: scale(1.04);
}

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

	.eys-gallery figure:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 16 / 10;
	}
}

/* —— Closing CTA —— */
.eys-close {
	text-align: center;
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(154, 123, 79, 0.12), transparent 55%),
		var(--eys-bone);
}

.eys-close .eys-section__lede {
	margin-left: auto;
	margin-right: auto;
}

.eys-close__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.eys-btn--dark {
	background: var(--eys-earth);
	color: var(--eys-bone);
}

.eys-btn--dark:hover {
	background: var(--eys-ink);
}

/* —— Footer —— */
.eys-footer {
	padding: 2.75rem clamp(1rem, 4vw, 2rem) 2rem;
	background: var(--eys-ink);
	color: rgba(250, 248, 244, 0.65);
}

.eys-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	width: min(1200px, 100%);
	margin: 0 auto;
}

.eys-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--eys-bone);
}

.eys-footer__logo {
	height: 40px;
	width: auto;
	object-fit: contain;
}

.eys-footer__name {
	font-family: var(--eys-display);
	font-size: 1.25rem;
	font-weight: 600;
}

.eys-footer__meta {
	margin: 0;
	font-size: 0.85rem;
}

.eys-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.65rem;
}

.eys-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.85rem 1.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eys-footer__links a {
	color: rgba(250, 248, 244, 0.7);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eys-footer__links a:hover {
	color: var(--eys-gold);
}

.eys-footer__links--secondary a {
	color: rgba(250, 248, 244, 0.5);
	font-size: 0.72rem;
}

/* Transfers are a route, not a tour, so they sit in their own labelled row. */
.eys-footer__links-label {
	color: rgba(250, 248, 244, 0.4);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eys-footer__links--pickup a {
	font-size: 0.74rem;
	letter-spacing: 0.06em;
}

@media (max-width: 720px) {
	.eys-footer__nav {
		align-items: flex-start;
		width: 100%;
	}

	.eys-footer__links {
		justify-content: flex-start;
	}
}

/* Soften default TT5 wrappers on front */
body.home .wp-site-blocks > main,
body.home .entry-content > .eys-hero {
	margin-block: 0;
}

body.home .wp-block-group.eys-page {
	margin: 0;
}

/* —— Book Your Safari —— */
.eys-page--book {
	padding: 1.75rem clamp(0.75rem, 3vw, 1.5rem) 3.5rem;
	background: var(--eys-bone);
}

.eys-page--book > .eys-page__title {
	width: min(1120px, 100%);
	margin: 0 auto 1.25rem;
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.eys-page--book > .entry-content,
.eys-page--book > .wp-block-post-content,
body.page-book-your-safari .eys-page--book .entry-content,
body.page-book-your-safari .eys-page--book .wp-block-post-content {
	max-width: none !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.page-book-your-safari .eys-app,
body.page-book-your-safari .eys-app.alignwide {
	display: block;
	width: min(1120px, 100%) !important;
	max-width: 1120px !important;
	margin-inline: auto !important;
	margin-block: 0 !important;
	float: none !important;
}

.eys-proof {
	background: var(--eys-sand);
}

.eys-proof-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.eys-proof-item {
	padding: 1.35rem 1.4rem 1.2rem;
	background: var(--eys-bone);
	border: 1px solid rgba(44, 38, 32, 0.08);
}

.eys-proof-item h3 {
	margin: 0 0 0.45rem;
	font-family: var(--eys-display);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--eys-ink);
}

.eys-proof-item blockquote {
	margin: 0;
}

.eys-proof-item p {
	margin: 0;
	font-family: var(--eys-font);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--eys-muted);
}

.eys-proof-item footer {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eys-muted);
}

.eys-proof__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 800px) {
	.eys-proof-grid {
		grid-template-columns: 1fr;
	}
}

.eys-404 {
	width: min(720px, 92vw);
	margin: 0 auto;
	padding: clamp(5rem, 12vh, 8rem) 0 4rem;
}

.eys-404 h1 {
	margin: 0 0 0.75rem;
}

.eys-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* —— Guide cross-links —— */
.eys-guide-links {
	padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
	background: var(--eys-bone);
	border-top: 1px solid rgba(44, 38, 32, 0.1);
}

.eys-guide-links h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.eys-guide-links__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1.5rem 2rem;
}

.eys-guide-links__label {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(44, 38, 32, 0.55);
}

.eys-guide-links__list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eys-guide-links__list a {
	color: var(--eys-dark, #2c2620);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eys-guide-links__list a:hover,
.eys-guide-links__list a:focus-visible {
	color: var(--eys-gold, #a8834a);
	border-bottom-color: currentColor;
}

.eys-guide-price-note {
	margin: 1rem 0 1.25rem;
	max-width: 52ch;
	font-size: 0.92rem;
	color: var(--eys-muted);
}

.eys-book-bar__note {
	margin: 0.65rem 0 0;
	padding: 0 1.1rem 0.85rem;
	font-size: 0.75rem;
	color: var(--eys-muted);
}

.eys-footer__meta a {
	color: inherit;
	text-decoration: none;
}

.eys-footer__meta a:hover {
	color: var(--eys-gold);
}

.eys-breadcrumbs {
	max-width: 1100px;
	margin: 0 auto;
	padding: 5.5rem 1.25rem 0.35rem;
	font-size: 0.82rem;
}

body.home .eys-breadcrumbs {
	display: none;
}

.eys-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--eys-muted);
}

.eys-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.6rem;
	opacity: 0.55;
}

.eys-breadcrumbs a {
	color: var(--eys-earth);
	text-decoration: none;
}

.eys-breadcrumbs a:hover,
.eys-breadcrumbs a:focus-visible {
	color: var(--eys-bronze);
	text-decoration: underline;
}

.eys-proof-item h3 {
	margin: 0 0 0.5rem;
	font-family: var(--eys-display);
	font-size: 1.35rem;
}

.eys-header__toggle:focus-visible,
.eys-btn:focus-visible,
.eys-header__nav a:focus-visible {
	outline: 2px solid var(--eys-gold);
	outline-offset: 3px;
}

/* —— Pay Deposit: leopard country behind the card —— */
.eys-deposit-page {
	position: relative;
	background-color: #1b1713;
}

/*
 * A fixed, darkened leopard sits behind the whole page. The payment card on top
 * is fully opaque, so nothing here can touch the legibility of the form - the
 * image only has to survive being dimmed, which is why it ships at quality 42.
 */
.eys-deposit-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(180deg, rgba(20, 17, 14, 0.82), rgba(20, 17, 14, 0.9)),
		image-set(
			url("/wp-content/themes/exclusive-yala/assets/images/deposit-bg-900.webp") 1x,
			url("/wp-content/themes/exclusive-yala/assets/images/deposit-bg.webp") 2x
		);
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

/* Everything the theme prints has to sit above that layer. */
.eys-deposit-page .wp-site-blocks,
.eys-deposit-page .eys-header,
.eys-deposit-page .eys-footer {
	position: relative;
	z-index: 1;
}

/* The page title is on the dark ground now, not on bone. */
.eys-deposit-page .wp-block-post-title,
.eys-deposit-page .eys-breadcrumbs,
.eys-deposit-page .eys-breadcrumbs a {
	color: var(--eys-bone, #faf8f4);
}

.eys-deposit-page .eys-breadcrumbs a:hover {
	color: var(--eys-gold, #c4a574);
}

/* A dark page needs the card to feel lifted, not pasted on. */
.eys-deposit-page .eys-deposit__card {
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}

@media (min-width: 48rem) {
	.eys-deposit-page::before {
		background-image:
			linear-gradient(180deg, rgba(20, 17, 14, 0.8), rgba(20, 17, 14, 0.9)),
			url("/wp-content/themes/exclusive-yala/assets/images/deposit-bg.webp");
	}
}