/* ==========================================================================
   Gilbert's Car Rental
   Cat Island, Bahamas — sand, logo red, charcoal, a little sea.

   Contents
   1.  Tokens                     16. Footer
   2.  Reset + base               17. Inner pages
   3.  Typography                 18. Rentsyst overrides
   4.  Layout primitives          19. Motion + accessibility
   5.  Buttons                    20. Responsive
   6.  Utility bar                21. Rentsyst catalog layout
   7.  Header + navigation        22. Formidable overrides
   8.  Hero                       23. Page banner
   9.  Hero search                24. Aside links
   10. Trust strip                25. CTA contact details
   11. Fleet                      26. Map
   12. Island                     27. Payment marks
   13. Inn strip                  28. Content blocks
   14. Testimonials               29. Rentsyst single vehicle
   15. CTA                        30. Responsive additions
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
	/* Sand — the island the whole page sits on. */
	--sand-50:  #FBF5EC;
	--sand-100: #F5E9D7;
	--sand-200: #EEDCC3;
	--sand-300: #E2C9A6;
	--sand-400: #C9A97F;

	/* Logo red. */
	--red:      #E31D1A;
	--red-600:  #C41613;
	--red-700:  #9E100E;
	--red-tint: rgba(227, 29, 26, 0.10);

	/* Logo charcoal. */
	--char-900: #1B1B1C;
	--char-800: #262627;
	--char-700: #404041;
	--char-500: #6E6E70;
	--char-300: #9A9A9C;

	/* Sea — used rarely, for island references only. */
	--sea:      #0F7C86;
	--sea-deep: #0A5A62;

	--ink:      var(--char-800);
	--ink-soft: #57575A;
	--paper:    var(--sand-100);
	--card:     var(--sand-50);
	--line:     rgba(64, 64, 65, 0.16);
	--line-soft:rgba(64, 64, 65, 0.09);

	/* Type */
	--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Scale */
	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	--step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
	--step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
	--step-5:  clamp(3.2rem, 2rem + 5.4vw, 7rem);

	/* Layout */
	--wrap: 1260px;
	--wrap-narrow: 860px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(4.5rem, 8vw, 8.5rem);
	--radius: 4px;
	--radius-lg: 10px;

	--shadow-sm: 0 1px 2px rgba(27, 27, 28, 0.06), 0 2px 8px rgba(27, 27, 28, 0.05);
	--shadow-md: 0 2px 6px rgba(27, 27, 28, 0.07), 0 14px 34px rgba(27, 27, 28, 0.10);
	--shadow-lg: 0 4px 12px rgba(27, 27, 28, 0.09), 0 28px 70px rgba(27, 27, 28, 0.18);

	/* Utility bar + nav row. Kept as a token because the hero and every page
	   banner pad themselves off the fixed header. */
	--header-h: 118px;
}

/* 2. Reset + base ========================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--step-0);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--red-600); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red-700); }

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 3. Typography ============================================================ */

h1, h2, h3, h4, h5 {
	font-family: var(--display);
	font-variation-settings: "wdth" 112;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.022em;
	margin: 0 0 0.5em;
	color: var(--char-900);
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

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

.lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 46ch;
	text-wrap: pretty;
}

/* Italic emphasis inside headings echoes the italic in the logo wordmark. */
h1 em, h2 em, h3 em {
	font-style: italic;
	font-variation-settings: "wdth" 95;
	color: var(--red);
	font-weight: 800;
}

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section__head .lede { margin-top: 1.1rem; }

/* 4. Layout primitives ===================================================== */

.wrap {
	width: min(100% - (var(--gutter) * 2), var(--wrap));
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.section--sand-deep { background: var(--sand-200); }
.section--char { background: var(--char-900); color: var(--sand-200); }
.section--char h2, .section--char h3 { color: var(--sand-50); }

.site-main { display: block; }

/* 5. Buttons =============================================================== */

.btn {
	--btn-bg: var(--red);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 1rem 1.6rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--display);
	font-variation-settings: "wdth" 100;
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s, background-color 0.25s;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), var(--shadow-sm);
}

.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover, .btn:focus-visible {
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--red:hover { background: var(--red-600); }

.btn--char { --btn-bg: var(--char-900); }
.btn--char:hover { background: var(--char-700); }

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--char-900);
	border: 1.5px solid var(--char-900);
	box-shadow: none;
}
.btn--ghost:hover { background: var(--char-900); --btn-fg: #fff; }

.btn--light {
	--btn-bg: rgba(255, 255, 255, 0.14);
	--btn-fg: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
	box-shadow: none;
}
.btn--light:hover { background: #fff; --btn-fg: var(--char-900); border-color: #fff; }

.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.75rem; }
.btn--block { display: flex; justify-content: center; width: 100%; }

.btn__arrow { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with an animated rule. */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--char-900);
	padding-bottom: 0.35em;
	border-bottom: 1.5px solid var(--line);
	transition: color 0.25s, border-color 0.25s;
}
.link-more:hover { color: var(--red); border-color: var(--red); }

/* 6. Utility bar — contact details, always visible ========================= */

.utility-bar {
	background: var(--char-900);
	color: rgba(245, 233, 215, 0.82);
	font-size: 0.78rem;
	transition: margin-top 0.35s ease, opacity 0.25s ease;
}

.utility-bar__inner {
	width: min(100% - (var(--gutter) * 2), 1380px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	min-height: 38px;
	padding-block: 0.3rem;
}

.utility-bar__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-bar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(245, 233, 215, 0.86);
	text-decoration: none;
	transition: color 0.2s;
}
.utility-bar__contact a:hover { color: #fff; }

.utility-bar__icon {
	width: 14px;
	height: 14px;
	flex: none;
	fill: var(--red);
}

.utility-bar__aside {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
}

.utility-bar__note {
	color: rgba(245, 233, 215, 0.5);
	letter-spacing: 0.02em;
}

/* GTranslate injects its own switcher markup; keep it small and on-palette. */
.utility-bar__translate select,
.site-footer__translate select {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	padding: 0.2rem 0.4rem;
	font-family: var(--body);
	font-size: 0.75rem;
}
.utility-bar__translate select option { color: var(--char-900); }
.utility-bar__translate .gtranslate_wrapper { display: flex; align-items: center; gap: 0.4rem; }
.utility-bar__translate img { display: inline-block; }
/* 7. Header + navigation =================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header__inner {
	position: relative;
	width: min(100% - (var(--gutter) * 2), 1380px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	padding-block: 0.85rem;
	transition: padding 0.35s ease;
}

.site-header__brand { justify-self: center; }

.brand { display: block; line-height: 0; }
.brand__img {
	width: auto;
	height: 46px;
	transition: height 0.35s ease, filter 0.35s ease;
}

/* Over the video the logo needs to hold its own against moving footage. */
.has-video-hero .site-header:not(.is-stuck) .brand__img {
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav--left { justify-content: flex-end; }
.nav--right { justify-content: flex-start; }

.nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__link {
	position: relative;
	display: inline-block;
	font-family: var(--display);
	font-variation-settings: "wdth" 100;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--char-900);
	white-space: nowrap;
	transition: color 0.25s;
}

.nav__link span { position: relative; display: inline-block; }

.nav__link span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.nav__link:hover span::after,
.current-menu-item .nav__link span::after { transform: scaleX(1); transform-origin: left center; }
.nav__link:hover { color: var(--red); }

.site-header__cta { margin-left: 0.5rem; }

/* Transparent over the hero, solid once scrolled. */
.has-video-hero .site-header:not(.is-stuck) .nav__link { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.has-video-hero .site-header:not(.is-stuck) .nav__link:hover { color: #fff; }
/* Bar colour is carried on a custom property so the drawer state can flip it
   without fighting the specificity of the light-over-photo rules. */
.has-video-hero .site-header:not(.is-stuck) .burger,
.has-page-hero .site-header:not(.is-stuck) .burger { --burger-color: #fff; }

.site-header.is-stuck {
	background: rgba(251, 245, 236, 0.92);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(27, 27, 28, 0.07);
}
.site-header.is-stuck .site-header__inner { padding-block: 0.5rem; }
.site-header.is-stuck .brand__img { height: 34px; }

/* Burger */
.burger {
	display: none;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}
.burger__box { display: block; width: 26px; height: 16px; position: relative; }
.burger__line,
.burger__line::before,
.burger__line::after {
	position: absolute;
	left: 0;
	width: 26px;
	height: 2px;
	background: var(--burger-color, var(--char-900));
	transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s;
}
.burger__line { top: 7px; }
.burger__line::before { content: ""; top: -7px; }
.burger__line::after  { content: ""; top: 7px; }

.burger[aria-expanded="true"] .burger__line { background: transparent !important; }
.burger[aria-expanded="true"] .burger__line::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--sand-50);
	padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
	overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__inner { display: flex; flex-direction: column; gap: 0.35rem; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list .nav__link {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__list .nav__link span::after { display: none; }
.mobile-nav .btn { margin-top: 1.5rem; }

.mobile-nav__contact {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 1.75rem;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

body.nav-open { overflow: hidden; }

/* 8. Hero ================================================================== */

.hero {
	position: relative;
	min-height: min(86svh, 820px);
	display: flex;
	align-items: center;
	padding-top: calc(var(--header-h) + 1rem);
	padding-bottom: clamp(4rem, 9vh, 7rem);
	overflow: hidden;
	background: var(--char-900);
	isolation: isolate;
}

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

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A YouTube iframe cannot be object-fit, so it is oversized and centred to
   guarantee full bleed at every aspect ratio. */
.hero__media iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.hero__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 1s ease;
}
.hero.is-playing .hero__poster { opacity: 0; }

/* Warm scrim: keeps type legible and pulls the footage toward the sand palette
   so the video does not read as a cold stock clip dropped onto the page. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(27, 27, 28, 0.55) 0%, rgba(27, 27, 28, 0.15) 32%, rgba(27, 27, 28, 0.55) 78%, rgba(27, 27, 28, 0.8) 100%),
		radial-gradient(120% 80% at 20% 70%, rgba(227, 29, 26, 0.22) 0%, transparent 60%),
		linear-gradient(180deg, transparent 55%, rgba(245, 233, 215, 0.12) 100%);
}

/* The hero dissolving into the sand below — the join is a gradient, not an edge. */
.hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(140px, 22vh, 260px);
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(245, 233, 215, 0) 0%, rgba(245, 233, 215, 0.55) 45%, var(--paper) 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: min(100% - (var(--gutter) * 2), var(--wrap));
	margin-inline: auto;
	color: #fff;
}

.hero__title {
	color: #fff;
	font-size: var(--step-4);
	font-variation-settings: "wdth" 115;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.95;
	max-width: 16ch;
	margin: 0 0 0.9rem;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero__title em { color: #fff; font-variation-settings: "wdth" 90; }

.hero__sub {
	max-width: 52ch;
	font-size: var(--step-0);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
	margin: 0 0 1.75rem;
	text-wrap: pretty;
}

.hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1rem 0 0;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.72);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero__note a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); }
.hero__note a:hover { color: #fff; text-decoration-color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vh, 3rem);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
}
.hero__scroll-line {
	width: 1px;
	height: 42px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
}

/* 9. Hero search ===========================================================
   A plain GET form styled as one continuous control bar. Fields are white so
   the bar reads as the page's one interactive object against the footage.     */

.hero-search {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1px;
	max-width: 940px;
	padding: 6px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: calc(var(--radius-lg) + 4px);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-lg);
}

.hero-search__field {
	flex: 1 1 190px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.6rem 0.9rem;
	background: #fff;
}
.hero-search__field:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.hero-search__field--location { flex: 1.4 1 240px; }

.hero-search__field label {
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.hero-search__control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hero-search__icon {
	width: 16px;
	height: 16px;
	flex: none;
	fill: var(--red);
}

.hero-search__control select,
.hero-search__control input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--char-900);
	appearance: none;
	-webkit-appearance: none;
}
.hero-search__control select:focus,
.hero-search__control input:focus { outline: none; }
.hero-search__field:focus-within { box-shadow: inset 0 0 0 2px var(--red-tint); }

.hero-search__control select {
	background-image: linear-gradient(45deg, transparent 50%, var(--char-500) 50%), linear-gradient(135deg, var(--char-500) 50%, transparent 50%);
	background-position: right 2px center, right -3px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 14px;
}

.hero-search__control input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.55;
}

