@charset "UTF-8";
/* ==========================================================================
   INTERCITY VEHICLE TRANSPORT — Theme Stylesheet
   --------------------------------------------------------------------------
   00. Design tokens
   01. Reset & base
   02. Typography
   03. Layout primitives
   04. Buttons
   05. Badges, pills & eyebrows
   06. Cards
   07. Forms & quote widget
   08. Tables (route corridors)
   09. Header & navigation
   10. Footer
   11. Homepage sections
   12. Coverage map
   13. Utilities
   14. Motion & reduced-motion
   ========================================================================== */


/* ==========================================================================
   00. DESIGN TOKENS
   ========================================================================== */

:root {

  /* --- Brand: Navy ------------------------------------------------------ */
  --ivt-navy-950: #060F1B;
  --ivt-navy-900: #0A1725;
  --ivt-navy-800: #0F2036;
  --ivt-navy-700: #163049;
  --ivt-navy-600: #1F4160;
  --ivt-navy-500: #2C567C;
  --ivt-navy-400: #4A749B;

  /* --- Brand: Australian Racing Green ----------------------------------- */
  --ivt-green-950: #04241A;
  --ivt-green-900: #073124;
  --ivt-green-800: #0A4130;
  --ivt-green-700: #0E553E;   /* primary brand green */
  --ivt-green-600: #146B4E;
  --ivt-green-500: #1C8761;
  --ivt-green-400: #2BA478;
  --ivt-green-300: #55C097;
  --ivt-green-200: #93D9BC;
  --ivt-green-100: #CFEFE1;
  --ivt-green-050: #EDF9F3;

  /* --- Accent: Gold (green & gold — used sparingly) --------------------- */
  --ivt-gold-600: #B9822A;
  --ivt-gold-500: #D9A036;
  --ivt-gold-400: #EFBC5C;
  --ivt-gold-100: #FBF0D8;

  /* --- Neutrals --------------------------------------------------------- */
  --ivt-white:  #FFFFFF;
  --ivt-paper:  #F6F9F7;   /* faintly green-tinted off-white */
  --ivt-mist:   #EBF1EE;
  --ivt-line:   #DCE5E0;
  --ivt-line-strong: #C3D0C9;
  --ivt-slate-400: #8A9AA1;
  --ivt-slate-500: #64757D;
  --ivt-slate-600: #4A5A61;
  --ivt-slate-700: #35444B;

  /* --- Semantic --------------------------------------------------------- */
  --ivt-success: var(--ivt-green-500);
  --ivt-warning: #C77E14;
  --ivt-danger:  #B4342C;
  --ivt-info:    var(--ivt-navy-500);

  /* --- Semantic roles --------------------------------------------------- */
  --ivt-bg:            var(--ivt-white);
  --ivt-bg-alt:        var(--ivt-paper);
  --ivt-bg-dark:       var(--ivt-navy-900);
  --ivt-bg-dark-deep:  var(--ivt-navy-950);
  --ivt-text:          var(--ivt-navy-900);
  --ivt-text-muted:    var(--ivt-slate-500);
  --ivt-text-on-dark:  #E8EFEB;
  --ivt-text-on-dark-muted: #9FB2AC;
  --ivt-accent:        var(--ivt-green-700);
  --ivt-accent-hover:  var(--ivt-green-800);
  --ivt-accent-bright: var(--ivt-green-400);

  /* --- Typography ------------------------------------------------------- */
  --ivt-font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ivt-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ivt-font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — min at 360px, max at 1440px */
  --ivt-fs-display: clamp(2.5rem,  1.55rem + 4.2vw, 4.5rem);
  --ivt-fs-h1:      clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  --ivt-fs-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
  --ivt-fs-h3:      clamp(1.3125rem, 1.15rem + 0.72vw, 1.75rem);
  --ivt-fs-h4:      clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);
  --ivt-fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --ivt-fs-body:    1rem;
  --ivt-fs-sm:      0.9375rem;
  --ivt-fs-xs:      0.8125rem;
  --ivt-fs-2xs:     0.75rem;

  --ivt-lh-tight:   1.08;
  --ivt-lh-snug:    1.25;
  --ivt-lh-normal:  1.55;
  --ivt-lh-relaxed: 1.7;

  --ivt-tracking-tight: -0.022em;
  --ivt-tracking-snug:  -0.012em;
  --ivt-tracking-wide:  0.08em;
  --ivt-tracking-caps:  0.14em;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --ivt-s1:  0.25rem;
  --ivt-s2:  0.5rem;
  --ivt-s3:  0.75rem;
  --ivt-s4:  1rem;
  --ivt-s5:  1.25rem;
  --ivt-s6:  1.5rem;
  --ivt-s8:  2rem;
  --ivt-s10: 2.5rem;
  --ivt-s12: 3rem;
  --ivt-s16: 4rem;
  --ivt-s20: 5rem;
  --ivt-s24: 6rem;
  --ivt-s32: 8rem;

  /* Section rhythm — fluid */
  --ivt-section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);

  /* --- Radii ------------------------------------------------------------ */
  --ivt-r-xs:   4px;
  --ivt-r-sm:   8px;
  --ivt-r-md:   12px;
  --ivt-r-lg:   16px;
  --ivt-r-xl:   24px;
  --ivt-r-2xl:  32px;
  --ivt-r-pill: 999px;

  /* --- Shadows (green-tinted, restrained) ------------------------------- */
  --ivt-shadow-xs: 0 1px 2px rgba(6, 40, 30, 0.06);
  --ivt-shadow-sm: 0 1px 3px rgba(6, 40, 30, 0.08), 0 1px 2px rgba(6, 40, 30, 0.04);
  --ivt-shadow-md: 0 4px 12px rgba(6, 40, 30, 0.08), 0 2px 4px rgba(6, 40, 30, 0.04);
  --ivt-shadow-lg: 0 12px 32px rgba(6, 40, 30, 0.10), 0 4px 8px rgba(6, 40, 30, 0.04);
  --ivt-shadow-xl: 0 24px 56px rgba(6, 40, 30, 0.14), 0 8px 16px rgba(6, 40, 30, 0.06);

  /* --- Layout ------------------------------------------------------------ */
  --ivt-container: 1200px;
  --ivt-container-wide: 1400px;
  --ivt-container-narrow: 760px;
  --ivt-gutter: clamp(1.125rem, 0.7rem + 1.8vw, 2rem);
  --ivt-header-h: 92px;

  /* --- Motion ------------------------------------------------------------ */
  --ivt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ivt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ivt-dur-fast: 140ms;
  --ivt-dur: 240ms;
  --ivt-dur-slow: 420ms;

  /* --- Z-index ----------------------------------------------------------- */
  --ivt-z-header: 100;
  --ivt-z-mega:   90;
  --ivt-z-drawer: 110;
  --ivt-z-float:  120;

  /* The site commits to a single light-ground identity: navy and green
     surfaces sit inside a light page. This is deliberate, not an omission —
     it stops the browser rendering form controls in dark-mode chrome. */
  color-scheme: light;
}


/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--ivt-bg);
  color: var(--ivt-text);
  font-family: var(--ivt-font-body);
  font-size: var(--ivt-fs-body);
  line-height: var(--ivt-lh-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
 * No horizontal scroll, ever.
 *
 * This must sit on BOTH html and body. Clipping on body alone is unreliable
 * on mobile Safari, which can still widen the layout viewport — and a wider
 * layout viewport is what pushes `position: fixed` furniture (the WhatsApp
 * widget, back-to-top) off the side of the screen, since fixed elements
 * anchor to it.
 *
 * `clip` rather than `hidden` on purpose. `overflow-x: hidden` forces the
 * other axis to `auto`, creating a scroll container that breaks
 * `position: sticky` on the header and can still be panned by touch.
 * `clip` does neither. The `hidden` line above it is the fallback for
 * Safari below 16, which ignores the `clip` declaration.
 */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/*
 * Scroll lock for the open drawer and the confirmation modal.
 *
 * Applied to the ROOT element, not the body, and as a class rather than
 * `body.style.overflow = 'hidden'` in JS. Two reasons, both measured:
 *
 * 1. The inline shorthand sets both axes at once. `overflow-x: clip` only
 *    survives when the other axis is `visible` or `clip` — paired with
 *    `hidden` it computes to `hidden`, turning the body from a clipping box
 *    into a scroll container that can be panned sideways. That reintroduced
 *    the exact bug this file works to prevent.
 * 2. Locking the root instead leaves the body at `clip/visible`, so it keeps
 *    clipping over-wide content for the whole time the drawer is open.
 */
.ivt-locked {
  overflow: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }

/*
 * Standing guard. Anything that cannot be reflowed must clip or scroll
 * inside its own box rather than widening the page.
 */
table, pre, code, blockquote { max-width: 100%; }
pre { overflow-x: auto; }
p, li, h1, h2, h3, h4, td, th, dd, dt { overflow-wrap: anywhere; }

/*
 * Single-column grids: force a shrinkable implicit track.
 *
 * A grid with no grid-template-columns drops its items into an implicit
 * column sized `auto`, and an `auto` track will not shrink below its
 * content's min-content width. One wide table inside is then enough to
 * force the whole page open — which is what breaks these layouts on a
 * phone. `grid-auto-columns` is ignored wherever an explicit template is
 * set, so every desktop media query below is unaffected.
 */
.grid,
.listing,
.compare,
.compare__list,
.updates,
.steps,
.hero__grid,
.sk-hero__grid,
.cta-card__grid,
.cta-card__contact,
.covmap,
.covmap__routes,
.field-row,
.check-list,
.checkgroup__items,
.sidebar-list,
.modal__actions,
.mega__features,
.footer-links,
.footer-contact,
.footer-depots,
.zone ul,
.toc ol,
.form-notice ul {
  grid-auto-columns: minmax(0, 1fr);
}

/* Flex items share the same refusal to shrink below their content. */
.covmap__route > *,
.split > *,
.photo-split > *,
.quote-layout > * { min-width: 0; }

/*
 * Screen-reader-only text: modern clip alongside the legacy `clip`.
 *
 * Note this is not what stops it widening the page — `clip-path` only
 * affects painting, not layout. The fix for that is `position: relative`
 * on the scrolling ancestors, which makes their overflow actually clip
 * absolutely-positioned descendants. See .table-wrap and .cats__tabs.
 */
.visually-hidden { clip-path: inset(50%); }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: var(--ivt-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ivt-accent-hover); }

