/* ==========================================================================
   SUPRIYA TRAVELS — Main stylesheet
   --------------------------------------------------------------------------
   HOW TO RE-COLOUR THE WHOLE SITE:
   Change the hex values inside ":root" below. Everything else follows.
   Sections in this file, in order:
     1.  Design tokens (colours, fonts, spacing)
     2.  Reset & base
     3.  Typography
     4.  Buttons
     5.  Layout helpers (container, sections, grids)
     6.  Top bar + Header + Navigation (incl. mobile burger menu)
     7.  Hero
     8.  Cards (vehicle, tour, feature, step, testimonial)
     9.  Accordion (FAQs)
     10. Forms & contact
     11. Call-to-action band
     12. Footer
     13. Floating call / WhatsApp buttons
     14. Legal / long-form pages
     15. Responsive breakpoints
     16. Divine-style layout (banner slider, tiles, fleet, enquiry, stats)
     17. Destination posters, day tours, gallery, social icons, amenities
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand colours (taken from the Supriya Travels logo) ---- */
  --primary-color: #024996;        /* logo blue - main brand colour      */
  --primary-dark: #012e60;         /* navy - header, footer, deep panels */
  --primary-light: #3a7ac4;        /* lighter blue - hovers, icons       */
  --secondary-color: #f79420;      /* logo sunrise orange - main CTA     */
  --secondary-dark: #d97a08;       /* orange hover state                 */

  /* ---- Support colours ---- */
  --whatsapp-color: #1faf54;       /* WhatsApp buttons                   */
  --whatsapp-dark: #179044;
  --accent-green: #157a5b;         /* Meghalaya green - small accents    */

  /* ---- Neutrals ---- */
  --ink: #0e2036;                  /* body text (a deep blue-black)      */
  --ink-soft: #55697f;             /* secondary text                     */
  --line: #d9e4f0;                 /* borders and rules                  */
  --mist: #eef4fa;                 /* page tint - "cloud" blue-white     */
  --mist-deep: #e2ecf7;            /* alternate section background       */
  --white: #ffffff;

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;

  /* ---- Shape & depth ---- */
  --radius-sm: 5px;
  --radius: 5px;
  --radius-lg: 5px;
  --shadow-sm: 0 2px 8px rgba(2, 73, 150, .08);
  --shadow: 0 10px 30px rgba(2, 73, 150, .10);
  --shadow-lg: 0 22px 50px rgba(2, 73, 150, .18);

  /* ---- Spacing ---- */
  --container: 1180px;
  --section-space: 84px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x is clipped so the off-canvas mobile menu, which sits just off the
   right edge of the screen, cannot make the page scroll sideways.
   "clip" is used by modern browsers; "hidden" is the fallback for older ones. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--secondary-dark); }

ul, ol { padding-left: 1.15rem; }

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Respect "reduce motion" system setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--primary-dark);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1rem; max-width: 72ch; }

.lead {
  font-size: 1.14rem;
  color: var(--ink-soft);
}

/* Section heading block with the "road centre line" rule underneath */
.section-head { margin-bottom: 42px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head h2 { margin-bottom: .45em; }

.section-head .road-rule {
  display: block;
  height: 5px;
  width: 132px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--secondary-color) 0 38%, transparent 38% 52%,
                    var(--secondary-color) 52% 100%);
  margin-bottom: 20px;
}
.section-head.center .road-rule { margin-left: auto; margin-right: auto; }

.section-head p { color: var(--ink-soft); margin-bottom: 0; }
.section-head.center p { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  text-align: center;
  /* Belt-and-braces: on a narrow screen or with a long translated label, the
     button shrinks and its label truncates with an ellipsis rather than the
     text spilling out past the rounded edge into the next element. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }

/* Orange "Call Now" button */
.btn-call {
  background: var(--secondary-color);
  color: #2a1600;
  box-shadow: 0 6px 16px rgba(247, 148, 32, .35);
}
.btn-call:hover { background: var(--secondary-dark); color: #fff; }

/* Green WhatsApp button */
.btn-wa {
  background: var(--whatsapp-color);
  color: #fff;
  box-shadow: 0 6px 16px rgba(31, 175, 84, .30);
}
.btn-wa:hover { background: var(--whatsapp-dark); color: #fff; }

/* Solid blue button */
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

/* Outlined button */
.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--line);
}
.btn-outline:hover {
  border-color: var(--primary-color);
  background: var(--mist);
  color: var(--primary-color);
}

/* Outlined button on dark backgrounds */
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-ghost:hover { background: #fff; color: var(--primary-dark); }

.btn-sm { padding: 10px 17px; font-size: .9rem; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Pair of Call + WhatsApp buttons used under every vehicle / tour card.
   Flexbox (not CSS grid) is used deliberately here: some older mobile
   browsers size grid's 1fr tracks by each item's natural content width
   before shrinking, which can split the row unevenly. flex:1 1 0% plus
   min-width:0 forces both buttons to always take an equal, safe share of
   the available width and never push past the edge of the screen. */
.btn-pair {
  display: flex;
  gap: 10px;
}
.btn-pair > * {
  flex: 1 1 0%;
  min-width: 0;
}


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: var(--section-space) 0; }
.section-tint { background: var(--mist); }
.section-tint-deep { background: var(--mist-deep); }

/* Dark blue section with a subtle road texture */
.section-dark {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(58, 122, 196, .38), transparent 70%),
    var(--primary-dark);
  color: #dce8f6;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: #c3d6ec; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center-btn { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* Breadcrumb trail (also helps Google understand site structure) */
.breadcrumb {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: .88rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
}
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--primary-light); }


/* ==========================================================================
   6. TOP BAR, HEADER & NAVIGATION
   ========================================================================== */

/* Thin contact strip above the header (hidden on small screens) */
.topbar {
  background: var(--primary-dark);
  color: #cfe0f3;
  font-size: .86rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { color: var(--secondary-color); }
.topbar-links { display: flex; gap: 20px; align-items: center; }

/* Small inline icons in the top bar */
.topbar svg {
  width: 14px;
  height: 14px;
  fill: var(--secondary-color);
  vertical-align: -2px;
}

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(2, 73, 150, .06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
}

.logo img { height: 52px; width: auto; }

/* --- Desktop navigation --- */
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}
.main-nav a:hover { background: var(--mist); color: var(--primary-color); }

/* Current page marker */
.main-nav a.active {
  color: var(--primary-color);
  background: var(--mist);
  box-shadow: inset 0 -3px 0 var(--secondary-color);
}

/* Dropdown for "Taxi Rental" */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  flex-direction: column;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: flex; }
.dropdown a { font-weight: 500; font-size: .93rem; }

/* Header contact button (desktop) */
.header-cta { display: flex; align-items: center; gap: 10px; }

/* --- Burger button (mobile only) --- */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 22px; height: 2px;
  background: var(--primary-dark);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 29px; }

/* Burger turns into an X when the menu is open */
.burger.open span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(800px 500px at 12% 10%, rgba(58, 122, 196, .16), transparent 65%),
    linear-gradient(180deg, var(--mist) 0%, #fff 100%);
  padding: 62px 0 74px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}

/* Small location tag above the headline */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--primary-color);
  font-weight: 600;
  font-size: .87rem;
  padding: 7px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.hero-tag svg { width: 15px; height: 15px; fill: var(--secondary-color); }