.hero-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 1.9rem;
	background: var(--red);
	color: #fff;
	border: 0;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.hero-search__submit svg { width: 17px; height: 17px; fill: currentColor; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.hero-search__submit:hover { background: var(--red-600); }
.hero-search__submit:hover svg { transform: translateX(3px); }

/* 10. Trust strip ========================================================== */

.trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.trust__item {
	background: var(--paper);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	transition: background-color 0.3s ease;
}
.trust__item:hover { background: var(--sand-50); }

.trust__figure {
	font-family: var(--display);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: var(--step-2);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--red);
}

.trust__label {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
	margin: 0;
}

.trust__text { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* 11. Fleet ================================================================ */

.fleet__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.fleet__head .section__head { margin-bottom: 0; }

.fleet__types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.type-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--char-900);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
}
.type-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--sand-300);
	color: var(--char-900);
}

.type-card__count {
	font-family: var(--display);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: var(--step-2);
	line-height: 1;
	color: var(--red);
}
.type-card__name {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	line-height: 1.2;
}
.type-card__meta {
	display: block;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 0.15rem;
}

.fleet__empty {
	padding: clamp(2rem, 4vw, 3rem);
	background: var(--card);
	border: 1px dashed var(--sand-300);
	border-radius: var(--radius-lg);
	text-align: center;
}

/* 12. Island =============================================================== */

.island { background: var(--sand-200); overflow: hidden; }

.island__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.island__media { position: relative; }

.island__frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 5;
}
.island__frame img { width: 100%; height: 100%; object-fit: cover; }

.island__badge {
	position: absolute;
	right: clamp(-1rem, -2vw, -2rem);
	bottom: clamp(1.5rem, 4vw, 3rem);
	background: var(--card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 1.1rem 1.4rem;
	max-width: 230px;
}
.island__badge-figure {
	font-family: var(--display);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: var(--step-2);
	line-height: 1;
	color: var(--red);
}
.island__badge-text {
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-soft);
	margin: 0.3rem 0 0;
}

.island__list {
	list-style: none;
	margin: 2rem 0 2.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.15rem 1.5rem;
}

.island__list li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-bottom: 1px solid rgba(64, 64, 65, 0.12);
	font-size: var(--step--1);
	color: var(--char-700);
}

.island__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 8px;
	height: 8px;
	border: 1.5px solid var(--red);
	border-radius: 50%;
}

/* 13. Inn strip ============================================================ */

.inn-strip {
	background: var(--sand-200);
	border-block: 1px solid var(--line-soft);
	padding-block: clamp(1.1rem, 2vw, 1.5rem);
}

.inn-strip__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.inn-strip__thumb {
	flex: none;
	width: 86px;
	height: 62px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.inn-strip__text {
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-soft);
}
.inn-strip__text strong {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
	letter-spacing: -0.01em;
}

.inn-strip__link { flex: none; margin-left: auto; }

@media (max-width: 700px) {
	.inn-strip__inner { flex-wrap: wrap; }
	.inn-strip__thumb { width: 64px; height: 48px; }
	.inn-strip__text { flex: 1 1 60%; }
	.inn-strip__link { margin-left: 0; }
}

/* 14. Testimonials ========================================================= */

.quotes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.quote {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.quote__stars { display: flex; gap: 3px; color: var(--red); }
.quote__stars svg { width: 15px; height: 15px; }

.quote__text {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--step-1);
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--char-900);
	margin: 0;
	text-wrap: pretty;
}

.quote__by { margin: 0; margin-top: auto; }
.quote__name {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
}
.quote__detail {
	display: block;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 0.2rem;
}

/* 15. CTA ================================================================== */

.cta { position: relative; overflow: hidden; }

.cta__panel {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
	background: var(--red);
	color: #fff;
	isolation: isolate;
}

.cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(90% 120% at 85% 15%, rgba(255, 255, 255, 0.16) 0%, transparent 55%),
		linear-gradient(135deg, var(--red) 0%, var(--red-700) 100%);
}

.cta__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.cta h2 { color: #fff; font-size: var(--step-3); margin-bottom: 0.6rem; }
.cta h2 em { color: rgba(255, 255, 255, 0.72); }
.cta__text { color: rgba(255, 255, 255, 0.88); max-width: 44ch; margin: 0; }

.cta__actions { display: flex; flex-direction: column; gap: 0.85rem; }
.cta .btn--char { --btn-bg: var(--char-900); }
.cta__direct {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	margin: 0.35rem 0 0;
}
.cta__direct a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.cta__direct a:hover { color: #fff; }

/* 16. Footer =============================================================== */

.site-footer {
	background: var(--char-900);
	color: rgba(245, 233, 215, 0.72);
	padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
	font-size: var(--step--1);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
	border-bottom: 1px solid rgba(245, 233, 215, 0.14);
}

.site-footer__logo { height: 44px; width: auto; margin-bottom: 1.25rem; }
.site-footer__blurb { max-width: 34ch; line-height: 1.6; margin-bottom: 1.5rem; }

.site-footer__title {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 1.1rem;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer__list a { color: rgba(245, 233, 215, 0.82); text-decoration: none; transition: color 0.25s; }
.site-footer__list a:hover { color: #fff; text-decoration: underline; }

.site-footer__list--contact { gap: 0.9rem; }
.site-footer__list--contact li { display: grid; gap: 0.1rem; }
.site-footer__label {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 233, 215, 0.45);
}

.site-footer__widgets { padding-top: 2rem; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.75rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: rgba(245, 233, 215, 0.45);
}
.site-footer__bottom p { margin: 0; }

/* 17. Inner pages ========================================================== */

.page-hero {
	position: relative;
	padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	background: var(--sand-200);
	overflow: hidden;
}

.page-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, transparent, var(--paper));
	pointer-events: none;
}

.page-hero__title { font-size: var(--step-4); margin: 0; max-width: 18ch; }
.page-hero .lede { margin-top: 1.1rem; }

.page-body { padding-block: clamp(3rem, 6vw, 5rem); }

.prose { max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5em; }
.prose h3, .prose h4 { font-size: var(--step-1); margin-top: 2em; }
.prose img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-block: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--card);
	border-left: 3px solid var(--red);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--display);
	font-size: var(--step-1);
	line-height: 1.4;
}

.prose ul.styled_list { list-style: none; padding-left: 0; }
.prose ul.styled_list li {
	position: relative;
	padding: 0.55rem 0 0.55rem 1.7rem;
	border-bottom: 1px solid var(--line-soft);
}
.prose ul.styled_list li::before {
	content: "";
	position: absolute;
	left: 0; top: 1.05rem;
	width: 8px; height: 8px;
	border: 1.5px solid var(--red);
	border-radius: 50%;
}

/* Bootstrap-era markup still living in page content. */
.prose .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.prose .col-md-6, .prose .col-md-4 { min-width: 0; }
.prose .img-responsive { width: 100%; height: auto; }
.prose .btn-primary {
	display: inline-flex;
	background: var(--red);
	color: #fff;
	padding: 1rem 1.6rem;
	border-radius: var(--radius);
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}
.prose .btn-primary:hover { background: var(--red-600); color: #fff; }
.prose .text-center { text-align: center; }

.page-aside {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	box-shadow: var(--shadow-sm);
}
.page-aside h3 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.page-aside__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.9rem; }
.page-aside__list li { display: grid; gap: 0.1rem; font-size: var(--step--1); }
.page-aside__label {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* Contact page form (Formidable). */
.contact-form-wrap {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--shadow-sm);
}

