/*
 * Executive Lane, Stage 1 global system.
 * Header, navigation, typography polish, buttons, footer, sticky mobile bar.
 * Colour tokens come from theme.json (--wp--preset--color--*).
 * Namespaced classes only, so nothing fights the parent cascade.
 */

:root {
	--el-navy: var(--wp--preset--color--contrast, #0E1C2E);
	--el-navy-deep: var(--wp--preset--color--accent-3, #12283E);
	--el-gold: var(--wp--preset--color--accent-1, #C9A24A);
	--el-gold-hover: #B88D32;
	--el-gold-ink: #8A6A2E;
	--el-slate: var(--wp--preset--color--accent-4, #51657A);
	--el-hairline: color-mix(in srgb, var(--el-navy) 14%, transparent);
	--el-ease: 0.18s ease;
	--el-cta-height: 64px;

	/* one radius scale and one shadow scale, used everywhere so the site
	   reads as a single considered system rather than per-section choices */
	--el-radius: 8px;
	--el-radius-sm: 4px;
	--el-shadow-btn: 0 10px 24px color-mix(in srgb, var(--el-navy) 24%, transparent);
	--el-shadow-card: 0 16px 32px color-mix(in srgb, var(--el-navy) 13%, transparent);
	--el-shadow-rest: 0 10px 24px color-mix(in srgb, var(--el-navy) 10%, transparent);
}

/* ---------- overflow guards ---------- */
html,
body {
	overflow-x: clip;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ---------- typography polish ---------- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: Vollkorn, Georgia, "Times New Roman", serif;
}

h1, .wp-block-post-title, h2 {
	font-weight: 600;
}

/* ---------- links / focus ---------- */
a {
	transition: color var(--el-ease);
}

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--el-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	border-radius: 4px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color var(--el-ease), color var(--el-ease),
		transform var(--el-ease), box-shadow var(--el-ease);
}

.el-btn--book .wp-block-button__link {
	background-color: var(--el-gold);
	color: var(--el-navy);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.8rem;
	padding: 0.95em 1.7em;
}

.el-btn--book .wp-block-button__link:hover,
.el-btn--book .wp-block-button__link:focus {
	background-color: var(--el-gold-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--el-shadow-btn);
}

/* ---------- header ---------- */
/* Sticky lives on the template-part wrapper so it holds against the viewport,
   not just within its own box. overflow-x: clip on html/body does not break
   this (clip, unlike hidden, keeps overflow-y visible). */
.wp-block-template-part:has(> .el-site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-block-template-part:has(> .el-site-header) {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-block-template-part:has(> .el-site-header) {
		top: 46px;
	}
}

/* NOTE: no backdrop-filter / transform / filter on the header or its ancestors.
   Any of those would become the containing block for the navigation overlay's
   position: fixed and break the full-screen mobile menu. */
.el-site-header {
	background-color: #fff;
	border-bottom: 1px solid var(--el-hairline);
	box-shadow: 0 1px 0 var(--el-hairline);
}

@supports not (selector(:has(*))) {
	.el-site-header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

.el-site-header .alignwide {
	width: 100%;
	max-width: 100%;
}

/* let flex children shrink instead of forcing the row wider than the screen */
.el-site-header .alignwide > .wp-block-group,
.el-site-header .el-header-actions {
	min-width: 0;
}

/* wordmark: circular brand badge + text lockup */
.el-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	min-width: 0;
	flex-shrink: 1;
	text-decoration: none;
}

.el-wordmark__badge {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.el-wordmark__text {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: clamp(0.78rem, 1vw, 1rem);
	color: var(--el-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.el-wordmark:hover .el-wordmark__text {
	color: var(--el-gold-ink);
}

@media (max-width: 400px) {
	.el-wordmark__badge {
		width: 32px;
		height: 32px;
	}
	.el-wordmark__text {
		letter-spacing: 0.1em;
	}
}

.el-header-actions {
	flex-wrap: nowrap;
	gap: clamp(1rem, 2.4vw, 2.5rem);
}

/* primary nav (desktop) */
.el-primary-nav {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.94rem;
	letter-spacing: 0.015em;
}

.el-primary-nav .wp-block-navigation-item__content {
	color: var(--el-navy);
	text-decoration: none;
	padding-block: 0.35em;
	position: relative;
}

.el-primary-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--el-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--el-ease);
}

.el-primary-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.el-primary-nav .wp-block-navigation-item .wp-block-navigation-item__content:focus::after,
.el-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.el-primary-nav .wp-block-navigation-item__content[aria-current]::after {
	transform: scaleX(1);
}

.el-primary-nav .wp-block-navigation-item__content[aria-current] {
	color: var(--el-gold-ink);
}

/* the "Call ..." nav item reads as a quiet accent on desktop */
.el-nav-call .wp-block-navigation-item__content {
	color: var(--el-gold-ink);
	font-weight: 600;
	white-space: nowrap;
}

/* Collapse the primary nav to a hamburger below 1100px, not just below 600px,
   because the full label set does not fit a single row until ~1200px. */
@media (max-width: 1100px) {
	.el-primary-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.el-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Open overlay: force a genuine full-screen navy panel at every width. Core's
   own overlay sizing only fires below its fixed 600px breakpoint, so above
   that (our 600-1100px hamburger range) it has to be supplied here. */
.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box !important;
	position: fixed !important;
	inset: 0 !important;
	left: 0 !important;
	right: auto !important;
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	padding: clamp(4.5rem, 12vw, 7rem) clamp(1.5rem, 8vw, 5rem) 2rem !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background-color: var(--el-navy) !important;
	color: #fff !important;
}

.admin-bar .el-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: 46px !important;
	height: calc(100vh - 46px) !important;
}

@media (min-width: 783px) {
	.admin-bar .el-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: 32px !important;
		height: calc(100vh - 32px) !important;
	}
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	--navigation-layout-justify: flex-start;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.15rem;
	max-width: 30rem;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.6em 0;
	min-height: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .el-nav-call .wp-block-navigation-item__content {
	color: var(--el-gold);
	border-bottom: 0;
}

/* menu toggle buttons */
.el-primary-nav .wp-block-navigation__responsive-container-open {
	color: var(--el-navy);
	padding: 0.25rem;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: clamp(1rem, 4vw, 2rem);
	right: clamp(1rem, 6vw, 3rem);
	color: #fff;
	padding: 0.25rem;
	z-index: 3;
}

.el-header-book {
	flex-shrink: 0;
}

.el-header-book .wp-block-button__link {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	white-space: nowrap;
}

/* Below 600px the sticky bottom bar carries Book + Call, so the header keeps
   only the wordmark and the menu toggle. This is what clears the horizontal
   overflow at 320-430px. */
@media (max-width: 600px) {
	.el-site-header .el-header-book {
		display: none !important;
	}
	.el-site-header .alignwide {
		padding-top: var(--wp--preset--spacing--20, 10px);
		padding-bottom: var(--wp--preset--spacing--20, 10px);
	}
	.el-header-actions {
		gap: 0.5rem;
	}
}

/* ---------- sticky mobile Book / Call bar ---------- */
.el-mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: flex;
	gap: 0.5rem;
	background: var(--el-navy);
	padding: 0.55rem calc(0.6rem + env(safe-area-inset-right))
		calc(0.55rem + env(safe-area-inset-bottom))
		calc(0.6rem + env(safe-area-inset-left));
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
}

.el-mobile-cta a {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85em 0.75em;
	border-radius: 4px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(0.68rem, 3.1vw, 0.82rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.el-mobile-cta__call {
	flex-grow: 0.6;
}

.el-mobile-cta__book {
	background: var(--el-gold);
	color: var(--el-navy);
}

.el-mobile-cta__call {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.el-mobile-cta__call:hover {
	opacity: 0.92;
}

.el-mobile-cta__book:hover {
	background: var(--el-gold-hover);
	color: #fff;
}

@media (min-width: 821px) {
	.el-mobile-cta {
		display: none;
	}
}

/* reserve space so the bar never covers footer content on small screens */
@media (max-width: 820px) {
	body.el-has-mobile-cta {
		padding-bottom: calc(var(--el-cta-height) + env(safe-area-inset-bottom));
	}
}

/* ---------- footer ---------- */
.el-site-footer {
	margin-top: 0;
	/* subtle depth instead of a flat fill; kept dark, no new colour */
	background-image: linear-gradient(180deg, var(--el-navy) 0%, var(--el-navy-deep) 100%);
}

.el-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.el-footer-brand__mark {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

/* Own the footer column grid so the long service labels never wrap mid-word.
   Overrides the columns block's flex + inline flex-basis. */
.el-footer-cols {
	display: grid !important;
	grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr;
	gap: clamp(1.5rem, 3.5vw, 3.25rem) !important;
	align-items: start;
}

.el-footer-cols > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
}

@media (max-width: 1100px) {
	.el-footer-cols {
		grid-template-columns: 1fr 1fr;
	}
	.el-footer-cols > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.el-footer-cols {
		grid-template-columns: 1fr;
	}
	.el-footer-cols > .wp-block-column:first-child {
		grid-column: auto;
	}
}

.el-site-footer a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.el-site-footer a:hover {
	color: var(--el-gold);
}

.el-footer-wordmark {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 1rem;
	margin: 0;
	color: #fff;
}

.el-footer-tagline {
	font-family: Vollkorn, Georgia, serif;
	font-style: italic;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1.2rem;
	max-width: 24rem;
}

.el-footer-contact {
	font-size: 0.95rem;
	line-height: 2;
	margin: 0;
}

.el-footer-head {
	font-family: Manrope, system-ui, sans-serif !important;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 0.9rem;
}

.el-footer-links {
	line-height: 2.1;
	margin: 0;
}

.el-footer-rule {
	border: 0;
	border-top: 1px solid var(--el-gold);
	opacity: 0.35;
	margin: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
}

.el-footer-legal {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8rem;
}

.el-footer-legal p {
	margin: 0;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ==========================================================================
/* ==========================================================================
   STAGE 2, homepage (refined)
   ========================================================================== */

:root {
	--el-cream: var(--wp--preset--color--accent-5, #f6f4ef);
}

/* headings: serif for section titles only, sans for sub-headings */
h3, h4, h5, h6,
.wp-block-heading:where(h3, h4, h5, h6) {
	font-family: Manrope, system-ui, sans-serif;
}

/* de-emphasised phone in the header nav */
.el-nav-call .wp-block-navigation-item__content {
	color: var(--el-slate);
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.el-nav-call .wp-block-navigation-item__content::after {
	display: none;
}

.el-primary-nav .wp-block-navigation__responsive-container.is-menu-open .el-nav-call .wp-block-navigation-item__content {
	color: var(--el-gold);
	font-size: 1.05rem;
}

.el-home {
	margin-top: 0;
}

/* ---------- shared section furniture ---------- */
.el-section {
	padding-block: clamp(3.75rem, 8vw, 6.25rem);
}

.el-section--cream {
	background: var(--el-cream);
}

.el-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.el-kicker {
	margin: 0 0 0.85rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--el-gold-ink);
}

.el-kicker--light {
	color: var(--el-gold);
}

.el-section__head {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.el-section__head--center {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.el-section__title {
	margin: 0;
	font-family: Vollkorn, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.7rem, 3.3vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -0.25px;
	color: var(--el-navy);
}

.el-section__intro {
	margin: 0.9rem 0 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--el-slate);
	max-width: 40rem;
}

.el-section__head--center .el-section__intro {
	margin-inline: auto;
}

/* ---------- shared anchor buttons ---------- */
.el-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.9em 1.9em;
	border-radius: 4px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--el-ease), color var(--el-ease),
		transform var(--el-ease), box-shadow var(--el-ease), border-color var(--el-ease);
}

.el-cta--sm {
	min-height: 46px;
	padding: 0.75em 1.5em;
	font-size: 0.76rem;
}

.el-cta--gold {
	background: var(--el-gold);
	color: var(--el-navy);
}

.el-cta--gold:hover,
.el-cta--gold:focus-visible {
	background: var(--el-gold-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--el-shadow-btn);
}

/* for use over a dark / photo background */
.el-cta--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.el-cta--ghost:hover,
.el-cta--ghost:focus-visible {
	background: #fff;
	color: var(--el-navy);
	border-color: #fff;
}

/* for use over a white / light-neutral background */
.el-cta--outline {
	background: transparent;
	color: var(--el-navy);
	border-color: color-mix(in srgb, var(--el-navy) 35%, transparent);
}

.el-cta--outline:hover,
.el-cta--outline:focus-visible {
	background: var(--el-navy);
	color: #fff;
	border-color: var(--el-navy);
}

/* ---------- hero ---------- */
.el-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 78vh, 720px);
	padding-block: clamp(3rem, 7vw, 5rem);
	color: #fff;
	background: var(--el-navy);
	overflow: hidden;
}

.el-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	display: block;
	/* object-fit/object-position style a real <img>; harmless on the
	   homepage's still-CSS-background <div> usage below. */
	object-fit: cover;
	object-position: 70% 42%;
	background-image: url("../images/hero-escalade.webp");
	background-size: cover;
	background-position: 70% 42%;
}

.el-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(98deg,
			rgba(10, 24, 44, 0.92) 0%,
			rgba(10, 24, 44, 0.60) 30%,
			rgba(10, 24, 44, 0.15) 56%,
			rgba(10, 24, 44, 0) 80%),
		linear-gradient(to top, rgba(10, 24, 44, 0.55) 0%, rgba(10, 24, 44, 0) 38%);
}

.el-hero__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	width: 100%;
}

.el-hero__eyebrow {
	margin: 0 0 1rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--el-gold);
}

.el-hero__title {
	margin: 0;
	max-width: 20ch;
	font-family: Vollkorn, Georgia, serif;
	font-size: clamp(1.95rem, 4.6vw, 3.5rem);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -0.5px;
	color: #fff;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.el-hero__br {
	display: none;
}

@media (min-width: 640px) {
	.el-hero__br {
		display: inline;
	}
}

.el-hero__sub {
	margin: 1.1rem 0 0;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.92);
}

