/* ============================================
   RODE CULTURE — Main Stylesheet
   Brand Colors:
   - Cream: #E8DDD0
   - Dark Charcoal: #2E2E2E
   - Primary Brown: #6B4035
   - Tan Accent: #C9A882
   - Light Cream: #F5F0E8
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

@font-face {
  font-family: 'Intro Rust';
  src: url('../fonts/IntroRust-Base.woff2') format('woff2'),
       url('../fonts/IntroRust-Base.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garet';
  src: url('../fonts/Garet-Book.woff2') format('woff2'),
       url('../fonts/Garet-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garet';
  src: url('../fonts/Garet-Heavy.woff2') format('woff2'),
       url('../fonts/Garet-Heavy.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garet';
  src: url('../fonts/Garet-Book.woff2') format('woff2'),
       url('../fonts/Garet-Book.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --cream: #ffffff;
  --cream-light: #ffffff;
  --dark: #000000;
  --dark-2: #000000;
  --brown: #6B4035;
  --brown-light: #8B5A44;
  --brown-dark: #4A2C22;
  --tan: #ffffff;
  --tan-light: #ffffff;
  --white: #FFFFFF;
  --gray: #6B7280;
  --gray-light: #F3F4F6;
  --success: #22C55E;
  --error: #EF4444;
  --font-heading: 'Yeseva One', serif;
  --font-sub-heading: 'Yeseva One', serif;
  --font-body: 'Garet', sans-serif;
  --font-accent: 'Yeseva One', serif;
  --nav-h: 85px;
  --section-py: 100px;
  --border-r: 4px;
}

.pin-spacer{
  background: #000000;
  color: #ffffff;
}

#featuredRides{
  padding-top: 0px;
}

#mission{
  padding-top: 0px;
}

#toursVideo{
  padding-top: 0px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; }

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sub-heading); letter-spacing: 0.02em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 8vw, 5rem); }
h2 { font-size: clamp(1.5rem, 5vw, 4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1rem, 2vw, 1.8rem); }

.text-accent { font-family: var(--font-accent); font-style: italic; }

/* ---- UTILITY ---- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.section-py { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.bg-dark { background: #000000; color: #ffffff; }
.bg-brown { background: var(--brown); color: var(--cream); }
.bg-cream { background: var(--cream-light); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 { color: #ffffff; }
.bg-dark p, .bg-dark li, .bg-dark span, .bg-dark a:not(.btn) { color: inherit; }
.bg-dark .form-label { color: #ffffff; }
.bg-dark .form-control {
  background: #000000;
  border-color: rgba(255,255,255,0.3);
  color: #ffffff;
}
.bg-dark .form-control::placeholder { color: rgba(255,255,255,0.4); }
.bg-dark .form-control:focus { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.bg-dark select.form-control {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); */
}
.bg-dark .form-control.is-invalid { border-color: var(--error); }
.bg-dark .card-on-dark {
  background: #000000;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;
}
.bg-dark .card-on-dark h3, .bg-dark .card-on-dark h4 { color: #ffffff; }
.bg-dark .card-on-dark p { color: rgba(255,255,255,0.7); }
.text-brown { color: var(--brown); }
.text-tan { color: var(--tan); }
.text-cream { color: var(--cream); }
.text-white { color: var(--white); }
.text-center { text-align: center; }

/* ---- SECTION LABELS ---- */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 12px;
}
.bg-dark .section-label, .bg-brown .section-label { color: var(--tan); }

.section-title { margin-bottom: 16px; }
.section-subtitle {
  font-size: 1.1rem;
  color: var(--gray);
  max-width: 600px;
  line-height: 1.7;
}
.bg-dark .section-subtitle { color: var(--tan-light); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  min-width: 200px;
  line-height: 1;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--border-r);
  transition: all 0.3s ease;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--brown);
  color: var(--cream);
  border: 2px solid var(--brown);
}
.btn-primary:hover { background: var(--brown-dark); border-color: var(--brown-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(107,64,53,0.4); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
}
.btn-outline:hover { background: var(--cream); color: var(--dark); }

.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
}
.btn-outline-dark:hover { background: var(--dark); color: var(--cream); }

.btn-brown-outline {
  background: transparent;
  color: var(--brown);
  border: 2px solid var(--brown);
}
.btn-brown-outline:hover { background: var(--brown); color: var(--cream); }

.btn-sm { padding: 0 32px; }
.btn-lg { padding: 0 32px; }

/* ---- NAVIGATION ---- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: all 0.4s ease;
}

.navbar.transparent {
  background: transparent;
}

.navbar.scrolled, .navbar.solid {
  background: var(--dark-2);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.navbar-logo { justify-self: start; margin-top: -30px; }
.navbar-menu { justify-self: center; }
.navbar-cta  { justify-self: end; display: flex; align-items: center; gap: 12px; }
.navbar-cta .btn {
  height: 35px;
  position: relative;
  top: -14px;
}

.navbar-logo img { height: 150px; width: auto; }

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  position: relative;
  top: -15px;
}

.navbar-link {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  position: relative;
  transition: color 0.3s;
}
.navbar-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--tan);
  transition: width 0.3s ease;
}
.navbar-link:hover, .navbar-link.active { color: var(--tan); }
.navbar-link:hover::after, .navbar-link.active::after { width: 100%; }

.navbar-cta { margin-left: 12px; }

.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  cursor: pointer;
}
.navbar-toggle span {
  display: block;
  width: 32px; height: 2px;
  background: var(--cream);
  transition: all 0.3s;
}

@media (max-width: 1024px) {
  .navbar-toggle { display: flex; }
  /* Below 1024px .navbar-menu is either display:none or a fixed-position
     overlay — either way it shouldn't occupy a column. But the desktop
     grid-template-columns: 1fr auto 1fr still reserves real width for that
     middle "auto" track, which pushes the toggle in from the right edge
     instead of flush against it. Flexbox with the two remaining visible
     items (logo, cta) avoids that column entirely. */
  .navbar-inner { display: flex; justify-content: space-between; }
  /* The base .navbar-logo rule (margin-top:-30px, img height:150px) is
     sized for the desktop layout, where nothing sits close enough below
     the navbar to be affected. Below 1024px the nav already switches to
     hamburger mode, and on interior pages (.page-header banners) a real
     link — e.g. region.blade.php's "All Regions" back link — sits right
     under the navbar. At full desktop size the logo's box (extending
     from -30px to 120px) physically overlaps that link and intercepts
     its clicks, even though the logo's own pixels there are invisible
     (just empty space within the <img> box), making the back button
     appear broken. Shrinking the logo here keeps its box within the
     navbar's own height so it can't cover content below it. (A narrower
     <=360px rule further down drops this even smaller for tiny phones.) */
  .navbar-logo { margin-top: 0; }
  .navbar-logo img { height: 56px; }
  /* Hide the top-bar CTA button — it lives inside the mobile menu instead */
  .navbar-cta > .btn-primary { display: none; }
  .navbar-menu {
    display: none;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    width: 100%;
    min-height: calc(100vh - var(--nav-h));
    background: var(--dark-2);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    overflow-y: auto;
    padding: 40px 24px;
    z-index: 1001;
  }
  .navbar-menu.open { display: flex; }
  .navbar-link { font-size: 1.2rem; letter-spacing: 0.18em; }
  .nav-mobile-cta { display: inline-flex; }
}