.frm_forms .frm_form_field { margin-bottom: 1.1rem; }
.frm_forms label.frm_primary_label {
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--char-900);
	margin-bottom: 0.4rem;
}
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms input[type="number"],
.frm_forms input[type="date"],
.frm_forms select,
.frm_forms textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid var(--sand-300);
	border-radius: var(--radius);
	font-family: var(--body);
	font-size: var(--step-0);
	color: var(--ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.frm_forms input:focus, .frm_forms select:focus, .frm_forms textarea:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 3px var(--red-tint);
}
.frm_forms .frm_submit button,
.frm_forms input[type="submit"] {
	background: var(--red);
	color: #fff;
	border: 0;
	padding: 1rem 1.9rem;
	border-radius: var(--radius);
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s, transform 0.25s;
}
.frm_forms .frm_submit button:hover,
.frm_forms input[type="submit"]:hover { background: var(--red-600); transform: translateY(-2px); }

/* 18. Rentsyst overrides ===================================================
   Theme-side only: the plugin's own files are untouched. Rentsyst renders the
   card body from the Catalog page content, so these rules reshape that block
   markup into the theme's card without changing what the plugin outputs.      */

.rentsyst-vehicles,
.is-rentsyst-page .results__items {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	width: 100% !important;
}

.rentsyst-catalog-item {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
	display: flex;
	flex-direction: column;
}
.rentsyst-catalog-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--sand-300);
}

/* Stack the plugin's horizontal column layout into a vertical card. */
.rentsyst-catalog-item .wp-block-columns {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	margin: 0 !important;
	flex: 1;
}
.rentsyst-catalog-item .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0;
}

.rentsyst-catalog-item .rentsyst-image-box { order: -1; }
.rentsyst-catalog-item .rentsyst-image-box p { margin: 0; }
.rentsyst-catalog-item .rentsyst-image-box img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--sand-200);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.rentsyst-catalog-item:hover .rentsyst-image-box img { transform: scale(1.04); }

.rentsyst-catalog-item .rentsyst-options { padding: 1.25rem 1.35rem 0.5rem; }
.rentsyst-catalog-item .rentsyst-options p {
	font-size: 0.85rem;
	color: var(--ink-soft);
	margin: 0 0 0.35rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--line-soft);
	padding-bottom: 0.35rem;
}
.rentsyst-catalog-item .rentsyst-options p strong { color: var(--char-900); font-weight: 600; }

/* The first paragraph in the options column is the vehicle name. */
.rentsyst-catalog-item .rentsyst-options p:first-child {
	display: block;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0.75rem;
	font-size: var(--step-1) !important;
	color: var(--char-900) !important;
}
.rentsyst-catalog-item .rentsyst-options p:first-child a {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--char-900);
	text-decoration: none;
}
.rentsyst-catalog-item .rentsyst-options p:first-child a:hover { color: var(--red); }

/* Price + buttons column. */
.rentsyst-catalog-item .wp-block-column:last-child {
	margin-top: auto !important;
	padding: 0.75rem 1.35rem 1.35rem;
}
.rentsyst-catalog-item .wp-block-column:last-child p {
	text-align: left !important;
	margin: 0;
}
.rentsyst-catalog-item .wp-block-column:last-child p.has-small-font-size {
	font-family: var(--mono);
	font-size: 0.64rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft) !important;
}
.rentsyst-catalog-item .wp-block-column:last-child p[style*="font-size:23px"] {
	font-family: var(--display);
	font-variation-settings: "wdth" 112;
	font-size: var(--step-2) !important;
	font-weight: 800;
	color: var(--red) !important;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 0.9rem;
}
.rentsyst-catalog-item .wp-block-spacer { display: none !important; }

.rentsyst-catalog-item .wp-block-button {
	display: block;
	width: 100%;
	margin: 0 0 0.55rem !important;
	text-align: left !important;
}
.rentsyst-catalog-item .wp-block-button__link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.85rem 1.2rem !important;
	background: var(--red) !important;
	background-color: var(--red) !important;
	color: #fff !important;
	border-radius: var(--radius) !important;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 0.25s, transform 0.25s;
}
.rentsyst-catalog-item .wp-block-button__link:hover {
	background: var(--red-600) !important;
	background-color: var(--red-600) !important;
	transform: translateY(-2px);
}
/* The "Details" button is secondary. */
.rentsyst-catalog-item .rentsyst-btn:not(.rentsyst-booking) .wp-block-button__link {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--char-900) !important;
	border: 1.5px solid var(--line) !important;
}
.rentsyst-catalog-item .rentsyst-btn:not(.rentsyst-booking) .wp-block-button__link:hover {
	background: var(--char-900) !important;
	background-color: var(--char-900) !important;
	color: #fff !important;
	border-color: var(--char-900) !important;
}

/* Catalog and booking pages sit on sand, below the fixed header. */
.is-rentsyst-page #rentsyst_page {
	padding-top: clamp(1rem, 2vw, 2rem);
}
.is-rentsyst-page .results__head { margin-bottom: 1.5rem; }
.is-rentsyst-page .results__title {
	font-family: var(--display);
	font-size: var(--step-2);
	color: var(--char-900);
}
.is-rentsyst-page .results__count { color: var(--red); }

.is-rentsyst-page .pagination {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 2rem;
}
.is-rentsyst-page .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--char-900);
	text-decoration: none;
}
.is-rentsyst-page .pagination .page-numbers.current,
.is-rentsyst-page .pagination .page-numbers:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

/* 19. Motion + accessibility =============================================== */

/* Elements the script animates start hidden, but only when the script is
   actually going to run — no-JS visitors see everything. */
.js .anim-fade { opacity: 0; }
.js .anim-up { opacity: 0; transform: translateY(28px); }
.js .anim-hero { opacity: 0; }

/* The hero arrives as one sequence, so its parts wait for the timeline.
   Keep this list in step with the timeline in main.js — anything listed here
   and not revealed there stays invisible forever. */
.js .hero__title,
.js .hero__sub,
.js .hero-search,
.js .hero__actions,
.js .hero__note { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .anim-fade, .js .anim-up, .js .anim-hero { opacity: 1; transform: none; }
	.js .hero__title,
	.js .hero__sub,
	.js .hero-search,
	.js .hero__actions,
	.js .hero__note { opacity: 1; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 20. Responsive =========================================================== */

@media (max-width: 1100px) {
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.page-layout { grid-template-columns: 1fr; }
	.page-aside { position: static; }
}

@media (max-width: 960px) {
	:root { --header-h: 72px; }

	.nav { display: none; }
	.burger { display: block; }

	.site-header__inner { grid-template-columns: 1fr; justify-items: center; }
	.site-header__brand { justify-self: center; }

	.island__grid, .inn__grid, .cta__grid { grid-template-columns: 1fr; }
	.island__media { order: -1; max-width: 520px; }
	.island__frame { aspect-ratio: 3 / 2; }
	.island__badge { right: 1rem; }
	.cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 700px) {
	.hero { min-height: 88svh; }
	.hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); max-width: 100%; }
	.hero__scroll { display: none; }
	.search-band { margin-top: clamp(-5rem, -8vh, -3rem); }
	.island__list { grid-template-columns: 1fr; }
	.inn__gallery { grid-template-columns: 1fr 1fr; }
	.site-footer__top { grid-template-columns: 1fr; }
	.trust { grid-template-columns: 1fr; }
}

/* 21. Rentsyst catalog page layout =========================================
   The catalog renders inside the page's prose column, which is measured for
   reading width. Its own grid needs the full wrap instead.                    */

.prose--full { max-width: none; }

.is-rentsyst-page .rentsyst-container-catalog {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.is-rentsyst-page .rentsyst-wrap-filters {
	flex: 0 0 clamp(220px, 22vw, 280px);
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
}

@media (max-width: 860px) {
	.is-rentsyst-page .rentsyst-container-catalog { flex-direction: column; }
	.is-rentsyst-page .rentsyst-wrap-filters { position: static; width: 100%; flex: none; }
}

/* 22. Formidable style override ============================================
   Formidable ships its own style block scoped to .with_frm_style, which wins on
   specificity over the plain element rules above. Matching that scope keeps the
   submit button on the logo red rather than the old theme's maroon.           */

.with_frm_style.with_frm_style.with_frm_style .frm_submit button,
.with_frm_style.with_frm_style.with_frm_style .frm_submit input[type="submit"],
.with_frm_style.with_frm_style.with_frm_style .frm_button_submit {
	background: var(--red);
	background-color: var(--red);
	border-color: var(--red);
	color: #fff;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: var(--radius);
	padding: 1rem 1.9rem;
	transition: background-color 0.25s, transform 0.25s;
}

.with_frm_style.with_frm_style.with_frm_style .frm_submit button:hover,
.with_frm_style.with_frm_style.with_frm_style .frm_submit input[type="submit"]:hover,
.with_frm_style.with_frm_style.with_frm_style .frm_button_submit:hover {
	background: var(--red-600);
	background-color: var(--red-600);
	border-color: var(--red-600);
	color: #fff;
	transform: translateY(-2px);
}

.with_frm_style.with_frm_style.with_frm_style input[type="text"],
.with_frm_style.with_frm_style.with_frm_style input[type="email"],
.with_frm_style.with_frm_style.with_frm_style input[type="tel"],
.with_frm_style.with_frm_style.with_frm_style input[type="number"],
.with_frm_style.with_frm_style.with_frm_style select,
.with_frm_style.with_frm_style.with_frm_style textarea {
	border-color: var(--sand-300);
	border-radius: var(--radius);
	font-family: var(--body);
	color: var(--ink);
}

.with_frm_style.with_frm_style.with_frm_style input:focus,
.with_frm_style.with_frm_style.with_frm_style select:focus,
.with_frm_style.with_frm_style.with_frm_style textarea:focus {
	border-color: var(--red);
	box-shadow: 0 0 0 3px var(--red-tint);
	outline: none;
}

.with_frm_style.with_frm_style.with_frm_style .frm_primary_label {
	font-family: var(--display);
	font-weight: 700;
	color: var(--char-900);
}

/* 23. Page banner ==========================================================
   Every page opens with a photo band: breadcrumb, title, one or two lines of
   orientation, and the two actions a visitor is most likely to want next.     */

.page-hero--photo { background: var(--char-900); }

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* Sand-tinted scrim: the photo sits under the type rather than beside it, and
   the bottom edge dissolves into the page background. */
.page-hero--photo .page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(27, 27, 28, 0.9) 0%, rgba(27, 27, 28, 0.72) 45%, rgba(27, 27, 28, 0.35) 100%),
		linear-gradient(180deg, rgba(27, 27, 28, 0.55) 0%, transparent 40%, rgba(245, 233, 215, 0.18) 100%);
}

