/* =========================================================================
   Taxi to Melbourne Airport — design system

   Brand is the client's own gold and black. Deliberately distinct from the
   agency's Silver Taxi build (navy/cyan, glassmorphism, diagonal cuts) so two
   Melbourne clients never read as the same site.

   Structure follows ME CABS, pacing follows Kiwitaxi: short scannable blocks,
   generous whitespace, real numbers over adjectives.
   ========================================================================= */

:root {
	color-scheme: light;
	--gold: #f2c14e;
	--gold-dark: #d9a730;
	--gold-soft: #fbf1d9;

	--ink: #111318;
	--ink-2: #1c1f26;
	--body: #3d4350;
	--muted: #6b7280;

	--line: #e5e7eb;
	--surface: #ffffff;
	--surface-2: #f6f7f9;

	--ok: #0f9d58;

	--radius: 14px;
	--radius-sm: 9px;
	--shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 8px 24px rgba(17, 19, 24, .06);
	--shadow-lg: 0 2px 4px rgba(17, 19, 24, .06), 0 18px 48px rgba(17, 19, 24, .12);

	--wrap: 1160px;
	--gap: clamp(1rem, 2.5vw, 1.75rem);
	--section-y: clamp(3rem, 7vw, 5.5rem);

	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

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

/* The <meta name="color-scheme" content="light"> tag in the head is not
   always enough: some in-app and WebView browsers apply their own forced-dark
   algorithm regardless, which tends to leave bold text dark but wash out
   regular-weight paragraph text to near-illegible contrast. forced-color-adjust
   explicitly opts every element out of that automatic recolouring. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; forced-color-adjust: none; }
* { forced-color-adjust: none; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
	line-height: 1.65;
	color: var(--body);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 800;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.03rem + .5vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	padding-left: .85rem;
	padding-right: .85rem;
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); }

/* "What do you need?" service picker grid */
.needband { background: var(--surface-2); }
.needgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.needcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.5rem 1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	font-weight: 800;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.needcard:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-2px); }
.needcard__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--gold-dark);
}
.needcard__icon svg { width: 24px; height: 24px; }
.needcard__name { font-size: .95rem; }
.needcard__desc { font-size: .8rem; font-weight: 500; color: var(--muted); margin-top: -.4rem; }

@media (max-width: 720px) {
	.needgrid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	.needcard { padding: 1.25rem .75rem; }
}
.section--soft { background: var(--gold-soft); }

.section--dark {
	background: var(--ink);
	color: #c9cdd6;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.section-head--split {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}
.section-head--split > div:first-child { max-width: 62ch; }
.section-head--split .lede { margin-bottom: 0; }

.addons-nav { display: flex; gap: .5rem; flex: 0 0 auto; }
.addons-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.addons-nav__btn:hover { border-color: var(--gold); color: var(--gold-dark, var(--ink)); }
.addons-nav__btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.addons-nav__btn svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
	.section-head--split { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.addons-nav { display: none; }
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: .9rem;
	padding: .45rem 1.1rem;
	border: 1px solid rgba(217, 167, 48, .4);
	border-radius: 999px;
	background: rgba(217, 167, 48, .06);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.section--dark .eyebrow,
.hero--home .eyebrow {
	border-color: rgba(255, 192, 0, .4);
	background: transparent;
	color: var(--gold);
}

.lede { font-size: 1.08em; color: var(--muted); }
.section--dark .lede { color: #9aa1ad; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---------- buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--ink); }
.btn--primary:hover { background: var(--gold-dark); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }

.btn--ghost { border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: rgba(255, 192, 0, .12); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
	border-bottom: 1px solid rgba(17, 19, 24, .1);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 74px;
}

.site-header__brand {
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1.15;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -.02em;
}
.site-header__brand span { display: block; font-size: .72rem; font-weight: 700; opacity: .7; letter-spacing: .02em; }

.nav { margin-left: auto; }
.nav ul {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav a {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: .95rem;
	color: var(--ink);
	text-decoration: none;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
	line-height: 1;
}
.nav a:hover,
.nav .current-menu-item > a { border-bottom-color: var(--ink); }

.nav li { position: relative; }

@media (min-width: 1081px) {
	.nav .menu-item-has-children > a { gap: .3rem; }
}
.nav .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}

.nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 15rem;
	margin: 0;
	padding: .5rem;
	background: var(--ink);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}
@media (min-width: 1081px) {
	.nav li:hover > .sub-menu,
	.nav li:focus-within > .sub-menu { display: flex; }

	/* "Book Now" in the header CTA already covers this; the nav-item--cta
	   version is for the mobile drawer only. */
	.nav > ul > li.nav-item--cta { display: none; }
}

.nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .6rem .75rem;
	border-radius: 8px;
	color: #e5e7eb;
	font-size: .89rem;
	font-weight: 600;
	border-bottom: 0;
	white-space: nowrap;
}
.nav-icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--gold); }

/* Top-level nav icons are a mobile-drawer affordance only; the desktop bar
   is compact enough that they just added visual noise without an explicit
   size/color, rendering as pale, oversized default SVGs. */
.nav-icon--top { display: none; }
.nav .sub-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Grouping dividers: Airport Transfers/Hourly Hire, then vehicle types, then
   accessibility and extras, then accounts and payment types. */
@media (min-width: 1081px) {
	.nav .sub-menu li:nth-child(3),
	.nav .sub-menu li:nth-child(7),
	.nav .sub-menu li:nth-child(9) {
		margin-top: .4rem;
		padding-top: .4rem;
		border-top: 1px solid rgba(255, 255, 255, .09);
	}
}

@media (max-width: 1080px) {
	.nav .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		background: rgba(17, 19, 24, .04);
		margin-top: .4rem;
		padding: .3rem;
	}
	.nav li.is-open > .sub-menu { display: flex; }
	.nav .menu-item-has-children > a::after { margin-left: auto; }
}

.site-header__cta { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: var(--gold);
	transition: transform .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(17, 19, 24, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.nav__head { display: none; }
.nav-close { display: none; }
.nav__foot { display: none; }

@media (max-width: 1080px) {
	.nav-toggle { display: inline-flex; order: 3; }
	.site-header__cta .btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
	.nav-toggle span { transition: background-color .2s ease .1s; }
	.nav-toggle span::before,
	.nav-toggle span::after { transition: transform .2s ease; }
	.nav-toggle.is-open span { background: transparent; }
	.nav-toggle.is-open span::before { transform: translateY(0) rotate(45deg); }
	.nav-toggle.is-open span::after { transform: translateY(0) rotate(-45deg); }

	.nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		width: min(320px, 85vw);
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		background: var(--surface);
		box-shadow: -12px 0 32px rgba(17, 19, 24, .18);
		padding: 1.1rem 1.25rem 2rem;
		transform: translateX(100%);
		transition: transform .3s ease;
	}
	.nav.is-open { transform: translateX(0); }

	.nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.25rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--line);
	}
	.nav__logo { height: 32px; width: auto; }
	.nav-close {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: none;
		color: var(--ink);
		cursor: pointer;
	}
	.nav-close svg { width: 16px; height: 16px; }

	.nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
	.nav li { border-top: 0; }
	.nav a {
		display: flex;
		align-items: center;
		gap: .8rem;
		padding: .75rem .6rem;
		border-radius: 10px;
		border-bottom: 0;
	}
	.nav > ul > li > a:active,
	.nav .sub-menu a:active { background: var(--surface-2); }

	.nav-icon--top { display: block; width: 19px; height: 19px; flex-shrink: 0; color: var(--gold-dark); }

	/* Fare Estimator, the primary reason anyone opens this menu. */
	.nav-item--highlight { margin-bottom: .3rem; }
	.nav-item--highlight > a {
		background: var(--gold-soft);
		border: 1.5px solid var(--gold);
		font-weight: 800;
	}
	.nav-item--highlight .nav-icon--top { color: var(--ink); }
	.nav-item--highlight > a::after {
		content: "Get a price";
		margin-left: auto;
		font-size: .7rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--gold-dark);
	}

	/* Book a Taxi, styled as the drawer's one clear call to action. */
	.nav-item--cta { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--line); }
	.nav-item--cta > a {
		justify-content: center;
		background: var(--ink);
		color: #fff;
		font-weight: 800;
		padding: .85rem .6rem;
	}
	.nav-item--cta .nav-icon--top { color: var(--gold); }

	.nav .menu-item-has-children > a::after {
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-width: 1.7px;
	}

	.nav .sub-menu { border-radius: 10px; padding-left: 1.5rem; }
	.nav .sub-menu li { border-top: 1px solid rgba(17, 19, 24, .08); }
	.nav .sub-menu li:first-child { border-top: 0; }
	.nav .sub-menu a { padding: .65rem .6rem; color: var(--ink); }

	/* Group the Services submenu into categories, mirroring the homepage grid. */
	.nav .sub-menu li:nth-child(1)::before,
	.nav .sub-menu li:nth-child(3)::before,
	.nav .sub-menu li:nth-child(7)::before,
	.nav .sub-menu li:nth-child(9)::before {
		display: block;
		padding: .7rem .6rem .1rem;
		font-size: .68rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: #9aa1ac;
	}
	.nav .sub-menu li:nth-child(1)::before { content: "Airport transfers"; padding-top: .3rem; }
	.nav .sub-menu li:nth-child(3)::before { content: "Vehicles"; }
	.nav .sub-menu li:nth-child(7)::before { content: "Accessibility & extras"; }
	.nav .sub-menu li:nth-child(9)::before { content: "Accounts & payments"; }
	.nav .sub-menu li:nth-child(3),
	.nav .sub-menu li:nth-child(7),
	.nav .sub-menu li:nth-child(9) { border-top: 0; margin-top: .3rem; }
	.nav .sub-menu a:hover,
	.nav .sub-menu a:active { background: var(--gold-soft); color: var(--ink); }

	.nav__foot {
		display: block;
		margin-top: auto;
		padding-top: 1rem;
		border-top: 1px solid var(--line);
	}
	.nav__contact { display: flex; flex-direction: column; gap: .2rem; margin-top: .6rem; }
	.nav__contact-item {
		display: flex;
		align-items: center;
		gap: .8rem;
		padding: .6rem;
		border-radius: 10px;
		color: var(--ink);
		text-decoration: none;
	}
	.nav__contact-item:active { background: var(--surface-2); }
	.nav__contact-item svg { flex: 0 0 19px; width: 19px; height: 19px; }
	.nav__contact-item span { display: flex; flex-direction: column; font-weight: 700; font-size: .92rem; }
	.nav__contact-item small { font-weight: 500; color: #6b7280; font-size: .76rem; }
	.nav__logo { display: none; }

	.site-header__bar { flex-wrap: wrap; }
	.site-header__phone span.label { display: none; }
}

@media (min-width: 1081px) {
	.nav-overlay { display: none; }
}

/* ---------- hero ---------- */

