/*
Theme Name: Car Rental
Theme URI: https://example.com/car-rental-theme
Author: Car Rental
Author URI: https://example.com
Description: Professional car rental WordPress theme. Presentation layer for the Car Rental Core plugin. Mobile-first, responsive, accessible, and SEO-friendly.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: car-rental
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
	--cr-primary: #13466D;
	--cr-primary-dark: #0B2E49;
	--cr-primary-light: #EAF3F8;
	--cr-neutral-light: #F7F9FB;
	--cr-text: #17212B;
	--cr-text-muted: #64748B;
	--cr-border: #DCE4EA;
	--cr-success: #16805C;
	--cr-warning: #C47A16;
	--cr-danger: #C94A4A;
	--cr-white: #FFFFFF;

	/* Poppins is loaded from inc/enqueue.php. The stack behind it is what gets
	   painted while the font is downloading, thanks to display=swap, and what a
	   reader who never gets the file is left with, so it starts with the system
	   faces a phone is most likely to actually have. */
	--cr-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cr-font-size-sm: 0.875rem;
	--cr-font-size-base: 1rem;
	--cr-line-height: 1.6;
	--cr-container-max: 72rem;
	--cr-gutter: 1.25rem;

	/* The bar's height, in one place, because the front page hero has to reserve
	   exactly this much room for a header that is taken out of the flow. */
	--cr-header-height: 4.5rem;
}

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

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

body {
	margin: 0;
	font-family: var(--cr-font-sans);
	font-size: var(--cr-font-size-base);
	line-height: var(--cr-line-height);
	color: var(--cr-text);
	background-color: var(--cr-white);
	/* Editors paste long URLs and bare addresses. Without this a single one of
	   them is wider than a phone and drags the whole document sideways.
	   break-word and not anywhere, because anywhere also changes how narrow the
	   page is allowed to get, which would shrink columns on purpose. */
	overflow-wrap: break-word;
}

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

a {
	color: var(--cr-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--cr-primary);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.75rem;
	line-height: 1.25;
	color: var(--cr-primary-dark);
}

p {
	margin: 0 0 1rem;
}

.cr-container {
	max-width: var(--cr-container-max);
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.cr-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 0.5rem 1rem;
	background: var(--cr-primary-dark);
	color: var(--cr-white);

	/* Clipped in place rather than parked at left: -9999px. The parked version
	   is out of sight but still laid out, and the reason the theme's own styles
	   test forbids that trick is that a box far off to one side is still in the
	   document, which is what makes a sideways swipe possible on a phone. The
	   clip does the same job with the element still at its real position, so
	   nothing is off the page at any width. */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cr-skip-link:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}

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

.wp-block-search__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cr-button,
.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	font-size: var(--cr-font-size-base);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* A button that lifts a pixel under the pointer and settles back when pressed
   is the whole of the tactile feedback a flat rectangle can give, and it costs
   one property. Both are hover only: a button that moved while it held keyboard
   focus would shift under the reader every time they tabbed back to it. */
.cr-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* The shadow is only for the filled variant, which has an edge to cast one
   from. An outlined button already has a border to read as its edge and a
   shadow on top of that just muddies it, and the two variants that sit on the
   brand colour have no edge to cast from at all because they are the
   background themselves. So the outline preference opts out here for the same
   reason it opts out of the fill above. */
.cr-button--primary:hover,
.cr-button--primary:focus {
	box-shadow: 0 0.25rem 0.75rem rgba(11, 46, 73, 0.18);
}

body.cr-buttons-outline .cr-button--primary:hover,
body.cr-buttons-outline .cr-button--primary:focus {
	box-shadow: none;
}

.cr-button--light:hover,
.cr-button--light:focus,
.cr-button--ghost:hover,
.cr-button--ghost:focus {
	box-shadow: none;
}

.cr-button:active,
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	transition-duration: 0.05s;
}

/* The lift and the press are movement, so they go when the reader has asked
   for no movement. The colour and shadow changes stay: they are changes of
   shade rather than of position, and the hover that reveals them is the same
   hover a reader without a pointer reaches with the keyboard. */
@media (prefers-reduced-motion: reduce) {
	.cr-button:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.cr-button:active,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}

	.cr-button:active,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transition-duration: 0.15s;
	}
}

.cr-button--primary {
	background-color: var(--cr-primary);
	color: var(--cr-white);
}

.cr-button--primary:hover,
.cr-button--primary:focus {
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
}

.cr-button--secondary {
	background-color: transparent;
	border-color: var(--cr-primary);
	color: var(--cr-primary);
}

.cr-button--secondary:hover,
.cr-button--secondary:focus {
	background-color: var(--cr-primary-light);
	color: var(--cr-primary-dark);
}

/* --- Site-wide button style (Car Rental -> Settings -> General) ------------- */

/* The "Outline" preference turns the filled button into an outlined one, and
   leaves the buttons that are already outlined alone. It also leaves --light and
   --ghost alone: those two live on the brand-coloured hero and call to action,
   where an outline in the brand colour is invisible and a solid fill would not
   contrast with the background they sit on. A preference for the buttons that
   normally look solid should not repaint the ones that had to be different. */
body.cr-buttons-outline .cr-button--primary {
	background-color: transparent;
	border-color: var(--cr-primary);
	color: var(--cr-primary);
}

body.cr-buttons-outline .cr-button--primary:hover,
body.cr-buttons-outline .cr-button--primary:focus {
	background-color: var(--cr-primary-light);
	color: var(--cr-primary-dark);
}

.cr-alert {
	padding: 0.875rem 1rem;
	border-radius: 0.25rem;
	font-size: var(--cr-font-size-sm);
}

.cr-alert--success {
	background-color: rgba(22, 128, 92, 0.12);
	color: var(--cr-success);
	border: 1px solid var(--cr-success);
}

.cr-alert--error {
	background-color: rgba(201, 74, 74, 0.12);
	color: var(--cr-danger);
	border: 1px solid var(--cr-danger);
}

.cr-site-header {
	position: relative;
	background-color: var(--cr-primary);
	color: var(--cr-white);
}

.cr-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--cr-header-height);
}

.cr-site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cr-site-branding .custom-logo {
	max-height: 3rem;
	width: auto;
}

.cr-site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cr-white);
}

/* A phone gets a panel that the toggle opens; a bar across the top is the
   enhancement, at the end of the header styles. The panel is white, so every
   link colour here is the dark one, and the bar's white link colours are
   reinstated in the min-width query.

   The panel hangs below the bar rather than beside it, so its height comes
   straight out of the viewport: seven links, any sub-menus and the call to
   action come to roughly 370px, which is fine on a phone held upright and 68px
   too much on one held sideways, where the bottom of the list and the whole
   "Book a Car" button ended up past the bottom of the screen with no way to
   reach them. Capping the panel at the height left under the bar and letting
   it scroll means the end of the list is always reachable, in either
   orientation. 100vh is the fallback for the browsers without dvh; where both
   are understood the dynamic one wins, so the panel does not get a strip of
   browser chrome back when the address bar hides on a scroll. */
.cr-nav {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 100;
	max-height: var(--cr-nav-panel-max, calc(100vh - var(--cr-header-height)));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cr-white);
	padding: 1rem 1.25rem;
	gap: 1rem;
}

@supports (height: 100dvh) {
	.cr-nav {
		--cr-nav-panel-max: calc(100dvh - var(--cr-header-height));
	}
}

.cr-nav.is-open {
	display: flex;
}

/* The panel is display:none until the toggle opens it, and nothing transitions
   out of display:none, so this is an animation rather than a transition: an
   animation starts fresh every time the element is rendered, which is exactly
   once per open. A short fade with a few pixels of travel reads as the panel
   arriving rather than the page being rearranged. The travel is small on
   purpose. A panel that slid in from off-screen would drag the eye past
   everything it crossed, and the links are the same ones the reader was just
   looking at. */
@keyframes cr-nav-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.cr-nav .menu {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-nav .menu .sub-menu {
	margin-top: 0.5rem;
}

.cr-nav a {
	color: var(--cr-primary-dark);
	text-decoration: none;
	font-weight: 500;
}

.cr-nav a:hover,
.cr-nav a:focus {
	color: var(--cr-primary);
}

/* Where the reader is. On a white panel an underline has nothing to sit on, so
   the current page is marked with a bar down its edge instead. */
.cr-nav .menu > li > a {
	display: inline-block;
	padding-bottom: 0.25rem;
}

.cr-nav .menu .current-menu-item > a,
.cr-nav .menu .current_page_item > a,
.cr-nav .menu a[aria-current="page"] {
	color: var(--cr-primary-dark);
	font-weight: 700;
	border-bottom: 0;
	box-shadow: inset 0.1875rem 0 0 0 var(--cr-primary);
	padding-left: 0.75rem;
}

/* An ancestor of the current page is lit too, but only the page itself earns
   the marker, so the two never compete. */
.cr-nav .menu .current-menu-ancestor > a,
.cr-nav .menu .current-menu-parent > a {
	color: var(--cr-primary-dark);
}

.cr-nav-toggle {
	display: block;
	border: 0;
	background: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--cr-white);
}

