/*
 * Component styles: header/nav, hero, trust bar, cards, buttons, forms,
 * footer, breadcrumbs, testimonials, FAQ accordions, final CTA, sticky
 * mobile CTA. Reads only from tokens.css custom properties. Every selector
 * here matches markup written directly into page-templates/*.php — there is
 * no shared PHP template-part library, so these class names must stay in
 * sync with what each template outputs.
 */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.8em 1.5em;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-normal);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	min-height: 44px;
	transition: background-color var(--motion-fast), color var(--motion-fast),
		border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	box-shadow: var(--shadow-xs);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-accent-dark);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var(--color-ink);
	color: var(--color-ink);
	background-color: var(--color-gray-50);
}

.btn--on-dark {
	border-color: var(--color-border-dark);
	color: var(--color-white);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
	background-color: var(--color-white);
	color: var(--color-ink);
	border-color: var(--color-white);
}

/* Site header — dark background, light text */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(6, 29, 22, 0.92);
	border-bottom: 1px solid var(--color-border-dark);
	transition: box-shadow var(--motion-normal), background-color var(--motion-normal);
}

@supports (backdrop-filter: blur(1px)) {
	.site-header {
		background-color: rgba(6, 29, 22, 0.82);
		backdrop-filter: saturate(1.4) blur(10px);
	}
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-md);
	background-color: var(--color-ink);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-xs);
}

.site-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-header__logo img {
	display: block;
	height: 64px;
	width: auto;
}

.nav-toggle {
	display: none;
	position: relative;
	background: none;
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-sm);
	padding: var(--space-2xs) var(--space-xs);
	min-height: 44px;
	min-width: 44px;
	transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	border-color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.06);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	transition: transform var(--motion-fast), opacity var(--motion-fast), background-color var(--motion-fast);
}

.nav-toggle__bars {
	position: relative;
	margin: 0 auto;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle.is-active .nav-toggle__bars {
	background-color: transparent;
}

.nav-toggle.is-active .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.primary-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3xs);
	margin: 0;
	padding: 0;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation .nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-gray-100);
	font-size: var(--text-sm);
	font-weight: 500;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-pill);
	transition: color var(--motion-fast), background-color var(--motion-fast);
}

.primary-navigation .nav-link:hover,
.primary-navigation .nav-link:focus-visible {
	color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.08);
}

.nav-link__caret {
	width: 0.85rem;
	height: 0.85rem;
	margin-left: var(--space-3xs);
	flex-shrink: 0;
	transition: transform var(--motion-fast);
}

.menu-item-has-children:hover > .nav-link .nav-link__caret,
.menu-item-has-children:focus-within > .nav-link .nav-link__caret,
.nav-link[aria-expanded="true"] .nav-link__caret {
	transform: rotate(180deg);
}

.primary-navigation .current-menu-item > .nav-link {
	color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.08);
	font-weight: 700;
}

/* Services dropdown — a true full-width mega menu. .menu-item-has-children
   is taken out of the li's own positioning context (below) so
   .sub-menu-panel, positioned absolute against .site-header instead of
   the li, spans the full header width edge-to-edge; .sub-menu--mega
   inside it is just the column grid, centred and padded to match the
   site's container width. */
.primary-navigation .menu-item-has-children {
	position: static;
}

.sub-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border-dark);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--motion-fast), transform var(--motion-fast), visibility var(--motion-fast);
}

.menu-item-has-children:hover > .sub-menu-panel,
.menu-item-has-children:focus-within > .sub-menu-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Services mega menu: three category columns on the light panel
   background, plus a fourth "plan your journey" panel styled as an inset
   dark card so it reads as the menu's own CTA rather than a fourth
   category. */
.mega-menu {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 300px;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-lg) var(--space-md);
}

.mega-menu__category {
	padding: var(--space-sm) var(--space-lg);
	border-left: 1px solid var(--color-border);
}

.mega-menu__category:first-child {
	border-left: none;
	padding-left: var(--space-sm);
}

.mega-menu__label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-sm);
}

.mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.mega-menu__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-xs);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: background-color var(--motion-fast);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
	background-color: var(--color-surface);
}

.mega-menu__link .icon-badge {
	flex-shrink: 0;
	background-color: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.mega-menu__link-title {
	display: block;
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.mega-menu__link-desc {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: 0.2em;
}

.mega-menu__all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	margin-top: var(--space-sm);
	padding: var(--space-3xs) var(--space-xs);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-accent-dark);
	text-decoration: none;
}

.mega-menu__all:hover,
.mega-menu__all:focus-visible {
	color: var(--color-ink);
}

/* The fourth column: an inset dark card, matching the .final-cta gradient
   used elsewhere on the site, so this reads as the menu's CTA rather than
   a fourth category. */
.mega-menu__plan {
	background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
	color: var(--color-text-inverse);
	border-radius: var(--radius-lg);
	margin-block: var(--space-sm);
	margin-left: var(--space-lg);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
}

.mega-menu__plan-eyebrow {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}

.mega-menu__plan-heading {
	color: var(--color-white);
	font-size: var(--text-lg);
	margin-bottom: var(--space-sm);
}

.mega-menu__plan-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted-inverse);
	margin-bottom: var(--space-md);
}

.mega-menu__plan-cta {
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

/* Reuses the site-wide .checklist component (icon + text rows), just
   stacked in a single column and recoloured for the dark CTA card. */
.mega-menu__plan-badges.checklist {
	grid-template-columns: 1fr;
	gap: var(--space-2xs);
}

.mega-menu__plan-badges .checklist__item {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-gray-100);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.header-actions__phone {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-white);
	text-decoration: none;
}

.header-actions__phone:hover,
.header-actions__phone:focus-visible {
	color: var(--color-accent);
}

.header-actions__whatsapp {
	display: inline-flex;
	color: #25d366;
	line-height: 0;
	transition: opacity var(--motion-fast, 0.15s ease);
}

.header-actions__whatsapp:hover,
.header-actions__whatsapp:focus-visible {
	opacity: 0.8;
}

.header-actions__whatsapp svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.primary-navigation {
		width: 100%;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height var(--motion-normal), opacity var(--motion-fast);
	}

	.primary-navigation.is-open {
		max-height: 80vh;
		opacity: 1;
		overflow-y: auto;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3xs);
		padding-block: var(--space-xs);
	}

	.primary-navigation .nav-link {
		display: block;
		padding: var(--space-xs) var(--space-sm);
		border-radius: var(--radius-sm);
	}

	/* JS toggles .is-open on .sub-menu-panel (see assets/js/nav.js) — that's
	   also what collapses/expands here, since the panel now holds the
	   two-column .mega-menu rather than a plain <ul> at desktop width. */
	.sub-menu-panel {
		position: static;
		box-shadow: none;
		border-top: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--motion-normal);
	}

	.sub-menu-panel.is-open {
		max-height: 80vh;
		overflow-y: auto;
	}

	.mega-menu {
		display: block;
		max-width: none;
		padding: var(--space-sm);
	}

	.mega-menu__category {
		border-left: none;
		padding: var(--space-sm) 0;
		border-bottom: 1px solid var(--color-border);
	}

	.mega-menu__category:first-child {
		padding-left: 0;
	}

	.mega-menu__plan {
		margin-left: 0;
		margin-top: var(--space-md);
	}
}

/* Breadcrumbs */
.breadcrumbs {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding-block: var(--space-sm);
}

.breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	margin: 0;
	padding: 0;
}

.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-3xs);
	color: var(--color-gray-300);
}

.breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: var(--color-accent-dark);
}

/* Hero */
.hero {
	position: relative;
	color: var(--color-text-inverse);
	background-color: var(--color-surface-dark);
	overflow: hidden;
	margin: var(--space-md) var(--space-md) 0;
	border-radius: var(--radius-lg);
}