.hero {
	position: relative;
	background: var(--ink);
	color: #d3d7de;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: -12%;
	width: 55%;
	background: radial-gradient(closest-side, rgba(255, 192, 0, .16), transparent 72%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}
.hero__inner > * { min-width: 0; }
@media (min-width: 1000px) {
	.hero__inner { grid-template-columns: 1fr minmax(24rem, 27rem); }
}

.hero h1 { color: #fff; }
.hero__sub { font-size: .98em; color: #a9b0bd; max-width: 46ch; }

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__proof b { display: block; color: var(--gold); font-size: 1.5rem; line-height: 1.1; }
.hero__proof span { font-size: .85rem; color: #939aa7; }

/* ---------- trust strip ---------- */

.trust {
	background: var(--gold);
	padding-block: 1.1rem;
}
.trust ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 2.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.trust li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	font-size: .93rem;
	color: var(--ink);
}

/* ---------- cards ---------- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	box-shadow: var(--shadow);
}
.section--dark .card {
	background: var(--ink-2);
	border-color: rgba(255, 255, 255, .1);
	box-shadow: none;
}

/* Contact page: phone/email/service-area cards */

.contactcards { display: grid; gap: .85rem; margin-top: 1.75rem; }
.contactcard {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	box-shadow: var(--shadow);
	text-decoration: none;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
a.contactcard:hover {
	border-color: var(--gold);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}
.contactcard--static { cursor: default; }
.contactcard__icon {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--gold-soft);
	color: var(--gold-dark);
	display: grid;
	place-items: center;
}
.contactcard__icon svg { width: 21px; height: 21px; }
.contactcard__body { flex: 1 1 auto; min-width: 0; }
.contactcard__label {
	display: block;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: .15rem;
}
.contactcard__value { display: block; font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.contactcard__value--wrap { font-size: 1rem; word-break: break-word; }
.contactcard__body small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); line-height: 1.4; }

.card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 12px;
	background: var(--gold-soft);
	color: var(--gold-dark);
}
.section--dark .card__icon { background: rgba(255, 192, 0, .14); color: var(--gold); }
.card__icon svg { width: 24px; height: 24px; }

.card h3 { margin-bottom: .35rem; }
.card p { font-size: .96rem; color: var(--muted); }
.section--dark .card p { color: #9aa1ad; }

/* route + fare cards */

.route-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: border-color .15s ease, transform .12s ease;
}
.route-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.route-card strong { display: block; color: var(--ink); font-size: 1rem; }
.route-card small { color: var(--muted); font-size: .84rem; }
.route-card__fare {
	font-weight: 900;
	font-size: 1.2rem;
	color: var(--ink);
	white-space: nowrap;
}
.route-card__fare small { display: block; font-weight: 600; font-size: .7rem; color: var(--muted); text-align: right; }

/* fleet */

.fleet-card { display: flex; flex-direction: column; }
.fleet-card__media {
	aspect-ratio: 16 / 10;
	background: var(--surface-2) center/cover no-repeat;
	border-radius: var(--radius-sm);
	margin-bottom: 1rem;
	display: grid;
	place-items: center;
	color: var(--muted);
}
.fleet-card__specs {
	display: flex;
	gap: 1.25rem;
	margin: .5rem 0 1rem;
	padding: .7rem 0;
	border-block: 1px solid var(--line);
	font-size: .88rem;
	color: var(--muted);
}
.fleet-card__specs b { color: var(--ink); }
.fleet-card__price { margin-top: auto; font-weight: 800; color: var(--ink); }

/* ---------- fare table ---------- */

.fare-box {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}
.fare-box__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--ink);
	color: #fff;
}
.fare-box__head b { font-size: 1.75rem; color: var(--gold); }
.fare-box__rows { margin: 0; padding: .35rem 1.25rem 1rem; }
.fare-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px dashed var(--line);
	font-size: .93rem;
}
.fare-row:last-child { border-bottom: 0; }
.fare-row--total { font-weight: 800; color: var(--ink); font-size: 1.02rem; }

/* ---------- journey timeline ---------- */

.journey { list-style: none; margin: 0; padding: 0; }
.journey li {
	position: relative;
	padding: 0 0 1.5rem 2.2rem;
	border-left: 2px solid var(--line);
}
.journey li:last-child { border-left-color: transparent; padding-bottom: 0; }
.journey li::before {
	content: "";
	position: absolute;
	left: -8px;
	top: .3rem;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--gold);
	border: 3px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
}
.journey b { display: block; color: var(--ink); }
.journey span { font-size: .9rem; color: var(--muted); }

/* ---------- steps ---------- */

.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.4rem; }
.step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: -.1rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--gold);
	color: var(--ink);
	font-weight: 900;
}

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chips a {
	display: inline-block;
	padding: .45rem .85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: .9rem;
	text-decoration: none;
	color: var(--body);
	transition: border-color .15s ease, color .15s ease;
}
.chips a:hover { border-color: var(--gold); color: var(--ink); }
.section--dark .chips a {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	color: #c9cdd6;
}
.section--dark .chips a:hover { border-color: var(--gold); color: #fff; }

/* ---------- reviews ---------- */

.rating-summary { display: flex; align-items: center; gap: .75rem; }
.stars { color: var(--gold); letter-spacing: .1em; font-size: 1.15rem; }

.review blockquote { margin: 0 0 1rem; font-size: 1rem; color: var(--body); }
.section--dark .review blockquote { color: #c9cdd6; }
.review cite { font-style: normal; font-weight: 700; color: var(--ink); font-size: .92rem; }
.section--dark .review cite { color: #fff; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--gold-dark);
	transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.2rem; color: var(--muted); }

/* Service page FAQ block: narrower centered column reads better than a full
   1160px accordion once questions are only a sentence or two long. */
.svc-faq__wrap { max-width: 52rem; }

/* Service page "Related services" cards (Cabcharge cluster). Plain .card
   already carries the border/shadow/radius; these two rules just scope the
   link-specific tweaks that used to live as inline styles on the template. */
.svc-related__card { text-decoration: none; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.svc-related__card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.svc-related__card h3 { font-size: 1.02rem; }

/* ---------- breadcrumbs ---------- */

.crumbs {
	padding-block: .55rem;
	font-size: .82rem;
	color: rgba(17, 19, 24, .62);
	background: var(--gold-dark);
}
.crumbs .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.crumbs .wrap::-webkit-scrollbar { display: none; }
.crumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}
.crumbs li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.crumbs__home { color: rgba(17, 19, 24, .55); flex-shrink: 0; }
.crumbs__sep { color: rgba(17, 19, 24, .3); flex-shrink: 0; margin: 0 .3rem; }
.crumbs a {
	color: rgba(17, 19, 24, .62);
	text-decoration: none;
	font-weight: 600;
	transition: color .15s ease;
}
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] {
	color: var(--ink);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.crumbs { padding-block: .45rem; font-size: .78rem; }
}

/* Inline placement between an eyebrow and heading, not a full-width strip
   under the header. Used on both photo/dark heroes and plain white section
   heads, so it sits flush with the surrounding text rather than carrying
   its own .wrap padding/max-width. */
.crumbs--sub,
.crumbs--hero {
	background: transparent;
	padding-block: 0;
	margin-bottom: .55rem;
	font-size: .8rem;
}
.crumbs--sub .wrap,
.crumbs--hero .wrap { padding: 0; max-width: none; margin: 0; overflow: visible; }
.section-head--center .crumbs--sub .wrap,
.section-head--center .crumbs--hero .wrap,
.hero__copy .crumbs--hero .wrap { display: flex; }
.section-head--center .crumbs--sub .wrap,
.section-head--center .crumbs--hero .wrap { justify-content: center; }

.crumbs--hero {
	color: rgba(255, 255, 255, .55);
	position: relative;
	z-index: 1;
}
.crumbs--hero .crumbs__home { color: rgba(255, 255, 255, .45); }
.crumbs--hero .crumbs__sep { color: rgba(255, 255, 255, .25); }
.crumbs--hero a { color: rgba(255, 255, 255, .68); }
.crumbs--hero a:hover { color: #fff; }
.crumbs--hero [aria-current="page"] { color: #fff; }

/* ---------- prose ---------- */

.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.3em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .94rem; }
.prose th, .prose td { padding: .7rem .8rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface-2); color: var(--ink); font-weight: 700; }

/* ---------- footer ---------- */

.site-footer { position: relative; background: var(--ink); color: #9aa1ad; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; overflow: hidden; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.site-footer a { color: #9aa1ad; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .45rem; font-size: .93rem; }
.site-footer .wrap { position: relative; z-index: 1; }

.site-footer__skyline {
	position: absolute;
	inset: auto 0 0 0;
	height: 120px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.035' d='M0 120V70h20V50h15V70h10V30h18V70h12V45h22V70h8V20h16V70h14V55h10V70h20V35h16V70h12V15h20V70h10V60h18V70h16V25h14V70h10V40h20V70h12V50h16V70h20V60h10V70H0z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: bottom;
	opacity: .8;
	pointer-events: none;
}

.site-footer__top { margin-bottom: 2.25rem; text-align: center; }
.site-footer__top p { margin: 0 auto; max-width: 30rem; font-size: .93rem; }
.site-footer__top .site-footer__logo { margin-inline: auto; }

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 2rem 1.5rem;
	margin-top: .5rem;
}
@media (max-width: 980px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-footer__cols { grid-template-columns: 1fr; } }


.footcontact { display: grid; gap: .85rem; }
.footcontact li { margin: 0; display: flex; align-items: flex-start; gap: .6rem; }
.footcontact__icon {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--gold);
	display: grid;
	place-items: center;
}
.footcontact__icon--whatsapp {
	background: #25D366;
}
.footcontact__icon svg { width: 14px; height: 14px; }
.footcontact li a,
.footcontact li span:not(.footcontact__icon) { display: block; font-size: .9rem; color: #e5e7eb; line-height: 1.4; }
.footcontact li a:hover { color: var(--gold); }
.footcontact small { display: block; color: #6b7280; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem; }

.footcontact__bar {
	margin: 0 0 2.75rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
}

.footcontact--row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	margin: 0;
	padding: 0;
}
.footcontact--row li { margin: 0; }
@media (max-width: 640px) {
	.footcontact__bar { padding: 1.1rem; border-radius: 14px; }
	.footcontact--row { justify-content: flex-start; gap: 1rem 1.5rem; }
}

.site-footer__cashnote { margin: .85rem 0 0; font-size: .82rem; color: #6b7280; }

.site-footer__base {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
	font-size: .85rem;
}
.site-footer__tagline { color: #6b7280; }

/* Blog archive pagination */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.pagination .page-numbers:hover { border-color: var(--gold); background: var(--gold-soft); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers.dots { border: 0; }
.pagination .page-numbers.next,
.pagination .page-numbers.prev { padding: 0 1.1rem; }

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

/* ---------- utility ---------- */

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--ink);
	color: #fff;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--gold-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Booking and quote form
   ========================================================================= */

.bookform {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	container-type: inline-size;
}
.bookform--compact { border-top: 4px solid var(--gold); }

.bookform__title {
	margin: 0;
	padding: 1.15rem 1.35rem;
	background: var(--gold);
	font-size: 1.15rem;
	color: var(--ink);
}

.bookform__body { padding: 1.1rem; display: grid; gap: .75rem; min-width: 0; }

.field { display: grid; gap: .3rem; min-width: 0; }

/* compact address autocomplete suggestion list */

.addr-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: .3rem;
	z-index: 40;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: .3rem;
	max-height: 15.5rem;
	overflow-y: auto;
}
.addr-suggest__item {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	width: 100%;
	padding: .45rem .55rem;
	border: none;
	border-radius: calc(var(--radius-sm) - 2px);
	background: transparent;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.addr-suggest__item svg { flex: none; margin-top: .15rem; color: var(--muted); }
.addr-suggest__item:hover,
.addr-suggest__item.is-active { background: var(--gold-soft); }
.addr-suggest__item:hover svg,
.addr-suggest__item.is-active svg { color: var(--gold-dark); }
.addr-suggest__text { display: block; min-width: 0; }
.addr-suggest__text b {
	display: block;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.addr-suggest__text small {
	display: block;
	font-size: .76rem;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.field > label,
.field__label,
.fieldset legend {
	font-size: .82rem;
	font-weight: 700;
	color: var(--ink);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .62rem .85rem;
	font: inherit;
	font-size: .94rem;
	line-height: 1.4;
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color .15s ease;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"],
.field select {
	height: 3rem;
}
.field select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555b66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 18px;
	padding-right: 2.2rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-dark); outline: none; }
.field textarea { resize: vertical; }
.field.has-error input,
.field.has-error select { border-color: #d93025; }

.field-row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.field-row > * { min-width: 0; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

.fieldset {
	margin: 0;
	padding: .75rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	display: grid;
	gap: .55rem;
}
.fieldset__hint { margin: 0; font-size: .82rem; color: var(--muted); }

/* vehicles */

.vehicles { display: grid; gap: .4rem; }
.vehicle { position: relative; display: block; }
.vehicle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.vehicle__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .55rem .85rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all .15s ease;
}
.vehicle__body b { color: var(--ink); font-size: .96rem; }
.vehicle__body small { color: var(--muted); font-size: .84rem; }
.vehicle input:checked + .vehicle__body { border-color: var(--gold-dark); background: var(--gold-soft); }

/* checkboxes */

.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; cursor: pointer; }
.check input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-dark); }
.check b { color: var(--ink); }

/* honeypot */

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* quote panel */

.quote {
	border: 1.5px dashed var(--line);
	border-radius: var(--radius-sm);
	padding: .95rem 1.1rem;
	background: var(--surface-2);
	font-size: .92rem;
	color: var(--muted);
}
.quote .quote__loading,
.quote .quote__off,
.quote .quote__result { display: none; }
.quote[data-state="loading"] .quote__idle,
.quote[data-state="off"] .quote__idle,
.quote[data-state="result"] .quote__idle { display: none; }
.quote[data-state="loading"] .quote__loading { display: block; }
.quote[data-state="off"] .quote__off { display: block; }
.quote__off .js-quote-range { display: block; font-size: 1.7rem; font-weight: 900; color: var(--ink); letter-spacing: -.01em; }
.quote[data-state="result"] .quote__result { display: block; }
.quote[data-state="result"] { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }

.quote__eyebrow {
	display: block;
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: .4rem;
}
.quote[data-state="result"] .quote__eyebrow,
.quote[data-state="off"] .quote__eyebrow { display: none; }
.quote__idletrust {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: .7rem 0 0;
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink);
}
.quote__idletrust svg { color: var(--ok); flex-shrink: 0; }

.quote__route {
	display: flex;
	align-items: center;
	gap: .35rem;
	text-align: left;
	font-weight: 600;
	font-size: .78rem;
	line-height: 1.3;
	color: var(--muted);
	margin-bottom: .5rem;
}
.quote__off > span { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .15rem; }
.quote__specs {
	display: inline-block;
	text-align: left;
	font-size: .74rem;
	font-weight: 700;
	color: var(--gold-dark);
	background: rgba(217, 167, 48, .14);
	padding: .18rem .55rem;
	border-radius: 999px;
	margin-bottom: .75rem;
}

.quote__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px dashed rgba(17, 19, 24, .16);
	font-weight: 700;
	color: var(--ink);
}
.quote__head span {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
.quote__head b { font-size: 1.9rem; letter-spacing: -.02em; }
.quote__includes {
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--gold-dark);
}
.quote__disclaimer {
	margin: .6rem 0 0;
	font-size: .76rem;
	line-height: 1.5;
	color: var(--muted);
}

