/* Melbourne Taxi Service — shared site design system.
   Tokens, reset, header/nav (CSS-only mobile toggle), footer, pill buttons,
   and the reusable band/card/section motifs every clone page builds on.
   Scoped entirely under .mts-site / body.mts-site-page. Mobile-first;
   single breakpoint at 900px. No JS. */

body.mts-site-page {
	margin: 0;
	background: #FFFFFF;
}

.mts-site {
	--mts-orange: #F5B301;
	--mts-navy: #071D31;
	--mts-gray: #7A7A7A;
	--mts-light: #F5F5F5;
	--mts-light-blue: #EAF1F8;
	--mts-cream: #FFF6E4;
	--mts-white: #FFFFFF;
	--mts-radius: 18px;
	--mts-shadow: 0 12px 30px rgba(7, 29, 49, 0.08);
	--mts-container: 1140px;

	font-family: "Fira Sans Extra Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--mts-navy);
	line-height: 1.55;
	background: var(--mts-white);
	overflow-x: hidden;
}

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

.mts-site img {
	max-width: 100%;
	display: block;
}

.mts-site ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mts-site a {
	color: inherit;
	text-decoration: none;
}

.mts-site p {
	color: var(--mts-gray);
	margin: 0 0 1em;
}

/* ---- Shared layout motifs ---- */

.mts-site .mts-container {
	max-width: var(--mts-container);
	margin: 0 auto;
	padding: 0 20px;
}

.mts-site .mts-section {
	padding: 48px 0;
}

.mts-site .mts-h1,
.mts-site .mts-h2 {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	color: var(--mts-navy);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

.mts-site .mts-h1 {
	font-size: clamp(28px, 6vw, 46px);
}

.mts-site .mts-h2 {
	font-size: clamp(22px, 4.5vw, 32px);
}

.mts-site .mts-accent {
	color: var(--mts-orange);
	font-style: italic;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Orange rounded page-title band — used at the top of inner pages. */
.mts-site .mts-title-band {
	background: var(--mts-orange);
	border-radius: var(--mts-radius);
	color: var(--mts-navy);
	padding: 32px 24px;
	text-align: center;
}

.mts-site .mts-title-band .mts-h1 {
	color: var(--mts-navy);
}

/* Fleets-only: a parade of vehicles streaks across the bottom of the band,
   one at a time (see fleets-band.svg). Scoped so the shared title band on
   other pages is unaffected. */
.mts-site .mts-title-band--fleets {
	position: relative;
	overflow: hidden;
	padding-bottom: 74px;
}

.mts-site .mts-fleets-parade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 72px;
	object-fit: cover;
	object-position: bottom;
	pointer-events: none;
}

/* Yellow rounded content band — for CTA/callout blocks within a page. */
.mts-site .mts-band {
	background: var(--mts-orange);
	border-radius: var(--mts-radius);
	color: var(--mts-navy);
	padding: 40px 32px;
}

.mts-site .mts-band .mts-h2 {
	color: var(--mts-navy);
}

.mts-site .mts-band p {
	color: rgba(7, 29, 49, 0.8);
}

/* White card, soft shadow, rounded — the default content tile. */
.mts-site .mts-card {
	background: var(--mts-white);
	border-radius: var(--mts-radius);
	box-shadow: var(--mts-shadow);
	padding: 24px;
}

/* Fully-rounded pill buttons. */
.mts-site .mts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--mts-white);
	border: 2px solid transparent;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.mts-site .mts-btn:hover {
	opacity: 0.9;
}

.mts-site .mts-btn--orange {
	background: var(--mts-orange);
	border-color: var(--mts-orange);
	color: var(--mts-navy);
}

.mts-site .mts-btn--navy {
	background: var(--mts-navy);
	border-color: var(--mts-navy);
}

/* ---- Header / nav ---- */

.mts-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	background: var(--mts-white);
	padding: 16px 20px;
	box-shadow: 0 2px 12px rgba(7, 29, 49, 0.06);
}

.mts-site-logo img,
.mts-site-logo .mts-logo {
	height: 46px;
	width: auto;
	display: block;
}

.mts-nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mts-nav-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.mts-nav-burger span {
	display: block;
	height: 2px;
	background: var(--mts-navy);
	border-radius: 2px;
}

