/* ============================================================
   REFINE LAYER — "BromoRise" liquid-glass replication (v11)
   Loaded LAST on every page.

   Goal: copy the reference travel UI exactly —
   a bright full-bleed mountain photo, a large frosted-glass
   panel holding the hero (corner tags · glass nav pill · big
   centred title · bottom activity-card carousel + people card),
   and the same airy glass language across the whole site.
   Text is white over the photography; UI is transparent frost
   with thin bright-white strokes and big soft shadows.
   ============================================================ */

:root {
  --glass:        rgba(255,255,255,0.085);
  --glass-2:      rgba(255,255,255,0.14);
  --glass-soft:   rgba(255,255,255,0.055);
  --glass-strong: rgba(18,24,30,0.42);
  --gline:        rgba(255,255,255,0.36);
  --gline-soft:   rgba(255,255,255,0.24);
  --gw:           #ffffff;
  --gw-soft:      rgba(255,255,255,0.82);
  --gw-mut:       rgba(255,255,255,0.62);
  --wa:           #25d366;
  --blur:         6px;
  --blur-lg:      11px;
  --edge:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  --soft-shadow:  0 22px 58px rgba(8,14,22,0.34);
  --maxw:         1240px;
}

/* ────────────────────────────────────────────────
   0 · BACKGROUND
   Bright photographic HERO (its own <img>), then a
   deep, premium dark base for the content sections so
   white text + bright glass cards stay crisp and the
   look is reliable on every device (no fixed-bg jank).
   ──────────────────────────────────────────────── */
html { background: #0a0f11 !important; }
body { background: transparent; color: var(--gw); }


/* Deep cinematic base behind all content */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(46,92,104,0.30), transparent 62%),
    radial-gradient(900px 560px at 8% 18%, rgba(34,58,68,0.24), transparent 60%),
    linear-gradient(180deg, #0b1113 0%, #090d0f 60%, #070a0c 100%);
}
body::after { content: none; }
/* Inner pages carry the glass.css fixed mountain photo. Let it breathe
   through an airy scrim so every page shares the bright, photographic
   feel of the hero — dark enough that white text + glass stay crisp. */
body:not(.immersive)::after {
  background: linear-gradient(180deg, rgba(9,14,16,0.50) 0%, rgba(8,12,15,0.64) 52%, rgba(7,10,12,0.78) 100%) !important;
}

body:not(.immersive) {
  /* Inner pages sit on a dark photographic scrim, so secondary text must be
     light. (These were #111111 near-black — invisible on the dark glass.) */
  --text-soft: rgba(255,255,255,0.82);
  --text-muted: rgba(255,255,255,0.60);
}


/* ────────────────────────────────────────────────
   1 · BROMORISE HERO
   ──────────────────────────────────────────────── */
.bh {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(88px, 12vh, 120px) clamp(16px, 3vw, 34px) clamp(24px, 4vh, 40px);
  overflow: hidden;
  isolation: isolate;
}
.bh-bg { position: absolute; inset: 0; z-index: -2; }
.bh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.bh::before {   /* faint wash so corner tags + glass edge read */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,20,0.22) 0%, rgba(10,16,20,0.02) 22%, rgba(10,16,20,0.06) 62%, rgba(10,16,20,0.34) 100%);
}

/* corner tags */
.bh-tags {
  position: absolute; top: clamp(18px,3vh,30px); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px,4vw,52px);
  pointer-events: none; z-index: 3;
}
.bh-tag {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--gw-soft);
  padding: 9px 18px; border-radius: 999px;
  background: var(--glass-soft);
  border: 1px solid var(--gline-soft);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  box-shadow: var(--edge);
  white-space: nowrap;
}

/* the big glass card */
.bh-glass {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  min-height: min(80svh, 760px);
  display: flex;
  flex-direction: column;
  padding: clamp(16px,1.6vw,22px);
  border-radius: clamp(26px, 3vw, 40px);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.07) 34%, rgba(255,255,255,0.02) 68%),
    rgba(12,18,23,0.22);
  border: 1px solid var(--gline);
  box-shadow: var(--edge), var(--soft-shadow);
  -webkit-backdrop-filter: blur(7px) saturate(1.35) contrast(1.05);
  backdrop-filter: blur(7px) saturate(1.35) contrast(1.05);
}