.cr-nav-toggle .cr-nav-toggle__icon {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.cr-nav-toggle .cr-nav-toggle__icon::before,
.cr-nav-toggle .cr-nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: currentColor;
}

.cr-nav-toggle .cr-nav-toggle__icon::before {
	top: -7px;
}

.cr-nav-toggle .cr-nav-toggle__icon::after {
	top: 7px;
}

/* The closed icon is three bars and the open one is a cross, so the button
   shows which of the two it will do. Driven off the panel's own is-open rather
   than a second class on the button, because is-open is the one piece of state
   the script already keeps for four different things (the click, the desktop
   breakpoint, a click outside and Escape) and a class kept in step with it by
   hand is a second thing that can disagree.

   Only the two outer bars move. The middle one is the element's own background,
   so it is cleared rather than rotated: leaving it in place under the cross
   would draw a third stroke through the middle of it. The ::before and ::after
   are positioned 7px either side of the middle, which is the gap the bars are
   spaced by, so they have to be pulled back to top:0 to meet in the centre. */
.cr-nav.is-open ~ .cr-nav-toggle .cr-nav-toggle__icon {
	background: transparent;
}

.cr-nav.is-open ~ .cr-nav-toggle .cr-nav-toggle__icon::before,
.cr-nav.is-open ~ .cr-nav-toggle .cr-nav-toggle__icon::after {
	top: 0;
}

.cr-nav.is-open ~ .cr-nav-toggle .cr-nav-toggle__icon::before {
	transform: rotate(45deg);
}

.cr-nav.is-open ~ .cr-nav-toggle .cr-nav-toggle__icon::after {
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.cr-nav.is-open {
		animation: cr-nav-in 0.2s ease;
	}

	.cr-nav-toggle .cr-nav-toggle__icon::before,
	.cr-nav-toggle .cr-nav-toggle__icon::after {
		transition: transform 0.2s ease, top 0.2s ease;
	}
}

.cr-page-header {
	background-color: var(--cr-primary-light);
	padding: 1.75rem 0;
	margin-bottom: 1.5rem;
}

/* The one and only <h1> of a page (see inc/template-hooks.php). Clamped so a
   long page title never overflows on a 320px screen. */
.cr-page-header h1 {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.cr-page-header__description {
	max-width: 40rem;
	margin: 0.5rem 0 0;
	color: var(--cr-text-muted);
}

.cr-main {
	padding-bottom: 3rem;
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.cr-breadcrumbs {
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
	padding: 0.75rem 0;
}

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

.cr-breadcrumbs__item + .cr-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--cr-border);
}

.cr-breadcrumbs__item [aria-current="page"] {
	color: var(--cr-text);
}

.cr-site-footer {
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
	font-size: var(--cr-font-size-sm);
	padding: 3rem 0 1rem;
}

.cr-site-footer a {
	color: var(--cr-white);
}

.cr-site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 2rem;
	padding-top: 1rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* --- Front page ----------------------------------------------------------- */

.cr-hero-booking {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	padding: 1rem;
	margin-top: 1.5rem;
	max-width: 44rem;
}

.cr-hero-booking__field {
	margin: 0;
	flex: 1 1 100%;
}

/* A date input carries its own intrinsic width, which on a phone is wider than
   the screen. */
.cr-hero-booking__field input[type="date"] {
	min-width: 0;
	width: 100%;
}

.cr-hero-booking__field label {
	display: block;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary-dark);
	margin-bottom: 0.25rem;
}

.cr-hero-booking__field input[type="date"] {
	min-width: 10rem;
}

.cr-front-section-title {
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}

.cr-front-featured__more {
	margin-top: 1.25rem;
}

.cr-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}

.cr-category-card {
	display: block;
	padding: 1.25rem;
	background-color: var(--cr-neutral-light);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cr-category-card:hover,
.cr-category-card:focus {
	border-color: var(--cr-primary);
	background-color: var(--cr-primary-light);
}

.cr-category-card__name {
	margin-bottom: 0.25rem;
	color: var(--cr-primary-dark);
}

.cr-category-card__desc {
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

.cr-category-card__count {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary);
}

/* --- Forms (theme-generic, shared by contact/hero) ------------------------- */

input,
select,
textarea {
	font-family: inherit;
	font-size: var(--cr-font-size-base);
	color: var(--cr-text);
	border: 1px solid var(--cr-border);
	border-radius: 0.25rem;
	padding: 0.625rem 0.75rem;
	background-color: var(--cr-white);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--cr-primary);
}

/* --- Site footer info column ------------------------------------------------ */

.cr-site-footer__info {
	margin-top: 1.5rem;
	display: grid;
	gap: 0.25rem;
	color: rgba(255, 255, 255, 0.85);
}

.cr-site-footer__info a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: border-bottom-color 0.2s ease;
}

.cr-site-footer__info a:hover,
.cr-site-footer__info a:focus {
	color: var(--cr-white);
	border-bottom-color: var(--cr-white);
}

/* --- Pages: shared body styles --------------------------------------------- */

/* .cr-page is only ever applied to a page template, so everything below is
   scoped to page content and cannot leak into the blog, the fleet or the home
   page. The page heading itself is not here on purpose: it is printed once by
   car_rental_display_page_header() as part of .cr-page-header. */

.cr-page .entry-content {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.cr-page .entry-content > * {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.cr-page .entry-content > :last-child {
	margin-bottom: 0;
}

.cr-page .entry-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	letter-spacing: -0.01em;
}

.cr-page .entry-content h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.cr-page .entry-content h4,
.cr-page .entry-content h5,
.cr-page .entry-content h6 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.0625rem;
}

.cr-page .entry-content > :first-child {
	margin-top: 0;
}

.cr-page .entry-content ul,
.cr-page .entry-content ol {
	padding-left: 1.25rem;
}

.cr-page .entry-content li {
	margin-bottom: 0.5rem;
}

.cr-page .entry-content li:last-child {
	margin-bottom: 0;
}

.cr-page .entry-content a {
	text-underline-offset: 0.15em;
}

.cr-page .entry-content img {
	border-radius: 0.5rem;
}

.cr-page .entry-content blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--cr-primary);
	color: var(--cr-text-muted);
	font-size: 1.0625rem;
}

.cr-page .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.cr-page .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cr-font-size-sm);
}

.cr-page .entry-content th,
.cr-page .entry-content td {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--cr-border);
	text-align: left;
}

.cr-page .entry-content th {
	background-color: var(--cr-neutral-light);
	color: var(--cr-primary-dark);
}

.cr-page .page-links {
	margin-top: 2rem;
	font-weight: 600;
}

/* Wide media may leave the prose column, but never the page container. */
.cr-page .entry-content > .alignwide,
.cr-page .entry-content > .alignfull {
	width: 100%;
	max-width: var(--cr-container-max);
}

/* A featured image sits above the prose at full container width. */
.cr-page-featured-image,
.cr-about__figure,
.cr-services__figure,
.cr-service-single__figure {
	margin: 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--cr-primary-light);
}

.cr-page-featured-image img,
.cr-about__image,
.cr-services__image,
.cr-service-single__image {
	width: 100%;
	height: auto;
}

/* --- About page ------------------------------------------------------------ */

/* The standfirst and the page image share a row on wide screens and stack
   underneath each other on narrow ones. Flex rather than grid, so a page with
   only one of the two still fills the width instead of leaving a gap. */

.cr-about__intro,
.cr-services__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
}

.cr-about__standfirst,
.cr-services__standfirst {
	flex: 1 1 22rem;
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--cr-text-muted);
}

.cr-about__figure,
.cr-services__figure {
	flex: 1 1 22rem;
}

.cr-about__content,
.cr-services__content {
	padding-top: 2rem;
}

.cr-about__facts .cr-facts__list {
	margin-top: 0;
}

/* --- About page: the team --------------------------------------------------- */

/* One card per row on a phone. The column count is set explicitly at each
   breakpoint below rather than left to auto-fit, because auto-fit sizes the
   columns to the container and leaves a team of four or five as a row of three
   with a single card stranded underneath it. */

.cr-about__story-head {
	margin-bottom: 1.5rem;
}

.cr-team__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A static panel, like the service cards: no anchor, so nothing here reacts to
   the pointer and nothing inside it is a tab stop. */
.cr-team-card {
	display: flex;
	flex-direction: column;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	overflow: hidden;
}

/* A portrait crop, because that is what a photograph of a person is, and the
   source image is landscape. */
.cr-team-card__media--photo {
	display: block;
	aspect-ratio: 1 / 1;
}

.cr-team-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A member with no photograph gets their own initials instead of a stock
   silhouette: the tile is real data off their name, and nothing on the page
   then claims to be a picture of somebody. */
.cr-team-card__media--monogram {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background-color: var(--cr-primary-light);
	color: var(--cr-primary);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.cr-team-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.25rem;
}

.cr-team-card__name {
	display: block;
	margin: 0;
	color: var(--cr-primary-dark);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.cr-team-card__role {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cr-primary);
}

.cr-team-card__bio {
	margin: 0;
	color: var(--cr-text-muted);
}

/* --- Services page --------------------------------------------------------- */

.cr-services__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	overflow: hidden;
}

/* The card is a static panel, so it carries no hover or focus affordance: a
   border that changes on hover tells the reader the card can be clicked, and
   it cannot. */
