/* ===============================================================
   Discount Car Rental — Public stylesheet
   Plain CSS. No framework, no build step.

   1  Tokens
   2  Reset & base
   3  Layout primitives
   4  Buttons & links
   5  Header & navigation
   6  Hero
   7  Reservation module & forms
   8  Cards (vehicle, article, review, value)
   9  Route motif & steps
   10 Accordion
   11 Sections & editorial blocks
   12 Footer
   13 Mobile sticky actions
   14 Utilities
   15 Motion & print
   =============================================================== */

/* ---------------------------------------------------------------
   1  Tokens
   --------------------------------------------------------------- */
:root {
  /* Trust base */
  --navy-950: #10212b;
  --navy-900: #17303d;
  --blue-700: #176f93;
  --blue-500: #2c94bd;
  --aqua-300: #8fd6dd;
  --aqua-100: #e8f6f7;

  /* Sun & sand accents */
  --sun-500: #f6b83f;
  --sun-100: #fff3d6;
  --sand-100: #f5f1e8;
  --sand-50:  #fbfaf6;

  /* Island green */
  --green-700: #416b58;
  --green-100: #e8f0ea;

  /* Neutrals */
  --white: #ffffff;
  --ink: #162026;
  --gray-700: #55636a;
  --gray-500: #7b878d;
  --gray-300: #d5dcdf;
  --gray-200: #e7ebed;
  --gray-100: #f4f6f7;

  /* Status */
  --alert-700: #9a3412;
  --alert-100: #fdeee6;

  /* Type */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.125rem);   /* 44 → 82 */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4rem);     /* 36 → 64 */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 3rem);     /* 28 → 48 */
  --fs-h3:      clamp(1.3rem, 1.05rem + 1vw, 2rem);       /* 21 → 32 */
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-small:   clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);
  --fs-eyebrow: 0.75rem;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadow — restrained */
  --shadow-sm: 0 1px 2px rgba(16, 33, 43, .06);
  --shadow: 0 6px 20px -8px rgba(16, 33, 43, .16);
  --shadow-lg: 0 18px 44px -20px rgba(16, 33, 43, .28);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 76px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   2  Reset & base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--navy-950);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-900); }

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

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

hr { border: 0; border-top: 1px solid var(--gray-200); margin: var(--space-6) 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--white); }

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

/* ---------------------------------------------------------------
   3  Layout primitives
   --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-9); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--sand { background: var(--sand-50); }
.section--sand-deep { background: var(--sand-100); }
.section--aqua { background: var(--aqua-100); }
.section--navy { background: var(--navy-900); color: var(--aqua-100); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 var(--space-3);
  display: block;
}
.section--navy .eyebrow { color: var(--aqua-300); }

.lead {
  font-size: var(--fs-lead);
  color: var(--gray-700);
  max-width: 62ch;
}
.section--navy .lead { color: var(--aqua-100); }

.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gray-100);
  box-shadow: var(--shadow);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }

/* ---------------------------------------------------------------
   4  Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Explicit, because <button> elements otherwise inherit the browser's
     default grey while <a> elements are transparent — which made ghost
     buttons render white-on-white. Every colour variant overrides this. */
  background: transparent;
  min-height: 52px;
  padding: 0 var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--blue-700); color: var(--white); }
.btn--primary:hover { background: var(--navy-900); color: var(--white); }

.btn--sun { background: var(--sun-500); color: var(--navy-950); }
.btn--sun:hover { background: #eaa825; color: var(--navy-950); }

.btn--outline { border-color: var(--gray-300); color: var(--navy-900); background: var(--white); }
.btn--outline:hover { border-color: var(--navy-900); color: var(--navy-900); }

.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.45); color: var(--white); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: var(--white); }

.btn--sm { min-height: 42px; padding: 0 var(--space-4); font-size: .9375rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform .18s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------
   5  Header & navigation
   --------------------------------------------------------------- */
.utility-bar {
  background: var(--navy-950);
  color: var(--aqua-100);
  font-size: .8125rem;
  letter-spacing: .01em;
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}
.utility-bar span { display: inline-flex; align-items: center; gap: 7px; }
.utility-bar .dot { color: var(--aqua-300); }
@media (max-width: 767px) { .utility-bar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);

  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--navy-950);
  flex-shrink: 0;
}
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; }

/* Raster logo. Height is fixed and width follows the image's own aspect ratio,
   so a square, tall or wide logo all sit correctly without being squashed.
   The width/height attributes on the <img> reserve the right space while the
   image loads, which stops the header jumping about on slow connections. */
.brand__logo {
  height: 40px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
/* When the logo stands alone with no wordmark beside it, it carries the whole
   header, so it gets more room. The wordmark is roughly 4.2:1, so height drives
   the size and max-width simply stops it crowding the navigation. */
.brand--logo-only .brand__logo { height: 42px; max-width: 200px; }
@media (max-width: 900px) {
  .brand--logo-only .brand__logo { height: 36px; max-width: 165px; }
}
@media (max-width: 480px) {
  .brand--logo-only .brand__logo { height: 30px; max-width: 140px; }
}

@media (max-width: 480px) {
  .brand__logo { height: 32px; max-width: 190px; }
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.brand__sub {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-700);
  font-weight: 600;
}

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: var(--space-1); }
}
.nav a {
  display: inline-block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--navy-900);
  font-size: .9375rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
.nav a:hover { background: var(--gray-100); }
.nav a[aria-current="page"] {
  color: var(--blue-700);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--blue-500);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-phone {
  display: none;
  font-weight: 650;
  font-size: .9375rem;
  color: var(--navy-900);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--blue-700); }
@media (min-width: 640px) { .header-phone { display: inline-flex; align-items: center; gap: 7px; } }
@media (max-width: 1079px) { .header-actions .btn--primary { display: none; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  color: var(--navy-900);
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s var(--ease), visibility .28s var(--ease);
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}
.mobile-nav__close {
  width: 46px; height: 46px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy-900);
}
.mobile-nav__links { padding: var(--space-4) 1.25rem var(--space-6); }
.mobile-nav__links a {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy-950);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}
.mobile-nav__links a[aria-current="page"] { color: var(--blue-700); }
.mobile-nav__cta { display: grid; gap: var(--space-3); padding: var(--space-5) 1.25rem var(--space-8); }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------
   6  Hero
   --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-950); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,33,43,.72) 0%, rgba(16,33,43,.55) 45%, rgba(16,33,43,.88) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(4rem, 2rem + 10vw, 8.5rem);
  max-width: 46rem;
}
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqua-300);
  margin-bottom: var(--space-4);
}
.hero h1 {
  font-size: var(--fs-display);
  color: var(--white);
  margin-bottom: var(--space-4);
  letter-spacing: -0.035em;
}
.hero__copy { font-size: var(--fs-lead); color: rgba(255,255,255,.9); max-width: 40rem; margin-bottom: var(--space-6); }
.hero .btn-row { margin-bottom: var(--space-7); }