@media (max-width: 700px) {
	.hero {
		margin: var(--space-sm) var(--space-sm) 0;
		border-radius: var(--radius-md);
	}
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 8%;
	right: -6%;
	width: 340px;
	height: 340px;
	border: 1px solid rgba(202, 167, 91, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 0 50px rgba(202, 167, 91, 0.05), 0 0 0 100px rgba(202, 167, 91, 0.028);
	pointer-events: none;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(6, 29, 22, 0.45) 0%, rgba(6, 29, 22, 0.6) 45%, rgba(6, 29, 22, 0.92) 100%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--space-3xl) var(--space-2xl);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
}

.hero__copy {
	max-width: 38rem;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-pill);
	padding: var(--space-3xs) var(--space-sm);
	margin-bottom: var(--space-sm);
}

.hero__title {
	color: var(--color-text-inverse);
}

.hero__subtitle {
	font-size: var(--text-md);
	color: var(--color-gray-100);
	max-width: 34rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

@media (prefers-reduced-motion: no-preference) {
	.hero__eyebrow,
	.hero__title,
	.hero__subtitle,
	.hero__actions {
		animation: et-hero-rise var(--motion-slow) var(--ease-premium) backwards;
	}

	.hero__title { animation-delay: 60ms; }
	.hero__subtitle { animation-delay: 120ms; }
	.hero__actions { animation-delay: 180ms; }
}

@keyframes et-hero-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Hero reviews */
/* Compact hero rating badge — an alternative to the full review carousel
   for pages that want a quick trust signal without a large block of quotes. */
.hero-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	width: fit-content;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-pill);
	padding: var(--space-2xs) var(--space-md);
	backdrop-filter: blur(6px);
}

.hero-rating .icon-badge {
	width: 1.5rem;
	height: 1.5rem;
	background: none;
	color: var(--color-accent);
}

.hero-rating .icon-badge svg {
	width: 1.5rem;
	height: 1.5rem;
}

.hero-rating__score {
	font-weight: 700;
	color: var(--color-white);
	font-size: var(--text-sm);
}

.hero-reviews {
	position: relative;
	width: 100%;
	max-width: 22rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	backdrop-filter: blur(6px);
}

.hero-reviews__stars {
	display: flex;
	align-items: center;
	gap: var(--space-3xs);
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}

.hero-reviews__stars .icon-badge {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent);
	background: none;
}

.hero-reviews__stars .icon-badge svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hero-reviews__score {
	font-weight: 700;
	color: var(--color-white);
	font-size: var(--text-sm);
}

.hero-reviews__item {
	display: none;
	margin: 0;
}

.hero-reviews__item.is-active {
	display: block;
	animation: et-hero-rise var(--motion-slow, 0.5s) var(--ease-premium, ease) both;
}

.hero-reviews__quote {
	color: var(--color-white);
	font-size: var(--text-md);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-sm);
}

.hero-reviews__cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	color: var(--color-white);
	font-size: var(--text-sm);
}

.hero-reviews__cite span {
	font-weight: 400;
	color: var(--color-gray-100);
}

.hero-reviews__dots {
	display: flex;
	gap: var(--space-3xs);
	margin-top: var(--space-md);
}

.hero-reviews__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.3);
	transition: background var(--motion-base, 0.2s) var(--ease-premium, ease);
}

.hero-reviews__dot.is-active {
	background: var(--color-white);
}

@media (max-width: 860px) {
	.hero-reviews {
		max-width: none;
	}
}

/* Trust bar — a floating white card overlapping the hero's rounded bottom
   edge, echoing the Golf Tours page's benefits strip. */
.trust-bar {
	position: relative;
	z-index: 3;
	margin-top: -28px;
	border-block: none;
}

.trust-bar .container {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.trust-bar ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm) var(--space-lg);
	margin: 0;
	padding: var(--space-md) var(--space-lg);
	font-size: var(--text-sm);
	font-weight: 500;
}

.trust-bar li {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.trust-bar li::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-accent);
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 4.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 8.7a1 1 0 1 1 1.4-1.4L6.5 10.1l5.8-5.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 4.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 8.7a1 1 0 1 1 1.4-1.4L6.5 10.1l5.8-5.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* "What's Included" benefit checklist */
.checklist {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-sm) var(--space-lg);
	margin: 0;
	padding: 0;
}