.cr-service-card__media--photo {
	display: block;
	aspect-ratio: 16 / 10;
}

.cr-service-card__photo {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
}

.cr-service-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.cr-service-card__media--icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 1.25rem 1.25rem 0;
	border-radius: 0.5rem;
	background-color: var(--cr-primary-light);
	color: var(--cr-primary);
}

.cr-service-card__media--icon .cr-icon {
	width: 1.625rem;
	height: 1.625rem;
}

/* The heading is a real h3 inside a non-interactive card, so it only needs
   the default heading margins taken back out. */
.cr-service-card__name {
	display: block;
	margin: 0;
	color: var(--cr-primary-dark);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.cr-service-card__text {
	display: block;
	color: var(--cr-text-muted);
}

.cr-services__more {
	margin: 1.5rem 0 0;
}

/* --- Single service page --------------------------------------------------- */

.cr-service-single__figure {
	margin-bottom: 2rem;
}

.cr-service-single__standfirst {
	max-width: 44rem;
	margin-bottom: 1.5rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--cr-text-muted);
}

/* Full width on a phone, so each button is a comfortable tap target. The
   side-by-side row is the enhancement, at the end of this file. */
.cr-service-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 0;
}

.cr-service-single__actions .cr-button {
	flex: 1 1 100%;
}

.cr-service-single__actions .cr-button + .cr-button {
	margin-top: 0.25rem;
}

/* --- Blog post cards ------------------------------------------------------ */

/*
 * One card, three listings. home.php, archive.php and search.php used to carry
 * a copy each and had already drifted apart, so the rules below are written
 * against the shared part rather than against the templates.
 */

.cr-posts-grid {
	display: grid;
	/* 18rem rather than 16rem: a 26-word summary needs a measure wider than
	   the vehicle card's spec list, and at 16rem it wraps to six ragged lines. */
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.cr-post-card {
	display: flex;
	flex-direction: column;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cr-post-card:hover,
.cr-post-card:focus-within {
	box-shadow: 0 0.25rem 1rem rgba(11, 46, 73, 0.12);
	transform: translateY(-2px);
}

.cr-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	/* A neutral field rather than nothing, so a row mixing illustrated and
	   unillustrated posts keeps one line of card tops. */
	background-color: var(--cr-neutral-light);
	overflow: hidden;
}

.cr-post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.cr-post-card:hover .cr-post-card__image {
	transform: scale(1.03);
}

.cr-post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	color: var(--cr-text-muted);
	font-size: var(--cr-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.cr-post-card__body {
	display: flex;
	flex-direction: column;
	/* flex-grow pushes the summary down so the meta rows of a row of cards
	   share a baseline, whichever card has the longer summary. */
	flex-grow: 1;
	gap: 0.5rem;
	padding: 1rem;
}

.cr-post-card__eyebrow {
	margin: 0;
	color: var(--cr-primary);
	font-size: var(--cr-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cr-post-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.cr-post-card__eyebrow a:hover,
.cr-post-card__eyebrow a:focus {
	text-decoration: underline;
}

.cr-post-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.35;
}

.cr-post-card__title a {
	color: var(--cr-primary-dark);
	text-decoration: none;
}

.cr-post-card__title a:hover,
.cr-post-card__title a:focus {
	color: var(--cr-primary);
}

/*
 * The whole card is the hit target, but the title link stays the only link.
 * A link on the image, the title and the category would put one card in the
 * tab order three times, and a screen reader would announce it three times.
 * Stretching the title's own box over the card gives the same mouse
 * behaviour with one stop and one accessible name.
 *
 * The eyebrow link sits above it in the stacking order so the category stays
 * independently clickable.
 */
.cr-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cr-post-card {
	position: relative;
}

.cr-post-card__eyebrow,
.cr-post-card__eyebrow a {
	position: relative;
	z-index: 1;
}

.cr-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--cr-text-muted);
	font-size: var(--cr-font-size-sm);
}

.cr-post-card__separator {
	color: var(--cr-border);
}

/* A keyboard user must be able to see where they are on the card. */
.cr-post-card:has(.cr-post-card__title a:focus-visible) {
	outline: 2px solid var(--cr-primary);
	outline-offset: 2px;
}

.cr-post-card__summary {
	margin: 0;
	color: var(--cr-text-muted);
	font-size: var(--cr-font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
	.cr-post-card,
	.cr-post-card__image {
		transition: none;
	}

	.cr-post-card:hover,
	.cr-post-card:focus-within {
		transform: none;
	}

	.cr-post-card:hover .cr-post-card__image {
		transform: none;
	}
}

/* --- Search form ---------------------------------------------------------- */

.cr-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.cr-searchform__field {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
	font: inherit;
	color: var(--cr-text);
}

.cr-searchform__field:focus {
	border-color: var(--cr-primary);
	outline: 2px solid var(--cr-primary-light);
	outline-offset: 1px;
}

.cr-searchform__submit {
	flex: 0 0 auto;
}

/* --- Comments ------------------------------------------------------------- */

.cr-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--cr-border);
}

.cr-comments__title {
	margin-bottom: 1.5rem;
	font-size: 1.375rem;
}

.cr-comments__list,
.cr-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-comments__list .children {
	margin-left: 1.5rem;
	padding-left: 1rem;
	border-left: 2px solid var(--cr-border);
}

.cr-comments__list .comment-body {
	padding: 1rem 0;
	border-bottom: 1px solid var(--cr-border);
}