/* Page heroes (interior) */
.page-hero {
  background: var(--navy-900);
  color: var(--white);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -80px; bottom: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,214,221,.18), transparent 62%);
  pointer-events: none;
}
.page-hero h1 { color: var(--white); position: relative; }
.page-hero .lead { color: rgba(255,255,255,.88); position: relative; }
.page-hero__inner { max-width: 46rem; position: relative; }
.page-hero--photo .page-hero__inner { max-width: 44rem; }

.breadcrumbs {
  font-size: var(--fs-small);
  color: rgba(255,255,255,.7);
  margin-bottom: var(--space-4);
}
.breadcrumbs a { color: var(--aqua-300); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin-inline: 6px; }

/* Trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin: 0;
}
.trust-strip svg { flex-shrink: 0; color: var(--aqua-300); }
.trust-strip--light li { color: var(--gray-700); }
.trust-strip--light svg { color: var(--blue-700); }

/* ---------------------------------------------------------------
   7  Reservation module & forms
   --------------------------------------------------------------- */
.booking-bar {
  position: relative;
  z-index: 5;
  margin-top: clamp(-3.5rem, -2rem - 2vw, -2rem);
  margin-bottom: var(--space-7);
}
.booking-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.booking-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.booking-card__head h2 { font-size: 1.375rem; margin: 0; }
.booking-card__note { font-size: var(--fs-small); color: var(--gray-700); margin: 0; }

.field-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.field-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field-grid--full { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--span2 { grid-column: span 2; }
@media (max-width: 640px) { .field--span2 { grid-column: span 1; } }

.field label,
.fieldset-legend {
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--navy-900);
  text-transform: uppercase;
}
.field .req { color: var(--alert-700); }
.field__hint { font-size: .8125rem; color: var(--gray-500); line-height: 1.45; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="password"], input[type="url"],
input[type="search"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 130px; padding-top: 13px; resize: vertical; line-height: 1.6; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2355636a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(44,148,189,.18);
  outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--alert-700);
}
input::placeholder, textarea::placeholder { color: var(--gray-500); }

.field__error {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--alert-700);
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.field__error::before { content: '!'; font-weight: 800; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gray-700);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 21px; height: 21px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--blue-700);
  cursor: pointer;
}
.check strong { color: var(--navy-900); font-weight: 650; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.fieldset-legend { display: block; margin-bottom: var(--space-3); }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.form-note {
  font-size: var(--fs-small);
  color: var(--gray-700);
  background: var(--sun-100);
  border-left: 3px solid var(--sun-500);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block: var(--space-4);
}

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  border: 1px solid transparent;
}
.alert h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.alert--success { background: var(--green-100); border-color: #bcd4c4; color: #24503b; }
.alert--success h3 { color: #1d4231; }
.alert--error { background: var(--alert-100); border-color: #f2c6b1; color: #7d2c0f; }
.alert--error h3 { color: #7d2c0f; }
.alert--info { background: var(--aqua-100); border-color: #b9e2e7; color: #10474f; }
.alert ul { margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------
   8  Cards
   --------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gray-300); }

.card__media { aspect-ratio: 16 / 11; background: var(--gray-100); position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card__cat {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--space-2);
}
.card__title { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--blue-700); }
.card__text { font-size: var(--fs-small); color: var(--gray-700); margin-bottom: var(--space-4); }
.card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.card__foot .btn { flex: 1 1 auto; }

/* Vehicle specs */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.specs li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--gray-700);
  margin: 0;
}
.specs svg { color: var(--blue-700); flex-shrink: 0; }

.spec-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.spec-table div { background: var(--white); padding: var(--space-4); }
.spec-table dt {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 3px;
}
.spec-table dd { margin: 0; font-weight: 650; font-size: 1.0625rem; color: var(--navy-950); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
}
.badge--stjohn { background: var(--green-100); color: var(--green-700); }
.badge--4wd { background: var(--aqua-100); color: var(--blue-700); }
.badge--sun { background: var(--sun-100); color: #8a5c05; }
.badge--neutral { background: var(--gray-100); color: var(--gray-700); }
.badge--alert { background: var(--alert-100); color: var(--alert-700); }

.badge-float {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-sm);
}

.avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-small);
  font-weight: 650;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.avail-chip::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.avail-chip[data-state="available"] { background: var(--green-100); color: var(--green-700); }
.avail-chip[data-state="limited"]   { background: var(--sun-100); color: #8a5c05; }
.avail-chip[data-state="request"]   { background: var(--aqua-100); color: var(--blue-700); }
.avail-chip[data-state="unavailable"] { background: var(--gray-100); color: var(--gray-700); }

/* Value cards */
.value-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.value-card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--aqua-100);
  color: var(--blue-700);
  margin-bottom: var(--space-4);
}
.value-card h3 { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.value-card p { font-size: var(--fs-small); color: var(--gray-700); margin: 0; }

/* Review cards */
.review {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--sun-500);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.review__body { font-size: var(--fs-body); color: var(--ink); margin-bottom: var(--space-4); font-style: italic; }
.review__meta { font-size: var(--fs-small); color: var(--gray-500); }
.review__meta strong { color: var(--navy-900); font-style: normal; }

/* Contact / info card */
.info-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  margin: 0;
  font-size: var(--fs-small);
}
.info-list li:last-child { border-bottom: 0; }
.info-list svg { color: var(--blue-700); flex-shrink: 0; margin-top: 3px; }
.info-list strong { display: block; color: var(--navy-950); font-size: 1rem; }
.info-list a { color: var(--blue-700); text-decoration: none; font-weight: 600; }
.info-list a:hover { text-decoration: underline; }

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.filter-btn {
  padding: 9px 17px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.filter-btn:hover { border-color: var(--blue-500); }
.filter-btn[aria-pressed="true"] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--gray-100);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
}
.empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p { color: var(--gray-700); max-width: 44ch; margin-inline: auto; }