.el-hero__lead {
	margin: 1rem 0 0;
	max-width: 29rem;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.el-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.9rem;
}

/* ---------- trust bar ---------- */
.el-trustbar {
	background: var(--el-cream);
	border-bottom: 1px solid var(--el-hairline);
}

.el-trustbar__list {
	list-style: none;
	margin: 0 auto;
	max-width: 1240px;
	padding: 1rem clamp(1.25rem, 5vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 2rem;
}

.el-trustbar__list li {
	position: relative;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--el-navy);
}

.el-trustbar__list li + li::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--el-gold);
	transform: translateY(-50%);
}

/* ---------- services ---------- */
.el-feature {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: #fff;
	border: 1px solid var(--el-hairline);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	margin-bottom: 1.5rem;
	transition: box-shadow var(--el-ease), border-color var(--el-ease);
}

.el-feature:hover {
	border-color: color-mix(in srgb, var(--el-gold) 45%, transparent);
	box-shadow: var(--el-shadow-card);
}

.el-feature__media {
	min-height: 300px;
	background-size: cover;
	background-position: 60% 45%;
	transition: transform 0.45s ease;
}

.el-feature:hover .el-feature__media {
	transform: scale(1.03);
}

.el-feature__body {
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	align-self: center;
}

.el-feature__title {
	margin: 0.1rem 0 0.55rem;
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	color: var(--el-navy);
}