.cr-comments__list .comment-author img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.cr-comments__list .comment-meta {
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

.cr-comments__list .reply {
	font-size: var(--cr-font-size-sm);
}

.cr-comments__closed,
.cr-comments__cancel {
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

.cr-comments .comment-form {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.cr-comments .comment-form label {
	display: block;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
}

.cr-comments .comment-form input[type="text"],
.cr-comments .comment-form input[type="email"],
.cr-comments .comment-form input[type="url"],
.cr-comments .comment-form textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
	font: inherit;
}

.cr-comments .comment-form textarea {
	min-height: 8rem;
}

/*
 * The form is a grid, so its own heading has to participate: without this it
 * inherits the browser's block margins and drifts out of the column rhythm.
 */
.cr-comments__form-title {
	margin: 0;
	font-size: 1.125rem;
}

.cr-comments__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

/*
 * The submit button was the one control the form never styled, so it rendered
 * as an unstyled browser button on an otherwise themed page. comment_form()
 * is told to print the theme's own button classes.
 */
.cr-comments .comment-form .cr-button {
	justify-self: start;
	/* The grid would otherwise stretch the button across the column. */
	width: auto;
	cursor: pointer;
}

/*
 * A "moderation not approved" notice and the required-field marker are the two
 * things WordPress adds to a comment form that a theme usually forgets.
 */
.cr-comments .comment-form .comment-notes,
.cr-comments .comment-form .logged-in-as {
	margin: 0;
	color: var(--cr-text-muted);
	font-size: var(--cr-font-size-sm);
}

.cr-comments .comment-form .required {
	color: var(--cr-danger);
}

.cr-comments__list .comment-awaiting-moderation {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
	background-color: var(--cr-primary-light);
	color: var(--cr-primary);
	font-size: var(--cr-font-size-sm);
}

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

.cr-site-footer__menu {
	margin-bottom: 1.5rem;
}

.cr-site-footer__menu .menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Pagination ------------------------------------------------------------- */

.navigation.pagination {
	margin: 2rem 0;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.25rem;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--cr-font-size-base);
	color: var(--cr-primary);
}

a.page-numbers:hover,
a.page-numbers:focus {
	border-color: var(--cr-primary);
	background-color: var(--cr-primary-light);
}

.page-numbers.current {
	border-color: var(--cr-primary);
	background-color: var(--cr-primary);
	color: var(--cr-white);
}

.page-numbers.dots {
	border: 0;
	color: var(--cr-text-muted);
}

/* From a phone upwards: the header, the hero booking row, the page furniture.
   Every value here is the one the base rules used to carry, so a tablet sees
   exactly what it saw before. */
@media (min-width: 48rem) {
	.cr-page-header {
		padding: 2.5rem 0;
		margin-bottom: 2.5rem;
	}

	.cr-hero-booking {
		gap: 1rem;
	}

	.cr-hero-booking__field {
		flex: 1 1 14rem;
	}

	.cr-site-footer__menu .menu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.cr-page .entry-content {
		max-width: 46rem;
	}

	.cr-about__content,
	.cr-services__content {
		padding-top: 2.5rem;
	}

	.cr-service-card__body {
		padding: 1.5rem;
	}

	.cr-service-card__media--icon {
		margin: 1.5rem 1.5rem 0;
	}

	.cr-services__grid {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
		gap: 1.5rem;
	}

	.cr-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.cr-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (min-width: 24rem) {
	.cr-container {
		padding-left: var(--cr-gutter);
		padding-right: var(--cr-gutter);
	}

	.cr-service-single__actions .cr-button {
		flex: 0 1 auto;
	}

	.cr-service-single__actions .cr-button + .cr-button {
		margin-top: 0;
	}
}


/* --- Sticky header, nav CTA, footer grid (homepage phase) ------------------- */

/* At 600px and under WordPress floats the admin bar over the page rather than
   pushing it down, so the header sits at the top and the offsets below are the
   enhancement. */
.cr-site-header { position: sticky; top: 0; z-index: 100; transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
@media (min-width: 601px) {
	.admin-bar .cr-site-header { top: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .cr-site-header { top: 46px; } }
.cr-site-header.is-scrolled { box-shadow: 0 1px 0 var(--cr-border), 0 0.5rem 1rem rgba(11, 46, 73, 0.06); }

/* --- A bar that starts out over the hero ------------------------------------- */

/* On a page that opens with a full width hero, the bar is see-through at the top
   and takes the brand colour back once the reader scrolls, so the hero is one
   unbroken photograph instead of a strip of it with a bar laid across.

   Two things have to be true for that to work, and neither is optional:

   The bar has to come out of the flow. A sticky bar still occupies its own space
   in the document, so a see-through one would be showing the page background
   through it rather than the hero. Fixed takes it out of the flow, which also
   means it stays pinned while the position changes, so nothing jumps when the
   scroll listener swaps the class.

   The hero has to make room for it. The bar is out of the flow now, so nothing
   below is pushed down for it, and the headline would otherwise sit under it. */

/* .cr-js is set by an inline script in the head. The class that puts the colour
   back is added by script too, so without javascript there would be nothing to
   bring the solid bar back and the bar would stay see-through for good. Gating
   the see-through state on the same thing that can undo it means the no
   javascript case keeps the solid bar it has today.

   --cr-header-clearance is how the hero is told to make room. It is a variable
   rather than a padding override so that it adds onto whatever padding the hero
   already has, at every breakpoint, instead of replacing it with one number. */
.cr-js .cr-header-over-hero {
	--cr-header-clearance: var(--cr-header-height);
}

.cr-js .cr-header-over-hero .cr-site-header {
	position: fixed;
	right: 0;
	left: 0;
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* The class the scroll listener adds. This is the admin's brand colour, the same
   one the bar was already painted with everywhere else. */
.cr-js .cr-header-over-hero .cr-site-header.is-scrolled {
	background-color: var(--cr-primary);
	border-bottom-color: var(--cr-primary-dark);
}

/* On a phone the call to action is the last thing in a white panel, so it is
   filled to make it a button rather than a third link. The bar's own
   treatment, where it inverts against the primary colour, is the enhancement. */
.cr-nav .cr-nav__cta {
	padding: 0.5rem 1.25rem;
	min-height: 2.75rem;
	width: 100%;
	background-color: var(--cr-primary);
	color: var(--cr-white);
}
.cr-nav .cr-nav__cta:hover,
.cr-nav .cr-nav__cta:focus {
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
}

/* The bar across the top of the page, and everything that changes with it. */
@media (min-width: 48rem) {
	.cr-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: static;
		padding: 0;
		gap: 1.5rem;
		/* The phone panel's cap and its own scrollbar have nothing to clip once
		   the nav is a bar in the flow, and a max-height here would quietly crop
		   the links on a short window. */
		max-height: none;
		overflow-y: visible;
		overscroll-behavior: auto;
		background: none;
		border-bottom: 0;
		box-shadow: none;
	}

	.cr-nav .menu {
		flex-direction: row;
		gap: 1.25rem;
		width: auto;
	}

	.cr-nav .menu .sub-menu {
		margin-top: 0;
	}

	/* The bar is the primary colour, so its links go back to white. */
	.cr-nav a {
		color: rgba(255, 255, 255, 0.92);
	}

	.cr-nav a:hover,
	.cr-nav a:focus {
		color: var(--cr-white);
	}

	/* A white panel has room for an underline, so the current page takes one
	   rather than an edge bar. */
	.cr-nav .menu .current-menu-item > a,
	.cr-nav .menu .current_page_item > a,
	.cr-nav .menu a[aria-current="page"] {
		color: var(--cr-white);
		border-bottom: 2px solid currentColor;
		box-shadow: none;
		padding-left: 0;
	}

	.cr-nav .menu .current-menu-ancestor > a,
	.cr-nav .menu .current-menu-parent > a {
		color: var(--cr-white);
	}

	/* Same reason inverted: a white button on the primary bar is not a button. */
	.cr-nav .cr-nav__cta {
		width: auto;
		background-color: var(--cr-white);
		color: var(--cr-primary);
	}

	.cr-nav .cr-nav__cta:hover,
	.cr-nav .cr-nav__cta:focus {
		background-color: var(--cr-primary-light);
		color: var(--cr-primary-dark);
	}

	.cr-nav-toggle {
		display: none;
	}
}

.cr-site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cr-site-footer__name { margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 700; }
.cr-site-footer__col p { margin: 0 0 0.5rem; }
.cr-site-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.cr-site-footer__info { margin-top: 0; }

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

   Every rule here is scoped to a .cr-home-* class that only
   front-page.php renders, so nothing in this block can reach the blog, the
   fleet, About, Services or any single page. The homepage's shared chrome
   (buttons, search widget, category chips, carousel) lives in
   assets/css/home.css and is reused rather than duplicated.

   Mobile-first: the base rules are the 320px phone, and each breakpoint only
   ever adds columns or space. Breakpoints follow the existing 48rem / 56rem /
   64rem scale used elsewhere in this file.
   ========================================================================== */

/* Section rhythm. The full-bleed bands (hero, featured, journey, cta) manage
   their own padding on an inner wrapper, so they are not in this list. */
.cr-home-fleet,
.cr-home-why,
.cr-home-services,
.cr-home-process,
.cr-home-testimonials,
.cr-home-blog {
	padding-block: 3rem;
}

/* --- Homepage shared type -------------------------------------------------- */

.cr-home-head {
	max-width: 42rem;
	margin-bottom: 2rem;
}

/* Sized for a phone by default. The type grows into the fluid values in the
   min-width query at the end of this file. */
.cr-home-head h2,
.cr-home-why h2,
.cr-home-journey h2,
.cr-home-cta h2 {
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.cr-home-head p {
	margin: 0.75rem 0 0;
	font-size: 1.0625rem;
	color: var(--cr-text-muted);
}

.cr-home-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cr-primary);
}

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

.cr-home-hero {
	position: relative;
	/* Above the trust strip, so the search panel can hang over the section
	   boundary instead of being painted over by it. */
	z-index: 1;
	isolation: isolate;
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
	/* No bottom padding: the search panel is the last thing in the hero and it
	   overlaps the edge, so the strip below carries the clearance.
	   --cr-header-clearance is zero unless the bar has been lifted out of the flow
	   over this hero, in which case the bar's own height is added on top here
	   rather than as a second rule that would replace this padding. */
	padding-block: calc(4rem + var(--cr-header-clearance, 0rem)) 0;
}

.cr-home-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One scrim, darker on the left where the copy sits, so the headline keeps
   its contrast whatever photograph the administrator chooses. */
.cr-home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(11, 46, 73, 0.88 ) 0%,
		rgba(11, 46, 73, 0.72 ) 55%,
		rgba(11, 46, 73, 0.55 ) 100%
	);
}

.cr-home-hero__copy {
	max-width: 42rem;
}

.cr-home-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a9cfe6;
}

.cr-home-hero h1 {
	margin: 0 0 1rem;
	font-size: 2rem;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--cr-white);
	/* Long words like "Destination" must not push the page sideways at 320px. */
	overflow-wrap: break-word;
}

.cr-home-hero__lead {
	max-width: 32rem;
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}

.cr-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.cr-home-hero__actions .cr-button {
	flex: 1 1 100%;
}

/* The search is a full-width bar that hangs over the bottom of the hero, at
   every width. It is the strongest single cue that this is a booking site. */
.cr-home-hero .cr-search {
	position: relative;
	margin-top: 3rem;
	margin-bottom: -4.5rem;
	box-shadow: 0 1.25rem 2.5rem rgba(11, 46, 73, 0.22);
}

/* --- Fleet ----------------------------------------------------------------- */

.cr-home-fleet__more,
.cr-home-services__more,
.cr-home-blog__all {
	margin: 2rem 0 0;
}

/* --- Why drive with us ----------------------------------------------------- */

.cr-home-why {
	background-color: var(--cr-neutral-light);
	border-block: 1px solid var(--cr-border);
}

.cr-home-why__inner {
	display: grid;
	gap: 2rem;
}

.cr-home-why__media {
	overflow: hidden;
	border-radius: 0.375rem;
	background-color: var(--cr-primary-light);
	color: var(--cr-primary);
}

.cr-home-why__media--placeholder {
	display: grid;
	place-items: center;
	min-height: 14rem;
}

.cr-home-why__media--placeholder .cr-icon {
	width: 4rem;
	height: 4rem;
}

.cr-home-why__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cr-home-why__lead {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	color: var(--cr-text-muted);
}

/* Benefits as a typographic list. The rules do the work rather than a row of
   boxed icon cards, which is what keeps this section from reading as a
   template. */
.cr-home-why__list {
	margin: 2rem 0 0;
	padding: 0;
}

.cr-home-why__item {
	display: grid;
	gap: 0.25rem;
	padding-block: 1.125rem;
	border-top: 1px solid var(--cr-border);
}

.cr-home-why__item:last-child {
	border-bottom: 1px solid var(--cr-border);
}