/* ---------------------------------------------------------------
   9  Route motif & steps  (signature element)
   --------------------------------------------------------------- */
.route {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
}
.route__step {
  position: relative;
  padding-left: 64px;
  margin: 0;
}
.route__step::before {
  content: attr(data-step);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue-500);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
}
.route__step::after {
  content: '';
  position: absolute;
  left: 20px; top: 46px; bottom: -26px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--blue-500) 0 7px, transparent 7px 14px);
}
.route__step:last-child::after { display: none; }
.route__step h3 { font-size: 1.125rem; margin-bottom: 4px; }
.route__step p { font-size: var(--fs-small); color: var(--gray-700); margin: 0; }

.section--navy .route__step::before { background: var(--navy-950); border-color: var(--aqua-300); color: var(--aqua-300); }
.section--navy .route__step::after { background: repeating-linear-gradient(to bottom, var(--aqua-300) 0 7px, transparent 7px 14px); }
.section--navy .route__step p { color: rgba(255,255,255,.82); }

.route-line { width: 100%; height: auto; overflow: visible; }
.route-line__path {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 9 9;
}
.route-line__path--draw {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.route-line.is-visible .route-line__path--draw {
  animation: route-draw 1.8s var(--ease) forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.route-line__pin { fill: var(--sun-500); }
.route-line__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 650;
  fill: var(--gray-700);
}

/* Chooser (fleet match) */
.chooser { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.chooser-btn {
  padding: 11px 19px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.chooser-btn:hover { border-color: var(--blue-500); background: var(--aqua-100); }
.chooser-btn[aria-pressed="true"] { background: var(--sun-500); border-color: var(--sun-500); color: var(--navy-950); }
.chooser-result {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--fs-body);
}
.chooser-result strong { color: var(--navy-950); }

/* ---------------------------------------------------------------
   10  Accordion
   --------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--gray-200); }
.accordion__item { border-bottom: 1px solid var(--gray-200); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-950);
  text-align: left;
  cursor: pointer;
}
.accordion__btn:hover { color: var(--blue-700); }
.accordion__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--blue-700);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.accordion__btn[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--blue-700);
  color: var(--white);
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s var(--ease);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding: 0 var(--space-2) var(--space-5); color: var(--gray-700); font-size: var(--fs-small); }
.accordion__panel .verify-note { margin: 0 var(--space-2) var(--space-5); }

.faq-group { margin-bottom: var(--space-7); }
.faq-group h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }

/* Editorial verify marker — visible only to staff via admin preview */
.verify-note {
  font-size: .8125rem;
  color: #8a5c05;
  background: var(--sun-100);
  border-left: 3px solid var(--sun-500);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------------------------------------------------------------
   11  Editorial blocks
   --------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--space-5); }
.prose li { color: var(--gray-700); }
.prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--sun-500);
  font-size: var(--fs-lead);
  color: var(--navy-900);
  font-style: italic;
}
.prose img { border-radius: var(--radius); margin-block: var(--space-5); }

.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--space-3);
  color: var(--gray-700);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--green-700);
  border-bottom: 2.5px solid var(--green-700);
  transform: rotate(-45deg);
}
.section--navy .checklist li { color: rgba(255,255,255,.86); }
.section--navy .checklist li::before { border-color: var(--aqua-300); }

.cta-band {
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--blue-700) 100%);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.88); max-width: 46ch; margin-inline: auto; margin-bottom: var(--space-6); }
.cta-band .btn-row { justify-content: center; }

.disclaimer {
  font-size: var(--fs-small);
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: var(--space-4);
  line-height: 1.6;
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  aspect-ratio: 16 / 10;
  position: relative;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
}
.map-embed__placeholder p { font-size: var(--fs-small); color: var(--gray-700); margin: 0; }

.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-7); }
.pagination a, .pagination span {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  color: var(--navy-900);
}
.pagination a:hover { border-color: var(--navy-900); }
.pagination [aria-current="page"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }

/* ---------------------------------------------------------------
   12  Footer
   --------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(255,255,255,.74);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-small);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.footer-brand { max-width: 26rem; }
.footer-brand .brand__name, .footer-brand .brand { color: var(--white); }
.footer-brand p { margin-top: var(--space-4); line-height: 1.65; }
.footer-since {
  display: inline-block;
  margin-top: var(--space-4);
  font-weight: 650;
  color: var(--aqua-300);
}
.site-footer h4 {
  color: var(--white);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,.74); text-decoration: none; }
.footer-links a:hover { color: var(--aqua-300); text-decoration: underline; }
.footer-contact { list-style: none; padding: 0; margin: 0; line-height: 1.7; }
.footer-contact li { margin-bottom: 10px; }
.footer-contact a { color: var(--white); text-decoration: none; font-weight: 600; }
.footer-contact a:hover { color: var(--aqua-300); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-bottom a:hover { color: var(--aqua-300); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
}
.footer-social a:hover { border-color: var(--aqua-300); color: var(--aqua-300); }

/* ---------------------------------------------------------------
   13  Mobile sticky actions
   --------------------------------------------------------------- */
.sticky-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-200);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 18px -10px rgba(16,33,43,.3);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  background: var(--white);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
}
.sticky-actions a.is-primary { background: var(--blue-700); color: var(--white); }
@media (min-width: 1080px) { .sticky-actions { display: none; } }
@media (max-width: 1079px) { body { padding-bottom: 58px; } }

/* ---------------------------------------------------------------
   14  Utilities
   --------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.small { font-size: var(--fs-small); }
.muted { color: var(--gray-700); }
.nowrap { white-space: nowrap; }
.is-hidden { display: none !important; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   15  Motion & print
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .route-line__path--draw { stroke-dashoffset: 0; }
  .btn:hover { transform: none; }
  .card:hover { transform: none; }
}

@media print {
  .site-header, .utility-bar, .sticky-actions, .mobile-nav, .btn, .site-footer { display: none !important; }
  body { color: #000; }
  .hero, .page-hero { background: none; color: #000; }
  .hero h1, .page-hero h1, .page-hero .lead { color: #000; }
}

/* ===============================================================
   15. Search results — available vehicles with pricing
   =============================================================== */