/* nav pill inside the glass */
.bh-nav {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--gline-soft);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  box-shadow: var(--edge);
}
.bh-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gw); }
.bh-brand img { width: 36px; height: 36px; border-radius: 50%; }
.bh-brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.bh-brand b { font-weight: 700; opacity: 0.6; }
.bh-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.bh-links a {
  font-size: 0.92rem; font-weight: 500; color: var(--gw-soft);
  padding: 9px 18px; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.bh-links a:hover { color: #fff; background: rgba(255,255,255,0.10); }
.bh-links a.active { background: #fff; color: #14201c; font-weight: 600; }
.bh-book {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 600; color: #14201c;
  background: #fff; padding: 10px 10px 10px 20px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  transition: transform .2s ease;
}
.bh-book span {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #14201c; color: #fff; font-size: 0.8rem;
}
.bh-book:hover { transform: translateY(-1px); }

/* centred headline */
.bh-center {
  flex: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(24px,5vh,56px) 16px;
  gap: clamp(14px,2vh,22px);
}
.bh-eyebrow {
  font-size: 0.82rem; font-weight: 500; color: var(--gw);
  padding: 9px 20px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--gline-soft);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  box-shadow: var(--edge);
}
.bh-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff !important;
  text-shadow: 0 2px 26px rgba(0,0,0,0.30);
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* bottom row */
.bh-bottom {
  display: flex; align-items: flex-end; gap: 16px;
  margin-top: auto;
}
.bh-joined {
  flex: 0 0 290px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 20px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--gline-soft);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05);
  box-shadow: var(--edge);
}
.bh-avatars { display: flex; align-items: center; }
.bh-av {
  width: 38px; height: 38px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,0.85);
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.bh-av:first-child { margin-left: 0; }
.bh-av-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #14201c;
  background: #fff;
}
.bh-joined-label { font-size: 0.92rem; font-weight: 700; color: #fff; margin: 0; }
.bh-joined-text { font-size: 0.82rem; line-height: 1.5; color: var(--gw-soft) !important; margin: 0; }
.bh-joined-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: #14201c;
  background: #fff; padding: 9px 9px 9px 18px; border-radius: 999px; margin-top: 2px;
  transition: transform .2s ease;
}
.bh-joined-btn span {
  width: 24px; height: 24px; border-radius: 50%; background: #14201c; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem;
}
.bh-joined-btn:hover { transform: translateY(-1px); }

/* min-width:0 down the flex chain so the fixed-width activity row
   can't push the glass panel wider than the viewport (mobile clip fix) */
.bh-glass, .bh-center, .bh-bottom, .bh-joined, .bh-activities { min-width: 0; }
.bh-activities {
  flex: 1 1 auto;
  display: flex; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.bh-activities::-webkit-scrollbar { display: none; }
.bh-act {
  position: relative; flex: 0 0 auto;
  width: 150px; height: 230px;
  border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid var(--gline-soft);
  box-shadow: 0 14px 34px rgba(0,0,0,0.32);
  display: flex; align-items: flex-end;
  transition: transform .3s var(--ease-spring, ease);
}
.bh-act::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 55%);
}
.bh-act span {
  position: relative; z-index: 1;
  padding: 0 12px 12px; font-size: 0.84rem; font-weight: 600; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.bh-act:hover { transform: translateY(-4px); }
.bh-act-feat { width: 280px; }
.bh-act-feat .bh-act-body { position: relative; z-index: 1; padding: 18px 18px 16px; }
.bh-act-feat h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: #fff; margin: 0 0 4px; }
.bh-act-feat p { font-size: 0.78rem; line-height: 1.45; color: var(--gw-soft); margin: 0; }

/* hero responsive */
@media (max-width: 980px) {
  .bh-joined { flex-basis: 240px; }
  .bh-act-feat { width: 240px; }
}
@media (max-width: 760px) {
  .bh { padding: clamp(54px,8vh,76px) 11px 14px; align-items: stretch; }
  .bh-tags { padding: 0 14px; }
  .bh-tag-c { display: none; }
  .bh-tag { font-size: 0.64rem; padding: 7px 12px; }
  .bh-glass { min-height: auto; padding: 11px; border-radius: 24px; }
  .bh-links { display: none; }
  .bh-nav { padding: 7px 7px 7px 11px; }
  .bh-brand img { width: 32px; height: 32px; }
  .bh-brand span { font-size: 0.95rem; }
  .bh-book { padding: 9px 9px 9px 15px; font-size: 0.82rem; }
  .bh-book span { width: 24px; height: 24px; }
  .bh-center { padding: clamp(34px,9vh,64px) 6px clamp(26px,6vh,44px); gap: 14px; }
  .bh-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.06; }
  .bh-title br { display: none; }       /* wrap naturally inside the panel */
  .bh-eyebrow { font-size: 0.72rem; padding: 8px 16px; }
  .bh-bottom { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 64px; }
  .bh-joined { flex-basis: auto; padding: 16px; }
  .bh-act { width: 124px; height: 168px; }
  .bh-act-feat { width: 210px; }
}
@media (max-width: 380px) {
  .bh-title { font-size: 1.78rem; }
  .bh-tag { font-size: 0.58rem; padding: 6px 10px; }
}

/* ────────────────────────────────────────────────
   2 · GLOBAL FLOATING GLASS NAV (after hero / inner pages)
   On the homepage it is hidden until the user scrolls
   past the hero, then slides in as a frosted pill.
   ──────────────────────────────────────────────── */