.hero h1 { margin-bottom: .35em; }
.hero h1 em {
  font-style: normal;
  color: var(--primary-color);
}
.hero-sub {
  font-size: 1.14rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 30px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }

/* Row of quick trust points under the buttons */
.hero-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points svg { width: 17px; height: 17px; fill: var(--accent-green); flex-shrink: 0; }

/* Hero image with the floating "popular routes" card */
.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.route-card {
  position: absolute;
  left: -26px;
  bottom: 26px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  border-left: 5px solid var(--secondary-color);
  max-width: 260px;
}
.route-card h4 { margin: 0 0 8px; font-size: .95rem; color: var(--primary-dark); }
.route-card ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; color: var(--ink-soft); }
.route-card li { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.route-card li span:last-child { font-weight: 600; color: var(--primary-color); }

/* Destination chips under the hero */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 46px;
  justify-content: center;
}
.chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 17px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.chip:hover { border-color: var(--primary-light); color: var(--primary-color); }

/* Simple page header used on inner pages (no photo) */
.page-hero {
  background:
    radial-gradient(700px 320px at 80% 0%, rgba(58, 122, 196, .35), transparent 70%),
    var(--primary-dark);
  color: #fff;
  padding: 62px 0 66px;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p {
  color: #c3d6ec;
  max-width: 62ch;
  margin: 0 auto 26px;
  font-size: 1.1rem;
}
.page-hero .hero-actions { justify-content: center; margin-bottom: 0; }


/* ==========================================================================
   8. CARDS
   ========================================================================== */

/* ---- Vehicle card (fleet listings) ---- */
.vehicle-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .22s ease, transform .22s ease;
}
.vehicle-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }

.vehicle-card .card-img { position: relative; background: var(--mist-deep); }
.vehicle-card .card-img img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

/* Seat-count badge on the photo */
.seat-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--primary-dark);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
}

.vehicle-card .card-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vehicle-card h3 { margin-bottom: .35em; font-size: 1.28rem; }
.vehicle-card h3 a { color: inherit; }
.vehicle-card h3 a:hover { color: var(--primary-color); }
.vehicle-card .card-body > p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 14px; }

/* Small specification list inside the card */
.spec-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  font-size: .87rem;
  color: var(--ink-soft);
}
.spec-list li { display: flex; align-items: center; gap: 7px; }
.spec-list svg { width: 15px; height: 15px; fill: var(--primary-light); flex-shrink: 0; }

.price-line {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.price-line strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--primary-color);
  display: block;
}

.vehicle-card .btn-pair { margin-top: auto; }
.card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: .89rem;
  font-weight: 600;
  text-align: center;
}

/* ---- Tour package card ---- */
.tour-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .22s ease, transform .22s ease;
}
.tour-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.tour-card .card-img { position: relative; }
.tour-card .card-img img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; }

.days-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--secondary-color);
  color: #2a1600;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 5px;
}
.tour-card .card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.tour-card h3 { font-size: 1.22rem; margin-bottom: .3em; }
.tour-card .route {
  font-size: .87rem;
  color: var(--accent-green);
  font-weight: 600;
  margin-bottom: 10px;
}
.tour-card p { font-size: .95rem; color: var(--ink-soft); }
.tour-card .btn-pair { margin-top: auto; }

/* Suggested vehicles line inside tour cards */
.vehicle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.vehicle-tags li {
  font-size: .78rem;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 3px 10px;
  border-radius: 5px;
}

/* ---- Feature / "why choose us" block ---- */
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
}
.feature .icon {
  width: 48px; height: 48px;
  border-radius: 5px;
  background: var(--mist);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.feature .icon svg { width: 24px; height: 24px; fill: var(--primary-color); }
.feature h3 { font-size: 1.12rem; margin-bottom: .4em; }
.feature p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* Features shown on a dark section.
   The paragraph colour must be restated here: ".feature p" is defined later in
   this file than ".section-dark p", so without this the text would stay dark
   grey and become unreadable on the navy background. */
.section-dark .feature {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.section-dark .feature p { color: #c3d6ec; }
.section-dark .feature .icon { background: rgba(255, 255, 255, .12); }
.section-dark .feature .icon svg { fill: var(--secondary-color); }

/* ---- Numbered booking steps (this content really is a 3-step sequence) ---- */
.steps { counter-reset: step; }
.step {
  position: relative;
  padding-left: 66px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  border-radius: 5px;
  background: var(--secondary-color);
  color: #2a1600;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
}
.step h3 { font-size: 1.1rem; margin-bottom: .35em; }
.step p { font-size: .95rem; margin: 0; }

/* ---- Testimonial ---- */
.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--secondary-color);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
}
.stars { color: var(--secondary-color); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial p { font-size: .97rem; color: var(--ink); margin-bottom: 14px; }
.testimonial .who { font-size: .89rem; color: var(--ink-soft); margin: 0; }
.testimonial .who strong { color: var(--primary-dark); display: block; font-size: .97rem; }

/* ---- Photo gallery ---- */
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- Fleet filter buttons (Taxi Rental page) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.filter-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .18s ease;
}
.filter-btn:hover { border-color: var(--primary-light); color: var(--primary-color); }
.filter-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Hidden state used by the filter script */
.is-hidden { display: none !important; }

/* ---- Two-column content block (image + text) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.split img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Tick list used in content sections */
.tick-list { list-style: none; padding: 0; margin: 0 0 24px; }
.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--ink-soft);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--accent-green);
  border-bottom: 2.5px solid var(--accent-green);
  transform: rotate(-45deg);
}
.section-dark .tick-list li { color: #c3d6ec; }
.section-dark .tick-list li::before { border-color: var(--secondary-color); }

/* Fleet cross-links shown at the bottom of every vehicle page */
.cross-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cross-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  font-weight: 600;
  font-size: .94rem;
  color: var(--primary-dark);
}
.cross-link:hover { border-color: var(--primary-color); box-shadow: var(--shadow-sm); color: var(--primary-color); }
.cross-link img { width: 64px; height: 48px; object-fit: cover; border-radius: 5px; }


/* ==========================================================================
   9. ACCORDION (FAQs)
   ========================================================================== */
.accordion { max-width: 860px; margin: 0 auto; }

.acc-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.acc-item.open { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: 0;
  padding: 19px 22px;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
}
.acc-btn:hover { color: var(--primary-color); }

/* Plus / minus indicator */
.acc-btn .sign {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--mist);
}
.acc-btn .sign::before,
.acc-btn .sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--primary-color);
  transform: translate(-50%, -50%);
  transition: transform .22s ease, opacity .22s ease;
}
.acc-btn .sign::before { width: 11px; height: 2px; }
.acc-btn .sign::after { width: 2px; height: 11px; }
.acc-item.open .acc-btn .sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.acc-panel-inner { padding: 0 22px 20px; }
.acc-panel-inner p { margin: 0; color: var(--ink-soft); font-size: .97rem; }


/* ==========================================================================
   10. FORMS & CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 46px;
  align-items: start;
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.info-row {
  display: flex;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.info-row .icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--mist);
  display: grid;
  place-items: center;
}
.info-row .icon svg { width: 20px; height: 20px; fill: var(--primary-color); }
.info-row h4 { margin: 0 0 3px; font-size: 1rem; }
.info-row p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.info-row a { font-weight: 600; }

/* Booking / enquiry form */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { margin-bottom: 17px; }
.field label {
  display: block;
  font-size: .89rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary-light);
  outline-offset: 0;
}
.field textarea { min-height: 112px; resize: vertical; }