.mts-site-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.mts-nav-link {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--mts-navy);
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}

.mts-nav-link:hover,
.mts-nav-link.is-active {
	color: var(--mts-orange);
	border-bottom-color: var(--mts-orange);
}

/* ---- Footer: dark -> brown gradient, 4 columns, stacks on mobile ---- */

.mts-site-footer {
	background: linear-gradient(160deg, var(--mts-navy) 0%, #3A2A1D 100%);
	color: rgba(255, 255, 255, 0.85);
	padding: 48px 20px 28px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.mts-foot-brand .mts-foot-logo {
	height: 44px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

.mts-foot-brand p {
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.mts-foot-col h4 {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--mts-white);
	margin: 0 0 14px;
}

.mts-foot-col ul li {
	margin-bottom: 10px;
	font-size: 14px;
}

.mts-foot-col ul li a:hover {
	color: var(--mts-orange);
}

/* ---- Breakpoint: 900px (mobile-first; this is the only breakpoint) ---- */

@media (max-width: 899px) {
	.mts-nav-burger {
		display: flex;
	}

	.mts-site-nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--mts-white);
		box-shadow: 0 12px 20px rgba(7, 29, 49, 0.08);
		padding: 8px 20px 16px;
		z-index: 20;
	}

	.mts-nav-toggle:checked ~ .mts-site-nav {
		display: flex;
	}

	.mts-nav-link {
		width: 100%;
		padding: 12px 0;
		border-bottom: 1px solid var(--mts-light);
	}

	.mts-nav-link.is-active,
	.mts-nav-link:hover {
		border-bottom-color: var(--mts-light);
	}
}

@media (min-width: 900px) {
	.mts-site-footer {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
}

/* =====================================================================
   Home page (page-home.php): hero, services, why-us, stats, payments.
   Mobile-first; single breakpoint at 900px, matching the rest of site.css.
   ===================================================================== */

/* ---- Reusable eyebrow label (small orange kicker above a heading) ---- */

.mts-site .mts-eyebrow {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mts-orange);
	margin: 0 0 12px;
}

.mts-site .mts-eyebrow--center {
	text-align: center;
}

.mts-site .mts-home-section-title {
	text-align: center;
	margin-bottom: 44px;
}

/* Ghost pill button (white outline) for use over the dark hero photo. */
.mts-site .mts-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--mts-white);
}

.mts-site .mts-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---- Hero ---- */

.mts-site .mts-home-hero {
	position: relative;
	background: var(--mts-navy);
	color: var(--mts-white);
	overflow: hidden;
}

/* ---- Light/photo hero system (home) ---- */
.mts-site .mts-home-hero--light {
	background: linear-gradient(105deg, #FBE7CE 0%, #F7EFE4 44%, #E4EFF5 100%);
	color: var(--mts-navy);
	overflow: hidden;
}
/* Australia illustration variant: soft blue field that blends with the art's background. */
.mts-site .mts-home-hero--au {
	background: linear-gradient(105deg, #EAF4F3 0%, #D6ECEE 50%, #B9DFE3 100%);
}
.mts-site .mts-hero2 {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 52px 20px 56px;
}
.mts-site .mts-hero2-copy { flex: 1 1 45%; }
.mts-site .mts-hero2-title {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 5.4vw, 60px);
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--mts-navy);
	margin: 0;
}
.mts-site .mts-hero2-sub {
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 600;
	color: #4b5661;
	margin: 18px 0 28px;
}
.mts-site .mts-hero2-cta { font-size: 16px; }
.mts-site .mts-hero2-art {
	flex: 1 1 55%;
	display: flex;
	justify-content: flex-end;
}
.mts-site .mts-hero2-art img { width: 100%; max-width: 600px; height: auto; }
.mts-site .mts-hero2-strip {
	position: relative;
	z-index: 1;
	background: var(--mts-navy);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 44px;
	padding: 18px 20px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mts-cream);
}
.mts-site .mts-hero2-strip span { position: relative; }
.mts-site .mts-hero2-strip span + span::before {
	content: "·";
	position: absolute;
	left: -24px;
	color: var(--mts-orange);
	font-weight: 800;
}
@media (max-width: 760px) {
	.mts-site .mts-hero2 { flex-direction: column-reverse; text-align: center; gap: 12px; padding: 28px 20px 36px; }
	.mts-site .mts-hero2-art { justify-content: center; }
	.mts-site .mts-hero2-art img { max-width: 420px; }
	.mts-site .mts-hero2-strip { gap: 8px 32px; font-size: 11px; letter-spacing: 0.12em; }
	.mts-site .mts-hero2-strip span + span::before { left: -18px; }
}

