/* ========================================
   GetAnAirportTransfer — Turkey Transfers & Tours
   Design System & Global Styles
   ======================================== */

:root {
  /* Color palette — Midnight + Anatolian terracotta */
  --color-primary: #0E2A47;
  --color-primary-700: #0A1F36;
  --color-primary-900: #050F1C;
  --color-accent: #C4674C;
  --color-accent-dark: #9F4F38;
  --color-accent-light: #E89F86;

  --color-bg: #F5F1EA;
  --color-bg-warm: #EFE8DB;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FAF7F1;

  --color-text: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #8A8478;
  --color-text-on-dark: #F5F1EA;
  --color-text-on-dark-muted: #B8B4AC;

  --color-border: #E5DFD3;
  --color-border-strong: #D4CCBC;
  --color-border-dark: rgba(245, 241, 234, 0.12);

  --color-success: #5B8C5A;
  --color-warning: #D4944C;

  /* Single font family for the whole UI — modern, geometric sans-serif (istanbulshuttleport.com style) */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-8: 3rem; --space-10: 4rem; --space-12: 6rem;
  --space-16: 8rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(14, 42, 71, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 42, 71, 0.06);
  --shadow-md: 0 4px 16px rgba(14, 42, 71, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 42, 71, 0.12);
  --shadow-xl: 0 24px 64px rgba(14, 42, 71, 0.16);

  --container: 1280px;
  --container-narrow: 960px;

  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --transition: 0.3s var(--ease);
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Utility Bar */
.utility-bar {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: var(--space-3) 0;
  font-size: 0.875rem;
  position: relative;
  z-index: 10;
}
.utility-bar a { color: var(--color-text-on-dark-muted); transition: color var(--transition); }
.utility-bar a:hover { color: var(--color-text-on-dark); }
.utility-bar::after { content: ""; display: table; clear: both; }
.utility-bar-left { float: left; }
.utility-bar-right { float: right; display: flex; align-items: center; gap: var(--space-4); }
.lang-switcher { display: flex; gap: var(--space-2); }
.lang-switcher a { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition); }
.lang-switcher a.active { background: rgba(245, 241, 234, 0.1); color: var(--color-text-on-dark); }
.lang-switcher a:hover { background: rgba(245, 241, 234, 0.05); }

/* Container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .container { padding: 0 var(--space-6); } }

/* Header */
.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
}
.header .container { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; }
.logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.logo-mark { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-accent); color: white; text-align: center; line-height: 1.5rem; margin-right: 0.5rem; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a { color: var(--color-text-secondary); transition: color var(--transition); }
.nav a:hover { color: var(--color-primary); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) 0; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition); box-shadow: var(--shadow-md); }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-4); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.mobile-menu-toggle { display: none; width: 2rem; height: 2rem; flex-direction: column; justify-content: center; gap: 0.25rem; padding: var(--space-2); border-radius: var(--radius-sm); transition: background var(--transition); }
.mobile-menu-toggle:hover { background: var(--color-surface-soft); }
.mobile-menu-toggle span { width: 100%; height: 2px; background: var(--color-primary); transition: all var(--transition); }
.mobile-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* Mobile Menu */
.mobile-menu { position: fixed; inset: 0; background: var(--color-surface); z-index: 200; transform: translateX(100%); transition: transform var(--transition); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.mobile-menu-close { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--transition); }
.mobile-menu-close:hover { background: var(--color-surface-soft); }
.mobile-menu nav { padding: var(--space-4); }
.mobile-menu nav a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); transition: color var(--transition); }
.mobile-menu nav a:hover { color: var(--color-primary); }

/* Mobile */
@media (max-width: 768px) {
  .nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* .italic — display class kept for backward compat (accent color only, no italic styling) */

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.125rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--color-accent); }
.eyebrow.no-line::before { display: none; }

/* Layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-16) 0; }

@media (max-width: 768px) {
  .section { padding: var(--space-10) 0; }
  .section-lg { padding: var(--space-12) 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem; font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.01em; border-radius: var(--radius-full);
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; border: 1.5px solid transparent;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--color-primary); color: #fff; }
.btn-dark:hover { background: var(--color-primary-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); }
.btn-ghost:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--color-primary);
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 2px; transition: gap var(--transition);
}
.btn-link:hover { gap: 0.75rem; }
.btn-block { width: 100%; }
.btn-lg { padding: 1.125rem 2.25rem; font-size: 1rem; }

/* Utility bar */
.utility-bar { background: var(--color-primary-900); color: var(--color-text-on-dark); font-size: 0.8125rem; padding: 0.5rem 0; }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.utility-bar a:hover { color: var(--color-accent-light); }
.utility-bar-left { display: flex; gap: 1.5rem; align-items: center; }
.utility-bar-left span { color: var(--color-text-on-dark-muted); }
.lang-switcher { display: flex; gap: 0.25rem; align-items: center; }
.lang-switcher a {
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em;
  opacity: 0.6; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.lang-switcher a:hover { opacity: 1; }
.lang-switcher a.active { opacity: 1; color: var(--color-accent-light); }
.utility-bar-right { display: flex; gap: 1.25rem; align-items: center; }

@media (max-width: 768px) { .utility-bar { display: none; } }

/* Header */
.header {
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(140%) blur(12px);
  background: rgba(245, 241, 234, 0.92);
}
.header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.125rem; padding-bottom: 1.125rem; gap: 2rem;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-display); font-size: 1.625rem;
  letter-spacing: -0.02em; color: var(--color-primary); font-weight: 700;
  flex-shrink: 0;
}
.logo img {
  height: 44px; width: auto; display: block;
  /* PNG logo source is 320x80 — scale down responsively */
}
.footer-brand .logo img { height: 52px; }
.mobile-menu-header .logo img { height: 40px; }
@media (max-width: 540px) {
  .logo img { height: 36px; }
}
.logo-mark {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-bg);
  border-radius: 50%;
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1;
}

.nav { display: flex; gap: 2rem; align-items: center; }
.nav a {
  font-size: 0.9375rem; font-weight: 500; color: var(--color-text);
  position: relative; padding: 0.5rem 0;
}
.nav a:hover { color: var(--color-accent); }
.nav a.active::after {
  content: ""; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--color-accent);
}
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.9375rem; font-weight: 500;
}
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 0.75rem); left: -1rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0.5rem; min-width: 220px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--transition);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a { display: block; padding: 0.625rem 0.875rem; border-radius: var(--radius-sm); font-size: 0.875rem; }
.nav-dropdown-menu a:hover { background: var(--color-bg-warm); color: var(--color-primary); }
.header-actions { display: flex; gap: 0.75rem; align-items: center; }

.mobile-menu-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.mobile-menu-toggle span { width: 20px; height: 1.5px; background: var(--color-primary); position: relative; }
.mobile-menu-toggle span::before, .mobile-menu-toggle span::after {
  content: ""; position: absolute; width: 20px; height: 1.5px; background: var(--color-primary);
}
.mobile-menu-toggle span::before { top: -6px; }
.mobile-menu-toggle span::after { top: 6px; }

@media (max-width: 1024px) {
  .nav, .header-actions .btn { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}

.mobile-menu {
  position: fixed; inset: 0; background: var(--color-primary);
  color: var(--color-text-on-dark); z-index: 200; padding: 2rem;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.mobile-menu-header .logo { color: var(--color-text-on-dark); }
.mobile-menu-header .logo-mark { background: var(--color-bg); color: var(--color-primary); }
.mobile-menu-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: 2rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-dark); color: var(--color-text-on-dark);
}
.mobile-menu nav a:hover { color: var(--color-accent-light); }

/* Hero */
.hero { position: relative; padding: var(--space-10) 0 var(--space-12); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--space-10); align-items: center;
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.hero-content h1 { margin-bottom: 1.5rem; }
.hero-content h1 .italic { color: var(--color-accent); display: block; }
.hero-lead { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 32rem; margin-bottom: 2rem; }

.hero-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding-top: 2rem; border-top: 1px solid var(--color-border); margin-top: 2.5rem;
}
.hero-trust-item { display: flex; flex-direction: column; gap: 0.25rem; }
.hero-trust-item strong {
  font-family: var(--font-body); font-size: 2rem;
  color: var(--color-primary); letter-spacing: -0.02em;
  font-weight: 700; line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.hero-trust-item span { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.4; }

@media (max-width: 540px) {
  .hero-trust { gap: 0.75rem; }
  .hero-trust-item strong { font-size: 1.5rem; }
}

.hero-visual {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--radius-xl); overflow: hidden; background: var(--color-primary);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual-overlay {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(14, 42, 71, 0.88); backdrop-filter: blur(12px);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  color: var(--color-text-on-dark);
  display: flex; gap: 1rem; align-items: center;
}
.hero-visual-overlay-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-visual-overlay-text { font-size: 0.875rem; line-height: 1.5; }
.hero-visual-overlay-text strong { display: block; font-weight: 600; margin-bottom: 0.125rem; }

.hero-decor {
  position: absolute; top: 20%; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(196, 103, 76, 0.18) 0%, transparent 65%);
  border-radius: 50%; filter: blur(40px);
  pointer-events: none; z-index: -1;
}