@media (min-width: 861px) {
  .navbar,
  body.immersive .navbar,
  body.immersive .navbar.scrolled {
    top: 16px; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(var(--maxw), calc(100% - 40px));
    height: 60px; padding: 0 10px 0 22px;
    border-radius: 999px;
    background: var(--glass-strong) !important;
    border: 1px solid var(--gline-soft) !important;
    box-shadow: var(--edge), 0 16px 44px rgba(8,14,22,0.34);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.35) contrast(1.05) !important;
    backdrop-filter: blur(var(--blur-lg)) saturate(1.35) contrast(1.05) !important;
  }
  body:not(.immersive) .page { padding-top: 96px; }
  .desktop-nav { gap: 26px !important; }
  .desktop-nav a { font-size: 0.92rem; font-weight: 500; color: var(--gw-soft); }
  .desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
  .desktop-nav a.active::after { background: #fff; }
}
.desktop-nav .nav-book {
  background: #fff !important; color: #14201c !important;
  font-weight: 600; padding: 10px 20px; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.desktop-nav .nav-book:hover { background: #fff !important; color: #14201c !important; transform: translateY(-1px); }
.logo-text { font-weight: 700; }
.logo-text span { color: var(--gw-mut) !important; }

/* Homepage: the hero no longer carries its own nav pill, so the global
   glass nav stays visible from the top — one consistent navigation. */
body.home .navbar { transition: opacity .35s ease, transform .35s ease; }
/* The floating nav now occupies the top band, so the hero corner tags
   would collide with it — retire them (the eyebrow pill stays). */
.bh-tags { display: none !important; }

/* ────────────────────────────────────────────────
   3 · SECTION HEADERS — light, airy, editorial
   ──────────────────────────────────────────────── */
.section-title, h2.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em; line-height: 1.05;
  color: #fff;
}
.section-sub { color: var(--gw-soft) !important; font-size: var(--fs-md); max-width: 58ch; }
.section-kicker { color: var(--gw-mut) !important; letter-spacing: 0.2em; font-weight: 600; font-size: 0.72rem; }
.section-kicker::before { background: rgba(255,255,255,0.5) !important; width: 26px; }
.section-header { margin-bottom: clamp(26px, 4vw, 44px); }

/* Calm the home content bands: transparent over the fixed photo,
   even rhythm, NO neon seams. */
body.immersive .values-section,
body.immersive .assoc-section,
body.immersive .packages-section,
body.immersive .adventures-section,
body.immersive .dest-section,
body.immersive .sr-section,
body.immersive .plan-section,
body.immersive .how-section,
body.immersive .testimonial-section,
body.immersive .faq-section {
  background: transparent !important;
  padding-top: clamp(48px, 7vw, 84px) !important;
  padding-bottom: clamp(48px, 7vw, 84px) !important;
}
body.immersive .values-section::before,
body.immersive .assoc-section::before,
body.immersive .packages-section::before,
body.immersive .adventures-section::before,
body.immersive .dest-section::before,
body.immersive .sr-section::before,
body.immersive .plan-section::before,
body.immersive .how-section::before,
body.immersive .testimonial-section::before,
body.immersive .faq-section::before {
  content: none !important; background: none !important; box-shadow: none !important;
}
body.immersive .hero-title { text-shadow: 0 2px 26px rgba(0,0,0,0.4) !important; }

/* ────────────────────────────────────────────────
   4 · GLASS CARDS — bright frost, thin white stroke
   ──────────────────────────────────────────────── */
.product-card, .sr-card, .why-item, .testimonial-card, .value-item,
.assoc-badge, .dest-chip, .plan-card, .blog-card, .rental-card, .album-card,
.contact-opt, .glass-card,
body.immersive .product-card, body.immersive .sr-card, body.immersive .why-item,
body.immersive .testimonial-card, body.immersive .dest-chip,
body.immersive .assoc-badge {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.065) 34%, rgba(255,255,255,0.018) 100%),
    rgba(11,16,19,0.34) !important;
  border: 1px solid var(--gline-soft) !important;
  box-shadow: var(--edge), 0 16px 40px rgba(0,0,0,0.40) !important;
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.32) contrast(1.05) !important;
}
.product-card:hover, body.immersive .product-card:hover,
.sr-card:hover, body.immersive .sr-card:hover,
.blog-card:hover, .rental-card:hover, .contact-opt:hover {
  border-color: var(--gline) !important;
  box-shadow: var(--edge), 0 26px 60px rgba(8,14,22,0.42) !important;
  transform: translateY(-4px);
}