/* The results header and the cards read as one block, so the header only pads
   the top and the card list only pads the bottom. Two stacked .section--tight
   blocks would otherwise leave ~144px of dead space between them. */
.results-head { padding-bottom: 0; }
.section--results { padding-block: var(--space-4) clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.results-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-2);
}

.search-summary {
  display: flex;
  flex-wrap: wrap;
  /* Top-aligned, not centred. Pickup and Return carry three lines each while
     Length carries two, so centring dropped the Length label out of line with
     the others. */
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--sand-100);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-md);
}
.search-summary__item { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.search-summary__label {
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-700);
}
.search-summary__item strong { font-size: 1rem; }
.search-summary__item .muted { font-size: .8125rem; }
/* The button is a single control, so it stays vertically centred against
   the block rather than pinned to the top edge with the labels. */
.search-summary__edit { margin-left: auto; align-self: center; }

.results-count { margin: var(--space-3) 0 0; font-size: 1rem; }

/* --- Result card --- */
.result-card {
  display: grid;
  grid-template-columns: 240px 1fr 236px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.result-card:hover { border-color: var(--aqua-300); box-shadow: var(--shadow-sm); }

.result-card--out { opacity: .72; }
.result-card--out:hover { border-color: var(--gray-200); box-shadow: none; }

.result-card--picked { border-color: var(--blue-700); box-shadow: 0 0 0 3px var(--aqua-100); }
.result-card__flag {
  position: absolute;
  top: -11px; left: var(--space-4);
  background: var(--blue-700);
  color: var(--white);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.result-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-100);
}
.result-card__media img { width: 100%; height: auto; display: block; aspect-ratio: 8 / 5; object-fit: cover; }

.result-card__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; margin: 0 0 3px; letter-spacing: -.015em; }
.result-card__name a { color: inherit; text-decoration: none; }
.result-card__name a:hover { color: var(--blue-700); text-decoration: underline; }
.result-card__or { font-size: .8125rem; color: var(--gray-500); margin: 0 0 var(--space-2); }

.spec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px var(--space-3); }
.spec-list li { display: flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--navy-800); }
.spec-list svg { color: var(--blue-700); flex-shrink: 0; }

/* --- Price column --- */
.result-card__price { text-align: center; border-left: 1px solid var(--gray-200); padding-left: var(--space-4); }
@media (max-width: 900px) { .result-card__price { border-left: 0; padding-left: 0; } }

.price-main { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.price-main__amount { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; letter-spacing: -.03em; }
.price-main__unit { font-size: .9375rem; color: var(--gray-500); }
.price-main__callus { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--blue-700); }

.price-total { font-size: .875rem; color: var(--navy-800); margin-top: 3px; }
.price-note { font-size: .75rem; color: var(--gray-500); margin: 6px 0 var(--space-3); line-height: 1.4; }

.stock-note { font-size: .8125rem; font-weight: 600; margin-bottom: var(--space-2); }
.stock-note--low { color: #8a5c05; }
.stock-note--out { color: var(--gray-500); }

.results-foot { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--gray-200); }
.results-foot p { font-size: .875rem; color: var(--gray-500); margin: 0 0 8px; }

@media (max-width: 900px) {
  .result-card { grid-template-columns: 1fr; gap: var(--space-3); text-align: left; }
  .result-card__media { max-width: 320px; }
  .result-card__price { text-align: left; border-top: 1px solid var(--gray-200); padding-top: var(--space-3); }
  .price-main { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .spec-list { grid-template-columns: 1fr; }
  .search-summary__edit { margin-left: 0; width: 100%; }
}

/* --- Confirmed selection summary on the reservation form --- */
.selection-summary {
  background: var(--sand-100);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.selection-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--space-2);
}
.selection-summary__label {
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-700);
  min-width: 74px;
}
.selection-summary__row strong { font-size: 1rem; }
.selection-summary__row .muted { font-size: .875rem; }
.selection-summary__price { margin-left: auto; font-weight: 700; font-size: 1rem; }
.selection-summary__price .muted { font-weight: 400; }
.selection-summary .btn { justify-self: start; margin-top: 4px; }

@media (max-width: 560px) {
  .selection-summary__price { margin-left: 0; width: 100%; }
}

/* ===============================================================
   16. Homepage v2 — photographic hero, floating cards, priced fleet
   =============================================================== */

/* --- Script accent type --- */
.script {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 700;
  line-height: .9;
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
}
.script--aqua { color: var(--aqua-300); }
.script--sun  { color: var(--sun-500); margin-left: clamp(1rem, 6vw, 5rem); }

/* --- Hero --- */
.hero-v2 {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(5rem, 3rem + 8vw, 8rem);
  overflow: hidden;
}
.hero-v2__media { position: absolute; inset: 0; z-index: -2; }
.hero-v2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Legibility scrim. The headline sits left, so the gradient is strongest there
   and clears away over the vehicle on the right. */
.hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(16,33,43,.90) 0%,
    rgba(16,33,43,.72) 38%,
    rgba(16,33,43,.28) 66%,
    rgba(16,33,43,.10) 100%);
}

.hero-v2__inner { display: grid; gap: clamp(1.75rem, 3vw, 3rem); }
.hero-v2__copy { max-width: 46ch; }

.hero-v2__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.75rem);
  color: var(--white);
  margin: .06em 0;
}
.hero-v2__tagline {
  color: var(--aqua-100);
  font-size: var(--fs-lead);
  margin-top: var(--space-4);
}

/* The booking module floats as a white card over the photo. */
.hero-v2 .booking-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(16,33,43,.28);
  max-width: 720px;
}

@media (min-width: 1080px) {
  .hero-v2__inner { grid-template-columns: 1fr minmax(0, 640px); align-items: center; }
}

/* --- Floating trust cards --- */
.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(.5rem, 2vw, 1.5rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(-4rem, -6vw, -2.5rem);
  position: relative;
  z-index: 2;
}
.trust-card { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust-card__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--aqua-100);
  color: var(--blue-700);
}
.trust-card strong { display: block; font-size: .9375rem; margin-bottom: 2px; }
.trust-card p { margin: 0; font-size: .8125rem; color: var(--gray-500); line-height: 1.45; }