/* Booking widget */
.booking-widget {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); margin-top: var(--space-8);
  position: relative; border: 1px solid var(--color-border);
  overflow: visible;
}
.booking-tabs { display: flex; border-bottom: 1px solid var(--color-border); padding: 0 0.75rem; }
.booking-tab {
  padding: 1.125rem 1.5rem; font-size: 0.875rem; font-weight: 600;
  color: var(--color-text-muted); position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  letter-spacing: 0.02em; transition: color var(--transition);
}
.booking-tab.active { color: var(--color-primary); }
.booking-tab.active::after {
  content: ""; position: absolute; bottom: -1px; left: 0.75rem; right: 0.75rem;
  height: 2px; background: var(--color-accent);
}
.booking-tab:hover { color: var(--color-primary); }

.booking-form {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1.3fr 1fr auto;
  gap: 0;
  background: var(--color-surface);
}
.booking-field {
  padding: 0.875rem 1.25rem;
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 88px; position: relative;
  cursor: text;
  transition: background-color var(--transition);
}
.booking-field:last-of-type { border-right: none; }
.booking-field:hover { background: var(--color-surface-soft); }
.booking-field:focus-within { background: #fff7f3; }
.booking-field:focus-within::before {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--color-accent); border-radius: 2px;
  pointer-events: none; z-index: 1;
}
.booking-field label {
  display: block;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted); margin-bottom: 0.375rem;
}
.booking-field input,
.booking-field select {
  border: 0; outline: 0; background: transparent;
  font-family: inherit;
  font-size: 1rem; font-weight: 600;
  color: var(--color-primary);
  width: 100%; min-width: 0; padding: 0; margin: 0;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.booking-field input::placeholder { color: var(--color-text-muted); font-weight: 500; }
.booking-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.4; cursor: pointer; transition: opacity var(--transition);
}
.booking-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.booking-field select {
  padding-right: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8478' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px;
}

.booking-submit { padding: 0.625rem; display: flex; align-items: stretch; }
.booking-submit .btn {
  border-radius: var(--radius-md);
  padding: 0 1.75rem; width: 100%;
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9375rem;
}

.booking-extra {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem; color: var(--color-text-muted);
}
.booking-roundtrip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: rgba(196, 103, 76, 0.10);
  color: var(--color-accent-dark);
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition);
}
.booking-roundtrip:hover { background: rgba(196, 103, 76, 0.18); }
.booking-roundtrip input { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .booking-form { grid-template-columns: 1fr 1fr; }
  .booking-field { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .booking-field:nth-child(2n) { border-right: none; }
  .booking-submit { grid-column: 1 / -1; padding: 0.75rem 1rem; }
  .booking-submit .btn { min-height: 56px; }
}
@media (max-width: 540px) {
  .booking-form { grid-template-columns: 1fr; }
  .booking-field { border-right: none; }
  .booking-tabs { overflow-x: auto; padding: 0; }
  .booking-tab { padding: 1rem 1.25rem; flex-shrink: 0; white-space: nowrap; }
  .booking-extra { flex-wrap: wrap; }
}

/* Trust strip */
.trust-strip { background: var(--color-primary); color: var(--color-text-on-dark); padding: var(--space-6) 0; }
.trust-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.trust-strip-item { display: flex; align-items: flex-start; gap: 1rem; }
.trust-strip-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(196, 103, 76, 0.2);
  border: 1px solid var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-accent-light);
}
.trust-strip-text strong { display: block; font-size: 0.9375rem; margin-bottom: 0.125rem; }
.trust-strip-text span { font-size: 0.8125rem; color: var(--color-text-on-dark-muted); line-height: 1.5; }