.form-note {
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 12px 0 0;
  text-align: center;
}

/* Google Map embed */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe { width: 100%; height: 420px; border: 0; }


/* ==========================================================================
   11. CALL-TO-ACTION BAND
   ========================================================================== */
.cta-band {
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(247, 148, 32, .25), transparent 70%),
    var(--primary-color);
  color: #fff;
  padding: 58px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: #d5e6f8; max-width: 60ch; margin: 0 auto 26px; }
.cta-band .hero-actions { justify-content: center; margin-bottom: 0; }


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--primary-dark);
  color: #b8cde4;
  padding-top: 62px;
  font-size: .95rem;
  position: relative;
}

/* Thin orange ridge line across the top of the footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-light), var(--accent-green));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.25fr;
  gap: 40px;
  padding-bottom: 46px;
}
.site-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.footer-logo {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: inline-block;
  margin-bottom: 18px;
}
.footer-logo img { height: 48px; width: auto; }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #b8cde4; }
.site-footer a:hover { color: var(--secondary-color); }
.site-footer p { color: #b8cde4; }

.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; fill: var(--secondary-color); flex-shrink: 0; margin-top: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }


/* ==========================================================================
   13. FLOATING CALL / WHATSAPP BUTTONS
   ========================================================================== */

/* Desktop: two round buttons stacked on the right edge */
.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.float-btn {
  width: 56px; height: 56px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.float-btn:hover { transform: scale(1.08); color: #fff; }
.float-btn svg { width: 27px; height: 27px; fill: #fff; }
.float-wa { background: var(--whatsapp-color); }
.float-call { background: var(--secondary-color); color: #2a1600; }
.float-call svg { fill: #2a1600; }

/* Mobile: a full-width two-button bar fixed to the bottom of the screen */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(2, 73, 150, .13);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
}
.mobile-bar .btn-pair { gap: 9px; }


/* ==========================================================================
   14. LEGAL / LONG-FORM PAGES
   ========================================================================== */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.1em;
  padding-top: .6em;
  border-top: 1px dashed var(--line);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: 1.7em; }
.prose li { margin-bottom: 9px; color: var(--ink-soft); }
.prose .updated {
  display: inline-block;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 15px;
  font-size: .87rem;
  color: var(--ink-soft);
  margin-bottom: 30px;
}


/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- Tablets and small laptops ---- */
@media (max-width: 1080px) {
  .hero-grid { gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .cross-links { grid-template-columns: repeat(2, 1fr); }
  .main-nav a { padding: 10px 9px; font-size: .9rem; }
  .header-cta .btn span { display: none; }
}

/* ---- Mobile navigation kicks in ---- */
@media (max-width: 960px) {
  :root { --section-space: 60px; }

  .burger { display: block; }
  .header-cta .btn-call-header { display: none; }

  /* The nav panel is inside the header, so it would otherwise paint over the
     burger. Lifting the button group keeps the close button tappable. */
  .header-cta { position: relative; z-index: 901; }

  /* Slide-down mobile menu panel.
     visibility (not just transform) keeps its links out of the tab order
     while the panel is off-screen, so keyboard and screen-reader users reach
     the burger, Call Now and WhatsApp buttons first, not ten hidden links. */
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(88vw, 360px);
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 40px rgba(2, 73, 150, .18);
    padding: 88px 20px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    /* Closing: wait for the slide-out to finish before hiding (delay = duration).
       Opening: the .open rule below overrides the delay to 0, so it becomes
       visible immediately as it starts sliding in. */
    transition: transform .28s ease, visibility 0s .28s;
    z-index: 899;
  }
  .main-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s;
  }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { padding: 13px 14px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav a.active { box-shadow: inset 3px 0 0 var(--secondary-color); }

  /* Dropdown becomes an indented sub-list, toggled by tapping */
  .has-dropdown > a::after { float: right; margin-top: 8px; transition: transform .2s ease; }
  .has-dropdown.open > a::after { transform: translateY(-2px) rotate(-135deg); }
  .dropdown {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 0 14px;
    padding: 0;
    min-width: 0;
  }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: flex; }

  /* Dark overlay behind the open menu */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 32, 54, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 898;
  }
  .nav-overlay.open { opacity: 1; visibility: visible; }

  /* Stop the page scrolling while the menu is open */
  body.nav-open { overflow: hidden; }

  /* Layout stacking */
  .hero { padding: 40px 0 54px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-media { order: -1; }
  .hero-media img { aspect-ratio: 16 / 11; }
  .route-card { left: auto; right: 12px; bottom: 12px; max-width: 220px; padding: 13px 16px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Swap the floating circles for a bottom action bar */
  .floating-actions { display: none; }
  .mobile-bar { display: block; }
  body { padding-bottom: 76px; }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { display: none; }
  .header-inner { min-height: 66px; }
  .logo img { height: 42px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cross-links { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* ---- Footer stacks into a single column on phones ----
     Without this the four columns stay side by side, squeezing the company
     description into a narrow strip and pushing the contact details off screen. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 34px;
  }
  .site-footer { padding-top: 46px; }

  /* Long addresses and email addresses wrap instead of overflowing.
     Scoped to the contact text only, so button labels never break mid-word. */
  .footer-contact span,
  .footer-contact a,
  .feature p,
  .info-row p {
    overflow-wrap: anywhere;
  }
  .site-footer .btn { white-space: nowrap; }
  .footer-contact li { align-items: flex-start; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Keep the fixed bottom bar buttons inside the screen on narrow phones */
  .mobile-bar .btn { padding: 12px 8px; font-size: .92rem; gap: 6px; }
  .mobile-bar .btn svg { width: 16px; height: 16px; }

  .hero-actions .btn { flex: 1 1 100%; }
  .page-hero { padding: 44px 0 48px; }
  .route-card { display: none; }
  .form-card, .info-card { padding: 22px 18px; }
  .map-embed iframe { height: 320px; }
  .step { padding-left: 0; padding-top: 58px; }
  .step::before { top: 0; }
  .chips { margin-top: 32px; }
}


/* ==========================================================================
   16. DIVINE-STYLE LAYOUT  (added in the redesign)
   --------------------------------------------------------------------------
   Layout and feel follow the structure of thedivinetravel.com:
   banner slider with three big booking shortcuts, destination tiles, fleet
   cards, package cards, enquiry band, stats, gallery, reviews, enquiry form.
   NOTHING in the colour tokens (section 1) was changed. Every colour below
   is a var(--...) from the logo palette.
   ========================================================================== */

/* ---- Section headings: centred, with a short line either side ---- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 600;
}
.kicker::before,
.kicker::after {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--secondary-color);
}
.section-dark .kicker,
.custom-band .kicker,
.enquiry-panel .kicker { color: #fff; }
.text-left .kicker::before { display: none; }

.section-head.center h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
.subhead {
  margin: 64px 0 26px;
  text-align: center;
}
.subhead h3 {
  display: inline-block;
  margin: 0;
  padding-bottom: 10px;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  border-bottom: 3px solid var(--secondary-color);
}

/* ---- Top bar: add a live-looking "open now" dot ---- */
.topbar .open-dot::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 5px;
  background: var(--whatsapp-color);
  box-shadow: 0 0 0 3px rgba(31, 175, 84, .25);
}

/* ---- Header: a firmer, more confident bar ---- */
.site-header { border-bottom: 3px solid var(--secondary-color); }
.main-nav a { font-size: .97rem; }
.main-nav a:hover { background: transparent; color: var(--secondary-dark); }
.main-nav a.active { background: transparent; box-shadow: inset 0 -3px 0 var(--secondary-color); }

/* ---- Inner-page header: photo behind the navy ---- */
.page-hero {
  background:
    linear-gradient(180deg, rgba(1, 46, 96, .90), rgba(1, 46, 96, .94)),
    url("../images/hero-shillong-meghalaya.webp") center / cover no-repeat;
  border-bottom: 4px solid var(--secondary-color);
}

/* ==========================================================================
   BANNER SLIDER (home page)
   ========================================================================== */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--primary-dark);
  color: #fff;
}
.banner-slides { position: absolute; inset: 0; z-index: -2; }
.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.banner-slide.is-active { opacity: 1; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Navy wash keeps the headline readable and hides upscaling softness */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1, 46, 96, .93) 0%, rgba(1, 46, 96, .76) 44%, rgba(1, 46, 96, .22) 100%),
    linear-gradient(0deg, rgba(1, 46, 96, .6), transparent 38%);
}

