/* =========================================================
   CSS Custom Properties — Airport Transfer Georgia
   ========================================================= */
:root {

  /* --- Brand colours --- */
  --color-navy:          #1E3A5F;   /* Primary: nav bg, hero bg, headings, primary buttons */
  --color-navy-dark:     #152D4A;   /* Darker navy: hover states on navy buttons */
  --color-navy-mid:      #2C3E5A;   /* Footer background */
  --color-navy-light:    #EEF2F7;   /* Light navy tint: card hover bg, subtle highlights */

  --color-amber:         #F5A623;   /* Accent: price display, active nav, section accents */
  --color-amber-dark:    #7A4E00;   /* Amber text on amber backgrounds (CTA strip) */
  --color-amber-light:   #FFF3DC;   /* Light amber: badge backgrounds */

  --color-whatsapp:      #25D366;   /* WhatsApp buttons only — never repurposed */
  --color-whatsapp-dark: #1DA851;   /* WhatsApp hover state */

  /* --- Neutral colours --- */
  --color-white:         #FFFFFF;
  --color-off-white:     #F8F9FA;   /* Alternating section background */
  --color-border:        #E2E8F0;   /* Card borders, table borders, dividers */

  /* --- Text colours --- */
  --color-text:          #2C2C2A;   /* Body text — warm near-black */
  --color-text-muted:    #6B7A8F;   /* Secondary text, captions, meta info */
  --color-text-white:    #FFFFFF;
  --color-text-white-muted: rgba(255,255,255,0.72);

  /* --- Semantic / functional --- */
  --color-hero-bg:       #1E3A5F;
  --color-cta-bg:        #F5A623;   /* CTA strip background = amber */
  --color-footer-bg:     #2C3E5A;
  --color-footer-text:   rgba(255,255,255,0.80);
  --color-price:         #F5A623;   /* Price values in tables and cards */
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #2C2C2A;
  --color-nav-active:    #1E3A5F;

  /* --- Typography --- */
  --font:                'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base:      1rem;
  --font-size-sm:        0.9375rem;  /* 15px — minimum body size on mobile */
  --font-size-xs:        0.8125rem;
  --line-height-body:    1.7;
  --line-height-heading: 1.2;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;

  /* --- Layout --- */
  --container:           1160px;
  --section-pad-y:       4rem;
  --section-pad-y-mobile:2.5rem;

  /* --- Radius --- */
  --radius:              8px;
  --radius-lg:           12px;
  --radius-full:         9999px;

  /* --- Shadows --- */
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:           0 8px 24px rgba(0,0,0,0.12);

  /* --- Transitions --- */
  --transition:          0.2s ease;
  --transition-slow:     0.35s ease;

  /* --- Internal helpers (spacing scale, extra font sizes, nav) --- */
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   1.5rem;
  --font-size-3xl:   1.875rem;
  --font-size-4xl:   2.25rem;
  --font-size-5xl:   3rem;

  --spacing-1:   0.25rem;
  --spacing-2:   0.5rem;
  --spacing-3:   0.75rem;
  --spacing-4:   1rem;
  --spacing-5:   1.25rem;
  --spacing-6:   1.5rem;
  --spacing-8:   2rem;
  --spacing-10:  2.5rem;
  --spacing-12:  3rem;
  --spacing-16:  4rem;
  --spacing-20:  5rem;
  --spacing-24:  6rem;

  --nav-height:    4rem;
  --container-px:  var(--spacing-4);
}

/* =========================================================
   Reset & Base
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

/* =========================================================
   Accessibility
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-navy);
  color: var(--color-text-white);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
}

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

/* =========================================================
   Layout
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--spacing-16);
}

.section--alt {
  background: var(--color-off-white);
}

.section-heading {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-3);
  text-align: center;
}

.section-subheading {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--spacing-10);
}

.section-cta {
  text-align: center;
  margin-top: var(--spacing-10);
}

.section-gap-top {
  margin-top: var(--spacing-8);
}

/* =========================================================
   Typography
   ========================================================= */
h1 { font-size: var(--font-size-4xl); font-weight: 700; line-height: var(--line-height-heading); }
h2 { font-size: var(--font-size-3xl); font-weight: 700; line-height: var(--line-height-heading); }
h3 { font-size: var(--font-size-xl);  font-weight: 600; line-height: var(--line-height-heading); }
h4 { font-size: var(--font-size-lg);  font-weight: 600; }