/* text on glass reads white */
.product-card-body h4, .sr-card h3, .why-item-text h4, .step-text h4,
.value-item h4, .faq-item summary, .testimonial-card cite { color: #fff !important; }
.product-card-body, .sr-card p, .why-item-text p, .step-text p, .value-item p,
.section-sub, .faq-item .faq-body p, .testimonial-card blockquote { color: var(--gw-soft) !important; }
.product-price { color: #fff !important; }
.product-price small, .product-card-body .badge { color: var(--gw-mut) !important; }

.badge, .sr-tag, .filter-pill, .map-filter {
  background: var(--glass-soft) !important;
  border: 1px solid var(--gline-soft) !important;
  color: var(--gw-soft) !important;
}
.filter-pill.active, .filter-pill:hover { background: #fff !important; color: #14201c !important; border-color:#fff !important; }
.dest-chip { color: var(--gw-soft) !important; }
.dest-chip::before { background: #fff !important; }
.dest-chip:hover { color: #fff !important; border-color: var(--gline) !important; }
.stars, .testimonial-card .stars { color: #f5b942 !important; }

.see-all-link { border: 1px solid var(--gline) !important; background: var(--glass-soft) !important; color: #fff !important; }
.see-all-link:hover { background: rgba(255,255,255,0.16) !important; color: #fff !important; }

/* image cards (adventures) */
.adventure-card { border-radius: 20px; }
.adventure-overlay { background: linear-gradient(to top, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.04) 56%) !important; }
.adventure-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md) !important; color:#fff !important; }
.adventure-card.featured .adventure-title { font-size: var(--fs-xl) !important; }
.adventure-tag { background: var(--glass-2) !important; border: 1px solid var(--gline-soft) !important; color:#fff !important; letter-spacing:.05em; text-transform:uppercase; font-size:9px; }

/* ────────────────────────────────────────────────
   5 · BUTTONS — white pill primary, glass secondary
   ──────────────────────────────────────────────── */
.btn-white, .btn-primary, body.immersive .btn-white, body.immersive .btn-primary {
  background: #fff !important; color: #14201c !important; border: 1px solid #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.btn-white:hover, .btn-primary:hover { background: #fff !important; color:#14201c !important; transform: translateY(-2px); }
.btn:not(.btn-white):not(.btn-primary):not(.btn-whatsapp),
body.immersive .btn:not(.btn-white):not(.btn-primary):not(.btn-whatsapp) {
  background: var(--glass) !important; border: 1px solid var(--gline) !important; color:#fff !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.25) contrast(1.04) !important;
  backdrop-filter: blur(7px) saturate(1.25) contrast(1.04) !important;
}
.btn-whatsapp, body.immersive .btn-whatsapp {
  background: var(--wa) !important; border: 1px solid var(--wa) !important; color: #fff !important;
}
.btn-whatsapp:hover { background:#2bdd6e !important; }

/* plan form on glass */
.plan-field label { color: var(--gw-soft) !important; }
.plan-field input, .plan-field select,
input:not([type=checkbox]):not([type=radio]), select, textarea, .search-bar input {
  background: rgba(12,18,22,0.42) !important; border: 1px solid var(--gline-soft) !important; color:#fff !important;
}
input::placeholder { color: var(--gw-mut) !important; }
.plan-submit { background: var(--wa) !important; color:#052a14 !important; }

/* ────────────────────────────────────────────────
   6 · FOOTER + CTA
   ──────────────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, rgba(10,16,20,0.30), rgba(8,12,16,0.66)) !important;
  border-top: 1px solid var(--gline-soft);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25) contrast(1.04) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.25) contrast(1.04) !important;
}
.footer::before { display: none !important; }
.footer-brand, .footer-col h5, .footer-assoc { color:#fff !important; }
.footer-brand span { color: var(--gw-mut) !important; }
.footer-col a, .footer-tagline, .footer-copy, .footer-credit, .footer-coverage { color: var(--gw-soft) !important; }

.cta-box {
  background:
    linear-gradient(180deg, rgba(10,16,20,0.28), rgba(8,12,16,0.62)),
    url('../images/scene-river.jpg') center/cover no-repeat !important;
  border: 1px solid var(--gline) !important; border-radius: 28px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.cta-box::before { display: none !important; }
.cta-box h3 { font-family: var(--font-display); font-weight: 300 !important; letter-spacing:-0.02em; color:#fff !important; }
.cta-box p { color: var(--gw-soft) !important; }

/* page headers on inner pages */
.page-header h1 { font-family: var(--font-display); font-weight: 300; color:#fff; }
.page-header p { color: var(--gw-soft); }

/* non-immersive pages: enforce white copy on the fixed photo background */
body:not(.immersive) .seo-copy p,
body:not(.immersive) .read-card .rc-body p,
body:not(.immersive) .page-faq summary,
body:not(.immersive) .page-faq .page-faq-a,
body:not(.immersive) .seo-copy a {
  color: var(--text) !important;
}
body:not(.immersive) .seo-copy a { text-decoration: underline !important; }

/* leftover old hero bits */
.hero-scroll-hint { display: none !important; }
.whatsapp-fab {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
}

/* ════════════════════════════════════════════════
   7 · COHESION PASS (2026-06-10)
   No square cards · transparent SVG collapsibles ·
   readable text over the photo · airy rhythm.
   ════════════════════════════════════════════════ */
:root {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 7.1 — Round every card / panel (kill all square corners) */
.product-card, .sr-card, .why-item, .value-item, .testimonial-card,
.rental-card, .rental-card-img, .blog-card, .album-card, .contact-opt,
.plan-card, .glass-card, .timeline-content, .detail-block-header,
.detail-block, .itinerary, .itinerary-day, .facts-grid, .search-bar,
.map-hero, .detail-hero, .page-header, .highlights-list, .info-card,
.note-card, .cart-summary, .spot-card {
  border-radius: var(--r-lg) !important;       /* 16px, never square */
}
.product-card, .sr-card, .rental-card, .blog-card, .album-card,
.contact-opt, .timeline-content, .facts-grid, .itinerary-day,
.detail-block, .why-item { overflow: hidden; }

/* 7.2 — "At a glance" facts → one rounded glass panel, hairline rows */
.facts-grid {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 60%),
    rgba(11,16,19,0.32) !important;
  border: 1px solid var(--gline-soft) !important;
  box-shadow: var(--edge), 0 16px 40px rgba(0,0,0,0.36) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.28) contrast(1.04) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.28) contrast(1.04) !important;
}
.facts-grid .fact-cell {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--gline-soft) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.fact-label { color: var(--gw-mut) !important; }
.fact-value { color: #fff !important; }

/* 7.3 — Collapsibles: transparent glass + a clean SVG chevron */
.faq-item, details.read-card, .page-faq details {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--gline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.28) contrast(1.04);
  backdrop-filter: blur(var(--blur)) saturate(1.28) contrast(1.04);
}
.faq-item[open], details.read-card[open], .page-faq details[open] {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--gline) !important;
}
/* read-card chevron → transparent, just the SVG stroke */
.read-card .rc-chevron { background: transparent !important; border-color: var(--gline-soft) !important; color: #fff !important; }
details.read-card[open] > summary .rc-chevron { background: rgba(255,255,255,0.12) !important; }

/* swap any legacy +/text markers for the SVG chevron */
.faq-chev { display: none !important; }
.faq-item > summary, .faq-q, .page-faq summary {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: var(--s3); list-style: none;
}
.faq-item > summary::-webkit-details-marker,
.faq-q::-webkit-details-marker,
.page-faq summary::-webkit-details-marker { display: none; }
.faq-item > summary::after, .faq-q::after, .page-faq summary::after {
  content: '' !important;
  width: 18px; height: 18px; flex: 0 0 18px;
  background: #fff;
  -webkit-mask: var(--chev) center / 18px 18px no-repeat;
          mask: var(--chev) center / 18px 18px no-repeat;
  opacity: 0.72;
  transform: none;
  transition: transform .25s var(--ease-spring, ease);
}
.faq-item[open] > summary::after, .faq-item[open] .faq-q::after,
.page-faq details[open] summary::after { transform: rotate(180deg); }

/* 7.4 — Text that sits directly on the photo stays legible */
.section-title, .page-header h1, .detail-section-title, .detail-hero-title,
.detail-hero-price, .rental-section-title {
  text-shadow: 0 1px 20px rgba(0,0,0,0.40);
}
.section-sub, .page-header p, .detail-hero-tagline, .detail-breadcrumb {
  text-shadow: 0 1px 12px rgba(0,0,0,0.32);
}

/* 7.5 — keep the rental emoji tiles from looking like flat squares */
.rental-card-img {
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)) !important;
  border-bottom: 1px solid var(--gline-soft);
}

/* ============================================================
   8 · HERO GLASS EVERYWHERE
   The hero is the visual system: bright mountain photography,
   white hairline glass, soft specular highlights, white primary
   pills, and no flat dark section slabs.
   ============================================================ */
:root {
  --hero-photo: url('../images/hero-valley.jpg');
  --hero-photo-set: image-set(url('../images/hero-valley.webp') type('image/webp'), url('../images/hero-valley.jpg') type('image/jpeg'));
  --hero-glass:
    linear-gradient(145deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.075) 34%, rgba(255,255,255,0.022) 72%),
    rgba(13,19,24,0.30);
  --hero-glass-soft:
    linear-gradient(145deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.055) 40%, rgba(255,255,255,0.016) 100%),
    rgba(13,19,24,0.22);
  --hero-glass-strong:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.065) 40%, rgba(255,255,255,0.02) 100%),
    rgba(13,19,24,0.46);
  --hero-line: rgba(255,255,255,0.30);
  --hero-line-strong: rgba(255,255,255,0.42);
  --hero-shadow: 0 22px 58px rgba(0,0,0,0.36);
  --hero-blur: blur(7px) saturate(1.34) contrast(1.05);
  --hero-blur-strong: blur(11px) saturate(1.36) contrast(1.05);
}

html {
  background: #071012 !important;
}

body {
  background: transparent !important;
}

body::before,
body.immersive::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  height: auto !important;
  z-index: -4 !important;
  pointer-events: none !important;
  /* fallback for browsers without image-set() */
  background:
    linear-gradient(180deg, rgba(8,14,17,0.06) 0%, rgba(8,14,17,0.24) 48%, rgba(5,9,11,0.64) 100%),
    var(--hero-photo) center 48% / cover no-repeat !important;
  /* modern: serve WebP via image-set(); falls back to the line above if unsupported */
  background:
    linear-gradient(180deg, rgba(8,14,17,0.06) 0%, rgba(8,14,17,0.24) 48%, rgba(5,9,11,0.64) 100%),
    var(--hero-photo-set) center 48% / cover no-repeat !important;
}

/* Mobile: swap in the lightweight hero (cuts LCP image weight ~895KB -> ~53KB) */
@media (max-width: 860px) {
  :root {
    --hero-photo: url('../images/hero-valley-sm.jpg');
    --hero-photo-set: image-set(url('../images/hero-valley-sm.webp') type('image/webp'), url('../images/hero-valley-sm.jpg') type('image/jpeg'));
  }
}

body::after,
body.immersive::after,
body:not(.immersive)::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    radial-gradient(80% 52% at 50% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 48%, transparent 72%),
    linear-gradient(180deg, rgba(4,8,10,0.16) 0%, rgba(4,8,10,0.34) 56%, rgba(4,8,10,0.62) 100%) !important;
}

body.home .bh-bg {
  display: none !important;
}

body.home .bh::before {
  background: transparent !important;
}

body.home .values-section,
body.home .assoc-section,
body.home .packages-section,
body.home .adventures-section,
body.home .dest-section,
body.home .sr-section,
body.home .plan-section,
body.home .why-section,
body.home .how-section,
body.home .testimonial-section,
body.home .faq-section {
  background: transparent !important;
}

.page,
.section,
.section-sm,
.values-section,
.assoc-section,
.packages-section,
.adventures-section,
.dest-section,
.sr-section,
.plan-section,
.why-section,
.how-section,
.testimonial-section,
.faq-section,
.ex-culture,
.spot-guide,
.related-section,
.product-section,
.ex-map-section {
  background: transparent !important;
}

.section,
.section-sm,
body.immersive .values-section,
body.immersive .assoc-section,
body.immersive .packages-section,
body.immersive .adventures-section,
body.immersive .dest-section,
body.immersive .sr-section,
body.immersive .plan-section,
body.immersive .how-section,
body.immersive .testimonial-section,
body.immersive .faq-section {
  padding-top: clamp(54px, 7vw, 92px) !important;
  padding-bottom: clamp(54px, 7vw, 92px) !important;
}

.container,
.ex-culture .wrap,
.spot-guide .wrap {
  position: relative;
  z-index: 1;
}

.product-card,
.sr-card,
.why-item,
.value-item,
.testimonial-card,
.blog-card,
.rental-card,
.album-card,
.contact-opt,
.assoc-badge,
.dest-chip,
.glass-card,
.plan-card,
.cta-box,
.cart-item,
.cart-summary,
.product-selector,
.facts-grid,
.itinerary-day,
.faq-item,
.page-faq details,
details.read-card,
.detail-hero,
.detail-block,
.timeline-item,
.timeline-content,
.info-card,
.note-card,
.seo-copy,
.blog-post,
.blog-post-upcoming-banner,
.gallery-widget,
.gallery-widget-tile,
.album-back,
.spot-item,
.culture-panel,
.map-hero,
.spot-sheet-card,
.booking-form,
.form-group input,
.form-group textarea,
.form-group select,
.selector-field input,
.selector-field select,
.search-bar input,
.plan-field input,
.plan-field select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--hero-glass) !important;
  border: 1px solid var(--hero-line) !important;
  box-shadow: var(--edge), var(--hero-shadow) !important;
  background-clip: padding-box;
  -webkit-backdrop-filter: var(--hero-blur) !important;
  backdrop-filter: var(--hero-blur) !important;
}