.quote__confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: .75rem 0 0;
	padding: .4rem .7rem;
	border-radius: 999px;
	background: rgba(16, 163, 74, .12);
	color: #0f7a3a;
	font-size: .8rem;
	font-weight: 700;
}

.bookform__error {
	margin: 0;
	padding: .7rem .9rem;
	border-radius: var(--radius-sm);
	background: #fdecea;
	color: #b3261e;
	font-size: .9rem;
}

.bookform__foot { margin: 0; text-align: center; font-size: .85rem; color: var(--muted); }

/* success */

.bookform__done { padding: 2.25rem 1.5rem; text-align: center; }
/* Some Android WebViews keep auto-darkening regular-weight text even with
   color-scheme/forced-color-adjust set, but leave bold text alone, so this
   confirmation copy is set semibold with a literal !important color as a
   belt-and-suspenders fix on top of the page-level ones. */
.bookform__done p { color: #24262c !important; font-weight: 600; }
.done__tick {
	width: 56px; height: 56px;
	margin: 0 auto 1rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ok);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
}

/* real logo in the header */
.site-header__brand { display: block; line-height: 0; }
.site-header__brand img { width: auto; height: 44px; }
@media (max-width: 900px) { .site-header__brand img { height: 52px; } }
@media (max-width: 400px) { .site-header__brand img { height: 44px; } }

.site-footer__logo {
	height: 68px;
	width: auto;
	margin-bottom: 1rem;
	/* The logo is drawn for the gold header: black wordmark plus white
	   "Airport". On the dark footer the black half disappears, so render it
	   solid white instead. */
	filter: brightness(0) invert(1);
}

/* route map inside the booking form */
.routemap { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.routemap__canvas { width: 100%; aspect-ratio: 5 / 4; background: var(--surface-2); }

/* ---------- tabbed FAQ ---------- */

.faqtabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 1.25rem;
}
.faqtabs__btn {
	padding: .34rem .9rem;
	font: inherit;
	font-size: .87rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--muted);
	background: var(--surface-2);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}
.faqtabs__btn:hover { color: var(--ink); border-color: var(--gold); }
.faqtabs__btn.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
.faqtabs__panel[hidden] { display: none; }

/* sidebar variant: topic list on the left, cards on the right */

.faqtabs--sidebar {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (max-width: 780px) {
	.faqtabs--sidebar { grid-template-columns: 1fr; gap: 1.5rem; }
}

.faqtabs--sidebar .faqtabs__nav {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: .3rem;
	margin-bottom: 0;
	position: sticky;
	top: 1.5rem;
}
@media (max-width: 780px) {
	.faqtabs--sidebar .faqtabs__nav {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-wrap: nowrap;
		padding-bottom: .3rem;
	}
	.faqtabs--sidebar .faqtabs__nav::-webkit-scrollbar { display: none; }
}

.faqtabs--sidebar .faqtabs__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .7rem .9rem;
	background: none;
	border: none;
	border-radius: 10px;
	border-left: 3px solid transparent;
	color: var(--muted);
	text-align: left;
	white-space: nowrap;
}
.faqtabs--sidebar .faqtabs__btn svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.faqtabs--sidebar .faqtabs__btn:hover { background: var(--surface-2); color: var(--ink); }
.faqtabs--sidebar .faqtabs__btn.is-active {
	background: var(--gold-soft);
	border-left-color: var(--gold-dark);
	color: var(--ink);
}
.faqtabs--sidebar .faqtabs__btn.is-active svg { opacity: 1; transform: translateX(2px); }
@media (max-width: 780px) {
	.faqtabs--sidebar .faqtabs__btn { border-left: none; border-radius: 999px; border: 1.5px solid var(--line); flex: 0 0 auto; }
	.faqtabs--sidebar .faqtabs__btn.is-active { border-color: var(--gold-dark); }
	.faqtabs--sidebar .faqtabs__btn svg { display: none; }
}

.faqtabs__panelhead { display: none; }
@media (max-width: 780px) {
	.faqtabs__panelhead { display: block; margin: 0 0 .75rem; font-size: 1.05rem; }
}

.faqtabs--sidebar .faq {
	border-top: none;
	display: grid;
	gap: .6rem;
}
.faqtabs--sidebar .faq details {
	border: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 12px;
	padding-inline: 1.1rem;
	background: var(--surface);
	transition: border-color .15s ease;
}
.faqtabs--sidebar .faq details[open] { border-color: var(--gold-dark); }
.faqtabs--sidebar .faq summary { padding-block: 1rem; }
.faqtabs--sidebar .faq details > div { padding-bottom: 1.1rem; }

/* =========================================================================
   Booking wizard
   ========================================================================= */

.wiz-panel { display: grid; gap: .75rem; min-width: 0; }
.wiz-panel[hidden] { display: none; }

.wiz-actions { display: flex; gap: .75rem; }
.wiz-actions .btn { flex: 1 1 auto; }
.wiz-actions .btn--ghost { flex: 0 0 auto; border-color: var(--line); color: var(--muted); }

/* locate me button inside the pickup field */
.field__with-btn { position: relative; }
.field__with-btn input { padding-right: 3rem; }
.locate {
	position: absolute;
	right: .4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: var(--gold-soft);
	color: var(--gold-dark);
	cursor: pointer;
	animation: tma-locate-pulse 2s ease-in-out infinite;
}
.locate:hover {
	background: var(--gold);
	color: var(--ink);
	animation: none;
}
.locate:disabled { opacity: .55; cursor: default; animation: none; }

/* A soft gold pulse, so the control reads as tappable without shouting. */
@keyframes tma-locate-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224, 168, 0, .55); }
	70%      { box-shadow: 0 0 0 7px rgba(224, 168, 0, 0); }
}

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

/* fare shown against each vehicle option */
.vehicle__body { justify-content: space-between; }
.vehicle__body > span:first-child { display: block; }
.vehicle__fare { font-weight: 800; color: var(--ink); white-space: nowrap; }

.charcount { display: block; text-align: right; font-size: .78rem; color: var(--muted); }

.summary {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: .85rem 1rem;
	background: var(--surface-2);
	font-size: .82rem;
}
.summary .fare-row { padding: .45rem 0; border-color: rgba(17, 19, 24, .1); align-items: baseline; }
.summary .fare-row span:first-child { flex: 0 0 auto; white-space: nowrap; font-size: .78rem; color: var(--muted); font-weight: 600; }
.summary .fare-row span:last-child { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: 600; text-align: right; }
.summary .fare-row--total { border-top: 1px solid rgba(17, 19, 24, .16); margin-top: .2rem; padding-top: .65rem; }
.summary .fare-row--total span:last-child { font-size: .95rem; font-weight: 800; color: var(--gold-dark); }


/* =========================================================================
   Sticky action bar

   One wide call button plus two secondary contact icons, the 13cabs pattern.
   Light surface so it reads as a control bar rather than another dark band.
   ========================================================================= */

.stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem .7rem calc(.45rem + env(safe-area-inset-bottom));
	background: #f4f5f7;
	border-top: 1px solid rgba(17, 19, 24, .08);
	box-shadow: 0 -4px 20px rgba(17, 19, 24, .1);
}

.stickybadge {
	flex: 0 0 auto;
	display: inline-flex;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: var(--ink);
	box-shadow: 0 0 0 1.5px var(--gold), 0 0 14px 2px rgba(255, 192, 0, .55);
	text-decoration: none;
	line-height: 1;
	animation: tma-badge-glow 2.4s ease-in-out infinite;
}
.stickybadge svg { width: 16px; height: 16px; }
.stickybadge b { color: var(--gold); font-size: .64rem; font-weight: 800; margin-top: 2px; white-space: nowrap; }

@keyframes tma-badge-glow {
	0%, 100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 10px 1px rgba(255, 192, 0, .4); }
	50% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 18px 4px rgba(255, 192, 0, .75); }
}
@media (prefers-reduced-motion: reduce) {
	.stickybadge { animation: none; }
}


.stickybar__call {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	min-height: 46px;
	padding: .4rem 1.1rem;
	border-radius: 26px;
	background: var(--gold);
	color: var(--ink);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: background-color .15s ease, transform .12s ease;
}
.stickybar__call:hover { background: var(--gold-dark); }
.stickybar__call:active { transform: translateY(1px); }
.stickybar__call svg { width: 20px; height: 20px; flex: 0 0 20px; }

.stickybar__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1.5px solid rgba(17, 19, 24, .16);
	border-radius: 13px;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.stickybar__icon:hover { border-color: var(--gold-dark); background: var(--gold-soft); }
.stickybar__icon svg { width: 21px; height: 21px; }