/* --- Section head with a trailing link --- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.section-head h2 { margin: 0; }
.link-arrow { font-weight: 650; color: var(--blue-700); text-decoration: none; white-space: nowrap; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow span { transition: transform .18s ease; display: inline-block; }
.link-arrow:hover span { transform: translateX(3px); }

/* --- Priced fleet cards --- */
.ride-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}
.ride-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ride-card:hover {
  border-color: var(--aqua-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ride-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
}
.ride-card__sub { font-size: .8125rem; color: var(--gray-500); margin: 2px 0 var(--space-3); }
.ride-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-100);
  margin-bottom: var(--space-3);
}
.ride-card__media img { width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover; display: block; }

.ride-card__specs {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
}
.ride-card__specs li {
  display: flex; align-items: center; gap: 5px;
  font-size: .8125rem; color: var(--navy-800);
}
.ride-card__specs svg { color: var(--blue-700); }

.ride-card__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
}
.ride-card__price {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em;
}
.ride-card__price .muted { font-family: var(--font-body); font-size: .8125rem; font-weight: 400; }
.ride-card__price--call { font-size: 1rem; color: var(--blue-700); }

.fleet-note { margin-top: var(--space-4); }
.fleet-note .disclaimer { margin: 0; }

/* --- Promo band --- */
.promo-band {
  background: var(--navy-900);
  color: var(--aqua-100);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  overflow: hidden;
}
.promo-band__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .promo-band__inner { grid-template-columns: 1fr 1fr; } }
.promo-band h2 { color: var(--white); margin: 0 0 var(--space-3); }
.promo-band p { margin-bottom: var(--space-4); max-width: 52ch; }
.eyebrow--light { color: var(--aqua-300); }
.promo-band__media { border-radius: var(--radius-lg); overflow: hidden; }
.promo-band__media img { width: 100%; height: auto; aspect-ratio: 14/9; object-fit: cover; display: block; }

/* ===============================================================
   17. Scenic footer — photo backdrop, floating CTA, info bar
   =============================================================== */

.site-footer--scene {
  position: relative;
  isolation: isolate;
  color: var(--navy-900);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) var(--space-5);
  overflow: hidden;
}

/* Painted fallback sits underneath, so a missing photo still looks designed.
   It starts at white so the top edge blends with the page even when no
   photograph is present. */
.footer-scene__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf4f4 14%, #dfeef0 34%, #f3e7d2 66%, #efdec6 100%);
}
/* The photograph itself is masked at the top so it fades in rather than
   starting on a hard edge. Works with or without the file present. */
.footer-scene__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/footer-beach.jpg');
  background-size: cover;
  background-position: center 60%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
/* Light wash so text stays readable over any photograph.
   The first stops are fully opaque white, which dissolves the hard line where
   the white page above meets the tinted footer. The wash then eases back so the
   photograph shows through the body of the footer. */
.site-footer--scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,.97) 4%,
    rgba(255,255,255,.90) 10%,
    rgba(255,255,255,.82) 20%,
    rgba(255,255,255,.78) 55%,
    rgba(255,255,255,.84) 100%);
}

.site-footer--scene .footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1080px) {
  .site-footer--scene .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 260px;
  }
}

/* --- Brand --- */
.site-footer--scene .footer-brand { max-width: 40ch; }
.site-footer--scene .footer-brand .brand { margin-bottom: var(--space-3); }
.site-footer--scene .brand--logo-only .brand__logo { height: 46px; max-width: 215px; }
.footer-brand__blurb { font-size: .9375rem; line-height: 1.65; color: var(--navy-800); margin: 0 0 var(--space-3); }
.footer-brand__aka { font-size: .8125rem; color: var(--gray-500); margin: 0 0 var(--space-4); }

.site-footer--scene .footer-social { display: flex; gap: 10px; }
.site-footer--scene .footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(16,33,43,.10);
  color: var(--navy-950);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer--scene .footer-social a:hover {
  background: var(--navy-950); color: var(--white); transform: translateY(-1px);
}

/* --- Columns with the underlined heading --- */
.site-footer--scene .footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.site-footer--scene .footer-cols h4 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy-950);
  margin: 0 0 var(--space-3);
  padding-bottom: 9px;
  position: relative;
}
.site-footer--scene .footer-cols h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--blue-700);
  border-radius: 2px;
}
.site-footer--scene .footer-links { list-style: none; margin: 0; padding: 0; }
.site-footer--scene .footer-links li { margin-bottom: 11px; font-size: .9375rem; }
.site-footer--scene .footer-links a {
  color: var(--navy-800); text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.site-footer--scene .footer-links a:hover { color: var(--blue-700); padding-left: 3px; }

/* --- Floating CTA card --- */
.footer-cta {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px);

  backdrop-filter: blur(6px);
  border: 1px solid rgba(16,33,43,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(16,33,43,.14);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.footer-cta__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto var(--space-3);
  border-radius: 14px;
  background: var(--aqua-100);
  color: var(--blue-700);
}
.footer-cta h3 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 800;
  color: var(--navy-950);
  margin: 0 0 var(--space-2); line-height: 1.2;
}
.footer-cta p { font-size: .875rem; color: var(--gray-500); margin: 0 0 var(--space-4); }

/* --- Info bar --- */
.footer-info {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,33,43,.07);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) clamp(1.5rem, 4vw, 3rem);
}
.footer-info span { display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--navy-800); }
.footer-info svg { color: var(--blue-700); flex-shrink: 0; }

/* --- Bottom bar --- */
.site-footer--scene .footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(16,33,43,.10);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font-size: .8125rem; color: var(--gray-500);
}
.site-footer--scene .footer-bottom a { color: var(--gray-500); text-decoration: none; }
.site-footer--scene .footer-bottom a:hover { color: var(--blue-700); text-decoration: underline; }

@media (max-width: 768px) {
  .site-footer--scene { padding-bottom: calc(var(--space-7) + 56px); }
}

/* The CTA band is always the last thing before the footer, and the footer
   brings its own generous top padding. Without this the two stack and leave
   a large empty gap. */
.section--cta { padding-bottom: 0; }

/* ===============================================================
   18. Island band + section transitions
   =============================================================== */

/* --- Soft transitions where a tinted section meets a white one --- */
.section--sand, .section--sand-deep, .section--aqua { position: relative; }

