/* ============================================================
   Gill Tour & Travels — Master Stylesheet
   Mobile-first | All global + component styles consolidated
   Breakpoints: 480 · 768 · 1024 · 1280
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette — from CLAUDE.md */
  --color-primary:       #1E293B;   /* Deep Charcoal */
  --color-primary-light: #334155;
  --color-primary-dark:  #0f172a;
  --color-navy-deep:     #061B35;   /* Hero / deep sections */
  --color-accent:        #F59E0B;   /* Warm Gold / Amber */
  --color-accent-dark:   #D97706;
  --color-accent-muted:  rgba(245,158,11,.15);
  --color-background:    #F8FAFC;   /* Clean White */
  --color-surface:       #FFFFFF;
  --color-text:          #1E293B;
  --color-text-muted:    #64748B;
  --color-text-light:    #94A3B8;
  --color-border:        #E2E8F0;

  /* Semantic feedback */
  --color-error:         #DC2626;
  --color-error-bg:      #FEF2F2;
  --color-error-border:  #FECACA;
  --color-success:       #166534;
  --color-success-bg:    #F0FDF4;
  --color-success-border:#BBF7D0;

  /* Third-party / channel brand colors (named so they are not "stray" hex) */
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1DAA54;
  --color-call-tab:       #0A3D62;   /* right-edge "Call" pill */
  --color-wa-tab:         #16A34A;   /* right-edge "WhatsApp" pill */
  --color-social-fb:      #1877F2;
  --color-social-yt:      #FF0000;
  --color-social-ig:      linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --color-on-accent:      #111827;   /* readable dark text on amber surfaces */
  --color-text-on-dark:   #CBD5E1;   /* slate body text on dark hero/sections */
  --color-input-focus-bg: #FFFDF5;   /* subtle amber tint on focused inputs */
  --color-surface-alt:    #F1F5F9;   /* slate-100 panel */
  --color-warn-bg:        #FFF7ED;   /* amber callout background */
  --color-warn-bg-2:      #FFFBEB;   /* amber table/zebra tint */
  --color-warn-border:    #FDE68A;   /* amber callout border */
  --color-warn-text:      #92400E;   /* amber-900 callout text */

  /* Typography */
  --font-base:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --line-height:   1.6;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --container-max: 1280px;
  --radius-sm:     0.25rem;
  --radius:        0.5rem;
  --radius-lg:     1rem;

  /* Effects */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 2px 8px rgba(0,0,0,.1);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.15);
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* Mobile bottom nav height — used for body padding */
  --mobile-nav-height: 68px;
}

/* ════════════════════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family:      var(--font-base);
  font-size:        var(--font-size-md);
  color:            var(--color-text);
  background-color: var(--color-background);
  line-height:      var(--line-height);
  /* Push content above sticky mobile bottom bar */
  padding-bottom:   var(--mobile-nav-height);
}

/* Remove bottom padding on desktop — bottom bar is hidden ≥1024 */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

img, video, svg { display: block; max-width: 100%; }
ul, ol          { list-style: none; }
a               { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover         { color: var(--color-accent-dark); }
button          { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Focus-visible ring for keyboard nav */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════
   3. LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════ */
.container {
  width:          100%;
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px)  { .container { padding-inline: var(--space-xl); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-2xl); } }

.section          { padding-block: var(--space-2xl); }
.section--alt     { background: var(--color-primary); }
.section--alt .section-title,
.section--alt .section-eyebrow { color: var(--color-surface); }
.section--alt .section-subtitle { color: var(--color-text-muted); }

.section-header {
  text-align:    center;
  margin-bottom: var(--space-xl);
}
.section-eyebrow {
  display:        block;
  font-size:      var(--font-size-sm);
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-xs);
}
.section-title {
  font-size:     var(--font-size-xl);
  font-weight:   800;
  color:         var(--color-primary);
  line-height:   1.2;
  margin-bottom: var(--space-sm);
}
.section-subtitle {
  font-size: var(--font-size-md);
  color:     var(--color-text-muted);
  max-width: 560px;
  margin:    0 auto;
}
@media (min-width: 768px) {
  .section-title { font-size: var(--font-size-2xl); }
}

/* ════════════════════════════════════════════════════════════
   4. BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-xs);
  min-height:      44px;
  min-width:       44px;
  padding:         var(--space-sm) var(--space-lg);
  border:          2px solid transparent;
  border-radius:   var(--radius);
  font-size:       var(--font-size-md);
  font-weight:     600;
  line-height:     1;
  cursor:          pointer;
  transition:      background var(--transition), color var(--transition),
                   border-color var(--transition), transform var(--transition),
                   box-shadow var(--transition);
  white-space:     nowrap;
}

.btn-primary {
  background:   var(--color-accent);
  color:        var(--color-primary);
  border-color: var(--color-accent);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background:   var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color:        var(--color-primary);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}

.btn-outline {
  background:   transparent;
  color:        var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background:   var(--color-accent);
  color:        var(--color-primary);
  transform:    translateY(-2px);
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-surface);
  border-color: rgba(255,255,255,.35);
}
.btn-ghost:hover {
  background:   rgba(255,255,255,.1);
  color:        var(--color-surface);
}

/* ════════════════════════════════════════════════════════════
   5. STICKY DESKTOP HEADER & NAV
   White theme — text/icons dark; gold accent on hover/active
   ════════════════════════════════════════════════════════════ */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       200;
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow:    0 2px 12px rgba(0,0,0,.06);
  transition:    box-shadow var(--transition);
}
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  padding-block:   var(--space-sm);
  position:        relative;
}

/* ── Brand ── */
.brand {
  display:         flex;
  align-items:     center;
  gap:             var(--space-sm);
  color:           var(--color-primary);
  font-weight:     700;
  font-size:       var(--font-size-lg);
  flex-shrink:     0;
  text-decoration: none;
}
.brand:hover { color: var(--color-accent); }

.brand-icon  { font-size: 1.75rem; line-height: 1; }
.brand-logo       { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 479px) { .brand-logo { width: 52px; height: 52px; } }
.brand-logo-wide  { width: 200px; height: auto; object-fit: contain; flex-shrink: 0; display: block; }
@media (max-width: 479px) { .brand-logo-wide { width: 155px; } }