p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--ivt-line);
  margin: var(--ivt-s10) 0;
}

::selection { background: var(--ivt-green-200); color: var(--ivt-green-950); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ivt-green-500);
  outline-offset: 3px;
  border-radius: var(--ivt-r-xs);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--ivt-s4);
  top: -100px;
  z-index: 999;
  padding: var(--ivt-s3) var(--ivt-s5);
  background: var(--ivt-green-700);
  color: #fff;
  border-radius: var(--ivt-r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--ivt-dur) var(--ivt-ease);
}
.skip-link:focus { top: var(--ivt-s4); color: #fff; }

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


/* ==========================================================================
   02. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--ivt-font-display);
  font-weight: 700;
  line-height: var(--ivt-lh-tight);
  letter-spacing: var(--ivt-tracking-tight);
  color: var(--ivt-navy-900);
  text-wrap: balance;
}

.display   { font-size: var(--ivt-fs-display); font-weight: 800; }
h1, .h1    { font-size: var(--ivt-fs-h1); }
h2, .h2    { font-size: var(--ivt-fs-h2); }
h3, .h3    { font-size: var(--ivt-fs-h3); line-height: var(--ivt-lh-snug); letter-spacing: var(--ivt-tracking-snug); }
h4, .h4    { font-size: var(--ivt-fs-h4); line-height: var(--ivt-lh-snug); letter-spacing: var(--ivt-tracking-snug); }

.lead {
  font-size: var(--ivt-fs-lead);
  line-height: var(--ivt-lh-relaxed);
  color: var(--ivt-slate-600);
  text-wrap: pretty;
}

.text-muted { color: var(--ivt-text-muted); }
.text-sm    { font-size: var(--ivt-fs-sm); }
.text-xs    { font-size: var(--ivt-fs-xs); }

/* Accent word inside a heading — the "done the safe way" treatment */
.accent-word { color: var(--ivt-green-600); }
.accent-word-dark { color: var(--ivt-green-300); }

/* Prose blocks (guides, blog, legal) */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--ivt-s5); }
.prose h2 { margin-top: var(--ivt-s12); }
.prose h3 { margin-top: var(--ivt-s8); }
.prose p, .prose li { color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); }
.prose ul, .prose ol { padding-left: var(--ivt-s5); }
.prose ul li { list-style: disc; margin-top: var(--ivt-s2); }
.prose ol li { list-style: decimal; margin-top: var(--ivt-s2); }
.prose strong { color: var(--ivt-navy-900); font-weight: 600; }
.prose > :first-child { margin-top: 0; }
.prose--wide { max-width: 100%; }

/* Tables inside prose — scroll rather than break the page */
.prose .table-wrap { margin-block: var(--ivt-s8); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ivt-fs-sm);
  min-width: 40rem;
}
.prose thead th {
  text-align: left;
  padding: var(--ivt-s4) var(--ivt-s5);
  font-family: var(--ivt-font-body);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-slate-500);
  background: var(--ivt-paper);
  border-bottom: 1px solid var(--ivt-line);
  white-space: nowrap;
}
.prose tbody th {
  text-align: left;
  padding: var(--ivt-s4) var(--ivt-s5);
  font-weight: 600;
  color: var(--ivt-navy-900);
  border-bottom: 1px solid var(--ivt-line);
  vertical-align: top;
  white-space: nowrap;
}
.prose tbody td {
  padding: var(--ivt-s4) var(--ivt-s5);
  border-bottom: 1px solid var(--ivt-line);
  color: var(--ivt-slate-600);
  vertical-align: top;
}
.prose tbody tr:last-child > * { border-bottom: 0; }

/* Callouts */
.callout {
  display: flex;
  gap: var(--ivt-s4);
  padding: var(--ivt-s5);
  border-radius: var(--ivt-r-lg);
  border: 1px solid var(--ivt-green-100);
  background: var(--ivt-green-050);
  margin-block: var(--ivt-s8);
}
.callout__icon { color: var(--ivt-green-700); flex-shrink: 0; margin-top: 2px; }
.callout p { margin: 0; color: var(--ivt-slate-700); font-size: var(--ivt-fs-sm); }
.callout p + p { margin-top: var(--ivt-s3); }
.callout strong { color: var(--ivt-green-900); }
.callout--warn { border-color: #F0DCB0; background: #FDF7EA; }
.callout--warn .callout__icon { color: var(--ivt-warning); }
.callout--warn strong { color: #7A5410; }
.callout--alert { border-color: #F2CFCC; background: #FCF2F1; }
.callout--alert .callout__icon { color: var(--ivt-danger); }
.callout--alert strong { color: #7C241E; }

/* Zone checklist — used in the quarantine guide */
.zone {
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  background: var(--ivt-white);
}
.zone + .zone { margin-top: var(--ivt-s4); }
.zone__head {
  display: flex;
  align-items: center;
  gap: var(--ivt-s3);
  margin-bottom: var(--ivt-s4);
  padding-bottom: var(--ivt-s4);
  border-bottom: 1px solid var(--ivt-line);
}
.zone__icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
  flex-shrink: 0;
}
.zone__title {
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-h4);
  font-weight: 700;
  color: var(--ivt-navy-900);
  margin: 0;
}
.zone ul { display: grid; gap: var(--ivt-s3); padding: 0; margin: 0; }
.zone li {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s3);
  list-style: none;
  margin: 0;
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-normal);
}
.zone li::before {
  content: "";
  width: 1rem; height: 1rem;
  margin-top: 3px;
  border: 1.5px solid var(--ivt-green-300);
  border-radius: var(--ivt-r-xs);
  flex-shrink: 0;
}

/* In-page contents nav */
.toc {
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  background: var(--ivt-paper);
  padding: var(--ivt-s5);
  margin-block: var(--ivt-s8);
}
.toc__label {
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-slate-500);
  margin-bottom: var(--ivt-s4);
}
.toc ol { display: grid; gap: var(--ivt-s2); padding: 0; margin: 0; counter-reset: toc; }
.toc li { list-style: none; margin: 0; counter-increment: toc; }
.toc a {
  display: flex;
  gap: var(--ivt-s3);
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  text-decoration: none;
}
.toc a::before {
  content: counter(toc) ".";
  color: var(--ivt-green-600);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--ivt-green-700); }


/* ==========================================================================
   03. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--ivt-container);
  margin-inline: auto;
  padding-inline: var(--ivt-gutter);
}
.container-wide   { max-width: var(--ivt-container-wide); }
.container-narrow { max-width: var(--ivt-container-narrow); }

.section     { padding-block: var(--ivt-section-y); }
.section-alt { padding-block: var(--ivt-section-y); background: var(--ivt-bg-alt); }
.section-dark {
  padding-block: var(--ivt-section-y);
  background: var(--ivt-bg-dark);
  color: var(--ivt-text-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lead { color: var(--ivt-text-on-dark-muted); }

/* Section header — eyebrow + heading + lead */
.section-head { max-width: 46rem; margin-bottom: var(--ivt-s10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--ivt-s4); }

/* Split section: sticky heading left, content right (Safeway pattern) */
.split {
  display: grid;
  /* Explicit shrinkable track. The implicit `auto` column a bare grid falls
     back to will not go below its content's min-content width, so a wide
     table inside would force the whole page open on mobile. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ivt-s8);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ivt-s16); }
  .split__aside { position: sticky; top: calc(var(--ivt-header-h) + var(--ivt-s8)); }
}

.stack > * + * { margin-top: var(--ivt-s4); }
.stack-lg > * + * { margin-top: var(--ivt-s8); }

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivt-s3);
  align-items: center;
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--ivt-green-700);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ivt-s2);
  padding: 0.8125rem var(--ivt-s6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--ivt-r-sm);
  font-family: var(--ivt-font-body);
  font-size: var(--ivt-fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  /* nowrap keeps labels on one line, but a long label on a 320px screen
     must still not push the page open. No `overflow: hidden` here — it
     would clip the arrow icon's hover slide. */
  white-space: nowrap;
  max-width: 100%;
  transition: background var(--ivt-dur) var(--ivt-ease),
              border-color var(--ivt-dur) var(--ivt-ease),
              color var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur-fast) var(--ivt-ease),
              box-shadow var(--ivt-dur) var(--ivt-ease);
}
.btn:hover { --btn-bg: var(--ivt-green-800); color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--ivt-shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--ivt-shadow-xs); }

.btn--lg { padding: 1rem var(--ivt-s8); font-size: var(--ivt-fs-body); }
.btn--sm { padding: 0.5rem var(--ivt-s4); font-size: var(--ivt-fs-xs); }
.btn--block { width: 100%; }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ivt-navy-800);
  --btn-bd: var(--ivt-line-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--ivt-green-050);
  --btn-fg: var(--ivt-green-800);
  --btn-bd: var(--ivt-green-300);
}

.btn--ghost-light {
  --btn-bg: rgba(255,255,255,0.06);
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,0.14); --btn-bd: rgba(255,255,255,0.4); }

.btn--gold { --btn-bg: var(--ivt-gold-500); --btn-fg: var(--ivt-navy-950); }
.btn--gold:hover { --btn-bg: var(--ivt-gold-400); }