.checklist__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-weight: 500;
}

.checklist__item::before {
	content: "";
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-accent);
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 4.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 8.7a1 1 0 1 1 1.4-1.4L6.5 10.1l5.8-5.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 4.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 8.7a1 1 0 1 1 1.4-1.4L6.5 10.1l5.8-5.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Card grids */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-md);
}

/* Fleet cards read oddly when stretched edge-to-edge with only 1-2 items —
   cap how wide a single card grows so it doesn't dwarf its content. */
.card-grid--vehicles {
	grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
}

.card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--motion-normal), transform var(--motion-normal), border-color var(--motion-normal);
}

/* Whole-card link variant — the <a> itself is the .card, so the entire
   surface is clickable rather than just an inner button. */
.card--link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.card--link:hover,
.card--link:focus-visible {
	color: inherit;
}

.card__cta-label {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent-dark);
}

.card__cta-label::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--motion-fast);
}

.card--link:hover .card__cta-label::after,
.card--link:focus-visible .card__cta-label::after {
	transform: rotate(-45deg) translate(2px, -2px);
}

.card:hover,
.card:focus-within {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: var(--color-ink);
}

.card__image {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	transition: transform var(--motion-slow);
}

.card:hover .card__image,
.card:focus-within .card__image {
	transform: scale(1.05);
}

/* Numbered badge — an echo of the Golf Tours page's numbered service
   cards, applied to service grids (homepage, Services hub) without
   discarding the real photography those cards already use. */
.card {
	position: relative;
}

.card__number {
	position: absolute;
	z-index: 2;
	top: var(--space-sm);
	left: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	box-shadow: var(--shadow-sm);
}

.card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	flex: 1;
}

.card__meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.card__title {
	font-size: var(--text-md);
	margin: 0;
}

.card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--color-accent-dark);
}

.card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* Testimonials */
.testimonial {
	position: relative;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md) var(--space-md);
	box-shadow: var(--shadow-xs);
}

.testimonial::before {
	content: "\201C";
	position: absolute;
	top: var(--space-xs);
	left: var(--space-sm);
	font-size: 3rem;
	line-height: 1;
	font-weight: 800;
	color: var(--color-accent-soft);
}

.testimonial blockquote {
	position: relative;
	margin: 0 0 var(--space-sm);
	font-size: var(--text-md);
	font-weight: 500;
	line-height: var(--leading-snug);
}

.testimonial cite {
	font-style: normal;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.testimonial__rating {
	color: var(--color-accent);
	font-size: var(--text-sm);
	letter-spacing: 0.15em;
	margin-bottom: var(--space-2xs);
}

/* Service page: intro prose, photo gallery, and local-SEO location blocks */
.service-intro p {
	margin: 0 0 var(--space-sm);
}

.service-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-sm);
}

.service-gallery__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	transition: transform var(--motion-fast);
}

.service-gallery__img:hover {
	transform: scale(1.02);
}

.location-block h3 {
	font-size: var(--text-md);
	margin-bottom: var(--space-3xs);
}

.location-block p {
	color: var(--color-text-muted);
	margin: 0;
}

.final-cta__trust {
	font-size: var(--text-xs);
	color: var(--color-text-muted-inverse);
	letter-spacing: var(--tracking-wide);
}

/* FAQs — native <details>/<summary>, no custom ARIA needed */
.faqs__item {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-xs);
}

.faqs__item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--text-base);
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	list-style: none;
	transition: color var(--motion-fast);
}

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

.faqs__item {
	position: relative;
}

.faqs__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--space-lg));
	top: 22%;
	width: 3px;
	height: 56%;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(var(--color-accent), var(--color-accent-dark));
	opacity: 0;
	transform: scaleY(0.5);
	transition: opacity var(--motion-fast), transform var(--motion-fast);
}

.faqs__item[open]::before {
	opacity: 1;
	transform: scaleY(1);
}