/* Hamburger → X when open */
.navbar-toggle span { transition: all 0.3s ease; }
.navbar-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.navbar-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* Mobile-only CTA link hidden on desktop */
.nav-mobile-cta { display: none; }

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark-2);
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* background:
    radial-gradient(ellipse 110% 85% at 22% 60%, rgba(107,64,53,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70%  55% at 78% 15%, rgba(201,168,130,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 60%  40% at 50% 95%, rgba(107,64,53,0.12) 0%, transparent 50%),
    linear-gradient(165deg, #0e0b09 0%, #0a0806 40%, #070604 100%); */
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 50%, transparent 100%);
  z-index: 1;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.45;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-text { text-align: center; }

/* ---- Hero right-side image ---- */
.hero-image-wrap {
  position: relative;
  z-index: 2;
  display: none;
}

.hero-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 2px;
  /* Subtle tan outline frame */
  outline: 1px solid rgba(201,168,130,0.3);
  outline-offset: 12px;
  filter: brightness(0.92) contrast(1.05);
}

/* Decorative corner brackets */
.hero-image-wrap::before,
.hero-image-wrap::after {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  border-color: var(--tan);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}
.hero-image-wrap::before {
  top: -2px; right: -2px;
  border-width: 2px 2px 0 0;
}
.hero-image-wrap::after {
  bottom: -2px; left: -2px;
  border-width: 0 0 2px 2px;
}

/* Small label badge overlaid on image */
.hero-img-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(107,64,53,0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,130,0.35);
  color: var(--tan);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* ---- Responsive: stack on tablet/mobile ---- */
@media (max-width: 1024px) {
  .hero-image-wrap {
    display: none;
  }
}
@media (max-width: 768px) {
  .hero-content { padding: 0 20px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-desc { font-size: 1rem; margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .hero-content { padding: 0 16px; }
  .hero-tagline { font-size: 0.72rem; margin-bottom: 24px; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--tan);
}

.hero h1 { color: #ffffff; margin-bottom: 24px; }
.hero h1 span { color: #ffffff; }

.hero-tagline {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 36px;
}

.hero-desc {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
  max-width: 580px;
  margin-bottom: 40px;
  line-height: 1.8;
}

.hero-actions { display: flex; align-items: stretch; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-actions .btn { flex: 1; min-width: 200px; max-width: 260px; height: 52px; }

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  opacity: 0.6;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--tan), transparent);
  animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.hero-badge {
  position: absolute;
  right: 80px;
  bottom: 80px;
  z-index: 2;
  background: rgba(107,64,53,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201,168,130,0.3);
  padding: 24px;
  text-align: center;
  max-width: 160px;
}
.hero-badge-num {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--tan);
  line-height: 1;
}
.hero-badge-text {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-light);
}

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

/* ---- CARDS ---- */
.tour-card {
  background: #000000;
  border: 1px solid rgba(201,168,130,0.15);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.tour-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); border-color: rgba(201,168,130,0.3); }

.tour-card-img {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--dark-2);
}
.tour-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tour-card:hover .tour-card-img img { transform: scale(1.05); }

.tour-card-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--brown);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
}

.tour-card-body { padding: 24px; }
.tour-card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.tour-card-meta span { display: flex; align-items: center; gap: 5px; }
.tour-card-title { font-size: 1.5rem; margin-bottom: 10px; color: #ffffff; }
.tour-card-desc { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: 20px; line-height: 1.6; }
.tour-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.tour-card-price {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--tan);
  line-height: 1;
}
.tour-card-price small { font-family: var(--font-body); font-size: 0.75rem; color: rgba(255,255,255,0.5); font-weight: 400; letter-spacing: 0; display: block; }

/* ---- GRID ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- LOGO REVEAL ---- */
.logo-reveal-section {
  background: var(--dark-2);
  min-height: 80vh;
  padding: 80px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-reveal-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, calc(-50% + 40px), 0px) scale(0.7);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 2;
}
.logo-reveal-img {
  height: 110px;
  width: auto;
  max-width: 80vw;
  object-fit: contain;
  display: block;
}

/* ---- LRS: oversized brand-word character reveal (organicslk-style) ---- */
.lrs-chars-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.lrs-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lrs-char-clip {
  overflow: hidden;
  display: block;
}
.lrs-char {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 13vw, 15rem);
  line-height: 0.92;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,168,130,0.18);
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 65ms),
    opacity   0.9s ease                            calc(var(--i, 0) * 65ms);
  will-change: transform, opacity;
}
.lrs-chars-wrap.lrs-revealed .lrs-char {
  transform: translateY(0);
  opacity: 1;
}

/* ---- STATS BAR ---- */
.stats-bar {
  position: relative;
  background: var(--dark);
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stats-bar::before { display: none; }

.stats-bar::after { display: none; }

.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/* vertical separator between items */
.stat-item + .stat-item {
  border-left: 1px solid rgba(255,255,255,0.12);
}

.stat-item {
  text-align: center;
  padding: 52px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  transition: background 0.3s ease;
}

.stat-item:hover {
  background: rgba(255,255,255,0.08);
}

.stat-primary {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.8rem);
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: text-shadow 0.3s ease;
}