/* Arrow nudge */
.btn__icon { transition: transform var(--ivt-dur) var(--ivt-ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s2);
  font-size: var(--ivt-fs-sm);
  font-weight: 600;
  color: var(--ivt-green-700);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--ivt-dur) var(--ivt-ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow--light { color: var(--ivt-green-300); }


/* ==========================================================================
   05. BADGES, PILLS & EYEBROWS
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s2);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-green-600);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--light { color: var(--ivt-green-300); }
.eyebrow--center::before { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s2);
  padding: 0.375rem var(--ivt-s3);
  border-radius: var(--ivt-r-pill);
  background: var(--ivt-green-050);
  color: var(--ivt-green-800);
  border: 1px solid var(--ivt-green-100);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  line-height: 1.3;
}
.pill--dark {
  background: rgba(255,255,255,0.07);
  color: var(--ivt-text-on-dark);
  border-color: rgba(255,255,255,0.16);
}
.pill--gold { background: var(--ivt-gold-100); color: var(--ivt-gold-600); border-color: #F0DCB0; }

/* Live status dot */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ivt-green-400);
  position: relative;
  flex-shrink: 0;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ivt-green-400);
  opacity: 0.6;
  animation: ivt-ping 2.4s var(--ivt-ease-out) infinite;
}
@keyframes ivt-ping {
  0%   { transform: scale(0.7); opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}


/* ==========================================================================
   06. CARDS
   ========================================================================== */

.card {
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  transition: border-color var(--ivt-dur) var(--ivt-ease),
              box-shadow var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur) var(--ivt-ease);
}
a.card, .card--interactive { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card--interactive:hover {
  border-color: var(--ivt-green-300);
  box-shadow: var(--ivt-shadow-lg);
  transform: translateY(-2px);
}

.card--dark {
  background: var(--ivt-navy-800);
  border-color: rgba(255,255,255,0.10);
  color: var(--ivt-text-on-dark);
}
.card--flush { padding: 0; overflow: hidden; }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ivt-r-md);
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
  margin-bottom: var(--ivt-s5);
}
.card--dark .card__icon { background: rgba(43,164,120,0.14); color: var(--ivt-green-300); }
.card__title { font-size: var(--ivt-fs-h4); margin-bottom: var(--ivt-s2); }
.card--dark .card__title { color: #fff; }
.card__body { font-size: var(--ivt-fs-sm); color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); }
.card--dark .card__body { color: var(--ivt-text-on-dark-muted); }


/* ==========================================================================
   07. FORMS & QUOTE WIDGET
   ========================================================================== */

.field { display: block; position: relative; }
.field + .field { margin-top: var(--ivt-s6); }

.field__label {
  display: block;
  font-size: var(--ivt-fs-xs);
  font-weight: 700;
  color: var(--ivt-navy-900);
  letter-spacing: -0.005em;
  margin-bottom: var(--ivt-s2);
  transition: color var(--ivt-dur) var(--ivt-ease);
}

/* Underline fields. Lighter than boxed inputs and the labels carry the
   structure — but the focus and error states have to work harder as a
   result, so they are deliberately loud. */
/* Filled underline fields: a soft raised surface with a bottom accent.
   Keeps the airy look of a pure underline but gives the field an edge and
   a shadow, so it still reads as something you can type into. */
.input, .select, .textarea {
  width: 100%;
  padding: 0.8125rem var(--ivt-s4);
  background: var(--ivt-paper);
  border: 1px solid var(--ivt-line);
  border-bottom: 2px solid var(--ivt-line-strong);
  border-radius: var(--ivt-r-sm) var(--ivt-r-sm) 3px 3px;
  box-shadow: 0 1px 2px rgba(6, 40, 30, 0.05);
  /* 16px minimum. Anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--ivt-navy-900);
  transition: border-color var(--ivt-dur) var(--ivt-ease),
              box-shadow var(--ivt-dur) var(--ivt-ease),
              background var(--ivt-dur) var(--ivt-ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ivt-slate-400); font-weight: 400; }

.input:hover, .select:hover, .textarea:hover {
  background: var(--ivt-white);
  border-bottom-color: var(--ivt-slate-400);
  box-shadow: 0 2px 6px rgba(6, 40, 30, 0.07);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--ivt-white);
  border-color: var(--ivt-green-200);
  border-bottom-color: var(--ivt-green-600);
  box-shadow: 0 3px 10px rgba(6, 40, 30, 0.08), 0 0 0 3px rgba(28,135,97,0.10);
}
/* The label lights up with its field, so the active row is obvious even
   in a dense three-column grid. */
.field:focus-within .field__label { color: var(--ivt-green-700); }

.textarea { min-height: 6.5rem; resize: vertical; line-height: var(--ivt-lh-normal); }

.select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230E553E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ivt-s4) center;
  padding-right: var(--ivt-s10);
}
.select:focus { background-color: var(--ivt-white); }
/* An unchosen select should read as a prompt, not as an answer. */
.select:invalid, .select option[value=""] { color: var(--ivt-slate-400); }

/* --- Hero quote card --------------------------------------------------- */
.quote-card {
  position: relative;
  background: var(--ivt-white);
  border-radius: var(--ivt-r-xl);
  padding: var(--ivt-s6);
  box-shadow: var(--ivt-shadow-xl);
  border: 1px solid rgba(255,255,255,0.6);
  overflow: hidden;
}
.quote-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ivt-green-700), var(--ivt-green-400));
}
.quote-card__head { margin-bottom: var(--ivt-s5); }
.quote-card__title { font-size: var(--ivt-fs-h4); margin-bottom: var(--ivt-s1); }
.quote-card__sub { font-size: var(--ivt-fs-xs); color: var(--ivt-text-muted); }
.quote-card__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s2);
  margin-top: var(--ivt-s4);
  padding-top: var(--ivt-s4);
  border-top: 1px solid var(--ivt-line);
  font-size: var(--ivt-fs-2xs);
  color: var(--ivt-text-muted);
  line-height: 1.45;
}

@media (min-width: 560px) {
  .quote-card { padding: var(--ivt-s8); }
  .quote-card__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ivt-s5); }
  .quote-card__row .field + .field { margin-top: 0; }
}
.quote-card .field + .field,
.quote-card .quote-card__row + .field { margin-top: var(--ivt-s5); }


/* ==========================================================================
   08. TABLES — route corridors
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  /*
   * Required, not cosmetic. `overflow` clips an absolutely-positioned
   * descendant ONLY if the overflowing element is itself positioned.
   * Without this, the screen-reader-only `.visually-hidden` header inside
   * the table escapes the scroller entirely, parks at its static position
   * ~870px out, and drags the whole document width with it — several
   * hundred pixels of phantom horizontal scroll on a phone.
   */
  position: relative;
  /* Without this the wrapper inherits its content's min-content width from a
     flex or grid parent and stops being a scroller at all. */
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  background: var(--ivt-white);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 44rem;
  font-size: var(--ivt-fs-sm);
}
.data-table thead th {
  text-align: left;
  padding: var(--ivt-s4) var(--ivt-s5);
  font-family: var(--ivt-font-body);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-slate-500);
  background: var(--ivt-paper);
  border-bottom: 1px solid var(--ivt-line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--ivt-s4) var(--ivt-s5);
  border-bottom: 1px solid var(--ivt-line);
  color: var(--ivt-slate-600);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--ivt-dur-fast) var(--ivt-ease); }
.data-table tbody tr:hover { background: var(--ivt-green-050); }

.route-cell {
  display: flex;
  align-items: center;
  gap: var(--ivt-s3);
  font-weight: 600;
  color: var(--ivt-navy-900);
  white-space: nowrap;
}
.route-cell__icon { color: var(--ivt-green-600); flex-shrink: 0; }
.route-cell__arrow { color: var(--ivt-slate-400); margin-inline: var(--ivt-s1); }
.td-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-action { text-align: right; white-space: nowrap; }


/* ==========================================================================
   09. HEADER & NAVIGATION
   ========================================================================== */

/* --- Utility bar ------------------------------------------------------- */
.utility-bar {
  background: var(--ivt-navy-950);
  color: var(--ivt-text-on-dark-muted);
  font-size: var(--ivt-fs-2xs);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s5);
  min-height: 38px;
  padding-block: var(--ivt-s2);
}
.utility-bar__group { display: flex; align-items: center; gap: var(--ivt-s5); flex-wrap: wrap; }
.utility-bar a { color: inherit; text-decoration: none; transition: color var(--ivt-dur) var(--ivt-ease); }
.utility-bar a:hover { color: #fff; }
.utility-bar__item { display: inline-flex; align-items: center; gap: var(--ivt-s2); }
.utility-bar__item svg { color: var(--ivt-green-400); }

/* The phone moved up here from the header row, so it earns more weight. */
.utility-bar__phone {
  font-size: var(--ivt-fs-xs);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.utility-bar__phone:hover { color: var(--ivt-green-300); }

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--ivt-z-header);
  background: var(--ivt-white);
  border-bottom: 1px solid var(--ivt-line);
  transition: box-shadow var(--ivt-dur) var(--ivt-ease), background var(--ivt-dur) var(--ivt-ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(6,15,27,0.10); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s5);
  min-height: var(--ivt-header-h);
}

/* Wordmark placeholder — swap for client logo */
.site-logo { display: inline-flex; align-items: center; gap: var(--ivt-s3); text-decoration: none; }

/* An uploaded logo is an unknown size. Constrain it by height and let the
   width follow, so a tall or huge file cannot blow the header apart. */
.site-logo__img {
  display: block;
  height: auto;
  max-height: 3.25rem;
  width: auto;
  max-width: 15rem;
}
@media (max-width: 640px) {
  .site-logo__img { max-height: 2.5rem; max-width: 11rem; }
}
.site-footer .site-logo__img { max-height: 3rem; }
.site-logo__mark {
  display: grid;
  place-items: center;
  width: 2.625rem; height: 2.625rem;
  border-radius: var(--ivt-r-md);
  background: linear-gradient(140deg, var(--ivt-green-500), var(--ivt-green-800));
  color: #fff;
  font-family: var(--ivt-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.site-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.site-logo__name {
  font-family: var(--ivt-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--ivt-navy-900);
}
.site-logo__tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-green-700);
  margin-top: 3px;
}

/* The footer repeats the wordmark on a dark ground, so it needs the
   original light treatment rather than the header's navy. */