.product-card,
.sr-card,
.why-item,
.value-item,
.testimonial-card,
.blog-card,
.rental-card,
.album-card,
.contact-opt,
.plan-card,
.cta-box,
.cart-item,
.cart-summary,
.product-selector,
.facts-grid,
.itinerary-day,
.faq-item,
.page-faq details,
details.read-card,
.detail-hero,
.detail-block,
.timeline-item,
.timeline-content,
.info-card,
.note-card,
.seo-copy,
.blog-post,
.gallery-widget,
.spot-item,
.culture-panel,
.map-hero,
.spot-sheet-card {
  border-radius: clamp(20px, 2vw, 30px) !important;
}

.navbar,
.bottom-nav,
.sticky-cta,
.footer,
.gallery-lightbox,
.modal,
.toast {
  background: var(--hero-glass-strong) !important;
  border-color: var(--hero-line) !important;
  box-shadow: var(--edge), 0 18px 52px rgba(0,0,0,0.38) !important;
  -webkit-backdrop-filter: var(--hero-blur-strong) !important;
  backdrop-filter: var(--hero-blur-strong) !important;
}

.footer {
  /* Float as a fully-rounded glass card with breathing room on every side —
     previously the bottom corners were square (radius 0 0) and the bottom
     margin was 0, so the footer ended in sharp edges flush with the page. */
  margin: clamp(40px, 6vw, 76px) clamp(14px, 3vw, 34px) clamp(16px, 3vw, 32px) !important;
  border-radius: clamp(26px, 3vw, 40px) !important;
}