/* flash when counter finishes */
.stat-num--done {
  animation: statCountDone 0.55s ease-out forwards;
}
@keyframes statCountDone {
  0%   { text-shadow: none; }
  35%  { text-shadow: 0 0 20px rgba(201,168,130,0.35); }
  100% { text-shadow: none; }
}

/* thin decorative rule between number and label */
.stat-divider {
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin: 14px auto 14px;
  transition: width 0.6s ease;
}
.stat-item:hover .stat-divider,
.stat-num--done ~ .stat-divider {
  width: 48px;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* bottom accent */
.stats-bar .container::after {
  display: none;
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(201,168,130,0.18); }
  .stat-item { padding: 36px 24px; }
}

/* ---- ABOUT HERO SPLIT (editorial two-column hero) ---- */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  width: 100%;
  text-align: left;
}
.about-hero-left {
  padding-right: 64px;
}
.about-hero-right {
  padding-left: 64px;
  border-left: 1px solid rgba(201,168,130,0.3);
}
@media (max-width: 768px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-left { padding-right: 0; }
  .about-hero-right {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(201,168,130,0.25);
    padding-top: 28px;
    margin-top: 4px;
  }
}

/* ---- ABOUT SPLIT ---- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-img-wrap {
  position: relative;
}
.about-img-main {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 8px;
}
.about-img-accent {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 55%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 6px solid var(--white);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.about-values { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.about-value {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.about-value-icon {
  width: 44px; height: 44px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brown);
  font-size: 1.2rem;
}
.about-value-text h4 { font-size: 1rem; margin-bottom: 4px; }
.about-value-text p { font-size: 0.875rem; color: var(--gray); }

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; gap: 48px; }
  .about-img-wrap { max-width: 500px; margin: 0 auto; padding-bottom: 40px; overflow: hidden; }
}

/* ---- ROYAL ENFIELD PARTNER CARD ---- */
.re-bike-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow: hidden;
  /* border: 1px solid rgba(107,64,53,0.15); */
  background: transparent;
}
.re-bike-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 60%;
}
.re-bike-logo {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 26%;
  max-width: 90px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  z-index: 3;
}

/* ---- TESTIMONIALS ---- */
.testimonial-slider-wrap {
  position: relative;
  padding: 0 56px;
}
@media (max-width: 640px) { .testimonial-slider-wrap { padding: 0 40px; } }
@media (max-width: 480px) { .testimonial-slider-wrap { padding: 0 32px; } }
.testimonial-card {
  background: #000000;
  /* border: 1px solid rgba(201,168,130,0.15); */
  padding: 40px;
  border-radius: 8px;
  margin: 0 16px;
}

/* Slick center-mode focus treatment (only when there are enough slides to focus) */
.testimonial-track.is-spotlight .slick-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.45;
  transform: scale(0.92);
}
.testimonial-track.is-spotlight .slick-current { opacity: 1; transform: scale(1); }
.testimonial-track .slick-list { overflow: hidden; }
.testimonial-slider-wrap .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-top: 36px;
  padding: 0;
}
.testimonial-slider-wrap .slick-dots li { width: auto; height: auto; margin: 0; }
.testimonial-slider-wrap .slick-dots li button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(201,168,130,0.3);
  border: none;
  cursor: pointer;
  font-size: 0;
  transition: background 0.25s, transform 0.25s;
}
.testimonial-slider-wrap .slick-dots li button:before { content: none; }
.testimonial-slider-wrap .slick-dots li.slick-active button {
  background: var(--tan);
  transform: scale(1.3);
}

/* ---- RIDER STORIES (community page) ---- */
.rider-stories-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 48px;
}
.rider-stories-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0;
}
.rider-stories-underline {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--tan);
  margin: 10px 0 16px;
  border-radius: 2px;
}
.rider-stories-sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}
.rider-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.rider-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  padding: 24px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--dark-2);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.rider-story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
  z-index: 0;
}
.rider-story-quote-icon {
  position: relative;
  z-index: 1;
  font-size: 1.6rem;
  color: var(--brown-light);
  margin-bottom: 14px;
}
.rider-story-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.rider-story-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rider-story-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rider-story-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brown);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.85rem;
}
.rider-story-name {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rider-story-tag {
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 2px;
}
@media (max-width: 1024px) {
  .rider-stories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rider-stories-grid { grid-template-columns: 1fr; }
  .rider-story-card { min-height: 320px; }
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(201,168,130,0.15);
  border: 1px solid rgba(201,168,130,0.3);
  color: var(--tan);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  z-index: 10;
}
.slider-btn:hover:not(:disabled) { background: rgba(201,168,130,0.3); border-color: var(--tan); }
.slider-btn:disabled { opacity: 0.3; cursor: default; }
.slider-prev { left: 0; }
.slider-next { right: 0; }
.testimonial-stars { color: var(--tan); font-size: 1rem; margin-bottom: 16px; letter-spacing: 2px; }
.testimonial-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream-light);
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--cream);
}
.testimonial-name { font-weight: 600; color: var(--cream); }
.testimonial-loc { font-size: 0.8rem; color: var(--tan); }

/* ---- GALLERY MAGAZINE ---- */
.gallery-magazine {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 290px 290px;
  gap: 3px;
  background: var(--dark-2);
  margin-bottom: 3px;
}
.gallery-mag-left  { grid-column: 1; grid-row: 1 / 3; }
.gallery-mag-mid-t { grid-column: 2; grid-row: 1; }
.gallery-mag-mid-b { grid-column: 2; grid-row: 2; }
.gallery-mag-right { grid-column: 3; grid-row: 1 / 3; }

/* Fallback for an incomplete trailing group (fewer than 4 tiles) */
.gallery-magazine.gallery-magazine--flat {
  grid-template-columns: repeat(var(--flat-cols, 1), 1fr);
  grid-template-rows: 290px;
}
.gallery-magazine--flat .gallery-mag-item {
  grid-column: auto;
  grid-row: auto;
}