.site-footer .site-logo__name { color: #fff; }
.site-footer .site-logo__tag { color: var(--ivt-green-300); }

/* --- Desktop nav ------------------------------------------------------- */
.desktop-nav { display: none; align-items: center; gap: var(--ivt-s1); }
@media (min-width: 1080px) { .desktop-nav { display: flex; } }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s1);
  padding: var(--ivt-s3) var(--ivt-s4);
  border-radius: var(--ivt-r-sm);
  font-size: var(--ivt-fs-body);
  font-weight: 500;
  color: var(--ivt-slate-700);
  text-decoration: none;
  transition: color var(--ivt-dur) var(--ivt-ease), background var(--ivt-dur) var(--ivt-ease);
}
/* Same behaviour as the dark bar had, re-pitched for a white ground.
   Green stays the accent; only the base colour changes, because the old
   white-on-hover would be invisible here. */
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ivt-green-700); background: var(--ivt-green-050); }
.nav-link.is-active { color: var(--ivt-green-800); font-weight: 600; }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: var(--ivt-s4); right: var(--ivt-s4);
  height: 3px;
  background: var(--ivt-green-600);
  border-radius: 2px;
}
.nav-link.is-active { position: relative; }
.nav-chevron { transition: transform var(--ivt-dur) var(--ivt-ease); opacity: 0.7; }
.nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--ivt-s3); }
/* The phone number lives in the utility bar now, not here. */

/* Larger header CTA to match the taller bar. */
.header-cta {
  padding: 0.9375rem var(--ivt-s8);
  font-size: var(--ivt-fs-body);
  border-radius: var(--ivt-r-md);
}

/* --- Mega menu --------------------------------------------------------- */
.has-mega { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  z-index: var(--ivt-z-mega);
  width: min(72rem, calc(100vw - 3rem));
  background: var(--ivt-white);
  /* Stronger edge than before: a white panel dropping from a white bar
     needs a defined border or the two merge into one another. */
  border: 1px solid var(--ivt-line-strong);
  border-radius: var(--ivt-r-xl);
  box-shadow: var(--ivt-shadow-xl);
  padding: var(--ivt-s6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur) var(--ivt-ease),
              visibility var(--ivt-dur);
}
.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }

.mega__grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--ivt-s8); }
.mega__label {
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-slate-500);
  margin-bottom: var(--ivt-s4);
}
.mega__items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ivt-s1); }
.mega__item {
  display: flex;
  align-items: center;
  gap: var(--ivt-s3);
  padding: var(--ivt-s3);
  border-radius: var(--ivt-r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--ivt-dur-fast) var(--ivt-ease);
}
.mega__item:hover { background: var(--ivt-green-050); color: inherit; }
.mega__item-icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
  flex-shrink: 0;
}
.mega__item:hover .mega__item-icon { background: var(--ivt-green-100); }
.mega__item-name { display: block; font-size: var(--ivt-fs-sm); font-weight: 600; color: var(--ivt-navy-900); }
.mega__item-meta { display: block; font-size: var(--ivt-fs-2xs); color: var(--ivt-text-muted); margin-top: 1px; }

.mega__panel {
  background: var(--ivt-navy-900);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  color: var(--ivt-text-on-dark);
}
.mega__panel .mega__label { color: var(--ivt-green-300); }
.mega__panel-title { font-size: var(--ivt-fs-h4); color: #fff; margin-bottom: var(--ivt-s2); }
.mega__panel-sub { font-size: var(--ivt-fs-xs); color: var(--ivt-text-on-dark-muted); margin-bottom: var(--ivt-s5); }
.mega__features { display: grid; gap: var(--ivt-s2); margin-bottom: var(--ivt-s5); }
.mega__features li {
  display: flex; align-items: center; gap: var(--ivt-s2);
  font-size: var(--ivt-fs-xs);
  color: var(--ivt-text-on-dark);
}
.mega__features svg { color: var(--ivt-green-400); flex-shrink: 0; }

/* --- Mobile drawer ----------------------------------------------------- */
.hamburger {
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem;
  border-radius: var(--ivt-r-md);
  color: var(--ivt-navy-900);
  background: var(--ivt-paper);
  border: 1px solid var(--ivt-line);
  transition: background var(--ivt-dur) var(--ivt-ease), border-color var(--ivt-dur) var(--ivt-ease);
}
.hamburger:hover { background: var(--ivt-green-050); border-color: var(--ivt-green-300); }
@media (min-width: 1080px) { .hamburger { display: none; } }

/* The drawer stays dark navy, so its close button keeps the light treatment. */
.mobile-nav .hamburger {
  color: #fff;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
.mobile-nav .hamburger:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }

/*
 * Closed, this sits a full drawer-width past the right edge. That is the
 * classic cause of phantom horizontal scroll: a `position: fixed` element
 * parked off-screen widens the layout viewport on mobile.
 *
 * Three things keep it honest:
 *   - root clipping (see html, body above) stops it creating scroll at all
 *   - `visibility: hidden` takes it out of the tab order while closed, so
 *     keyboard users cannot land in a menu they cannot see
 *   - the width uses 88% of the containing block, not 88vw, so it can never
 *     measure wider than the space it actually sits in
 */
.mobile-nav {
  /*
   * Not rendered at all until it is opened.
   *
   * Previously this sat permanently at translateX(100%) — a 368px box parked
   * past the right edge on every single page load. Clipping hides it, but a
   * clipped box is still a box, and mobile Safari will widen the layout
   * viewport to enclose it. `display: none` gives it no layout box at all,
   * so there is nothing to enclose and nothing to clip. JS adds .is-mounted
   * one frame before .is-open so the slide-in still animates.
   */
  display: none;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--ivt-z-drawer);
  width: min(23rem, 88%);
  max-width: 100%;
  background: var(--ivt-navy-900);
  border-left: 1px solid rgba(255,255,255,0.1);
  transform: translateX(100%);
  visibility: hidden;
  /*
   * `visibility` is switched instantly (0s), never interpolated. Giving it a
   * duration makes it an animated property, and an element that is still
   * `visibility: hidden` at the start of the transition does not reliably
   * begin its transform animation — the drawer then fails to appear until
   * something forces a repaint. Closing delays the switch until the slide
   * has finished so the drawer does not vanish mid-animation.
   */
  transition:
    transform var(--ivt-dur-slow) var(--ivt-ease-out),
    visibility 0s linear var(--ivt-dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ivt-s5) var(--ivt-s5) var(--ivt-s16);
}
/* Mounted = in the DOM flow and able to animate, but still slid off-screen. */
.mobile-nav.is-mounted { display: block; }

.mobile-nav.is-open {
  transform: none;
  visibility: visible;
  transition:
    transform var(--ivt-dur-slow) var(--ivt-ease-out),
    visibility 0s linear 0s;
}

.mobile-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ivt-z-drawer) - 1);
  background: rgba(6,15,27,0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ivt-dur) var(--ivt-ease), visibility var(--ivt-dur);
}
.mobile-nav__backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ivt-s6);
}
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--ivt-s4) var(--ivt-s2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--ivt-fs-body);
  font-weight: 500;
  color: var(--ivt-text-on-dark);
  text-decoration: none;
  text-align: left;
}
.mobile-nav__link:hover { color: #fff; }
.mobile-nav__sub { display: none; padding: var(--ivt-s2) 0 var(--ivt-s3) var(--ivt-s4); }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub a {
  display: block;
  padding: var(--ivt-s2) 0;
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-text-on-dark-muted);
  text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--ivt-green-300); }
.mobile-nav__cta { margin-top: var(--ivt-s6); }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ivt-navy-950);
  color: var(--ivt-text-on-dark-muted);
  font-size: var(--ivt-fs-sm);
}

.footer-cta {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--ivt-s10);
}
.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s6);
}
.footer-cta__text { max-width: 34rem; }
.footer-cta__title { font-size: var(--ivt-fs-h3); color: #fff; margin-bottom: var(--ivt-s2); }

.footer-main { padding-block: var(--ivt-s16) var(--ivt-s10); }
.footer-grid {
  display: grid;
  gap: var(--ivt-s10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--ivt-s8); }
}

.footer-brand__tagline { margin-block: var(--ivt-s5); line-height: var(--ivt-lh-relaxed); max-width: 24rem; }
.footer-col__heading {
  font-family: var(--ivt-font-body);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--ivt-s5);
}
.footer-links { display: grid; gap: var(--ivt-s3); }
.footer-links a {
  color: var(--ivt-text-on-dark-muted);
  text-decoration: none;
  transition: color var(--ivt-dur) var(--ivt-ease), padding-left var(--ivt-dur) var(--ivt-ease);
  font-size: var(--ivt-fs-sm);
}
.footer-links a:hover { color: var(--ivt-green-300); padding-left: 4px; }

.footer-contact { display: grid; gap: var(--ivt-s3); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--ivt-s3); }
.footer-contact svg { color: var(--ivt-green-400); margin-top: 3px; flex-shrink: 0; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: #fff; }

.footer-depots { display: grid; gap: var(--ivt-s4); }
.footer-depot { display: flex; gap: var(--ivt-s3); }
.footer-depot svg { color: var(--ivt-green-400); margin-top: 3px; flex-shrink: 0; }
.footer-depot__city { font-weight: 600; color: #fff; font-size: var(--ivt-fs-sm); }
.footer-depot__addr { font-size: var(--ivt-fs-xs); line-height: 1.5; margin-top: 2px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--ivt-s6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s4);
  font-size: var(--ivt-fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ivt-s4); }
.footer-legal a { color: var(--ivt-text-on-dark-muted); text-decoration: none; }
.footer-legal a:hover { color: #fff; }


/* ==========================================================================
   11. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ivt-navy-900);
  color: var(--ivt-text-on-dark);
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  /* Held back so the headline and quote card stay legible over it. */
  opacity: 0.30;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(28,135,97,0.30) 0%, transparent 58%),
    linear-gradient(180deg, rgba(10,23,37,0.55) 0%, rgba(10,23,37,0.88) 70%, var(--ivt-navy-900) 100%);
}
/* With no hero photograph present the scrim alone must still carry the
   section, so give it a deeper base rather than a washed-out navy. */
.hero:not(:has(.hero__bg)) .hero__scrim {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(28,135,97,0.26) 0%, transparent 60%),
    radial-gradient(90% 70% at 12% 90%, rgba(20,107,78,0.18) 0%, transparent 55%),
    linear-gradient(165deg, var(--ivt-navy-800) 0%, var(--ivt-navy-950) 100%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: var(--ivt-s10); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--ivt-s16); }
}