.faqs__item summary::after {
	content: "+";
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: 1.15rem;
	line-height: 1;
	transition: transform var(--motion-normal), color var(--motion-fast), border-color var(--motion-fast);
}

.faqs__item[open] summary::after {
	content: "\2212";
	color: var(--color-white);
	background: var(--color-ink);
	border-color: var(--color-ink);
}

.faqs__item summary:hover,
.faqs__item[open] summary {
	color: var(--color-accent-dark);
}

.faqs__item[open] summary {
	color: var(--color-ink);
}

.faqs__answer {
	padding-top: var(--space-2xs);
	color: var(--color-text-muted);
}

/* Related content */
.related-links ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.related-links a {
	display: inline-block;
	padding: var(--space-2xs) var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

.related-links a:hover,
.related-links a:focus-visible {
	border-color: var(--color-ink);
	color: var(--color-ink);
	background-color: var(--color-gray-50);
}

/* On a dark section (e.g. folded into the final CTA), match the on-dark
   button treatment instead of the default light-surface pill colours. */
.final-cta .related-links {
	margin-bottom: var(--space-sm);
}

.final-cta .related-links a {
	border-color: var(--color-border-dark);
	color: var(--color-white);
}

.final-cta .related-links a:hover,
.final-cta .related-links a:focus-visible {
	border-color: var(--color-white);
	color: var(--color-ink);
	background-color: var(--color-white);
}

/* Areas covered — same pill look as related-links, but plain text (no link target) */
.areas-covered ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.areas-covered li {
	display: inline-block;
	padding: var(--space-2xs) var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
}

/* Service page intro: a bordered card rather than bare paragraphs floating
   in open whitespace. Text-only version is a single centred column; the
   --split variant (has a photo) puts the content column on the left and
   the image on the right, per design brief. */
.intro-card {
	max-width: 42rem;
	margin-inline: auto;
	padding: var(--space-lg);
	background-color: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.intro-card .icon-badge {
	margin-inline: auto;
}

.intro-card .callout {
	text-align: left;
}

.intro-card .cta-inline {
	justify-content: center;
}

.intro-card__content .checklist {
	text-align: left;
}

/* Quick facts strip (airport/location pages) — Terminals, Distance, Journey
   Time etc. shown as a compact label/value row inside the overview card. */
.quick-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-sm);
	margin: 0;
	padding: var(--space-sm);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.quick-facts__item dt {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 0.2em;
}

.quick-facts__item dd {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--color-ink);
}

@media (min-width: 760px) {
	.intro-card {
		padding: var(--space-xl);
	}
}

.intro-card--split {
	max-width: none;
	text-align: left;
	padding: 0;
	overflow: hidden;
}

.intro-card--split .intro-card__content {
	padding: var(--space-lg);
}

.intro-card--split .icon-badge {
	margin-inline: 0;
}

.intro-card--split .cta-inline {
	justify-content: flex-start;
}

.intro-card__media {
	background-color: var(--color-surface-dark);
}

.intro-card__media img {
	width: 100%;
	height: 14rem;
	object-fit: cover;
}

@media (min-width: 760px) {
	.intro-card--split {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		align-items: stretch;
	}

	.intro-card--split .intro-card__content {
		padding: var(--space-xl);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.intro-card__media img {
		height: 100%;
		min-height: 100%;
	}
}

/* Service page intro: highlighted "who this is for" callout, and an inline
   CTA button placed early on the page rather than only at the very end */
.callout {
	padding: var(--space-sm) var(--space-md);
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-surface-alt);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin-block: var(--space-md);
}

.cta-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.cta-inline__note {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Mid-page CTA banner (services pages) */
.mid-cta h2 {
	margin-bottom: var(--space-md);
}

/* Final CTA banner — the pitch (heading, trust line, quick-contact links) and
   the enquiry form live in one dark section instead of a CTA banner
   followed by a separate white block, so the form reads as this section's
   actual content rather than an unrelated block floating below it. */
.final-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
	color: var(--color-text-inverse);
}

