/* =====================================================================
   Sanvi Tours and Travels — components
   Depends on theme.css for tokens. Mobile-first throughout.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: .5rem 1rem; font-size: var(--step--1); }
.btn-block { width: 100%; }

.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-deep); color: var(--on-gold); }

.btn-primary { background: var(--primary); color: var(--on-dark); }
.btn-primary:hover { background: var(--primary-dark); color: var(--on-dark); }

.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); color: #fff; }

.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--primary); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }

.btn-outline-light { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline-light:hover { background: var(--gold-light); color: var(--on-gold); }

/* ---------------------------------------------------------------------
   Top bar and header
   --------------------------------------------------------------------- */
.topbar { background: var(--primary-dark); color: var(--on-dark-soft); font-size: var(--step--1); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; }
.topbar-note { margin: 0; display: none; }
.topbar-contact { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar-contact a { color: var(--on-dark-soft); text-decoration: none; }
.topbar-contact a:hover { color: #fff; }

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.site-header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-height);
}

.site-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.site-logo img { height: 70px; width: auto; background: none; }
.site-logo-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold);
  border-radius: 10px; font-weight: 700; font-size: 20px;
  font-family: var(--font-display);
}
.site-logo-text { font-family: var(--font-display); font-weight: 600; color: var(--primary); font-size: var(--step-1); }

.nav-toggle {
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: grid; place-items: center; cursor: pointer;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 20px; height: 2px; background: var(--primary);
  border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; position: relative; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-4px) rotate(-45deg); }

.primary-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 1rem; box-shadow: var(--shadow);
}
.primary-nav.is-open { display: block; }

.nav-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line); position: relative; }
.nav-list > li:last-child { border-bottom: 0; }
.nav-list a {
  display: block; padding: .75rem .25rem;
  color: var(--primary); text-decoration: none; font-weight: 600;
}
.nav-list a[aria-current="page"] { color: var(--green-text); }

.submenu-toggle {
  position: absolute; right: 0; top: .35rem;
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
}
.submenu-toggle::after {
  content: ''; display: block; width: 8px; height: 8px; margin: 0 auto;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.submenu-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }

.submenu { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 1rem; display: none; }
.submenu.is-open { display: block; }
.submenu a { font-weight: 400; font-size: var(--step--1); padding: .5rem .25rem; color: var(--ink-soft); }

.nav-actions { display: flex; gap: .5rem; }
.nav-actions .btn { flex: 1; }

@media (min-width: 1024px) {
  .topbar-note { display: block; }
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex; align-items: center; gap: 1.5rem;
    position: static; padding: 0; border: 0; box-shadow: none; background: none;
  }
  .nav-list { display: flex; gap: .25rem; margin: 0; }
  .nav-list > li { border: 0; }
  .nav-list a { padding: .5rem .7rem; font-size: var(--step--1); border-radius: var(--radius-sm); }
  .nav-list a:hover { background: var(--primary-tint); }

  .submenu-toggle { display: none; }
  .submenu {
    display: block; position: absolute; top: 100%; left: 0;
    min-width: 260px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .4rem;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
  .nav-actions .btn { flex: none; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero { position: relative; background: var(--primary-dark); color: var(--on-dark); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* The overlay is a gradient, not a flat wash: dark enough on the left for the
   heading to stay readable over any photo, then lifting toward the right so
   the picture is actually visible instead of being a dark smudge.
   Measured against a pure white photo, which is the worst case:
   white heading 12.3:1 at the left edge, still 7.5:1 where the text ends. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20,46,17,.93) 0%,
    rgba(20,46,17,.88) 55%,
    rgba(27,58,23,.80) 100%
  );
}

@media (min-width: 1024px) {
  .hero::after {
    background: linear-gradient(
      90deg,
      rgba(20,46,17,.94) 0%,
      rgba(20,46,17,.90) 40%,
      rgba(27,58,23,.55) 68%,
      rgba(27,58,23,.30) 100%
    );
  }
}
.hero-plain::after,
.hero-plain::after { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important; }

.hero-inner {
  position: relative; z-index: 1;
  padding-block: var(--space-7);
  display: grid; gap: var(--space-6);
}

.hero-copy h1 { color: #fff; margin-bottom: var(--space-3); }
.hero-sub { color: var(--on-dark-soft); font-size: var(--step-1); max-width: 52ch; }

.hero-points {
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem;
}
.hero-points li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--step--1); color: var(--on-dark-soft); margin: 0;
}
.hero-points li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