/* ---- Photo background hero ---- */
.mts-site .mts-home-hero--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--mts-navy);
	overflow: hidden;
}
.mts-site .mts-home-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 247, 235, 0) 26%, rgba(255, 247, 235, 0.75) 48%, rgba(255, 248, 237, 0.97) 66%);
}
.mts-site .mts-hero2--photo {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
	min-height: 440px;
}
.mts-site .mts-hero2--photo .mts-hero2-copy { flex: 0 1 50%; text-align: left; }
@media (max-width: 760px) {
	.mts-site .mts-home-hero--photo::before { background: linear-gradient(180deg, rgba(255, 248, 237, 0.95) 0%, rgba(255, 248, 237, 0.82) 38%, rgba(255, 248, 237, 0.08) 66%); }
	.mts-site .mts-hero2--photo { flex-direction: column; justify-content: flex-end; min-height: 360px; }
	.mts-site .mts-hero2--photo .mts-hero2-copy { flex: 1 1 auto; text-align: center; }
}

/* Airport photo variant: dark cinematic image, light copy on the left. */
.mts-site .mts-home-hero--airport::before {
	background: linear-gradient(90deg, rgba(5, 20, 36, 0.86) 0%, rgba(5, 20, 36, 0.55) 38%, rgba(5, 20, 36, 0.12) 66%, rgba(5, 20, 36, 0) 100%);
}
.mts-site .mts-home-hero--airport .mts-hero2--photo { justify-content: flex-start; }
.mts-site .mts-home-hero--airport .mts-hero2-copy { text-align: left; flex: 0 1 48%; }
.mts-site .mts-home-hero--airport .mts-hero2-title { color: #ffffff; }
.mts-site .mts-home-hero--airport .mts-hero2-sub { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 760px) {
	.mts-site .mts-home-hero--airport::before { background: linear-gradient(180deg, rgba(5, 20, 36, 0.12) 0%, rgba(5, 20, 36, 0.55) 48%, rgba(5, 20, 36, 0.88) 100%); }
	.mts-site .mts-home-hero--airport .mts-hero2-copy { text-align: center; }
}

/* ---- Services: alternating photo/text rows ---- */

.mts-site .mts-home-services {
	background: var(--mts-white);
}

.mts-site .mts-home-service-list {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.mts-site .mts-home-service {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.mts-site .mts-home-service-photo {
	width: 100%;
	border-radius: var(--mts-radius);
	overflow: hidden;
	box-shadow: var(--mts-shadow);
	aspect-ratio: 4 / 3;
}

.mts-site .mts-home-service-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mts-site .mts-home-service-text {
	width: 100%;
}

.mts-site .mts-home-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mts-orange);
	margin-bottom: 14px;
}

.mts-site .mts-home-service-text h3 {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--mts-navy);
	margin: 0 0 10px;
}

.mts-site .mts-home-service-text p {
	margin: 0;
}

/* ---- Why choose us ---- */

.mts-site .mts-home-why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	text-align: center;
}

.mts-site .mts-home-why-icon {
	height: 48px;
	width: auto;
	margin: 0 auto 14px;
	/* The why-*.png icons are baked orange; nudge the hue to match the gold accent. */
	filter: hue-rotate(14deg) saturate(1.05);
}

.mts-site .mts-home-why-col h3 {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--mts-navy);
	margin: 0 0 8px;
}

.mts-site .mts-home-why-col p {
	margin: 0;
	font-size: 14px;
}

/* ---- Stats band ---- */

.mts-site .mts-home-stats-wrap {
	padding-top: 8px;
}