.gallery-mag-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--dark-2);
}
.gallery-mag-item .mag-img-stack {
  position: absolute;
  inset: 0;
}
.gallery-mag-item .mag-img-stack img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease, transform 0.6s ease;
}
.gallery-mag-item .mag-img-stack img.is-active { opacity: 1; }
.gallery-mag-item:hover .mag-img-stack img.is-active { transform: scale(1.04); }
.gallery-mag-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, transparent 70%);
  pointer-events: none;
}
.gallery-mag-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
}
.gallery-mag-caption .mag-cap-loc { color: var(--tan); }
.gallery-mag-caption .mag-cap-sub { color: rgba(255,255,255,0.8); margin-left: 0.4em; }
@media (max-width: 768px) {
  .gallery-magazine {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
  }
  .gallery-mag-left  { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  .gallery-mag-right { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  .gallery-mag-mid-t { grid-column: 1 !important; grid-row: 3 !important; }
  .gallery-mag-mid-b { grid-column: 2 !important; grid-row: 3 !important; }
}
@media (max-width: 480px) {
  .gallery-magazine {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 220px);
  }
  .gallery-mag-left,
  .gallery-mag-right,
  .gallery-mag-mid-t,
  .gallery-mag-mid-b { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---- GALLERY CAROUSEL (home page — Slick center mode) ---- */
.gallery-preview-wrap { position: relative; padding: 0 56px; }
@media (max-width: 640px) { .gallery-preview-wrap { padding: 0 40px; } }
@media (max-width: 480px) { .gallery-preview-wrap { padding: 0 32px; } }
.gallery-carousel .gallery-carousel-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 420px;
  margin: 0 12px;
  border-radius: 8px;
  background: var(--dark-2);
}
.gallery-carousel-item img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-carousel-item:hover img { transform: scale(1.04); }
.gallery-carousel-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 640px) { .gallery-carousel .gallery-carousel-item { height: 320px; } }

.gallery-carousel .slick-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.45;
  transform: scale(0.92);
}
.gallery-carousel .slick-current { opacity: 1; transform: scale(1); }
.gallery-carousel .slick-list { overflow: hidden; }
.gallery-preview-wrap .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-top: 28px;
  padding: 0;
}
.gallery-preview-wrap .slick-dots li { width: auto; height: auto; margin: 0; }
.gallery-preview-wrap .slick-dots li button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(107,64,53,0.3);
  border: none;
  cursor: pointer;
  font-size: 0;
  transition: background 0.25s, transform 0.25s;
}
.gallery-preview-wrap .slick-dots li button:before { content: none; }
.gallery-preview-wrap .slick-dots li.slick-active button {
  background: var(--brown);
  transform: scale(1.3);
}
.gallery-preview-wrap .slider-btn {
  background: rgba(107,64,53,0.08);
  border-color: rgba(107,64,53,0.3);
  color: var(--brown);
}
.gallery-preview-wrap .slider-btn:hover:not(:disabled) {
  background: rgba(107,64,53,0.18);
  border-color: var(--brown);
}

/* ---- GALLERY SPLIDE (shared across all pages) ---- */
.gallery-splide .splide__track {
  border-radius: 12px;
  overflow: hidden;
}
.gallery-splide .splide__slide {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--cream);
}
.gallery-splide .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-splide .splide__slide:hover img { transform: scale(1.07); }
.gallery-splide .gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(107,64,53,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 2rem;
}
.gallery-splide .splide__slide:hover .gallery-overlay { opacity: 1; }

/* Splide arrow buttons */
.gallery-splide .splide__arrow {
  background: rgba(255,255,255,0.9);
  opacity: 1;
  width: 44px;
  height: 44px;
}
.gallery-splide .splide__arrow svg { fill: var(--dark); }
.gallery-splide .splide__arrow:hover { background: #fff; }

/* Splide pagination dots */
.gallery-splide .splide__pagination { padding-top: 14px; }
.gallery-splide .splide__pagination__page {
  background: rgba(107,64,53,0.3);
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}
.gallery-splide .splide__pagination__page.is-active {
  background: var(--brown);
  transform: none;
  width: 20px;
  border-radius: 4px;
}

/* Home page preview gallery — shorter slide cells */
.gallery-preview-wrap .gallery-splide .splide__slide {
  aspect-ratio: 16 / 9;
}

/* ---- BLOG CARDS ---- */
.blog-card {
  background: #000000;
  border: 1px solid rgba(201,168,130,0.15);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); border-color: rgba(201,168,130,0.3); }
