/* =========================================================
FONTS
========================================================= */


@font-face{
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Lora";
  src: url("/assets/fonts/lora/lora-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Lora";
  src: url("/assets/fonts/lora/lora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
GLOBAL BASE — THEME TOKENS
========================================================= */
:root{
  --brand:#97C203;
  --blu:#3a6fb5;
  --light-blu:#0086ca; 
  --sky-blu: #eaf5fb;
  --sun:#FFD84D; 

  --text-dark:hsla(0,0%,7.06%,1);
  --text-body:hsla(0, 0%, 35.3%, 1);
  --muted:hsla(0,0%,44.71%,1);
  --bg:#ffffff;
  --bg-soft:#FAFAF8;

  --shadow-icon:0 4px 10px rgba(0,0,0,0.08);
  --shadow-soft:0 8px 18px rgba(0,0,0,0.10);
  --shadow:0 14px 24px rgba(0,0,0,0.18);

  /* max width for ALL screens */
  --page-max:1140px;
  --maxw:1140px;

  --space-1:0.5rem;    /* 8px  */
  --space-2:0.875rem;  /* 14px */
  --space-3:1.25rem;   /* 20px */
  --space-4:1.75rem;   /* 28px */
  --space-5:2.75rem;   /* 44px */
  --space-6:4rem;      /* 64px */

  --serif:"Lora",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans-serif:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xl: 2.2rem;
  --fs-l: 1.8rem;
  --fs-m: 1.1rem;
  --fs-s: 1rem;
  --fs-xs: 0.75rem;

  --sticky-cta-h: 90px;
}

/* =========================================================
GLOBAL BASE — RESETS & BASE ELEMENTS
========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
  min-height:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;           /* stop page-level sideways scroll */
  background: var(--bg-soft);          /* warm soft cream */
  color:var(--text-body);
}

body{
  font-family:var(--sans-serif);
}


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

a{
  text-decoration:none;
}

/* =========================================================
GLOBAL BASE — LAYOUT & UTILITIES
========================================================= */

/* Shared page body layout (used on home + tour pages) */
.page-body{
  width:100%;
  max-width:100%;
  margin:0;
}

.tour-hero > section {
  margin-top: 1.75rem;
}


/* Generic section spacing */
.section,
section{
  margin:2.75rem var(--space-3) 0 var(--space-3);
}
.section{
  padding:0;
}




/* =========================================================
GLOBAL BASE — TYPOGRAPHY
========================================================= */
.h1,
h1{
  font-size: var(--fs-xl);
  font-weight:600;
  color: var(--blu);
  font-family:var(--sans-serif);
  text-align:center;
  margin: 0; 
}

.hero-copy > h1 {
  font-family:var(--sans-serif);
}

.h2,
h2{
  font-family:var(--serif);
  text-align:center;
  font-size: var(--fs-l);
  font-weight:600;
  margin:0 0 1rem 0;
  line-height: 2rem;
}

.h3,
h3{
  font-family:var(--serif);
  text-align:center;
  font-size: var(--fs-m);
  font-weight:600;
}

.p,
p{
  font-family:var(--sans-serif);
  font-size: var(--fs-s);
  color:var(--text-body);
  text-align: left;
  line-height: 1.6rem;
}

span{
  font-family:var(--sans-serif);
}

span{
  font-family:var(--sans-serif);
}

/* =========================================================
MOBILE NAV — SLIDE OUT
========================================================= */
.mobile-nav{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:80%;
  max-width:320px;
  background:var(--bg);
  box-shadow:-8px 0 24px rgba(0,0,0,0.16);
  transform:translateX(100%);
  transition:transform 0.25s ease-out;
  z-index:60;
  display:flex;
  flex-direction:column;
}

.mobile-nav-inner{
  padding:var(--space-3);
  padding-top:var(--space-4);
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Close button */
.nav-close{
  align-self:flex-end;
  border:none;
  background:none;
  font-size: var(--fs-xl);
  line-height:1;
  cursor:pointer;
}

/* Menu list */
.mobile-nav-list{
  list-style:none;
  padding:0;
  margin:var(--space-3) 0 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}

.mobile-nav-list a{
  font-size: var(--fs-l);
  font-weight:600;
  color:var(--text-dark);
}
.mobile-nav-list a:hover{
  color:var(--brand, #9be5a5);
}

/* Overlay behind nav */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease-out;
  z-index:55;
}

/* When nav is open, added via JS */
body.nav-open .mobile-nav{
  transform:translateX(0);
}
body.nav-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Optional: turn hamburger into an "X" when open */
.hamburger{
  position:relative;
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:4px;
  background: var(--bg);
  padding:10px;
  border-radius:12px;
  border:1px solid #eee;
}

.hamburger span{
  height:2px;
  width:20px;
  background:#222;
  border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
body.nav-open .hamburger span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
body.nav-open .hamburger span:nth-child(2){
  opacity:0;
}
body.nav-open .hamburger span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}



/* =========================================================
BOOK NOW BUTTON
========================================================= */

/* Mobile-first “WOW” gradient Book Now — big tap target, shimmer, pop, no stuck hover */
.btn-book {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;

  width: min(100%, 420px);
  padding: 14px 22px;

  border: 0;
  border-radius: 24px;
  margin: 0 auto 1rem;

  color: #fff;
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;      /* faster tap response */
  transform: translateZ(0);        /* keeps active/transform feeling crisp */

  /* Brighter, happier blue gradient */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ffffff 26%, var(--light-blu, #0086ca) 74%) 0%,
    color-mix(in srgb, #ffffff 18%, var(--light-blu, #0086ca) 82%) 35%,
    color-mix(in srgb, #ffffff 28%, var(--light-blu, #0086ca) 72%) 65%,
    color-mix(in srgb, #ffffff 16%, var(--blu, #3a6fb5) 84%) 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;

  box-shadow: var(--shadow-icon, 0 4px 10px rgba(0,0,0,0.08));
  cursor: pointer;

  overflow: hidden;
  will-change: transform;

  transition:
    transform 120ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    background-position 420ms ease;
}

/* Premium glossy depth (subtle, always on) */
.btn-book::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.40),
    rgba(255,255,255,0.14) 55%,
    rgba(0,0,0,0.08)
  );
  pointer-events: none;
}

/* Shimmer sweep (triggered on hover-capable devices only) */
.btn-book::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -65%;
  width: 60%;
  height: 170%;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0) 65%
  );

  transform: rotate(12deg);
  opacity: 0;
  pointer-events: none;
}

/* Hover “pop” (desktop/trackpad only) */
@media (hover: hover) and (pointer: fine) {
  .btn-book:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08) saturate(1.12);
    background-position: 100% 50%;

    box-shadow:
      0 12px 26px rgba(0,0,0,0.16),
      0 0 0 4px rgba(234,245,251,0.95);
  }

  .btn-book:hover::after {
    opacity: 1;
    animation: btn-shimmer 700ms ease-out both;
  }

  .foot-list a:hover{
    text-decoration:underline;
    text-underline-offset:2px;
  }
}