/* A tinted section following the navy band gets a subtle top curve so the
   change of colour reads as deliberate rather than abrupt. */
.section--navy + .section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: var(--navy-900);
  clip-path: ellipse(75% 100% at 50% 0%);
  opacity: .06;
  pointer-events: none;
}

/* ===============================================================
   19. Floating header + mega menu
   =============================================================== */

/* The bar floats as a rounded pill over the page rather than spanning
   edge to edge. On the homepage it sits over the hero photograph. */
@media (min-width: 1080px) {
  /* A soft tint behind the pill so the white bar reads as a floating element
     rather than a faint outline drawn on white. */
  .site-header {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    padding-block: var(--space-3);
    -webkit-backdrop-filter: none;

    backdrop-filter: none;
  }
  .site-header__inner {
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);
    border: 1px solid rgba(16,33,43,.07);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(16,33,43,.10);
    padding-inline: var(--space-4);
    padding-block: 10px;
  }
}

/* --- Nav items --- */
.nav__item { position: relative; }

/* Qualified with `a` so these beat the older `.nav a` rules further up the
   sheet — without it the link falls back to display:inline-block and the
   dropdown chevron wraps onto a second line. */
.nav a.nav__link {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  color: var(--navy-900);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background .16s ease, color .16s ease;
}
.nav a.nav__link:hover { background: var(--gray-100); color: var(--blue-700); }

/* The old rule drew an underline via box-shadow; the pill replaces it. */
.nav a.nav__link[aria-current="page"] {
  background: var(--aqua-100);
  color: var(--blue-700);
  font-weight: 700;
  box-shadow: none;
  border-radius: 999px;
}

.nav__chev { transition: transform .18s ease; opacity: .55; }
.nav__item[data-open="true"] .nav__chev { transform: rotate(180deg); }
.nav__item[data-open="true"] a.nav__link--parent { background: var(--gray-100); color: var(--blue-700); }

/* --- Mega panel --- */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.nav__item[data-open="true"] .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega[hidden] { display: block; }   /* animated, not display-toggled */

.mega__inner {
  background: var(--white);
  border: 1px solid rgba(16,33,43,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(16,33,43,.18);
  padding: var(--space-4);
}

.mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.mega__col { display: flex; flex-direction: column; }
.mega__heading {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 var(--space-2);
}
/* Qualified with `a` so it outranks the older `.nav a { display:inline-block }`
   rule — without it these stack horizontally instead of listing. */
.mega a.mega__link {
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-inline: -10px;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: none;
  transition: background .14s ease;
}
.mega a.mega__link:hover { background: var(--aqua-100); }
.mega__link strong {
  display: block;
  font-size: .9375rem;
  font-weight: 650;
  color: var(--navy-950);
  margin-bottom: 1px;
}
.mega__link span { font-size: .75rem; color: var(--gray-500); line-height: 1.35; }

.mega__foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--gray-500);
}

/* Below the desktop breakpoint the mega menus are not used at all —
   the mobile panel lists every destination flat. */
@media (max-width: 1079px) {
  .mega { display: none !important; }
}

/* ===============================================================
   20. Floating contact button + sheet
   =============================================================== */

.fab-wrap {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 95;
}
/* The sticky Call / Reserve bar owns this corner on phones. */
@media (max-width: 768px) { .fab-wrap { display: none; } }

.fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Left padding leaves room for the badge, which sits half outside the pill. */
  padding: 15px 22px 15px 62px;
  border: 0;
  border-radius: 999px;
  /* Same sun yellow as the "your way" script in the hero. Navy text, not
     white — white on this yellow does not carry enough contrast to read. */
  background: var(--sun-500);
  color: var(--navy-950);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(16,33,43,.26);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fab:hover {
  background: #ffc63d;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(16,33,43,.32);
}

/* --- Overlapping circle badge --- */
.fab__badge {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--navy-950);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(16,33,43,.32);
  transition: transform .22s var(--ease), background .18s ease;
}
.fab:hover .fab__badge { transform: translateY(-50%) scale(1.06); }

.fab__jeep {
  width: 36px;
  height: 30px;
  display: block;
  color: var(--sun-500);
}

/* Tested with `none` rather than `url('')`: an empty url can be treated as
   invalid, which fails the whole query and silently drops to the fallback. */
@supports (-webkit-mask-image: none) or (mask-image: none) {
  .fab__jeep {
    background: currentColor;
    /* Longhand as well as shorthand — some Chrome versions ignore the
       `/ contain` size inside the shorthand and render the mask at its
       intrinsic size, which crops the Jeep. */
    -webkit-mask-image: url('/assets/images/jeep-icon.png');
            mask-image: url('/assets/images/jeep-icon.png');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .fab__jeep-fallback { display: none; }
}
.fab__jeep-fallback { display: block; line-height: 0; color: var(--sun-500); }

.fab__label { line-height: 1; }

.fab__arrow { flex-shrink: 0; transition: transform .18s ease; }
.fab:hover .fab__arrow { transform: translateX(4px); }

.fab:focus-visible { outline: 3px solid var(--navy-950); outline-offset: 4px; }

/* The Jeep rocks as you reach for the button. */
.fab:hover .fab__jeep { animation: jeepNudge .5s var(--ease); }
@keyframes jeepNudge {
  0%   { transform: translateX(0) rotate(0deg); }
  30%  { transform: translateX(-2px) rotate(-3deg); }
  60%  { transform: translateX(3px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fab:hover .fab__jeep,
  .fab:hover .fab__badge,
  .fab:hover .fab__arrow { animation: none; transform: none; }
  .fab:hover .fab__badge { transform: translateY(-50%); }
}

/* --- Sheet --- */
.contact-sheet { position: fixed; inset: 0; z-index: 120; }
.contact-sheet[hidden] { display: none; }

.contact-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,33,43,.45);
  -webkit-backdrop-filter: blur(2px);

  backdrop-filter: blur(2px);
  animation: sheetFade .18s ease;
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }

.contact-sheet__panel {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: calc(clamp(1rem, 2.5vw, 2rem) + 68px);
  width: min(380px, calc(100vw - 2rem));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(16,33,43,.30);
  padding: var(--space-5);
  animation: sheetUp .2s var(--ease);
}
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.contact-sheet__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
}
.contact-sheet__close:hover { background: var(--gray-100); color: var(--navy-950); }