.final-cta::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -140px;
	bottom: -170px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	border: 60px solid rgba(202, 167, 91, 0.08);
	pointer-events: none;
}

.final-cta .container {
	position: relative;
	z-index: 1;
}

.final-cta__grid {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	text-align: center;
}

@media (min-width: 900px) {
	.final-cta__grid {
		grid-template-columns: 1fr 1.1fr;
		text-align: left;
	}

	.final-cta__actions {
		justify-content: flex-start;
	}

	.final-cta .final-cta__trust {
		margin-inline: 0;
	}
}

.final-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.final-cta .enquiry-form {
	text-align: left;
	box-shadow: var(--shadow-lg);
}

/* Contact page: details on the left, form on the right */
.contact-layout {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr 1.1fr;
	}
}

.contact-layout__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.contact-layout__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.contact-layout__list svg {
	width: 1.3rem;
	height: 1.3rem;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--color-accent-dark);
}

/* Enquiry form */
.enquiry-form {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	box-shadow: var(--shadow-md);
}

.enquiry-form__heading {
	margin-bottom: var(--space-md);
}

.et-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-sm);
}

.et-form__row {
	margin-bottom: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.et-form__row label {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.et-form__row input,
.et-form__row textarea,
.et-form__row select {
	min-height: 46px;
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
	background-color: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.et-form__row input:focus,
.et-form__row textarea:focus,
.et-form__row select:focus {
	border-color: var(--color-accent-dark);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
	outline: none;
}

.et-form__row textarea {
	min-height: 84px;
}

.et-form__row--consent {
	flex-direction: row;
	align-items: center;
}

.et-form__row--consent label {
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-text);
}

.et-form__honeypot {
	position: absolute;
	left: -9999px;
}

/* Quote form (Request a Quote page only) — numbered steps, journey-type
   toggle, and a live vehicle recommendation card. */
.enquiry-form--quote {
	padding: var(--space-xl);
}

.qf-step {
	margin-bottom: var(--space-lg);
}

.qf-step__head {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.qf-step__number {
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-dark);
}

.qf-step__title {
	margin: 0;
	font-size: var(--text-lg);
}

.qf-step__subtitle {
	margin: 2px 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.qf-divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-lg) 0;
}

.qf-toggle {
	display: inline-flex;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
}

.qf-toggle__btn {
	padding: 0.7em 1.4em;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-ink);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--motion-fast), color var(--motion-fast);
}

.qf-toggle__btn.is-active {
	background-color: var(--color-ink);
	color: var(--color-white);
}

.qf-optional {
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
}

.qf-field-note {
	margin: var(--space-3xs) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.qf-vehicle-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-alt);
}

.qf-vehicle-card__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qf-vehicle-card__name {
	font-size: var(--text-sm);
}