.blog-card-img { height: 220px; overflow: hidden; background: var(--dark-2); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 24px; }
.blog-card-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 10px;
}
.blog-card-title { font-size: 1.3rem; margin-bottom: 10px; color: #ffffff; }
.blog-card-excerpt { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 20px; }
.blog-card-meta { font-size: 0.8rem; color: rgba(255,255,255,0.5); display: flex; gap: 16px; }

/* ---- FORMS ---- */
.form-group { margin-bottom: 24px; }
.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--dark);
}
.form-control {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--white);
  border: 1.5px solid #E5E7EB;
  border-radius: var(--border-r);
  color: var(--dark);
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
.form-control:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(107,64,53,0.1); }
.form-control.is-invalid { border-color: var(--error); }
.form-error { font-size: 0.8rem; color: var(--error); margin-top: 6px; }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* ---- ALERTS ---- */
.alert {
  padding: 16px 20px;
  border-radius: var(--border-r);
  margin-bottom: 24px;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert-success { background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.alert-error { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }
.alert-info { background: #EFF6FF; border: 1px solid #93C5FD; color: #1E40AF; }

/* ---- BREADCRUMB ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--tan); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: rgba(255,255,255,0.4); opacity: 0.4; }

/* ---- PAGE HEADER ---- */
.page-header {
  background: var(--dark-2);
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brown), var(--tan), var(--brown));
}
.page-header-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.page-header h1 { color: #ffffff; position: relative; z-index: 1; }
.page-header .section-label { position: relative; z-index: 1; color: #ffffff; }
.page-header-sub {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* ---- TOUR DETAIL ---- */
.tour-detail-hero {
  height: 60vh;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.tour-detail-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}
.tour-detail-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.tour-meta-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tour-meta-pill {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--cream);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tour-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
  padding: 60px 0;
}

.tour-sidebar {
  position: sticky;
  top: 100px;
}

.booking-card {
  background: #000000;
  border: 1px solid rgba(201,168,130,0.2);
  border-radius: 8px;
  padding: 32px;
  box-shadow: none;
  color: var(--cream);
}
.booking-card-price {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--tan);
  line-height: 1;
  margin-bottom: 4px;
}
.booking-card-price small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: 0;
}

.itinerary-item {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.itinerary-day {
  width: 48px; height: 48px;
  background: var(--brown);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.itinerary-content h4 { font-size: 1rem; margin-bottom: 8px; color: #ffffff; }
.itinerary-content p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.7; }

@media (max-width: 1024px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-sidebar { position: static; }
}

/* ---- INCLUDES/EXCLUDES ---- */
.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.includes-list { list-style: none; }
.includes-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--cream);
}
.includes-list li:last-child { border-bottom: none; }
.includes-list .check { color: var(--success); }
.includes-list .cross { color: var(--error); }

@media (max-width: 640px) { .includes-grid { grid-template-columns: 1fr; } }

/* ---- CONTACT FORM SECTION (photo backdrop + form card) ---- */
.contact-form-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.contact-form-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-form-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.92) 68%, #000 100%);
  z-index: 1;
}
.contact-form-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-form-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0;
}
.contact-form-underline {
  display: block;
  width: 48px;
  height: 4px;
  background: #E8512D;
  margin: 14px 0 18px;
  border-radius: 2px;
}
.contact-form-tagline {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin-bottom: 36px;
}
.contact-form-card {
  background: #000000;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 36px 32px;
}
.contact-form-card__title {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 24px;
}
.btn-accent {
  background: #6b4035;
  color: #ffffff;
  border: 2px solid #6b4035;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.btn-accent:hover { background: #6b4035; border-color: #6b4035; }
@media (max-width: 900px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- CONTACT ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.contact-info-icon {
  width: 48px; height: 48px;
  background: var(--brown);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}
.contact-info-text h4 { font-size: 0.875rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; color: #ffffff; }
.contact-info-text p, .contact-info-text a { font-size: 1rem; color: #ffffff; line-height: 1.6; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ---- FOOTER ---- */
.footer {
  background: var(--dark-2);
  padding: 80px 0 0;
  color: var(--cream);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(201,168,130,0.1);
}
/* The source PNG has large transparent padding around the glyph (visible content is
   only ~24% of the file's height), so a plain height:120px just enlarges that padding.
   Crop it out: scale the image up until the glyph itself is 120px tall, then clip the
   wrapper to the glyph's exact box so it sits flush, matching .footer-col-title. */
.footer-brand-logo-wrap { height: 120px; width: 293px; overflow: hidden; position: relative; margin-bottom: 20px; }
.footer-brand-logo { position: absolute; left: -102px; top: -200px; width: 494px; height: 494px; max-width: none; }
.footer-brand-desc { font-size: 0.875rem; color: var(--cream); line-height: 1.8; max-width: 280px; }
.footer-socials { display: flex; gap: 12px; margin-top: 24px; }
.footer-social {
  width: 40px; height: 40px;
  border: 1px solid rgba(201,168,130,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tan);
  font-size: 1rem;
  transition: all 0.3s;
}
.footer-social:hover { background: var(--brown); border-color: var(--brown); }
.footer-col-title {
  height: 120px;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-link { font-size: 0.875rem; color: var(--cream); transition: color 0.3s; }
.footer-link:hover { color: var(--tan); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 0.8rem;
  color: var(--cream);
}
.footer-partner { display: flex; align-items: center; gap: 12px; }
.footer-partner img { height: 32px; opacity: 0.7; }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } }

/* ---- PAGINATION ---- */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.pagination a, .pagination span {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-r);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--cream);
  transition: all 0.2s;
}
.pagination a:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.pagination span.active { background: var(--brown); color: var(--cream); border-color: var(--brown); }

/* ---- BADGE/TAG ---- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge-brown { background: rgba(201,168,130,0.15); color: var(--tan); }
.badge-success { background: #F0FDF4; color: #166534; }
.badge-warning { background: #FFFBEB; color: #92400E; }
.badge-error { background: #FEF2F2; color: #991B1B; }
.badge-gray { background: var(--gray-light); color: var(--gray); }

/* ---- DIVIDER ---- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  margin: 0;
}

/* ---- LIGHTBOX ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 24px; right: 24px;
  color: var(--cream);
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.lightbox-close:hover { opacity: 1; }

/* ---- MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
}
.modal-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 1.6rem;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover { color: #ffffff; }
@media (max-width: 600px) {
  .modal-box { padding: 28px 24px; }
}

/* ---- ANIMATIONS ---- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ---- BOOKING SUCCESS ---- */
.success-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}
.success-card {
  max-width: 600px;
  width: 100%;
  text-align: center;
  background: var(--white);
  border-radius: 12px;
  padding: 60px 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.success-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--brown), var(--brown-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  font-size: 2.5rem;
  color: var(--cream);
}

/* ---- LOADING ---- */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--dark-2);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo { height: 60px; animation: loaderPulse 1.5s infinite; }
@keyframes loaderPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } }

/* ---- WHATSAPP FLOAT ---- */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 100;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* ---- HORIZONTAL SCROLL TABS ---- */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-tab {
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--cream);
  color: var(--gray);
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}
.filter-tab:hover, .filter-tab.active { background: var(--brown); color: var(--cream); border-color: var(--brown); }

/* ---- RIDE FILTER BAR (dropdown style) ---- */
.ride-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }
.ride-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--brown-dark) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8DDD0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size: 16px;
  color: var(--cream);
  border: none;
  border-radius: 50px;
  padding: 12px 44px 12px 22px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-width: 170px;
}
.ride-filter-select:focus { outline: 2px solid var(--tan); }
.ride-filter-select option { color: var(--cream); background: var(--brown-dark); }
.ride-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
.ride-filter-reset {
  padding: 12px 28px;
  border-radius: 50px;
  background: transparent;
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: all 0.2s;
}
.ride-filter-reset:hover { background: var(--cream); color: var(--dark); }

.ride-country-section { margin-bottom: 64px; }
.ride-country-heading {
  font-size: 1.8rem;
  color: var(--brown);
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cream);
}

/* ---- REGION TILES (tours landing) ---- */
.region-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.region-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 380px;
  max-width: 460px;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--dark-2);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  isolation: isolate;
}
.region-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.25) 100%);
  transition: background 0.3s ease;
}
.region-tile__name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 150px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.region-tile:hover .region-tile__overlay { background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.3) 100%); }
.region-tile img { transition: transform 0.6s ease; }