.contact-sheet__eyebrow {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 6px;
}
.contact-sheet h2 {
  font-size: 1.375rem;
  margin: 0 0 var(--space-4);
}

.contact-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.contact-option:hover {
  border-color: var(--aqua-300);
  background: var(--aqua-100);
  transform: translateX(2px);
}
.contact-option--primary { background: var(--gray-100); border-color: transparent; }

.contact-option__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--blue-700);
}
.contact-option__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-option__text strong { font-size: .9375rem; color: var(--navy-950); font-weight: 650; }
.contact-option__text span { font-size: .8125rem; color: var(--gray-500); }

.contact-sheet__foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
  font-size: .8125rem;
  color: var(--gray-500);
}

@media (prefers-reduced-motion: reduce) {
  .contact-sheet__panel, .contact-sheet__backdrop { animation: none; }
  .fab, .contact-option { transition: none; }
}

/* ===============================================================
   21. Optional photograph behind the interior page hero
   ===============================================================
   Usage — add the modifier and one image block:

     <section class="page-hero page-hero--photo">
       <div class="page-hero__bg">
         <img src="/assets/images/your-photo.jpg" alt="" width="2000" height="700">
       </div>
       <div class="wrap page-hero__inner"> … </div>
     </section>

   The navy stays underneath, so a missing or slow-loading photo still
   renders a finished-looking band rather than a bare white gap. */

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim. Strongest on the left where the headline sits, clearing toward the
   right so the photograph is still visible. */
.page-hero--photo .page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(16,33,43,.92) 0%,
    rgba(16,33,43,.78) 40%,
    rgba(16,33,43,.45) 70%,
    rgba(16,33,43,.30) 100%);
}

/* The decorative aqua glow competes with a photograph. */
.page-hero--photo::after { display: none; }

/* Keep the text above both layers. */
.page-hero__inner { z-index: 2; }

/* A little more height when there is something to look at. */
.page-hero--photo { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }

@media (max-width: 640px) {
  /* On a narrow screen the photo is mostly hidden behind the scrim anyway,
     so darken further and keep the type comfortably readable. */
  .page-hero--photo .page-hero__bg::after {
    background: linear-gradient(180deg, rgba(16,33,43,.86), rgba(16,33,43,.92));
  }
}

/* --- Quick booking form inside the floating sheet --- */
.quick-book { display: grid; gap: var(--space-3); }
.quick-book__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.quick-book .field { margin: 0; }
.quick-book label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 5px;
}
.quick-book input[type="date"],
.quick-book select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--navy-950);
}
.quick-book input[type="date"]:focus,
.quick-book select:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
  border-color: transparent;
}
.quick-book .btn { margin-top: 4px; }

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

/* --- Featured promo panel inside a mega menu --- */

/* Only the menu carrying a promo gets the extra column and width. */
.mega__inner--promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-4);
  align-items: start;
}
.mega__inner--promo .mega__cols { grid-column: 1; }
.mega__inner--promo .mega__foot { grid-column: 1 / -1; }

/* Wider panel, but never wider than the viewport.
   Set with an explicit class rather than :has() so it does not depend on
   selector support — without the extra width the two link columns collapse
   into one and the menu becomes very tall. */
.mega--wide { max-width: min(920px, calc(100vw - 48px)); }

/* Inside the promo layout the links are always two columns. auto-fit would
   fall back to one as soon as the available width dips below the minimum. */
.mega__inner--promo .mega__cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mega__promo {
  grid-column: 2;
  align-self: start;
  background: linear-gradient(165deg, var(--aqua-100) 0%, var(--sand-100) 100%);
  border: 1px solid rgba(16,33,43,.06);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
}

/* The artwork is a cut-out PNG, so it sits on the panel rather than in a
   box — contain keeps the whole vehicle visible at any panel width. */
.mega__promo-art {
  margin: -6px 0 var(--space-2);
}
.mega__promo-art img {
  width: 100%;
  height: auto;
  max-height: 92px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(16,33,43,.22));
}

.mega__promo-eyebrow {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 3px;
}
.mega__promo h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy-950);
  margin: 0 0 5px;
}
.mega__promo-text {
  font-size: .75rem;
  line-height: 1.4;
  color: var(--gray-700);
  margin: 0 0 var(--space-2);
}
.mega__promo-price {
  font-size: .8125rem;
  color: var(--gray-500);
  margin: 0 0 var(--space-2);
}
.mega__promo-price strong {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--navy-950);
  letter-spacing: -.02em;
}
.mega__promo-price span { font-size: .75rem; }

/* Narrower desktops: drop the promo rather than squeeze the links. */
@media (max-width: 1200px) {
  .mega__inner--promo { grid-template-columns: 1fr; }
  .mega__promo { display: none; }
}

/* --- Buttons inside the nav ---------------------------------------------
   The broad `.nav a` and `.nav a:hover` rules near the top of this sheet
   have higher specificity than the `.btn` classes, so any button placed
   inside the navigation (the mega-menu promo, for one) loses its colours
   on hover and ends up white-on-white. These restore them. */

.nav a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 650;
}
.nav a.btn--block { display: flex; width: 100%; }

.nav a.btn--primary,
.nav a.btn--primary:hover,
.nav a.btn--primary:focus {
  color: var(--white);
}
.nav a.btn--primary { background: var(--blue-700); }
.nav a.btn--primary:hover { background: var(--navy-900); }

.nav a.btn--outline { background: var(--white); color: var(--navy-900); }
.nav a.btn--outline:hover { background: var(--white); color: var(--navy-900); }

.nav a.btn--sun { background: var(--sun-500); color: var(--navy-950); }
.nav a.btn--sun:hover { background: #eaa825; color: var(--navy-950); }

}