/* Mobile tap feedback: make it OBVIOUS + add sun ring */
.btn-book:active {
  transform: translateY(1px) scale(0.975);
  filter: brightness(0.96) saturate(1.10);
  background-position: 0% 50%;

  /* sun border/ring + pressed depth */
  box-shadow:
    0 6px 14px rgba(0,0,0,0.16),
    0 0 0 3px rgba(255,216,77,0.95),
    inset 0 2px 10px rgba(0,0,0,0.18);
}

/* Optional: reduce glossy highlight during press so it feels “pressed” */
.btn-book:active::before {
  opacity: 0.65;
}

/* Prevent  hover on touch devices */
@media (hover: none) {
  .btn-book:hover {
    transform: none;
    filter: none;
    background-position: 0% 50%;
    box-shadow: var(--shadow-icon, 0 4px 10px rgba(0,0,0,0.08));
  }
  .btn-book:hover::after {
    opacity: 0;
    animation: none;
  }
}

/* Keyboard focus */
.btn-book:focus-visible {
  outline: 3px solid var(--sky-blu, #eaf5fb);
  outline-offset: 3px;
}

@keyframes btn-shimmer {
  from { transform: translateX(0) rotate(12deg); }
  to   { transform: translateX(230%) rotate(12deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-book {
    transition: none;
  }
  .btn-book::after {
    display: none;
  }
}

/* Kill Bokun cart UI (prevents CLS from cart wrapper) */
.bokun-widgets-cart-wrapper,
.bokun-widgets-cart,
[class*="bokun-widgets-cart"]{
  display: none !important;
}



/* =========================================================
HEADER
========================================================= */
.header{
  left:0;
  right:0;
  transform:none;
  width:100%;
  margin:0;
  height:58px;
  display:flex;
  align-items:center;
  position: relative;
  z-index:10;
  background: var(--bg);
  box-shadow:var(--shadow-icon);
}

.header .inner{
  width:100%;
  padding:0 var(--space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  width: 128px;
  height:1.5rem;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.desktop-nav{
  display:none;
}

.desktop-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.desktop-nav-list a{
  text-decoration:none;
  font-weight:600;
  color:var(--text-dark);
}




/* =========================================================
PAGE — HOME
========================================================= */

/* ==== HOME HERO SPLASH ==== */
/* Scoped to so other pages' hero work stays isolated */

.splash-outer-shell{
    background: linear-gradient(180deg, #f5fbff 0%, #fffdf7 45%, var(--bg-soft) 100%);
    padding-top: 2rem;
}

.splash{
  position: relative;
  height: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  border-bottom:2px solid #eee;
  margin-top:0rem;

}
@media (min-width: 992px){
  .splash{
    padding: 0;
  }
}

.hero-image-strip {
  width: 100%;
  height: 200px;
  margin: var(--space-2) 0;
  overflow: hidden;
  border-radius: 5px; 
}

.hero-image-strip picture,
.hero-image-strip img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-image-strip img {
  object-fit: cover;
  object-position: center;
}


/* Apply section divider style globally to sections */


.strong{
  color: var(--text-dark);
}

/* Hero proof list */
.hero-proof{
  width:100%;
  max-width:560px;
  margin:var(--space-2) auto var(--space-2);
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
}
.hero-proof-list{
  list-style:none;
  margin: 0;
  padding: .5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.hero-proof-list li{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.4;
  color:var(--text-dark);
  background:transparent;
  font-size: var(--fs-s);
  padding: .5rem 1rem;
  box-shadow:none;
  white-space:normal;
}


.hero-copy{
  display:block;
  text-align:center;
  
}
.hero-proof-icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-top:2px;
  background: var(--bg);
  box-shadow:var(--shadow-icon);
}
.hero-proof-icon--maps{
  /* Keep native aspect; scale height and let width auto to avoid stretching */
  background: var(--bg) url('/assets/img/icons/google-maps.png') center / auto 70% no-repeat;
}
.hero-proof-icon--tripadvisor{
  background: var(--bg) url('/assets/img/icons/tripadvisor.png') center / 70% 70% no-repeat;
}.hero-proof-icon--pin{
  background-image:none;
  font-size: var(--fs-s);
}.hero-proof-icon--pin::before{
  content:"📍";
  line-height:1;
}

/* =========================================================
GLOBAL COMPONENTS — CARDS
========================================================= */

/* Make tour ribbons anchor correctly on ALL pages */
.tour-card-media{
  position:relative;
}


/* Generic tour card style used on home + related-tours sections */
.tour-card{
  width:100%;
  height:auto;
  max-height:500px;
  max-width: 305px;
  aspect-ratio:1/1.4;
  border-radius:10px;
  background: var(--bg);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform 0.2s ease-out, box-shadow 0.2s ease-out;
  isolation:isolate;
  display:flex;
  min-height:0;
}

@media (hover:hover) and (pointer:fine){
  .tour-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
}

.tour-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  flex:1 1 auto;
  color:inherit;
  text-decoration:none;
}

.tour-card-media{
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  display:block;
}

.tour-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.tour-card-body{
  flex:1;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tour-card-ribbon{
  position:absolute;
  top:14px;
  left:14px;
  padding:6px 12px;
  border-radius:5px;
  background:var(--brand);
  opacity: 85%;
  font-size: var(--fs-xs);
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color: var(--bg);
  box-shadow:var(--shadow-soft);
}

.tour-card-title{
  text-align:left;
  margin: 0;
  letter-spacing: .015rem;
  line-height: 1.55rem;
}

.tour-card-meta{
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight:400;
}

.tour-card-footer{
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top:1px solid rgba(0,0,0,0.06);
}

.tour-card-rating{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:400;
  color:var(--sun);
  white-space:nowrap;
}

.tour-card-rating-count{
  font-weight:400;
  font-size: var(--fs-xs);
  color:var(--muted);
}

.tour-card-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  text-align:right;
}

.tour-card-price-label{
  font-size: var(--fs-s);
  font-weight:400;
  color: var(--muted)
}

.tour-card-price-value{
  font-family:var(--serif);
  font-weight:400;
  font-size: var(--fs-m);
  color: var(--text-dark);
}

/* =========================================================
Review Gallery
========================================================= */

.reviews-gallery{
  font-family: var(--sans-serif);
  background-color: var(--sky-blu);
  margin-top: 3.75rem;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.reviews-gallery__frame{
  position: relative;
  width: 100%;
}

/* scroller = horizontal grid */
.reviews-gallery__scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px; /* fixed desktop width */
  gap: 28px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;

  padding: var(--space-3);

  /* hide scrollbar (optional) */
  scrollbar-width: none;
}
.reviews-gallery__scroller::-webkit-scrollbar{ display:none; }

/* review card */
.review-card{
  scroll-snap-align: start;
  background: var(--bg);
  border-radius: 20px;
  padding: 22px 22px 18px;
  max-width: 300px;
  min-height: 200px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0;
  grid-template-rows: 70px 1fr; /* fixed header zone */

  /* fade behavior (JS toggles class) */
  opacity: 1;
  filter: none;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.review-card.is-partial{
  opacity: .35;                 /* strong “scroll me” */
  filter: saturate(.92);
  transform: translateY(1px);
}

.review-card__header{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.review-card__avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #C8F5D4;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: var(--fs-m);
  color: var(--text-dark);
}

.review-card__meta{
  display: grid;
  gap: 6px;
  line-height: 1.1;
  color: var(--muted);
}

.review-card__name{
  font-weight: 600;
  font-size: var(--fs-m);
  color: var(--text-dark);
}

.review-card__stars{
  color: var(--sun);
  letter-spacing: 2px;
  font-size: var(--fs-s);
  line-height: 1;
}

.review-card__text{
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-s);
  line-height: 1.55;
  text-align: left;
}

/* edge fades (inside container overlay gradient) */
.reviews-gallery__edge{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px; /* strong “scroll me” indicator */
  pointer-events: none;
  z-index: 2;
}

/* arrows */
.reviews-gallery__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  font-size: var(--fs-m);
  line-height: 1;
  color: var(--text-dark);
  opacity: 0;                 /* fade in on hover */
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display:none;               /* mobile-first: hide arrows */
}
.reviews-gallery__frame:hover .reviews-gallery__nav:not([disabled]){
  opacity: 1;
  pointer-events: auto;
}
.reviews-gallery__nav:hover{
  transform: translateY(-50%) scale(1.03);
}

.reviews-gallery__nav--prev{ left: 8px; }
.reviews-gallery__nav--next{ right: 8px; }

.reviews-gallery__nav[disabled]{
  opacity: 0 !important;        /* keep hidden until usable */
  pointer-events: none !important;
}

.reviews-gallery__scroller{
  padding-inline: 6px;
  gap: 18px;
}


.review-card__text{ font-size: var(--fs-s); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .review-card,
  .reviews-gallery__nav{
    transition: none;
  }
}

.reviews-gallery > .section-subtitle{
  margin: 0 var(--space-3) 1.5rem var(--space-3);
}



/* Highlight marker in hero text */
@keyframes heroFadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* Modern browsers: prefer WebP via image-set */
/* =========================================================
PAGE — HOME (SECTIONS)
========================================================= */
/* Tour grid is shared on home + tours pages; home-only blocks stay scoped */

/* Tour grid */
.tour-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  width:100%;
  margin:0 auto var(--space-4);
  justify-items:center;
}

@media (min-width: 768px){
  .tour-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .reviews-gallery__scroller{
    padding: var(--space-3);
    gap: 28px;
  }
  .reviews-gallery__edge{
    width: 56px;
  }
  .reviews-gallery__nav{
    display:grid;
  }
  .review-card__name{
    font-size: var(--fs-m);
  }
  .review-card__text{
    font-size: var(--fs-s);
  }

  .splash .why-cta{
    width:350px;
    max-width:100%;
    display:inline-flex;
    justify-content:center;
  }
}

/* ===== HOME START / WHY SECTION ===== */

.points{
  display:flex;
  flex-direction:column;
  gap:2.75rem;
  margin-top:var(--space-3);
  align-items:center;        /* center the cards */
  text-align:left;
}

.point{
  padding: var(--space-4);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:var(--shadow-soft);
  max-width:100%;
  width:100%;
  text-align:left;           /* or center if you prefer */
  line-height: 1.6rem;
  font-size: var(--fs-s);
}

.about-page > section{
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}
.points li{
  color: var(--text-body);
}


/* WHY CARD */
.why-list{
  list-style:none;
  padding:0;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  color:var(--text-dark);
  font-weight:400;
}
.why-list li{
  border-radius:10px;
  padding:0.75rem;
  font-weight:600;
  box-shadow:var(--shadow-soft);
  transition:transform 0.2s ease;
  text-align:center;
}


/* ===== HOME MAP SECTION ===== */
/* =========================================================
VISIT US / MAP SECTION
========================================================= */

.map-section{
  background-color: var(--sky-blu);
  padding: 2.5rem 0 2.5rem 0;
  margin-left: 0;
  margin-right: 0;
}

.map-section > .section-subtitle{
  margin-left: 0 var(--space-3);
  margin-right: var(--space-3);
}

.map-card{
  width:100%;
  max-width:760px;
  margin:0 auto; 
  overflow:hidden;
}
.map-card__embed{
  width:90%;
  aspect-ratio: 16 / 9;
  margin: 0 auto 0;
}
.map-card__embed iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:10px;
}


/* =========================================================
TOURS PAGE
========================================================= */

/* Left-align tour content, but keep intro h2 centered */
.tours-page .section .h2 {
  text-align: left;
}

.tour-hero{
  margin-top: 1.75rem;
}

/* Intro title "Our Tours" stays centered */
.tours-page #tours-top .h2 {
  text-align: center;
}

/* Default: left-align body text inside Tours page sections */
.tours-page .section .p {
  text-align: left;
}

/* Center intro copy under "Our Tours" */
.tours-page #tours-top .p {
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Tours listing intro (rome-bike-tours) */
.tours-page .tours-intro .h1,
.tours-page .tours-intro .h2,
.tours-page .tours-intro .p{
  text-align:center;
}

/* Underline just the "reach out" link */
.tours-page #tours-top .p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  color: var(--brand, #9be5a5);
}