/* New brand-text classes */
.brand-text            { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text__name      { color: var(--color-primary); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.brand-text__name strong { color: var(--color-accent); }
.brand-text__tagline   { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; letter-spacing: .03em; }

/* Legacy brand-name classes (used on other pages) */
.brand-name           { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name__main     { color: var(--color-primary); font-size: var(--font-size-lg); }
.brand-name__sub      { color: var(--color-accent);  font-size: var(--font-size-xs); font-weight: 400; letter-spacing: .04em; }

/* ── Mobile Hamburger Toggle ── */
.nav-toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  background:      transparent;
  border:          none;
  padding:         var(--space-sm);
  min-width:       44px;
  min-height:      44px;
  border-radius:   var(--radius-sm);
  transition:      background var(--transition);
}
.nav-toggle:hover { background: rgba(0,0,0,.05); }

.hamburger {
  display:          block;
  width:            24px;
  height:           2px;
  background:       var(--color-primary);
  border-radius:    2px;
  transition:       background var(--transition), transform var(--transition), opacity var(--transition);
  transform-origin: center;
}
.nav-toggle:hover .hamburger                              { background: var(--color-accent); }
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Nav Dropdown ── */
.nav-menu {
  display:    none;
  position:   absolute;
  top:        100%;
  left:       0;
  right:      0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  padding:    var(--space-sm) 0 var(--space-md);
  animation:  navSlideDown .2s ease forwards;
  z-index:    199;
}
.nav-menu.nav-open { display: block; }

@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
}

.nav-link {
  display:         block;
  padding:         var(--space-sm) var(--space-xl);
  color:           var(--color-primary);
  font-weight:     500;
  font-size:       var(--font-size-md);
  min-height:      44px;
  line-height:     2.2;
  border-left:     3px solid transparent;
  text-decoration: none;
  white-space:     nowrap;   /* never wrap multi-word labels e.g. "About Us" */
  transition:      color var(--transition), background var(--transition), border-color var(--transition);
}
.nav-link:hover {
  color:        var(--color-accent);
  background:   rgba(245,158,11,.05);
  border-color: var(--color-accent);
}
.nav-link--active,
.nav-link[aria-current="page"] {
  color:        var(--color-accent) !important;
  background:   rgba(245,158,11,.06);
  border-color: var(--color-accent);
  font-weight:  700;
}

.nav-link--cta {
  margin:        var(--space-sm) var(--space-xl);
  padding:       var(--space-sm) var(--space-md);
  text-align:    center;
  border-radius: var(--radius);
  border-left:   none;
  background:    var(--color-accent);
  color:         var(--color-primary) !important;
  font-weight:   700;
}
.nav-link--cta:hover {
  background:   var(--color-accent-dark);
  border-color: transparent;
}

/* ── Header Actions: Phone + WhatsApp (desktop only) ── */
.header-actions {
  display:     none;
  align-items: center;
  gap:         var(--space-sm);
  flex-shrink: 0;
}
/* Compact at 1024–1279 (WhatsApp button + phone icon only),
   full phone text block restored at ≥1280 where there is room. */
@media (min-width: 1024px) { .header-actions { display: flex; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-phone__number,
  .header-phone__sub { display: none; }
}
@media (min-width: 1280px) { .header-actions { gap: var(--space-md); } }

.header-phone {
  display:         flex;
  align-items:     center;
  gap:             var(--space-sm);
  text-decoration: none;
  color:           var(--color-primary);
  transition:      color var(--transition);
}
.header-phone:hover { color: var(--color-accent); }

.header-phone__circle {
  width:           44px;
  height:          44px;
  min-width:       44px;
  border-radius:   50%;
  background:      var(--color-accent);
  color:           var(--color-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background var(--transition);
}
.header-phone:hover .header-phone__circle { background: var(--color-accent-dark); }

.header-phone__number {
  display:     block;
  font-size:   var(--font-size-sm);
  font-weight: 700;
  color:       var(--color-primary);
  white-space: nowrap;
  line-height: 1.3;
}
.header-phone__sub {
  display:     block;
  font-size:   .68rem;
  color:       var(--color-text-muted);
  white-space: nowrap;
}

.btn-wa-header {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  background:      var(--color-whatsapp);
  color:           var(--color-surface);
  border:          none;
  border-radius:   var(--radius);
  padding:         var(--space-xs) var(--space-md);
  font-weight:     700;
  font-size:       var(--font-size-sm);
  min-height:      44px;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--transition), transform var(--transition);
}
.btn-wa-header:hover {
  background: var(--color-whatsapp-dark);
  color:      var(--color-surface);
  transform:  translateY(-1px);
}

/* ── Desktop Nav (≥ 1024px) ──
   Below 1024 the hamburger dropdown is used so tablet widths
   (768–1023) never cram 6 links + translate + actions onto one row. */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .nav-menu {
    display:         flex !important;
    position:        static;
    background:      transparent;
    border:          none;
    box-shadow:      none;
    padding:         0;
    animation:       none;
    flex:            1;
    justify-content: center;
    z-index:         auto;
  }

  .nav-list {
    flex-direction: row;
    align-items:    center;
    flex-wrap:      nowrap;
    gap:            var(--space-xs);
  }

  .nav-link {
    padding:       var(--space-xs) var(--space-sm);
    min-height:    auto;
    line-height:   var(--line-height);
    border-left:   none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size:     var(--font-size-sm);
    color:         var(--color-primary);
  }
  .nav-link:hover {
    color:         var(--color-accent);
    background:    transparent;
    border-color:  var(--color-accent);
  }
  .nav-link--active,
  .nav-link[aria-current="page"] {
    color:         var(--color-accent) !important;
    background:    transparent;
    border-color:  var(--color-accent);
    font-weight:   700;
  }

  .nav-link--cta {
    margin:        0 0 0 var(--space-sm);
    padding:       var(--space-xs) var(--space-md);
    font-size:     var(--font-size-sm);
    border-bottom: none;
    border-radius: var(--radius);
  }
}

/* Only enlarge link gap/size once there's plenty of room (≥1280) */
@media (min-width: 1280px) {
  .nav-list  { gap: var(--space-sm); }
  .nav-link  { font-size: var(--font-size-md); }
}

/* ════════════════════════════════════════════════════════════
   6. HERO SECTION
   ════════════════════════════════════════════════════════════ */
.hero {
  position:    relative;
  min-height:  88vh;
  display:     flex;
  align-items: center;
  background:  linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  overflow:    hidden;
}

.hero__overlay {
  position:       absolute;
  inset:          0;
  z-index:        2;           /* above slider (1), below content (3) */
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(245,158,11,.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,158,11,.07) 0%, transparent 60%);
  pointer-events: none;
}

.hero__content {
  position:      relative;
  z-index:       3;            /* raised from 1 → above overlay (2) and slider (1) */
  padding-block: var(--space-2xl);
  max-width:     760px;
}

.hero__eyebrow {
  display:        inline-block;
  background:     var(--color-accent-muted);
  border:         1px solid rgba(245,158,11,.3);
  color:          var(--color-accent);
  font-size:      var(--font-size-sm);
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:        var(--space-xs) var(--space-md);
  border-radius:  2rem;
  margin-bottom:  var(--space-lg);
}

.hero__heading {
  font-size:     2.2rem;
  font-weight:   900;
  color:         var(--color-surface);
  line-height:   1.15;
  margin-bottom: var(--space-md);
}
.hero__heading--accent { color: var(--color-accent); }

.hero__subheading {
  font-size:     var(--font-size-lg);
  color:         var(--color-text-on-dark);
  margin-bottom: var(--space-xl);
  max-width:     560px;
  line-height:   1.7;
}

.hero__actions {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-md);
  margin-bottom: var(--space-xl);
}
.hero__cta { font-size: var(--font-size-lg); padding: var(--space-md) var(--space-xl); }

/* WhatsApp CTA button in hero */
.btn-wa {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-sm);
  background:      var(--color-whatsapp);
  color:           var(--color-surface);
  border:          2px solid var(--color-whatsapp);
  border-radius:   var(--radius);
  font-weight:     700;
  text-decoration: none;
  transition:      background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-wa:hover,
.btn-wa:focus-visible {
  background:    var(--color-whatsapp-dark);
  border-color:  var(--color-whatsapp-dark);
  color:         var(--color-surface);
  transform:     translateY(-2px);
}

.hero__badges {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-md) var(--space-lg);
}
.hero__badge {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-light);
  font-weight: 500;
}
.hero__badge-icon { color: var(--color-accent); font-weight: 700; }

@media (min-width: 768px)  { .hero__heading { font-size: 3.2rem; } }
@media (min-width: 1024px) { .hero__heading { font-size: 3.8rem; } }