/* --- Mobile menu: actions first ---------------------------------------- */
.mobile-nav__cta--top {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  display: grid;
  gap: 10px;
  /* Stays put while the link list scrolls beneath it. */
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.mobile-nav__cta--top .btn { width: 100%; }

/* The list no longer needs to reserve space for buttons underneath. */
.mobile-nav__links { padding-bottom: var(--space-6); }

/* ===============================================================
   22. Mobile menu — refreshed
   =============================================================== */

.mobile-nav__cta--top {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  display: grid;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.mobile-nav__cta--top .btn { width: 100%; min-height: 50px; font-size: 1rem; }
.mobile-nav__cta--top .btn--outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mobile-nav__cta--top .btn--outline svg { color: var(--blue-700); }

/* --- Link rows --- */
.mobile-nav__links {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: grid;
  gap: 4px;
}

.mobile-nav__links a.mnav-item {
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 12px;
  border: 0;                 /* replaces the old full-width divider rules */
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.mobile-nav__links a.mnav-item:active { transform: scale(.985); }
.mobile-nav__links a.mnav-item[aria-current="page"] { background: var(--aqua-100); }

.mnav-item__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--gray-100);
  color: var(--blue-700);
  transition: background .16s ease, color .16s ease;
}
.mnav-item[aria-current="page"] .mnav-item__icon { background: var(--white); }

.mnav-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mnav-item__text strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-950);
  line-height: 1.2;
}
.mnav-item__text span {
  font-size: .8125rem;
  color: var(--gray-500);
  line-height: 1.3;
}
.mnav-item[aria-current="page"] .mnav-item__text strong { color: var(--blue-700); }

.mnav-item__chev { color: var(--gray-300); flex-shrink: 0; }
.mnav-item[aria-current="page"] .mnav-item__chev { color: var(--blue-700); }

/* --- Panel footer --- */
.mobile-nav__foot {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--gray-200);
  background: var(--sand-50);
}
.mobile-nav__foot p {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: .8125rem;
  color: var(--gray-700);
}
.mobile-nav__foot svg { color: var(--blue-700); flex-shrink: 0; }
.mobile-nav__more {
  margin: var(--space-2) 0 0 !important;
  padding-top: var(--space-2);
  border-top: 1px solid var(--gray-200);
  color: var(--gray-500);
}
.mobile-nav__more a { color: var(--gray-700); text-decoration: none; font-weight: 600; }
.mobile-nav__more a:hover { color: var(--blue-700); text-decoration: underline; }

/* The panel is a column so the footer can sit at the bottom. */
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav__links { flex: 0 0 auto; }

/* ===============================================================
   23. Island band — ships in port + vehicle matcher
   =============================================================== */

.island-band {
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--blue-700) 100%);
  color: var(--white);
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.25rem);
}
.island-band__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* Matcher first — it is the thing that leads to a booking. Conditions and
     ships sit alongside as context. */
  .island-band__inner { grid-template-columns: 1fr 320px; }
  .island-band__inner--solo { grid-template-columns: 1fr; }
}

/* --- Ships in port --- */
.port-panel {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.port-panel__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--aqua-300);
  margin: 0 0 var(--space-2);
}
.port-panel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sun-500);
  box-shadow: 0 0 0 0 rgba(246,184,63,.7);
  animation: portPulse 2.4s ease-out infinite;
}
@keyframes portPulse {
  0%   { box-shadow: 0 0 0 0 rgba(246,184,63,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(246,184,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(246,184,63,0); }
}

.port-panel__count { margin: 0 0 var(--space-3); font-size: 1rem; color: var(--aqua-100); }
.port-panel__count strong {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 800;
  color: var(--sun-500); margin-right: 4px;
}

.port-panel__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.port-panel__list li {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: .875rem;
}
.port-panel__list li:last-child { border-bottom: 0; }
.port-panel__ship { font-weight: 600; }
.port-panel__time { color: var(--aqua-300); white-space: nowrap; }

.port-panel__note { margin: 0; font-size: .8125rem; color: rgba(255,255,255,.72); line-height: 1.5; }

/* --- Matcher --- */
.matcher__eyebrow {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--aqua-300);
  margin: 0 0 6px;
}
.matcher__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0 0 var(--space-4);
}

.matcher__steps { display: grid; gap: var(--space-4); }
.matcher__step { border: 0; margin: 0; padding: 0; }
.matcher__step legend {
  font-size: .9375rem;
  color: var(--aqua-100);
  margin-bottom: 10px;
  padding: 0;
}
.matcher__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.matcher__opts button {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.matcher__opts button:hover {
  background: rgba(255,255,255,.16);
  border-color: var(--aqua-300);
}
.matcher__opts button:active { transform: scale(.97); }
.matcher__opts button:focus-visible { outline: 3px solid var(--sun-500); outline-offset: 2px; }

/* --- Result --- */
.matcher__result {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  animation: matcherIn .25s var(--ease);
}
.matcher__result-name { margin-bottom: 4px; }
.matcher__actions { margin-top: var(--space-4); }
@keyframes matcherIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.matcher__result-label {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--aqua-300);
  margin: 0 0 4px;
}
.matcher__result-name {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  color: var(--white);
  margin: 0 0 2px;
}
.matcher__result-price { margin: 0 0 var(--space-3); color: var(--aqua-100); font-size: .9375rem; }
.matcher__result-price strong { color: var(--sun-500); font-size: 1.25rem; font-weight: 800; }
.matcher__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.matcher__noscript { margin: var(--space-3) 0 0; }

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

/* --- Weather card in the island band --- */
.island-side { display: grid; gap: var(--space-3); align-content: start; }

.weather-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.weather-card__now { display: flex; align-items: center; gap: var(--space-3); }
.weather-card__temp {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sun-500);
}
.weather-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weather-card__meta strong { font-size: 1rem; color: var(--white); font-weight: 700; }
.weather-card__meta span { font-size: .8125rem; color: var(--aqua-300); }

.weather-card__note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}

/* The ship name should not break mid-word in a narrow column. */
.port-panel__ship { hyphens: none; }
.port-panel__list li { align-items: baseline; }

/* --- Photo in the matcher result --- */
.matcher__result {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
/* A class selector beats the browser's built-in [hidden] { display: none },
   so the panel has to opt back out explicitly — without this it shows,
   empty, before any question has been answered. */
.matcher__result[hidden] { display: none; }
@media (min-width: 620px) {
  .matcher__result { grid-template-columns: 1fr minmax(0, 260px); }
}

.matcher__result-text { min-width: 0; }

.matcher__result-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;               /* this is what rounds the photo */
  background: rgba(255,255,255,.08);
}
.matcher__result-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
/* Hide the frame entirely until an image has actually been set, so an empty
   src never renders as a grey box. */
.matcher__result-media img[src=""] { display: none; }