.page-hero--photo .wrap { position: relative; z-index: 1; }
.page-hero--photo .page-hero__title { color: #fff; }
.page-hero--photo .page-hero__intro { color: rgba(255, 255, 255, 0.86); }
.page-hero--photo .crumbs { color: rgba(255, 255, 255, 0.6); }
.page-hero--photo .crumbs a { color: rgba(255, 255, 255, 0.86); }
.page-hero--photo .crumbs a:hover { color: #fff; }
.page-hero--photo .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.6); }
.page-hero--photo .btn--ghost:hover { background: #fff; --btn-fg: var(--char-900); border-color: #fff; }
.page-hero--photo::after { display: none; }

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	font-size: 0.8rem;
	color: var(--ink-soft);
}
.crumbs a { color: var(--char-700); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }

.page-hero__title {
	font-size: var(--step-3);
	max-width: 20ch;
	margin: 0;
}

.page-hero__intro {
	max-width: 58ch;
	margin: 1rem 0 0;
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--ink-soft);
	text-wrap: pretty;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.6rem;
}

/* 24. Aside links ========================================================== */

.page-aside__more { margin-top: 1.75rem; font-size: var(--step-1); }

.page-aside__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--step--1);
}
.page-aside__links a {
	color: var(--char-700);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.page-aside__links a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--red);
	flex: none;
}
.page-aside__links a:hover { color: var(--red); text-decoration: underline; }

/* 25. CTA contact details ================================================== */

.cta__contacts {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
}

.cta__contact-label {
	display: block;
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 0.15rem;
}

.cta__contact-value {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-1);
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	transition: border-color 0.25s;
	word-break: break-word;
}
.cta__contact-value:hover { color: #fff; border-color: #fff; }

/* 26. Map ================================================================== */

.map-section__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.map-section__list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
	font-size: var(--step--1);
}
.map-section__list li { display: grid; gap: 0.1rem; }

.map-section__frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--line-soft);
	background: var(--sand-200);
}
.map-section__frame iframe {
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	display: block;
	filter: saturate(0.9);
}

@media (max-width: 860px) {
	.map-section__grid { grid-template-columns: 1fr; }
}

/* 27. Payment marks ========================================================
   Drawn as type rather than pulled from a logo sheet: no third-party asset to
   host, and it stays legible at footer size.                                  */

.site-footer__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding-top: 1.75rem;
}

.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 30px;
	padding: 0 0.7rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 4px;
	font-family: var(--display);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--char-900);
	white-space: nowrap;
}

.card--visa { color: #1A1F71; font-style: italic; letter-spacing: -0.02em; font-size: 0.85rem; }
.card--amex { color: #006FCF; }
.card--disc { color: #E36F1E; }
.card--mc { color: #1B1B1C; }

.card__marks { display: inline-flex; }
.card__marks i {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #EB001B;
}
.card__marks i:last-child { background: #F79E1B; margin-left: -7px; }

.site-footer__translate {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

/* 28. Content blocks used by page copy =====================================
   The fleet, island and FAQ pages are written as normal page content, so these
   classes are applied from the editor rather than from a template.            */

.prose .info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.prose .info-grid > li,
.prose .info-card {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 1.35rem 1.45rem;
	margin: 0;
	box-shadow: var(--shadow-sm);
}

.prose .info-grid h3,
.prose .info-card h3 {
	font-size: var(--step-0);
	margin: 0 0 0.4rem;
	letter-spacing: -0.01em;
}
.prose .info-grid p,
.prose .info-card p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

/* Pull quote / highlight band inside page copy. */
.prose .callout {
	background: var(--sand-200);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	margin: 2rem 0;
	border-left: 3px solid var(--red);
}
.prose .callout p:last-child { margin-bottom: 0; }

/* FAQ list. <details> keeps it working without any JavaScript. */
.faq { margin: 2rem 0; display: grid; gap: 0.6rem; }

.faq details {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
	transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }

.faq summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq details > *:not(summary) {
	margin: 0;
	padding: 0 1.35rem 1.2rem;
	font-size: var(--step--1);
	color: var(--ink-soft);
	line-height: 1.6;
}

/* A photo row inside page copy. */
.prose .photo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.75rem;
	margin: 1.75rem 0;
}
.prose .photo-row img {
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.prose .link-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	gap: 0.6rem;
}
.prose .link-list li {
	margin: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line-soft);
}
.prose .link-list strong { display: block; font-family: var(--display); color: var(--char-900); }
.prose .link-list span { font-size: var(--step--1); color: var(--ink-soft); }

/* 29. Rentsyst single vehicle ==============================================
   The plugin renders this page from block columns sized for a wide layout. On
   the theme's narrower measure the two spec columns collide, so they are
   re-laid as a definition grid with room to breathe.                          */

.is-rentsyst-page .rentsyst-info-box,
.is-rentsyst-page .rentsyst-price-per-day {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 1.15rem 1.35rem;
	margin-bottom: 0.85rem;
	box-shadow: var(--shadow-sm);
}

.is-rentsyst-page .rentsyst-info-box .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 2rem !important;
	margin: 0 !important;
}
.is-rentsyst-page .rentsyst-info-box .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* Each spec is "Label: value" — split it onto a row with the value right-set. */
.is-rentsyst-page .rentsyst-info-box p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.55rem 0;
	font-size: 0.92rem;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line-soft);
}
.is-rentsyst-page .rentsyst-info-box p:last-child { border-bottom: 0; }
.is-rentsyst-page .rentsyst-info-box p strong {
	color: var(--char-900);
	font-weight: 600;
	text-align: right;
}

/* The vehicle name and the section labels are headings, not spec rows. */
.is-rentsyst-page p.rentsyst-info-box {
	display: block;
	border-bottom: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 1.75rem 0 0.85rem;
	font-family: var(--display);
	font-size: var(--step-2) !important;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--char-900);
}

.is-rentsyst-page .rentsyst-price-per-day p { margin: 0; padding: 0; border: 0; }
.is-rentsyst-page .rentsyst-price-per-day p[style*="font-size:23px"] {
	font-family: var(--display);
	font-size: var(--step-2) !important;
	font-weight: 800;
	color: var(--red) !important;
	letter-spacing: -0.03em;
}

.is-rentsyst-page .rentsyst-paragraph p[style*="font-size:30px"] {
	font-family: var(--display);
	font-size: var(--step-2) !important;
	text-align: left !important;
	margin-bottom: 0.85rem;
}

.is-rentsyst-page .rentsyst-catalog-item-wrap > .wp-block-image,
.is-rentsyst-page .rentsyst-catalog-item-wrap > p:first-child {
	margin-bottom: 1.5rem;
}

/* The plugin right-aligns its buttons; full width reads better in a card. */
.is-rentsyst-page .rentsyst-paragraph .wp-block-button {
	display: block;
	width: 100%;
	margin: 1rem 0 0 !important;
	text-align: left !important;
}
.is-rentsyst-page .rentsyst-paragraph .wp-block-button__link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 1.4rem !important;
	background: var(--red) !important;
	color: #fff !important;
	border-radius: var(--radius) !important;
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.82rem;
}
.is-rentsyst-page .rentsyst-paragraph .wp-block-button__link:hover { background: var(--red-600) !important; }

/* 30. Responsive additions ================================================= */

@media (max-width: 960px) {
	:root { --header-h: 104px; }

	.utility-bar__inner { justify-content: center; font-size: 0.72rem; }
	.utility-bar__email { display: none; }
	.utility-bar__note { display: none; }
	.utility-bar__aside { margin-left: 0; }

	.hero-search { max-width: none; }
	.hero-search__field { flex: 1 1 100%; border-radius: var(--radius-lg) !important; }
	.hero-search__submit { flex: 1 1 100%; border-radius: var(--radius-lg); padding-block: 0.95rem; }

	.cta__contacts { gap: 1rem 1.75rem; }
}

@media (max-width: 700px) {
	:root { --header-h: 96px; }

	.utility-bar__contact { justify-content: center; gap: 0.25rem 1rem; }
	.page-hero__title { font-size: var(--step-2); max-width: none; }
	.page-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
	.site-footer__pay { flex-direction: column; align-items: flex-start; }
	.site-footer__translate { margin-left: 0; }
}

/* 31. Fleet page sections ================================================== */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.feature-card {
	background: var(--paper);
	padding: clamp(1.35rem, 2.4vw, 1.9rem);
	transition: background-color 0.3s ease;
}
.feature-card:hover { background: var(--sand-50); }

.feature-card h3 {
	font-size: var(--step-0);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}
.feature-card h3::before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	background: var(--red);
	border-radius: 2px;
	margin-bottom: 0.85rem;
}
.feature-card p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }

.choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.choice {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s;
}
.choice:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.choice__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--sand-200);
}

.choice__body {
	padding: clamp(1.2rem, 2vw, 1.6rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.choice__who {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--red);
}

.choice__pick {
	margin: 0;
	font-size: var(--step-2);
	letter-spacing: -0.025em;
}

.choice__why { margin: 0 0 0.5rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.choice .link-more { margin-top: auto; align-self: flex-start; }

.tips-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.tips-layout h2 { font-size: var(--step-2); margin-bottom: 1.25rem; }

.tips {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}
.tips li {
	position: relative;
	padding: 0.7rem 0 0.7rem 1.8rem;
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--step--1);
	color: var(--char-700);
	line-height: 1.55;
}
.tips li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.25rem;
	width: 9px;
	height: 2px;
	background: var(--red);
}