.stickybar__icon--whatsapp { background: #25D366; border-color: #25D366; }
.stickybar__icon--whatsapp:hover { background: #1ebd5a; border-color: #1ebd5a; }

/* Keep the page end clear of the bar. */
.site-footer { padding-bottom: calc(1.5rem + 62px); }

@media (min-width: 900px) {
	.stickybar {
		left: auto;
		width: min(28rem, 40vw);
		right: 1.25rem;
		bottom: 1.25rem;
		border-radius: 34px;
		border-top: 0;
		padding: .55rem .6rem;
	}
	.site-footer { padding-bottom: 1.5rem; }
}

/* The sticky bar carries Call Now on mobile, so the header does not repeat it. */
@media (max-width: 900px) {
	.site-header__phone { display: none; }
}

/* Booking form leads on small screens (client requirement), heading/points then reviews follow. */
@media (max-width: 999px) {
	.hero__inner { display: flex; flex-direction: column; align-items: stretch; }
	.hero__form { order: -1; }
	.hero__copy { order: 0; align-self: stretch; width: 100%; }
	.hero { padding-block: 1.5rem 2.5rem; }
	.hero h1 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
	.hero__proof { gap: 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; }
	.hero__proof b { font-size: 1.25rem; }
}

/* real vehicle photography */
.fleet-card__media { padding: .5rem; background: #fff; }
.vehicle-img { width: 100%; height: auto; object-fit: contain; }
.vehicle__body .vehicle-img { width: 68px; flex: 0 0 68px; margin-right: .2rem; }

/* vehicle picker rows in the booking form */
.vehicle__body { display: flex; align-items: center; gap: .75rem; }
.vehicle__text { display: block; flex: 1 1 auto; }
.vehicle__text b { display: block; }

/* =========================================================================
   Responsive hardening

   Nothing on the page may cause the body to scroll sideways. Wide content
   (tables, code, long unbroken strings) scrolls inside its own container.
   ========================================================================= */

html, body { max-width: 100%; overflow-x: hidden; }

/* Long words and URLs cannot push a container wider than the viewport. */
body, p, li, td, th, blockquote, summary, .lede, .card, .prose {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Wide content scrolls in place rather than breaking the page. */
.table-scroll,
.prose table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.table-scroll { margin-top: 1.25rem; }
.table-scroll table { min-width: 22rem; }

.ftable {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}
.ftable th,
.ftable td {
	padding: .65rem .55rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.ftable th {
	border-bottom-width: 2px;
	color: var(--ink);
	font-weight: 700;
}
.ftable .num { text-align: right; }
.ftable td.num { font-weight: 700; color: var(--ink); }

/* Images never exceed their column. */
img, svg, video, iframe, embed, object { max-width: 100%; }
iframe { width: 100%; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
	:root { --gap: 1rem; }

	/* Proof numbers wrap to two per row instead of squeezing to three. */
	.hero__proof { gap: 1rem 1.5rem; }
	.hero__proof > div { flex: 1 1 8rem; }

	/* Trust strip reads as a list, not a cramped row. */
	.trust ul { gap: .4rem 1.25rem; }
	.trust li { font-size: .85rem; }

	/* Fare breakdown rows can wrap when a label is long. */
	.fare-row { flex-wrap: wrap; gap: 0 .75rem; }
	.fare-box__head { flex-wrap: wrap; }
	.fare-box__head b { font-size: 1.5rem; }

	/* Route cards stack their fare under the label rather than colliding. */
	.route-card { align-items: flex-start; }
	.route-card__fare { font-size: 1.05rem; }

	/* Journey timeline pulls in so text is not squeezed into a narrow column. */
	.journey li { padding-left: 1.6rem; }

	/* Steps in the how it works grid. */
	.step { padding-left: 3rem; }

	/* Section rhythm tightens up. */
	.section { padding-block: 2.5rem; }

	/* Wizard actions stack when two buttons will not fit. */
	.wiz-actions { flex-wrap: wrap; }
	.wiz-actions .btn { flex: 1 1 100%; }
	.wiz-actions .btn--ghost { order: 2; }

	/* Vehicle picker: keep the thumbnail small so text has room. */
	.vehicle__body .vehicle-img { width: 54px; flex: 0 0 54px; }
	.vehicle__body { gap: .55rem; }
	.vehicle__fare { font-size: .95rem; }

	/* Buttons in a row should wrap, never overflow. */
	.btn { max-width: 100%; }
	p .btn + .btn { margin-top: .5rem; }
}

@media (max-width: 380px) {
	/* The tightest common phone width. Keep the wizard usable. */
	.wiz-steps { padding: .9rem .8rem; }
	.bookform__body { padding: 1rem; }
	.field-row { grid-template-columns: 1fr; }
	.triptype span { font-size: .88rem; padding: .6rem .4rem; }
	.stickybar__call { font-size: .94rem; }
	.stickybar__icon { width: 42px; height: 42px; }
}

/* Chips can get very long on the service areas page. */
.chips a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* account payment hint inside the booking form */
.payhint {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .6rem .8rem;
	border-radius: var(--radius-sm);
	background: var(--gold-soft);
	color: var(--ink);
	font-size: .84rem;
	font-weight: 600;
}
.payhint svg { flex: 0 0 15px; color: var(--gold-dark); }

/* clickable cards in the account types grid */
a.card { display: block; color: inherit; transition: border-color .15s ease, transform .12s ease; }
a.card:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Service areas page: distance-band jump nav and section headers */
.areajump {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}
.areajump a {
	padding: .5rem .95rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.areajump a:hover { border-color: var(--gold-dark); background: var(--gold-soft); }

.areaband { scroll-margin-top: 1.5rem; }
.areaband + .areaband { margin-top: 2.75rem; }
.areaband__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.25rem;
}
.areaband__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: var(--gold-soft);
	color: var(--gold-dark);
	font-size: .78rem;
	font-weight: 800;
}

@media (max-width: 640px) {
	.areajump { gap: .45rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
	.areajump a { padding: .45rem .8rem; font-size: .8rem; }
}

/* =========================================================================
   Homepage hero

   The form is the tall element here, so the copy column carries enough
   substance to sit beside it rather than looking stranded at the top.
   ========================================================================= */

.hero--home {
	/* The photo sits far right on wide screens where the form does not cover
	   it. On narrow screens it is dropped entirely, because behind text it
	   reads as a smudge rather than an image. */
	background-image:
		linear-gradient(100deg, #111318 0%, #111318 52%, rgba(17,19,24,.94) 66%, rgba(17,19,24,.78) 100%),
		url("../img/hero.jpg");
	background-size: cover;
	background-position: right center;
}
.hero--home::after { display: none; }

.hero__copy { align-self: center; }

.hero__points {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .6rem;
}
.hero__points li {
	position: relative;
	padding-left: 1.75rem;
	font-size: .97rem;
	color: #c9cdd6;
}
.hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 1rem;
	height: .55rem;
	border-left: 2.5px solid var(--gold);
	border-bottom: 2.5px solid var(--gold);
	transform: rotate(-45deg);
}

.hero__call {
	margin-top: 1.25rem;
	font-size: .95rem;
	color: #9aa1ad;
}
.hero__call a {
	color: var(--gold);
	font-weight: 800;
	text-decoration: none;
	font-size: 1.1rem;
	margin-left: .3rem;
}
.hero__call a:hover { text-decoration: underline; }

/* The form column gets a touch more width, since it holds the wizard. */
@media (min-width: 1000px) {
	.hero__inner { grid-template-columns: 1fr minmax(25rem, 28rem); gap: clamp(2rem, 4vw, 3.5rem); }
}

@media (max-width: 999px) {
	/* Keep the form first on mobile, but the points below it read as support. */
	.hero__points { margin-top: 1.25rem; }
	.hero__points li { font-size: .92rem; }
	.hero--home { background-image: none; background-color: var(--ink); }
}

/* =========================================================================
   Payment method badges
   ========================================================================= */

.payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-top: 1.5rem;
}
.payment-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	flex-shrink: 0;
}
.payment-badge img { height: 32px; width: auto; display: block; }
.payment-badge--wordmark img { height: 30px; }

.payments--form { margin-top: .25rem; gap: .6rem; }
.payments--form .payment-badge img { height: 24px; }
.payments--form .payment-badge--wordmark img { height: 20px; }

/* Cabcharge is a dark wordmark on a transparent PNG, so it needs a light
   backer to stay legible on dark sections and the footer. Every other badge
   already carries its own card artwork and sits flush with no wrapper. */
.section--dark .payment-badge--wordmark,
.site-footer .payment-badge--wordmark {
	background: #fff;
	border-radius: 999px;
	padding: .4rem .8rem;
}

@media (max-width: 640px) {
	.payment-badge img { height: 26px; }
	.payment-badge--wordmark img { height: 20px; }
}

/* =========================================================================
   Mobile: map above the form fields

   On a phone the map is the fastest way to confirm the route is right, so it
   moves to the top of step 1 rather than sitting below a long field stack.
   ========================================================================= */

@media (max-width: 999px) {
	.wiz-panel[data-panel="1"] { display: flex; flex-direction: column; }
	.wiz-panel[data-panel="1"] .routemap { order: -2; }
	.wiz-panel[data-panel="1"] .quote { order: -1; }
	.wiz-panel[data-panel="1"] .routemap__canvas { aspect-ratio: 5 / 4; }
}

/* =========================================================================
   Compact booking form

   The wizard carries a lot of fields, so the spacing is tightened to keep the
   panel a sensible height without the inputs becoming cramped to tap.
   ========================================================================= */

.bookform__body { padding: 1rem; gap: .7rem; }
.bookform__title { padding: .9rem 1rem; font-size: 1.05rem; }

.wiz-steps { padding: .8rem 1rem; }
.wiz-panel { gap: .7rem; }

.field { gap: .28rem; }
.field > label,
.field__label,
.fieldset legend { font-size: .8rem; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
	padding: .62rem .75rem;
	font-size: .94rem;
}

.field-row { gap: .7rem; }

.fieldset { padding: .75rem .8rem; gap: .55rem; }
.fieldset__hint { font-size: .8rem; }

.triptype { gap: .4rem; }
.triptype span { padding: .55rem; font-size: .89rem; }

.vehicle__body { padding: .55rem .7rem; gap: .6rem; }
.vehicle__body b { font-size: .93rem; }
.vehicle__body small { font-size: .8rem; }
.vehicles { gap: .4rem; }

.check { font-size: .89rem; gap: .5rem; }
.check input { width: 1rem; height: 1rem; }

.quote { padding: .7rem .85rem; font-size: .88rem; }
.quote__head b { font-size: 1.45rem; }
.quote__meta { font-size: .83rem; }

.payhint { padding: .5rem .7rem; font-size: .8rem; }
.routemap__canvas { aspect-ratio: 5 / 4; }

.bookform .btn--lg { padding: .85rem 1.4rem; font-size: 1rem; }
.bookform__foot { font-size: .8rem; }
.charcount { font-size: .74rem; }

@media (max-width: 640px) {
	.bookform__body { padding: .85rem; gap: .6rem; }
	.wiz-steps { padding: .7rem .85rem; }
	.routemap__canvas { aspect-ratio: 5 / 4; }
}

/* =========================================================================
   Return trip switch

   A single toggle rather than a pair of radio pills. The return date and time
   only appear once it is on, so a one way booking never shows fields it does
   not need.
   ========================================================================= */

.tripswitch {
	padding: .7rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}

.switch {
	display: flex;
	align-items: center;
	gap: .7rem;
	cursor: pointer;
	margin: 0;
}
.switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.switch__track {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 25px;
	border-radius: 999px;
	background: #c9cdd6;
	transition: background-color .18s ease;
}
.switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(17, 19, 24, .3);
	transition: transform .18s ease;
}
.switch input:checked ~ .switch__track { background: var(--gold-dark); }
.switch input:checked ~ .switch__track .switch__thumb { transform: translateX(19px); }
.switch input:focus-visible ~ .switch__track {
	outline: 3px solid var(--gold-dark);
	outline-offset: 2px;
}

.switch__label { display: block; line-height: 1.35; }
.switch__label b { display: block; color: var(--ink); font-size: .93rem; }
.switch__label small { display: block; color: var(--muted); font-size: .81rem; margin-top: .1rem; }

/* Fixed price trust badge, styled as a real (but purely cosmetic) switch. */
.fixedswitch {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1.1rem;
	margin-bottom: 1rem;
	background: var(--gold-soft);
	border: 1px solid var(--gold);
	border-radius: var(--radius-sm);
}
.fixedswitch__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--gold-dark);
}
.fixedswitch__icon svg { width: 20px; height: 20px; }
.fixedswitch__switch { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.fixedswitch__switch .switch__label { order: -1; }

/* =========================================================================
   Google rating badge

   297 reviews at 5.0 is the strongest trust signal this business has, so it
   gets treated as a single confident object rather than one stat among three.
   ========================================================================= */

.ratingrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .9rem; }

.ratingbadge,
.ratingrow__cta {
	display: inline-flex;
	align-items: center;
	min-height: 62px;
	border-radius: 999px;
	text-decoration: none;
	margin-top: 1.6rem;
}

.ratingbadge {
	gap: .75rem;
	padding: .5rem 1.15rem .5rem .5rem;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .05);
	transition: border-color .15s ease, background-color .15s ease;
}
.ratingbadge:hover { border-color: var(--gold); background: rgba(255, 192, 0, .1); }