/* ── Hero background slider ──────────────────────────────────
   Layer order inside .hero (position: relative; overflow: hidden):
     1  .hero-background-slider   — full-bleed image frames
     2  .hero__overlay            — gold ambient + dark tint
     3  .hero__content            — foreground text / buttons
   ─────────────────────────────────────────────────────────── */
.hero-background-slider {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Dark gradient mask that keeps gold/white text readable
   regardless of which image is showing underneath          */
.hero-background-slider::after {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        2;           /* above the slide frames inside the slider */
  background:     linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6));
  pointer-events: none;
}

/* ── Individual slide frames ──────────────────────────────── */
.hero-bg-slide {
  position:            absolute;
  inset:               0;
  z-index:             1;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             0;
  animation:           heroCrossFade 15s ease-in-out infinite;
  animation-fill-mode: both;  /* keeps slides hidden during their delay */
}

/* Placeholder tones — replace with background-image once photos are ready */
.hero-bg-slide--1 {
  background-color:   #1a1f2e; /* Golden Temple at night */
  animation-delay:    0s;
}
.hero-bg-slide--2 {
  background-color:   #0d1117; /* Luxury sedan on open highway */
  animation-delay:    5s;
}
.hero-bg-slide--3 {
  background-color:   var(--color-on-accent); /* Amritsar airport pickup terminal */
  animation-delay:    10s;
}

/* Crossfade cycle — 15 s total (3 slides × 5 s each)
   Timeline per slide:
     0 %  →  8 %  fade in     ( 0 – 1.2 s )
     8 %  → 25 %  hold        ( 1.2 – 3.75 s )
    25 %  → 33 %  fade out    ( 3.75 – 4.95 s )
    33 %  → 100 % hidden      ( 5 – 15 s )        */
@keyframes heroCrossFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  25%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Foreground content wrapper ──────────────────────────── */
.hero-content-foreground {
  position: relative;
  z-index:  2;  /* within the .hero__content stacking context (z-index 3) */
}

/* ════════════════════════════════════════════════════════════
   6b. TRUST STATS BAR
   ════════════════════════════════════════════════════════════ */
.trust-stats {
  background:   var(--color-primary);
  border-top:   2px solid rgba(245,158,11,.25);
  border-bottom: 2px solid rgba(245,158,11,.25);
  padding-block: var(--space-lg);
}

.trust-stats__grid {
  list-style: none;
  display:    grid;
  grid-template-columns: repeat(2, 1fr);
  gap:        var(--space-md) var(--space-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .trust-stats__grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  position:       relative;
}

/* Vertical dividers on desktop */
@media (min-width: 768px) {
  .trust-stat--divider::before {
    content:  '';
    position: absolute;
    left:     0;
    top:      10%;
    height:   80%;
    width:    1px;
    background: rgba(245,158,11,.3);
  }
}

.trust-stat__number {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--color-accent);
  line-height: 1;
}

@media (min-width: 768px) {
  .trust-stat__number { font-size: 2.4rem; }
}

.trust-stat__stars {
  color:       var(--color-accent);
  font-size:   var(--font-size-sm);
  letter-spacing: .1em;
}

.trust-stat__label {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-light);
  font-weight: 500;
  margin-top:  2px;
}

/* ════════════════════════════════════════════════════════════
   7. SERVICES GRID
   ════════════════════════════════════════════════════════════ */
.services__grid {
  list-style:            none;
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
}

@media (min-width: 480px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background:     var(--color-surface);
  border-radius:  var(--radius);
  padding:        var(--space-xl);
  box-shadow:     var(--shadow);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  border:         1px solid var(--color-border);
  transition:     transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.service-card__icon  { width: 56px; height: 56px; margin-bottom: var(--space-xs); flex-shrink: 0; }
.service-card__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.service-card__desc  { font-size: var(--font-size-sm); color: var(--color-text-muted); flex-grow: 1; line-height: 1.65; }
.service-card__link  { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent); margin-top: auto; padding-top: var(--space-xs); }
.service-card__link:hover { color: var(--color-accent-dark); }

.service-card--cta {
  background:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
}
.service-card--cta .service-card__title { color: var(--color-surface); }
.service-card--cta .service-card__desc  { color: var(--color-surface); opacity: .7; }

/* ── Service card with photo (regular grid cards) ──────────── */
.service-card--with-img {
  padding:   0;
  overflow:  hidden;
}

.service-card__img {
  display:         block;
  width:           100%;
  height:          200px;
  object-fit:      cover;
  object-position: center;
  transition:      transform var(--transition-slow);
}
.service-card--with-img:hover .service-card__img { transform: scale(1.04); }

.service-card--with-img .service-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  padding:        var(--space-lg);
  flex:           1;
}

/* ── Featured airport card ────────────────────────────────── */
.service-card--featured {
  grid-column:    1 / -1;     /* spans all columns */
  padding:        0;
  overflow:       hidden;
  flex-direction: row;        /* image left, text right */
  align-items:    stretch;
  gap:            0;
}

/* Stack on mobile */
@media (max-width: 767px) {
  .service-card--featured { flex-direction: column; }
}

.service-card__photo {
  display:             block;
  width:               100%;
  height:              240px;
  object-fit:          cover;
  object-position:     center;
  flex-shrink:         0;
}

@media (min-width: 768px) {
  .service-card__photo {
    width:      60%;
    height:     auto;
    min-height: 320px;
    max-height: 420px;
  }
}

.service-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  padding:        var(--space-xl);
  justify-content: center;
}

@media (min-width: 768px) {
  .service-card__body { padding: var(--space-2xl); }
}

.service-card__badges {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
}
.service-card__badges li {
  font-size:   var(--font-size-sm);
  font-weight: 600;
  color:       var(--color-primary);
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

/* ════════════════════════════════════════════════════════════
   8. REVIEWS GRID
   ════════════════════════════════════════════════════════════ */
.reviews__grid {
  list-style:            none;
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
  align-items:           start;
}
@media (min-width: 768px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  position:       relative;
  background:     rgba(255,255,255,.05);
  border:         1px solid rgba(255,255,255,.1);
  border-radius:  var(--radius);
  padding:        var(--space-xl);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  transition:     transform var(--transition), box-shadow var(--transition);
}
.review-card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.review-card--featured {
  background:   rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.4);
  transform:    scale(1.02);
}
.review-card--featured:hover { transform: scale(1.02) translateY(-5px); }

.review-card__stars   { font-size: 1.25rem; color: var(--color-accent); letter-spacing: .12em; }

.review-card__body {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-on-dark);
  line-height: 1.75;
  font-style:  normal;
}
.review-card__body::before {
  content:        '\201C';
  font-size:      3rem;
  color:          var(--color-accent);
  opacity:        .35;
  line-height:    0;
  vertical-align: -1rem;
  margin-right:   .08em;
}

.review-card__footer {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  margin-top:  auto;
}
.review-card__avatar {
  width:            44px;
  height:           44px;
  min-width:        44px;
  border-radius:    50%;
  background:       var(--color-accent);
  color:            var(--color-primary);
  font-weight:      700;
  font-size:        var(--font-size-sm);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
.review-card__name     { display: block; font-style: normal; font-weight: 600; color: var(--color-surface); font-size: var(--font-size-sm); }
.review-card__location { font-size: .78rem; color: var(--color-text-muted); }
.review-card__badge {
  position:      absolute;
  top:           var(--space-md);
  right:         var(--space-md);
  background:    var(--color-accent);
  color:         var(--color-primary);
  font-size:     .7rem;
  font-weight:   700;
  padding:       .2rem .65rem;
  border-radius: 2rem;
}

/* ════════════════════════════════════════════════════════════
   9. GALLERY GRID
   ════════════════════════════════════════════════════════════ */
.gallery__grid {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-sm);
}
@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .gallery__grid li:first-child { grid-column: span 2; }
}