p + p { margin-top: var(--spacing-4); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  min-height: 44px;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-text-white);
  border-color: var(--color-navy);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-navy-dark);
  border-color: var(--color-navy-dark);
}

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-text-white);
  border-color: var(--color-whatsapp);
}
.btn-whatsapp:hover, .btn-whatsapp:focus {
  background: var(--color-whatsapp-dark);
  border-color: var(--color-whatsapp-dark);
}

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--color-navy-light);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-text-white);
  border-color: rgba(255,255,255,0.7);
}
.btn-outline-white:hover, .btn-outline-white:focus {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-text-white);
}

/* Amber fill — for use on navy/dark backgrounds only */
.btn-amber {
  background: var(--color-amber);
  color: var(--color-navy);
  border-color: var(--color-amber);
  font-weight: 700;
}
.btn-amber:hover,
.btn-amber:focus {
  background: #e8961a;
  border-color: #e8961a;
}

/* Amber outline — for use on navy/dark backgrounds only */
.btn-amber-outline {
  background: transparent;
  color: var(--color-amber);
  border-color: var(--color-amber);
}
.btn-amber-outline:hover,
.btn-amber-outline:focus {
  background: rgba(245,166,35,0.12);
  color: var(--color-amber);
  border-color: var(--color-amber);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

/* =========================================================
   Navigation
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-height: var(--nav-height);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-nav-text);
  flex-shrink: 0;
  text-decoration: none;
}

.logo-mark {
  font-size: 1.4em;
  line-height: 1;
}

.logo-text {
  display: none;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
  display: none;
  position: fixed;
  inset: var(--nav-height) 0 0;
  background: var(--color-white);
  overflow-y: auto;
  padding: var(--spacing-6) var(--spacing-4);
  flex-direction: column;
  gap: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  z-index: 99;
}

body.nav-open .primary-nav {
  display: flex;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-links a {
  display: block;
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-nav-text);
  text-decoration: none;
  transition: color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-nav-active);
}

.nav-whatsapp {
  margin-top: var(--spacing-4);
  align-self: flex-start;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background: var(--color-hero-bg);
  color: var(--color-text-white);
  padding-top: var(--spacing-20);
  padding-bottom: 0;
}

.hero-inner {
  padding-bottom: var(--spacing-16);
}

.hero-headline {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-5);
  color: var(--color-text-white);
}

.hero-subheadline {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-white-muted);
  max-width: 640px;
  margin-bottom: var(--spacing-8);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.hero-trust-note {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.6);
}

.hero-trust-bar {
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: var(--spacing-4);
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3) var(--spacing-6);
  list-style: none;
}

.trust-badges li {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.trust-badges li::before {
  content: '✓';
  color: var(--color-amber);
  font-weight: 700;
}

/* =========================================================
   Page Hero (inner pages)
   ========================================================= */
.page-hero {
  background: var(--color-hero-bg);
  color: var(--color-text-white);
  padding-block: var(--spacing-16);
}

.page-hero h1 {
  color: var(--color-text-white);
  margin-bottom: var(--spacing-3);
}

.page-subheading {
  font-size: var(--font-size-lg);
  color: var(--color-text-white-muted);
  max-width: 640px;
}

/* =========================================================
   Grid system
   ========================================================= */
.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.section--services-snap .card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.section--services-snap .card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.section--services-snap .card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-navy-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-4);
}

.card--bordered {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* Hover lift — services / coverage inner-page cards */
.card--animated {
  transition: box-shadow var(--transition), transform var(--transition);
}
.card--animated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--contact {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  border: 1px solid var(--color-border);
}

.card-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

/* Icon box on card--bordered (services / coverage popular destinations) */
.card--bordered .card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--color-navy-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3);
}

/* Coverage area card icon box */
.coverage-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--color-navy-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3);
}

/* Navy colour modifier — contact page phone/email icons */
.card-icon--navy {
  color: var(--color-navy);
}

.card-icon--whatsapp {
  color: var(--color-whatsapp);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
}

.card-body {
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

.contact-cta-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* =========================================================
   Why-choose section
   ========================================================= */
.why-item {
  text-align: center;
  padding: var(--spacing-6);
}

.why-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-navy-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-4);
  flex-shrink: 0;
}