.hero__title {
  font-size: var(--ivt-fs-h1);
  color: #fff;
  margin-block: var(--ivt-s5) var(--ivt-s5);
  max-width: 15ch;
}
.hero__lead { max-width: 44ch; color: rgba(232,239,235,0.78); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--ivt-s3); margin-top: var(--ivt-s8); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivt-s3) var(--ivt-s6);
  margin-top: var(--ivt-s10);
  padding-top: var(--ivt-s6);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__trust li {
  display: flex; align-items: center; gap: var(--ivt-s2);
  font-size: var(--ivt-fs-xs);
  color: rgba(232,239,235,0.82);
}
.hero__trust svg { color: var(--ivt-green-400); flex-shrink: 0; }

/* --- Stats strip ------------------------------------------------------- */
.stats {
  background: var(--ivt-navy-950);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: var(--ivt-s10);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ivt-s8) var(--ivt-s4);
}
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { text-align: center; position: relative; }
@media (min-width: 860px) {
  .stat + .stat::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    translate: 0 -50%;
    width: 1px; height: 2.75rem;
    background: rgba(255,255,255,0.12);
  }
}
.stat__num {
  font-family: var(--ivt-font-display);
  font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  font-weight: 800;
  letter-spacing: var(--ivt-tracking-tight);
  color: var(--ivt-green-300);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__label {
  font-size: var(--ivt-fs-xs);
  color: var(--ivt-text-on-dark-muted);
  margin-top: var(--ivt-s2);
}

/* --- Vehicle category system ------------------------------------------- */
.cats__tabs {
  display: flex;
  gap: var(--ivt-s2);
  overflow-x: auto;
  /* Same reason as .table-wrap: an unpositioned scroller does not clip
     absolutely-positioned descendants, so they escape and widen the page. */
  position: relative;
  padding-bottom: var(--ivt-s3);
  margin-bottom: var(--ivt-s8);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cats__tab {
  flex-shrink: 0;
  padding: var(--ivt-s3) var(--ivt-s5);
  border-radius: var(--ivt-r-pill);
  border: 1px solid var(--ivt-line);
  background: var(--ivt-white);
  font-size: var(--ivt-fs-sm);
  font-weight: 600;
  color: var(--ivt-slate-600);
  white-space: nowrap;
  transition: all var(--ivt-dur) var(--ivt-ease);
}
.cats__tab:hover { border-color: var(--ivt-green-300); color: var(--ivt-green-700); }
.cats__tab[aria-selected="true"] {
  background: var(--ivt-green-700);
  border-color: var(--ivt-green-700);
  color: #fff;
}

.cats__panel { display: none; }
.cats__panel.is-active { display: block; }

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ivt-dur) var(--ivt-ease),
              box-shadow var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur) var(--ivt-ease);
}
.cat-card:hover {
  border-color: var(--ivt-green-300);
  box-shadow: var(--ivt-shadow-lg);
  transform: translateY(-3px);
  color: inherit;
}
.cat-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, var(--ivt-green-050), var(--ivt-mist));
  display: grid;
  place-items: center;
  color: var(--ivt-green-600);
  border-bottom: 1px solid var(--ivt-line);
}
.cat-card__body { padding: var(--ivt-s5); flex: 1; display: flex; flex-direction: column; }
.cat-card__title { font-size: var(--ivt-fs-h4); margin-bottom: var(--ivt-s2); }
.cat-card__desc { font-size: var(--ivt-fs-xs); color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); flex: 1; }
.cat-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--ivt-s5);
  padding-top: var(--ivt-s4);
  border-top: 1px solid var(--ivt-line);
  font-size: var(--ivt-fs-2xs);
}
.cat-card__price { font-weight: 600; color: var(--ivt-navy-900); }

/* --- Service accordion (split pattern) --------------------------------- */
.svc-list { border-top: 1px solid var(--ivt-line); }
.svc-item { border-bottom: 1px solid var(--ivt-line); }
.svc-item__btn {
  display: flex;
  align-items: center;
  gap: var(--ivt-s4);
  width: 100%;
  padding: var(--ivt-s5) var(--ivt-s2);
  text-align: left;
  transition: background var(--ivt-dur-fast) var(--ivt-ease);
}
.svc-item__btn:hover { background: var(--ivt-green-050); }
.svc-item.is-open .svc-item__btn { background: var(--ivt-green-050); }
.svc-item__icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--ivt-r-md);
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  color: var(--ivt-green-700);
  flex-shrink: 0;
}
.svc-item.is-open .svc-item__icon { background: var(--ivt-green-700); border-color: var(--ivt-green-700); color: #fff; }
.svc-item__title { flex: 1; font-size: var(--ivt-fs-h4); font-family: var(--ivt-font-display); font-weight: 600; color: var(--ivt-navy-900); }
.svc-item__chev { color: var(--ivt-slate-400); transition: transform var(--ivt-dur) var(--ivt-ease); }
.svc-item.is-open .svc-item__chev { transform: rotate(180deg); color: var(--ivt-green-700); }
.svc-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ivt-dur-slow) var(--ivt-ease-out);
}
.svc-item.is-open .svc-item__panel { grid-template-rows: 1fr; }
.svc-item__panel > div { overflow: hidden; }
.svc-item__body {
  padding: 0 var(--ivt-s2) var(--ivt-s6) calc(2.5rem + var(--ivt-s4) + var(--ivt-s2));
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-relaxed);
}

/* --- Process timeline --------------------------------------------------- */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ivt-s5);
  padding-bottom: var(--ivt-s8);
  position: relative;
}
.step:last-child { padding-bottom: 0; }
.step__marker {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--ivt-white);
  border: 1.5px solid var(--ivt-green-300);
  color: var(--ivt-green-700);
  font-family: var(--ivt-font-display);
  font-weight: 700;
  font-size: var(--ivt-fs-sm);
  flex-shrink: 0;
  z-index: 1;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 2.25rem;
  bottom: var(--ivt-s2);
  width: 1.5px;
  background: linear-gradient(180deg, var(--ivt-green-200), var(--ivt-line));
}
.step__title {
  display: flex; align-items: center; gap: var(--ivt-s2);
  font-size: var(--ivt-fs-h4);
  margin-bottom: var(--ivt-s2);
}
.step__title svg { color: var(--ivt-green-600); }
.step__body { font-size: var(--ivt-fs-sm); color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); }
.step__note {
  display: inline-flex; align-items: center; gap: var(--ivt-s2);
  margin-top: var(--ivt-s3);
  padding: var(--ivt-s2) var(--ivt-s3);
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-green-050);
  border: 1px solid var(--ivt-green-100);
  font-size: var(--ivt-fs-2xs);
  font-weight: 500;
  color: var(--ivt-green-800);
}

/* --- Owned-fleet differentiator ---------------------------------------- */
.compare {
  display: grid;
  gap: var(--ivt-s5);
  margin-top: var(--ivt-s8);
}
@media (min-width: 760px) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.compare__col {
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  border: 1px solid;
}
.compare__col--them {
  background: var(--ivt-paper);
  border-color: var(--ivt-line);
}
.compare__col--us {
  background: var(--ivt-green-950);
  border-color: var(--ivt-green-700);
  color: var(--ivt-text-on-dark);
}
.compare__head {
  display: flex; align-items: center; gap: var(--ivt-s3);
  padding-bottom: var(--ivt-s4);
  margin-bottom: var(--ivt-s4);
  border-bottom: 1px solid var(--ivt-line);
  font-family: var(--ivt-font-display);
  font-weight: 700;
  font-size: var(--ivt-fs-h4);
  color: var(--ivt-navy-900);
}
.compare__col--us .compare__head { border-color: rgba(255,255,255,0.16); color: #fff; }
.compare__list { display: grid; gap: var(--ivt-s3); }
.compare__list li {
  display: flex; align-items: flex-start; gap: var(--ivt-s3);
  font-size: var(--ivt-fs-sm);
  line-height: var(--ivt-lh-normal);
  color: var(--ivt-slate-600);
}
.compare__col--us .compare__list li { color: var(--ivt-text-on-dark); }
.compare__list svg { margin-top: 3px; flex-shrink: 0; }
.compare__col--them svg { color: var(--ivt-slate-400); }
.compare__col--us svg { color: var(--ivt-green-400); }

/* --- Testimonials ------------------------------------------------------ */
.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s4);
  padding: var(--ivt-s4) var(--ivt-s5);
  border-radius: var(--ivt-r-lg);
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
}
.rating-summary__score {
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-h2);
  font-weight: 800;
  line-height: 1;
  color: var(--ivt-navy-900);
}
.stars { display: inline-flex; gap: 2px; color: var(--ivt-gold-500); }

.tmt-card { display: flex; flex-direction: column; height: 100%; }
.tmt-card__quote {
  font-size: var(--ivt-fs-sm);
  line-height: var(--ivt-lh-relaxed);
  color: var(--ivt-slate-700);
  flex: 1;
}
.tmt-card__foot {
  display: flex; align-items: center; gap: var(--ivt-s3);
  margin-top: var(--ivt-s5);
  padding-top: var(--ivt-s4);
  border-top: 1px solid var(--ivt-line);
}
.tmt-card__avatar {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--ivt-green-100);
  color: var(--ivt-green-800);
  font-weight: 700;
  font-size: var(--ivt-fs-xs);
  flex-shrink: 0;
}
.tmt-card__name { font-size: var(--ivt-fs-sm); font-weight: 600; color: var(--ivt-navy-900); }
.tmt-card__meta { font-size: var(--ivt-fs-2xs); color: var(--ivt-text-muted); }