.gallery-item {
  position:      relative;
  border-radius: var(--radius);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
  cursor:        pointer;
}
.gallery-item--amber { background: linear-gradient(135deg, var(--color-primary) 0%, #292010 100%); }
.gallery-item--slate { background: linear-gradient(135deg, var(--color-primary) 0%, #0f1929 100%); }

.gallery-item__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery-item:hover .gallery-item__img { transform: scale(1.07); }

.gallery-item__placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-xl);
  transition:      transform var(--transition-slow);
}
.gallery-item:hover .gallery-item__placeholder { transform: scale(1.07); }
.gallery-item__placeholder svg { width: 72px; height: 72px; opacity: .65; }

.gallery-item__overlay {
  position:    absolute;
  inset:       0;
  background:  linear-gradient(to top, rgba(15,23,42,.85) 0%, transparent 55%);
  display:     flex;
  align-items: flex-end;
  padding:     var(--space-md);
  opacity:     0;
  transition:  opacity var(--transition);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-within .gallery-item__overlay { opacity: 1; }

.gallery-item__label { color: var(--color-surface); font-size: var(--font-size-sm); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   10. CTA STRIP
   ════════════════════════════════════════════════════════════ */
.cta-strip {
  background:    linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  padding-block: var(--space-2xl);
}
.cta-strip__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-xl);
  text-align:     center;
}
.cta-strip__heading { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-xs); }
.cta-strip__sub     { color: var(--color-primary); opacity: .72; font-size: var(--font-size-md); }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

.cta-strip .btn-primary { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.cta-strip .btn-primary:hover { background: var(--color-primary-dark); }
.cta-strip .btn-outline { border-color: var(--color-primary); color: var(--color-primary); }
.cta-strip .btn-outline:hover { background: var(--color-primary); color: var(--color-surface); }

@media (min-width: 768px) {
  .cta-strip__inner   { flex-direction: row; justify-content: space-between; text-align: left; }
  .cta-strip__heading { font-size: var(--font-size-2xl); }
  .cta-strip__actions { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   11. BOOKING PAGE LAYOUT
   ════════════════════════════════════════════════════════════ */
.booking-hero {
  background:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding-block: var(--space-2xl);
  text-align:    center;
}
.booking-hero__heading { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-surface); margin-bottom: var(--space-sm); }
.booking-hero__sub     { color: var(--color-text-light); font-size: var(--font-size-md); }
@media (min-width: 768px) { .booking-hero__heading { font-size: var(--font-size-2xl); } }

.booking-section  { padding-block: var(--space-2xl); }
.booking-layout   { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 1024px) {
  .booking-layout { grid-template-columns: 1fr 340px; align-items: start; }
}

/* ════════════════════════════════════════════════════════════
   12. BOOKING FORM — RESPONSIVE INPUTS
   ════════════════════════════════════════════════════════════ */
.booking-form-wrap {
  background:    var(--color-surface);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-md);
  border:        1px solid var(--color-border);
  overflow:      hidden;
}

.booking-form {
  padding:        var(--space-lg);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}
@media (min-width: 480px) {
  .booking-form { padding: var(--space-xl); }
}

.booking-form__heading    { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-xs); }
.booking-form__subheading { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.booking-form__submit     { width: 100%; font-size: var(--font-size-lg); padding: var(--space-md); gap: var(--space-sm); }
.booking-form__note       { font-size: .77rem; color: var(--color-text-muted); text-align: center; line-height: 1.5; }

/* Fieldsets */
.form-fieldset {
  border:         1px solid var(--color-border);
  border-radius:  var(--radius);
  padding:        var(--space-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}
@media (min-width: 480px) {
  .form-fieldset { padding: var(--space-lg); }
}
.form-legend {
  font-size:      var(--font-size-sm);
  font-weight:    700;
  color:          var(--color-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-inline: var(--space-xs);
}

/* Form group */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}
.form-group--error .form-input {
  border-color: var(--color-error);
  background:   var(--color-error-bg);
}

/* Date + Time side-by-side */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap:     var(--space-md);
}
@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* Labels */
.form-label    { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.form-required { color: var(--color-error); margin-left: .15em; }

/* Inputs — core responsive styles */
.form-input {
  width:          100%;
  min-height:     44px;           /* touch target */
  padding:        var(--space-sm) var(--space-md);
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius);
  font-size:      var(--font-size-md); /* prevents iOS zoom-on-focus (≥16px) */
  color:          var(--color-text);
  background:     var(--color-surface);
  outline:        none;
  font-family:    inherit;
  transition:     border-color var(--transition), box-shadow var(--transition), background var(--transition);
  /* Prevent inputs overflowing on 320px screens */
  max-width:      100%;
  appearance:     none;
  -webkit-appearance: none;
}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(245,158,11,.18);
  background:   var(--color-input-focus-bg);
}
.form-input::placeholder { color: var(--color-text-muted); opacity: .7; }

/* Restore date/time native controls on mobile */
input[type="date"],
input[type="time"] { cursor: pointer; }

/* Error & alert text */
.form-error {
  font-size:   var(--font-size-sm);
  color:       var(--color-error);
  font-weight: 500;
}
.form-alert {
  padding:       var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  font-size:     var(--font-size-sm);
  font-weight:   500;
}
.form-alert--error   { background: var(--color-error-bg);   border: 1px solid var(--color-error-border);   color: var(--color-error); }
.form-alert--success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success); }

/* ════════════════════════════════════════════════════════════
   13. BOOKING SIDEBAR INFO CARDS
   ════════════════════════════════════════════════════════════ */
.booking-layout__sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }

.info-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--space-xl);
  box-shadow:    var(--shadow);
}
.info-card--contact {
  background:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
  color:        var(--color-surface);
}
.info-card--contact p { color: var(--color-text-light); font-size: var(--font-size-sm); margin-bottom: var(--space-sm); }

.info-card__heading {
  font-size:      var(--font-size-md);
  font-weight:    700;
  color:          var(--color-accent);
  margin-bottom:  var(--space-md);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.info-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.info-card__list li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.info-card__list li span { color: var(--color-accent); font-weight: 700; }

.info-card__phone {
  display:      flex;
  align-items:  center;
  gap:          var(--space-sm);
  font-size:    var(--font-size-lg);
  font-weight:  700;
  color:        var(--color-accent);
  margin-block: var(--space-sm);
}
.info-card__hours { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ════════════════════════════════════════════════════════════
   14. FOOTER
   ════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-primary);
  color:      var(--color-surface);
  margin-top: var(--space-2xl);
}

.footer-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-xl);
  padding-block:         var(--space-2xl);
}
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr .9fr 1fr 1.2fr .9fr; } }

.footer-brand__name    { color: var(--color-accent); font-size: var(--font-size-lg); margin-bottom: var(--space-sm); font-weight: 700; }
.footer-brand__tagline { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.7; }

/* Logo: white pill box so opaque PNG shows correctly on dark footer */
.footer-brand__logo-box {
  display:      inline-block;
  background:   var(--color-surface);
  border-radius:8px;
  padding:      6px 10px;
  margin-bottom:.75rem;
}
.footer-brand__logo-box img { display: block; width: 170px; height: auto; }

/* QR code: white box so dark-background QR image is clearly visible */
.footer-qr__box {
  display:      inline-block;
  background:   var(--color-surface);
  border-radius:8px;
  padding:      10px;
  margin-bottom:.5rem;
}
.footer-qr__box img {
  display: block;
  width:   110px;
  height:  auto;
}
.footer-qr__caption {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-light);
  line-height: 1.4;
}