.cr-home-why__item dt {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 700;
	color: var(--cr-primary-dark);
}

.cr-home-why__item dt .cr-icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--cr-primary);
}

.cr-home-why__item dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--cr-text-muted);
}

/* --- Services -------------------------------------------------------------- */

/* Asymmetric by design: alternating wide and narrow cells rather than six
   identical boxes. Collapses to a single column on a phone. */
.cr-home-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-home-service {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
	overflow: hidden;
	max-height: 400px;
}

/* The card is a static panel, so it gets no hover or focus affordance: a
   border that lifts and a shadow that appears on hover both tell the reader
   the card can be clicked, and it cannot. */
.cr-home-service__media {
	display: block;
	aspect-ratio: 16 / 9;
}

.cr-home-service__photo {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
}

.cr-home-service__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.25rem;
}

.cr-home-service__icon .cr-icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* The heading sits inside the link, so it needs the heading margins removed. */
.cr-home-service__name {
	margin: 0;
	color: var(--cr-primary-dark);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cr-home-service__text {
	font-size: 0.9375rem;
	color: var(--cr-text-muted);
}

/* --- Journey --------------------------------------------------------------- */

.cr-home-journey {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 3.5rem;
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
}

.cr-home-journey__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-home-journey::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 46, 73, 0.82) 0%, rgba(11, 46, 73, 0.62) 100%);
}

.cr-home-journey .cr-home-eyebrow {
	color: #a9cfe6;
}

.cr-home-journey h2 {
	max-width: 18ch;
	margin: 0;
	color: var(--cr-white);
}

.cr-home-journey__text {
	max-width: 34rem;
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}

.cr-home-journey__actions {
	margin: 1.75rem 0 0;
}

.cr-home-journey__actions .cr-button {
	width: 100%;
}

/* --- How it works ---------------------------------------------------------- */

.cr-home-process__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-home-process__num {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--cr-primary);
}

.cr-home-process__step h3 {
	margin: 0 0 0.375rem;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.cr-home-process__step p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--cr-text-muted);
}

/* --- Testimonials ---------------------------------------------------------- */

.cr-home-testimonials {
	background-color: var(--cr-neutral-light);
	border-block: 1px solid var(--cr-border);
}

/* --- From the road (latest posts) ------------------------------------------- */

.cr-home-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-home-blog__item {
	position: relative;
}

.cr-home-blog__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.cr-home-blog__link:focus-visible {
	outline: 2px solid var(--cr-primary);
	outline-offset: 4px;
}

.cr-home-blog__media {
	display: block;
	overflow: hidden;
	border-radius: 0.375rem;
	background-color: var(--cr-primary-light);
	aspect-ratio: 16 / 9;
}

.cr-home-blog__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cr-home-blog__link:hover .cr-home-blog__media img,
.cr-home-blog__link:focus-visible .cr-home-blog__media img {
	transform: scale(1.04);
}

.cr-home-blog__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cr-home-blog__meta {
	/* A flex row with a gap, so the three facts keep even spacing instead of
	   inheriting whatever whitespace the template happens to have between them. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cr-text-muted);
}

/* The heading sits inside the link, so it needs the heading margins removed. */
.cr-home-blog__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--cr-primary-dark);
}

.cr-home-blog__link:hover .cr-home-blog__title,
.cr-home-blog__link:focus-visible .cr-home-blog__title {
	color: var(--cr-primary);
}

.cr-home-blog__excerpt {
	font-size: 0.9375rem;
	color: var(--cr-text-muted);
}

.cr-home-blog__more {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cr-primary);
}

.cr-home-blog__link:hover .cr-home-blog__more,
.cr-home-blog__link:focus-visible .cr-home-blog__more {
	text-decoration: underline;
}

/* --- Closing CTA ----------------------------------------------------------- */

.cr-home-cta {
	padding-block: 3.5rem;
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
}

.cr-home-cta h2 {
	margin: 0;
	color: var(--cr-white);
}

.cr-home-cta__text {
	max-width: 34rem;
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}

.cr-home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.cr-home-cta__actions .cr-button {
	flex: 1 1 100%;
}

/* --- Scroll reveal --------------------------------------------------------- */

/* Sections settle in once as they enter the viewport. home.js adds the
   .cr-home--ready class; without it everything is simply visible, so the page
   is complete with no JavaScript at all. */
@media (prefers-reduced-motion: no-preference) {
	.cr-home--ready .cr-home-fleet,
	.cr-home--ready .cr-home-featured,
	.cr-home--ready .cr-home-why,
	.cr-home--ready .cr-home-services,
	.cr-home--ready .cr-home-process,
	.cr-home--ready .cr-home-testimonials,
	.cr-home--ready .cr-home-blog,
	.cr-home--ready .cr-home-journey,
	.cr-home--ready .cr-home-cta {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.cr-home--ready .cr-home-why.is-revealed,
	.cr-home--ready .cr-home-fleet.is-revealed,
	.cr-home--ready .cr-home-featured.is-revealed,
	.cr-home--ready .cr-home-services.is-revealed,
	.cr-home--ready .cr-home-process.is-revealed,
	.cr-home--ready .cr-home-testimonials.is-revealed,
	.cr-home--ready .cr-home-blog.is-revealed,
	.cr-home--ready .cr-home-journey.is-revealed,
	.cr-home--ready .cr-home-cta.is-revealed {
		opacity: 1;
		transform: none;
	}

	/* Rows of cards arrive in sequence rather than as one block. The delay
	   is staggered with nth-child on purpose: it is a static picture of the
	   DOM order, so it cannot drift out of step with the markup the way a
	   counter incremented from script can.

	   These are animations rather than transitions, for one reason. The cards
	   below already transition transform for their hover lift, and a
	   transition-delay set for the entrance would sit on that transition too,
	   leaving a card that had just arrived slow to answer the pointer for the
	   rest of the stagger. An animation is a separate layer from the
	   transition, so the two do not queue behind one another. Fill mode
	   backwards is what holds a card at the first keyframe through its delay
	   instead of flashing it visible and then hiding it again. */
	@keyframes cr-stagger-in {
		from {
			opacity: 0;
			transform: translateY(0.75rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.cr-home--ready .cr-home-fleet.is-revealed .cr-vehicle-grid > *,
	.cr-home--ready .cr-home-process.is-revealed .cr-home-process__steps > *,
	.cr-home--ready .cr-home-services.is-revealed .cr-home-services__grid > *,
	.cr-home--ready .cr-home-blog.is-revealed .cr-home-blog__grid > *,
	.cr-home--ready .cr-home-why.is-revealed .cr-home-why__list > * {
		animation: cr-stagger-in 0.5s ease backwards;
	}

	/* Capped at six. The delay is meant to say "these arrived in order", and
	   past half a dozen cards it stops saying that and starts saying the page
	   is slow, so anything further along waits the same as the sixth. */
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(1) { animation-delay: 0.05s; }
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(2) { animation-delay: 0.1s; }
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(3) { animation-delay: 0.15s; }
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(4) { animation-delay: 0.2s; }
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(5) { animation-delay: 0.25s; }
	.cr-home--ready :is(.cr-home-fleet, .cr-home-process, .cr-home-services, .cr-home-blog, .cr-home-why).is-revealed > :is(.cr-vehicle-grid, .cr-home-process__steps, .cr-home-services__grid, .cr-home-blog__grid, .cr-home-why__list) > :nth-child(n + 6) { animation-delay: 0.3s; }
}

/* ==========================================================================
   Homepage: from 48rem up (tablet)
   ========================================================================== */

@media (min-width: 48rem) {
	.cr-home-hero {
		padding-block: calc(5.5rem + var(--cr-header-clearance, 0rem)) 0;
	}

	.cr-home-hero__actions .cr-button {
		flex: 0 0 auto;
	}

	.cr-home-why__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 3rem;
	}

	.cr-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.cr-home-process__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}

	.cr-home-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-home-journey__actions .cr-button,
	.cr-home-cta__actions .cr-button {
		width: auto;
	}

	.cr-home-cta__actions .cr-button {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Homepage: from 64rem up (laptop and desktop)
   ========================================================================== */

@media (min-width: 64rem) {
	.cr-home-fleet,
	.cr-home-why,
	.cr-home-services,
	.cr-home-process,
	.cr-home-testimonials,
	.cr-home-blog {
		padding-block: 5rem;
	}

	/* Asymmetric services grid: a wide lead tile, then alternating halves. */
	.cr-home-services__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cr-home-service--wide {
		grid-column: span 2;
	}

	.cr-home-service--wide .cr-home-service__name {
		font-size: 1.5rem;
	}

	.cr-home-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cr-home-journey,
	.cr-home-cta {
		padding-block: 6rem;
	}
}

/* ==========================================================================
   Homepage: from a phone upwards
   ========================================================================== */

/* The homepage carries the phone sizes in the rules above and grows here, so
   the base styles are the ones a phone actually uses. */
@media (min-width: 26rem) {
	.cr-home-hero h1 {
		font-size: clamp(2.5rem, 1.35rem + 4.4vw, 4.75rem);
	}

	.cr-home-head h2,
	.cr-home-why h2,
	.cr-home-journey h2,
	.cr-home-cta h2 {
		font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
	}

	.cr-home-blog__link {
		gap: 0.75rem;
	}

	.cr-home-service__body {
		padding: 1.5rem;
	}
}

/* --- Trust strip ------------------------------------------------------------

   One compact line of type. The real counts read as proof, so they are set
   slightly heavier than the benefits beside them, and the whole strip is
   divided by hairline separators rather than boxed. No icons: at this size a
   row of pictograms reads as clutter.
   ------------------------------------------------------------------------- */

.cr-home-trust {
	border-bottom: 1px solid var(--cr-border);
	background-color: var(--cr-white);
}

.cr-home-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-home-trust__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cr-text-muted);
	/* Deliberately not nowrap: these are administrator-editable, and a long
	   benefit must wrap at 320px rather than push the page sideways. */
	text-wrap: balance;
}

/* Hairline between items, but never before the first or after the last, and
   never a leading separator when the strip wraps onto its own line. */
.cr-home-trust__item + .cr-home-trust__item {
	border-left: 1px solid var(--cr-border);
}

.cr-home-trust__item--fact {
	font-weight: 700;
	color: var(--cr-primary-dark);
}

/* --- Featured vehicle -------------------------------------------------------

   The one place on the page that is allowed to be a single object filling the
   whole width. The photograph sits behind the panel, so without a photograph
   the panel simply sits on the brand colour and the layout holds.
   ------------------------------------------------------------------------- */

.cr-home-featured {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
}

.cr-home-featured__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cr-home-featured__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-home-featured--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11, 46, 73, 0.92) 0%, rgba(11, 46, 73, 0.68) 45%, rgba(11, 46, 73, 0.35) 100%);
}