/* --- Network status feed ----------------------------------------------- */
.updates { display: grid; gap: var(--ivt-s4); }
@media (min-width: 760px) { .updates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.update {
  display: flex;
  gap: var(--ivt-s4);
  padding: var(--ivt-s5);
  border-radius: var(--ivt-r-lg);
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  transition: border-color var(--ivt-dur) var(--ivt-ease);
}
.update:hover { border-color: var(--ivt-green-300); }
.update__icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--ivt-r-sm);
  flex-shrink: 0;
}
.update__icon--info    { background: var(--ivt-green-050); color: var(--ivt-green-700); }
.update__icon--warn    { background: #FDF3E3; color: var(--ivt-warning); }
.update__icon--alert   { background: #FBEDEC; color: var(--ivt-danger); }
.update__title { font-size: var(--ivt-fs-sm); font-weight: 600; color: var(--ivt-navy-900); margin-bottom: var(--ivt-s1); }
.update__body { font-size: var(--ivt-fs-xs); color: var(--ivt-slate-600); line-height: var(--ivt-lh-normal); }
.update__date { font-size: var(--ivt-fs-2xs); color: var(--ivt-slate-400); margin-top: var(--ivt-s2); display: block; }

/* --- Big CTA card ------------------------------------------------------- */
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivt-r-2xl);
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(28,135,97,0.34) 0%, transparent 55%),
    linear-gradient(135deg, var(--ivt-navy-900), var(--ivt-navy-950));
  color: var(--ivt-text-on-dark);
  padding: clamp(2rem, 1.2rem + 3.5vw, 3.5rem);
}
.cta-card__grid { display: grid; gap: var(--ivt-s10); align-items: center; }
@media (min-width: 900px) { .cta-card__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--ivt-s16); } }
.cta-card__title { font-size: var(--ivt-fs-h2); color: #fff; margin-block: var(--ivt-s4) var(--ivt-s4); }
.cta-card__lead { color: var(--ivt-text-on-dark-muted); max-width: 44ch; }
.cta-card__ctas { display: flex; flex-wrap: wrap; gap: var(--ivt-s3); margin-top: var(--ivt-s8); }
.cta-card__panel {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  backdrop-filter: blur(8px);
}
.cta-card__panel-label {
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-green-300);
  margin-bottom: var(--ivt-s4);
}
.cta-card__contact { display: grid; gap: var(--ivt-s4); }
.cta-card__contact li { display: flex; gap: var(--ivt-s3); align-items: flex-start; }
.cta-card__contact svg { color: var(--ivt-green-400); margin-top: 3px; flex-shrink: 0; }
.cta-card__contact a { color: #fff; text-decoration: none; font-weight: 600; }
.cta-card__contact span { display: block; font-size: var(--ivt-fs-2xs); color: var(--ivt-text-on-dark-muted); margin-top: 1px; }


/* ==========================================================================
   12. COVERAGE MAP
   ========================================================================== */

.covmap { display: grid; gap: var(--ivt-s8); }
@media (min-width: 960px) {
  .covmap { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--ivt-s10); align-items: start; }
}

.covmap__stage {
  position: relative;
  border-radius: var(--ivt-r-xl);
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  padding: var(--ivt-s5);
  overflow: hidden;
}
.covmap__svg { width: 100%; height: auto; display: block; }
.covmap__land {
  fill: var(--ivt-mist);
  stroke: var(--ivt-line-strong);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill var(--ivt-dur) var(--ivt-ease);
}

.covmap__pin { cursor: pointer; }
.covmap__pin-hit { fill: transparent; }
.covmap__pin-dot {
  fill: var(--ivt-navy-700);
  stroke: var(--ivt-white);
  stroke-width: 2;
  transition: fill var(--ivt-dur) var(--ivt-ease), r var(--ivt-dur) var(--ivt-ease);
}
.covmap__pin:hover .covmap__pin-dot { fill: var(--ivt-green-500); }
.covmap__pin.is-active .covmap__pin-dot { fill: var(--ivt-green-600); r: 8; }
.covmap__pin.is-active .covmap__pin-ring { opacity: 1; }
.covmap__pin-ring {
  fill: none;
  stroke: var(--ivt-green-400);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--ivt-dur) var(--ivt-ease);
}
.covmap__pin-label {
  font-family: var(--ivt-font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ivt-slate-600);
  pointer-events: none;
  transition: fill var(--ivt-dur) var(--ivt-ease);
}
.covmap__pin.is-active .covmap__pin-label { fill: var(--ivt-green-800); }
.covmap__link {
  stroke: var(--ivt-green-400);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
  opacity: 0;
  transition: opacity var(--ivt-dur) var(--ivt-ease);
}
.covmap__link.is-visible { opacity: 0.75; }

.covmap__panel {
  background: var(--ivt-navy-900);
  border-radius: var(--ivt-r-xl);
  padding: var(--ivt-s6);
  color: var(--ivt-text-on-dark);
}
.covmap__panel-head {
  padding-bottom: var(--ivt-s4);
  margin-bottom: var(--ivt-s4);
  border-bottom: 1px solid rgba(255,255,255,0.13);
}
.covmap__panel-city { font-size: var(--ivt-fs-h3); color: #fff; }
.covmap__panel-sub { font-size: var(--ivt-fs-2xs); color: var(--ivt-text-on-dark-muted); margin-top: var(--ivt-s1); }
.covmap__routes { display: grid; gap: var(--ivt-s1); }
.covmap__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s4);
  padding: var(--ivt-s3);
  border-radius: var(--ivt-r-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--ivt-dur-fast) var(--ivt-ease);
}
.covmap__route:hover { background: rgba(255,255,255,0.07); color: inherit; }
.covmap__route-city { font-size: var(--ivt-fs-sm); font-weight: 500; color: var(--ivt-text-on-dark); }
.covmap__route-days { font-size: var(--ivt-fs-2xs); color: var(--ivt-text-on-dark-muted); margin-top: 1px; }
.covmap__route-price {
  font-size: var(--ivt-fs-sm);
  font-weight: 700;
  color: var(--ivt-green-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.covmap__route-price--quote { font-size: var(--ivt-fs-2xs); font-weight: 600; color: var(--ivt-text-on-dark-muted); }
.covmap__panel-foot { margin-top: var(--ivt-s5); padding-top: var(--ivt-s4); border-top: 1px solid rgba(255,255,255,0.13); }
.covmap__disclaimer { font-size: var(--ivt-fs-2xs); color: var(--ivt-slate-500); margin-top: var(--ivt-s4); line-height: 1.5; }


/* ==========================================================================
   12b. BREADCRUMB & FLOATING CONTROLS
   ========================================================================== */

.breadcrumb { margin-bottom: var(--ivt-s5); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ivt-s2);
  font-size: var(--ivt-fs-xs);
}
.breadcrumb__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--ivt-s2);
  color: var(--ivt-text-muted);
  text-decoration: none;
}
.breadcrumb__list a:hover { color: var(--ivt-green-700); }
.breadcrumb__list [aria-current="page"] { color: var(--ivt-navy-900); font-weight: 600; }
.bc__sep { color: var(--ivt-slate-400); }

/* On dark page heroes */
.page-hero .breadcrumb__list a { color: rgba(232,239,235,0.7); }
.page-hero .breadcrumb__list a:hover { color: var(--ivt-green-300); }
.page-hero .breadcrumb__list [aria-current="page"] { color: #fff; }

.scroll-top {
  position: fixed;
  /* Clear the notch/home-indicator insets on phones, and sit above the
     floating WhatsApp button rather than on top of it. */
  right: max(var(--ivt-s5), env(safe-area-inset-right));
  bottom: calc(max(var(--ivt-s5), env(safe-area-inset-bottom)) + 4.5rem);
  z-index: var(--ivt-z-float);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ivt-green-700);
  color: #fff;
  box-shadow: var(--ivt-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur) var(--ivt-ease),
              visibility var(--ivt-dur),
              background var(--ivt-dur) var(--ivt-ease);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--ivt-green-800); }


/* ==========================================================================
   12c. PAGE HEROES, LISTINGS, QUOTE PAGE, 404
   ========================================================================== */

/* --- Inner page hero ---------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--ivt-navy-900);
  color: var(--ivt-text-on-dark);
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 82% 0%, rgba(28,135,97,0.26) 0%, transparent 58%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { font-size: var(--ivt-fs-h1); color: #fff; margin-top: var(--ivt-s3); max-width: 20ch; }
.page-hero__lead { max-width: 56ch; color: rgba(232,239,235,0.78); margin-top: var(--ivt-s5); }
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivt-s3);
  margin-top: var(--ivt-s6);
}

/* Route hero from/to display */
.route-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ivt-s5);
  margin-top: var(--ivt-s4);
}
.route-hero__city { display: flex; flex-direction: column; }
.route-hero__dir {
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-green-300);
}
.route-hero__name {
  font-family: var(--ivt-font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--ivt-tracking-tight);
  color: #fff;
  line-height: 1.1;
}
.route-hero__link {
  display: flex;
  align-items: center;
  gap: var(--ivt-s3);
  flex: 1 1 6rem;
  min-width: 4rem;
  color: var(--ivt-green-300);
}
.route-hero__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ivt-green-400), rgba(43,164,120,0.25));
}

/* --- Listing cards ------------------------------------------------------ */
.listing { display: grid; gap: var(--ivt-s5); }
@media (min-width: 700px)  { .listing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .listing--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.listing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ivt-dur) var(--ivt-ease),
              box-shadow var(--ivt-dur) var(--ivt-ease),
              transform var(--ivt-dur) var(--ivt-ease);
}
.listing-card:hover {
  border-color: var(--ivt-green-300);
  box-shadow: var(--ivt-shadow-lg);
  transform: translateY(-2px);
  color: inherit;
}
.listing-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ivt-s2);
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-green-600);
  margin-bottom: var(--ivt-s3);
}
.listing-card__title { font-size: var(--ivt-fs-h4); margin-bottom: var(--ivt-s2); }
.listing-card__body { font-size: var(--ivt-fs-sm); color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); flex: 1; }
.listing-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s3);
  margin-top: var(--ivt-s5);
  padding-top: var(--ivt-s4);
  border-top: 1px solid var(--ivt-line);
  font-size: var(--ivt-fs-2xs);
  color: var(--ivt-text-muted);
}
.listing-card__stats { display: flex; flex-wrap: wrap; gap: var(--ivt-s4); }
.listing-card__stat { display: inline-flex; align-items: center; gap: var(--ivt-s2); }
.listing-card__stat svg { color: var(--ivt-green-600); }
.listing-card__price { font-weight: 700; color: var(--ivt-navy-900); font-variant-numeric: tabular-nums; }