.el-feature__text {
	margin: 0 0 1.2rem;
	font-size: 1rem;
	line-height: 1.62;
	color: var(--el-slate);
}

.el-cards {
	display: grid;
	gap: 1.5rem;
}

.el-cards--2x2 {
	grid-template-columns: repeat(2, 1fr);
}

.el-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--el-hairline);
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--el-ease), box-shadow var(--el-ease), border-color var(--el-ease);
}

.el-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--el-gold) 45%, transparent);
	box-shadow: var(--el-shadow-card);
}

.el-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.7rem 1.6rem;
}

.el-card--photo .el-card__photo {
	display: block;
	height: 172px;
	background-size: cover;
	background-position: center 42%;
}

.el-card__iconband {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
	background: color-mix(in srgb, var(--el-navy) 5%, #fff);
	border-bottom: 1px solid var(--el-hairline);
}

.el-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--el-gold) 18%, transparent);
	color: var(--el-navy);
}

.el-card__title {
	margin: 0 0 0.45rem;
	font-size: 1.12rem;
	line-height: 1.28;
	color: var(--el-navy);
}

.el-card__text {
	margin: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.58;
	color: var(--el-slate);
	flex: 1;
}

.el-card__link {
	align-self: flex-start;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--el-gold-ink);
	text-decoration: none;
}