.ratingbadge__score {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: #fff;
}
.ratingbadge__body { display: block; line-height: 1.3; }
.ratingbadge__stars { display: flex; align-items: center; gap: .35rem; color: var(--gold); font-size: .95rem; letter-spacing: .1em; }
.ratingbadge__stars b { color: #fff; font-weight: 800; letter-spacing: 0; font-size: .95rem; }
.ratingbadge__count { display: block; color: #c9cdd6; font-size: .82rem; margin-top: .15rem; letter-spacing: normal; }
.ratingbadge__count b { color: #fff; font-weight: 800; }

.ratingrow__cta {
	gap: .45rem;
	padding: 0 1.3rem;
	background: #fff;
	color: var(--ink);
	font-weight: 800;
	font-size: .88rem;
	transition: background-color .15s ease, transform .12s ease;
}
.ratingrow__cta:hover { background: var(--gold-soft); }
.ratingrow__cta:active { transform: translateY(1px); }
.ratingrow__cta svg { color: var(--gold-dark); }

/* Hero points: tighter, and no orphaned third row. */
.hero__points { gap: .55rem; }

@media (max-width: 640px) {
	.ratingbadge,
	.ratingrow__cta { margin-top: 1.25rem; min-height: 54px; }
	.ratingbadge { padding: .45rem .9rem .45rem .45rem; gap: .6rem; }
	.ratingbadge__score { width: 38px; height: 38px; flex-basis: 38px; }
	.ratingrow__cta { padding: 0 1.1rem; font-size: .84rem; }
	/* Trust strip items sit two per row instead of wrapping to a ragged three. */
	.trust ul { gap: .5rem 1.1rem; }
	.trust li { font-size: .82rem; }
}

/* compact rating line, reused at decision points */
.ratingline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	font-size: .87rem;
	color: var(--muted);
}
.ratingline__stars { color: var(--gold-dark); letter-spacing: .1em; }
.ratingline b { color: var(--ink); font-weight: 800; }

.ratingline--form {
	padding: .55rem;
	border-radius: var(--radius-sm);
	background: var(--gold-soft);
}
.ratingline--cta { margin-top: 1rem; color: rgba(17, 19, 24, .75); }
.ratingline--cta .ratingline__stars { color: var(--ink); }

.ratingline--navdrawer {
	margin-top: .9rem;
	padding: .65rem .8rem;
	border-radius: 12px;
	background: var(--gold-soft);
	border: 1.5px solid var(--gold);
	font-size: .95rem;
}
.ratingline--navdrawer .ratingline__stars { color: var(--gold-dark); font-size: 1.05rem; letter-spacing: .06em; }
.ratingline--navdrawer b { font-size: 1.05rem; }

/* =========================================================================
   Add a stop

   A proper outlined button rather than a bare text link, and the remove
   control centred on the input instead of the whole labelled row.
   ========================================================================= */

.addstop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 100%;
	padding: .6rem .9rem;
	border: 1.5px dashed var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: inherit;
	font-size: .87rem;
	font-weight: 700;
	color: var(--muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.addstop::before {
	content: "+";
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
	color: var(--gold-dark);
}
.addstop:hover {
	border-color: var(--gold-dark);
	color: var(--ink);
	background: var(--gold-soft);
}
.addstop[hidden] { display: none; }

/* stop rows */

.stop-row .field__with-btn { display: block; position: relative; }
.stop-row input { padding-right: 2.9rem; }

.remove-stop {
	position: absolute;
	top: 50%;
	right: .45rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.remove-stop svg { width: 15px; height: 15px; display: block; }
.remove-stop:hover { background: #fdecea; color: #b3261e; }

/* the locate button uses the same wrapper, keep it consistent */
.field__with-btn { position: relative; }

/* =========================================================================
   Trust bar

   Icon led with a label and a supporting line, rather than four bare strings
   that wrapped into a ragged block on narrow screens.
   ========================================================================= */

.trustbar {
	background: var(--gold);
	border-block: 1px solid rgba(17, 19, 24, .08);
}
.trustbar__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: .25rem 1.5rem;
	padding-block: 1.1rem;
}
.trustbar__item {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .35rem 0;
}
.trustbar__icon {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(17, 19, 24, .1);
	color: var(--ink);
}
.trustbar__icon svg { width: 19px; height: 19px; }
.trustbar__text { display: block; line-height: 1.25; }
.trustbar__text b { display: block; color: var(--ink); font-size: .92rem; font-weight: 800; }
.trustbar__text small { display: block; color: rgba(17, 19, 24, .66); font-size: .8rem; }

@media (max-width: 640px) {
	.trustbar__inner { grid-template-columns: 1fr 1fr; gap: .25rem .9rem; padding-block: .9rem; }
	.trustbar__icon { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
	.trustbar__icon svg { width: 16px; height: 16px; }
	.trustbar__text b { font-size: .82rem; }
	.trustbar__text small { display: none; }
}

/* =========================================================================
   Review marquee

   Fed live from the Google profile. Loops only when there are enough cards to
   loop with, so a short list sits centred instead of scrolling oddly.
   ========================================================================= */

.revmarquee {
	margin-top: 2rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.revmarquee__track { display: flex; width: max-content; }
.revmarquee__row { display: flex; gap: 1rem; padding-inline: .5rem; }

.revmarquee:not(.is-scrolling) .revmarquee__track {
	width: 100%;
	justify-content: center;
}
.revmarquee:not(.is-scrolling) { -webkit-mask-image: none; mask-image: none; }

.revmarquee.is-scrolling .revmarquee__track {
	animation: tma-marquee 46s linear infinite;
}
.revmarquee.is-scrolling:hover .revmarquee__track { animation-play-state: paused; }

@keyframes tma-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.revmarquee.is-scrolling .revmarquee__track { animation: none; }
	.revmarquee { overflow-x: auto; }
}

/* top of page trust marquee, right under the header */

.topmarquee {
	overflow: hidden;
	background: var(--ink);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topmarquee__track { display: flex; width: max-content; animation: tma-marquee 32s linear infinite; }
.topmarquee__row { display: flex; gap: 2.25rem; padding: .55rem 1.5rem; }
.topmarquee__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	font-size: .82rem;
	font-weight: 600;
	color: #c9cdd6;
	white-space: nowrap;
}
.topmarquee__item svg { color: var(--gold); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
	.topmarquee__track { animation: none; }
	.topmarquee { overflow-x: auto; }
}

.revcard {
	flex: 0 0 min(22rem, 82vw);
	margin: 0;
	padding: 1.25rem 1.35rem;
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: .7rem;
}
.revcard blockquote {
	margin: 0;
	color: #c9cdd6;
	font-size: .97rem;
	line-height: 1.55;
	flex: 1 1 auto;
}
.revcard figcaption { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.revcard figcaption b { color: #fff; font-size: .92rem; }
.revcard figcaption small { color: #8d94a1; font-size: .8rem; }

/* =========================================================================
   Wizard step header

   Names the current step in words. Three numbered circles joined by long
   empty lines told the customer nothing about where they were.
   ========================================================================= */

.wizhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}

.wizhead__bar { display: flex; align-items: flex-start; width: 100%; }

.wiz-step-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 0 0 auto; }

.wiz-step {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	border: 1.5px solid rgba(17, 19, 24, .35);
	background: transparent;
	color: var(--ink);
	font-size: .8rem;
	font-weight: 800;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wiz-step-wrap.is-active .wiz-step,
.wiz-step-wrap.is-done .wiz-step { background: var(--ink); border-color: var(--ink); color: #fff; }

.wiz-step-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: rgba(17, 19, 24, .6);
	white-space: nowrap;
}
.wiz-step-wrap.is-active .wiz-step-label,
.wiz-step-wrap.is-done .wiz-step-label { color: var(--ink); }

.wiz-line { flex: 1 1 auto; height: 1.5px; margin-top: 12px; background: rgba(17, 19, 24, .2); transition: background-color .2s ease; }
.wiz-line.is-done { background: var(--ink); }

@media (max-width: 400px) {
	.wizhead { padding: .75rem .85rem; gap: .6rem; }
	.wiz-step { width: 22px; height: 22px; flex-basis: 22px; font-size: .74rem; }
	.wiz-step-label { font-size: .62rem; }
	.wiz-line { margin-top: 10px; }
}

/* =========================================================================
   Additional services

   Kiwitaxi's card pattern: real photography left, text right, scrolling
   horizontally rather than stacking into a long grid.
   ========================================================================= */

.rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: -.2rem auto 1rem;
	border-radius: 2px;
	background: var(--gold);
}
.section-head:not(.section-head--center) .rule { margin-inline: 0; }

.routegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
	gap: .6rem;
}

.routecard {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .8rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.routecard:hover { border-color: var(--gold-dark); box-shadow: var(--shadow); transform: translateY(-1px); }

.routecard__icon { flex: 0 0 auto; color: var(--gold-dark); }
.routecard__icon svg { width: 16px; height: 16px; display: block; }

.routecard__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .87rem;
	font-weight: 700;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.routecard__price { flex: 0 0 auto; font-size: .87rem; font-weight: 800; color: var(--gold-dark); }

.routesband__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .84rem;
	color: #9aa0ac;
}
.routesband__foot a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--gold);
	font-weight: 700;
}
.routesband__foot a svg { width: 16px; height: 16px; }

.routesband .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .25); }
.routesband .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.routesband--light { background: var(--surface-2); }
.routesband--light .routeline { border-bottom-color: var(--line); }
.routesband--light .routeline__stop { color: var(--muted); }
.routesband--light .routeline__stop--end { color: var(--ink); }
.routesband--light .routeline__dot { border-color: #b7bcc6; }
.routesband--light .routeline__fare small { color: var(--muted); }
.routesband--light .routeline__arrow { color: var(--muted); }
.routesband--light .routesband__foot { border-top-color: var(--line); color: var(--muted); }
.routesband--light .btn--ghost { color: var(--ink); border-color: var(--line); }
.routesband--light .btn--ghost:hover { border-color: var(--gold-dark); color: var(--gold-dark); }

/* fare estimator page: dark split form */

.bookform--dark,
.js-fareform {
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	margin-top: 1.75rem;
}

.farecols {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}
@media (max-width: 1100px) {
	.farecols { grid-template-columns: 1fr; }
}

.farecols__main { display: grid; gap: 1.1rem; }
.farecols__sticky { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }

.farecols__cta {
	max-width: 26rem;
	margin: 2.5rem auto 0;
	display: grid;
	gap: .6rem;
	text-align: center;
}
@media (max-width: 1100px) { .farecols__sticky { position: static; } }

/* dark field skin, scoped to the fare estimator form */

.bookform--dark .field > label,
.bookform--dark .field__label,
.bookform--dark .fieldset legend { color: #9aa0ac; }
.bookform--dark .field input[type="text"],
.bookform--dark .field input[type="tel"],
.bookform--dark .field input[type="email"],
.bookform--dark .field input[type="date"],
.bookform--dark .field input[type="time"],
.bookform--dark .field select,
.bookform--dark .field textarea {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	color-scheme: dark;
}
.bookform--dark .field input::placeholder { color: #6b7280; }
.bookform--dark .field input:focus,
.bookform--dark .field select:focus { border-color: var(--gold); }

.bookform--dark .tripswitch { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.bookform--dark .switch__label b { color: #fff; }
.bookform--dark .switch__label small { color: #9aa0ac; }

.bookform--dark .extras { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }

.bookform--dark .addstop {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .18);
	color: #9aa0ac;
}
.bookform--dark .addstop:hover { background: rgba(255, 192, 0, .08); border-color: var(--gold-dark); color: #fff; }

.bookform--dark .payhint {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .1);
	color: #9aa0ac;
}
.bookform--dark .payhint svg { color: var(--gold); }

/* address rows with pin icons, clear buttons and a swap toggle */

.addressgroup { position: relative; display: grid; gap: .55rem; }
.addressfield {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 2.4rem .7rem 2.6rem;
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
}
.addressfield:focus-within { border-color: var(--gold-dark); }
.addressfield__icon {
	position: absolute;
	left: .8rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gold-dark);
	display: flex;
}
.addressfield input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: .94rem;
	color: var(--ink);
}
.addressfield input:focus { outline: none; }
.addressfield input::placeholder { color: #9aa3af; }
.addressfield__clear {
	position: absolute;
	right: .7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--muted);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.addressfield__clear:hover { background: var(--line); color: var(--ink); }

.addressgroup__swap {
	position: absolute;
	right: -15px;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface);
	border: 1.5px solid var(--line);
	color: var(--gold-dark);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow);
}
@media (max-width: 640px) {
	.addressgroup__swap { right: 4px; }
}
.addressgroup__swap:hover { border-color: var(--gold-dark); }

/* vehicle choice cards, "Pick your ride" */

.vehicles--cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
}
/* Keyed off the .bookform's own width (a container query), not the viewport,
   so this steps down to 2 columns whenever the form itself is narrow — a
   sidebar wizard step on a wide desktop screen included, not just small
   viewports. */
@container (max-width: 640px) {
	.vehicles--cards { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}
@media (max-width: 480px) {
	.vehicles--cards { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}
.vehicles--cards .vehicle__body {
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: .9rem .9rem 1rem;
	height: 100%;
	background: var(--surface);
	border-color: var(--line);
	box-shadow: var(--shadow);
}
.vehicles--cards .vehicle input:checked + .vehicle__body { border-color: var(--gold-dark); background: var(--gold-soft); }
.vehicles--cards .vehicle-img { width: 100%; flex: none; margin: 0 0 .2rem; }
.vehicles--cards .vehicle__text { width: 100%; }
.vehicles--cards .vehicle__text b { color: var(--ink); }
.vehicles--cards .vehicle__text small { color: var(--muted); }
.vehicles--cards .vehicle__fare { color: var(--gold-dark); font-size: 1.02rem; }

/* the fare card itself, restyled dark and elevated */

.bookform--dark .quote {
	border: 1.5px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	color: #9aa0ac;
}
.bookform--dark .quote[data-state="result"] { border-color: var(--gold); background: rgba(255, 192, 0, .07); }
.bookform--dark .quote__idle,
.bookform--dark .quote__loading { color: #9aa0ac; }
.bookform--dark .quote__route { color: #9aa0ac; }
.bookform--dark .quote__head,
.bookform--dark .quote__break .fare-row span:first-child { color: #e5e7eb; }
.bookform--dark .quote__head span { color: #9aa0ac; }
.bookform--dark .quote__head b { color: #fff; }
.bookform--dark .quote__head { border-bottom-color: rgba(255, 255, 255, .14); }
.bookform--dark .quote__specs { color: var(--gold); background: rgba(255, 192, 0, .14); }
.bookform--dark .quote__meta,
.bookform--dark .quote__allinclusive { color: #9aa0ac; }
.bookform--dark .quote__break summary { color: var(--gold); }
.bookform--dark .quote__break .fare-row { border-color: rgba(255, 255, 255, .1); }
.bookform--dark .quote__break .fare-row span:last-child { color: #e5e7eb; }
.bookform--dark .fare-row--total span { color: #fff; }

.bookform--dark .bookform__foot { text-align: center; color: #9aa0ac; }
.bookform--dark .bookform__foot a { color: var(--gold); }
.bookform--dark .bookform__error { color: #ff8a8a; }

.bookform--dark .routemap { border-color: rgba(255, 255, 255, .12); }
.bookform--dark .remove-stop { color: #9aa0ac; }
.bookform--dark .remove-stop:hover { background: rgba(255, 138, 138, .15); color: #ff8a8a; }
.bookform--dark .stop-row input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #fff; }

/* fare estimator page */

.faresband .section-head { max-width: 42rem; }
.faresband .lede { color: #9aa0ac; }

.fareswrap {
	margin-top: 2.25rem;
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 2.5rem;
	align-items: start;
}
@media (max-width: 1100px) {
	.fareswrap { grid-template-columns: 1fr; }
	.faresaside { order: -1; }
	.faresaside__sticky { position: static; }
}

.faresbadges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 1.4rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}
.faresbadges li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--body);
}
.faresbadges svg { color: var(--gold-dark); flex-shrink: 0; }

.faresstep { display: flex; gap: .9rem; margin-bottom: 1.25rem; align-items: flex-start; }
.faresstep__num {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--ink);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: .92rem;
}
.faresstep h2 { margin: 0 0 .25rem; color: var(--ink); font-size: 1.2rem; }
.faresstep p { margin: 0; color: var(--muted); font-size: .9rem; }

@media (max-width: 720px) {
	.faresband__extra { display: none; }
}

.faresquick { margin-bottom: 1rem; }
.faresquick__label { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.faresquick__row { display: flex; flex-wrap: wrap; gap: .55rem; }
.faresquick__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .85rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.faresquick__chip svg { color: var(--gold-dark); flex-shrink: 0; }
.faresquick__chip:hover,
.faresquick__chip.is-active { border-color: var(--gold-dark); color: var(--ink); background: var(--gold-soft); }

.farebreak {
	padding: 1.1rem 1.25rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
}
.farebreak__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	color: #e5e7eb;
	font-size: .92rem;
}
.farebreak__row:last-of-type { border-bottom: 0; }
.farebreak__row span:last-child { font-weight: 800; color: var(--gold); }
.farebreak__note { margin: .85rem 0 0; color: #9aa0ac; font-size: .85rem; }

.faresaside__sticky { position: sticky; top: 1.5rem; }
.fareshelp {
	padding: 1.25rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
}
.fareshelp b { display: block; color: var(--muted); font-size: .82rem; font-weight: 700; margin-bottom: .6rem; }
.fareshelp a { display: block; color: var(--gold-dark); font-size: 1.2rem; font-weight: 800; }
.fareshelp a small { display: block; margin-top: .25rem; color: var(--muted); font-size: .78rem; font-weight: 400; }

/* trip mode + airport transfer picker */

.tripform-panel {
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	padding: 1rem;
	display: grid;
	gap: .7rem;
}
.tripform-panel .addressgroup { margin: 0; }

.tripmode { display: flex; gap: .5rem; margin-bottom: 0; }
.tripmode__opt {
	flex: 1 1 0;
	padding: .6rem .5rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--muted);
	font-size: .86rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tripmode__opt.is-active { border-color: var(--gold-dark); background: var(--gold-soft); color: var(--ink); }

.airportpicker { display: grid; gap: .5rem; margin-bottom: 0; }
.airportpicker__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.airportpicker__row > * { min-width: 0; }
.airportpicker__opt {
	padding: .65rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.airportpicker__opt b { display: block; color: var(--ink); font-size: .88rem; }
.airportpicker__opt small { display: block; margin-top: .1rem; color: var(--muted); font-size: .78rem; }
.airportpicker__opt.is-active { border-color: var(--gold-dark); background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); }
.airportpicker__opt.is-active b,
.airportpicker__opt.is-active small { color: var(--ink); }

.dirpicker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dirpicker > * { min-width: 0; }
.dirpicker__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .55rem .6rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--muted);
	font-size: .84rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dirpicker__opt.is-active { border-color: var(--gold-dark); background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--ink); }

/* extras card (step 2, vehicle + flight extras) */

.extras {
	margin: 0;
	padding: 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	display: grid;
	gap: .9rem;
}
.extras__title { display: block; float: none; width: auto; padding: 0; margin: 0; color: var(--ink); font-size: .88rem; font-weight: 800; }
.extras .field > label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.extras .field__optional { text-transform: none; font-weight: 400; letter-spacing: 0; }
.extras .field input[type="text"],
.extras .field select {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}
.extras .field input::placeholder { color: #9aa3af; }
.extras .field input:focus,
.extras .field select:focus { border-color: var(--gold-dark); }

.extrarow { padding: 0; }
.extrarow.switch { align-items: center; }
.extrarow__icon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--gold-dark);
	display: grid;
	place-items: center;
}
.extrarow__icon svg { width: 16px; height: 16px; }
.extrarow__body { flex: 1 1 auto; min-width: 0; }
.extrarow__body b { display: block; color: var(--ink); font-size: .9rem; }
.extrarow__body small { display: block; color: var(--muted); font-size: .78rem; margin-top: .1rem; }

/* phone country selector */

.phonefield { position: relative; display: flex; align-items: stretch; }
.phonefield__code {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex: 0 0 auto;
	padding: 0 .7rem;
	border: 1.5px solid var(--line);
	border-right: none;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	background: var(--surface-2);
	font-weight: 700;
	font-size: .9rem;
	color: var(--ink);
	cursor: pointer;
}
.phonefield__code svg { color: var(--muted); margin-left: .1rem; }
.js-phone-flag img.emoji,
.phonelist__options img.emoji { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.phonefield__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

.phonelist {
	position: absolute;
	z-index: 20;
	top: calc(100% + .4rem);
	left: 0;
	width: min(300px, 100%);
	padding: .5rem;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}
.phonelist__search {
	width: 100%;
	margin-bottom: .4rem;
	padding: .5rem .65rem;
	font: inherit;
	font-size: .87rem;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border: 1.5px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
}
.phonelist__search::placeholder { color: #6b7280; }
.phonelist__search:focus { outline: none; border-color: var(--gold); }

.phonelist__options {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 240px;
	overflow-y: auto;
}
.phonelist__options li { margin: 0; }
.phonelist__empty { margin: .4rem 0 .15rem; padding: .4rem .55rem; color: #9aa0ac; font-size: .85rem; }
.js-phone-option {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	padding: .5rem .55rem;
	border-radius: 8px;
	background: transparent;
	color: #e5e7eb;
	font-size: .87rem;
	text-align: left;
	cursor: pointer;
}
.js-phone-option:hover,
.js-phone-option.is-selected { background: rgba(255, 192, 0, .14); }
.phonelist__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phonelist__dial { flex: 0 0 auto; color: #9aa0ac; font-weight: 700; }

/* driver notes */

.noteslot {
	display: grid;
	gap: .6rem;
	padding: 0;
	background: none;
	border: none;
}
.noteslot__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--ink);
	font-size: .88rem;
	font-weight: 800;
}
.noteslot__title svg { color: var(--gold-dark); flex-shrink: 0; }
.noteslot__title small { color: var(--muted); font-weight: 400; }

.notechips { display: flex; flex-wrap: wrap; gap: .5rem; }
.notechip {
	padding: .4rem .8rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.notechip:hover { border-color: var(--gold-dark); color: var(--ink); }
.notechip.is-on { background: var(--gold-soft); border-color: var(--gold-dark); color: var(--ink); }

.noteslot textarea {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	font-size: .92rem;
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	resize: vertical;
}
.noteslot textarea::placeholder { color: #9aa3af; }
.noteslot textarea:focus { border-color: var(--gold-dark); outline: none; }
.noteslot .charcount { color: var(--muted); }

/* payment cards */

.paycards { display: grid; gap: .6rem; }
.paycard {
	position: relative;
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.paycard input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.paycard input:checked ~ .paycard__dot { border-color: var(--gold-dark); }
.paycard input:checked ~ .paycard__dot::after { transform: scale(1); }
.paycard:has(input:checked) { border-color: var(--gold-dark); background: var(--gold-soft); }

.paycard__icon {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: var(--surface-2);
	display: grid;
	place-items: center;
	color: var(--ink);
}
.paycard__icon svg { width: 18px; height: 18px; }

.paycard__body { flex: 1 1 auto; min-width: 0; }
.paycard__body b { display: block; color: var(--ink); font-size: .95rem; }
.paycard__body small { display: block; color: var(--muted); font-size: .82rem; margin-top: .1rem; }

.paycard__dot {
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
}
.paycard__dot::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--gold-dark);
	transform: scale(0);
	transition: transform .15s ease;
}

.paynote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .6rem;
	padding: .75rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--muted);
	font-size: .82rem;
}
.paynote svg { color: var(--gold-dark); flex-shrink: 0; }
.paynote .payments { margin-top: .35rem; width: 100%; }

.addonsgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

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

.addoncard {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.addoncard:hover { border-color: var(--gold-dark); box-shadow: var(--shadow); transform: translateY(-2px); }

.addoncard__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--gold-soft);
	color: var(--gold-dark);
	display: grid;
	place-items: center;
}
.addoncard__icon svg { width: 21px; height: 21px; }

.addoncard__body { flex: 1 1 auto; min-width: 0; }
.addoncard__body b { display: block; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.addoncard__body small { display: block; margin-top: .3rem; color: var(--muted); font-size: .87rem; line-height: 1.45; }
.addoncard__price {
	display: inline-block;
	margin-top: .55rem;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--gold-soft);
	color: var(--ink);
	font-size: .8rem;
	font-weight: 800;
}

.addons-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-block: .25rem .5rem;
	scrollbar-width: none;
}
.addons-scroll::-webkit-scrollbar { display: none; }

.addons {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding-inline: max(1.25rem, calc((100vw - var(--wrap)) / 2));
	list-style: none;
	width: max-content;
}

.addon {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 min(24rem, 84vw);
	padding: 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .15s ease;
}
.addon:hover { border-color: var(--gold); }

.addon__media {
	flex: 0 0 108px;
	width: 108px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface-2);
}
.addon__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.addon__body { flex: 1 1 auto; min-width: 0; }
.addon__body b { display: block; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.addon__body small { display: block; margin-top: .25rem; color: var(--muted); font-size: .87rem; line-height: 1.45; }

.addon__price {
	display: inline-block;
	margin-top: .5rem;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--gold-soft);
	color: var(--ink);
	font-size: .8rem;
	font-weight: 800;
}

@media (max-width: 640px) {
	.addon { flex-basis: min(20rem, 86vw); padding: .85rem; gap: .8rem; }
	.addon__media { flex-basis: 88px; width: 88px; height: 72px; }
	.addon__body b { font-size: .94rem; }
	.addon__body small { font-size: .82rem; }
}

/* =========================================================================
   Fleet cards

   Photo on a light panel, then a small eyebrow, the name, and icon led
   specifications. Scrolls horizontally on phones, sits as a grid above that.
   ========================================================================= */

.fleetgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--gap);
}
@media (min-width: 900px) {
	.fleetgrid { grid-template-columns: repeat(4, 1fr); }
}

.fleetcard {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: .75rem;
	box-shadow: var(--shadow);
	transition: border-color .15s ease, transform .12s ease;
}
.fleetcard:hover { border-color: var(--gold); transform: translateY(-2px); }

.fleetcard__media {
	display: grid;
	place-items: center;
	padding: 1rem;
	min-height: 152px;
	background: var(--surface-2);
	border-radius: 14px;
}
.fleetcard__img { width: 100%; max-width: 260px; height: auto; }

.fleetcard__body { padding: 1.1rem .5rem .4rem; }

.fleetcard__eyebrow {
	display: block;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.fleetcard__name {
	margin: .3rem 0 .4rem;
	font-size: 1.22rem;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--ink);
	text-transform: uppercase;
}
.fleetcard__blurb { margin: 0; font-size: .89rem; color: var(--muted); line-height: 1.5; }

.fleetcard__specs {
	display: grid;
	gap: .65rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}
.spec { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.spec__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 10px;
	background: var(--gold-soft);
	color: var(--gold-dark);
}
.spec__icon svg { width: 17px; height: 17px; }
.spec__text {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: .4rem;
	row-gap: 0;
	min-width: 0;
}
.spec__text small {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}
.spec__text b { font-size: .96rem; font-weight: 800; color: var(--ink); }

.fleetcard__fare {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px solid var(--line);
	font-size: .85rem;
	color: var(--muted);
}
.fleetcard__fare b { font-size: 1.2rem; font-weight: 900; color: var(--ink); }

/* Blog cards reuse the fleet card shell, but the media is a real photo
   (cover, edge to edge) rather than a padded product shot. */
.fleetcard--blog { display: block; color: inherit; text-decoration: none; }
.fleetcard--blog .fleetcard__media {
	display: block;
	padding: 0;
	min-height: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.fleetcard--blog .fleetcard__img { width: 100%; max-width: none; height: 100%; object-fit: cover; display: block; }
.fleetcard--blog .fleetcard__name { text-transform: none; font-size: 1.1rem; }
.fleetcard--blog .fleetcard__readmore {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: .85rem;
	font-weight: 800;
	color: var(--gold-dark);
}
.fleetcard--blog .fleetcard__readmore svg { transition: transform .15s ease; }
.fleetcard--blog:hover .fleetcard__readmore svg { transform: translateX(3px); }

/* Phones: swipe through the fleet rather than scrolling past five stacked cards. */
@media (max-width: 720px) {
	.fleetgrid {
		display: flex;
		gap: 1rem;
		width: max-content;
		padding-inline: max(1.25rem, calc((100vw - var(--wrap)) / 2));
	}
	.fleetgrid-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		margin-inline: calc(50% - 50vw);
		padding-block: .25rem 1rem;
	}
	.fleetcard { flex: 0 0 min(19rem, 82vw); scroll-snap-align: center; }
	.fleetcard__media { min-height: 132px; }
}

/* =========================================================================
   Why section
   ========================================================================= */

.why {
	position: relative;
	padding-block: var(--section-y);
	background:
		radial-gradient(60% 50% at 50% 0%, rgba(255,192,0,.09), transparent 70%),
		var(--ink);
	color: #c9cdd6;
	overflow: hidden;
}

.why__head { max-width: 46rem; margin-inline: auto; text-align: center; }

.pillbadge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem 1.1rem;
	border: 1px solid rgba(255, 192, 0, .4);
	border-radius: 999px;
	color: var(--gold);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pillbadge svg { width: 15px; height: 15px; }

.why h2 {
	margin: 1.1rem 0 .8rem;
	color: #fff;
	font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.9rem);
}
.why h2 em { font-style: normal; color: var(--gold); }
.why .lede { color: #9aa1ad; }

/* local reference chips */
.chiprow {
	display: flex;
	gap: .55rem;
	margin: 1.75rem 0 2.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .35rem;
	scrollbar-width: none;
	justify-content: flex-start;
}
.chiprow::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chiprow { justify-content: center; flex-wrap: wrap; overflow: visible; } }

.chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
	padding: .5rem 1rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	font-size: .86rem;
	color: #c9cdd6;
	white-space: nowrap;
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 6px; }

/* why us, stacked list in one card */
.whylist {
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	background: rgba(255, 255, 255, .035);
	overflow: hidden;
}

.whyrow {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	transition: background-color .15s ease;
}
.whyrow:last-child { border-bottom: 0; }
.whyrow:hover { background: rgba(255, 255, 255, .035); }

.whyrow__icon {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--ink);
}
.whyrow__icon svg { width: 21px; height: 21px; }

.whyrow__body { flex: 1 1 auto; min-width: 0; padding-top: .3rem; }
.whyrow__body b { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; }
.whyrow__body small { display: block; margin-top: .35rem; font-size: .91rem; font-weight: 400; color: #9aa1ad; line-height: 1.55; }

@media (max-width: 560px) {
	.whyrow { padding: 1.1rem 1.15rem; gap: .8rem; }
	.whyrow__icon { flex-basis: 38px; width: 38px; height: 38px; }
	.whyrow__icon svg { width: 18px; height: 18px; }
}

.why__cta { margin: 2rem 0 0; text-align: center; }

@media (max-width: 640px) {
	.whycard { padding: 1.15rem 1.2rem 1.25rem; }
	.whycard__num { font-size: 2.6rem; }
	.whycard__icon { width: 38px; height: 38px; margin-bottom: .8rem; }
}

/* =========================================================================
   Plan your trip
   ========================================================================= */

.plan__head { margin-bottom: 1.5rem; }
.plan__head h2 { margin: .4rem 0 0; }
.plan__head h2 em { font-style: italic; color: var(--muted); font-weight: 800; }

.plancard {
	display: flex;
	gap: 1rem;
	padding: 1.35rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	margin-bottom: .85rem;
}
.plancard:last-child { margin-bottom: 0; }

.plancard--lead { flex-direction: column; gap: 0; padding: 1.6rem; }

.plancard__top { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }

.plancard__icon {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--surface-2);
	color: var(--ink);
}
.plancard__icon svg { width: 21px; height: 21px; }

.plancard__tag {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: var(--gold-soft);
	color: var(--gold-dark);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.plancard__tag svg { width: 14px; height: 14px; }

.plancard h3 {
	margin: 0 0 .5rem;
	font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
	letter-spacing: -.02em;
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}
.plancard p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.plancard__body { flex: 1 1 auto; min-width: 0; }

.plancard__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7rem 1rem;
	margin-top: 1.15rem;
}

.plancard__note {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .87rem;
	color: var(--muted);
}
.plancard__note svg { width: 17px; height: 17px; color: var(--ok); flex: 0 0 17px; }

.btn--outline {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); }

.statuspill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .22rem .65rem;
	border-radius: 999px;
	background: rgba(15, 157, 88, .12);
	color: #0b7c46;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.statuspill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ok);
	flex: 0 0 6px;
}

@media (max-width: 640px) {
	.plancard { padding: 1.1rem; gap: .85rem; }
	.plancard--lead { padding: 1.25rem; }
	.plancard__icon { flex-basis: 38px; width: 38px; height: 38px; }
	.plancard__actions .btn { flex: 1 1 100%; justify-content: center; }
	.plancard__note { flex: 1 1 100%; }
}

/* =========================================================================
   The hidden attribute must win

   Several blocks set an explicit display (grid or flex), which silently beats
   the hidden attribute. The return trip fields and the flight fieldset both
   stayed visible when toggled off because of it.
   ========================================================================= */

[hidden] { display: none !important; }

/* =========================================================================
   Accounts and schemes

   This topic is the site's best converting page by a wide margin, so it gets a
   band of its own rather than a paragraph with three competing buttons.
   ========================================================================= */

.accounts {
	padding-block: var(--section-y);
	background:
		linear-gradient(180deg, var(--gold-soft) 0%, #fffdf7 100%);
	border-block: 1px solid rgba(224, 168, 0, .22);
}

.accounts__head {
	max-width: 44rem;
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}
.accounts__head h2 { margin: 1rem 0 .7rem; }

.pillbadge--dark {
	border-color: rgba(17, 19, 24, .18);
	background: rgba(17, 19, 24, .04);
	color: var(--ink);
}

.accountgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: .85rem;
}
@media (min-width: 720px) {
	.accountgrid { grid-template-columns: repeat(2, 1fr); }
}

.acctcard {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.15rem 1.2rem;
	background: var(--surface);
	border: 1px solid rgba(17, 19, 24, .1);
	border-radius: 15px;
	text-decoration: none;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.acctcard:hover {
	border-color: var(--gold-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.acctcard__icon {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--ink);
	color: var(--gold);
}
.acctcard__icon svg { width: 20px; height: 20px; }

.acctcard__body { flex: 1 1 auto; min-width: 0; }
.acctcard__body b { display: block; color: var(--ink); font-size: 1.02rem; letter-spacing: -.01em; }
.acctcard__body small { display: block; margin-top: .3rem; color: var(--muted); font-size: .87rem; line-height: 1.5; }

.acctcard__go {
	flex: 0 0 auto;
	align-self: center;
	color: var(--muted);
	transition: transform .15s ease, color .15s ease;
}
.acctcard__go svg { width: 17px; height: 17px; display: block; }
.acctcard:hover .acctcard__go { color: var(--gold-dark); transform: translateX(3px); }

.accounts__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(17, 19, 24, .1);
}
.accounts__pay { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.accounts__paylabel {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.accounts__pay .payments { margin-top: 0; }

@media (max-width: 640px) {
	.acctcard { padding: 1rem; gap: .75rem; }
	.acctcard__icon { flex-basis: 36px; width: 36px; height: 36px; }
	.accounts__foot { flex-direction: column; align-items: stretch; }
	.accounts__pay { justify-content: center; }
	.accounts__foot .btn { justify-content: center; }
}

/* =========================================================================
   Google reviews

   Badge carrying the real Google mark, then a link to the public profile and
   a write a review action, the pattern used on the agency's Yarra Valley build.
   ========================================================================= */

.reviews h2 em { font-style: normal; color: var(--gold); }

.gbadge {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	margin: 0 auto;
	padding: .85rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
}
.gbadge svg { display: block; flex: 0 0 auto; }
.gbadge__text { text-align: left; line-height: 1.2; }
.gbadge__top { display: flex; align-items: center; gap: .5rem; }
.gbadge__num { font-size: 1.65rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.gbadge__stars { color: var(--gold); font-size: 1.05rem; letter-spacing: .1em; }
.gbadge__count { font-size: .87rem; color: #9aa1ad; margin-top: .1rem; }

/* centre the badge without stretching it */
.reviews .wrap { text-align: center; }
.reviews .section-head { text-align: center; }

.reviewlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin: 1.35rem 0 0;
}
.reviewlinks .btn { gap: .55rem; }
.reviewlinks .btn svg { flex: 0 0 auto; }

/* the Google mark on each card */
.revcard { position: relative; text-align: left; }
.revcard__g { position: absolute; top: 1.1rem; right: 1.2rem; opacity: .9; }
.revcard__g svg { display: block; }

@media (max-width: 640px) {
	.gbadge { padding: .7rem 1.1rem; gap: .7rem; }
	.gbadge__num { font-size: 1.4rem; }
	.reviewlinks .btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   Plan your trip: bring it in line with the rest of the palette

   It had picked up black buttons, a green status pill and grey icon tiles,
   none of which appear anywhere else on the site.
   ------------------------------------------------------------------------- */

.plan__head h2 em { color: var(--gold-dark); font-style: italic; }
.plan__head .rule { margin-inline: 0; }

/* icon tiles match the add ons, trust bar and fleet specs */
.plancard__icon { background: var(--gold-soft); color: var(--gold-dark); }

/* status pill in brand gold rather than green */
.statuspill {
	background: var(--gold-soft);
	color: var(--gold-dark);
}
.statuspill__dot {
	background: var(--gold-dark);
	animation: tma-status-pulse 2.4s ease-in-out infinite;
}
@keyframes tma-status-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
	.statuspill__dot { animation: none; }
}

/* the reassurance tick picks up the brand, not a stray green */
.plancard__note svg { color: var(--gold-dark); }

/* -------------------------------------------------------------------------
   Map chrome

   Note: this suppresses Google's attribution and Terms link, which their Maps
   Platform Terms of Service require to remain visible. Applied on explicit
   instruction. The API key is shared with other client sites, so if the key is
   ever challenged, remove this block first.
   ------------------------------------------------------------------------- */

.routemap__canvas .gm-style-cc,
.routemap__canvas .gmnoprint.gm-style-cc,
.routemap__canvas a[href^="https://maps.google.com/maps"],
.routemap__canvas a[href^="https://www.google.com/maps"],
.routemap__canvas img[alt="Google"],
.routemap__canvas .gm-style > div:last-child > div:last-child {
	display: none !important;
}

/* =========================================================================
   Hero review scroller

   Fed from the same live Google data as the reviews section. Loops only when
   there are at least three cards; with fewer it sits still, because repeating
   one review to manufacture motion would be misleading.
   ========================================================================= */

.heroreviews {
	margin-top: 1.5rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.heroreviews:not(.is-scrolling) {
	-webkit-mask-image: none;
	mask-image: none;
}

.heroreviews__track { display: flex; width: max-content; }
.heroreviews:not(.is-scrolling) .heroreviews__track { width: 100%; }
/* Gap lives on the card itself (trailing margin), not on the row's flex gap,
   so the last card of a duplicated row carries the same spacing as every
   other pair. That keeps each row's width self-contained, which is what
   makes the translateX(-50%) loop below land exactly on the seam instead of
   drifting into a visible merge or a dead gap once per cycle. */
.heroreviews__row { display: flex; }

.heroreviews.is-scrolling .heroreviews__track {
	animation: tma-marquee 38s linear infinite;
}
.heroreviews.is-scrolling:hover .heroreviews__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.heroreviews.is-scrolling .heroreviews__track { animation: none; }
	.heroreviews { overflow-x: auto; }
}

.herorev {
	position: relative;
	flex: 0 0 min(19rem, 78vw);
	margin: 0 .7rem 0 0;
	padding: .85rem 1rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
}
.herorev__g { position: absolute; top: .75rem; right: .85rem; opacity: .85; }
.herorev__g svg { display: block; }
.herorev__stars { color: var(--gold); font-size: .85rem; letter-spacing: .09em; }
.herorev blockquote {
	margin: .3rem 0 .4rem;
	color: #d3d7de;
	font-size: .88rem;
	line-height: 1.5;
	padding-right: 1.4rem;
}
.herorev figcaption { color: #8d94a1; font-size: .78rem; font-weight: 700; }

@media (max-width: 640px) {
	.heroreviews { margin-top: 1.15rem; }
	.herorev { flex-basis: min(17rem, 82vw); padding: .75rem .85rem; }
}

/* =========================================================================
   Booking mode: point to point or hourly hire
   ========================================================================= */

.modeswitch { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.modeswitch label { position: relative; }
.modeswitch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.modeswitch span {
	display: block;
	padding: .6rem .7rem;
	text-align: center;
	background: var(--surface-2);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all .15s ease;
}
.modeswitch b { display: block; color: var(--muted); font-size: .9rem; font-weight: 800; }
.modeswitch small { display: block; color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.modeswitch input:checked + span { background: var(--ink); border-color: var(--ink); }
.modeswitch input:checked + span b { color: #fff; }
.modeswitch input:checked + span small { color: #9aa1ad; }
.modeswitch input:focus-visible + span { outline: 3px solid var(--gold-dark); outline-offset: 2px; }

/* hourly state on the fare panel */
.quote .quote__hourly { display: none; }
.quote[data-state="hourly"] .quote__idle,
.quote[data-state="hourly"] .quote__loading,
.quote[data-state="hourly"] .quote__result { display: none; }
.quote[data-state="hourly"] .quote__hourly { display: block; }
.quote[data-state="hourly"] { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.quote__hourly b { display: block; color: var(--ink); margin-bottom: .15rem; }

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

/* rating line used as a standalone band on inner pages */
.ratingline--band {
	justify-content: center;
	padding: 1.1rem 1rem;
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	font-size: .92rem;
}

/* -------------------------------------------------------------------------
   Dispatch card

   Icon and title sit on a header row so the copy and buttons run the full
   width of the card, rather than being indented under the icon.
   ------------------------------------------------------------------------- */

.plancard--stacked { flex-direction: column; gap: .8rem; }

.plancard__head {
	display: flex;
	align-items: center;
	gap: .8rem;
}
.plancard__head h3 { margin: 0; }

.plancard--stacked p { margin: 0; }
.plancard--stacked .plancard__actions { margin-top: .35rem; }

/* the two contact actions sit side by side, including on phones */
.plancard__actions--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}
.plancard__actions--pair .btn {
	width: 100%;
	justify-content: center;
	padding-inline: .75rem;
}

@media (max-width: 640px) {
	/* keep the pair inline, overriding the generic full width button rule */
	.plancard__actions--pair { grid-template-columns: 1fr 1fr; }
	.plancard__actions--pair .btn { flex: none; font-size: .92rem; }
	.plancard--stacked .plancard__head { gap: .65rem; }
}

@media (max-width: 380px) {
	.plancard__actions--pair .btn { font-size: .86rem; padding-inline: .5rem; gap: .35rem; }
}

/* =========================================================================
   Hourly hire form
   ========================================================================= */

.blockpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.blockpick label { position: relative; }
.blockpick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.blockpick span {
	display: block;
	padding: .6rem .5rem;
	text-align: center;
	background: var(--surface-2);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all .15s ease;
}
.blockpick b { display: block; color: var(--ink); font-size: .92rem; }
.blockpick small { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; }
.blockpick input:checked + span { background: var(--gold-soft); border-color: var(--gold-dark); }
.blockpick input:focus-visible + span { outline: 3px solid var(--gold-dark); outline-offset: 2px; }

.fieldnote { display: block; margin-top: .3rem; font-size: .78rem; color: var(--muted); }
.ratingline--hero { justify-content: flex-start; margin-top: 1.5rem; color: #9aa1ad; }
.ratingline--hero b { color: #fff; }

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

/* =========================================================================
   Where we go

   Region columns with a real fare beside every suburb. The fare is the whole
   point: a list of names is what competitors publish.
   ========================================================================= */

.areas {
	padding-block: var(--section-y);
	background:
		radial-gradient(55% 45% at 80% 0%, rgba(255,192,0,.08), transparent 68%),
		var(--ink);
	color: #c9cdd6;
}

.areas h2 { color: #fff; margin: .6rem 0 .7rem; }
.areas h2 em { font-style: normal; color: var(--gold); }
.areas .lede { color: #9aa1ad; }

/* One region per carousel card, so the section's height is one region tall
   on mobile instead of every region stacked end to end. Mirrors the
   .addons-scroll snap pattern used for the extras carousel elsewhere. */
.regions-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	margin: 0 calc(-1 * max(1.25rem, calc((100vw - var(--wrap)) / 2)));
	padding: .25rem max(1.25rem, calc((100vw - var(--wrap)) / 2)) .5rem;
	scrollbar-width: none;
}
.regions-scroll::-webkit-scrollbar { display: none; }

.areagrid { display: flex; gap: 1.25rem; width: max-content; }

.areacol {
	scroll-snap-align: start;
	flex: 0 0 min(19rem, 84vw);
	padding: 1.4rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .03);
}

.areacol__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .6rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
}

.arealist { margin: 0; padding: 0; list-style: none; }
.arealist a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .38rem 0;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease;
}
.arealist__name { color: #c9cdd6; font-size: .93rem; }
.arealist__fare {
	flex: 0 0 auto;
	font-size: .86rem;
	font-weight: 800;
	color: #6f7684;
	font-variant-numeric: tabular-nums;
	transition: color .15s ease;
}
.arealist a:hover .arealist__name { color: #fff; }
.arealist a:hover .arealist__fare { color: var(--gold); }

.areas__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.areas__label {
	display: block;
	margin-bottom: .7rem;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6f7684;
}
.chiprow--wrap { flex-wrap: wrap; overflow: visible; margin: 0; justify-content: flex-start; }
.chip--link { text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.chip--link:hover { border-color: var(--gold); background: rgba(255, 192, 0, .1); }
.chip--link b { color: var(--gold); font-weight: 800; margin-left: .15rem; }

@media (max-width: 640px) {
	.areacol { padding: 1.15rem 1.25rem; }
	.arealist a { padding: .34rem 0; }
	.arealist__name { font-size: .89rem; }
	.areas__foot { flex-direction: column; align-items: stretch; }
	.areas__foot .btn { justify-content: center; }
}

/* =========================================================================
   Pre footer call to action

   One line, one button, phone as a link. The previous version ran an eyebrow,
   a two line headline, a two line lede, a rating and two heavy buttons, which
   made the last thing on every page the tallest thing on it.
   ========================================================================= */

.ctaband { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--ink); }

.ctaband__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ctaband__copy { flex: 1 1 22rem; }
.ctaband h2 {
	margin: 0;
	color: var(--ink);
	font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
	letter-spacing: -.02em;
}
.ctaband h2 em { font-style: normal; color: #fff; }
.ctaband p {
	margin: .3rem 0 0;
	color: rgba(17, 19, 24, .72);
	font-size: .95rem;
}

.ctaband__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 0 0 auto;
}
.ctaband__phone {
	background: var(--surface);
	border-color: var(--ink);
	color: var(--ink);
	font-weight: 800;
	font-size: 1.02rem;
	white-space: nowrap;
}
.ctaband__phone:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ctaband__phone svg { width: 17px; height: 17px; flex: 0 0 auto; }

@media (max-width: 640px) {
	.ctaband__inner { padding-block: 1.5rem; gap: 1rem; }
	.ctaband__actions { width: 100%; justify-content: space-between; gap: .75rem; }
	.ctaband__actions .btn { flex: 1 1 auto; justify-content: center; }
	.ctaband__phone { font-size: .95rem; }
}