/* --- Fact grid (route/service key numbers) ------------------------------ */
.facts {
  display: grid;
  gap: var(--ivt-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.fact {
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s5);
}
.fact__icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
  margin-bottom: var(--ivt-s4);
}
.fact__label {
  font-size: var(--ivt-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ivt-tracking-caps);
  text-transform: uppercase;
  color: var(--ivt-slate-500);
}
.fact__value {
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-h3);
  font-weight: 700;
  color: var(--ivt-navy-900);
  margin-top: var(--ivt-s1);
  font-variant-numeric: tabular-nums;
}
.fact__note { font-size: var(--ivt-fs-2xs); color: var(--ivt-text-muted); margin-top: var(--ivt-s1); }

/* --- Checklist ---------------------------------------------------------- */
.check-list { display: grid; gap: var(--ivt-s3); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s3);
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-normal);
}
.check-list svg { color: var(--ivt-green-600); margin-top: 3px; flex-shrink: 0; }

/* --- FAQ accordion ------------------------------------------------------ */
.faq-list { border-top: 1px solid var(--ivt-line); }
.faq-item { border-bottom: 1px solid var(--ivt-line); }
.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s4);
  width: 100%;
  padding: var(--ivt-s5) var(--ivt-s2);
  text-align: left;
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-h4);
  font-weight: 600;
  color: var(--ivt-navy-900);
  transition: color var(--ivt-dur-fast) var(--ivt-ease);
}
.faq-item__btn:hover { color: var(--ivt-green-700); }
.faq-item__chev { color: var(--ivt-slate-400); transition: transform var(--ivt-dur) var(--ivt-ease); flex-shrink: 0; }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); color: var(--ivt-green-700); }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ivt-dur-slow) var(--ivt-ease-out);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; }
.faq-item__body {
  padding: 0 var(--ivt-s2) var(--ivt-s6);
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-relaxed);
  max-width: 68ch;
}

/* --- Quote page --------------------------------------------------------- */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ivt-s8); }
@media (min-width: 940px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--ivt-s10); align-items: start; }
}
/* The form is the point of the page, so it is given real presence:
   an accent bar, lift off the background, and generous internal space. */
.form-card {
  position: relative;
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-xl);
  padding: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  box-shadow: var(--ivt-shadow-lg);
  overflow: hidden;
}
.form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ivt-green-700), var(--ivt-green-400));
}

.form-card__head {
  padding-bottom: var(--ivt-s6);
  margin-bottom: var(--ivt-s8);
  border-bottom: 1px solid var(--ivt-line);
}
.form-card__head .form-card__title { margin-bottom: var(--ivt-s2); }
.form-card__sub {
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-relaxed);
  max-width: 52ch;
}
.form-card__title {
  font-size: var(--ivt-fs-h3);
  margin-bottom: 0;
}

.form-placeholder {
  border: 1.5px dashed var(--ivt-line-strong);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s10) var(--ivt-s6);
  text-align: center;
  color: var(--ivt-text-muted);
  background: var(--ivt-paper);
}
.form-placeholder code {
  display: inline-block;
  margin-top: var(--ivt-s3);
  padding: var(--ivt-s2) var(--ivt-s3);
  background: var(--ivt-navy-900);
  color: var(--ivt-green-300);
  border-radius: var(--ivt-r-xs);
  font-family: var(--ivt-font-mono);
  font-size: var(--ivt-fs-2xs);
}
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset + .fieldset { margin-top: var(--ivt-s10); padding-top: var(--ivt-s10); border-top: 1px solid var(--ivt-line); }
.fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--ivt-s4);
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-h4);
  font-weight: 700;
  color: var(--ivt-navy-900);
  margin-bottom: var(--ivt-s8);
  width: 100%;
}
.fieldset__num {
  display: grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--ivt-green-700);
  color: #fff;
  font-family: var(--ivt-font-display);
  font-size: var(--ivt-fs-sm);
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--ivt-green-050);
}
.field-row { display: grid; gap: var(--ivt-s6); }
.field-row + .field-row { margin-top: var(--ivt-s6); }
.field-row .field + .field { margin-top: 0; }
@media (min-width: 560px) { .field-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 760px) { .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 759px) { .field-row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.sidebar-card {
  background: var(--ivt-white);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s5);
}
.sidebar-card + .sidebar-card { margin-top: var(--ivt-s4); }
.sidebar-card--dark { background: var(--ivt-navy-900); border-color: rgba(255,255,255,0.1); color: var(--ivt-text-on-dark); }
.sidebar-card--dark h2, .sidebar-card--dark h3 { color: #fff; }
.sidebar-card__head { display: flex; align-items: center; gap: var(--ivt-s3); margin-bottom: var(--ivt-s3); }
.sidebar-card__icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
  flex-shrink: 0;
}
.sidebar-card--dark .sidebar-card__icon { background: rgba(43,164,120,0.16); color: var(--ivt-green-300); }
.sidebar-card__title { font-size: var(--ivt-fs-h4); }
.sidebar-card__body { font-size: var(--ivt-fs-sm); color: var(--ivt-slate-600); line-height: var(--ivt-lh-relaxed); }
.sidebar-card--dark .sidebar-card__body { color: var(--ivt-text-on-dark-muted); }
.sidebar-list { display: grid; gap: var(--ivt-s3); }
.sidebar-list li {
  display: flex; align-items: flex-start; gap: var(--ivt-s3);
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-text-on-dark);
}
.sidebar-list svg { color: var(--ivt-green-400); margin-top: 3px; flex-shrink: 0; }

/* --- Pagination --------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--ivt-s2); justify-content: center; margin-top: var(--ivt-s12); }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--ivt-s3);
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-white);
  color: var(--ivt-slate-600);
  font-size: var(--ivt-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ivt-dur) var(--ivt-ease);
}
.pagination .page-numbers:hover { border-color: var(--ivt-green-300); color: var(--ivt-green-700); }
.pagination .page-numbers.current {
  background: var(--ivt-green-700);
  border-color: var(--ivt-green-700);
  color: #fff;
}

/* --- Empty state & 404 -------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--ivt-s16) var(--ivt-s5);
  border: 1.5px dashed var(--ivt-line-strong);
  border-radius: var(--ivt-r-xl);
  background: var(--ivt-paper);
}
.empty-state__icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto var(--ivt-s5);
  border-radius: 50%;
  background: var(--ivt-green-050);
  color: var(--ivt-green-700);
}
.error-code {
  font-family: var(--ivt-font-display);
  font-size: clamp(4rem, 2.5rem + 7vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ivt-tracking-tight);
  color: var(--ivt-green-100);
}


/* --- Dev-only broken-link flag ------------------------------------------ */
.ivt-devlink {
  outline: 2px dashed #D9534F !important;
  outline-offset: 2px;
  position: relative;
}
.ivt-devbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #2B1A1A;
  color: #FFD9D6;
  font-family: var(--ivt-font-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: var(--ivt-s3) var(--ivt-s5);
  max-height: 30vh;
  overflow-y: auto;
}
.ivt-devbar b { color: #FF9A93; }
.ivt-devbar button { color: #FFD9D6; float: right; font-weight: 700; }


/* ==========================================================================
   12d. FORM STATES
   ========================================================================== */

.field__req {
  font-size: var(--ivt-fs-2xs);
  font-weight: 500;
  color: var(--ivt-slate-400);
  text-transform: none;
  letter-spacing: 0;
}

/* Every field is required, so it is said once at the top rather than
   repeated ten times down the form. */
.form-allreq {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s3);
  padding: var(--ivt-s4) var(--ivt-s5);
  margin-bottom: var(--ivt-s8);
  border-radius: var(--ivt-r-md);
  background: var(--ivt-green-050);
  border: 1px solid var(--ivt-green-100);
  font-size: var(--ivt-fs-xs);
  color: var(--ivt-green-900);
  line-height: var(--ivt-lh-normal);
}
.form-allreq svg { color: var(--ivt-green-700); margin-top: 2px; flex-shrink: 0; }
.field--error .field__label { color: var(--ivt-danger); }
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: #F2CFCC;
  border-bottom-color: var(--ivt-danger);
  background: #FEFAFA;
}
.field--error .input:focus,
.field--error .select:focus,
.field--error .textarea:focus {
  border-bottom-color: var(--ivt-danger);
  box-shadow: 0 3px 10px rgba(180,52,44,0.10), 0 0 0 3px rgba(180,52,44,0.12);
}
.field--error:focus-within .field__label { color: var(--ivt-danger); }

/* Confirmed-good state. Quiet, but it tells someone working down a long
   form that the field behind them is done. */
.field--valid .input,
.field--valid .select,
.field--valid .textarea { border-bottom-color: var(--ivt-green-400); }
.field--valid .field__check {
  position: absolute;
  right: var(--ivt-s4);
  bottom: 0.9375rem;
  color: var(--ivt-green-600);
  opacity: 1;
  transform: scale(1);
}
.field__check {
  position: absolute;
  right: var(--ivt-s4);
  bottom: 0.9375rem;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity var(--ivt-dur) var(--ivt-ease), transform var(--ivt-dur) var(--ivt-ease-out);
}
.field--valid .select ~ .field__check { display: none; }

.field__error {
  display: flex;
  align-items: center;
  gap: var(--ivt-s2);
  margin-top: var(--ivt-s2);
  font-size: var(--ivt-fs-2xs);
  font-weight: 500;
  color: var(--ivt-danger);
}
.field__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s2);
  margin-top: var(--ivt-s3);
  font-size: var(--ivt-fs-2xs);
  color: var(--ivt-text-muted);
  line-height: 1.45;
}
.field__hint svg { margin-top: 2px; flex-shrink: 0; }

/* Honeypot: off-screen rather than display:none, which bots detect. */
.ivt-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Checkbox group — selectable rows rather than bare ticks, so the whole
   line is a target and the chosen ones are obvious at a glance. */