.product-card:hover,
.sr-card:hover,
.why-item:hover,
.value-item:hover,
.testimonial-card:hover,
.blog-card:hover,
.rental-card:hover,
.album-card:hover,
.contact-opt:hover,
.spot-item:hover,
.glass-card:hover {
  border-color: var(--hero-line-strong) !important;
  box-shadow: var(--edge), 0 30px 70px rgba(0,0,0,0.42) !important;
  transform: translateY(-4px);
}

.hero-inner,
.page-header,
.detail-hero,
.seo-copy,
.blog-post {
  background: var(--hero-glass-soft) !important;
  border: 1px solid var(--hero-line) !important;
  box-shadow: var(--edge), var(--hero-shadow) !important;
  -webkit-backdrop-filter: var(--hero-blur) !important;
  backdrop-filter: var(--hero-blur) !important;
}

.page-header,
.hero-inner {
  margin: var(--s4) clamp(14px, 3vw, 34px) clamp(24px, 4vw, 44px) !important;
  padding: clamp(56px, 8vw, 96px) clamp(22px, 5vw, 72px) !important;
  border-radius: clamp(26px, 3vw, 40px) !important;
  text-align: center;
}

.page-header h1,
.hero-inner h1,
.detail-hero h1,
.section-title,
h2.section-title,
.detail-section-title,
.rental-section-title,
.blog-post-title {
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.42);
}

.page-header p,
.hero-inner p,
.section-sub,
.product-summary,
.product-description p,
.blog-post-body p,
.seo-copy p,
.detail-hero-tagline,
.contact-opt p,
.rental-card-body p,
.blog-card-excerpt,
.faq-a,
.page-faq .page-faq-a,
.itinerary-day-body li,
.highlights-list li,
.pack-list li,
.safety-list li {
  color: rgba(255,255,255,0.82) !important;
}