.ride-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.ride-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
}
.ride-back-link:hover { color: var(--brown); }
.ride-results-heading { font-size: 1.8rem; color: var(--brown); margin: 0; }

@media (max-width: 600px) {
  .region-tiles { gap: 18px; }
  .region-tile { flex: 1 1 100%; height: 260px; }
}

@media (max-width: 640px) {
  .ride-filter-bar { gap: 8px; }
  .ride-filter-select { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 10px 36px 10px 16px; font-size: 0.75rem; }
  .ride-filter-reset { flex: 1 1 100%; text-align: center; }
}


/* ============================================
   CALENDAR EVENTS SECTION
============================================ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.event-card {
  display: flex;
  gap: 0;
  background: #000000;
  border: 1px solid rgba(201,168,130,0.15);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.event-card:hover {
  border-color: rgba(201,168,130,0.4);
  transform: translateY(-3px);
}
.event-card--featured {
  border-color: rgba(201,168,130,0.4);
  background: rgba(107,64,53,0.12);
}

/* Date badge — left strip */
.event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  background: var(--brown);
  padding: 20px 12px;
  gap: 2px;
  flex-shrink: 0;
}
.event-date-month {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.event-date-day {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--tan);
}
.event-date-multi {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
}

/* Card body */
.event-card-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.event-featured-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--tan);
  color: var(--dark);
  padding: 2px 8px;
  margin-bottom: 8px;
  width: fit-content;
}
.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--cream);
  margin-bottom: 8px;
  line-height: 1.3;
}
.event-card-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  line-height: 1.6;
}
.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: rgba(201,168,130,0.8);
  margin-top: auto;
}
.event-card-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-card-meta i {
  width: 13px;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MOBILE RESPONSIVE — GLOBAL SUPPLEMENTS
   Breakpoints: 768px, 640px, 480px
============================================ */

/* --- Responsive section padding --- */
@media (max-width: 768px) {
  :root { --section-py: 64px; }
}
@media (max-width: 480px) {
  :root { --section-py: 48px; }
}

/* --- Container tighter padding on very small screens --- */
@media (max-width: 480px) {
  .container, .container-sm { padding: 0 16px; }
}

/* --- About accent image: prevent overflow on mobile --- */
@media (max-width: 900px) {
  .about-img-accent { right: -10px; bottom: -10px; width: 45%; }
}
@media (max-width: 640px) {
  .about-img-accent { display: none; }
}

/* --- Footer links: prevent long email/address overflow --- */
.footer-link {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* --- Success / booking confirmation card --- */
@media (max-width: 640px) {
  .success-card { padding: 36px 20px; }
}

/* --- Page header (interior page banner) --- */
@media (max-width: 768px) {
  .page-header { padding: 100px 0 40px; }
}
@media (max-width: 480px) {
  .page-header { padding: 90px 0 32px; }
}

/* --- Tour detail hero --- */
@media (max-width: 768px) {
  .tour-detail-hero { height: 45vh; min-height: 260px; }
  .tour-detail-hero-content { padding: 24px 20px; }
}

/* --- Filter tabs on mobile --- */
@media (max-width: 640px) {
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 8px 14px; font-size: 0.75rem; }
}

/* --- Stats bar: tighten numbers on very small screens --- */
@media (max-width: 480px) {
  .stat-num { font-size: 2.8rem; }
  .stats-bar { padding: 32px 0; }
  .stat-item { padding: 20px 16px; }
}

/* --- Stats grid: 3-col → 1-col breakpoint for mid sizes --- */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Testimonial card text: prevent overflow --- */
.testimonial-text { word-break: break-word; overflow-wrap: break-word; }

/* --- Section subtitle max-width on mobile --- */
@media (max-width: 640px) {
  .section-subtitle { max-width: 100%; }
}

/* --- Hero: ensure padding-top accounts for nav on all pages --- */
@media (max-width: 480px) {
  .hero-content { gap: 32px; }
  .hero-desc { font-size: 1rem; margin-bottom: 28px; }
  .hero-actions { gap: 12px; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { min-width: 0; width: 100%; }
  .hero-scroll { display: none; }
}

/* --- Booking card on mobile --- */
@media (max-width: 480px) {
  .booking-card { padding: 20px 16px; }
  .booking-card-price { font-size: 2.2rem; }
}

/* --- Tour layout sidebar sticky (already handled, reinforce) --- */
@media (max-width: 1024px) {
  .tour-sidebar { position: static; margin-top: 0; }
}

/* --- Contact grid info items --- */
@media (max-width: 480px) {
  .contact-info-item { gap: 12px; }
  .contact-info-icon { width: 40px; height: 40px; font-size: 1rem; }
}

/* --- Contact/booking form: full-width submit on mobile --- */
@media (max-width: 640px) {
  form .btn-lg { width: 100%; justify-content: center; }
}

/* --- Tour card meta: wrap gracefully --- */
.tour-card-meta { flex-wrap: wrap; }
@media (max-width: 480px) {
  .tour-card-body { padding: 16px; }
  .tour-card-title { font-size: 1.2rem; }
}

/* --- Tour card footer: keep price+button aligned --- */
@media (max-width: 360px) {
  .tour-card-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* --- Blog card on mobile --- */
@media (max-width: 480px) {
  .blog-card-img { height: 180px; }
  .blog-card-body { padding: 16px; }
}

/* --- Lightbox on mobile --- */
@media (max-width: 480px) {
  .lightbox img { max-width: 95vw; max-height: 80vh; }
  .lightbox-close { top: 12px; right: 16px; font-size: 1.6rem; }
}

/* --- WhatsApp float: smaller on mobile --- */
@media (max-width: 480px) {
  .whatsapp-float { width: 48px; height: 48px; font-size: 1.3rem; bottom: 20px; right: 20px; }
}

/* --- Includes grid: single column sooner on mobile --- */
@media (max-width: 768px) {
  .includes-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Tour meta pills: wrap on mobile --- */
@media (max-width: 640px) {
  .tour-meta-pills { gap: 8px; }
  .tour-meta-pill { font-size: 0.75rem; padding: 6px 12px; }
}

/* --- Gallery grid on mobile: handled by carousel styles above --- */

/* --- Itinerary items: tighter on small screens --- */
@media (max-width: 480px) {
  .itinerary-item { gap: 16px; }
  .itinerary-day { width: 40px; height: 40px; font-size: 1rem; }
}

/* --- Footer bottom: break on small --- */
@media (max-width: 480px) {
  .footer-bottom { font-size: 0.75rem; gap: 8px; }
  .footer { padding: 60px 0 0; }
  .footer-grid { padding-bottom: 40px; }
}

/* --- Pagination: smaller on mobile --- */
@media (max-width: 480px) {
  .pagination a, .pagination span { width: 36px; height: 36px; font-size: 0.8rem; }
  .pagination { gap: 4px; }
}

/* --- Prevent any image from overflowing its parent --- */
img { max-width: 100%; height: auto; display: block; }
.hero-img, .about-img-main { max-width: 100%; }

/* --- Global overflow guard --- */
html { overflow-x: hidden; }

/* --- Booking form card: reduce padding on mobile --- */
@media (max-width: 768px) {
  .booking-form-card { padding: 32px 24px !important; }
}
@media (max-width: 480px) {
  .booking-form-card { padding: 24px 16px !important; border-radius: 8px !important; }
}

/* --- Tour gallery grid: responsive columns --- */
@media (max-width: 640px) {
  .tour-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 360px) {
  .tour-gallery-grid { grid-template-columns: 1fr !important; }
}

/* --- Blog post hero: reduce content padding on mobile --- */
@media (max-width: 768px) {
  .blog-post-hero { height: 40vh; min-height: 280px; }
  .blog-post-hero-content { padding: 28px 20px !important; }
}
@media (max-width: 480px) {
  .blog-post-hero-content { padding: 20px 16px !important; }
}

/* --- Inline section padding overrides for dark/brown CTA sections --- */
/* These sections use inline style padding: 100px 0 which is too large on mobile */
@media (max-width: 768px) {
  [style*="padding: 100px 0"], [style*="padding: 80px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 480px) {
  [style*="padding: 100px 0"], [style*="padding: 80px 0"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* --- Booking tour selected banner: stack on mobile --- */
@media (max-width: 480px) {
  .booking-form-card [style*="display: flex"][style*="gap: 16px"] {
    flex-direction: column;
    gap: 12px !important;
  }
}

/* --- Tour highlights grid: single column on mobile --- */
@media (max-width: 640px) {
  .tour-layout .grid-2 { grid-template-columns: 1fr; }
}

/* --- Section headings with inline styles: prevent overflow --- */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- Navbar inner: prevent overflow on very narrow screens --- */
@media (max-width: 360px) {
  .navbar-inner { padding: 0 12px; }
  .navbar-logo { margin-top: 0; }
  .navbar-logo img { height: 38px; }
}

/* --- Testimonial card text: fix potential overflow --- */
.testimonial-text, .tour-card-title, .blog-card-title, .event-card-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- Stats bar: keep 3-col on tablets (it fits), go 1-col at 480px --- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* --- Tour detail hero content: reduce padding on mobile --- */
@media (max-width: 480px) {
  .tour-detail-hero-content { padding: 20px 16px !important; }
  .tour-detail-hero { height: 40vh; min-height: 240px; }
}

/* --- Community calendar: ensure it doesn't overflow on mobile --- */
@media (max-width: 640px) {
  #rideCalendar { padding: 12px !important; }
  .fc-toolbar { flex-direction: column !important; gap: 8px; }
}

/* --- Contact info text: ensure links don't overflow --- */
.contact-info-text a, .contact-info-text p {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* --- Footer brand description and social: mobile --- */
@media (max-width: 640px) {
  .footer-grid { text-align: center; }
  .footer-brand-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .footer-socials { flex-wrap: wrap; justify-content: center; }
  /* Columns stack on mobile, so the 120px desktop crop/header-alignment box is unnecessary */
  .footer-brand-logo-wrap { height: auto; width: auto; overflow: visible; position: static; margin: 0 auto 16px; }
  .footer-brand-logo { position: static; left: auto; top: auto; width: auto; height: 52px; }
  .footer-col-title { height: auto; display: block; }
  .footer-links { align-items: center; }
}

/* --- Page-header sub text on mobile --- */
@media (max-width: 640px) {
  .page-header-sub { font-size: 0.95rem; margin-top: 8px; }
  .page-header h1 { font-size: clamp(1.8rem, 8vw, 3rem); }
}

/* ================================================================
   SERVICES — STICKY SCROLL SECTION
================================================================ */

/* Sticky pane — GSAP ScrollTrigger pins this element directly (no wrapper) */
.ss-sticky {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--dark-2);
}

/* Two-column layout inside the pinned pane */
.ss-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
  gap: 80px;
  align-items: center;
}

/* ---- LEFT column (static — the sticky pane handles pinning) ---- */
.ss-left {}

.ss-pin__title {
  margin: 14px 0 18px;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  line-height: 1.15;
  color: var(--cream);
}
.ss-pin__title span { color: var(--tan); }

.ss-pin__desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  max-width: 380px;
  margin-bottom: 36px;
}

/* vertical progress nav */
.ss-sidenav {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.ss-sidenav__rail {
  width: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
}

.ss-sidenav__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: var(--tan);
  border-radius: 2px;
  transition: height 0.45s cubic-bezier(0.4,0,0.2,1);
  height: 25%;
}

.ss-sidenav__list {
  display: flex;
  flex-direction: column;
}

.ss-sidenav__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: color 0.3s;
  color: rgba(255,255,255,0.4);
}
.ss-sidenav__btn:hover { color: var(--cream); }
.ss-sidenav__btn.active { color: var(--tan); }

.ss-sidenav__num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  min-width: 26px;
  font-family: var(--font-sans, sans-serif);
  transition: inherit;
}
.ss-sidenav__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-sans, sans-serif);
  transition: inherit;
}

/* ---- RIGHT: card stage — relative container, cards are absolute ---- */
.ss-stage {
  position: relative;
  height: min(520px, calc(100vh - 160px));
}

/* All cards stacked on top of each other; only .active is shown */
.ss-card {
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  border-radius: 20px;
  padding: 44px 48px;
  background: var(--dark);
  border: 1px solid rgba(201,168,130,0.22);
  /* hidden by default — below the stage */
  opacity: 0;
  transform: translateY(64px) scale(0.97);
  pointer-events: none;
  z-index: 0;
  transition:
    opacity      0.6s  cubic-bezier(0.4,0,0.2,1),
    transform    0.65s cubic-bezier(0.22,1,0.36,1),
    background   0.45s ease,
    border-color 0.45s ease,
    box-shadow   0.45s ease;
  will-change: transform, opacity;
}

/* Background photo layer — hidden until card is active */
.ss-card__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: 0;
  border-radius: inherit;
}
.ss-card__bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 8, 4, 0.68);
}
.ss-card.active .ss-card__bg-img {
  opacity: 1;
}
/* Keep all card content above the bg image */
.ss-card > *:not(.ss-card__bg-img) {
  position: relative;
  z-index: 1;
}