@media (max-width: 768px) { .trust-strip-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Section headers */
.section-header { margin-bottom: var(--space-8); display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.section-header-left { max-width: 36rem; }
.section-header h2 { margin-top: 1rem; }
.section-header p { color: var(--color-text-secondary); font-size: 1rem; margin-top: 1rem; max-width: 36rem; }
.section-header-right { display: flex; gap: 0.5rem; align-items: center; }

@media (max-width: 768px) { .section-header { flex-direction: column; align-items: flex-start; } }

/* Tour cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.tour-card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
  transition: all var(--transition);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.tour-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--color-bg-warm); }
.tour-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tour-card:hover .tour-card-img img { transform: scale(1.05); }
.tour-card-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(14, 42, 71, 0.9); color: #fff;
  padding: 0.375rem 0.75rem; border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
}
.tour-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.tour-card-meta {
  display: flex; gap: 0.875rem; font-size: 0.8125rem;
  color: var(--color-text-muted); margin-bottom: 0.625rem;
}
.tour-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.tour-card h4 {
  font-family: var(--font-display); font-size: 1.375rem;
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--color-primary); margin-bottom: 0.75rem; flex: 1;
}
.tour-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.875rem; border-top: 1px solid var(--color-border);
}
.tour-card-price { display: flex; flex-direction: column; }
.tour-card-price small {
  font-size: 0.6875rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.tour-card-price strong {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--color-primary); letter-spacing: -0.01em;
}
.tour-card-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-bg-warm); color: var(--color-primary);
  transition: all var(--transition);
}
.tour-card:hover .tour-card-cta { background: var(--color-accent); color: #fff; }

/* Routes / Locations */
.locations-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.location-tab {
  padding: 0.625rem 1.25rem; border-radius: var(--radius-full);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary);
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.location-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.location-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }

.routes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.route-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  transition: all var(--transition);
}
.route-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.route-card-icon {
  width: 44px; height: 44px; background: var(--color-bg-warm);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-primary);
}
.route-card-text { flex: 1; min-width: 0; }
.route-card-text strong {
  display: block; font-size: 0.9375rem; font-weight: 600;
  color: var(--color-primary); margin-bottom: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-card-text span { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }
.route-card-price { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; color: var(--color-accent); letter-spacing: -0.01em; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Cities grid */
.cities-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.city-card {
  position: relative; aspect-ratio: 3/4;
  border-radius: var(--radius-lg); overflow: hidden;
  display: block; isolation: isolate;
}
.city-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.city-card:hover img { transform: scale(1.06); }
.city-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 15, 28, 0.85) 100%);
}
.city-card-content {
  position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  z-index: 2; color: var(--color-text-on-dark);
}
.city-card-content strong {
  display: block; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
}
.city-card-content span {
  display: block; font-size: 0.8125rem;
  color: var(--color-text-on-dark-muted); margin-top: 0.125rem;
}
@media (max-width: 1024px) { .cities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cities-grid { grid-template-columns: repeat(2, 1fr); } }

/* Split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split.reverse > :first-child { order: 0; }
}
.split-visual { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 5/4; background: var(--color-primary); }
.split-visual img { width: 100%; height: 100%; object-fit: cover; }
.split-content h2 { margin-bottom: 1.5rem; }
.split-content .lead { margin-bottom: 2rem; }
.split-features { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.split-feature { display: flex; gap: 1rem; align-items: flex-start; }
.split-feature-icon {
  width: 40px; height: 40px; background: var(--color-bg-warm);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-accent);
}
.split-feature-text strong { display: block; font-size: 1rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.25rem; }
.split-feature-text span { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.55; }

/* Gallery */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: 0.75rem;
}
.gallery a {
  border-radius: var(--radius-md); overflow: hidden;
  position: relative; background: var(--color-bg-warm); display: block;
}
.gallery a img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery a:hover img { transform: scale(1.06); }
.gallery a.span-2 { grid-column: span 2; }
.gallery a.span-2-row { grid-row: span 2; }

@media (max-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery a.span-2, .gallery a.span-2-row { grid-column: span 1; grid-row: span 1; }
}

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column;
}
.testimonial-quote-mark {
  font-family: var(--font-display); font-size: 4rem; line-height: 0.6;
  color: var(--color-accent); margin-bottom: 1rem;
}
.testimonial-text { font-size: 1rem; line-height: 1.65; color: var(--color-text); margin-bottom: 1.5rem; flex: 1; }
.testimonial-author {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 1.5rem; border-top: 1px solid var(--color-border);
}
.testimonial-author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-bg-warm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.125rem;
  color: var(--color-primary); flex-shrink: 0;
}
.testimonial-author-text strong { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--color-primary); }
.testimonial-author-text span { font-size: 0.8125rem; color: var(--color-text-muted); }
.testimonial-rating { display: flex; gap: 0.125rem; color: var(--color-accent); margin-bottom: 0.75rem; }