/* =========================================================
TOUR DETAIL PAGE
========================================================= */


.tour-page{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding-bottom: var(--sticky-cta-h);
}

.tour-booking-sidebar{
  width:100%;
  position:relative;
}
.tour-booking-inner{
  width:100%;
}

/* -----------------------------------------
HERO
----------------------------------------- */

.tour-page-book-title{
  color: var(--blu);
}



/* Top block with text */
.tour-hero-header{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}

.tour-title{
  font-family: var(--serif, "Fredoka", system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight:600;
  font-size: var(--fs-l);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 1rem 1rem 0;
  color: var(--text-dark);
  text-align: left;
}

/* Tour content container */
.tour-content{
  max-width:40rem;
  margin:0 auto;
}
.tour-content h2{
  margin:var(--space-4) 0 0.75rem;
}
.tour-content h3{
  margin:var(--space-3) 0 0.5rem;
}
.tour-content p{
  margin:0 0 12px;
  line-height:1.6;
  font-size: var(--fs-s);
}

/* Booking section container (mobile-first) */
.booking-section{
  padding:22px 18px 16px;
  background:var(--bg-soft);
  border-radius: 10px;
  box-shadow:var(--shadow-soft);
  min-height: 1300px;
}

.booking-copy{
  text-align:center;
  font-size: var(--fs-s);
  opacity:0.85;
  max-width:26rem;
  margin:0 auto var(--space-3);
}

/* Frame that holds the Bokun widget; keeps layout neat on mobile */


/* Hero info stacking */
.tour-title-wrap{
  border-bottom: 1px solid var(--muted);
}
.tour-hero-meta{
  margin-top:0.6rem;
  margin-bottom:0.75rem;
  font-size: var(--fs-s);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  color: var(--muted);
}
.tour-rating{
  color:var(--muted);
  font-weight:400;
}
.tour-rating-star{
  color:var(--sun);
  margin-right:6px;
  font: var(--fs-s);
}
.tour-hero-chips{
  margin-top:0.4rem;
  margin-bottom:0;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

/* Hero image */
.tour-hero-media{
  margin: 0;
  border-top: none;
  position:relative;
}

.tour-hero-media img{
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

/* -----------------------------------------
CONTENT SECTIONS
----------------------------------------- */

.tour-section-title{
text-align: left;
font-size: 1.6rem;
}



.tour-section p{
  font-size: var(--fs-s);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 12px;
}

.tour-main > section > .section-subtitle {
  text-align: left;
  color: var(--muted);
  font: var(--sans-serif);
  margin: 1.5rem 0 1rem 0;
  font-size: var(--fs-m);
}

.tour-main > section > p {
  text-align: left;
  margin-top: 1rem;
}


/* Lists */
.tour-list{
  margin: var(--space-1) 0 0 0;
  max-width: 480px;
  padding: 0 1rem 0 0 0;
}

.tour-list li{
  margin-bottom: 6px;
  font-size: var(--fs-s);
  line-height: 1.5;
  position: relative;
}


/* Meta row */
.tour-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.tour-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Homepage cards: remove pill background from meta items */
.tour-card .tour-meta-item{
  background: transparent;
  padding: 0;
}

.text-container-extras-page{
    margin: 2rem auto 0;
}

/* =========================================================
FOOTER
========================================================= */
.footer{
  text-align:center;
  border-top:1px solid #eee;
  margin: var(--space-5) 0;
  padding:1rem var(--space-3) 0 var(--space-3);
}


.footer h3{
  color: var(--blu)
}
.foot-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.foot-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:var(--space-1);
}
.foot-list a{
  color:var(--text-dark);
  font-weight:600;
}
.grid-3{
  display:grid;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.footer-main{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.copy{
  color:var(--muted);
  margin: 1rem 0 1rem 0;
  font-size: var(--fs-xs);
}


/* ===============================
MAP CHOOSER MODAL
=============================== */

.map-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  font-family: var(--sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.map-modal.is-open{
  display: flex;
}

.map-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.35); /* soft dark overlay */
  backdrop-filter: blur(4px);
}

.map-modal__sheet{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--space-3, var(--space-3));
  padding: 16px 18px 12px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow);
  z-index: 1;

  transform: translateY(12px);
  opacity: 0;
  transition:
  opacity 0.25s ease-out,
  transform 0.25s ease-out;
}

.map-modal.is-open .map-modal__sheet{
  opacity: 1;
  transform: translateY(0);
}

.map-modal__title{
  margin: 0 0 6px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
}

.map-modal__divider{
  border: none;
  border-top: 1px solid rgba(148,163,184,0.4);
  margin: 4px 0 10px;
}

/* Buttons */
.map-modal__btn{
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 999px;
  border: none;
  background: #f3f4ff;
  font-size: var(--fs-s);
  font-weight: 600;
  cursor: pointer;
  transition:
  background 0.18s ease,
  transform 0.12s ease,
  box-shadow 0.18s ease;
}

/* Google = your brand green, Apple = your celeste blue */
.map-modal__btn--google{
  background: rgba(107,164,124,0.09);
  border: 1px solid rgba(107,164,124,0.45);
}
.map-modal__btn--google:hover{
  background: rgba(107,164,124,0.16);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.map-modal__btn--apple{
  background: rgba(127,211,255,0.09); /* var(--brand-2) softened */
  border: 1px solid rgba(127,211,255,0.45);
}
.map-modal__btn--apple:hover{
  background: rgba(127,211,255,0.16);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* Cancel link-style */
.map-modal__close{
  width: 100%;
  margin-top: 2px;
  padding: var(--space-1) 6px 4px;
  border: none;
  background: none;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.hero-sub {
    text-align: center;
    margin-top: 1rem;
}

.tour-stops {
    border-top: 1px solid var(--muted);
    padding-top: 1rem;
}

.know-before-you-go {
  padding-bottom: 1rem;
  margin-top: 1rem;
  border-bottom: 1px solid var(--muted);
}

.know-before-you-go > .tour-section-body > .tour-list {
  padding-bottom: var(--space-4);
}

.section-subtitle{
  margin:0 auto 2.5rem;
  text-align: center;
}


/* Sticky CTA container */
.sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;

  /* Hidden by default (offscreen, no layout reflow) */
  transform: translateY(110%);
  transition: transform .25s ease;
  will-change: transform;

  min-height: var(--sticky-cta-h);

  box-shadow: 0 -8px 18px rgba(0,0,0,0.10);

  /* Prevent interaction while hidden */
  pointer-events: none;
}

/* Visible state (toggled via JS) */
.sticky-cta.is-visible{
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner layout */
.sticky-cta-shell{
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:0.75rem 1rem;
  min-height: var(--sticky-cta-h);
}

.sticky-cta-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 200px;
  color:var(--text-dark);
  font-size: var(--fs-m);
}

.sticky-cta-price{
  color:var(--muted);
  font-size: var(--fs-s);
}

.sticky-cta .btn-book{
  white-space: nowrap;
}

.sticky-cta-shell > .btn-book{
  margin: 0;
}

/* =========================================================
DESKTOP (>= 992px)
========================================================= */
@media (min-width: 992px){
  /* Layout & copy widths */
  
  .section-subtitle{
    max-width:640px;
    text-align: center;
  }

  .tour-hero-header > .hero-sub {
    margin: 1rem 0 1rem 0;
    text-align: left;
  }

  /* Header & nav */
  .header .inner{
    gap:var(--space-3);
  }
  .brand img{
    height:3rem;
  }
  .desktop-nav{
    display:block;
  }
  .hamburger,
  .mobile-nav,
  .nav-overlay{
    display:none !important;
  }

  /* Home hero */
  .hero-proof{
    flex:1;
    align-self:center;
    max-width:none;
    margin:var(--space-2) auto var(--space-2);
    padding:0;
  }
  .hero-proof-list{
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
  }
  .hero-sub{
    font-size: var(--fs-m);
    font-family: var(--sans-serif);
    max-width: 640px;
    margin: 1rem auto;
  }

  .hero-copy .why-cta{
    display:none;
  }
  
  .point{
    padding: var(--space-4);
    max-width:640px;
  }
 
  .tour-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.5rem;
    justify-items:center;
  }


  /* Home sections */
  #tours.section{
    padding-top:0;
  }
  #tours .h2{
    font-size: var(--fs-l);
  }

  
  .why-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem;
    background:transparent;
    max-width:640px;
    box-shadow:none;
    margin:1.5rem auto 0;
    border-radius:0;
    padding:0;
  }
  .why-list li{
    padding: 24px 12px; 
  }
  .why-cta{
    margin-top:1rem;
  }

  .reviews-gallery > .section-subtitle{
  margin: 0 auto 1.5rem;
  }

  .map-section > .section-subtitle{
  margin: 0 auto 2.5rem;
  }


  /* Tour detail layout */

  .btn-book {
    display: none;
  }

  .tour-page{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content: space-between;
    max-width:1140px;
    margin:0 auto;
    gap:var(--space-3);
    padding-bottom: 0;
  }

  .sticky-cta{
    display:none;
  }

  .tour-main{
    flex:0 0 65%;
    max-width:65%;
    min-width:0;
  }
  .tour-page > .booking-section,
  .tour-booking-sidebar{
    flex:1 1 35%;
    max-width:35%;
    min-width:0;
  }
  .booking-section{
    border-radius:10px;
    box-shadow:var(--shadow-soft);
    padding:24px 20px 18px;
  }
  
  .related-tours-carousel{
    grid-auto-columns:40%;
  }
  .tour-content{
    max-width:none;
    margin:0;
  }
  .tour-content,
  .tour-section{
    max-width:none;
    margin-left:2rem;
    margin-right:1rem;
    padding-left:0;
    padding-right:0;
  }
  .tour-section-body{
    display:block !important;
  }

  .footer-main{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:2.5rem;
  }
  .foot-brand{
    align-items:flex-start;
    margin-bottom:0;
  }
  .grid-3{
    display:flex;
    gap:2.5rem;
    justify-content:flex-end;
    margin-top:0;
  }
  .copy{
    margin-top:1.5rem;
    text-align:center;
    opacity:0.7;
  }
  .text-container-extras-page{
    max-width: 640px;
  }
  .tour-hero{
  margin-top: 2.75rem;
  }
}

.page-hero{
  margin-top: 2rem;
}