/* Active card: slides up into view */
.ss-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  background: var(--dark);
  border-color: rgba(201,168,130,0.22);
  box-shadow:
    0 0 0 1px rgba(201,168,130,0.14),
    0 28px 72px rgba(0,0,0,0.24),
    0 4px 20px rgba(107,64,53,0.2);
  z-index: 2;
}

/* Exiting card: slides up and fades out */
.ss-card--exit {
  opacity: 0;
  transform: translateY(-44px) scale(1.01);
  pointer-events: none;
  z-index: 1;
}

/* decorative large number background */
.ss-card__bg-num {
  position: absolute;
  bottom: -28px;
  right: 20px;
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(107,64,53,0.055);
  pointer-events: none;
  user-select: none;
  font-family: var(--font-serif, Georgia, serif);
  transition: color 0.5s ease;
  opacity: 0;
}
.ss-card.active .ss-card__bg-num {
  color: rgba(201,168,130,0.1);
}

/* top row: icon + counter */
.ss-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ss-card__icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(201,168,130,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--tan);
  transition: background 0.4s, color 0.4s;
  flex-shrink: 0;
}
.ss-card.active .ss-card__icon-wrap {
  background: var(--brown);
  color: var(--cream);
}

.ss-card__counter {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(201,168,130,0.4);
  font-family: var(--font-sans, sans-serif);
  transition: color 0.4s;
}
.ss-card.active .ss-card__counter {
  color: rgba(201,168,130,0.6);
}