.why-item h3 {
  margin-bottom: var(--spacing-2);
}

.why-item p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* =========================================================
   Coverage pills
   ========================================================= */
.coverage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  margin-bottom: var(--spacing-8);
}

.coverage-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.coverage-pill--airport {
  background: var(--color-navy-light);
  color: var(--color-navy);
}

.coverage-pill--city {
  background: var(--color-amber-light);
  color: var(--color-amber-dark);
}

/* =========================================================
   Price teaser grid
   ========================================================= */
.price-teaser-grid {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
}

.price-teaser-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.price-route {
  font-weight: 600;
  color: var(--color-text);
}

.price-amount {
  font-size: var(--font-size-xl);
  color: var(--color-price);
}

.price-amount strong {
  font-size: var(--font-size-2xl);
}

.price-vehicle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* =========================================================
   Price table
   ========================================================= */
.price-table-intro {
  margin-bottom: var(--spacing-6);
  color: var(--color-text-muted);
}

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-6);
}

.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--color-white);
}

.price-table th,
.price-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: start;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.price-table th {
  background: var(--color-off-white);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.price-table td:first-child {
  white-space: normal;
  min-width: 200px;
  font-weight: 500;
}

.price-table tbody tr:last-child td {
  border-bottom: none;
}

.price-table tbody tr:hover td {
  background: var(--color-off-white);
}

.price-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.price-notes li {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-inline-start: var(--spacing-5);
  position: relative;
}

.price-notes li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
}

/* =========================================================
   Coverage area cards
   ========================================================= */
.coverage-area-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.coverage-area-card h3 {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
}

.coverage-area-card p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.coverage-area-card--custom {
  background: var(--color-navy-light);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  justify-content: center;
}

.coverage-area-card--custom p {
  color: var(--color-navy);
  font-weight: 500;
}

/* Coverage card hover (standard cards only) */
.coverage-area-card {
  transition: box-shadow var(--transition), transform var(--transition);
}
.coverage-area-card:not(.coverage-area-card--custom):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Full-width CTA inside the custom card */
.coverage-area-card--custom .btn {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   Payment list
   ========================================================= */
.payment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.payment-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
}

.payment-list li::before {
  content: '✓';
  color: var(--color-amber);
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

/* =========================================================
   Booking info list
   ========================================================= */
.booking-info-list {
  counter-reset: booking-item;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.booking-info-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-border);
  counter-increment: booking-item;
}

.booking-info-list li::before {
  content: counter(booking-item);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-text-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* =========================================================
   Info box
   ========================================================= */
.info-box {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
}

.info-box h2, .info-box h3 {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
}

.info-box p {
  color: var(--color-text-muted);
}

/* Heading + inline SVG icon row */
.info-box__heading-with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
  font-weight: 600;
}
.info-box__heading-with-icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-navy);
  flex-shrink: 0;
}

/* =========================================================
   Fleet cards
   ========================================================= */
.fleet-section {
  padding-block: var(--spacing-12);
}

.fleet-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-10);
  box-shadow: var(--shadow-sm);
}

.fleet-card:last-of-type {
  margin-bottom: 0;
}

.fleet-card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.fleet-card__content {
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.fleet-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-navy-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fleet-card__name {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.fleet-card__tagline {
  font-size: var(--font-size-lg);
  color: var(--color-navy);
  font-weight: 500;
}

.fleet-card__body {
  color: var(--color-text-muted);
}

.fleet-card__specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-off-white);
  border-radius: var(--radius);
}

.fleet-card__specs li {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.spec-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-navy);
  flex-shrink: 0;
}
.spec-icon svg {
  width: 18px;
  height: 18px;
}

.fleet-card__price-note {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-price);
}

/* Constrain CTA button to natural width inside fleet cards */
.fleet-card__content .btn {
  align-self: flex-start;
}

.fleet-note {
  margin-top: var(--spacing-10);
  padding: var(--spacing-5);
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  border-inline-start: 4px solid var(--color-navy);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* =========================================================
   CTA Strip — navy background, white text
   ========================================================= */
.cta-strip {
  background: var(--color-navy);
  color: var(--color-text-white);
  padding-block: var(--spacing-16);
}

.cta-strip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.cta-strip-text h2 {
  color: var(--color-text-white);
  margin-bottom: var(--spacing-3);
}

.cta-strip-text p {
  color: var(--color-text-white-muted);
  font-size: var(--font-size-lg);
}

.cta-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #0D1B2A;
  color: var(--color-footer-text);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  padding-block: var(--spacing-12);
}