.mts-site .mts-home-stats {
	background: var(--mts-navy);
	border-radius: var(--mts-radius);
	color: var(--mts-white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	padding: 32px 20px;
}

.mts-site .mts-home-stat {
	flex: 1 1 30%;
	min-width: 120px;
	text-align: center;
	padding: 12px 8px;
}

.mts-site .mts-home-stat strong {
	display: block;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	font-size: clamp(26px, 5vw, 34px);
	color: var(--mts-white);
}

.mts-site .mts-home-stat span {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 4px;
}

.mts-site .mts-home-stat-sep {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.18);
	display: none;
}

/* ---- Payments ---- */

.mts-site .mts-home-payment-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.mts-site .mts-home-payment-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mts-white);
	border-radius: 999px;
	box-shadow: var(--mts-shadow);
	padding: 14px 26px;
}

.mts-site .mts-home-payment-chip img {
	height: 24px;
	width: auto;
}

@media (min-width: 900px) {
	.mts-site .mts-home-hero-inner {
		padding: 120px 20px 100px;
	}

	.mts-site .mts-home-service {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.mts-site .mts-home-service.is-reverse {
		flex-direction: row-reverse;
	}

	.mts-site .mts-home-service-photo,
	.mts-site .mts-home-service-text {
		width: 50%;
	}

	.mts-site .mts-home-why-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.mts-site .mts-home-stat-sep {
		display: block;
	}
}

/* =====================================================================
   About page (page-about.php): title band, "Who we are?" two-column,
   full-width orange photo band. Mobile-first; single 900px breakpoint.
   ===================================================================== */

/* Accent word on a yellow title band: keep the italic-underline treatment
   but use navy so it reads against the yellow (the band text is navy too;
   italic + underline still sets the accent word apart). */
.mts-site .mts-accent--on-band {
	color: var(--mts-navy);
	text-decoration-color: var(--mts-navy);
}

/* ---- Who we are? ---- */

.mts-site .mts-about-who-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

.mts-site .mts-about-who-copy {
	color: var(--mts-gray);
	line-height: 1.7;
	margin: 0 0 24px;
}

.mts-site .mts-about-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 28px;
}

.mts-site .mts-about-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--mts-light);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--mts-navy);
}

.mts-site .mts-about-badge-icon {
	display: inline-flex;
	align-items: center;
}

.mts-site .mts-about-who-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mts-radius);
	box-shadow: var(--mts-shadow);
}

/* ---- Full-width orange photo band ---- */

.mts-site .mts-about-band {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.mts-site .mts-about-band-overlay {
	position: absolute;
	inset: 0;
	background: rgba(245, 179, 1, 0.86);
}

.mts-site .mts-about-band-inner {
	position: relative;
	padding: 56px 20px;
	text-align: center;
}

.mts-site .mts-about-band-inner p {
	max-width: 820px;
	margin: 0 auto;
	color: var(--mts-navy);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 3vw, 26px);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.mts-site .mts-about-who-grid {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}

	.mts-site .mts-about-band-inner {
		padding: 80px 20px;
	}
}

/* =====================================================================
   Fleets page (page-fleets.php): title band + fleet card grid built from
   the Vehicle Types. Mobile-first: 1-up, then 2-up, then 4-up at 900px.
   ===================================================================== */

.mts-site .mts-fleets-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.mts-site .mts-fleet-card {
	text-align: center;
	padding: 28px 24px;
}

.mts-site .mts-fleet-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	margin-bottom: 18px;
	background: var(--mts-light);
	border-radius: 14px;
	overflow: hidden;
}

.mts-site .mts-fleet-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mts-site .mts-fleet-emoji {
	font-size: 64px;
	line-height: 1;
}

.mts-site .mts-fleet-name {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--mts-navy);
	margin: 0 0 6px;
}

.mts-site .mts-fleet-capacity {
	color: var(--mts-orange);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 14px;
	margin: 0;
}

.mts-site .mts-fleets-empty {
	text-align: center;
	color: var(--mts-gray);
	font-size: 18px;
	padding: 32px 0;
}