@media (max-width: 860px) {
	.tips-layout { grid-template-columns: 1fr; }
}

/* 32. Fixes after first browser pass ======================================= */

/* Hero: content sits just under the header rather than floating in the middle
   of the frame, so the search bar is reachable without scrolling. */
.hero {
	align-items: flex-start;
	min-height: min(78svh, 740px);
	padding-top: calc(var(--header-h) + 2rem);
	padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

/* GTranslate ships a floating switcher sized for a page corner. In the bar and
   the footer it has to behave like a small inline control. */
.utility-bar__translate .gt_float_switcher,
.site-footer__translate .gt_float_switcher {
	background: transparent;
	box-shadow: none;
	border-radius: 3px;
	font-family: var(--body);
	font-size: 0.75rem;
	line-height: 1.2;
}

.utility-bar__translate .gt_float_switcher .gt-selected .gt-current-lang,
.site-footer__translate .gt_float_switcher .gt-selected .gt-current-lang {
	padding: 4px 10px;
	color: rgba(245, 233, 215, 0.86);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	line-height: 1.4;
}
.utility-bar__translate .gt_float_switcher .gt-selected .gt-current-lang:hover,
.site-footer__translate .gt_float_switcher .gt-selected .gt-current-lang:hover { color: #fff; }

.utility-bar__translate .gt_float_switcher img,
.site-footer__translate .gt_float_switcher img { display: inline-block; vertical-align: middle; }

.utility-bar__translate .gt_float_switcher .gt_options a,
.site-footer__translate .gt_float_switcher .gt_options a {
	color: var(--char-900);
	font-size: 0.78rem;
	padding: 4px 10px;
}

.utility-bar__translate .gt_float_switcher .gt_options,
.site-footer__translate .gt_float_switcher .gt_options {
	background: #fff;
	border-radius: 4px;
	box-shadow: var(--shadow-md);
	max-height: 260px;
}

/* The wrapper is positioned for a page corner by the plugin's own CSS. */
.utility-bar__translate #gt_float_wrapper,
.site-footer__translate #gt_float_wrapper { position: static; }
.utility-bar__translate .gtranslate_wrapper,
.site-footer__translate .gtranslate_wrapper { line-height: 1; }

/* 33. Single vehicle layout ================================================
   Corrects the earlier assumption: the spec block IS the columns element
   (.wp-block-columns.rentsyst-info-box), not a wrapper around one.           */

.vehicle-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.vehicle-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
}
.vehicle-meta span { position: relative; }
.vehicle-meta span + span::before {
	content: "";
	position: absolute;
	left: -0.78rem;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}
.vehicle-meta__price {
	font-family: var(--display);
	font-weight: 700;
	color: #fff;
}

.page-aside__note {
	font-size: var(--step--1);
	color: var(--ink-soft);
	margin-bottom: 1.1rem;
	line-height: 1.55;
}
.page-aside .btn--block + .page-aside__list { margin-top: 1.5rem; }

/* The two spec columns, laid out as a grid with real gutters. */
.is-rentsyst-page .wp-block-columns.rentsyst-info-box {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 clamp(1.5rem, 4vw, 3rem) !important;
	align-items: start;
}
.is-rentsyst-page .wp-block-columns.rentsyst-info-box > .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* The group blocks (Options, Description) are single-column info boxes. */
.is-rentsyst-page .wp-block-group.rentsyst-info-box > .wp-block-group__inner-container { display: block; }

/* Section labels: "TARIFS", "DESCRIPTION", and the vehicle name. */
.is-rentsyst-page p.rentsyst-info-box,
.is-rentsyst-page p.rentsyst-info-box.has-large-font-size {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	display: block;
}
.is-rentsyst-page p.rentsyst-info-box:empty { display: none; }

.vehicle-detail .wp-block-columns {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: 0;
}

/* Rentsyst sizes its slider for a full-width column. */
.vehicle-detail .rentsyst-catalog-item-wrap { min-width: 0; }
.vehicle-detail img { border-radius: var(--radius-lg); }

@media (max-width: 960px) {
	.vehicle-layout { grid-template-columns: 1fr; }
}

/* 34. Page title sizing ====================================================
   The banner title reads as a page label, not a hero statement, so it sits a
   step below the home headline.                                               */

.page-hero__title {
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
	letter-spacing: -0.028em;
	line-height: 1.05;
	max-width: 22ch;
}

.page-hero {
	padding-top: calc(var(--header-h) + clamp(2.25rem, 4vw, 3.5rem));
	padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* ==========================================================================
   35. Revision pass
   Header chrome, hero shape, spacing rhythm, icons and page backdrops.
   Rules here intentionally come last so they win over the sections above.
   ========================================================================== */

/* -- Palette ---------------------------------------------------------------
   The client specified #404041 for the dark chrome, so the bar and the footer
   move off near-black onto the logo's own grey.                              */

:root {
	--chrome: #404041;
	--chrome-deep: #333334;

	/* Section rhythm, pulled in — the old scale left holes under short
	   sections like the stats row and the testimonials. */
	--section-y: clamp(3.25rem, 5vw, 5.25rem);
}

/* -- Icons ----------------------------------------------------------------- */

.icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* -- Utility bar ----------------------------------------------------------- */

.utility-bar {
	background: var(--chrome);
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.78rem;
}

.utility-bar__inner { min-height: 34px; padding-block: 0.25rem; }

.utility-bar__contact a,
.utility-bar__note { color: rgba(255, 255, 255, 0.86); }
.utility-bar__contact a:hover { color: #fff; }

.utility-bar__icon { width: 0.95em; height: 0.95em; fill: var(--red); }
.utility-bar__note { display: inline-flex; align-items: center; gap: 0.45rem; color: rgba(255, 255, 255, 0.55); }
.utility-bar__note .utility-bar__icon { fill: rgba(255, 255, 255, 0.4); }

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

/* The whole header is fixed, contact bar included. Nothing collapses on
   scroll — the bar sliding away was reading as a rendering fault. */
.site-header {
	background: transparent;
	transition: box-shadow 0.35s ease;
}

.site-header__inner {
	padding-block: 0.7rem;
	transition: padding 0.3s ease, background-color 0.3s ease;
	background: transparent;
}

/* Over a hero the nav row is transparent; once scrolled, and on every page
   without a hero, it takes the sand surface. */
.site-header.is-stuck .site-header__inner,
body:not(.has-video-hero):not(.has-page-hero) .site-header__inner {
	background: rgba(251, 245, 236, 0.94);
	backdrop-filter: blur(14px) saturate(1.2);
}
.site-header.is-stuck { box-shadow: 0 8px 28px rgba(27, 27, 28, 0.10); }
.site-header.is-stuck .site-header__inner { padding-block: 0.5rem; }
.site-header.is-stuck .brand__img { height: 34px; }

/* Nav links sit on photography on the home hero *and* on every page banner,
   so they are light in both cases and only go dark once stuck. */
.has-video-hero .site-header:not(.is-stuck) .nav__link,
.has-page-hero .site-header:not(.is-stuck) .nav__link {
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.has-video-hero .site-header:not(.is-stuck) .nav__link:hover,
.has-page-hero .site-header:not(.is-stuck) .nav__link:hover { color: #fff; }
.has-video-hero .site-header:not(.is-stuck) .nav__icon,
.has-page-hero .site-header:not(.is-stuck) .nav__icon { fill: rgba(255, 255, 255, 0.75); }
.has-page-hero .site-header:not(.is-stuck) .brand__img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }

.nav__list { gap: 1.35rem; }

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.79rem;
	letter-spacing: 0.07em;
}

.nav__icon {
	width: 0.95em;
	height: 0.95em;
	fill: var(--red);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.nav__link:hover .nav__icon { transform: translateY(-1px) scale(1.08); }

/* -- Mobile header --------------------------------------------------------
   Logo hard left, "Rent a Car" and the menu button on the right.            */

.site-header__mobile { display: none; }

.site-header__mobile-cta {
	gap: 0.4rem;
	padding: 0.55rem 0.85rem;
	font-size: 0.68rem;
}
.site-header__mobile-cta .icon { width: 1.05em; height: 1.05em; }

@media (max-width: 960px) {
	.site-header__inner {
		grid-template-columns: auto 1fr;
		justify-items: start;
		align-items: center;
		gap: 0.75rem;
	}
	.site-header__brand { justify-self: start; grid-column: 1; }
	.site-header__mobile {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		grid-column: 2;
		justify-self: end;
	}
	.burger { position: static; transform: none; display: block; }

	/* Contact bar keeps only WhatsApp and the language switcher. */
	.utility-bar__phone,
	.utility-bar__email,
	.utility-bar__note { display: none; }
	.utility-bar__inner { justify-content: space-between; gap: 0.75rem; }
	.utility-bar__contact { gap: 0; }
	.utility-bar__aside { margin-left: 0; }
}

/* -- Mobile drawer --------------------------------------------------------- */

.mobile-nav__list .nav__link { gap: 0.7rem; }
.mobile-nav__list .nav__icon { width: 1.05rem; height: 1.05rem; }

.mobile-nav__contact {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}
.mobile-nav__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--char-700);
	text-decoration: none;
	font-size: 0.92rem;
}
.mobile-nav__contact .icon { fill: var(--red); width: 1.05rem; height: 1.05rem; }

/* -- Hero -----------------------------------------------------------------
   Taller than before but deliberately short of a full viewport, with more air
   between the nav and the headline, and a slanted bottom edge instead of the
   gradient dissolve.                                                         */

.hero {
	min-height: min(88svh, 860px);
	padding-top: calc(var(--header-h) + clamp(3.5rem, 8vh, 6.5rem));
	padding-bottom: clamp(5rem, 11vh, 8rem);
	align-items: flex-start;
}

/* The slant: a sand-coloured wedge sitting on the bottom edge. The hero's own
   overflow keeps it tidy at every width. */
.hero__fade {
	height: clamp(60px, 8vw, 120px);
	background: var(--paper);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero__title { max-width: 15ch; }

/* -- Section rhythm -------------------------------------------------------
   Consistent vertical spacing; the old values left obvious holes under short
   sections.                                                                  */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.75rem); }
.page-body { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.section__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.fleet__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.fleet__types { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* -- Page banner ----------------------------------------------------------
   A radial wash rather than a flat scrim: the photograph stays readable on the
   right, and the type side and the nav row stay dark enough to sit on.       */

.page-hero--photo .page-hero__media::after {
	background:
		radial-gradient(115% 130% at 88% 62%, rgba(27, 27, 28, 0) 0%, rgba(27, 27, 28, 0.28) 34%, rgba(27, 27, 28, 0.72) 68%, rgba(27, 27, 28, 0.88) 100%),
		linear-gradient(180deg, rgba(27, 27, 28, 0.72) 0%, rgba(27, 27, 28, 0.12) 42%, rgba(27, 27, 28, 0.1) 100%);
}

.page-hero {
	padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem));
	padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.page-hero--photo .page-hero__intro { color: rgba(255, 255, 255, 0.88); }

@media (max-width: 860px) {
	/* On a phone the photo is behind the text the whole width, so it needs the
	   flat overlay to stay legible. */
	.page-hero--photo .page-hero__media::after {
		background: linear-gradient(180deg, rgba(27, 27, 28, 0.82) 0%, rgba(27, 27, 28, 0.68) 55%, rgba(27, 27, 28, 0.78) 100%);
	}
}

/* -- Rentsyst cards -------------------------------------------------------
   The plugin's card body is core block markup. On narrow viewports core's
   flex layout collapses the option and price columns to zero height, which
   left cards showing a photo and nothing else. Forcing the stacked layout at
   every width fixes it.                                                      */

.rentsyst-catalog-item .wp-block-columns,
.rentsyst-catalog-item .wp-block-columns.is-layout-flex {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
}

.rentsyst-catalog-item .wp-block-column,
.rentsyst-catalog-item .wp-block-column.is-layout-flow {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* -- Backdrops ------------------------------------------------------------
   A large, very faint outline behind one section per page: the island where
   the page is about the island, a vehicle everywhere else.                   */

.has-backdrop { position: relative; isolation: isolate; overflow: hidden; }

.backdrop {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	display: block;
	color: var(--char-700);
}
.backdrop svg { width: 100%; height: auto; display: block; }

.backdrop--island {
	top: 50%;
	right: clamp(-3rem, -2vw, 1rem);
	transform: translateY(-50%);
	width: clamp(240px, 32vw, 460px);
	opacity: 0.055;
}

.backdrop--car {
	right: -4%;
	bottom: -8%;
	width: clamp(320px, 46vw, 720px);
	opacity: 0.05;
}

@media (max-width: 860px) {
	.backdrop--island { right: -18%; width: 62vw; opacity: 0.04; }
	.backdrop--car { width: 88vw; right: -14%; opacity: 0.04; }
}

/* -- Content photos -------------------------------------------------------
   The island page's photo rows were sized like thumbnails and the grid gap
   read as a gutter between unrelated images. Fewer, larger pictures.         */

.prose .photo-row {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 0.5rem;
	margin: 2rem 0;
}
.prose .photo-row img {
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	box-shadow: none;
}
.prose .photo-row--single { grid-template-columns: 1fr; }
.prose .photo-row--single img { aspect-ratio: 21 / 9; border-radius: var(--radius-lg); }

/* -- Footer ---------------------------------------------------------------- */

.site-footer { background: var(--chrome); }
.site-footer__bottom { border-top: 0; }

.site-footer__list a { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer__list .icon { fill: var(--red); width: 0.9em; height: 0.9em; }

/* -- GTranslate popup ------------------------------------------------------
   The popup variant renders a small trigger plus a modal appended to <body>,
   so only the trigger needs to fit the bar.                                  */

.utility-bar__translate .gt_float_switcher,
.utility-bar__translate .gt-selected,
.site-footer__translate .gt_float_switcher { background: transparent; box-shadow: none; }

.utility-bar__translate .gt-current-lang,
.utility-bar__translate .gt_switcher_popup_link,
.site-footer__translate .gt-current-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 3px 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--body);
	font-size: 0.74rem;
	line-height: 1.4;
	cursor: pointer;
}
.utility-bar__translate .gt-current-lang:hover { color: #fff; }
.utility-bar__translate img,
.site-footer__translate img { display: inline-block; vertical-align: middle; }

/* 36. Cat Island page sections ============================================= */

.feature-card__icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--red);
	margin-bottom: 0.75rem;
	display: block;
}
/* The icon replaces the rule the fleet cards use as a marker. */
.feature-card:has(.feature-card__icon) h3::before { display: none; }

.bight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.bight-card {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(1.2rem, 2vw, 1.6rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}
.bight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bight-card h3 { font-size: var(--step-0); margin: 0; letter-spacing: -0.01em; }
.bight-card p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }
.bight-card .link-more { margin-top: auto; align-self: flex-start; font-size: 0.72rem; }

.plan-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}
.plan-layout h2 { font-size: var(--step-2); }