.product-description,
.product-details,
.highlights-list,
.pack-list,
.safety-list,
.itinerary,
.faq,
.page-faq,
.contact-options,
.booking-form,
.album-grid,
.blog-grid,
.rental-grid,
.gallery-page-grid,
.cart-items {
  position: relative;
  z-index: 1;
}

.product-description,
.product-details,
.seo-copy,
.blog-post,
.booking-form {
  padding: clamp(22px, 4vw, 44px) !important;
  border-radius: clamp(22px, 3vw, 34px) !important;
  max-width: min(920px, calc(100% - 32px));
  margin-left: auto !important;
  margin-right: auto !important;
}

.highlights-list li,
.pack-list li,
.safety-list li,
.itinerary-toggle-all,
.qty-selector,
.detail-hero-price,
.blog-card-tag,
.blog-card-status,
.badge,
.sr-tag,
.filter-pill,
.map-filter,
.cp-tag,
.hero-badge,
.album-back,
.see-all-link {
  background: var(--hero-glass-soft) !important;
  border: 1px solid var(--hero-line) !important;
  color: rgba(255,255,255,0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24) !important;
  -webkit-backdrop-filter: var(--hero-blur) !important;
  backdrop-filter: var(--hero-blur) !important;
}

.filter-pill.active,
.filter-pill:hover,
.map-filter[aria-pressed="true"],
.bh-links a.active {
  background: #fff !important;
  border-color: #fff !important;
  color: #14201c !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24) !important;
}

.btn-primary,
.btn-white,
.desktop-nav .nav-book,
.bh-book,
.bh-joined-btn,
.plan-submit {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #14201c !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.24) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.btn:not(.btn-primary):not(.btn-white):not(.btn-whatsapp),
.see-all-link,
.itinerary-toggle-all,
.album-back {
  background: var(--hero-glass-soft) !important;
  border-color: var(--hero-line) !important;
  color: #fff !important;
}

.btn-whatsapp,
.ss-wa {
  background: rgba(37,211,102,0.92) !important;
  border-color: rgba(37,211,102,0.96) !important;
  color: #fff !important;
}

.product-card-arrow,
.album-card-arrow,
.rc-chevron,
.spot-sheet-close,
.lb-close,
.lb-nav,
.map-tool {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid var(--hero-line) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 24px rgba(0,0,0,0.22) !important;
}

.card-rotator,
.blog-card-cover,
.album-card-preview,
.gallery-page-tile,
.rental-card-img,
.cart-item-img,
.cart-item-img-placeholder,
.product-hero-img,
.product-hero-placeholder,
.detail-block-header {
  border-color: var(--hero-line) !important;
}

.product-card,
.blog-card,
.album-card,
.rental-card {
  overflow: hidden;
}

.card-rotator,
.blog-card-cover,
.album-card-preview,
.rental-card-img {
  border-bottom: 1px solid var(--hero-line) !important;
}

.facts-grid .fact-cell,
.detail-block-body,
.itinerary-day-body,
.faq-a,
.page-faq .page-faq-a {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.fact-cell,
.itinerary-day-body,
.faq-a {
  border-color: var(--hero-line) !important;
}

.footer-col a,
.footer-tagline,
.footer-copy,
.footer-credit,
.footer-coverage,
.product-info-meta span,
.product-price small,
.fact-label,
.blog-card-meta,
.album-card-meta,
.detail-breadcrumb,
.detail-breadcrumb a,
.cart-summary-note,
.cart-disclaimer {
  color: rgba(255,255,255,0.66) !important;
}

.product-card-body h4,
.rental-card-body h4,
.blog-card-title,
.album-card-title,
.fact-value,
.cart-item-title,
.selector-total-amount,
.detail-hero-price strong,
.footer-brand,
.footer-col h5,
.footer-assoc,
.faq-q,
.itinerary-day-title,
.product-price,
.rental-price {
  color: #fff !important;
}

.detail-hero {
  background: var(--hero-glass-strong) !important;
}

.detail-hero h1 {
  opacity: 1 !important;
  text-shadow: 0 2px 28px rgba(0,0,0,0.52), 0 0 1px rgba(255,255,255,0.45) !important;
}

.detail-hero-tagline,
.detail-hero .product-info-meta span {
  color: rgba(255,255,255,0.88) !important;
}

.detail-hero-price {
  background: rgba(255,255,255,0.16) !important;
  border-color: var(--hero-line-strong) !important;
}

.detail-hero .btn-white {
  background: #fff !important;
  color: #14201c !important;
  border-color: #fff !important;
}

input::placeholder,
textarea::placeholder,
.search-bar input::placeholder {
  color: rgba(255,255,255,0.58) !important;
}

input:focus,
select:focus,
textarea:focus,
.search-bar input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(255,255,255,0.58) !important;
  box-shadow: var(--edge), 0 0 0 3px rgba(255,255,255,0.12), var(--hero-shadow) !important;
}

.adventure-card,
.gallery-page-tile,
.bh-act {
  border: 1px solid var(--hero-line) !important;
  box-shadow: var(--edge), 0 16px 42px rgba(0,0,0,0.34) !important;
}

.adventure-overlay,
.gallery-page-tile-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.12) 58%, rgba(255,255,255,0.06) 100%) !important;
}

.ex-culture .culture-panel {
  padding: clamp(24px, 4vw, 48px) !important;
}