/* Footer helpers (moved from inline styles) */
.footer-brand__tagline--spaced { margin-top: var(--space-xs); }
.footer-map-link {
  color:           var(--color-accent);
  font-size:       .85em;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             .3em;
  margin-top:      .35em;
}
.footer-map-link:hover { color: var(--color-accent-dark); }

.footer-nav__heading,
.footer-contact__heading {
  color:          var(--color-accent);
  font-size:      var(--font-size-sm);
  font-weight:    700;
  margin-bottom:  var(--space-md);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.footer-nav__list,
.footer-contact__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }

.footer-nav__list a { color: var(--color-text-muted); font-size: var(--font-size-sm); transition: color var(--transition); }
.footer-nav__list a:hover { color: var(--color-accent); }

.footer-contact__list li { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.footer-contact__list a  { color: var(--color-text-muted); transition: color var(--transition); }
.footer-contact__list a:hover { color: var(--color-accent); }

.footer-bottom { background: var(--color-accent); padding-block: var(--space-sm); }
.footer-bottom__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
}
.footer-bottom__copy  { color: var(--color-on-accent); font-size: var(--font-size-xs); font-weight: 600; }
.footer-bottom__legal { list-style: none; display: flex; gap: var(--space-md); }
.footer-bottom__legal a { color: var(--color-on-accent); font-size: var(--font-size-xs); font-weight: 600; transition: opacity var(--transition); text-decoration: none; }
.footer-bottom__legal a:hover { opacity: .75; }

/* ════════════════════════════════════════════════════════════
   15. MOBILE STICKY BOTTOM NAVIGATION BAR
   Fixed to viewport bottom on mobile only.
   Two full-width action buttons: Call Now + WhatsApp.
   ════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  z-index:          300;             /* above site header */
  height:           var(--mobile-nav-height);
  display:          grid;
  grid-template-columns: 1fr 1fr;
  background:       var(--color-primary-dark);
  border-top:       2px solid var(--color-primary-light);
  box-shadow:       0 -4px 24px rgba(0,0,0,.35);
  /* Safe-area padding for notched phones (iPhone X+) */
  padding-bottom:   env(safe-area-inset-bottom, 0px);
}

/* Hidden on desktop (≥1024) — inline header actions + right-edge tabs take over */
@media (min-width: 1024px) {
  .mobile-bottom-nav { display: none; }
}

.mobile-bottom-nav__btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  font-size:       var(--font-size-xs);
  font-weight:     700;
  letter-spacing:  .04em;
  text-transform:  uppercase;
  text-decoration: none;
  min-height:      44px;
  transition:      background var(--transition), transform var(--transition);
  border:          none;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav__btn:active { transform: scale(.97); }

.mobile-bottom-nav__btn-icon {
  font-size:   1.35rem;
  line-height: 1;
}

/* Call Now — charcoal background, gold text */
.mobile-bottom-nav__btn--call {
  background: var(--color-primary);
  color:      var(--color-accent);
  border-right: 1px solid var(--color-primary-light);
}
.mobile-bottom-nav__btn--call:hover {
  background: var(--color-primary-light);
  color:      var(--color-accent);
}

/* WhatsApp — green background, white text */
.mobile-bottom-nav__btn--whatsapp {
  background: var(--color-whatsapp);
  color:      var(--color-surface);
}
.mobile-bottom-nav__btn--whatsapp:hover {
  background: var(--color-whatsapp-dark);
  color:      var(--color-surface);
}

/* ════════════════════════════════════════════════════════════
   16. UTILITY CLASSES
   ════════════════════════════════════════════════════════════ */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space:nowrap;
  border:     0;
}
.text-center  { text-align: center; }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.mt-auto      { margin-top: auto; }

/* ════════════════════════════════════════════════════════════
   17. TOURIST SLIDER SECTION (#tourist-slider-section)
   ════════════════════════════════════════════════════════════ */
#tourist-slider-section {
  background:    var(--color-primary);
  padding-block: var(--space-3xl);
  overflow:      hidden;
}

#tourist-slider-section .section-title    { color: var(--color-surface); }
#tourist-slider-section .section-subtitle { color: var(--color-text-light); }

.tss__header { margin-bottom: var(--space-xl); }

/* ── Scroll-snap track ─────────────────────────────────── */
.tss__track {
  display:              flex;
  gap:                  var(--space-lg);
  overflow-x:           auto;
  scroll-snap-type:     x mandatory;
  scroll-behavior:      smooth;
  -webkit-overflow-scrolling: touch;
  list-style:           none;
  padding:              var(--space-xs) var(--space-xs) var(--space-lg);
  margin-inline:        calc(-1 * var(--space-xs));
  /* Hide scrollbar — Firefox */
  scrollbar-width:      none;
}
/* Hide scrollbar — WebKit */
.tss__track::-webkit-scrollbar { display: none; }

/* ── Individual card ───────────────────────────────────── */
.tss__card {
  /* Mobile: 85% viewport width */
  flex:             0 0 85%;
  scroll-snap-align:start;
  scroll-snap-stop: always;
  border-radius:    var(--radius-lg);
  overflow:         hidden;
  position:         relative;
  min-height:       420px;
  /* Charcoal-to-dark gradient base — gold accent glow at top */
  background:       linear-gradient(
                      160deg,
                      rgba(245,158,11,.18) 0%,
                      var(--color-primary-light) 35%,
                      var(--color-primary-dark)  100%
                    );
  border:           1px solid rgba(245,158,11,.2);
  box-shadow:       0 4px 24px rgba(0,0,0,.35);
  transition:       transform var(--transition), box-shadow var(--transition),
                    border-color var(--transition);
}
.tss__card:hover {
  transform:    translateY(-6px);
  box-shadow:   0 16px 48px rgba(0,0,0,.5);
  border-color: rgba(245,158,11,.5);
}

/* Tablet: ~2 visible cards */
@media (min-width: 640px)  { .tss__card { flex: 0 0 46%; } }

/* Desktop: 4 cards visible — ~30% each with gap */
@media (min-width: 1024px) { .tss__card { flex: 0 0 calc(25% - var(--space-lg) * 3 / 4); } }

/* ── Semi-transparent dark gradient overlay (contrast mask) */
.tss__card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
                to top,
                rgba(15,23,42,.95)  0%,
                rgba(15,23,42,.55) 55%,
                rgba(15,23,42,.1)  100%
              );
  pointer-events: none;
  z-index:    1;
}

/* ── Card inner — stacks content above the overlay ──────── */
.tss__card-inner {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-sm);
  padding:        var(--space-xl);
  height:         100%;
  min-height:     420px;
}

/* ── Image + SVG fallback wrapper ─────────────────────── */
.tss__img-wrap {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;     /* scales with card width on every breakpoint */
  border-radius: var(--radius);
  overflow:      hidden;
  isolation:     isolate;
  margin-bottom: var(--space-xs);
  background:    var(--color-primary-dark);
}

.tss__img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  transition:      transform var(--transition-slow);
}
.tss__card:hover .tss__img { transform: scale(1.06); }

/* SVG icon sits centred inside the wrap as fallback */
.tss__img-wrap .tss__icon {
  position: relative;
  margin:   0;
  display:  flex;
}

/* ── SVG icon (standalone, outside img-wrap) ───────────── */
.tss__icon {
  width:         68px;
  height:        68px;
  margin-bottom: var(--space-xs);
  filter:        drop-shadow(0 0 12px rgba(245,158,11,.4));
}
.tss__icon svg { width: 100%; height: 100%; }