.el-feature__body .el-card__link {
	color: var(--el-gold-ink);
}

.el-card__link span {
	display: inline-block;
	transition: transform var(--el-ease);
}

.el-card:hover .el-card__link span,
.el-feature:hover .el-card__link span {
	transform: translateX(3px);
}

.el-services__foot {
	margin-top: 2.5rem;
	text-align: center;
}

/* ---------- fleet (single featured vehicle, split) ---------- */
.el-fleet__split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	background: #fff;
	border: 1px solid var(--el-hairline);
	border-radius: var(--el-radius);
	overflow: hidden;
}

.el-fleet__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	/* object-fit/object-position style a real <img>; background-* stays for
	   any remaining CSS-background usage of this class. */
	object-fit: cover;
	object-position: 62% 40%;
	background-size: cover;
	background-position: 62% 40%;
	transition: transform 0.45s ease;
}

.el-fleet__split:hover .el-fleet__media {
	transform: scale(1.025);
}

.el-fleet__info {
	padding: clamp(2rem, 4vw, 3.25rem);
	align-self: center;
}

.el-fleet__name {
	margin: 0 0 0.6rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	color: var(--el-navy);
}

.el-fleet__desc {
	margin: 0 0 1.4rem;
	font-size: 1rem;
	line-height: 1.62;
	color: var(--el-slate);
}