.cr-home-featured__inner {
	display: flex;
	padding-block: 3rem;
}

.cr-home-featured__panel {
	max-width: 32rem;
}

.cr-home-featured .cr-home-eyebrow {
	color: #a9cfe6;
}

.cr-home-featured__category {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.cr-home-featured__name {
	margin: 0 0 1rem;
	font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--cr-white);
	overflow-wrap: break-word;
}

.cr-home-featured__text {
	margin: 0;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}

.cr-home-featured__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

.cr-home-featured__specs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cr-home-featured__specs li + li {
	padding-left: 1.5rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.cr-home-featured__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cr-home-featured__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
}

.cr-home-featured__from {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cr-home-featured__amount {
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cr-white);
}

.cr-home-featured__per {
	font-size: 0.875rem;
}

.cr-home-featured__actions {
	margin: 0;
}

.cr-home-featured__actions .cr-button {
	width: 100%;
}

/* --- Journey use cases ------------------------------------------------------

   Three uses of the same booking, set as large type on the photograph. Not
   cards: a card grid here would break the one full-bleed moment on the page.
   ------------------------------------------------------------------------- */

.cr-home-journey__head {
	max-width: 38rem;
}

.cr-home-journey h2 {
	max-width: 20ch;
}

.cr-home-journey__cases {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.cr-home-journey__case {
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cr-home-journey__case-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cr-white);
}

.cr-home-journey__case-text {
	margin: 0.375rem 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}

.cr-home-journey .cr-home-journey__actions {
	margin: 2.25rem 0 0;
}

/* --- Blog card category ----------------------------------------------------- */

.cr-home-blog__category {
	color: var(--cr-primary);
	font-weight: 700;
}

.cr-home-blog__meta time::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--cr-border);
}

/* --- Tablet ---------------------------------------------------------------- */