.qf-vehicle-card__tagline {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.qf-vehicle-card__badge {
	flex-shrink: 0;
	padding: 0.3em 0.8em;
	border: 1px solid var(--color-accent-dark);
	border-radius: var(--radius-pill);
	color: var(--color-accent-dark);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.qf-submit {
	width: 100%;
	margin-top: var(--space-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.qf-reassurance {
	margin: var(--space-sm) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	text-align: center;
}

@media (max-width: 480px) {
	.qf-toggle {
		display: flex;
	}

	.qf-toggle__btn {
		flex: 1;
	}

	.qf-vehicle-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

.enquiry-form__notice {
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	border-left: 3px solid currentColor;
}

.enquiry-form__notice--success {
	background-color: var(--color-success-bg);
	color: var(--color-success-text);
}

.enquiry-form__notice--error {
	background-color: var(--color-error-bg);
	color: var(--color-error-text);
}

/* Footer styling lives in assets/css/footer.css (.exec-footer-*) — see
   template-parts/footer/site-footer.php and et_render_booking_cta(). */

/* Sticky mobile CTA bar */
.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 200;
	display: none;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	transform: translateY(100%);
	transition: transform var(--motion-normal);
}

.sticky-cta .btn {
	flex: 1;
}

@media (max-width: 700px) {
	.sticky-cta {
		display: flex;
	}

	.sticky-cta.is-visible {
		transform: translateY(0);
	}

	body {
		padding-bottom: 64px;
	}
}

/* Bottom-left stack: currently just the social-proof widget, kept as a flex
   wrapper (see footer.php) in case another bottom-left widget joins it. */
.floating-widgets {
	position: fixed;
	left: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

@media (max-width: 700px) {
	.floating-widgets {
		bottom: calc(64px + var(--space-sm));
	}
}

/* "Social proof" widget: live-viewer count + rotating recent bookings. */
.social-proof {
	max-width: 300px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-sm) var(--space-md);
}

/* Floating WhatsApp button — fixed bottom-right on every page. */
.whatsapp-float {
	position: fixed;
	right: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #25d366;
	color: #fff;
	box-shadow: var(--shadow-lg);
	transition: transform var(--motion-fast, 0.15s ease);
	flex-shrink: 0;
}

@media (max-width: 700px) {
	/* Hidden on mobile — the sticky CTA bar already has its own WhatsApp
	   button at this width, so the floating icon would sit directly on top
	   of it and look like a rendering bug rather than two deliberate CTAs. */
	.whatsapp-float {
		display: none;
	}
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
	transform: scale(1.06);
	color: #fff;
}

.whatsapp-float svg {
	width: 28px;
	height: 28px;
}

.social-proof__viewers {
	display: flex;
	align-items: center;
	gap: var(--space-3xs);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 var(--space-3xs);
}

.social-proof__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: var(--color-success-text);
	animation: et-pulse 2s ease-in-out infinite;
}

@keyframes et-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.social-proof__bookings {
	position: relative;
}

.social-proof__booking {
	display: none;
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.social-proof__booking.is-active {
	display: block;
}

.social-proof__booking strong {
	color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
	.social-proof__dot {
		animation: none;
	}
}

/* Icon badges — small rounded icon containers used in step grids, section
   headings, and as a fallback in place of a missing card image. */
.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--color-accent-soft);
	color: var(--color-accent-dark);
}

.icon-badge svg {
	width: 1.4rem;
	height: 1.4rem;
}

.icon-badge--lg {
	width: 3.75rem;
	height: 3.75rem;
}

.icon-badge--lg svg {
	width: 1.9rem;
	height: 1.9rem;
}

.icon-badge--on-dark {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
}

.section__heading .icon-badge,
.about-section__content .icon-badge {
	margin-bottom: var(--space-sm);
}

/* Tinted section background — a splash of accent colour for visual rhythm,
   used sparingly (e.g. Areas Covered) rather than on every section. */
.section--tint {
	background-color: var(--color-accent-soft);
}

/* Decorative glow — a faint concentric-ring accent in one corner, echoing
   the Golf Tours page's decorative circles. Purely ornamental (no content),
   so it's safe to drop into any positioned section without markup changes
   beyond the single empty <span>. */
.section {
	position: relative;
}

.section__glow {
	position: absolute;
	z-index: 0;
	top: 8%;
	right: -120px;
	width: 320px;
	height: 320px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	box-shadow: 0 0 0 48px rgba(202, 167, 91, 0.035), 0 0 0 96px rgba(202, 167, 91, 0.02);
	pointer-events: none;
}

.section > .container {
	position: relative;
	z-index: 1;
}

/* Step grid (How It Works) */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
}

.steps__item h3 {
	font-size: var(--text-base);
	margin: 0;
}

.steps__item p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.steps__number {
	font-size: var(--text-lg);
	font-weight: 700;
}

.card__body .icon-badge {
	margin-bottom: var(--space-2xs);
}

/* Centred, single-column About section */
.about-section {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}

.about-section__content {
	max-width: 38rem;
	margin-inline: auto;
	text-align: center;
}

/* Section eyebrow — small pill-style kicker above a section__heading h2, so
   stacked sections read as distinct, purposeful blocks rather than an
   undifferentiated scroll of centred headings. */
.section__heading__eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent-dark);
	background-color: var(--color-accent-soft);
	padding: 0.3em var(--space-sm);
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-xs);
}