@media (min-width: 900px) {
	.mts-site .mts-fleets-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =====================================================================
   Services page (page-services.php): service cards, "Our Achievement"
   orange band, and the 4-step "how it works" row. Mobile-first; the steps
   stack to a column and the arrows rotate down below the 900px breakpoint.
   ===================================================================== */

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

.mts-site .mts-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.mts-site .mts-service-card {
	text-align: center;
	padding: 32px 26px;
}

.mts-site .mts-service-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--mts-cream);
}

.mts-site .mts-service-card h3 {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--mts-navy);
	margin: 0 0 12px;
}

.mts-site .mts-service-card p {
	color: var(--mts-gray);
	line-height: 1.7;
	margin: 0;
}

/* ---- Our Achievement band ---- */

.mts-site .mts-services-achievement {
	text-align: center;
}

.mts-site .mts-services-achievement-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 12px;
}

.mts-site .mts-services-achievement-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--mts-navy);
}

.mts-site .mts-services-achievement-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(7, 29, 49, 0.12);
}

/* ---- How it works: 4 steps ---- */

.mts-site .mts-services-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mts-site .mts-services-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.mts-site .mts-services-step-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--mts-orange);
}

.mts-site .mts-services-step-num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mts-navy);
	color: var(--mts-white);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mts-site .mts-services-step-label {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--mts-navy);
	max-width: 160px;
}

.mts-site .mts-services-step-arrow {
	color: var(--mts-orange);
	font-size: 26px;
	line-height: 1;
	transform: rotate(90deg);
}

@media (min-width: 900px) {
	.mts-site .mts-services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mts-site .mts-services-achievement-row {
		flex-direction: row;
		justify-content: center;
		gap: 64px;
	}

	.mts-site .mts-services-steps {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 8px;
	}

	.mts-site .mts-services-step {
		flex: 1;
		max-width: 200px;
	}

	.mts-site .mts-services-step-arrow {
		position: absolute;
		top: 26px;
		right: -13px;
		transform: none;
	}
}

/* =====================================================================
   Contact page (page-contact.php): photo hero, message form + info column,
   and the dark "Visit Our Office" card. Mobile-first; single 900px breakpoint.
   ===================================================================== */

/* ---- Hero ---- */

.mts-site .mts-contact-hero {
	position: relative;
	background: var(--mts-navy);
	color: var(--mts-white);
	overflow: hidden;
}

/* Animated contact background (contact-hero.svg): covers the hero behind the
   scrim; motion is baked into the SVG and freezes for prefers-reduced-motion. */
.mts-site .mts-contact-hero-anim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

.mts-site .mts-contact-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(7, 29, 49, 0.92) 0%, rgba(7, 29, 49, 0.78) 42%, rgba(7, 29, 49, 0.3) 76%, rgba(7, 29, 49, 0.12) 100%);
}

.mts-site .mts-contact-hero-inner {
	position: relative;
	z-index: 2;
	padding: 64px 20px 56px;
	max-width: var(--mts-container);
	text-align: left;
}

.mts-site .mts-contact-hero-title,
.mts-site .mts-contact-hero-sub {
	max-width: 520px;
}

.mts-site .mts-contact-hero-title {
	color: var(--mts-white);
}

.mts-site .mts-contact-hero-sub {
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.6;
	margin: 4px 0 0;
}

/* ---- Body grid: form + info ---- */

.mts-site .mts-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

/* ---- Message form ---- */

.mts-site .mts-contact-form {
	margin-top: 20px;
}

.mts-site .mts-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.mts-site .mts-contact-form input,
.mts-site .mts-contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #dfe6ee;
	border-radius: 12px;
	background: var(--mts-white);
	font-family: "Fira Sans Extra Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	color: var(--mts-navy);
}

.mts-site .mts-contact-form textarea {
	margin-bottom: 16px;
	resize: vertical;
}

.mts-site .mts-contact-form input:focus,
.mts-site .mts-contact-form textarea:focus {
	outline: none;
	border-color: var(--mts-orange);
	box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.2);
}

/* Honeypot: visually hidden, still reachable by bots. */
.mts-site .mts-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success / error notice above the form. */
.mts-site .mts-notice {
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-weight: 600;
}

.mts-site .mts-notice--ok {
	background: #e6f6ec;
	color: #1c6b3a;
}

.mts-site .mts-notice--err {
	background: #fdecec;
	color: #a12626;
}

/* ---- Get in touch column ---- */