.banner-inner {
  max-width: 700px;
  padding: clamp(60px, 9vw, 112px) 0 clamp(132px, 15vw, 176px);
}
.banner h1 { color: #fff; font-size: clamp(2.2rem, 5.4vw, 3.8rem); margin-bottom: .4em; }
.banner-sub {
  max-width: 54ch;
  margin-bottom: 28px;
  font-size: 1.14rem;
  color: #d5e6f8;
}
.banner-inner .hero-actions { margin-bottom: 0; }

.banner-ui {
  position: absolute;
  left: 0; right: 0;
  bottom: 96px;
  z-index: 2;
}
.banner-ui .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.banner-caption { margin: 0; font-size: .9rem; color: #d5e6f8; }
.banner-caption svg { width: 15px; height: 15px; fill: var(--secondary-color); vertical-align: -2px; margin-right: 6px; }
.banner-nav { display: flex; align-items: center; gap: 10px; }
.banner-dots { display: flex; gap: 8px; }
.banner-dot {
  width: 11px; height: 11px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.banner-dot[aria-current="true"] { background: var(--secondary-color); border-color: var(--secondary-color); }
.banner-arrow {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.banner-arrow:hover { background: #fff; }
.banner-arrow svg { width: 20px; height: 20px; fill: #fff; }
.banner-arrow:hover svg { fill: var(--primary-dark); }

/* ---- Three big shortcuts that overlap the banner's lower edge ---- */
.quick-actions { position: relative; z-index: 3; margin-top: -64px; }
.qa-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border-bottom: 4px solid var(--secondary-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--primary-dark);
  transition: transform .2s ease;
}
.qa-card:hover { transform: translateY(-4px); color: var(--primary-dark); }
.qa-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--primary-color);
}
.qa-icon svg { width: 28px; height: 28px; fill: #fff; }
.qa-card strong { display: block; font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; }
.qa-card span.qa-sub { display: block; margin-top: 3px; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }

/* The taxi booking card is the main service, so it carries the brand orange */
.qa-card.is-primary { background: var(--secondary-color); border-bottom-color: var(--primary-dark); }
.qa-card.is-primary .qa-icon { background: var(--primary-dark); }
.qa-card.is-primary strong { color: #2a1600; }
.qa-card.is-primary span.qa-sub { color: #4a2a00; }

/* ==========================================================================
   DESTINATION TILES
   ========================================================================== */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.dest {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  background: var(--primary-dark);
}
.dest.is-large { grid-column: span 2; grid-row: span 2; }
.dest img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.dest:hover img { transform: scale(1.06); }
.dest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(1, 46, 96, .9) 0%, rgba(1, 46, 96, 0) 62%);
}
.dest-label { position: relative; z-index: 1; padding: 20px 22px; }
.dest-label h3 { margin: 0 0 3px; color: #fff; font-size: 1.3rem; }
.dest.is-large .dest-label h3 { font-size: 1.85rem; }
.dest-label p { margin: 0; font-size: .92rem; color: #d5e6f8; }
.dest:hover { color: #fff; }

/* ==========================================================================
   FLEET CARDS (restyled vehicle cards)
   ========================================================================== */
.vehicle-card { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: var(--shadow-sm); }
.vehicle-card .card-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--secondary-color);
}
.seat-badge { background: var(--secondary-color); color: #2a1600; font-weight: 700; }
.btn-call-blue { background: var(--primary-color); color: #fff; }
.btn-call-blue:hover { background: var(--primary-dark); color: #fff; }

/* ==========================================================================
   TOUR CARDS (duration bar sits on the photo, like the reference)
   ========================================================================== */
.tour-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.days-badge {
  top: auto; right: auto;
  left: 0; bottom: 0;
  padding: 7px 16px;
  border-radius: 0 5px 0 0;
  font-size: .85rem;
}

/* ==========================================================================
   CUSTOM TOUR BAND + "NEED ASSISTANCE" CARD
   ========================================================================== */
.custom-band {
  background:
    linear-gradient(95deg, rgba(1, 46, 96, .94) 0%, rgba(2, 73, 150, .72) 100%),
    var(--band-img) center / cover no-repeat;
  color: #fff;
  padding: 70px 0;
}
.custom-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: center; }
.custom-band h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.custom-band p { color: #d5e6f8; font-size: 1.08rem; }
.assist-card {
  padding: 28px;
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--secondary-color);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.assist-card h3 { margin-bottom: .2em; font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; }
.assist-card .assist-phone {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary-color);
}
.assist-card .assist-mail { display: block; margin-bottom: 18px; overflow-wrap: anywhere; font-weight: 600; font-size: .95rem; }

/* ==========================================================================
   WHO WE ARE + FIGURES
   ========================================================================== */
.who-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.who-grid h2 { margin-bottom: .5em; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat {
  padding: 26px 22px;
  background: var(--primary-color);
  border-top: 4px solid var(--secondary-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}
.stat span { display: block; margin-top: 8px; font-size: .95rem; color: #dce8f6; }

/* ==========================================================================
   FEATURES (restyled): orange top edge, bigger icon
   ========================================================================== */
.feature { border-top: 4px solid var(--secondary-color); box-shadow: var(--shadow-sm); }
.feature .icon { width: 56px; height: 56px; border-radius: 5px; background: var(--primary-color); }
.feature .icon svg { width: 27px; height: 27px; fill: #fff; }

/* ==========================================================================
   GALLERY MOSAIC
   ========================================================================== */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.gallery-mosaic figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--mist-deep); }
.gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-mosaic figure:hover img { transform: scale(1.05); }
.gallery-mosaic .g-big { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic .g-wide { grid-column: span 2; }
.gallery-mosaic .g-wide img { object-position: center 88%; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.testimonial { position: relative; padding-top: 34px; border-left-width: 1px; border-top: 4px solid var(--secondary-color); box-shadow: var(--shadow-sm); }
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 2px; right: 20px;
  font-family: Georgia, serif;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--mist-deep);
}

/* ==========================================================================
   ENQUIRY BAND (steps on the left, form on the right)
   ========================================================================== */
.enquiry-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: start; }
.enquiry-panel {
  padding: 34px 30px;
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(58, 122, 196, .4), transparent 70%),
    var(--primary-dark);
  border-radius: var(--radius-lg);
  color: #dce8f6;
}
.enquiry-panel h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.enquiry-panel > p { color: #c3d6ec; }
.enquiry-panel .steps { display: grid; gap: 22px; margin: 26px 0; }
.enquiry-panel .step h3 { color: #fff; }
.enquiry-panel .step p { color: #c3d6ec; }
.enquiry-panel .footer-contact { margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); list-style: none; }
.enquiry-panel .footer-contact li { display: flex; gap: 11px; margin-bottom: 10px; color: #c3d6ec; }
.enquiry-panel .footer-contact svg { width: 17px; height: 17px; margin-top: 5px; flex-shrink: 0; fill: var(--secondary-color); }
.enquiry-panel .footer-contact a { color: #fff; font-weight: 600; }
.form-card h3 { margin-bottom: 1em; }

/* ==========================================================================
   FOOTER: orange tick under each column heading
   ========================================================================== */
.site-footer h4 { padding-bottom: 12px; position: relative; }
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 38px; height: 3px;
  border-radius: 2px;
  background: var(--secondary-color);
}

/* Footer buttons: keep their own text colour (the generic footer link colour
   was making the orange "Call Now" label pale and hard to read) */
.site-footer .btn-call { color: #2a1600; }
.site-footer .btn-call:hover { color: #fff; }
.site-footer .btn-wa,
.site-footer .btn-wa:hover { color: #fff; }

/* ==========================================================================
   16b. RESPONSIVE (redesign blocks)
   ========================================================================== */
@media (max-width: 1080px) {
  .dest-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .dest.is-large { grid-column: span 3; grid-row: span 1; }
  .dest.is-large .dest-label h3 { font-size: 1.6rem; }
  .gallery-mosaic { grid-auto-rows: 170px; }
}

@media (max-width: 960px) {
  .quick-actions { margin-top: -48px; }
  .quick-actions .grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .banner-ui { bottom: 70px; }
  .custom-grid,
  .who-grid,
  .enquiry-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  .banner-inner { padding-bottom: 150px; }
  .banner-arrow { display: none; }
  .banner-ui { bottom: 62px; }
  .banner-caption { font-size: .82rem; }
  .qa-card { padding: 16px 18px; }
  .dest-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 12px; }
  .dest.is-large { grid-column: span 2; }
  .dest-label { padding: 14px 16px; }
  .dest-label h3 { font-size: 1.1rem; }
  .dest-label p { display: none; }
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .gallery-mosaic .g-big { grid-column: span 2; }
  .stat-grid { gap: 12px; }
  .stat { padding: 20px 16px; }
  .enquiry-panel { padding: 26px 20px; }
  .subhead { margin-top: 48px; }
  .custom-band { padding: 52px 0; }
}


/* ==========================================================================
   17. DESTINATION POSTERS, DAY TOURS, GALLERY, SOCIAL, AMENITIES
   ========================================================================== */

/* ---- Destination poster cards (home page and gallery) ---- */
.poster-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.poster {
  grid-column: span 2;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--primary-dark);
  transition: transform .2s ease, box-shadow .2s ease;
}
.poster:nth-child(4) { grid-column: 2 / span 2; }
.poster:nth-child(5) { grid-column: 4 / span 2; }
.poster:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--primary-dark); }
.poster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.poster-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-top: 4px solid var(--secondary-color);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.poster-foot svg { width: 20px; height: 20px; fill: var(--secondary-dark); }

/* ---- Destinations page: image and text side by side, alternating ---- */
.dest-split.is-reverse > :first-child { order: 2; }
.dest-split .btn-pair { margin-top: 6px; }
.section[id] { scroll-margin-top: 90px; }

/* ---- Day tour cards ---- */
.day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--secondary-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.day-badge {
  margin-bottom: 14px;
  padding: 4px 13px;
  border-radius: 5px;
  background: var(--primary-color);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}
.day-card h3 { font-size: 1.15rem; margin-bottom: .3em; }
.day-card .route { margin-bottom: 10px; font-size: .87rem; font-weight: 600; color: var(--accent-green); }
.day-card p:not(.route) { font-size: .95rem; color: var(--ink-soft); }
.day-card .btn { margin-top: auto; }

/* ---- Gallery: fleet row ---- */
.fleet-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fleet-gallery a {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--primary-dark);
}
.fleet-gallery img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; }
.fleet-gallery span { display: block; padding: 12px 16px; border-top: 3px solid var(--secondary-color); }

/* ---- Social icons ---- */
.social { display: inline-flex; align-items: center; gap: 8px; }
.social a {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  transition: background-color .18s ease;
}
.social a:hover { background: var(--secondary-color); }
.social svg { width: 15px; height: 15px; fill: #fff; vertical-align: 0; }
.social a:hover svg { fill: #2a1600; }
.topbar .social svg { fill: #fff; }
.social-top { margin-left: 4px; }
.social-foot { margin-top: 6px; }
.social-foot a { width: 38px; height: 38px; }
.social-foot svg { width: 19px; height: 19px; }

/* ---- Amenity icons (inside vehicle cards) ---- */
.amenities {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 0 0;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: .87rem;
  color: var(--ink-soft);
}
.amenities li { display: flex; align-items: center; gap: 9px; }
.amenities svg { width: 20px; height: 20px; flex-shrink: 0; fill: var(--primary-color); }

/* ---- Amenity tiles (Tempo Traveller page) ---- */
.amen-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.amen-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--secondary-color);
  border-radius: var(--radius);
  text-align: center;
  font-size: .95rem;
  color: var(--primary-dark);
}
.amen-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 5px; background: var(--primary-color); }
.amen-ic svg { width: 26px; height: 26px; fill: #fff; }

/* ---- Nine menu items need a little more room ---- */
.logo { flex-shrink: 0; }
.header-cta { flex-shrink: 0; }
@media (max-width: 1400px) {
  .header-cta .btn-call-header { display: none; }
}
@media (max-width: 1240px) {
  .main-nav a { padding: 10px 8px; font-size: .88rem; }
}

@media (max-width: 960px) {
  .poster-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .poster, .poster:nth-child(4), .poster:nth-child(5) { grid-column: auto; }
  .poster:nth-child(5) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
  .fleet-gallery { grid-template-columns: 1fr 1fr; }
  .amen-grid { grid-template-columns: repeat(3, 1fr); }
  .dest-split.is-reverse > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .poster-grid { gap: 12px; }
  .poster-foot { padding: 10px 12px; font-size: .88rem; }
  .poster:nth-child(5) { max-width: 100%; }
  .fleet-gallery { gap: 12px; }
  .amen-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .amen-tile { padding: 18px 8px; }
}

/* Narrow laptops and tablets in landscape: tighten the nine menu items so the WhatsApp button stays on screen */
@media (min-width: 961px) and (max-width: 1100px) {
  .header-inner { gap: 8px; }
  .main-nav a { padding: 10px 5px; font-size: .82rem; }
  .logo img { height: 44px; }
}

/* Centre an incomplete last row (e.g. 5 day-tour cards) */
@media (min-width: 961px) {
  .grid-center { display: flex; flex-wrap: wrap; justify-content: center; }
  .grid-center > * { flex: 0 0 calc((100% - 52px) / 3); }
}

/* ==========================================================================
   18. SUNRISE ACCENTS - yellow and red taken from the logo's sunrise
   --------------------------------------------------------------------------
   The logo sun runs yellow > orange > red-orange. These tokens add the
   yellow and the red; blue, navy, orange and WhatsApp green are unchanged.
   Edit the two tokens below to retune the whole site.
   ========================================================================== */
:root {
  --accent-yellow: #f8c400;        /* logo sun - top of the sunrise       */
  --accent-red: #d9301a;           /* logo sun - red-orange end           */
  --accent-red-dark: #b82410;
  --sunrise: linear-gradient(90deg, #f8c400 0%, #f79420 50%, #d9301a 100%);
}

/* Straight accent bars use the full sunrise gradient */
.site-header { border-bottom: 3px solid; border-image: var(--sunrise) 1; }
.page-hero, .hero, .banner { border-bottom-width: 4px; border-bottom-style: solid; border-image: var(--sunrise) 1; }
.site-footer::before { background: var(--sunrise); height: 5px; }
.section-head .road-rule {
  background: linear-gradient(90deg, #f8c400 0 30%, transparent 30% 36%, #f79420 36% 64%, transparent 64% 70%, #d9301a 70% 100%);
}
.kicker::before, .kicker::after, .site-footer h4::after { background: var(--sunrise); }
.section-dark .kicker, .custom-band .kicker, .enquiry-panel .kicker { color: #fff; }

/* Cards cycle yellow > orange > red along their top edge */
.feature, .day-card, .amen-tile, .testimonial, .stat, .poster-foot, .assist-card { border-top-color: var(--accent-yellow); }
.feature:nth-child(3n+2), .day-card:nth-child(3n+2), .amen-tile:nth-child(3n+2),
.testimonial:nth-child(3n+2), .stat:nth-child(3n+2), .poster:nth-child(3n+2) .poster-foot { border-top-color: var(--secondary-color); }
.feature:nth-child(3n), .day-card:nth-child(3n), .amen-tile:nth-child(3n),
.testimonial:nth-child(3n), .stat:nth-child(3n), .poster:nth-child(3n) .poster-foot { border-top-color: var(--accent-red); }
.poster:nth-child(3n+1) .poster-foot { border-top-color: var(--accent-yellow); }
.qa-card { border-bottom-color: var(--accent-yellow); }
.qa-card:nth-child(3n+2) { border-bottom-color: var(--accent-red); }
.vehicle-card .card-img::after { background: var(--sunrise); }

/* Small highlights */
.stars { color: var(--accent-yellow); text-shadow: 0 1px 0 rgba(0,0,0,.12); }
.stat strong { color: var(--accent-yellow); }
.step::before { background: var(--accent-yellow); color: #2a1f00; }
.banner-dot[aria-current="true"] { background: var(--accent-yellow); border-color: var(--accent-yellow); }
.topbar svg { fill: var(--accent-yellow); }
.hero-tag svg, .banner-caption svg { fill: var(--accent-yellow); }
.section-dark .feature .icon svg { fill: var(--accent-yellow); }
.section-dark .tick-list li::before { border-color: var(--accent-yellow); }

/* Red is used for "attention" labels: badges, seat counts, hover on social */
.seat-badge, .days-badge { background: var(--accent-red); color: #fff; }
.social a:hover { background: var(--accent-red); }
.main-nav a:hover { color: var(--accent-red); }
.site-header .main-nav a.active { box-shadow: inset 0 -3px 0 var(--accent-red); }
a:hover { color: var(--accent-red); }
.btn:hover, .site-footer a.btn:hover, .topbar a:hover { color: inherit; }
.site-footer a:hover, .topbar a:hover { color: var(--accent-yellow); }
.poster-foot svg { fill: var(--accent-red); }
.day-badge { background: var(--accent-red); }

/* ==========================================================================
   19. SQUARER CORNERS - 5px everywhere (tiny status dots stay round)
   ========================================================================== */
.banner-dot, .topbar .open-dot::before, .carousel-dot { border-radius: 5px; }
.banner-dot { width: 11px; height: 11px; }

/* ==========================================================================
   20. HEADER ALIGNMENT - logo left, menu centred, buttons right
   ========================================================================== */
@media (min-width: 961px) {
  .header-inner { min-height: 78px; gap: 20px; }
  .main-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
  .main-nav ul { align-items: stretch; gap: 2px; }
  .main-nav a {
    display: flex; align-items: center;
    height: 78px;
    padding: 0 clamp(5px, .95vw, 13px);
    font-size: clamp(.8rem, 1.02vw, .95rem);
    border-radius: 0;
  }
  .main-nav a.active, .site-header .main-nav a.active { box-shadow: inset 0 -4px 0 var(--accent-red); }
  .header-cta { margin-left: 0; }
}

/* ==========================================================================
   21. CAROUSELS (destinations + packages) - auto-sliding, swipeable
   ========================================================================== */
.carousel { position: relative; }
.carousel-track {
  position: relative;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 14px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; min-width: 0; }
.carousel-track > .poster { grid-column: auto; }
.carousel-arrow {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(1, 46, 96, .28);
  cursor: pointer;
}
.carousel-arrow svg { width: 22px; height: 22px; fill: var(--primary-color); }
.carousel-arrow:hover { background: var(--accent-yellow); }
.carousel-arrow.is-prev { left: -16px; }
.carousel-arrow.is-next { right: -16px; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-dot {
  width: 10px; height: 10px; padding: 0;
  border: 0; background: #b9cce2; cursor: pointer;
}
.carousel-dot[aria-current="true"] { width: 26px; border-radius: 5px; background: var(--secondary-color); }
.section-dark .carousel-dot { background: rgba(255,255,255,.35); }
.section-dark .carousel-dot[aria-current="true"] { background: var(--accent-yellow); }
@media (max-width: 960px) {
  .carousel-track > * { flex-basis: calc((100% - 22px) / 2); }
  .carousel-arrow.is-prev { left: 4px; } .carousel-arrow.is-next { right: 4px; }
}
@media (max-width: 600px) {
  .carousel-track > * { flex-basis: 86%; }
  .carousel-arrow { width: 38px; height: 38px; }
}

/* ==========================================================================
   22. PACKAGE CARDS - each one has its own colour and pattern
   ========================================================================== */
.packages-band { position: relative; overflow: hidden; }
.packages-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(248,196,0,.14), transparent 40%),
              radial-gradient(circle at 92% 100%, rgba(217,48,26,.18), transparent 42%);
}
.packages-band .container { position: relative; }
.pk {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  color: var(--ink);
}
.pk-top {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  min-height: 132px;
  padding: 26px 22px 18px;
  color: var(--pk-ink, #fff);
  background: var(--pk-pattern), linear-gradient(135deg, var(--pk-a), var(--pk-b));
}
.pk-nights { font-family: var(--font-display); font-weight: 800; font-size: 3.3rem; line-height: 1; letter-spacing: -.02em; }
.pk-days { font-weight: 700; font-size: 1.15rem; opacity: .9; }
.pk-ribbon {
  position: absolute; top: 14px; right: 0;
  padding: 5px 14px 5px 12px;
  background: #fff; color: var(--accent-red);
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.pk-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.section-dark .pk-body h3, .pk-body h3 { margin: 0 0 12px; color: var(--primary-dark); font-size: 1.28rem; }
.pk-stops { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.pk-stops li { padding: 4px 10px; border: 1px solid var(--pk-a); border-radius: 5px; color: var(--primary-dark); font-size: .84rem; font-weight: 600; background: var(--mist); }
.section-dark .pk-body p.pk-inc, .pk-inc { margin: 0 0 18px; color: var(--ink-soft); font-size: .93rem; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.pk-rate { font-weight: 700; color: var(--pk-a); font-size: .95rem; }

/* six looks: stripes, dots, rings, grid, waves, chevrons */
.pk-1 { --pk-a: #024996; --pk-b: #3a7ac4; --pk-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 10px, transparent 10px 22px); }
.pk-2 { --pk-a: #d97a08; --pk-b: #f8c400; --pk-ink: #2a1600; --pk-pattern: radial-gradient(rgba(255,255,255,.4) 2px, transparent 2.5px) 0 0 / 16px 16px; }
.pk-3 { --pk-a: #b82410; --pk-b: #e8541d; --pk-pattern: repeating-radial-gradient(circle at 100% 0, rgba(255,255,255,.12) 0 8px, transparent 8px 20px); }
.pk-4 { --pk-a: #157a5b; --pk-b: #2fae82; --pk-pattern: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px; }
.pk-5 { --pk-a: #012e60; --pk-b: #024996; --pk-pattern: radial-gradient(circle at 85% 120%, rgba(248,196,0,.55) 0 28%, transparent 29%), radial-gradient(circle at 85% 120%, rgba(247,148,32,.4) 0 48%, transparent 49%); }
.pk-6 { --pk-a: #0a3a78; --pk-b: #d9301a; --pk-pattern: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 6px, transparent 6px 16px), repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 16px); }
.pk-1 .pk-top, .pk-2 .pk-top { border-bottom: 4px solid var(--accent-yellow); }
.pk-3 .pk-top, .pk-6 .pk-top { border-bottom: 4px solid var(--accent-yellow); }
.pk-4 .pk-top, .pk-5 .pk-top { border-bottom: 4px solid var(--accent-red); }
@media (max-width: 600px) { .carousel-arrow { display: none; } }

/* Mobile drawer: current page gets a left bar (not the desktop underline) */
@media (max-width: 960px) {
  .site-header .main-nav a.active, .main-nav a.active { box-shadow: inset 4px 0 0 var(--accent-red); background: var(--mist); }
}

/* Dropdown links keep normal height (the 78px rule is for the top-level bar only) */
@media (min-width: 961px) {
  .main-nav .dropdown a { height: auto; padding: 11px 18px; display: block; border-radius: 0; font-size: .93rem; }
  .main-nav .dropdown a:hover { color: var(--accent-red); background: var(--mist); }
}

/* ==========================================================================
   23. ITINERARY PAGES + "Check itinerary" links
   ========================================================================== */
.itin-link, .pk-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 14px;
  font-weight: 700; font-size: .95rem;
  color: var(--primary-color);
  border-bottom: 2px solid var(--accent-yellow);
  align-self: flex-start;
}
.itin-link svg, .pk-link svg { width: 18px; height: 18px; fill: currentColor; }
.itin-link:hover, .pk-link:hover { color: var(--accent-red); border-bottom-color: var(--accent-red); }
.itin-kicker { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 5px; background: var(--accent-yellow); color: #2a1f00 !important; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }

.itin-facts {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow-sm);
}
.itin-facts li { padding: 18px 20px; border-left: 1px solid var(--line); border-top: 4px solid var(--accent-yellow); }
.itin-facts li:first-child { border-left: 0; }
.itin-facts li:nth-child(2) { border-top-color: var(--secondary-color); }
.itin-facts li:nth-child(3) { border-top-color: var(--accent-red); }
.itin-facts li:nth-child(4) { border-top-color: var(--primary-color); }
.itin-facts span { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 4px; }
.itin-facts strong { color: var(--primary-dark); font-size: .98rem; line-height: 1.35; }

.itin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.itin-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.itin-timeline::before { content: ""; position: absolute; left: 28px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, var(--accent-yellow), var(--secondary-color), var(--accent-red)); border-radius: 2px; }
.itin-day { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; margin-bottom: 22px; }
.itin-node {
  position: relative; z-index: 1;
  width: 58px; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--primary-color); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1;
  box-shadow: 0 0 0 5px #fff;
}
.itin-node small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: 2px; font-family: var(--font-body); }
.itin-day:nth-child(3n+2) .itin-node { background: var(--secondary-color); color: #2a1600; }
.itin-day:nth-child(3n) .itin-node { background: var(--accent-red); }
.itin-card { padding: 18px 22px 18px; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow-sm); }
.itin-card h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--primary-dark); }
.itin-card p { margin: 0 0 12px; color: var(--ink-soft); }
.itin-stay { display: inline-block; padding: 3px 10px; border-radius: 5px; background: var(--mist); color: var(--primary-dark); font-size: .8rem; font-weight: 700; }

.itin-aside { position: sticky; top: 100px; }
.itin-box { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent-red); border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; }
.itin-box img { width: 100%; height: auto; display: block; }
.itin-box-body { padding: 20px; }
.itin-box-body h3 { margin: 0 0 12px; color: var(--primary-dark); }
.itin-box-body .btn { width: 100%; justify-content: center; margin-top: 10px; }
.itin-small { margin: 0 0 6px; color: var(--ink-soft); font-size: .92rem; }

.itin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.itin-list { padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent-yellow); border-radius: 5px; }
.itin-list.is-no { border-top-color: var(--accent-red); }
.itin-list h3 { margin: 0 0 12px; color: var(--primary-dark); }
.itin-list ul { list-style: none; margin: 0; padding: 0; }
.itin-list li { position: relative; padding: 7px 0 7px 28px; color: var(--ink); }
.itin-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 7px; border-left: 3px solid var(--whatsapp-color); border-bottom: 3px solid var(--whatsapp-color); transform: rotate(-45deg); }
.itin-list.is-no li::before { width: 10px; height: 10px; border: 0; top: 13px; left: 1px; background: radial-gradient(circle, var(--accent-red) 0 4px, transparent 5px); transform: none; }
.itin-note { margin: 22px 0 0; color: var(--ink-soft); font-size: .93rem; }

.itin-more { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.itin-more-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--secondary-color); border-radius: 5px; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.itin-more-card:hover { transform: translateY(-3px); color: var(--ink); }
.itin-more-card:nth-child(2n) { border-top-color: var(--accent-yellow); }
.itin-more-card:nth-child(3n) { border-top-color: var(--accent-red); }
.itin-more-card strong { color: var(--primary-dark); line-height: 1.25; }
.itin-more-card span:last-child { font-size: .85rem; color: var(--ink-soft); }
.itin-more-card .days-badge { position: static; align-self: flex-start; }

@media (max-width: 1100px) { .itin-more { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .itin-layout { grid-template-columns: 1fr; gap: 30px; }
  .itin-aside { position: static; order: -1; }
  .itin-facts { grid-template-columns: 1fr 1fr; }
  .itin-facts li:nth-child(3) { border-left: 0; }
  .itin-facts li:nth-child(n+3) { border-top-width: 4px; }
  .itin-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .itin-more { grid-template-columns: 1fr 1fr; }
  .itin-day { grid-template-columns: 46px 1fr; gap: 14px; }
  .itin-node { width: 46px; height: 46px; font-size: 1.05rem; }
  .itin-timeline::before { left: 22px; }
  .itin-card { padding: 14px 16px; }
}
.itin-timeline::before { bottom: 60px; }
.packages-band .carousel-arrow { top: 120px; }

/* ==========================================================================
   24. HEADER - FINAL LAYOUT (overrides every earlier header rule)
   --------------------------------------------------------------------------
   Desktop : logo left, all 9 menu items centred on one line, Call + WhatsApp
             buttons right. Nothing overlaps or gets clipped at any width.
   Phones  : the header is FIXED to the top of the screen, so it stays visible
             while the page scrolls (sticky positioning is unreliable on
             phones when the page clips sideways overflow).
   ========================================================================== */

/* Sticky positioning breaks when BOTH html and body clip overflow. Only the
   body clips now, which still stops sideways scrolling. */
html { overflow-x: visible; }

.site-header .header-inner {
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.site-header .logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-header .header-cta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: 0; }
.site-header .header-cta .btn { border-radius: 5px; }

/* Call button is shown in the header at every width (it was hidden before) */
.site-header .header-cta .btn-call-header { display: inline-flex; }

/* ---------- Desktop ---------- */
@media (min-width: 961px) {
  .site-header { position: sticky; top: 0; }
  .site-header .header-inner { min-height: 80px; gap: 16px; padding: 0 24px; }
  .site-header .logo img { height: 50px; width: auto; }

  .site-header .main-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
  .site-header .main-nav > ul { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .site-header .main-nav > ul > li > a {
    display: flex; align-items: center;
    height: 80px;
    padding: 0 11px;
    font-size: .94rem;
    white-space: nowrap;
    border-radius: 5px;
    background: transparent;
  }
  .site-header .main-nav > ul > li > a.active { box-shadow: inset 0 -4px 0 var(--accent-red); color: var(--primary-color); }

  /* Taxi Rental dropdown */
  .site-header .dropdown { top: 100%; border-radius: 5px; padding: 6px; }
  .site-header .dropdown a { height: auto; padding: 10px 16px; border-radius: 5px; font-size: .93rem; }

  .site-header .header-cta .btn { height: 44px; padding: 0 16px; font-size: .9rem; }
}

/* Medium laptops: buttons become square icons so the full menu fits */
@media (min-width: 961px) and (max-width: 1365px) {
  .site-header .header-inner { gap: 12px; padding: 0 18px; }
  .site-header .main-nav > ul > li > a { padding: 0 8px; font-size: .9rem; }
  .site-header .header-cta .btn { width: 44px; padding: 0; gap: 0; }
  .site-header .header-cta .btn span { display: none; }
  .site-header .header-cta .btn svg { width: 20px; height: 20px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .site-header .header-inner { gap: 8px; padding: 0 14px; }
  .site-header .logo img { height: 42px; }
  .site-header .main-nav > ul > li > a { padding: 0 6px; font-size: .84rem; }
  .has-dropdown > a::after { margin-left: 5px; }
}
@media (min-width: 961px) and (max-width: 1060px) {
  .site-header .main-nav > ul > li > a { padding: 0 5px; font-size: .79rem; }
  .site-header .header-cta { gap: 6px; }
  .site-header .header-cta .btn { width: 40px; height: 40px; }
}

/* ---------- Tablets and phones: fixed header + slide-in menu ---------- */
@media (max-width: 960px) {
  .topbar { display: none; }

  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;       /* keeps the fixed menu panel sized to the screen */
  }
  .site-header .header-inner { height: 70px; min-height: 70px; gap: 10px; padding: 0 16px; }
  .site-header .logo img { height: 46px; }

  /* Space at the top of the page so content starts below the fixed header */
  body { padding-top: 73px; }
  html { scroll-padding-top: 84px; }

  .site-header .header-cta { gap: 8px; position: relative; z-index: 901; }
  .site-header .header-cta .btn {
    width: 44px; height: 44px; padding: 0; gap: 0;
  }
  .site-header .header-cta .btn span { display: none; }
  .site-header .header-cta .btn svg { width: 21px; height: 21px; }
  .burger { display: block; width: 44px; height: 44px; border-radius: 5px; }
  .burger span:nth-child(1) { top: 14px; }
  .burger span:nth-child(2) { top: 21px; }
  .burger span:nth-child(3) { top: 28px; }
  .burger.open span:nth-child(1), .burger.open span:nth-child(3) { top: 21px; }

  /* Slide-in menu panel: starts below the header, scrolls on its own */
  .main-nav {
    position: fixed;
    top: 73px; right: 0; bottom: 0;
    height: auto;
    width: min(86vw, 340px);
    padding: 14px 14px 110px;
    border-radius: 5px 0 0 5px;
    z-index: 899;
  }
  .nav-overlay { top: 73px; }
  .main-nav ul { gap: 4px; }
  .main-nav > ul > li > a,
  .main-nav a {
    border-radius: 5px;
    border-bottom: 0;
    padding: 12px 14px;
    background: transparent;
  }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
  .main-nav > ul > li:last-child { border-bottom: 0; }
  .site-header .main-nav a.active, .main-nav a.active { box-shadow: inset 4px 0 0 var(--accent-red); background: var(--mist); }
  .dropdown { border-radius: 5px; margin: 4px 0 4px 12px; padding: 4px; background: var(--mist); border-left: 0; }
  .dropdown a { padding: 10px 12px; font-size: .95rem; }
}
@media (max-width: 400px) {
  .site-header .header-inner { gap: 6px; padding: 0 12px; }
  .site-header .logo img { height: 40px; }
  .site-header .header-cta { gap: 6px; }
  .site-header .header-cta .btn, .burger { width: 42px; height: 42px; }
}

/* ==========================================================================
   25. 5px CORNERS - the remaining square corners on every page
   ========================================================================== */
.days-badge,
.itin-more-card .days-badge,
.seat-badge,
.acc-item, .acc-btn,
.map-embed, .map-embed iframe,
.gallery-mosaic figure, .gallery-mosaic img, .gallery-grid img,
figure img,
.info-card, .info-row .icon,
.pk, .pk-ribbon,
.poster, .card, .vehicle-card, .tour-card,
.mobile-bar .btn, .float-btn,
.social a,
input, select, textarea, button, iframe, table,
.dropdown, .dropdown a,
.badge, .tag, .chip { border-radius: 5px; }
.pk-ribbon { clip-path: none; right: 12px; }
.days-badge { left: 10px; bottom: 10px; }
.itin-more-card .days-badge { left: auto; bottom: auto; }
/* Top strip lines up with the header edges */
@media (min-width: 961px) {
  .topbar .container { max-width: 1400px; padding: 0 24px; }
}
@media (min-width: 961px) and (max-width: 1365px) { .topbar .container { padding: 0 18px; } }
@media (min-width: 961px) and (max-width: 1180px) { .topbar .container { padding: 0 14px; } }