.el-fleet__specs {
	margin: 0 0 1.7rem;
	border-top: 1px solid var(--el-hairline);
}

.el-fleet__specs > div {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--el-hairline);
}

.el-fleet__specs dt {
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--el-slate);
	padding-top: 2px;
}

.el-fleet__specs dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--el-navy);
}

.el-fleet__amenities-label {
	margin: 0 0 0.7rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--el-slate);
}

.el-fleet__amenities {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.55rem 1.25rem;
}

.el-fleet__amenities li {
	position: relative;
	padding-left: 1.3rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--el-navy);
}

.el-fleet__amenities li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--el-gold);
}

/* ---------- how it works ---------- */
.el-how {
	padding-block: clamp(3.25rem, 6vw, 4.75rem);
}

.el-how .el-section__head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.el-how__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 1.5rem;
	border-top: 2px solid color-mix(in srgb, var(--el-gold) 55%, transparent);
}

.el-how__step {
	position: relative;
	padding: 1.1rem 0 0;
}

.el-how__num {
	display: block;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--el-gold-ink);
	margin-bottom: 0.4rem;
}

.el-how__label {
	margin: 0 0 0.35rem;
	font-size: 1.02rem;
	color: var(--el-navy);
}

.el-how__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--el-slate);
}

/* ---------- why (split editorial) ---------- */
.el-why {
	padding-block: 0;
	background: #fff;
}

.el-why__wrap {
	max-width: none;
	padding-inline: 0;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	align-items: stretch;
}

.el-why__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 460px;
	/* object-fit/object-position style the owner-portrait <img>; harmless on
	   the still-CSS-background <div> usages of this same class elsewhere. */
	object-fit: cover;
	object-position: 62% 48%;
	background-size: cover;
	background-position: 62% 48%;
}

.el-why__content {
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
	max-width: 640px;
}

.el-why__list {
	margin-top: 2rem;
	display: grid;
	gap: 1.5rem;
}

.el-why__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--el-hairline);
}

.el-why__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.el-why__idx {
	font-family: Vollkorn, Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--el-gold-ink);
	padding-top: 0.15rem;
}

.el-why__label {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	color: var(--el-navy);
}

.el-why__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--el-slate);
}

/* ---------- airport ---------- */
.el-airport__wrap {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.el-airport__lead {
	margin: 0.9rem 0 1.4rem;
	font-size: 1.05rem;
	line-height: 1.62;
	color: var(--el-slate);
}

.el-airport__list {
	list-style: none;
	margin: 0 0 1.3rem;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.el-airport__note {
	margin: 0 0 1.6rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--el-gold-ink);
}

.el-airport__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.97rem;
	color: var(--el-navy);
}

.el-airport__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--el-gold);
}

.el-airport__media {
	align-self: stretch;
	min-height: 340px;
	border-radius: var(--el-radius);
	overflow: hidden;
	background-size: cover;
	background-position: 42% 38%;
	box-shadow: var(--el-shadow-rest);
	transition: transform 0.45s ease, box-shadow var(--el-ease);
}

.el-airport__media:hover {
	transform: scale(1.02);
	box-shadow: var(--el-shadow-card);
}

/* ---------- corporate (dark band) ---------- */
.el-corporate {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--el-navy);
	color: #fff;
	padding-block: clamp(4rem, 9vw, 6.5rem);
}

.el-corporate__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("../images/img-corporate.webp");
	background-size: cover;
	background-position: center 40%;
}