/* CTA strip */
.cta-strip {
  background: var(--color-primary); color: var(--color-text-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-10);
  position: relative; overflow: hidden;
}
.cta-strip-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; position: relative; z-index: 2; }
.cta-strip h2 { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.cta-strip h2 .italic { color: var(--color-accent-light); }
.cta-strip p { color: var(--color-text-on-dark-muted); font-size: 1rem; margin-bottom: 2rem; max-width: 36rem; }
.cta-strip-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cta-strip-buttons .btn-ghost { border-color: var(--color-border-dark); color: var(--color-text-on-dark); }
.cta-strip-buttons .btn-ghost:hover { background: var(--color-text-on-dark); color: var(--color-primary); border-color: var(--color-text-on-dark); }
.cta-strip-decor {
  position: absolute; right: -100px; top: -50px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 103, 76, 0.3) 0%, transparent 70%);
  filter: blur(40px); z-index: 1;
}
.cta-strip-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.cta-strip-stat strong {
  font-family: var(--font-body); font-size: 2.5rem;
  font-weight: 700; color: var(--color-accent-light);
  letter-spacing: -0.02em; display: block; line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cta-strip-stat span { font-size: 0.8125rem; color: var(--color-text-on-dark-muted); margin-top: 0.25rem; display: block; }

@media (max-width: 1024px) {
  .cta-strip-grid { grid-template-columns: 1fr; }
  .cta-strip { padding: var(--space-6); }
}

/* Footer */
.footer {
  background: var(--color-primary-900); color: var(--color-text-on-dark-muted);
  padding: var(--space-10) 0 var(--space-5); margin-top: var(--space-12);
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer-brand .logo { color: var(--color-text-on-dark); margin-bottom: 1.5rem; }
.footer-brand .logo-mark { background: var(--color-bg); color: var(--color-primary); }
.footer-brand p { font-size: 0.9375rem; line-height: 1.6; max-width: 24rem; margin-bottom: 1.5rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--color-text-on-dark); }
.footer-contact a:hover { color: var(--color-accent-light); }
.footer h6 { color: var(--color-text-on-dark); margin-bottom: 1.25rem; font-size: 0.75rem; letter-spacing: 0.12em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer ul a { font-size: 0.875rem; color: var(--color-text-on-dark-muted); transition: all var(--transition); }
.footer ul a:hover { color: var(--color-accent-light); padding-left: 4px; }
.footer-bottom {
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem;
}
.footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-on-dark); transition: all var(--transition);
}
.footer-social a:hover { background: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Inner page hero */
.page-hero {
  background: var(--color-primary); color: var(--color-text-on-dark);
  padding: var(--space-12) 0 var(--space-10);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; bottom: -200px; right: -200px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 103, 76, 0.2) 0%, transparent 65%);
  filter: blur(40px);
}
.page-hero-content { position: relative; z-index: 2; max-width: 48rem; }
.page-hero h1 { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.page-hero h1 .italic { color: var(--color-accent-light); }
.page-hero p { color: var(--color-text-on-dark-muted); font-size: 1.125rem; max-width: 36rem; line-height: 1.6; }

.breadcrumb {
  display: flex; gap: 0.5rem; font-size: 0.8125rem;
  margin-bottom: 1.5rem; color: var(--color-text-on-dark-muted);
}
.breadcrumb a:hover { color: var(--color-accent-light); }

/* Vehicles */
.vehicle-card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); overflow: hidden;
  display: flex; flex-direction: column; transition: all var(--transition);
}
.vehicle-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.vehicle-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-warm); }
.vehicle-card-img img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.vehicle-card-class {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-accent); font-weight: 600; margin-bottom: 0.5rem;
}
.vehicle-card h4 {
  font-family: var(--font-display); font-size: 1.625rem;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--color-primary); margin-bottom: 0.5rem;
}
.vehicle-card p { color: var(--color-text-secondary); font-size: 0.9375rem; margin-bottom: 1.25rem; }
.vehicle-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
  margin-bottom: 1.5rem; padding: 1rem;
  background: var(--color-bg-warm); border-radius: var(--radius-md);
}
.vehicle-spec { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-secondary); }
.vehicle-spec strong { color: var(--color-primary); font-weight: 600; }

/* FAQ */
.faq-list { max-width: 48rem; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; text-align: left; padding: 1.5rem 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-size: 1.0625rem; font-weight: 600;
  color: var(--color-primary); cursor: pointer;
  font-family: var(--font-body);
}
.faq-question-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-bg-warm); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.faq-item.open .faq-question-icon { background: var(--color-accent); color: #fff; transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner {
  padding: 0 0 1.5rem;
  font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.65;
  max-width: 90%;
}