/* ── Duration badge ────────────────────────────────────── */
.tss__badge {
  display:        inline-flex;
  align-items:    center;
  background:     rgba(245,158,11,.18);
  border:         1px solid rgba(245,158,11,.5);
  color:          var(--color-accent);
  font-size:      var(--font-size-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:        .25rem .75rem;
  border-radius:  2rem;
  backdrop-filter:blur(4px);
}

/* ── Card text ─────────────────────────────────────────── */
.tss__heading {
  font-size:   clamp(var(--font-size-lg), 2.2vw, var(--font-size-xl));
  font-weight: 800;
  color:       var(--color-surface);
  line-height: 1.2;
  margin-top:  var(--space-xs);
}

.tss__subheading {
  font-size:   var(--font-size-sm);
  font-weight: 600;
  color:       var(--color-accent);
  margin-top:  -.2rem;
  opacity:     .9;
}

.tss__desc {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-on-dark);
  line-height: 1.75;
  flex-grow:   1;
}

/* ── CTA button ────────────────────────────────────────── */
.tss__btn {
  margin-top:   auto;
  background:   var(--color-accent);
  color:        var(--color-primary);
  border:       2px solid var(--color-accent);
  border-radius:2rem;
  font-size:    var(--font-size-sm);
  font-weight:  700;
  padding:      var(--space-xs) var(--space-lg);
  min-height:   40px;
  transition:   background var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
}
.tss__btn:hover,
.tss__btn:focus-visible {
  background:   var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color:        var(--color-primary);
  transform:    scale(1.05);
  box-shadow:   0 4px 20px rgba(245,158,11,.4);
}

/* ── Scroll hint dots (pure CSS, no JS) ─────────────────── */
.tss__track::after {
  content:      '';
  flex:         0 0 var(--space-xs);
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════
   18. COMFORT & STYLE BANNER (#comfort-style-banner)
   ════════════════════════════════════════════════════════════ */
#comfort-style-banner {
  background:    var(--color-primary);
  padding-block: var(--space-3xl);
  text-align:    center;
}

.csb__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-xl);
  max-width:      760px;
  margin-inline:  auto;
}

.csb__heading {
  font-size:     clamp(1.6rem, 4vw, 2.6rem);
  font-weight:   900;
  color:         var(--color-accent);
  line-height:   1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--space-sm);
}

.csb__sub {
  font-size:   clamp(var(--font-size-md), 2vw, var(--font-size-lg));
  color:       var(--color-text-on-dark);
  line-height: 1.75;
  max-width:   540px;
  margin-inline: auto;
}

.csb__cta {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-xs);
  background:    var(--color-accent);
  color:         var(--color-primary);
  border:        2px solid var(--color-accent);
  border-radius: 3rem;
  font-size:     var(--font-size-md);
  font-weight:   700;
  padding:       var(--space-sm) var(--space-2xl);
  min-height:    50px;
  white-space:   nowrap;
  transition:    background var(--transition), border-color var(--transition),
                 color var(--transition), transform var(--transition),
                 box-shadow var(--transition);
}
.csb__cta:hover,
.csb__cta:focus-visible {
  background:   var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color:        var(--color-primary);
  transform:    scale(1.05);
  box-shadow:   0 8px 28px rgba(245,158,11,.35);
}

/* Mobile — tighter padding, full-width button */
@media (max-width: 479px) {
  #comfort-style-banner { padding-block: var(--space-2xl); }
  .csb__cta {
    width:         100%;
    justify-content: center;
    border-radius: var(--radius);
  }
}

/* Tablet and up — restore auto width */
@media (min-width: 480px) {
  .csb__cta { width: auto; }
}

/* ════════════════════════════════════════════════════════════
   18. DRIVER AVATAR
   ════════════════════════════════════════════════════════════ */
.driver-avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  object-fit:    cover;
  object-position: center top;
  flex-shrink:   0;
  border:        2px solid var(--color-border);
  background:    var(--color-primary-light);
  display:       block;
}

.driver-avatar-cell {
  display:     flex;
  align-items: center;
  gap:         .6rem;
}

/* ════════════════════════════════════════════════════════════
   19. GALLERY ADMIN CARD GRID (admin.php)
   ════════════════════════════════════════════════════════════ */
.gallery-admin-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--space-md);
  margin-top:            var(--space-md);
}

.gallery-admin-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  overflow:      hidden;
  display:       flex;
  flex-direction:column;
  transition:    box-shadow var(--transition);
}
.gallery-admin-card:hover { box-shadow: var(--shadow-md); }
.gallery-admin-card--hidden { opacity: .5; }

.gallery-admin-card__img-wrap {
  position:   relative;
  height:     130px;
  background: var(--color-primary-light);
  overflow:   hidden;
}

.gallery-admin-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-slow);
}
.gallery-admin-card:hover .gallery-admin-card__img { transform: scale(1.05); }

.gallery-admin-card__broken {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .25rem;
  color:           var(--color-text-muted);
  font-size:       var(--font-size-xs);
}

.gallery-admin-card__meta {
  padding:        .6rem .75rem;
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
  flex:           1;
}

.gallery-admin-card__label {
  font-size:   var(--font-size-sm);
  font-weight: 600;
  color:       var(--color-primary);
  line-height: 1.3;
}

.gallery-admin-card__accent {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
  text-transform: capitalize;
}

.gallery-admin-card__order {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

.gallery-admin-card__delete-form { padding: .4rem .75rem .6rem; }

.gallery-admin-card__delete-btn {
  width:         100%;
  background:    transparent;
  border:        1px solid var(--color-error-border);
  border-radius: var(--radius-sm);
  color:         var(--color-error);
  font-size:     var(--font-size-xs);
  font-weight:   600;
  padding:       .3rem .5rem;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
}
.gallery-admin-card__delete-btn:hover {
  background: var(--color-error-bg);
}

/* ════════════════════════════════════════════════════════════
   19. GOOGLE TRANSLATE WIDGET
   Lives in #google_translate_element inside <nav>.
   Mobile: full-width row at the bottom of the open menu.
   Desktop: compact inline dropdown alongside the nav links.
   ════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────
   The widget injects its own markup asynchronously. We reserve a
   fixed box and clip overflow so its late load never changes the
   header height or shifts the nav row. */
#google_translate_element {
  display:     flex;
  align-items: center;
  overflow:    hidden;
}

/* Mobile / tablet (hamburger) — full-width padded row in the menu */
@media (max-width: 1023px) {
  #google_translate_element {
    padding:    var(--space-sm) var(--space-xl);
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: var(--space-xs);
  }
}

/* Desktop — fixed-size, isolated compact dropdown */
@media (min-width: 1024px) {
  #google_translate_element {
    margin-left: var(--space-xs);
    width:       128px;
    height:      34px;
    flex-shrink: 0;
  }
}

/* ── Strip Google's own branding / "Powered by" text ───── */
.goog-te-gadget {
  font-size:  0    !important;  /* hides inline text nodes */
  color:      transparent !important;
  line-height: 0   !important;
}
.goog-te-gadget > span,
.goog-te-gadget > a,
.goog-logo-link { display: none !important; }