.el-corporate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(95deg, rgba(9, 20, 36, 0.94) 0%, rgba(9, 20, 36, 0.78) 45%, rgba(9, 20, 36, 0.5) 100%),
		radial-gradient(120% 140% at 15% 0%, transparent 45%, rgba(0, 0, 0, 0.22) 100%);
}

.el-corporate__inner {
	max-width: 620px;
}

.el-corporate__title {
	margin: 0 0 0.9rem;
	font-family: Vollkorn, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.7rem, 3.3vw, 2.4rem);
	line-height: 1.14;
	color: #fff;
}

.el-corporate__lead {
	margin: 0 0 1.3rem;
	font-size: 1.05rem;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.85);
}

.el-corporate__list {
	list-style: none;
	margin: 0 0 1.9rem;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.el-corporate__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.97rem;
	color: rgba(255, 255, 255, 0.92);
}

.el-corporate__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--el-gold);
}

/* ---------- reviews (shown only when enabled) ---------- */
.el-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.el-review {
	margin: 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--el-hairline);
	border-radius: 8px;
}

.el-review blockquote {
	margin: 0 0 1rem;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--el-navy);
}

.el-review figcaption {
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--el-slate);
}

/* ---------- FAQ ---------- */
.el-faq__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.el-faq__list {
	border-top: 1px solid var(--el-hairline);
}

.el-faq__aside {
	position: sticky;
	top: 6rem;
	padding: 1.9rem 1.75rem;
	background: #fff;
	border: 1px solid var(--el-hairline);
	border-radius: 8px;
}

.el-faq__aside-head {
	margin: 0 0 0.5rem;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--el-navy);
}

.el-faq__aside-text {
	margin: 0 0 1.1rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--el-slate);
}

.el-faq__phone {
	display: block;
	margin-bottom: 1.1rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--el-navy);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.el-faq__phone:hover {
	color: var(--el-gold-ink);
}

.el-faq__aside .el-cta {
	display: flex;
	width: 100%;
}

.el-faq__item {
	border-bottom: 1px solid var(--el-hairline);
}

.el-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.15rem 2.5rem 1.15rem 0;
	position: relative;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--el-navy);
}

.el-faq__item summary::-webkit-details-marker {
	display: none;
}

.el-faq__item summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 1.5rem;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--el-gold-ink);
	border-bottom: 2px solid var(--el-gold-ink);
	transform: rotate(45deg);
	transition: transform var(--el-ease);
}

.el-faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.el-faq__answer {
	padding: 0 2.5rem 1.3rem 0;
}

.el-faq__answer p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--el-slate);
}

/* ---------- conversion CTA band ----------
   Deliberately light (not another dark photo band): it sits between the
   dark Corporate section and the dark footer, so keeping it warm and light
   is what stops the bottom of the page reading as three heavy dark blocks
   in a row. */
.el-cta-band {
	position: relative;
	background: #fff;
	border-top: 1px solid var(--el-hairline);
	border-bottom: 1px solid var(--el-hairline);
	color: var(--el-navy);
	text-align: center;
}

.el-cta-band__inner {
	padding-block: clamp(3.5rem, 7vw, 5.25rem);
}

.el-cta-band__title {
	margin: 0 auto;
	max-width: 20ch;
	font-family: Vollkorn, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.8rem, 3.8vw, 2.8rem);
	line-height: 1.14;
	color: var(--el-navy);
}

.el-cta-band__text {
	margin: 1rem auto 0;
	max-width: 38rem;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--el-slate);
}

.el-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	margin-top: 1.9rem;
}

/* ---------- footer tightening ---------- */
.el-footer-contact {
	line-height: 1.85;
}

.el-footer-links {
	line-height: 1.95;
}

.el-footer-head {
	margin-bottom: 0.7rem;
}

.el-footer-links--muted a {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9rem;
}

.el-footer-rule {
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 1.25rem;
}

/* ==========================================================================
   homepage responsive
   ========================================================================== */

@media (max-width: 1000px) {
	.el-why__wrap {
		grid-template-columns: 1fr;
	}
	.el-why__media {
		min-height: 320px;
		object-position: 62% 45%;
		background-position: 62% 45%;
	}
	.el-why__content {
		max-width: none;
		padding-block: clamp(2.75rem, 8vw, 4rem);
	}
	.el-airport__wrap {
		grid-template-columns: 1fr;
	}
	.el-airport__media {
		order: -1;
		min-height: 260px;
	}
	.el-fleet__split {
		grid-template-columns: 1fr;
	}
	.el-fleet__media {
		min-height: 300px;
	}
	.el-faq__grid {
		grid-template-columns: 1fr;
	}
	.el-faq__aside {
		position: static;
		order: -1;
	}
	.el-how__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem 1.5rem;
		border-top: 0;
	}
	.el-how__step {
		border-top: 2px solid color-mix(in srgb, var(--el-gold) 55%, transparent);
	}
}