/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: var(--space-8) 0; }
.stat-item { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-item strong {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.75rem);
  color: var(--color-primary); letter-spacing: -0.02em; font-weight: 700; line-height: 1;
}
.stat-item span { font-size: 0.875rem; color: var(--color-text-secondary); }

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* Service cards */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: all var(--transition); position: relative; overflow: hidden;
}
.service-card:hover { border-color: var(--color-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card-num {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--color-accent); margin-bottom: 1.5rem;
  display: inline-block;
}
.service-card h4 {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--color-primary); margin-bottom: 0.75rem;
}
.service-card p { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.25rem; }
.service-card-link { font-size: 0.875rem; font-weight: 600; color: var(--color-accent); display: inline-flex; align-items: center; gap: 0.5rem; }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.form-group input, .form-group select, .form-group textarea {
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem; color: var(--color-primary);
  transition: all var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(196, 103, 76, 0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* Two-column page layout */
.two-col {
  display: grid; grid-template-columns: 2fr 1fr; gap: 3rem;
}
@media (max-width: 1024px) { .two-col { grid-template-columns: 1fr; } }

.sidebar-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  position: sticky; top: 6rem;
}

/* Tour detail */
.tour-detail-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; aspect-ratio: 16/8; margin-bottom: var(--space-6); }
.tour-detail-hero-main { border-radius: var(--radius-lg); overflow: hidden; }
.tour-detail-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 0.75rem; }
.tour-detail-hero-side > div { border-radius: var(--radius-lg); overflow: hidden; }
.tour-detail-hero img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .tour-detail-hero { grid-template-columns: 1fr; aspect-ratio: 16/9; }
  .tour-detail-hero-side { display: none; }
}

.itinerary { display: flex; flex-direction: column; gap: 0; }
.itinerary-item {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.5rem; padding: 1.5rem 0;
  border-bottom: 1px dashed var(--color-border);
  position: relative;
}
.itinerary-item:last-child { border-bottom: none; }
.itinerary-time {
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--color-accent); letter-spacing: -0.01em;
  min-width: 5rem; padding-top: 0.125rem;
}
.itinerary-content h5 { margin-bottom: 0.375rem; font-size: 1.0625rem; }
.itinerary-content p { color: var(--color-text-secondary); font-size: 0.9375rem; }

.includes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .includes-list { grid-template-columns: 1fr; } }
.includes-item { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--color-text-secondary); }
.includes-item-icon { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.includes-item.excluded .includes-item-icon { color: var(--color-text-muted); }

/* B2B / Partner banner */
.value-banner {
  background: var(--color-bg-warm); border-radius: var(--radius-xl);
  padding: var(--space-8); display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; align-items: center;
}
.value-banner-item h5 {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-primary); line-height: 1; margin-bottom: 0.5rem;
}
.value-banner-item span { font-size: 0.875rem; color: var(--color-text-secondary); }

@media (max-width: 1024px) { .value-banner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .value-banner { grid-template-columns: 1fr; padding: var(--space-5); } }

/* Map block */
.map-block {
  position: relative; aspect-ratio: 16/7;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(135deg, #1a3454 0%, #0E2A47 100%);
}
.map-block-placeholder {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1600&q=80");
  background-size: cover; background-position: center;
  opacity: 0.4;
}
.map-block-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14, 42, 71, 0.8) 0%, rgba(5, 15, 28, 0.9) 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  color: var(--color-text-on-dark); text-align: center; padding: 2rem;
}
.map-block-overlay strong { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; }
.map-block-overlay p { color: var(--color-text-on-dark-muted); max-width: 32rem; }

/* Misc utilities */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }

.divider { height: 1px; background: var(--color-border); margin: var(--space-8) 0; }

/* Whatsapp floating */
.whatsapp-float {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform var(--transition);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0.4;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ========================================
   Booking flow (multi-step)
   ======================================== */
.booking-page { background: var(--color-surface-soft); padding: var(--space-8) 0 var(--space-12); min-height: calc(100vh - 80px); }
.booking-page .container { max-width: 1140px; }
.booking-stepper { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-8); flex-wrap: wrap; }
.booking-step-pill {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.625rem 1rem; border-radius: var(--radius-full);
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.875rem; font-weight: 600;
}
.booking-step-pill .num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
}
.booking-step-pill.active { background: var(--color-primary); color: var(--color-text-on-dark); border-color: var(--color-primary); }
.booking-step-pill.active .num { background: var(--color-accent); color: white; }
.booking-step-pill.done { background: var(--color-success); color: white; border-color: var(--color-success); }
.booking-step-pill.done .num { background: rgba(255,255,255,0.25); color: white; }
.booking-step-sep { width: 24px; height: 1px; background: var(--color-border-strong); }