@media (min-width: 48rem) {
	.cr-home-featured__inner {
		padding-block: 4.5rem;
	}

	.cr-home-featured__actions .cr-button {
		width: auto;
	}

	.cr-home-journey__cases {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* --- Desktop --------------------------------------------------------------- */

@media (min-width: 64rem) {
	.cr-home-featured__inner {
		padding-block: 6.5rem;
	}

	.cr-home-featured--photo .cr-home-featured__inner {
		/* The panel sits left of centre so the car is not hidden behind it. */
		padding-left: 8%;
	}

	.cr-home-journey__cases {
		gap: 3rem;
	}
}

/* --- Fleet grid on the homepage --------------------------------------------

   The shared vehicle grid uses auto-fill, which is right for an archive of any
   length but leaves a lone card on the second row when the homepage shows four.
   The column count is set explicitly here so the four cards always form one
   clean row on a desktop and a two-by-two on a tablet, and a single strong card
   on a phone.
   ------------------------------------------------------------------------- */

.cr-home-fleet .cr-vehicle-grid {
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 0;
}

@media (min-width: 40rem) {
	.cr-home-fleet .cr-vehicle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.cr-home-fleet .cr-vehicle-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- The booking panel meets the hero --------------------------------------

   The search is a full-width bar that hangs over the hero's bottom edge at
   every width, so the hero and the panel read as one object. The hero does not
   clip its overflow and is lifted above the trust strip, so the overlap is
   really visible rather than painted over. The strip below carries the
   matching top padding, so nothing collides with the panel.
   ------------------------------------------------------------------------- */

.cr-home-trust {
	padding-top: 6rem;
}



/* The track is the containing block for the .cr-screen-reader-text inside each
   review (the "Rated 5 out of 5" string, and the play/pause label). Those are
   position:absolute, and an absolutely positioned box is only clipped by an
   ancestor's overflow when that ancestor is inside its containing block. With
   the track statically positioned they resolved against the initial containing
   block instead, so they were never clipped: the ninth review's rating string
   sat 3057px to the right and dragged the whole document sideways by up to
   2683px on a 375px phone, even though the track itself scrolled correctly.
   Declaring the track relative is what brings them back inside the clip. */
.cr-carousel__track {
	position: relative;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.cr-carousel__track::-webkit-scrollbar {
	display: none;
}

.cr-carousel__track:focus-visible {
	outline: 2px solid var(--cr-primary);
	outline-offset: 4px;
}

.cr-review {
	flex: 0 0 100%;
	scroll-snap-align: start;
	padding: 1.5rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	background: var(--cr-white);
}

.cr-review figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.cr-review blockquote {
	margin: 0;
	flex-grow: 1;
}

.cr-review blockquote p {
	margin: 0;
}

.cr-review blockquote::before {
	content: "\201C";
	display: block;
	height: 2rem;
	font-size: 3rem;
	line-height: 1;
	color: var(--cr-border);
}

.cr-stars {
	margin: 0;
	color: var(--cr-warning);
	letter-spacing: 0.1em;
}

.cr-review__by {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cr-review__by strong,
.cr-review__trip {
	display: block;
}

.cr-review__trip {
	font-size: 0.875rem;
	color: var(--cr-text-muted);
}

.cr-review__avatar {
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.cr-review__avatar--initial {
	display: grid;
	place-items: center;
	background: var(--cr-primary-light);
	color: var(--cr-primary-dark);
	font-weight: 700;
}

.cr-carousel__controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.cr-carousel__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.25rem;
	background: var(--cr-white);
	color: var(--cr-primary-dark);
	font-size: 1.125rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.cr-carousel__btn:hover:not(:disabled) {
	border-color: var(--cr-primary);
	background: var(--cr-primary-light);
	transform: translateY(-1px);
}

.cr-carousel__btn:active:not(:disabled) {
	transform: translateY(0);
	transition-duration: 0.05s;
}

.cr-carousel__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The autoplay toggle is a different kind of control from the two arrows, so
   it is pushed clear of them rather than sitting in a row of identical
   buttons where it reads as a third direction of travel. */
.cr-carousel__btn--play {
	margin-left: auto;
}

.cr-carousel__dots {
	display: flex;
	gap: 0.25rem;
}

.cr-carousel__dot {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* The dot grows under the pointer. The mark itself is the ::before pseudo, so
   the growth is animated there and the button keeps its 1.5rem hit area
   throughout rather than scaling the target along with the mark. */
.cr-carousel__dot::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	border: 2px solid var(--cr-primary);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.cr-carousel__dot:hover::before,
.cr-carousel__dot:focus-visible::before {
	transform: scale(1.25);
}

.cr-carousel__dot[aria-current="true"]::before {
	background: var(--cr-primary);
}

/* The control row has to survive a narrow phone, because how many controls it
   carries is not the theme's decision. home.js writes one dot per page and the
   track shows one review per page below 48rem, so a site with the default nine
   reviews gets nine dots. At 320px the row has 288px to work with and the dots
   alone want 248px, so with the three buttons beside them the row is 428px of
   content in 288px of space.

   Two things stop that reaching the page. The buttons stop shrinking, because a
   flex item with min-width:auto can be squeezed below the 2.75rem it was given
   and an arrow in a 12px box is not a control. And the dots are dropped below
   34rem, where there is no room for a jump-to affordance anyway: the track is a
   native scroll-snap list, so a phone already swipes between reviews and keeps
   the two arrows and the pause button. wrap is the last line of defence, so an
   unusually long row breaks onto a second line instead of pushing the document
   sideways. */
.cr-carousel__controls {
	flex-wrap: wrap;
}

.cr-carousel__btn,
.cr-carousel__dot {
	flex: none;
}

@media (max-width: 33.999rem) {
	.cr-carousel__dots {
		display: none;
	}
}

@media (min-width: 48rem) {
	.cr-review {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 64rem) {
	.cr-review {
		flex-basis: calc((100% - 3rem) / 3);
	}
}

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

.cr-faq {
	display: grid;
	gap: 2.5rem;
}

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

.cr-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--cr-primary-dark);
}

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

.cr-faq__item summary::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

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

.cr-faq__item summary:focus-visible {
	outline: 2px solid var(--cr-primary);
	outline-offset: 2px;
}

.cr-faq__answer {
	padding-bottom: 1.25rem;
	color: var(--cr-text-muted);
}

.cr-faq__answer> :last-child {
	margin-bottom: 0;
}

/* An FAQ answer is administrator HTML, passed through wp_kses_post, so it can
   hold a table or an image that is wider than a phone. .cr-faq is a grid, and a
   grid item will not shrink below its min-content width, so one wide table was
   enough to drag the whole document sideways on a 320px screen. Images are
   scaled to the column and the two block elements that cannot be scaled scroll
   inside the answer instead. */
.cr-faq__answer img {
	max-width: 100%;
	height: auto;
}

.cr-faq__answer table,
.cr-faq__answer pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.cr-faq__item[open] .cr-faq__answer {
	animation: cr-reveal 0.2s ease;
}

@keyframes cr-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (min-width: 56rem) {
	.cr-faq {
		grid-template-columns: 1fr 1.6fr;
		align-items: start;
	}

	.cr-faq .cr-section__head {
		margin-bottom: 0;
	}
}

/* --- Closing CTA ----------------------------------------------------------- */

.cr-cta {
	padding: 4rem 0;
	background: var(--cr-primary);
	color: var(--cr-white);
}

.cr-cta h2 {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	color: var(--cr-white);
}

.cr-cta p {
	max-width: 34rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.9);
}

.cr-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cr-carousel__track {
		scroll-behavior: auto;
	}

	.cr-faq__item[open] .cr-faq__answer {
		animation: none;
	}

	.cr-faq__item summary::after {
		transition: none;
	}

	.cr-carousel__btn:hover:not(:disabled),
	.cr-carousel__btn:active:not(:disabled) {
		transform: none;
	}

	.cr-carousel__btn:active:not(:disabled) {
		transition-duration: 0.15s;
	}

	.cr-carousel__dot:hover::before,
	.cr-carousel__dot:focus-visible::before {
		transform: none;
	}
}

/* The phone values for these are in the base rules above: a full width button
   in each actions row, a 3rem section rhythm and a 3rem hero top. From 48rem
   there is room to put the buttons side by side and to loosen the spacing. */
@media (min-width: 48rem) {
	.cr-section {
		padding: 4rem 0;
	}

	.cr-hero {
		padding-top: 4rem;
	}

	.cr-hero__actions .cr-button,
	.cr-cta__actions .cr-button {
		flex: 0 1 auto;
	}
}

/* =========================================================
   TRACK ORDER PAGE
   ========================================================= */

.cr-track-page {
	margin: 0;
}

/* Hero */

.cr-track-hero {
	position: relative;
	padding: 5.5rem 0 5rem;
	background:
		linear-gradient(
			135deg,
			var(--cr-primary-dark) 0%,
			var(--cr-primary) 100%
		);
	color: var(--cr-white);
	overflow: hidden;
}

.cr-track-hero::before {
	content: "";
	position: absolute;
	width: 24rem;
	height: 24rem;
	right: -8rem;
	top: -10rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.cr-track-hero::after {
	content: "";
	position: absolute;
	width: 16rem;
	height: 16rem;
	left: -8rem;
	bottom: -10rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.cr-track-hero__content {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.cr-track-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cr-track-hero__title {
	margin: 0;
	color: var(--cr-white);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.cr-track-hero__description {
	max-width: 40rem;
	margin: 1.25rem auto 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
	line-height: 1.75;
}

/* Main content */

.cr-track-content {
	padding: 4.5rem 0 5rem;
	background: var(--cr-neutral-light);
}

.cr-track-card {
	max-width: 58rem;
	margin: 0 auto;
	padding: 0;
	border: 1px solid var(--cr-border);
	border-radius: 1rem;
	background: var(--cr-white);
	box-shadow: 0 1rem 3rem rgba(23, 33, 43, 0.08);
	overflow: hidden;
}

/* Featured image */

.cr-track-card__image {
	margin: 0;
	max-height: 20rem;
	overflow: hidden;
}

.cr-track-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
}

/* Page content */

.cr-track-card__intro {
	padding: 2rem 2.5rem 0;
	color: var(--cr-text-muted);
	font-size: 0.98rem;
	line-height: 1.75;
}

.cr-track-card__intro > :first-child {
	margin-top: 0;
}

.cr-track-card__intro > :last-child {
	margin-bottom: 0;
}

/* Tracking form area */

.cr-track-page__form {
	margin: 2rem 2.5rem 2.5rem;
	padding: 2rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.875rem;
	background: var(--cr-neutral-light);
}

.cr-track-form-header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.cr-track-form-header__icon {
	display: inline-flex;
	flex: 0 0 3rem;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: var(--cr-primary-light);
	color: var(--cr-primary);
}

.cr-track-form-header__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.cr-track-form-header h2 {
	margin: 0 0 0.3rem;
	color: var(--cr-text);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

.cr-track-form-header p {
	margin: 0;
	color: var(--cr-text-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

/*
 * Wrapper around the Core plugin shortcode.
 * These rules intentionally avoid changing the plugin's form logic.
 */

.cr-track-shortcode {
	width: 100%;
}

/* Improve common form elements rendered by the shortcode */

.cr-track-shortcode form {
	width: 100%;
}

.cr-track-shortcode label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--cr-text);
	font-size: 0.875rem;
	font-weight: 600;
}

.cr-track-shortcode input[type="text"],
.cr-track-shortcode input[type="email"],
.cr-track-shortcode input[type="number"],
.cr-track-shortcode input[type="search"],
.cr-track-shortcode input[type="tel"],
.cr-track-shortcode select {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	background: var(--cr-white);
	color: var(--cr-text);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
	box-sizing: border-box;
}

.cr-track-shortcode input[type="text"]:focus,
.cr-track-shortcode input[type="email"]:focus,
.cr-track-shortcode input[type="number"]:focus,
.cr-track-shortcode input[type="search"]:focus,
.cr-track-shortcode input[type="tel"]:focus,
.cr-track-shortcode select:focus {
	border-color: var(--cr-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 70, 109, 0.12);
	background: var(--cr-white);
}

/* Buttons generated by the tracking shortcode */

.cr-track-shortcode button,
.cr-track-shortcode input[type="submit"],
.cr-track-shortcode .cr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.4rem;
	border: 1px solid var(--cr-primary);
	border-radius: 0.5rem;
	background: var(--cr-primary);
	color: var(--cr-white);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.cr-track-shortcode button:hover,
.cr-track-shortcode input[type="submit"]:hover,
.cr-track-shortcode .cr-button:hover {
	border-color: var(--cr-primary-dark);
	background: var(--cr-primary-dark);
	color: var(--cr-white);
	transform: translateY(-1px);
	box-shadow: 0 0.5rem 1rem rgba(11, 46, 73, 0.15);
}

/* Plugin notices/messages */

/* The tracking shortcode wraps itself in .cr-track-shortcode and the booking
   form in .cr-booking-page__form, and both of them are still wanted as wrappers.
   The six classes these rules used to target are not: the plugin marks its own
   alerts .cr-track__alert and .car-rental-booking__error, both of which are
   styled in assets/css/booking.css, so every selector in the two lists matched
   nothing. */

/* Booking result / status */

.cr-track-shortcode table {
	width: 100%;
	border-collapse: collapse;
}

.cr-track-shortcode th,
.cr-track-shortcode td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--cr-border);
	text-align: left;
	vertical-align: top;
}

.cr-track-shortcode th {
	color: var(--cr-text);
	font-weight: 700;
}

.cr-track-shortcode td {
	color: var(--cr-text-muted);
}

.cr-track-shortcode tr:last-child th,
.cr-track-shortcode tr:last-child td {
	border-bottom: 0;
}

/* Responsive */

@media (max-width: 48rem) {

	.cr-track-hero {
		padding: 4rem 0 3.75rem;
	}

	.cr-track-hero__title {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.cr-track-hero__description {
		font-size: 0.95rem;
	}

	.cr-track-content {
		padding: 3rem 0;
	}

	.cr-track-card {
		border-radius: 0.75rem;
	}

	.cr-track-card__intro {
		padding: 1.5rem 1.25rem 0;
	}

	.cr-track-page__form {
		margin: 1.5rem 1.25rem;
		padding: 1.25rem;
	}

	.cr-track-form-header {
		gap: 0.75rem;
	}

	.cr-track-form-header__icon {
		flex-basis: 2.75rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.cr-track-form-header h2 {
		font-size: 1.15rem;
	}
}

@media (max-width: 30rem) {

	.cr-track-hero {
		padding: 3.25rem 0 3rem;
	}

	.cr-track-hero__eyebrow {
		font-size: 0.68rem;
	}

	.cr-track-hero__description {
		margin-top: 1rem;
		font-size: 0.9rem;
		line-height: 1.65;
	}

	.cr-track-page__form {
		margin: 1rem;
		padding: 1rem;
	}

	.cr-track-form-header {
		flex-direction: column;
	}

	.cr-track-shortcode button,
	.cr-track-shortcode input[type="submit"],
	.cr-track-shortcode .cr-button {
		width: 100%;
	}
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

	.cr-track-shortcode input,
	.cr-track-shortcode select,
	.cr-track-shortcode button,
	.cr-track-shortcode input[type="submit"],
	.cr-track-shortcode .cr-button {
		transition: none;
	}

	.cr-track-shortcode button:hover,
	.cr-track-shortcode input[type="submit"]:hover,
	.cr-track-shortcode .cr-button:hover {
		transform: none;
	}
}
 /* =========================================================
    BOOKING PAGE — SIMPLIFIED
    ========================================================= */

.cr-booking-page {
	margin: 0;
}

/* Hero */

.cr-booking-hero {
	padding: 4rem 0 3.5rem;
	background: linear-gradient(
		135deg,
		var(--cr-primary-dark),
		var(--cr-primary)
	);
	color: var(--cr-white);
	text-align: center;
}

.cr-booking-hero .cr-container {
	max-width: 52rem;
}

.cr-booking-hero__eyebrow {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cr-booking-hero__title {
	margin: 0;
	color: var(--cr-white);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.cr-booking-hero__description {
	margin: 0.85rem 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Main area */

.cr-booking-content {
	padding: 3.5rem 0 4rem;
	background: var(--cr-neutral-light);
}

/* Main booking panel */

.cr-booking-card {
	max-width: 58rem;
	margin: 0 auto;
	padding: 0;
	border: 1px solid var(--cr-border);
	border-radius: 0.85rem;
	background: var(--cr-white);
	box-shadow: 0 0.75rem 2.5rem rgba(23, 33, 43, 0.07);
	overflow: hidden;
}

/* Featured image */

.cr-booking-card__image {
	margin: 0;
	max-height: 18rem;
	overflow: hidden;
}

.cr-booking-card__image img {
	display: block;
	width: 100%;
	height: 18rem;
	object-fit: cover;
}

/* Optional page content */

.cr-booking-card__intro {
	padding: 1.5rem 2rem 0;
	color: var(--cr-text-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

.cr-booking-card__intro > :first-child {
	margin-top: 0;
}

.cr-booking-card__intro > :last-child {
	margin-bottom: 0;
}

/* Booking shortcode */

.cr-booking-page__form {
	padding: 2rem;
}

.cr-booking-page__form form {
	width: 100%;
}

/* Labels */

.cr-booking-page__form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--cr-text);
	font-size: 0.84rem;
	font-weight: 600;
}

/* Inputs */

.cr-booking-page__form input[type="text"],
.cr-booking-page__form input[type="email"],
.cr-booking-page__form input[type="number"],
.cr-booking-page__form input[type="date"],
.cr-booking-page__form input[type="tel"],
.cr-booking-page__form select,
.cr-booking-page__form textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.45rem;
	background: var(--cr-white);
	color: var(--cr-text);
	font-family: inherit;
	font-size: 0.9rem;
	box-sizing: border-box;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.cr-booking-page__form textarea {
	min-height: 6rem;
	resize: vertical;
}

.cr-booking-page__form input:focus,
.cr-booking-page__form select:focus,
.cr-booking-page__form textarea:focus {
	border-color: var(--cr-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 70, 109, 0.1);
}

/* Checkbox */

.cr-booking-page__form input[type="checkbox"] {
	accent-color: var(--cr-primary);
}

/* Submit button */

.cr-booking-page__form button,
.cr-booking-page__form input[type="submit"],
.cr-booking-page__form .cr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.85rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--cr-primary);
	border-radius: 0.45rem;
	background: var(--cr-primary);
	color: var(--cr-white);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		transform 0.15s ease;
}

.cr-booking-page__form button:hover,
.cr-booking-page__form input[type="submit"]:hover,
.cr-booking-page__form .cr-button:hover {
	background: var(--cr-primary-dark);
	border-color: var(--cr-primary-dark);
	color: var(--cr-white);
	transform: translateY(-1px);
}

/* Notices */

/* Same six dead classes as the tracking block above: the booking form's own
   error and success panels are styled in assets/css/booking.css. */

/* Mobile */

@media (max-width: 48rem) {

	.cr-booking-hero {
		padding: 3.25rem 0 3rem;
	}

	.cr-booking-content {
		padding: 2rem 0 3rem;
	}

	.cr-booking-card {
		border-radius: 0.7rem;
	}

	.cr-booking-card__intro {
		padding: 1.25rem 1.25rem 0;
	}

	.cr-booking-page__form {
		padding: 1.25rem;
	}
}

@media (max-width: 30rem) {

	.cr-booking-hero {
		padding: 2.75rem 0 2.5rem;
	}

	.cr-booking-hero__title {
		font-size: 2rem;
	}

	.cr-booking-hero__description {
		font-size: 0.88rem;
	}

	.cr-booking-page__form {
		padding: 1rem;
	}

	.cr-booking-page__form button,
	.cr-booking-page__form input[type="submit"],
	.cr-booking-page__form .cr-button {
		width: 100%;
	}
}



/* =========================================================
   VEHICLE FILTER — MOBILE TOGGLE
   ========================================================= */

.cr-mobile-filter-toggle-wrap {
	display: none;
}

.cr-mobile-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid #d7e1e8;
	border-radius: 12px;
	background: #ffffff;
	color: #13466d;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(16, 47, 70, 0.06);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.cr-mobile-filter-toggle:hover {
	border-color: #13466d;
	background: #f7fafc;
}

.cr-mobile-filter-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cr-mobile-filter-toggle__icon svg {
	width: 19px;
	height: 19px;
}

.cr-mobile-filter-toggle__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.cr-mobile-filter-toggle__arrow svg {
	width: 18px;
	height: 18px;
}

.cr-mobile-filter-toggle[aria-expanded="true"]
	.cr-mobile-filter-toggle__arrow {
	transform: rotate(180deg);
}

.cr-vehicle-filter-wrapper {
	display: block;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.cr-mobile-filter-toggle-wrap {
		display: block;
		margin: 0 0 18px;
	}

	.cr-vehicle-filter-wrapper {
		display: none;
		margin-bottom: 24px;
	}

	.cr-vehicle-filter-wrapper.is-open {
		display: block;
	}

	.cr-mobile-filter-toggle[aria-expanded="true"] {
		border-color: #13466d;
		background: #f4f8fb;
	}

}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 701px) {

	.cr-vehicle-filter-wrapper {
		display: block !important;
	}

}

/* =========================================================
   FLOATING WHATSAPP BUTTON
   ========================================================= */

/* Drawn only when the plugin has a WhatsApp number saved, because
   car_rental_whatsapp_button() prints nothing without one. There is no
   hidden-by-CSS version of this button to find.

   It is an ordinary link, not a widget or a script, so it survives the script
   stack being blocked and needs no code to keep in step with it. */
.cr-whatsapp {
	position: fixed;
	right: var(--cr-gutter);
	/* The safe area inset keeps the button clear of the home indicator on a
	   phone that has one. Browsers without the inset support simply use the
	   gutter, which is what they would have done anyway. */
	bottom: calc(var(--cr-gutter) + env(safe-area-inset-bottom, 0px));
	/* Above the sticky site header, which sits at 100, and well below the skip
	   link, which has to be the only thing that can outrank it. */
	z-index: 150;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: #25D366;
	color: var(--cr-white);
	box-shadow: 0 0.25rem 1rem rgba(11, 46, 73, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cr-whatsapp:hover,
.cr-whatsapp:focus-visible {
	background-color: #1EBE5A;
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1.25rem rgba(11, 46, 73, 0.34);
}

.cr-whatsapp:active {
	transform: translateY(0);
	transition-duration: 0.05s;
}

/* A ring that expands out from under the button once, on arrival. It is drawn
   on a pseudo-element rather than on the button so that it can sit behind the
   icon and does not need to be a real element, and it is torn down immediately
   after so the ring is not left sitting under the button for the rest of the
   visit taking the first tap. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes cr-whatsapp-in {
		from {
			opacity: 0;
			transform: translateY(0.75rem) scale(0.6);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes cr-whatsapp-pulse {
		from {
			opacity: 0.5;
			transform: scale(1);
		}

		to {
			opacity: 0;
			transform: scale(1.9);
		}
	}

	.cr-whatsapp {
		animation: cr-whatsapp-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
	}

	.cr-whatsapp::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 0.25rem #25D366;
		animation: cr-whatsapp-pulse 0.9s ease 0.3s backwards;
	}
}

/* The pulse is the whole point of the arriving animation, so a reader who has
   asked for no motion gets the button in place and still, with no ring. The
   lift and the press are movement for the same reason and go with it. */
@media (prefers-reduced-motion: reduce) {
	.cr-whatsapp:hover,
	.cr-whatsapp:focus-visible,
	.cr-whatsapp:active {
		transform: none;
	}

	.cr-whatsapp:active {
		transition-duration: 0.2s;
	}

	.cr-whatsapp::after {
		display: none;
	}
}