/* ── The <select> dropdown ─────────────────────────────── */
.goog-te-combo {
  /* Reset browser chrome */
  appearance:         none;
  -webkit-appearance: none;

  /* Palette — light surface, muted border, dark text (white header) */
  background-color: rgba(0,0,0,.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231E293B'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right .6rem center;
  background-size:     10px 6px;

  border:        1px solid rgba(0,0,0,.15);
  border-radius: var(--radius-sm);
  color:         var(--color-primary);

  font-family: var(--font-base);
  font-size:   var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .02em;

  /* Compact for desktop nav row */
  padding:    .35rem 1.8rem .35rem .65rem;
  min-height: 32px;
  width:      100%;
  max-width:  128px;

  cursor:     pointer;
  transition: border-color var(--transition),
              background-color var(--transition),
              color var(--transition);
}

/* Hover / focus state */
.goog-te-combo:hover,
.goog-te-combo:focus {
  border-color:     var(--color-accent);
  background-color: rgba(245,158,11,.08);
  color:            var(--color-primary);
  outline:          none;
  box-shadow:       0 0 0 3px rgba(245,158,11,.12);
}

/* Mobile / tablet (hamburger menu) — full-width, 44 px touch target */
@media (max-width: 1023px) {
  .goog-te-combo {
    max-width:        100%;
    width:            100%;
    font-size:        var(--font-size-sm);
    min-height:       44px;
    padding:          .65rem 2.25rem .65rem var(--space-md);
    background-color: rgba(0,0,0,.04);
    color:            var(--color-primary);
  }
}

/* ── Suppress all Google Translate injected UI ─────────── */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-ftab-float,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip-content,
.goog-text-highlight          { display: none !important; }

/* Prevent Google shifting the page body down by 40px */
body                          { top: 0 !important; }
body.translated-ltr,
body.translated-rtl           { top: 0 !important; margin-top: 0 !important; }

/* ════════════════════════════════════════════════════════════
   FLOAT ACTIONS — right-edge pill tabs (desktop only)
   ════════════════════════════════════════════════════════════ */
.float-actions {
  position:       fixed;
  right:          0;
  top:            50%;
  transform:      translateY(-50%);
  z-index:        30;
  display:        none;
  flex-direction: column;
  gap:            8px;
}
/* Shown only on desktop (≥1024), paired with the inline header nav.
   Below this the sticky mobile bottom bar provides the same actions. */
@media (min-width: 1024px) { .float-actions { display: flex; } }

.float-tab {
  width:           66px;
  min-height:      72px;
  padding:         8px 4px;
  color:           var(--color-surface);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-size:       .7rem;
  font-weight:     800;
  border-radius:   10px 0 0 10px;
  text-decoration: none;
  line-height:     1.25;
  box-shadow:      -2px 2px 10px rgba(0,0,0,.25);
  transition:      opacity var(--transition), transform var(--transition);
  gap:             4px;
  overflow-wrap:   break-word;
}
.float-tab svg   { width: 20px; height: 20px; flex-shrink: 0; }
.float-tab:hover { opacity: .92; transform: translateX(-3px); }
.float-tab.call  { background: var(--color-call-tab); }
.float-tab.wa    { background: var(--color-wa-tab); }

/* ════════════════════════════════════════════════════════════
   FOOTER SOCIAL ICONS
   ════════════════════════════════════════════════════════════ */
.footer-social {
  display:   flex;
  gap:       8px;
  margin-top:.875rem;
  flex-wrap: wrap;
}
.footer-social__icon {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-surface);
  text-decoration: none;
  transition:      opacity .2s, transform .2s;
  flex-shrink:     0;
}
.footer-social__icon:hover { opacity: .85; transform: translateY(-2px); }
.footer-social__icon--fb { background: var(--color-social-fb); }
.footer-social__icon--ig { background: var(--color-social-ig); }
.footer-social__icon--wa { background: var(--color-whatsapp); }
.footer-social__icon--yt { background: var(--color-social-yt); }

/* ════════════════════════════════════════════════════════════
   20. SHARED PAGE HERO  (.page-hero)
   Used by about / contact / services / tours so the hero is
   styled by the always-loaded style.css (no per-page CSS file).
   ════════════════════════════════════════════════════════════ */
.page-hero {
  position:      relative;
  overflow:      hidden;
  background:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding-block: var(--space-2xl) var(--space-3xl);
}
/* gold ambient glow — matches the home hero */
.page-hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 60% 70% at 80% 40%, var(--color-accent-muted) 0%, transparent 70%);
  pointer-events: none;
}
/* Optional photographic backdrop so secondary pages feel premium.
   Image sits behind the dark gradient at low opacity for legibility. */
.page-hero--photo::after {
  content:             '';
  position:            absolute;
  inset:               0;
  z-index:             0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             .16;
  pointer-events:      none;
}
.page-hero--about::after    { background-image: url('/assets/images/attractions/golden-temple.png'); }
.page-hero--services::after { background-image: url('/assets/images/local-sightseeing.png'); }
.page-hero--contact::after  { background-image: url('/assets/images/attractions/partition-museum.png'); }
.page-hero--tours::after    { background-image: url('/assets/images/attractions/wagah-border.png'); }

.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero .section-eyebrow { margin-bottom: var(--space-sm); }

.page-hero__heading {
  font-size:     2.2rem;
  font-weight:   900;
  color:         var(--color-surface);
  line-height:   1.15;
  margin-bottom: var(--space-md);
}
@media (min-width: 768px)  { .page-hero__heading { font-size: 2.8rem; } }
@media (min-width: 1024px) { .page-hero__heading { font-size: 3.4rem; } }

.page-hero__sub {
  font-size:     var(--font-size-lg);
  color:         var(--color-text-on-dark);
  line-height:   1.7;
  max-width:     580px;
  margin-bottom: var(--space-xl);
}
.page-hero__badges {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-md) var(--space-lg);
}
.page-hero__badge {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-light);
  font-weight: 500;
}
.page-hero__badge-icon { color: var(--color-accent); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   21. SERVICES PAGE  (moved out of services.php inline <style>)
   Mobile-first: single column. Two columns from 768px.
   ════════════════════════════════════════════════════════════ */
.services-page { padding-block: var(--space-xl) var(--space-2xl); }

.service-detail {
  display:               grid;
  grid-template-columns: 1fr;            /* mobile: stacked, single column */
  gap:                   var(--space-lg);
  align-items:           center;
  padding-block:         var(--space-2xl);
}
@media (min-width: 768px) {
  .service-detail {
    grid-template-columns: 300px 1fr;    /* media left, text right */
    gap:                   var(--space-2xl);
    align-items:           center;
  }
  /* Reverse rows: media on the right */
  .service-detail--reverse .service-detail__media { order: 2; }
}

.service-detail__media {
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--color-accent-muted);
  aspect-ratio:  16 / 11;
}
.service-detail__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-slow);
}
.service-detail:hover .service-detail__img { transform: scale(1.04); }

/* Legacy SVG icon (kept usable if no photo is supplied) */
.service-detail__icon { display: flex; justify-content: center; }
.service-detail__icon svg { width: 100%; max-width: 140px; height: auto; }

.service-detail__title {
  font-size:     clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight:   700;
  color:         var(--color-primary);
  margin-bottom: var(--space-sm);
}
.service-detail__desc {
  color:         var(--color-text-muted);
  line-height:   1.7;
  margin-bottom: var(--space-md);
}
.service-detail__list {
  list-style:     none;
  margin:         0 0 var(--space-lg);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}
.service-detail__list li {
  display:      flex;
  gap:          var(--space-sm);
  color:        var(--color-text);
  font-size:    var(--font-size-sm);
  line-height:  1.5;
}
.service-detail__list li::before {
  content:     '✔';
  color:       var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.service-detail__cta { display: inline-flex; }

.service-divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     0;
}