.booking-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .booking-layout { grid-template-columns: 1.6fr 1fr; } }

.booking-card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.booking-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; margin: 0 0 var(--space-2); color: var(--color-primary); }
.booking-card .sub { color: var(--color-text-secondary); margin: 0 0 var(--space-6); }
.booking-step { display: none; }
.booking-step.active { display: block; }

.field-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  padding: 0.875rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14,42,71,0.08);
}
.field-hint { font-size: 0.8125rem; color: var(--color-text-muted); }

.toggle-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--color-accent); }

.vehicle-list { display: grid; gap: var(--space-3); }
.vehicle-option {
  display: grid; grid-template-columns: 90px 1fr auto; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; transition: all var(--transition); align-items: center;
}
.vehicle-option:hover { border-color: var(--color-accent-light); transform: translateY(-1px); }
.vehicle-option.selected { border-color: var(--color-accent); background: #fff7f3; box-shadow: var(--shadow-md); }
.vehicle-option img { width: 90px; height: 64px; object-fit: cover; border-radius: var(--radius-md); }
.vehicle-option-body strong { display: block; font-size: 1.0625rem; color: var(--color-primary); margin-bottom: 2px; }
.vehicle-option-body span { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }
.vehicle-option-body .pax-row { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.vehicle-option-body .pax-row span { font-size: 0.8125rem; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.vehicle-option-price { text-align: right; }
.vehicle-option-price strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-body); font-feature-settings: "tnum" 1, "lnum" 1; }
.vehicle-option-price small { display: block; font-size: 0.75rem; color: var(--color-text-muted); }

.payment-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.payment-tab {
  flex: 1; padding: var(--space-4); border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  display: flex; align-items: center; gap: var(--space-2); justify-content: center;
  font-weight: 600; color: var(--color-text-secondary); transition: all var(--transition);
}
.payment-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: #f5f8fc; }
.payment-tab:hover { border-color: var(--color-primary); }

.card-preview {
  background: linear-gradient(135deg, #0E2A47 0%, #1F4368 100%);
  color: white; border-radius: var(--radius-lg); padding: var(--space-5);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-md);
  font-family: 'Manrope', monospace;
}
.card-preview .chip { width: 36px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #d4af37, #f4d574); margin-bottom: var(--space-4); }
.card-preview .num { font-size: 1.375rem; letter-spacing: 0.18em; margin-bottom: var(--space-4); }
.card-preview .row { display: flex; justify-content: space-between; font-size: 0.8125rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; }

.booking-summary { position: sticky; top: 100px; }
.booking-summary h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-primary); margin: 0 0 var(--space-4); }
.summary-line { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-border); font-size: 0.9375rem; }
.summary-line:last-of-type { border-bottom: none; }
.summary-line span:first-child { color: var(--color-text-muted); }
.summary-line span:last-child { color: var(--color-text); font-weight: 500; text-align: right; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) 0 0; border-top: 2px solid var(--color-primary); margin-top: var(--space-3); }
.summary-total span:first-child { font-size: 0.9375rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.summary-total strong { font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; color: var(--color-primary); font-feature-settings: "tnum" 1, "lnum" 1; }

.booking-actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.booking-actions .btn { min-width: 140px; }

.confirm-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--color-success); color: white;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
}

/* City / Airport landing hero */
.location-hero {
  position: relative; min-height: 460px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  color: white; padding: var(--space-12) 0 var(--space-8);
}
.location-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,42,71,0.2) 0%, rgba(14,42,71,0.85) 100%);
}
.location-hero .container { position: relative; z-index: 2; }
.location-hero .eyebrow { color: var(--color-accent-light); }
.location-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); margin: 0 0 var(--space-4); line-height: 1.05; }
.location-hero h1 .italic { color: var(--color-accent-light); }
.location-hero p { color: rgba(255,255,255,0.85); max-width: 640px; font-size: 1.125rem; line-height: 1.6; }