.plan-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.plan-links a {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 1.25rem;
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.plan-links a:hover { border-color: var(--red); transform: translateX(3px); }

.plan-links__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
	letter-spacing: -0.01em;
}
.plan-links__title .icon { fill: var(--red); width: 0.85em; height: 0.85em; }
.plan-links__text { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 860px) {
	.plan-layout { grid-template-columns: 1fr; }
}

/* The button arrow is an icon now, not a text glyph. */
.btn .icon { width: 1em; height: 1em; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.btn:hover .icon { transform: translateX(3px); }
.link-more .icon { width: 0.9em; height: 0.9em; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.link-more:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   37. Revision pass 2
   ========================================================================== */

/* -- Backdrops removed -----------------------------------------------------
   The island and vehicle outlines are gone. The overflow they needed was also
   clipping the booking calendar and breaking position:sticky on the page
   sidebars, so the whole mechanism is dropped rather than patched.            */

.backdrop { display: none !important; }
.has-backdrop { overflow: visible; isolation: auto; }

/* Nothing between a sticky sidebar and the scroll container may clip. */
.page-body,
.page-layout,
.vehicle-layout,
.prose { overflow: visible; }

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

/* Straight bottom edge — the slant is gone. */
.hero__fade {
	display: none;
}

/* Content sits lower in the frame. */
.hero {
	align-items: flex-end;
	padding-top: calc(var(--header-h) + clamp(4rem, 12vh, 9rem));
	padding-bottom: clamp(3.5rem, 8vh, 6rem);
}

/* The footage is parallaxed on scroll. Without extra height above and below,
   scrolling back up slid the media down far enough to expose the section
   behind it, which looked like the video was falling out of the hero. */
.hero__media {
	top: -20%;
	bottom: -20%;
	height: 140%;
}

/* -- GTranslate ------------------------------------------------------------ */

/* The current language was rendering white on white in the popup list. */
.gt_float_switcher .gt_options a,
.gt_float_switcher .gt_options a.gt-current,
[class*="switcher_popup"] a,
[class*="switcher_popup"] a.gt-current {
	color: var(--red) !important;
}
.gt_float_switcher .gt_options a:hover,
[class*="switcher_popup"] a:hover {
	color: var(--red-700) !important;
	background: var(--sand-100) !important;
}

/* The popup is moved to <body> by the script; keep it above the header. */
[class*="switcher_popup"] { z-index: 1000 !important; }

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

@media (max-width: 960px) {
	/* One logo size throughout, matching the scrolled state. */
	.brand__img,
	.site-header.is-stuck .brand__img { height: 34px; }

}

/* -- Mobile drawer --------------------------------------------------------- */

.mobile-nav__list .nav__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
}
.mobile-nav__list .nav__icon {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--red);
	flex: none;
}

/* -- Card alignment -------------------------------------------------------
   Grid items stretch to the row height, and the reveal animation clears its
   transform so nothing is left sitting a few pixels off its neighbours.      */

.rentsyst-vehicles,
.is-rentsyst-page .results__items,
.fleet__types,
.feature-grid,
.bight-grid,
.quotes__grid,
.choice-grid { align-items: stretch; }

.rentsyst-catalog-item,
.type-card,
.feature-card,
.bight-card,
.quote,
.choice { height: 100%; }

/* -- Content photos -------------------------------------------------------
   Two per row wherever the column is wide enough, rather than dropping to one
   as soon as the prose column narrows.                                       */

.prose .photo-row {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0.6rem;
}

/* -- Lightbox -------------------------------------------------------------- */

.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

body.lightbox-open { overflow: hidden; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 18, 15, 0.92);
	backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.lightbox__caption {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--step--1);
	text-align: center;
	max-width: 60ch;
}
.lightbox__caption[hidden] { display: none; }

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 0.2s, transform 0.2s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--red); border-color: var(--red); }

.lightbox__close {
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 44px;
	height: 44px;
	font-size: 1.05rem;
}

.lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 1.8rem;
	line-height: 1;
	padding-bottom: 4px;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
	position: absolute;
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.6);
}
.lightbox__counter[hidden] { display: none; }

@media (max-width: 700px) {
	.lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
	.lightbox__img { max-height: calc(100vh - 11rem); }
}

/* 38. Where to eat ========================================================= */

.eating {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid rgba(64, 64, 65, 0.14);
}

.eating__title { font-size: var(--step-1); margin: 0 0 0.4rem; }
.eating__note { margin: 0 0 1.25rem; font-size: var(--step--1); color: var(--ink-soft); max-width: 60ch; }

.eating__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
}

.eating__list li {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 1rem 1.15rem;
	display: grid;
	gap: 0.15rem;
}

.eating__list strong {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--char-900);
	letter-spacing: -0.01em;
}