/* ════════════════════════════════════════════════════════════
   22. ABOUT PAGE  (moved out of about.php inline <style>)
   ════════════════════════════════════════════════════════════ */
.about-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 340px; align-items: start; }
}
.about-text { display: flex; flex-direction: column; gap: var(--space-md); }
.about-text p { color: var(--color-text-muted); line-height: 1.8; }

.about-stats {
  list-style:            none;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-md);
}
.about-stat {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg) var(--space-md);
  text-align:    center;
}
.about-stat__value {
  display:     block;
  font-size:   clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color:       var(--color-accent);
}
.about-stat__label {
  display:    block;
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin-top: var(--space-xs);
}

.about-values {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--space-lg);
}
.value-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
  box-shadow:    var(--shadow-sm);
}
.value-card__icon  { font-size: 2rem; margin-bottom: var(--space-sm); }
.value-card__title { font-size: var(--font-size-md); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-sm); }
.value-card__desc  { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; }

.why-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
  max-width:      800px;
  margin-inline:  auto;
}
.why-item { display: flex; gap: var(--space-md); align-items: flex-start; }
.why-item__check {
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  background:      var(--color-accent);
  color:           var(--color-primary);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--font-size-sm);
  font-weight:     700;
  margin-top:      .1rem;
}
.why-item div    { color: var(--color-text-muted); line-height: 1.7; }
.why-item strong { color: var(--color-primary); }

/* ════════════════════════════════════════════════════════════
   23. CONTACT PAGE  (moved out of contact.php inline <style>)
   ════════════════════════════════════════════════════════════ */
.contact-cards {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   var(--space-lg);
}
.contact-card {
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg);
  padding:        var(--space-xl) var(--space-lg);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-sm);
  box-shadow:     var(--shadow-sm);
}
.contact-card--whatsapp { border-color: var(--color-whatsapp); }
.contact-card__icon { font-size: 2.5rem; line-height: 1; color: var(--color-accent); }
.contact-card--whatsapp .contact-card__icon { color: var(--color-whatsapp); }
.contact-card__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.contact-card__desc  { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; }
.contact-card__action { min-width: 180px; max-width: 100%; }

.contact-info-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 768px) { .contact-info-grid { grid-template-columns: 1fr 1fr; } }

.contact-info__title {
  font-size:     var(--font-size-lg);
  font-weight:   700;
  color:         var(--color-primary);
  margin-bottom: var(--space-md);
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
}
.contact-address    { font-style: normal; color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-sm); }
.contact-info__note { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; }
.contact-hours { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-hours__row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-xs);
  font-size:             var(--font-size-sm);
}
@media (min-width: 480px) {
  .contact-hours__row { grid-template-columns: 150px 1fr; }
}
.contact-hours__row dt { font-weight: 600; color: var(--color-primary); }
.contact-hours__row dd { color: var(--color-text-muted); }



/* ════════════════════════════════════════════════════════════
   24. POLICY PAGES (privacy.php + terms.php)
   Moved verbatim out of per-page inline <style> blocks.
   ════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   Privacy Policy — Premium Editorial Typography
   All values reference the project CSS custom properties.
═══════════════════════════════════════════════════════════ */

.policy-wrap {
  background: var(--color-background);
  padding-block: 4rem 6rem;
}

/* ── Article shell ─────────────────────────────────────── */
.policy {
  max-width: 780px;
  margin-inline: auto;
}

/* ── Header ────────────────────────────────────────────── */
.policy__header {
  padding-bottom: 2.5rem;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 2.5rem;
}

.policy__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: .6rem;
}

.policy__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.15;
  margin-bottom: .75rem;
}

.policy__meta {
  font-size: .85rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.policy__meta time { color: var(--color-primary); font-weight: 600; }

.policy__intro {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: .9rem;
}

/* ── Table of contents ─────────────────────────────────── */
.policy__toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}

.policy__toc-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
}

.policy__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  counter-reset: toc-counter;
}

.policy__toc-list li {
  counter-increment: toc-counter;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .9rem;
}

.policy__toc-list li::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 1.4em;
}

.policy__toc-list a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .15s;
}

.policy__toc-list a:hover,
.policy__toc-list a:focus { color: var(--color-accent); }

/* ── Section ───────────────────────────────────────────── */
.policy__section {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2.5rem;
}

.policy__section--last {
  border-bottom: none;
  margin-bottom: 0;
}

.policy__section-title {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  scroll-margin-top: 5rem;
}

.policy__section-num {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--color-accent);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.policy__section p {
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 1rem;
  font-size: .975rem;
}

.policy__section a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy__section a:hover,
.policy__section a:focus { color: var(--color-accent); }

/* ── Subsection ────────────────────────────────────────── */
.policy__subsection {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

.policy__subsection-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .6rem;
}

/* ── Unordered list ────────────────────────────────────── */
.policy__list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.policy__list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: .975rem;
  line-height: 1.7;
}

.policy__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-top: .6rem;
}

.policy__list strong { color: var(--color-primary); }

/* ── Definition list ───────────────────────────────────── */
.policy__dl {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block: 1rem;
}

.policy__dl-item {
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.policy__dl-item dt {
  font-weight: 700;
  color: var(--color-primary);
  font-size: .95rem;
  margin-bottom: .5rem;
}

.policy__dl-item dd {
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.8;
}

/* ── Callout boxes ─────────────────────────────────────── */
.policy__callout {
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  font-size: .92rem;
  line-height: 1.75;
  margin-top: 1.25rem;
}

.policy__callout--info {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-text-muted);
}

.policy__callout--info strong { color: var(--color-warn-text); }

.policy__callout--action {
  background: var(--color-primary);
  border: none;
  color: rgba(255,255,255,.85);
}

.policy__callout--action strong { color: var(--color-surface); }

.policy__callout--action a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.policy__callout--action a:hover { text-decoration: underline; }

/* ── Contact block ─────────────────────────────────────── */
.policy__contact-block {
  font-style: normal;
  color: var(--color-text-muted);
  line-height: 2;
  font-size: .975rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  display: inline-block;
  margin-top: .5rem;
}

.policy__contact-block strong { color: var(--color-primary); }

.policy__contact-block a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy__contact-block a:hover { color: var(--color-accent); }

/* ── code tag ──────────────────────────────────────────── */
.policy__section code {
  font-family: 'Courier New', Courier, monospace;
  font-size: .85em;
  background: var(--color-surface-alt);
  padding: .1em .4em;
  border-radius: 4px;
  color: var(--color-primary);
}

/* ── Terms cancellation table ─────────────────────────────── */
.terms-table-wrap {
  overflow-x: auto;
  margin-block: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--color-surface);
}
.terms-table thead {
  background: var(--color-primary);
  color: var(--color-surface);
}
.terms-table thead th {
  padding: .85rem 1.1rem;
  text-align: left;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.terms-table tbody tr {
  border-bottom: 1px solid var(--color-surface-alt);
  transition: background .12s;
}
.terms-table tbody tr:last-child { border-bottom: none; }
.terms-table tbody tr:hover { background: var(--color-warn-bg-2); }
.terms-table td {
  padding: .85rem 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  vertical-align: top;
}
.terms-table td strong { color: var(--color-primary); }
.terms-table td:first-child { white-space: nowrap; }

/* Honeypot anti-spam field — visually hidden, off-screen */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Optional-field hint in form labels */
.form-label__opt{ font-weight:400; color:#64748B; font-size:.85em; }

/* Mobile sticky bar — Book button variant */
.mobile-bottom-nav__btn--book{ background:#0B2D5B; color:#fff; }