@media (min-width: 1024px) {
  /* The form column is capped rather than allowed to take half the width, so
     the photograph has somewhere to actually be seen. */
  .hero-inner {
    grid-template-columns: 1fr minmax(380px, 440px);
    gap: var(--space-7);
    align-items: center;
    padding-block: var(--space-9);
  }
  .hero-points { grid-template-columns: repeat(2, auto); justify-content: start; }
}

@media (min-width: 1400px) {
  .hero-inner { grid-template-columns: 1fr minmax(400px, 460px); }
}

/* ---------------------------------------------------------------------
   Enquiry form
   --------------------------------------------------------------------- */
.enquiry-form {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

/* On the homepage the card sits over the photo, so it is tinted rather than
   solid. 93% is the floor: below that the small muted helper text drops under
   4.5:1 against a dark photo and stops being readable. The blur does most of
   the work visually - it lets the colours behind show through without letting
   detail compete with the form fields. */
.hero .enquiry-form {
  /* A real glass panel: 66% white with only a light blur, so the photograph
     behind is still legible as a photograph rather than a milky smear.
     18px of blur was what made the earlier version look opaque even at 82%. */
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 40px rgba(10, 20, 8, .28);
  padding: var(--space-4);
}

/* Every piece of text on the glass drops to the darkest ink. Nothing here
   uses the muted grey any more. Measured against the darkest photo the
   slider can show, that keeps labels at 6.5:1 where 4.5:1 is the floor. */
.hero .enquiry-form,
.hero .enquiry-form-note,
.hero .field label,
.hero .field-optional { color: var(--ink); }

.hero .enquiry-form-title { font-size: var(--step-1); margin-bottom: .15rem; color: var(--primary-dark); }
.hero .enquiry-form-note { font-size: var(--step--1); margin-bottom: var(--space-3); }

/* Inputs stay nearly solid. A see-through input stops looking like
   somewhere you can type, and the placeholder needs its own contrast. */
.hero .field input,
.hero .field textarea {
  padding: .5rem .65rem;
  background: rgba(255, 255, 255, .95);
  border-color: rgba(60, 76, 56, .35);
}
.hero .field input::placeholder { color: #5E6B57; }

.hero .trip-type {
  margin-bottom: var(--space-3);
  padding: .25rem;
  background: rgba(255, 255, 255, .5);
}
.hero .trip-type-option span { padding: .4rem .2rem; color: var(--ink); }
.hero .trip-type-option input:checked + span { background: var(--primary); color: #fff; }

.hero .enquiry-form.is-compact .enquiry-grid { grid-template-columns: 1fr 1fr; }
.hero .enquiry-grid { gap: .6rem .75rem; }
.hero .field label { margin-bottom: .15rem; }
.hero .enquiry-actions { margin-top: var(--space-3); grid-template-columns: 1fr 1fr; }
.hero .enquiry-actions .btn { padding: .6rem 1rem; }

/* Without backdrop-filter there is no blur to soften what is behind, so the
   panel goes back to nearly solid. A 66% card over a busy photo with no blur
   is genuinely hard to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .enquiry-form { background: rgba(255, 255, 255, .94); }
}

/* Browsers without backdrop-filter get the solid card, which is the safe
   fallback rather than a washed-out one. */

.enquiry-form-title { font-size: var(--step-2); margin-bottom: .25rem; }
.enquiry-form-note { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: var(--space-4); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.trip-type {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .35rem; margin-bottom: var(--space-4);
  background: var(--surface-alt); padding: .3rem; border-radius: var(--radius);
}
.trip-type-option { margin: 0; }
.trip-type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.trip-type-option span {
  display: block; text-align: center; padding: .5rem .25rem;
  border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.trip-type-option input:checked + span { background: var(--primary); color: #fff; }
.trip-type-option input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); margin-bottom: .25rem; }
.field-optional { font-weight: 400; color: var(--ink-muted); }

.field input, .field textarea, .field select {
  width: 100%; padding: .65rem .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card); font-size: var(--step-0);
}
.field input:focus, .field textarea:focus { border-color: var(--primary); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field-error { font-size: var(--step--1); color: var(--danger); margin: .25rem 0 0; }

.enquiry-context { font-size: var(--step--1); color: var(--ink-muted); margin: var(--space-3) 0 0; }

.enquiry-actions { display: grid; gap: .5rem; margin-top: var(--space-4); }
.enquiry-status { margin: var(--space-3) 0 0; font-size: var(--step--1); }
.enquiry-status.is-success { color: var(--green-deep); }
.enquiry-status.is-error { color: var(--danger); }

.enquiry-form.is-compact .enquiry-grid { grid-template-columns: 1fr; }

.enquiry-success {
  text-align: center; padding: var(--space-5) var(--space-3);
}
.enquiry-success h2 { font-size: var(--step-2); }
.enquiry-success .reference {
  display: inline-block; margin: var(--space-3) 0;
  background: var(--gold-tint); border: 1px dashed var(--gold);
  padding: .5rem 1rem; border-radius: var(--radius);
  font-weight: 700; letter-spacing: .04em;
}

@media (min-width: 480px) {
  .enquiry-form.is-compact .enquiry-actions { grid-template-columns: 1fr 1fr; }
  .enquiry-actions { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Sections and cards
   --------------------------------------------------------------------- */
.section-head { margin-bottom: var(--space-6); }
.section-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-lead { color: var(--ink-soft); max-width: 60ch; margin: 0; }

.card-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.service-card, .taxi-card, .package-card, .post-card, .review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card:hover, .taxi-card:hover, .package-card:hover, .post-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.service-card-body, .taxi-card-body, .package-card-body, .post-card-body {
  padding: var(--space-4); display: flex; flex-direction: column; flex: 1;
}
.service-card h3, .taxi-card h3, .package-card h3, .post-card h3 {
  font-size: var(--step-1); margin-bottom: .5rem;
}
.service-card h3 a, .taxi-card h3 a, .package-card h3 a, .post-card h3 a {
  color: var(--primary); text-decoration: none;
}
.service-card h3 a:hover, .taxi-card h3 a:hover, .package-card h3 a:hover, .post-card h3 a:hover {
  color: var(--green-text);
}
.service-card p, .taxi-card p, .package-card p, .post-card p {
  font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .75rem;
}

.price-from { margin-top: auto !important; color: var(--ink-soft); font-size: var(--step--1) !important; }
.price-from strong { color: var(--primary); font-size: var(--step-1); }
.price-from s { color: var(--ink-muted); margin-right: .35rem; }

.spec-list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 .75rem; }
.spec-list li {
  margin: 0; font-size: var(--step--1);
  background: var(--primary-tint); color: var(--primary);
  padding: .15rem .6rem; border-radius: var(--radius-pill);
}

.taxi-card .btn { margin-top: .75rem; }
.package-duration { font-size: var(--step--1); color: var(--green-text); font-weight: 600; margin-bottom: .35rem !important; }
.post-meta { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: .35rem !important; }

/* Destination cards are entirely clickable, so the whole tile is the link */
.destination-card {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.destination-card:hover { border-color: var(--gold); color: inherit; }
.destination-card-media { display: block; }
.destination-card-body { display: block; padding: var(--space-3) var(--space-4); }
.destination-name { display: block; font-weight: 700; color: var(--primary); }
.destination-meta { display: block; font-size: var(--step--1); color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Routes
   --------------------------------------------------------------------- */
.route-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
@media (min-width: 600px) { .route-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .route-list { grid-template-columns: repeat(4, 1fr); } }

.route-list li { margin: 0; }
.route-list a {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: .75rem 1rem;
  text-decoration: none;
}
.route-list a:hover { border-color: var(--gold); background: var(--gold-tint); }
.route-name { font-weight: 600; color: var(--primary); font-size: var(--step-0); }
.route-meta { font-size: var(--step--1); color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Why us
   --------------------------------------------------------------------- */
.why-grid { margin-top: var(--space-6); }
.why-item h3 { color: #fff; font-size: var(--step-1); margin-bottom: .5rem; }
.why-item p { color: var(--on-dark-soft); font-size: var(--step--1); }

/* ---------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------- */
.review-card { padding: var(--space-4); margin: 0; }
.review-stars { color: var(--star); font-size: var(--step-1); letter-spacing: .1em; margin-bottom: .5rem; }
.review-stars-off { color: var(--line-strong); }
.review-card blockquote { margin: 0 0 var(--space-3); }
.review-card blockquote p { font-size: var(--step-0); color: var(--ink); margin: 0; }
.review-card figcaption { margin-top: auto; }
.review-name { display: block; font-weight: 700; color: var(--primary); }
.review-city, .review-service { display: block; font-size: var(--step--1); color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq-list { display: grid; gap: .5rem; }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 600; color: var(--primary); cursor: pointer;
  list-style: none; position: relative; padding-right: 3rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 1.25rem; top: 1.25rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-answer { padding: 0 var(--space-4) var(--space-4); }
.faq-answer p { font-size: var(--step-0); color: var(--ink-soft); margin: 0; }
.faq-more { margin-top: var(--space-4); }

/* ---------------------------------------------------------------------
   CTA strip
   --------------------------------------------------------------------- */
.cta-strip { background: var(--primary); color: var(--on-dark); padding-block: var(--space-7); }
.cta-inner { display: grid; gap: var(--space-4); align-items: center; }
.cta-strip h2 { color: #fff; margin-bottom: .35rem; }
.cta-strip p { color: var(--on-dark-soft); margin: 0; }
.cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------------------------
   Page headers, prose, contact
   --------------------------------------------------------------------- */
.breadcrumbs { background: var(--surface-alt); border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .6rem 0; }
.breadcrumbs li { margin: 0; display: flex; gap: .4rem; }
.breadcrumbs li + li::before { content: '/'; color: var(--ink-muted); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-muted); }

.page-header { background: var(--primary); color: var(--on-dark); padding-block: var(--space-7); }
.page-header h1 { color: #fff; margin-bottom: .5rem; }
.page-header-lead { color: var(--on-dark-soft); max-width: 60ch; margin: 0; }

.prose-layout { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .prose-layout { grid-template-columns: 1.6fr .9fr; align-items: start; } }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.prose h2:first-child { margin-top: 0; }

.stat-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4);
}
.stat-item { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.stat-item:last-child { border-bottom: 0; }
.stat-value { display: block; font-family: var(--font-display); font-size: var(--step-3); color: var(--primary); line-height: 1.1; }
.stat-label { display: block; font-size: var(--step--1); color: var(--ink-muted); }

.aside-cta {
  background: var(--gold-tint); border: 1px solid var(--gold);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.aside-cta h2 { font-size: var(--step-1); margin-bottom: .35rem; }
.aside-cta p { font-size: var(--step--1); color: var(--ink-soft); }
.aside-cta .btn { margin-bottom: .5rem; }
.mt-6 { margin-top: var(--space-6); }

.contact-layout { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.contact-block { margin-bottom: var(--space-5); }
.contact-block h2 { font-size: var(--step-1); margin-bottom: .5rem; }
.contact-phone a { font-family: var(--font-display); font-size: var(--step-2); color: var(--primary); text-decoration: none; }
.contact-hours { font-size: var(--step--1); color: var(--ink-muted); }
.map-section iframe { width: 100%; height: 380px; border: 0; display: block; }

.error-page { text-align: center; }
.error-code { font-family: var(--font-display); font-size: var(--step-4); color: var(--gold); margin: 0; }
.error-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: var(--space-5); }
.error-links li { margin: 0; }
.error-links a {
  display: block; padding: .4rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--step--1); text-decoration: none;
}
.error-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.site-flash {
  margin: var(--space-4) 0 0; padding: .75rem 1rem;
  border-radius: var(--radius); font-size: var(--step-0);
}
.site-flash-success { background: var(--success-bg); color: var(--green-deep); border: 1px solid var(--green); }
.site-flash-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--primary-dark); color: var(--on-dark-soft); padding-block: var(--space-7) var(--space-4); }
.footer-grid { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer-brand { font-family: var(--font-display); font-size: var(--step-1); color: #fff; margin-bottom: .35rem; }
.footer-col p { font-size: var(--step--1); }
.footer-heading { font-size: var(--step-0); color: #fff; margin-bottom: .75rem; }
.footer-links, .footer-social { list-style: none; padding: 0; margin: 0; }
.footer-links li, .footer-social li { margin-bottom: .4rem; }
.footer-links a, .footer-social a, .footer-address a { color: var(--on-dark-soft); text-decoration: none; font-size: var(--step--1); }
.footer-links a:hover, .footer-social a:hover, .footer-address a:hover { color: var(--gold-light); }
.footer-address { font-style: normal; font-size: var(--step--1); line-height: 1.8; margin-bottom: var(--space-3); }
.footer-social-block { margin-top: var(--space-4); }
.footer-social { display: flex; gap: .5rem; }
.footer-social li { margin: 0; }
.footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: var(--on-dark-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
.footer-social svg { display: block; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: var(--space-6); padding-top: var(--space-4);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-bottom p { font-size: var(--step--1); margin: 0; }

/* ---------------------------------------------------------------------
   Floating actions
   --------------------------------------------------------------------- */
.floating-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; border-top: 1px solid rgba(0,0,0,.08);
}
.floating-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem .5rem; font-weight: 700; font-size: var(--step-0);
  text-decoration: none; color: #fff;
}
.floating-action svg { display: block; flex: 0 0 auto; }
.floating-whatsapp { background: var(--whatsapp); }
.floating-call { background: var(--gold); color: var(--on-gold); }
.floating-call:hover { color: var(--on-gold); }
.floating-whatsapp:hover { color: #fff; }

body { padding-bottom: 56px; }

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .floating-actions {
    left: auto; right: var(--space-5); bottom: var(--space-5);
    flex-direction: column; gap: .5rem; border: 0; background: none;
  }
  .floating-action {
    border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
    padding: .8rem 1.2rem;
  }
  .floating-label { display: inline; }
}

/* =====================================================================
   Phase 4 — detail and listing pages
   ===================================================================== */

/* Filters and result counts ------------------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-5); }
.filter-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none; font-size: var(--step--1);
}
.filter-chip:hover { border-color: var(--gold); color: var(--primary); }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-chip span { font-weight: 700; opacity: .75; }

.result-count { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: var(--space-4); }

.empty-state {
  background: var(--card); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-4); text-align: center;
}
.empty-state p { color: var(--ink-muted); margin-inline: auto; }

/* Pagination ---------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: var(--space-6); }
.page-link {
  min-width: 42px; height: 42px; padding: 0 .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-soft); text-decoration: none; font-size: var(--step--1);
}
.page-link:hover { border-color: var(--gold); color: var(--primary); }
.page-link.is-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.page-gap { display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--ink-muted); }

/* Detail header ------------------------------------------------------- */
.detail-header { position: relative; background: var(--primary); color: var(--on-dark); overflow: hidden; }
.detail-header-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,46,17,.94) 0%, rgba(27,58,23,.80) 60%, rgba(27,58,23,.48) 100%);
}
.detail-header-inner { position: relative; z-index: 1; padding-block: var(--space-7); }
.detail-header h1 { color: #fff; margin-bottom: .5rem; }
.detail-header-lead { color: var(--on-dark-soft); max-width: 60ch; margin: 0 0 var(--space-3); }
.detail-eyebrow {
  font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: .5rem;
}
.detail-price { margin: 0; color: var(--on-dark-soft); }
.detail-price strong { color: #fff; font-size: var(--step-2); font-family: var(--font-display); }
.detail-price s { color: rgba(255,255,255,.55); margin-right: .4rem; }
.detail-subtitle { color: var(--ink-muted); font-size: var(--step-0); margin-top: -.5rem; }

/* Detail layout ------------------------------------------------------- */
.detail-layout { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .detail-layout { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); align-items: start; }
  /* The form follows the reader down a long page rather than being left behind */
  .detail-aside { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.detail-main > h2 { margin-top: var(--space-6); }
.detail-main > h2:first-child { margin-top: 0; }

.booking-panel .enquiry-form { box-shadow: var(--shadow); border: 1px solid var(--line); }
.aside-link { margin-top: var(--space-4); font-size: var(--step--1); }

/* Lists --------------------------------------------------------------- */
.tick-list, .cross-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.tick-list li, .cross-list li { position: relative; padding-left: 1.75rem; margin-bottom: .5rem; }
.tick-list li::before {
  content: ''; position: absolute; left: .15rem; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.cross-list li::before {
  content: '×'; position: absolute; left: .3rem; top: -.05em;
  color: var(--danger); font-size: 1.2em; line-height: 1.4;
}
.inclusion-grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .inclusion-grid { grid-template-columns: 1fr 1fr; } }

.link-grid { list-style: none; padding: 0; display: grid; gap: .5rem; margin-bottom: var(--space-5); }
@media (min-width: 600px) { .link-grid { grid-template-columns: 1fr 1fr; } }
.link-grid li { margin: 0; }
.link-grid a {
  display: block; padding: .75rem 1rem;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius); text-decoration: none;
}
.link-grid a:hover { background: var(--gold-tint); }
.link-grid strong { display: block; color: var(--primary); }
.link-grid span { display: block; font-size: var(--step--1); color: var(--ink-muted); }

/* Specification and fact tables --------------------------------------- */
.spec-table { display: grid; gap: 0; margin-bottom: var(--space-5); }
.spec-table > div {
  display: grid; grid-template-columns: 40% 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.spec-table dt { color: var(--ink-muted); font-size: var(--step--1); }
.spec-table dd { margin: 0; font-weight: 600; color: var(--ink); }

.fact-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-5);
}
@media (min-width: 700px) { .fact-strip { grid-template-columns: repeat(4, 1fr); } }
.fact-strip > div { background: var(--card); padding: .85rem 1rem; }
.fact-strip dt { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: .1rem; }
.fact-strip dd { margin: 0; font-weight: 700; color: var(--primary); }

.rate-table { margin-bottom: var(--space-5); }
.rate-table table { width: 100%; border-collapse: collapse; background: var(--card); }
.rate-table caption { text-align: left; }
.rate-table th, .rate-table td {
  text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: var(--step-0);
}
.rate-table thead th {
  background: var(--primary-tint); color: var(--primary);
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em;
}
.rate-table tbody th { font-weight: 500; color: var(--ink-soft); }
.rate-table td { font-weight: 700; color: var(--primary); }
.rate-note { font-size: var(--step--1); color: var(--ink-muted); margin-top: .75rem; }

/* Gallery -------------------------------------------------------------- */
.gallery { margin-bottom: var(--space-5); }
.gallery-main { border-radius: var(--radius-lg); overflow: hidden; }
.gallery-thumbs {
  list-style: none; padding: 0; margin: .6rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
@media (min-width: 700px) { .gallery-thumbs { grid-template-columns: repeat(6, 1fr); } }
.gallery-thumbs li { margin: 0; }
.gallery-thumb {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
}
.gallery-thumb img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-thumb.is-active { border-color: var(--gold); }

/* Itinerary ------------------------------------------------------------ */
.itinerary { list-style: none; padding: 0; margin: 0 0 var(--space-5); position: relative; }
.itinerary-day { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; margin: 0 0 var(--space-4); position: relative; }
.itinerary-day:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: -1rem;
  width: 2px; background: var(--line-strong);
}
.itinerary-marker {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--primary); color: #fff; border-radius: 50%;
  font-weight: 700; font-size: var(--step--1); position: relative; z-index: 1;
}
.itinerary-body h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.itinerary-body p { color: var(--ink-soft); margin: 0; }

.text-capitalize { text-transform: capitalize; }

/* =====================================================================
   Phase 5–6 — blog, gallery, reviews, legal
   ===================================================================== */

.post-header { margin-bottom: var(--space-5); }
.post-standfirst { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
.post-hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); }
.post-category { color: var(--green-text); font-weight: 600; text-decoration: none; }
.post-body { max-width: 68ch; }
.post-body h2 { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.post-body img { border-radius: var(--radius); margin-block: var(--space-4); }
.post-body blockquote {
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--gold); background: var(--gold-tint); border-radius: 0 var(--radius) var(--radius) 0;
}

.toc {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-5);
}
.toc h2 { font-size: var(--step-0); margin-bottom: .5rem; font-family: var(--font-body); }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: .3rem; font-size: var(--step--1); }

.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--space-5) 0; }
.tag-list li {
  margin: 0; font-size: var(--step--1); color: var(--ink-soft);
  background: var(--surface-alt); border: 1px solid var(--line);
  padding: .2rem .7rem; border-radius: var(--radius-pill);
}

/* Gallery -------------------------------------------------------------- */
.photo-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid li { margin: 0; }
.photo-item {
  display: block; position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
.photo-item figcaption { padding: .5rem .75rem; font-size: var(--step--1); color: var(--ink-muted); }
.photo-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,46,17,.45); color: #fff; font-size: 2rem;
}

/* Rating summary -------------------------------------------------------- */
.rating-summary {
  display: grid; gap: var(--space-5); align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6);
}
@media (min-width: 700px) { .rating-summary { grid-template-columns: auto 1fr; gap: var(--space-7); } }
.rating-score { text-align: center; }
.rating-number { display: block; font-family: var(--font-display); font-size: var(--step-4); color: var(--primary); line-height: 1; }
.rating-count { display: block; font-size: var(--step--1); color: var(--ink-muted); }
.rating-bars { list-style: none; padding: 0; margin: 0; }
.rating-bars li { display: grid; grid-template-columns: 60px 1fr 32px; gap: .6rem; align-items: center; margin-bottom: .35rem; }
.rating-bar-label { font-size: var(--step--1); color: var(--ink-muted); }
.rating-bar { display: block; height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.rating-bar-fill { display: block; height: 100%; background: var(--gold); }
.rating-bar-count { font-size: var(--step--1); color: var(--ink-muted); text-align: right; }
.review-date { display: block; font-size: var(--step--1); color: var(--ink-muted); }

/* Legal ----------------------------------------------------------------- */
.legal-prose h2 { font-size: var(--step-1); margin-top: var(--space-5); }
.legal-updated { font-size: var(--step--1); color: var(--ink-muted); }
.legal-notice {
  background: var(--warning-bg); border: 1px solid var(--warning);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
}
.legal-notice p { margin: 0; font-size: var(--step--1); color: #7A4700; }

/* ---------------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------------- */
.photo-zoom {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--radius); overflow: hidden; position: relative;
  text-align: left;
}
.photo-zoom:hover { border-color: var(--gold); }
.photo-caption { display: block; padding: .5rem .75rem; font-size: var(--step--1); color: var(--ink-muted); }
.photo-zoom-hint {
  position: absolute; top: .5rem; right: .5rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,46,17,.72); color: #fff;
  display: grid; place-items: center; font-size: 15px;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.photo-zoom:hover .photo-zoom-hint,
.photo-zoom:focus-visible .photo-zoom-hint { opacity: 1; }

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,20,10,.94);
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1rem;
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0; max-width: min(1100px, 92vw); max-height: 84vh;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.lightbox-image {
  max-width: 100%; max-height: 76vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); background: none;
}
.lightbox-caption { color: #E4EDDD; font-size: var(--step--1); text-align: center; margin: 0; }

.lightbox-close, .lightbox-nav {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lightbox-nav { width: 52px; height: 52px; font-size: 30px; line-height: 1; flex: 0 0 52px; }
.lightbox-nav[hidden] { display: none; }

.lightbox-count {
  position: absolute; bottom: 1rem; left: 0; right: 0;
  text-align: center; color: #A9BC9E; font-size: var(--step--1); margin: 0;
}

@media (max-width: 640px) {
  .lightbox { gap: .35rem; padding: .5rem; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px; flex: 0 0 40px; }
  .lightbox-image { max-height: 68vh; }
}

/* Footer logo and credit ------------------------------------------------ */
.footer-logo {
  height: 58px; width: auto; background: none;
  margin-bottom: var(--space-3);
}
.footer-credit { font-size: var(--step--1); margin: 0; }
.footer-credit a { color: var(--gold-light); text-decoration: none; }
.footer-credit a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------
   Vehicle photos

   Fleet images are usually cutouts on a plain background. object-fit: cover
   crops them to fill the box, which slices off bumpers and makes the car
   look jammed into the corner. contain shows the whole vehicle, and the
   padding gives it room to breathe. Photographs elsewhere on the site keep
   using cover, which is right for them.
   --------------------------------------------------------------------- */
.taxi-card-media {
  background: #FFFFFF;
  padding: 6% 7%;
  border-bottom: 1px solid var(--line);
}
.taxi-card-media img { object-fit: contain; }

.fleet-hero {
  background: #FFFFFF;
  padding: 3% 4%;
  border: 1px solid var(--line);
}
.fleet-hero img { object-fit: contain; }

.gallery-thumb img { object-fit: contain; background: #FFFFFF; padding: 4%; }

/* ---------------------------------------------------------------------
   Hero slider
   --------------------------------------------------------------------- */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 700ms var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-controls {
  display: flex; align-items: center; gap: .75rem;
  margin-top: var(--space-5);
}
.hero-dots { display: flex; gap: .5rem; }
.hero-dot {
  width: 32px; height: 5px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.35);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.is-active { background: var(--gold); width: 44px; }

.hero-pause {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
  cursor: pointer; font-size: 9px; line-height: 1;
}
.hero-pause:hover { background: rgba(255,255,255,.24); }

/* Anyone who has asked their system to reduce motion gets no fade and no
   automatic advance; the dots still work. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}