.eating__where {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
}

.eating__desc { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

/* 39. Overflow containment ================================================
   `overflow-x: hidden` on <body> forces overflow-y to `auto`, which turns the
   body into a scroll container and clips absolutely-positioned dropdowns — the
   booking datepicker was being cut off mid-calendar because of it. `clip`
   contains the same horizontal overflow without creating that container.      */

body {
	overflow-x: clip;
	overflow-y: visible;
}

@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}

/* 40. Burger over an open drawer ==========================================
   The drawer's background is sand, so the close icon must be dark even on
   pages where the nav is otherwise light over a photo. !important is
   deliberate: it has to beat the light-over-hero rules, which are more
   specific.                                                                  */

body.nav-open .burger { --burger-color: var(--char-900); }
body.nav-open .burger__line { background: transparent; }

/* 41. Content photo rows ==================================================
   auto-fit was fitting a third (empty) track into the prose column, leaving
   two photos sitting at a third of the width. A 300px floor gives exactly two
   across the measure, and one on a phone.                                    */

.prose .photo-row {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 0.6rem;
}

.prose .photo-row--single {
	grid-template-columns: 1fr;
}

/* 42. GTranslate popup overrides ==========================================
   The popup markup is appended to <body> by the plugin, so these are global
   rather than scoped to the bar.                                             */

.gt_black_overlay {
	height: 100vh;
}

.gt_white_content {
	top: 50vh;
}

.utility-bar__translate .gt-current-lang {
	color: #333;
}

.utility-bar__translate .gt-current-lang:hover {
	color: var(--red);
}

/* The drawer's background is sand, so the close icon stays dark there even on
   pages where the nav is light over a photo. */
body.nav-open .burger {
	--burger-color: var(--char-900) !important;
}

/* ==========================================================================
   43. Hero slider
   Three stills, crossfaded, each with its own slow drift. Replaces the video
   background entirely.
   ========================================================================== */

.hero__slider {
	position: absolute;
	inset: -20% 0;
	height: 140%;
	z-index: -2;
	overflow: hidden;
}

.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
	will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

/* Each slide drifts differently, so the sequence does not feel like one loop.
   The animation only runs while the slide is showing. */
.hero__slide img { transform: scale(1.02); }
.hero__slide.is-active img { animation: gcr-drift-a 9s ease-out forwards; }
.hero__slide[data-slide="2"].is-active img { animation-name: gcr-drift-b; }
.hero__slide[data-slide="3"].is-active img { animation-name: gcr-drift-c; }

@keyframes gcr-drift-a {
	from { transform: scale(1.02); }
	to   { transform: scale(1.10); }
}
@keyframes gcr-drift-b {
	from { transform: scale(1.10) translate3d(1.2%, 0, 0); }
	to   { transform: scale(1.02) translate3d(-1.2%, 0, 0); }
}
@keyframes gcr-drift-c {
	from { transform: scale(1.10) translate3d(0, 1%, 0); }
	to   { transform: scale(1.03) translate3d(0, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide img,
	.hero__slide.is-active img { animation: none; transform: scale(1.02); }
	.hero__slide { transition: none; }
}

/* Scrim: the photograph stays open on the left where the headline sits, and
   darkens toward the top (behind the nav) and the right. */
.hero__scrim {
	background:
		linear-gradient(180deg, rgba(27, 27, 28, 0.70) 0%, rgba(27, 27, 28, 0.22) 28%, rgba(27, 27, 28, 0) 52%),
		linear-gradient(90deg, rgba(27, 27, 28, 0.18) 0%, rgba(27, 27, 28, 0.06) 30%, rgba(27, 27, 28, 0.42) 74%, rgba(27, 27, 28, 0.66) 100%);
}

/* With a lighter left side the type carries itself on shadow alone. */
.hero__title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 60px rgba(0, 0, 0, 0.4); }
.hero__sub { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.hero__note { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65); }

/* On a phone the photo sits behind the full width of the text. */
@media (max-width: 860px) {
	.hero__scrim {
		background: linear-gradient(180deg, rgba(27, 27, 28, 0.68) 0%, rgba(27, 27, 28, 0.42) 45%, rgba(27, 27, 28, 0.62) 100%);
	}
}

/* Slide dots */
.hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3vh, 2.25rem);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 0.55rem;
}

.hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.42);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background-color 0.3s ease, width 0.3s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero__dot.is-active { background: var(--red); width: 24px; border-radius: 100px; }

/* 44. Odds and ends ======================================================== */

/* Card headings inside page copy already sit under their own spacing. */
.prose h3 {
	margin-top: 0;
}

/* The catalog filter is a desktop-width sidebar; on a phone it pushed the
   vehicle grid below two screens of controls. */
@media (max-width: 860px) {
	.is-rentsyst-page .rentsyst-wrap-filters,
	.is-rentsyst-page .rentsyst-wrap-filter-options,
	.is-rentsyst-page .filters.js_drop-list { display: none !important; }
}

/* 45. Contact page ========================================================= */

.section-nav {
	position: relative;
	z-index: 2;
	background: var(--card);
	border-bottom: 1px solid var(--line-soft);
}

.section-nav__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.4rem;
	padding-block: 0.6rem;
}

.section-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	border-radius: 100px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--char-700);
	transition: background-color 0.25s, color 0.25s;
}
.section-nav__link .icon { fill: var(--red); width: 0.95em; height: 0.95em; }
.section-nav__link:hover { background: var(--sand-200); color: var(--char-900); }

.form-intro {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem);
	padding-bottom: clamp(1rem, 2vw, 1.35rem);
	border-bottom: 1px solid var(--line-soft);
}
.form-intro h2 { font-size: var(--step-2); margin: 0 0 0.5rem; }
.form-intro p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; max-width: 58ch; }

@media (max-width: 700px) {
	.section-nav__inner { padding-block: 0.5rem; }
	.section-nav__link { font-size: 0.68rem; padding: 0.4rem 0.65rem; }
}

/* 46. Anchor offsets =======================================================
   The header is fixed, so in-page links have to stop short of it or the
   heading they target lands underneath the nav.                              */