.footer-logo {
  color: var(--color-text-white);
  margin-bottom: var(--spacing-3);
}

.footer-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-footer-text);
  max-width: 320px;
}

.footer-since {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-2);
}

.footer-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-white);
  margin-bottom: var(--spacing-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-footer-text);
  transition: color var(--transition);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--color-text-white);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.footer-contact-list li {
  font-size: var(--font-size-sm);
}

.footer-contact-label {
  color: var(--color-text-muted);
  margin-inline-end: var(--spacing-1);
}

.footer-contact-list a {
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-contact-list a:hover {
  color: var(--color-text-white);
}

.footer-availability {
  font-size: var(--font-size-sm);
  color: var(--color-amber);
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--spacing-4);
}

.footer-bottom p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.whatsapp-float {
  position: fixed;
  inset-inline-end: var(--spacing-5);
  bottom: var(--spacing-5);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: var(--color-text-white);
  box-shadow: var(--shadow-lg);
  transition: background var(--transition), transform var(--transition);
}
.whatsapp-float:hover {
  background: var(--color-whatsapp-dark);
  transform: scale(1.08);
}

/* =========================================================
   Language Switcher
   ========================================================= */
.lang-switcher {
  position: relative;
}

.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  list-style: none;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  min-height: 44px;
  user-select: none;
}
.lang-switcher__toggle::-webkit-details-marker { display: none; }

.lang-switcher__icon {
  transition: transform var(--transition);
}
.lang-switcher[open] .lang-switcher__icon {
  transform: rotate(180deg);
}

.lang-switcher__list {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  inset-inline-start: 0;
  z-index: 200;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  list-style: none;
  overflow: hidden;
}

.lang-switcher__list li a {
  display: block;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: background var(--transition);
  text-decoration: none;
}
.lang-switcher__list li a:hover {
  background: var(--color-off-white);
}
.lang-switcher__active {
  font-weight: 600;
  color: var(--color-navy) !important;
}

/* =========================================================
   Responsive — Tablet (≥ 640px)
   ========================================================= */
@media (min-width: 640px) {
  :root {
    --container-px: var(--spacing-6);
  }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .price-teaser-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-headline { font-size: var(--font-size-5xl); }

  .fleet-card {
    grid-template-columns: 300px 1fr;
  }

  .fleet-card__image img {
    height: 100%;
    min-height: 280px;
  }
}

/* =========================================================
   Responsive — Desktop (≥ 1024px)
   ========================================================= */
@media (min-width: 1024px) {
  :root {
    --container-px: var(--spacing-8);
  }

  .logo-text { display: inline; }

  .nav-toggle { display: none; }

  .primary-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-2);
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    margin-inline-start: auto;
    inset: auto;
  }

  .nav-links {
    flex-direction: row;
    gap: 0;
  }

  .nav-links a {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-base);
    border-bottom: none;
    border-radius: var(--radius);
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    background: var(--color-navy-light);
    color: var(--color-nav-active);
  }

  .nav-whatsapp { margin-top: 0; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .price-teaser-grid { grid-template-columns: repeat(3, 1fr); }

  .cta-strip-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  .fleet-card {
    grid-template-columns: 380px 1fr;
  }
  .fleet-card__image img {
    min-height: 320px;
  }

  .hero-headline { font-size: clamp(2.5rem, 4vw, 3.5rem); }

  .section {
    padding-block: var(--spacing-24);
  }

  .lang-switcher__list {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* =========================================================
   Mobile-specific overrides
   ========================================================= */
@media (max-width: 639px) {
  body { font-size: var(--font-size-sm); }
  .section { padding-block: var(--spacing-12); }
  .hero { padding-top: var(--spacing-12); }
  .hero-inner { padding-bottom: var(--spacing-12); }
  .hero-headline { font-size: var(--font-size-3xl); }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
  .cta-strip-actions { flex-direction: column; }
  .cta-strip-actions .btn { width: 100%; justify-content: center; }
  .section-heading { font-size: var(--font-size-2xl); }
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
}