.route-table {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); overflow: hidden;
}
.route-table-row {
  display: grid; grid-template-columns: 1fr 140px 140px 140px;
  align-items: center; padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border); transition: background var(--transition);
}
.route-table-row:last-child { border-bottom: none; }
.route-table-row:hover { background: var(--color-surface-soft); }
.route-table-row.head { background: var(--color-primary); color: white; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.route-table-row.head:hover { background: var(--color-primary); }
.route-table-row strong { font-weight: 600; color: var(--color-primary); }
.route-table-row .from-to { display: flex; align-items: center; gap: var(--space-2); }
.route-table-row .price { font-family: var(--font-body); font-weight: 700; font-size: 1.375rem; color: var(--color-primary); font-feature-settings: "tnum" 1, "lnum" 1; }
.route-table-row .book-btn {
  padding: 0.5rem 1rem; background: var(--color-accent); color: white;
  border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600;
  text-align: center; transition: background var(--transition);
}
.route-table-row .book-btn:hover { background: var(--color-accent-dark); }
@media (max-width: 720px) {
  .route-table-row { grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-3); }
  .route-table-row.head { display: none; }
  .route-table-row .price { font-size: 1.125rem; }
  .route-table-row .book-btn { grid-column: 1 / -1; }
}

/* ========================================
   Google Places Autocomplete dropdown (.pac-container)
   Explicit styling so noise overlay + extensions don't break it
   ======================================== */
.pac-container {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: 6px !important;
  font-family: var(--font-body) !important;
  z-index: 10000 !important;
  overflow: hidden;
  isolation: isolate; /* prevents body::before noise overlay from affecting dropdown */
  padding: 6px 0 !important;
}
.pac-container::after { display: none !important; } /* hide "powered by Google" footer noise */
.pac-item {
  padding: 10px 16px !important;
  border-top: 1px solid var(--color-border) !important;
  font-size: 0.9375rem !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background var(--transition);
}
.pac-item:first-child { border-top: 0 !important; }
.pac-item:hover,
.pac-item-selected,
.pac-item.pac-item-selected {
  background: var(--color-surface-soft) !important;
}
.pac-item-query {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}
.pac-matched { font-weight: 700 !important; color: var(--color-accent-dark) !important; }
.pac-icon {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0 !important;
  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='%23C4674C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0;
}
.pac-item span:not(.pac-icon):not(.pac-item-query) {
  color: var(--color-text-muted) !important;
  font-size: 0.8125rem !important;
}

/* ========================================
   Custom autocomplete dropdown
   ======================================== */
.booking-field[data-autocomplete],
.field[data-autocomplete] { position: relative; }
.booking-field[data-autocomplete].autocomplete-open,
.field[data-autocomplete].autocomplete-open { z-index: 60; }

.autocomplete-dropdown {
  position: fixed;
  /* top/left/width set by JS so we float above any overflow:hidden ancestor */
  min-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(14, 42, 71, 0.16), 0 4px 12px rgba(14, 42, 71, 0.08);
  max-height: 380px; overflow-y: auto;
  z-index: 9999;
  padding: 6px 0;
  isolation: isolate;
}

/* While an autocomplete is open in the hero widget, fade the bottom strip out
   of the way so the dropdown doesn't overlap it visually. */
.booking-extra { transition: opacity 0.2s var(--ease), visibility 0s linear 0s; }
.booking-widget:has(.autocomplete-open) .booking-extra,
.booking-widget[data-search-active] .booking-extra {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), visibility 0s linear 0.15s;
}

.autocomplete-group {
  padding: 10px 16px 4px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.autocomplete-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-body);
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--color-surface-soft);
}
.autocomplete-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(196, 103, 76, 0.10);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.autocomplete-icon svg { width: 16px; height: 16px; }
.autocomplete-text {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.autocomplete-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autocomplete-text strong mark {
  background: rgba(196, 103, 76, 0.18);
  color: var(--color-accent-dark);
  padding: 0 2px;
  border-radius: 2px;
}
.autocomplete-text span {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autocomplete-empty {
  padding: 18px 16px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}
.autocomplete-empty a { color: var(--color-accent-dark); font-weight: 700; text-decoration: underline; }

@media (max-width: 540px) {
  .autocomplete-dropdown { max-height: 60vh; }
}

/* Empty-state confirm-free button (autocomplete) */
.autocomplete-empty p { margin: 0 0 12px; }
.autocomplete-confirm-free {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 auto;
  padding: 9px 16px;
  background: var(--color-accent);
  color: #fff !important;
  border: 0; border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.autocomplete-confirm-free:hover { background: var(--color-accent-dark); }
.autocomplete-confirm-free svg { flex-shrink: 0; }