.checkgroup { border: 0; padding: 0; margin: 0; }
.checkgroup__items { display: grid; gap: var(--ivt-s2); margin-top: var(--ivt-s5); }
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ivt-s3);
  padding: var(--ivt-s4);
  border: 1.5px solid var(--ivt-line);
  border-radius: var(--ivt-r-md);
  background: var(--ivt-white);
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-normal);
  cursor: pointer;
  transition: border-color var(--ivt-dur) var(--ivt-ease),
              background var(--ivt-dur) var(--ivt-ease),
              color var(--ivt-dur) var(--ivt-ease);
}
.checkbox input {
  margin-top: 1px;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--ivt-green-700);
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox:hover { border-color: var(--ivt-green-300); background: var(--ivt-green-050); color: var(--ivt-navy-900); }
.checkbox:has(input:checked) {
  border-color: var(--ivt-green-600);
  background: var(--ivt-green-050);
  color: var(--ivt-navy-900);
  font-weight: 500;
}
.checkbox:has(input:focus-visible) { outline: 2px solid var(--ivt-green-500); outline-offset: 2px; }

/* Notices */
.form-notice {
  display: flex;
  gap: var(--ivt-s4);
  padding: var(--ivt-s5);
  border-radius: var(--ivt-r-lg);
  margin-bottom: var(--ivt-s8);
  font-size: var(--ivt-fs-sm);
}
.form-notice--error {
  background: #FCF2F1;
  border: 1px solid #F2CFCC;
  color: #7C241E;
}
.form-notice__icon { color: var(--ivt-danger); flex-shrink: 0; margin-top: 2px; }
.form-notice ul { margin-top: var(--ivt-s3); padding-left: var(--ivt-s5); display: grid; gap: var(--ivt-s1); }
.form-notice li { list-style: disc; }
.form-notice a { color: inherit; }
.form-notice:focus-visible { outline: 2px solid var(--ivt-danger); outline-offset: 3px; }

/* Success panel */
.form-result { text-align: center; padding: var(--ivt-s6) var(--ivt-s2); }
.form-result__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--ivt-s6);
  border-radius: 50%;
  background: var(--ivt-green-050);
  color: var(--ivt-green-600);
  border: 1px solid var(--ivt-green-100);
}
.form-result__title { font-size: var(--ivt-fs-h3); margin-bottom: var(--ivt-s4); }
.form-result__body {
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-relaxed);
  max-width: 46ch;
  margin-inline: auto;
}
.form-result__body + .form-result__body { margin-top: var(--ivt-s4); }
.form-result .cluster { justify-content: center; }

/* --- Confirmation modal ------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--ivt-s5);
}
.modal[hidden] { display: none; }

/* Scrim is deliberately light. The page behind stays readable, so the
   confirmation reads as an acknowledgement rather than a dead end. */
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 15, 27, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 300ms var(--ivt-ease);
  cursor: pointer;
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__dialog {
  position: relative;
  width: min(100%, 30rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ivt-white);
  border-radius: var(--ivt-r-2xl);
  box-shadow: 0 32px 80px rgba(6, 15, 27, 0.32), 0 8px 24px rgba(6, 15, 27, 0.14);
  padding: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  text-align: center;

  /* Enters from the bottom of the viewport and settles in the centre. */
  transform: translateY(min(48vh, 26rem)) scale(0.97);
  opacity: 0;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms var(--ivt-ease);
}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }

.modal__close {
  position: absolute;
  top: var(--ivt-s4);
  right: var(--ivt-s4);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--ivt-slate-500);
  background: var(--ivt-paper);
  border: 1px solid var(--ivt-line);
  transition: background var(--ivt-dur) var(--ivt-ease), color var(--ivt-dur) var(--ivt-ease);
}
.modal__close:hover { background: var(--ivt-mist); color: var(--ivt-navy-900); }

.modal__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto var(--ivt-s6);
  border-radius: 50%;
  background: var(--ivt-green-050);
  border: 1px solid var(--ivt-green-100);
  color: var(--ivt-green-600);
}
.modal__icon svg { animation: ivt-check-in 520ms var(--ivt-ease-out) 140ms both; }
@keyframes ivt-check-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.modal__title { font-size: var(--ivt-fs-h3); margin-bottom: var(--ivt-s4); }
.modal__body {
  font-size: var(--ivt-fs-sm);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-relaxed);
  max-width: 40ch;
  margin-inline: auto;
}
.modal__body + .modal__body { margin-top: var(--ivt-s3); }

.modal__actions { display: grid; gap: var(--ivt-s3); margin-top: var(--ivt-s8); }
.modal__foot {
  margin-top: var(--ivt-s5);
  padding-top: var(--ivt-s4);
  border-top: 1px solid var(--ivt-line);
  font-size: var(--ivt-fs-2xs);
  color: var(--ivt-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .modal__dialog { transform: none; transition: opacity 160ms linear; }
  .modal__icon svg { animation: none; }
}

/* Submitting state */
.btn.is-busy { pointer-events: none; opacity: 0.75; }
.btn.is-busy .btn__icon { display: none; }
.btn.is-busy::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: ivt-spin 0.7s linear infinite;
}
@keyframes ivt-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   12e. PAGE LOADER & SKELETON
   ========================================================================== */

.ivt-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ivt-bg);
  overflow: hidden;
  opacity: 1;
  transition: opacity 260ms var(--ivt-ease), visibility 260ms;
}
.ivt-loader[hidden] { display: none; }
.ivt-loader.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }

/* Progress hairline across the very top */
.ivt-loader__bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--ivt-mist);
  overflow: hidden;
}
.ivt-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ivt-green-600), var(--ivt-green-300));
  transform: translateX(-100%);
  animation: ivt-bar 1.4s var(--ivt-ease) infinite;
}
@keyframes ivt-bar {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Shared skeleton block */
.sk {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivt-r-sm);
  background: var(--ivt-mist);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  animation: ivt-shimmer 1.6s infinite;
}
@keyframes ivt-shimmer { 100% { transform: translateX(100%); } }

.sk--dark { background: rgba(255,255,255,0.09); }
.sk--dark::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }

/* Skeleton: header */
.sk-header {
  background: var(--ivt-white);
  padding: var(--ivt-s6) 0;
  border-bottom: 1px solid var(--ivt-line);
}
.sk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivt-s6);
  min-height: 2.75rem;
}
.sk-logo { display: flex; align-items: center; gap: var(--ivt-s3); }
.sk-nav { display: none; gap: var(--ivt-s3); }
@media (min-width: 1080px) { .sk-nav { display: flex; } }

/* Skeleton: hero */
.sk-hero {
  background: linear-gradient(165deg, var(--ivt-navy-800), var(--ivt-navy-950));
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
}
.sk-hero__grid { display: grid; gap: var(--ivt-s10); align-items: center; }
@media (min-width: 1000px) {
  .sk-hero__grid { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: var(--ivt-s16); }
}
.sk-card {
  background: var(--ivt-white);
  border-radius: var(--ivt-r-xl);
  padding: var(--ivt-s8);
  box-shadow: var(--ivt-shadow-xl);
}

/* Skeleton: content */
.sk-body { padding-block: var(--ivt-s16); }
.sk-grid {
  display: grid;
  gap: var(--ivt-s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: var(--ivt-s10);
}
.sk-tile {
  border: 1px solid var(--ivt-line);
  border-radius: var(--ivt-r-lg);
  padding: var(--ivt-s6);
}
.sk-stack > * + * { margin-top: var(--ivt-s3); }

/* Screen-reader announcement */
.ivt-loader__status {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sk::after, .ivt-loader__bar::after { animation: none; }
  .sk::after { opacity: 0; }
  .ivt-loader__bar::after { transform: translateX(0); opacity: 0.5; }
  .btn.is-busy::after { animation: none; }
}


/* ==========================================================================
   12f. PHOTOGRAPHY
   ========================================================================== */

.photo {
  margin: 0;
  border-radius: var(--ivt-r-lg);
  overflow: hidden;
  background: var(--ivt-mist);
  border: 1px solid var(--ivt-line);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.photo__caption {
  padding: var(--ivt-s4) var(--ivt-s5);
  background: var(--ivt-white);
  border-top: 1px solid var(--ivt-line);
  font-size: var(--ivt-fs-xs);
  color: var(--ivt-slate-600);
  line-height: var(--ivt-lh-normal);
}

/* Inline figure inside prose */
.prose .photo { margin-block: var(--ivt-s8); }

/* Wide banner variant — used where a full-width image reads better than a card */
.photo--wide img { aspect-ratio: 21 / 9; }
.photo--tall img { aspect-ratio: 3 / 4; }

/* Homepage fleet gallery: one lead image, two supporting */
.fleet-gallery {
  display: grid;
  gap: var(--ivt-s5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .fleet-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-gallery__lead { grid-column: 1 / -1; }
  .fleet-gallery__lead img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
  .fleet-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fleet-gallery__lead { grid-column: 1 / 3; grid-row: 1 / 3; }
  .fleet-gallery__lead img { aspect-ratio: 16 / 11; }
  .fleet-gallery__lead { display: flex; flex-direction: column; }
  .fleet-gallery__lead img { flex: 1; height: auto; }
}

/* Split section with an image on one side */
.photo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ivt-s8);
  align-items: center;
}
@media (min-width: 900px) {
  .photo-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ivt-s16); }
  .photo-split--reverse .photo-split__media { order: 2; }
}


/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.u-center      { text-align: center; }
.u-mt-0        { margin-top: 0 !important; }
.u-mt-4        { margin-top: var(--ivt-s4); }
.u-mt-6        { margin-top: var(--ivt-s6); }
.u-mt-8        { margin-top: var(--ivt-s8); }
.u-mt-10       { margin-top: var(--ivt-s10); }
.u-mb-0        { margin-bottom: 0 !important; }
.u-mx-auto     { margin-inline: auto; }
.u-full        { width: 100%; }
.u-nowrap      { white-space: nowrap; }
.u-tabular     { font-variant-numeric: tabular-nums; }
.u-hide        { display: none !important; }

@media (max-width: 767px)  { .u-hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .u-hide-desktop { display: none !important; } }


/* ==========================================================================
   14. MOTION
   ========================================================================== */

/* Scroll reveal — JS adds .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms var(--ivt-ease-out),
              transform 620ms var(--ivt-ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { will-change: auto; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}