.ss-card__title {
  font-size: 1.65rem;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--cream);
  transition: color 0.4s;
}
.ss-card.active .ss-card__title { color: var(--cream); }

.ss-card__desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.65);
  margin-bottom: 28px;
  max-width: 520px;
  transition: color 0.4s;
}
.ss-card.active .ss-card__desc { color: var(--cream); }

/* 2-col features list */
.ss-card__feats {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.ss-card__feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: rgba(255,255,255,0.55);
  transition: color 0.4s;
}
.ss-card__feats li i {
  font-size: 0.72rem;
  color: var(--tan);
  flex-shrink: 0;
  transition: color 0.4s;
}
.ss-card.active .ss-card__feats li   { color: rgba(255,255,255,0.75); }
.ss-card.active .ss-card__feats li i { color: var(--tan); }

/* CTA link */
.ss-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.25s ease;
}
.ss-card__cta:hover { gap: 12px; }
.ss-card__cta i { font-size: 0.75rem; }

/* ---- Bike Rentals Section ---- */
.rentals-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
}
.rentals-section__img-wrap {
  position: relative;
  overflow: hidden;
}
.rentals-section__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--dark-2);
  display: block;
  transition: transform 0.6s ease;
}
.rentals-section:hover .rentals-section__img { transform: scale(1.04); }
.rentals-section__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--dark-2));
}
.rentals-section__content {
  background: var(--dark-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 30px 64px;
}
.rentals-section__logo {
  height: 48px;
  object-fit: contain;
  opacity: 1;
  align-self: flex-start;
}
.brand-x-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  align-self: center;
  margin-top: -55px;
}
.brand-x-badge__img {
  height: 200px;
  width: auto;
  object-fit: contain;
}
.brand-x-badge__x {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tan);
}
@media (max-width: 600px) {
  .brand-x-badge { gap: 10px; }
  .brand-x-badge__img { height: 36px; }
}
.rentals-section__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--cream);
  margin: 0;
  text-align: center;
  margin-top: -35px;
}
.rentals-section__title span { color: var(--tan); }
.rentals-section__text {
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 420px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .rentals-section { grid-template-columns: 1fr; }
  .rentals-section__img-wrap { height: 220px; }
  .rentals-section__img-overlay { background: linear-gradient(to bottom, transparent 50%, var(--dark-2)); }
  .rentals-section__content { padding: 32px 24px; }
}

/* ---- keep old strip eyebrow/text vars for any lingering references ---- */
.ss-rentals__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 6px;
}
.ss-rentals__text {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ss-layout { padding: 0 32px; gap: 48px; }
}

@media (max-width: 900px) {
  /* Mobile: GSAP matchMedia deactivates the pin, show all cards normally */
  .ss-sticky  { height: auto; overflow: visible; padding: 60px 0; }
  .ss-layout  { grid-template-columns: 1fr; padding: 0 24px; gap: 32px; }
  .ss-sidenav { display: none; }
  /* Show all cards stacked normally */
  .ss-stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .ss-card {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: var(--dark);
    border-color: rgba(201,168,130,0.22);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  }
  .ss-card--exit { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .ss-card { padding: 28px 20px; border-radius: 14px; }
  .ss-card__bg-num { font-size: 6rem; }
  .ss-card__feats { grid-template-columns: 1fr; }
  .rentals-section__logo { height: 36px; }
}

/* ---- FAQ ACCORDION ---- */
.faq-list {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.faq-item {
  border: 1px solid rgba(201,168,130,0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #000000;
  transition: background 0.2s;
}
.faq-item[open] {
  background: rgba(107,64,53,0.12);
  border-color: rgba(201,168,130,0.25);
}
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  cursor: pointer;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: none;
}
.faq-question:hover { color: var(--tan); }
.faq-icon {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--tan);
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 28px 22px;
  color: rgba(255,255,255,0.7);
  font-size: 0.925rem;
  line-height: 1.85;
}
@media (max-width: 640px) {
  .faq-question { padding: 18px 20px; font-size: 0.9rem; }
  .faq-answer   { padding: 0 20px 18px; }
}

.iti__country{
  color: black !important;
}