.spot-grid {
  gap: var(--s5) !important;
}

.map-filters-bar {
  background: linear-gradient(to top, rgba(4,8,10,0.62) 0%, rgba(4,8,10,0.20) 62%, transparent 100%) !important;
}

@media (max-width: 640px) {
  .page-header,
  .hero-inner {
    margin-left: var(--s3) !important;
    margin-right: var(--s3) !important;
    padding: var(--s8) var(--s5) !important;
  }

  .product-description,
  .product-details,
  .seo-copy,
  .blog-post,
  .booking-form {
    max-width: calc(100% - 24px);
    padding: var(--s5) !important;
  }

  .footer {
    margin-left: var(--s3) !important;
    margin-right: var(--s3) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UI POLISH PASS (v13) — consolidated spacing, alignment & card detail
   Single source of truth for the fit-and-finish layer; replaces the
   earlier ad-hoc alignment block. Loaded last, so it wins.
   ═══════════════════════════════════════════════════════════════════ */

/* — Retire the unused search bar — */
.search-bar { display: none !important; }

/* ───────── Page header — clean, centered, evenly spaced ───────── */
.page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s5) !important;
  padding: var(--s4) var(--s5) 0 !important;
}
.page-header h1 {
  font-size: clamp(1.55rem, 6.2vw, 2.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.18;
  margin: 0 !important;
}
.page-header p {
  font-size: var(--fs-sm) !important;
  color: var(--text-soft) !important;
  line-height: 1.55;
  max-width: 42ch;
  margin: var(--s2) auto 0 !important;
}

/* Result / package count — subtle centered label under the header */
.package-count {
  text-align: center;
  padding: 0 var(--s5) !important;
  margin: 0 0 var(--s5) !important;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ───────── Product grid — even gutters, 2-up on phones, scaling up ───────── */
.product-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--s4) !important;
  padding: 0 var(--s5) !important;
  margin: 0 auto !important;
  max-width: var(--max-w);
}
@media (min-width: 641px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--s5) !important;
    padding: 0 var(--s6) !important;
  }
}
@media (min-width: 1025px) {
  .product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ───────── Product card — equal height, edge-to-edge image, footer pinned ───────── */
.product-card {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;            /* image stays flush to the rounded card */
  overflow: hidden;
}
.product-card .card-rotator { flex: 0 0 auto; }
.product-card-body   { flex: 1 1 auto; }
.product-card-footer { margin-top: auto; }

/* "On request" price — a calm label, never a bare "/person" gap */
.price-onreq {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-soft);
}

/* ───────── Rental / service cards — price pinned, refined icon tile ───────── */
.rental-card      { height: 100%; }
.rental-card-body { flex: 1 1 auto; }
.rental-card-img {
  height: 104px;
  font-size: 2.7rem;
  line-height: 1;
  background: linear-gradient(150deg, rgba(30,200,160,0.14), rgba(91,180,240,0.06) 58%, rgba(255,255,255,0.02)) !important;
  border-bottom: 1px solid var(--hairline);
}
.sr-card .sr-link { margin-top: auto; }

/* Quick-benefit chip rows (rentals / services) — equal height, tidy edges */
div[style*="overflow-x: auto"] { padding-right: var(--s5) !important; }
div[style*="flex-shrink:0"][style*="var(--r-lg)"] {
  background: var(--hero-glass) !important;
  border: 1px solid var(--hero-line) !important;
  box-shadow: var(--edge) !important;
  -webkit-backdrop-filter: var(--hero-blur) !important;
  backdrop-filter: var(--hero-blur) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
}

/* ───────── Even vertical rhythm between homepage sections ───────── */
.values-section,
.adventures-section,
.testimonial-section { padding: var(--s9) 0; }

/* ───────── Desktop: align every section to the same 1240px grid the
   navbar + hero glass already use (no more full-bleed left-stacked rows) ───────── */
@media (min-width: 1100px) {
  .values-section,
  .assoc-section,
  .packages-section,
  .adventures-section,
  .dest-section,
  .sr-section,
  .plan-section,
  .how-section,
  .testimonial-section,
  .faq-section,
  .section,
  .section-sm {
    max-width: calc(var(--maxw) + 2 * var(--s6));
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* three testimonials share the row instead of stacking left */
  .testimonial-section .scroll-card {
    flex: 1 1 300px !important;   /* outweighs the inline flex-basis */
    max-width: 430px;
  }

  /* FAQ list lines up under its left-aligned header */
  .faq-section .faq-list { max-width: none; margin: 0; }
}

/* Below-the-fold prose / FAQ / gallery — consistent vertical spacing */
.seo-copy      { margin-top: var(--s8) !important; margin-bottom: var(--s8) !important; }
.page-faq      { margin-top: var(--s8) !important; margin-bottom: var(--s8) !important; }
/* The widget is a floating glass card (like the footer) — give it gutters on
   every side and real inner padding so the title/tiles don't touch its edges */
.gallery-widget{
  margin: var(--s8) clamp(14px, 3vw, 34px) !important;
  padding: clamp(18px, 3vw, 28px) !important;
}
.gallery-widget-strip { padding-bottom: 0; }
@media (min-width: 1100px) {
  .gallery-widget {
    max-width: var(--maxw);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.detail-section-title { margin-bottom: var(--s5) !important; }