.section--dark .section__heading__eyebrow,
.final-cta .section__heading__eyebrow {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-accent);
}

/* Card differentiation — the same .card component is reused for benefits,
   fleet, and "why choose us", which otherwise makes the page read as one
   repeated grey box. A coloured top edge (revealed on hover) and per-context
   icon tone break that monotony without new markup per section. */
.card {
	position: relative;
}

.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--motion-normal);
}

.card:hover::before,
.card:focus-within::before {
	transform: scaleX(1);
}

.card-grid--why .card::before {
	background-color: var(--color-ink);
}

.card-grid--benefits .card .icon-badge,
.card-grid--why .card .icon-badge {
	margin-bottom: var(--space-2xs);
}

.card-grid--vehicles .card::before {
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}

/* Decorative circle cutout in the corner — echoes the Golf Tours page's
   card style. .card already has overflow:hidden, so this just peeks in
   from the edge rather than needing its own clipping. */
.card__body {
	position: relative;
	z-index: 1;
}

.card::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -50px;
	bottom: -50px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 28px solid var(--color-accent-soft);
	pointer-events: none;
}

/* Mid-page conversion banner — a bold, self-contained band rather than a
   plain centred heading + button on a tint background. */
.mid-cta {
	background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
	padding-block: var(--space-xl);
}

.mid-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md) var(--space-lg);
}

.mid-cta__copy {
	flex: 1 1 260px;
}

.mid-cta__copy h2 {
	color: var(--color-text-inverse);
	margin-bottom: var(--space-3xs);
}

.mid-cta__copy p {
	color: var(--color-text-muted-inverse);
	margin: 0;
}

.mid-cta__btn {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.mid-cta__inner {
		text-align: center;
		justify-content: center;
	}

	.mid-cta .icon-badge {
		display: none;
	}
}

/* Step connector — a horizontal line threading the numbered badges together
   on wide screens, evoking a journey rather than four disconnected tiles. */
@media (min-width: 760px) {
	.steps {
		position: relative;
	}

	.steps::before {
		content: "";
		position: absolute;
		top: 1.875rem;
		left: 12%;
		right: 12%;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px);
		z-index: 0;
	}

	.steps__item {
		position: relative;
		z-index: 1;
	}
}

.steps__number {
	background-color: var(--color-surface);
	border: 2px solid var(--color-accent);
	color: var(--color-accent-dark);
}

/* FAQ / coverage accordion — framed as a card rather than a bare list of
   dividers, matching the visual weight of other sections on the page. */
.faqs__list {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2xs) var(--space-lg);
	box-shadow: var(--shadow-xs);
}

.faqs__item {
	padding-block: var(--space-sm);
}

.faqs__item:last-child {
	border-bottom: none;
}

.section--alt .faqs__list,
.section--tint .faqs__list {
	background-color: var(--color-surface);
}

.faqs__summary-label {
	display: inline-flex;
	align-items: center;
}

/* Region count badge next to a coverage accordion summary (e.g. "London 6") */
.faqs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding-inline: 0.4em;
	margin-left: var(--space-2xs);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent-soft);
	color: var(--color-accent-dark);
	font-size: var(--text-xs);
	font-weight: 700;
}

.faqs__item[open] .faqs__count {
	background-color: var(--color-accent);
	color: var(--color-on-accent);
}

/* Nested airport/venue list inside a coverage region accordion */
.coverage-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-2xs) var(--space-md);
	margin: 0;
	padding: 0;
}

.coverage-list__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
	border-left: 2px solid var(--color-border);
}

.coverage-list__name {
	font-weight: 600;
	font-size: var(--text-sm);
}

.coverage-list__detail {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Card image fallback — shown instead of a blank space when a Service/Fleet
   entry has no featured image yet, so card grids still look designed. */
.card__image-fallback {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(circle at 30% 20%, rgba(184, 145, 43, 0.35) 0%, transparent 55%),
		linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
}

.card__image-fallback .icon-badge {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-accent);
}