.mts-site .mts-contact-info {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--mts-light);
	border-radius: var(--mts-radius);
	padding: 18px 20px;
	margin-bottom: 16px;
	color: var(--mts-navy);
}

.mts-site .mts-contact-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mts-cream);
}

.mts-site .mts-contact-info-text {
	display: flex;
	flex-direction: column;
}

.mts-site .mts-contact-info-text strong {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
}

.mts-site .mts-contact-info-text span {
	color: var(--mts-gray);
}

/* ---- Visit Our Office (dark card) ---- */

.mts-site .mts-contact-office {
	background: var(--mts-navy);
	border-radius: var(--mts-radius);
	color: var(--mts-white);
	padding: 40px 32px;
	text-align: center;
}

.mts-site .mts-contact-office .mts-h2 {
	color: var(--mts-white);
}

.mts-site .mts-contact-office-lead {
	color: rgba(255, 255, 255, 0.82);
	max-width: 640px;
	margin: 0 auto 24px;
	line-height: 1.6;
}

.mts-site .mts-contact-office-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.mts-site .mts-contact-office-list li {
	position: relative;
	padding-left: 28px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
}

.mts-site .mts-contact-office-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--mts-orange);
	font-weight: 700;
}

@media (min-width: 900px) {
	.mts-site .mts-contact-hero-inner {
		padding: 104px 20px 88px;
	}

	.mts-site .mts-contact-grid {
		grid-template-columns: 1.4fr 1fr;
		gap: 56px;
	}

	.mts-site .mts-field-row {
		grid-template-columns: 1fr 1fr;
	}

	.mts-site .mts-contact-office-list {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
	}
}

/* =====================================================================
   Book Online page (page-book.php): photo hero above the booking form.
   The form itself keeps its own stylesheet (assets/form.css).
   ===================================================================== */

.mts-site .mts-book-hero {
	position: relative;
	background: var(--mts-navy);
	color: var(--mts-white);
	overflow: hidden;
}

/* Animated route background (book-hero.svg): covers the hero behind the scrim.
   Motion is baked into the SVG and freezes for prefers-reduced-motion. */
.mts-site .mts-book-hero-anim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

/* Darkest on the left, behind the headline; clears to the right so the route,
   the gliding car and the drop-off pin stay vivid. */
.mts-site .mts-book-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(7, 29, 49, 0.92) 0%, rgba(7, 29, 49, 0.78) 40%, rgba(7, 29, 49, 0.28) 74%, rgba(7, 29, 49, 0.12) 100%);
}

.mts-site .mts-book-hero-inner {
	position: relative;
	z-index: 2;
	padding: 56px 20px 48px;
	max-width: var(--mts-container);
	text-align: left;
}

/* Keep the headline a left-hand column so the route animation reads on the right. */
.mts-site .mts-book-hero-title,
.mts-site .mts-book-hero-sub {
	max-width: 520px;
}

.mts-site .mts-book-hero-title {
	color: var(--mts-white);
}

.mts-site .mts-book-hero-sub {
	color: rgba(255, 255, 255, 0.9);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 4px 0 22px;
}

/* The booking form sits directly under the hero; trim the section's top pad
   so form.css's own top padding doesn't double up. */
.mts-site .mts-book-form-wrap {
	padding-top: 8px;
}

@media (min-width: 900px) {
	.mts-site .mts-book-hero-inner {
		padding: 96px 20px 80px;
	}
}

/* On mobile the route illustration (a 10:3 landscape SVG) would be cropped by
   object-fit: cover — the drop-off pin and "Arriving soon" chip fall off the
   right edge. Contain it as a full-width band under the copy instead, and fade
   the scrim top-to-bottom so the headline stays readable above it. */
@media (max-width: 899px) {
	.mts-site .mts-book-hero-anim {
		object-fit: contain;
		object-position: center bottom;
	}
	.mts-site .mts-book-hero-inner {
		padding-bottom: 150px;
	}
	.mts-site .mts-book-hero-scrim {
		background: linear-gradient(180deg, rgba(7, 29, 49, 0.92) 0%, rgba(7, 29, 49, 0.75) 45%, rgba(7, 29, 49, 0.15) 100%);
	}
}