[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* The section nav itself should not push its own target off-screen. */
.section-nav { scroll-margin-top: 0; }

/* 47. Hero scrim — corrected side ==========================================
   The dark side belongs where the headline is: heaviest at the left, easing
   off to the right so the photograph stays open there. Slightly deeper overall
   than the first pass.                                                       */

.hero__scrim {
	background:
		linear-gradient(180deg, rgba(27, 27, 28, 0.72) 0%, rgba(27, 27, 28, 0.26) 30%, rgba(27, 27, 28, 0) 54%),
		linear-gradient(90deg, rgba(27, 27, 28, 0.78) 0%, rgba(27, 27, 28, 0.56) 32%, rgba(27, 27, 28, 0.18) 70%, rgba(27, 27, 28, 0.08) 100%);
}

@media (max-width: 860px) {
	.hero__scrim {
		background: linear-gradient(180deg, rgba(27, 27, 28, 0.72) 0%, rgba(27, 27, 28, 0.46) 45%, rgba(27, 27, 28, 0.66) 100%);
	}
}

/* 48. Vehicle card spacing =================================================
   Rentsyst pads its own card wrapper 12px/20px/5px/12px, which pushed the photo
   off the card's top-left corner and made two cards with different image ratios
   look unevenly spaced. The theme's own padding handles the inside of the card,
   so the plugin's is zeroed.                                                  */

.rentsyst-catalog-item .wp-block-columns.rentsyst-catalog-item-wrap,
.rentsyst-catalog-item .wp-block-columns {
	padding: 0 !important;
}

/* The photo sits flush against the top edge. */
.rentsyst-catalog-item .rentsyst-image-box,
.rentsyst-catalog-item .rentsyst-image-box p,
.rentsyst-catalog-item .rentsyst-image-box a {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

/* 49. Hero slider — no snap on change =====================================
   The drift used to be bound to .is-active, so at every change the outgoing
   slide's animation was removed and its transform snapped back mid-fade while
   the incoming one jumped to its start frame. Running each slide's drift
   continuously and letting it alternate means nothing ever starts or stops, so
   the crossfade is the only thing that moves.                                 */

.hero__slide img,
.hero__slide.is-active img {
	animation: gcr-drift-a 26s ease-in-out infinite alternate;
}
.hero__slide[data-slide="2"] img,
.hero__slide[data-slide="2"].is-active img { animation-name: gcr-drift-b; }
.hero__slide[data-slide="3"] img,
.hero__slide[data-slide="3"].is-active img { animation-name: gcr-drift-c; }

@keyframes gcr-drift-a {
	from { transform: scale(1.02); }
	to   { transform: scale(1.11); }
}
@keyframes gcr-drift-b {
	from { transform: scale(1.10) translate3d(1.4%, 0, 0); }
	to   { transform: scale(1.02) translate3d(-1.4%, 0, 0); }
}
@keyframes gcr-drift-c {
	from { transform: scale(1.03) translate3d(0, 1.2%, 0); }
	to   { transform: scale(1.11) translate3d(0, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide img,
	.hero__slide.is-active img { animation: none; transform: scale(1.02); }
}

/* 50. Single vehicle content ==============================================
   The plugin stacks a lot of small blocks; they needed room to read as
   sections rather than a run of boxes.                                       */

.vehicle-detail { padding-block: 0.5rem; }

.is-rentsyst-page .rentsyst-info-box,
.is-rentsyst-page .rentsyst-price-per-day {
	padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.35rem, 2.4vw, 1.9rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	border-radius: var(--radius-lg);
}

/* More air between each spec row, and between the two spec columns. */
.is-rentsyst-page .rentsyst-info-box p {
	padding: 0.7rem 0;
	font-size: 0.95rem;
}

.is-rentsyst-page .wp-block-columns.rentsyst-info-box {
	gap: 0 clamp(2rem, 5vw, 4rem) !important;
}

/* Section labels get real separation from the block above them. */
.is-rentsyst-page p.rentsyst-info-box {
	margin: clamp(2.25rem, 4vw, 3rem) 0 clamp(0.85rem, 2vw, 1.25rem);
}
.is-rentsyst-page .vehicle-detail > .wp-block-columns:first-child p.rentsyst-info-box:first-of-type {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* The slider/photo at the top needs to clear the first spec block. */
.is-rentsyst-page .rentsyst-catalog-item-wrap > p:first-child,
.is-rentsyst-page .rentsyst-catalog-item-wrap > .wp-block-image {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* An empty description box should not render as a stray outline. */
.is-rentsyst-page .rentsyst-info-box:has(> .wp-block-group__inner-container > p:empty) { display: none; }
.is-rentsyst-page .rentsyst-info-box p:empty { display: none; }

/* 51. Hero buttons are never pre-hidden ===================================
   The hero shows either the search form or the buttons. Pre-hiding the buttons
   in CSS meant that if the reveal tween did not reach them — which is what
   happened once the form's tweens had no targets to measure against — they
   stayed invisible with no way back. GSAP's from() sets its own start state, so
   the buttons are visible by default and the animation is a bonus, not a
   prerequisite.                                                              */

.js .hero__actions,
.js .hero__actions > * {
	opacity: 1 !important;
	visibility: visible !important;
}

/* 52. Vehicle spec block padding ==========================================
   The spec block carries both .wp-block-columns and .rentsyst-info-box on one
   element, and something in the block/plugin cascade was zeroing its padding
   while its sibling boxes kept theirs — so it read as a borderless slab between
   two padded cards. Set explicitly.                                          */

.is-rentsyst-page .wp-block-columns.rentsyst-info-box {
	padding: clamp(1.35rem, 2.4vw, 1.9rem) !important;
	margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

/* 53. Search form controls ================================================
   The select's arrow was drawn with two crossed linear-gradients, which never
   really resolved into a triangle. It is a real caret icon now, and the whole
   date field opens the picker rather than just its icon.                      */

.hero-search__control { position: relative; }

/* Drop the gradient arrow — the icon replaces it. */
.hero-search__control select {
	background-image: none;
	padding-right: 1.4rem;
	cursor: pointer;
}

.hero-search__caret {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	fill: var(--char-500);
	pointer-events: none;
}
.hero-search__field:focus-within .hero-search__caret { fill: var(--red); }

/* The native indicator is stretched over the field so a click anywhere on the
   date opens the calendar; the visible icon sits beneath it. */
.hero-search__control input[type="date"] {
	cursor: pointer;
	position: relative;
}
.hero-search__control input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* Keep a visible calendar glyph on the right of the date fields. */
.hero-search__field--date .hero-search__control::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	pointer-events: none;
	background: var(--char-500);
	-webkit-mask: var(--gcr-cal) center / contain no-repeat;
	mask: var(--gcr-cal) center / contain no-repeat;
}
.hero-search__field--date:focus-within .hero-search__control::after { background: var(--red); }

:root {
	--gcr-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

.hero-search__field--date .hero-search__control input { padding-right: 1.4rem; }

/* 5px between every control and the button on a phone. */
@media (max-width: 960px) {
	.hero-search { gap: 5px; padding: 5px; }
}

/* 54. Date fields — single visible icon ===================================
   Stretching the native picker indicator over the field gave a reliable hit
   area but left its own glyph competing with the theme's. The indicator keeps
   its natural size and position, and the JS handler opens the picker from
   anywhere in the field instead.                                             */

.hero-search__control input[type="date"]::-webkit-calendar-picker-indicator {
	position: static;
	inset: auto;
	width: 15px;
	height: 15px;
	margin: 0;
	opacity: 0.5;
	cursor: pointer;
}
.hero-search__field--date:focus-within input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.85; }

/* The theme's duplicate glyph is no longer needed. */
.hero-search__field--date .hero-search__control::after { content: none; }
.hero-search__field--date .hero-search__control input { padding-right: 0.25rem; }

/* The whole field is the click target. */
.hero-search__field--date { cursor: pointer; }

/* ==========================================================================
   55. Filter sidebar card + taller vehicle photos
   Also mirrored in the client's Additional CSS for the live site.
   ========================================================================== */

/* The plugin sticks the INNER .aside on scroll (rentsyst-enable-fix-position),
   which left the wrapper's card background behind while the filter list floated
   over the page. Move the card onto .aside so the background travels with the
   content, whichever element the plugin decides to move. */

.is-rentsyst-page .rentsyst-wrap-filters {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.is-rentsyst-page .rentsyst-wrap-filters .aside {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
}

/* When the plugin pins it, keep it clear of the fixed header and let a long
   filter list scroll inside its own card rather than run off the screen. */
.is-rentsyst-page .rentsyst-wrap-filters .aside.rentsyst-enable-fix-position {
	top: calc(var(--header-h) + 1.5rem) !important;
	max-height: calc(100vh - var(--header-h) - 3rem);
	overflow-y: auto;
}

/* Taller vehicle photos — more of the car is visible in each card. */
.rentsyst-catalog-item .rentsyst-image-box img {
	aspect-ratio: 4 / 3;
}

/* ==========================================================================
   56. Fleet card image + filter sidebar bounds
   ========================================================================== */

/* The card is a fixed-height flex column, so the image column was being
   flex-shrunk from its natural 297px down to 192px while the <img> kept its
   aspect-ratio height — the anchor's overflow then clipped the bottom third of
   every car. The image column must not absorb the row's height difference. */

.rentsyst-catalog-item .rentsyst-image-box {
	flex: 0 0 auto !important;
	overflow: hidden;
}
.rentsyst-catalog-item .rentsyst-image-box p,
.rentsyst-catalog-item .rentsyst-image-box a {
	display: block;
	height: auto;
	overflow: visible;
}

/* The middle column takes up the slack instead. */
.rentsyst-catalog-item .rentsyst-options { flex: 1 1 auto !important; }

/* -- Filter sidebar -------------------------------------------------------
   Rentsyst pins the sidebar with position:fixed, which has no container to
   stop at, so it carried on over the sections below the catalog. Forcing
   sticky keeps the same pinned behaviour but bounded by the results column.
   !important beats the plugin's inline styles. */

.is-rentsyst-page .rentsyst-container-catalog { align-items: stretch; }

.is-rentsyst-page .rentsyst-wrap-filters {
	position: static;
	align-self: stretch;
}

.is-rentsyst-page .rentsyst-wrap-filters .aside,
.is-rentsyst-page .rentsyst-wrap-filters .aside.rentsyst-enable-fix-position {
	position: sticky !important;
	top: calc(var(--header-h) + 1.5rem) !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-height: calc(100vh - var(--header-h) - 3rem);
	overflow-y: auto;
}

/* ==========================================================================
   57. Fleet carousel
   A single row of cards on a native scroll-snap track — no carousel library,
   so it works with a trackpad, a touch drag, the keyboard and the arrows.
   ========================================================================== */

.fleet-carousel { position: relative; }

.fleet-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	/* proximity, not mandatory: mandatory re-targets programmatic scrolls and
	   pulled the arrow buttons straight back to the first card. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scroll-padding-left: 0;
	/* Room for the card shadow, and for the focus ring not to be clipped. */
	padding: 4px 4px 1rem;
	margin: -4px -4px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--sand-400) transparent;
}
.fleet-carousel__viewport:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.fleet-carousel__viewport::-webkit-scrollbar { height: 6px; }
.fleet-carousel__viewport::-webkit-scrollbar-track { background: var(--sand-200); border-radius: 100px; }
.fleet-carousel__viewport::-webkit-scrollbar-thumb { background: var(--sand-400); border-radius: 100px; }
.fleet-carousel__viewport::-webkit-scrollbar-thumb:hover { background: var(--char-300); }

/* Rentsyst wraps its cards in #rentsyst_page > .rentsyst-flex > .results__items.
   Flatten those so the cards themselves become the scroll track. */
.fleet-carousel #rentsyst_page,
.fleet-carousel .rentsyst-flex,
.fleet-carousel .rentsyst-container-catalog { display: contents; }

.fleet-carousel .rentsyst-vehicles,
.fleet-carousel .results__items {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	width: auto !important;
	align-items: stretch;
}

.fleet-carousel .rentsyst-catalog-item {
	flex: 0 0 clamp(260px, 30%, 340px);
	scroll-snap-align: start;
	height: auto;
}

/* Arrows sit outside the cards on wide screens, over them when space is tight. */
.fleet-carousel__nav {
	position: absolute;
	top: calc(50% - 1.5rem);
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s, transform 0.2s;
}
.fleet-carousel__nav .icon { width: 18px; height: 18px; fill: var(--char-900); }
.fleet-carousel__nav:hover { background: var(--red); }
.fleet-carousel__nav:hover .icon { fill: #fff; }

.fleet-carousel__nav--prev { left: -22px; }
.fleet-carousel__nav--prev .icon { transform: scaleX(-1); }
.fleet-carousel__nav--next { right: -22px; }

/* Hidden when the track cannot scroll that way. */
.fleet-carousel__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.fleet-carousel__hint {
	margin: 0.75rem 0 0;
	font-size: 0.78rem;
	color: var(--ink-soft);
}
/* Pointing devices with hover get the arrows; the hint is for touch. */
@media (hover: hover) {
	.fleet-carousel__hint { display: none; }
}

@media (max-width: 1360px) {
	.fleet-carousel__nav--prev { left: 6px; }
	.fleet-carousel__nav--next { right: 6px; }
}

@media (max-width: 700px) {
	.fleet-carousel .rentsyst-catalog-item { flex-basis: 82%; }
	.fleet-carousel__nav { display: none; }
}

/* Dragging with a mouse. */
.fleet-carousel__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}
.fleet-carousel__viewport.is-dragging a { pointer-events: none; }

/* While the arrows are animating the track, snapping and native smooth
   scrolling must stand aside or they re-target the animation. */
.fleet-carousel__viewport.is-gliding {
	scroll-snap-type: none;
	scroll-behavior: auto;
}