@media (max-width: 820px) {
	.el-feature {
		grid-template-columns: 1fr;
	}
	.el-feature__media {
		min-height: 220px;
	}
}

@media (max-width: 640px) {
	.el-cards--2x2,
	.el-reviews__grid {
		grid-template-columns: 1fr;
	}
	.el-card__iconband {
		padding: 1.5rem 0;
	}
	.el-card__icon {
		width: 48px;
		height: 48px;
	}
	.el-how__steps {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.el-trustbar__list {
		gap: 0.55rem 1.5rem;
	}
	.el-hero__title {
		font-size: clamp(1.9rem, 8.4vw, 2.55rem);
	}
	.el-hero__actions .el-cta,
	.el-cta-band__actions .el-cta {
		flex: 1 1 100%;
	}
	.el-hero {
		min-height: 540px;
		padding-block: 2.75rem 3rem;
	}
	.el-hero__media {
		object-position: 72% 40%;
		background-position: 72% 40%;
	}
	.el-fleet__specs > div {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
	.el-fleet__amenities {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   STAGE 3, supporting pages (Services, Fleet, About, FAQ)
   Reuses the approved tokens and card/section patterns from the homepage;
   adds only the few structures unique to these pages.
   ========================================================================== */

.el-page-hero {
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- services page: card actions row ---------- */
.el-services-grid {
	grid-template-columns: repeat(3, 1fr);
}

.el-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
}

.el-card__actions .el-card__link {
	margin: 0;
}

/* ---------- fleet page: interior gallery ---------- */
.el-fleet-page__hero .el-fleet__media {
	min-height: 460px;
}

.el-fleet-page__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.el-fleet-page__shot {
	margin: 0;
	border-radius: var(--el-radius);
	overflow: hidden;
	border: 1px solid var(--el-hairline);
	background: #fff;
}

.el-fleet-page__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	/* object-fit styles the real <img> now used here. */
	object-fit: cover;
	background-size: cover;
	background-position: center;
	transition: transform 0.45s ease;
}

.el-fleet-page__shot:hover .el-fleet-page__photo {
	transform: scale(1.03);
}

.el-fleet-page__shot figcaption {
	padding: 0.9rem 1.1rem;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.85rem;
	color: var(--el-slate);
	border-top: 1px solid var(--el-hairline);
}

/* ---------- about page ---------- */
.el-about__story {
	max-width: 46rem;
}

.el-about__lead {
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--el-navy);
	margin: 0 0 1.1rem;
}

.el-about__story p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--el-slate);
}

.el-about__band {
	height: clamp(220px, 32vw, 380px);
	background-size: cover;
	background-position: center 42%;
}

.el-about__values {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.el-about__values li {
	padding-top: 1.1rem;
	border-top: 2px solid color-mix(in srgb, var(--el-gold) 55%, transparent);
}

.el-about__values h3 {
	margin: 0 0 0.4rem;
	font-size: 1.02rem;
	color: var(--el-navy);
}

.el-about__values p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--el-slate);
}

.el-about__owner .el-section__intro {
	margin-top: 0.15rem;
	color: var(--el-gold-ink);
	font-weight: 600;
}

.el-about__bio {
	margin-top: 1.1rem;
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--el-slate);
}

@media (max-width: 1000px) {
	.el-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.el-fleet-page__gallery {
		grid-template-columns: repeat(2, 1fr);
	}
	.el-about__values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.el-services-grid,
	.el-fleet-page__gallery,
	.el-about__values {
		grid-template-columns: 1fr;
	}
	.el-card__actions {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.el-card__actions .el-cta--sm {
		width: 100%;
	}
}

/* ---------- owner/legal review flags (pre-launch policy pages only) ---------- */
/* Marks a sentence that still needs the owner's (or legal's) confirmation
   before this page goes to production. Visible on purpose during review;
   remove or resolve every instance before deployment. */
.el-review-flag {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	background: color-mix(in srgb, #b3261e 12%, transparent);
	color: #b3261e;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}