/* ==========================================================================
   petrawadirumtours.com — Petra & Wadi Rum Tours
   Palette: Petra sandstone + terracotta + Wadi Rum navy (fonts-colors.txt)
   Fonts:   Manrope (display/UI) + Inter (body)
   ========================================================================== */

:root {
  /* === COLOUR ROLES === */
  --c-primary:         #B95F45;  /* Petra Terracotta — CTAs, brand accent */
  --c-primary-deep:    #8E4029;  /* Deeper terracotta — headings on light, button hover */
  --c-accent:          #C89B55;  /* Desert Gold — secondary accent, decorative stars */
  --c-accent-bright:   #F0B84E;  /* Hero CTA yellow + eyebrows/drop caps on dark */
  --c-accent-deep:     #B4652A;  /* Deep orange — step numbers + drop caps on LIGHT bg (AA-large on cream) */
  --c-accent-on-dark:  #F7D08A;  /* Eyebrows + drop caps on the navy/charcoal sections (6.8:1 on olive, 8.7:1 on charcoal) */
  --c-cream:           #FFF9F2;  /* Petra Sand — base light background */
  --c-cream-soft:      #F8EEE8;  /* Rose Stone — section-alt + cards on cream */
  --c-travertine:      #E4D3C4;  /* Subtle surface / borders */
  --c-travertine-soft: #F3E3D2;  /* Light sand — category bands */
  --c-olive:           #334554;  /* Wadi Rum Navy — why-choose, FAQ, final CTA */
  --c-olive-deep:      #223140;  /* Deeper navy — hover/border */
  --c-charcoal:        #332E2A;  /* Warm charcoal — gallery bg, FOOTER, body text */
  --c-charcoal-mute:   #6B615A;  /* Supporting text on light (5.6:1 on cream) */
  --c-white:           #FFFFFF;

  /* === TYPOGRAPHY === */
  --font-display: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* === SPACING === */
  --section-py: clamp(3rem, 6vw, 5rem);
  --space-xs:   0.5rem;
  --space-sm:   0.875rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4.5rem;

  /* === LAYOUT === */
  --max-width:        1240px;
  --container:        min(1240px, 100% - 2rem);
  --container-narrow: min(820px, 100% - 2rem);
  /* Two concentric content rails — every constrained block maps to ONE of these. */
  --w-wide:           min(980px, 100% - 2rem);
  --w-read:           min(720px, 100% - 2rem);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --transition: 220ms ease;
  --shadow-sm:  0 2px 8px rgba(51, 46, 42, 0.08);
  --shadow-md:  0 10px 28px rgba(51, 46, 42, 0.12);
  --shadow-lg:  0 18px 40px -14px rgba(51, 46, 42, 0.35);

  /* === LEGACY/AUDIT ALIASES (contrast_audit.py) — literal hex, audit-only, 0 real uses === */
  --c-ice:          #FFF9F2;
  --c-navy:         #334554;
  --c-ocean:        #334554;
  --c-slate:        #6B615A;
  --c-amber:        #F0B84E;
  --c-amber-bright: #F7D08A;
  --c-gold:         #C89B55;
}

/* Phone rail-collapse — .container already supplies the 1rem gutter. */
@media (max-width: 600px) {
  :root { --w-wide: 100%; --w-read: 100%; }
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-charcoal);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  color: var(--c-primary-deep);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 5vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }

p { margin: 0 0 var(--space-md); }
strong { font-weight: 700; color: var(--c-primary-deep); }

.container { width: var(--container); margin-inline: auto; }
.section   { padding-block: var(--section-py); }
.section--alt   { background: var(--c-cream-soft); }
.section--olive { background: var(--c-olive); color: var(--c-cream); }
.section--dark  { background: var(--c-charcoal); color: var(--c-cream); }
.section--olive h2, .section--olive h3,
.section--dark h2,  .section--dark h3 { color: var(--c-cream); }
.section--olive strong, .section--dark strong { color: var(--c-accent-on-dark); }
.section--olive a, .section--dark a { color: var(--c-accent-on-dark); }

section[id] { scroll-margin-top: 5.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Eyebrow ------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-deep);
  margin-bottom: var(--space-xs);
}
.section--olive .eyebrow, .section--dark .eyebrow,
.cta-banner .eyebrow, .hero .eyebrow,
.why-choose .eyebrow, .gallery .eyebrow { color: var(--c-accent-on-dark); }
/* The hero eyebrow sits on the photo with no panel behind it. */
.hero .eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.45); }

/* --- Section head -------------------------------------------------------- */
.section-head { text-align: center; max-width: var(--w-read); margin: 0 auto var(--space-xl); }
.section-head__sub { font-size: 1.06rem; color: var(--c-charcoal-mute); margin-bottom: 0; }
.section--olive .section-head__sub, .section--dark .section-head__sub { color: rgba(255, 249, 242, 0.82); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  padding: 0.85rem 1.6rem; border-radius: var(--radius-md); border: 2px solid transparent;
  cursor: pointer; transition: var(--transition); text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--c-primary); color: var(--c-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--c-primary-deep); color: var(--c-white); box-shadow: var(--shadow-md); }
.btn--secondary { background: rgba(255, 249, 242, 0.14); color: var(--c-white); border-color: rgba(255, 249, 242, 0.55); }
.btn--secondary:hover { background: rgba(255, 249, 242, 0.24); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-primary-deep); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }
.btn--lg { padding: 1rem 2rem; font-size: 1.1rem; }
/* .nav a (0,1,1) out-specifies .btn--primary (0,1,0) — re-assert at (0,2,0). */
.nav .btn--primary { color: var(--c-white); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 249, 242, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-travertine);
}
.site-header__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-md); padding-block: 0.85rem;
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem;
  color: var(--c-primary-deep); letter-spacing: -0.02em; line-height: 1.2;
}
.brand:hover { text-decoration: none; }
.nav { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.nav a { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--c-charcoal); }
.nav a:hover { color: var(--c-primary); text-decoration: none; }
.site-header .btn { padding: 0.6rem 1.15rem; font-size: 0.96rem; white-space: nowrap; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 0.4rem; cursor: pointer;
  color: var(--c-primary-deep);
}
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 980px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  .nav {
    grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding-top: var(--space-sm); border-top: 1px solid var(--c-travertine);
    margin-top: var(--space-sm);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--c-travertine); }
  .nav .btn { margin-top: var(--space-sm); }
  .site-header .btn--primary.header-cta { display: none; }
  .nav .btn--primary.header-cta { display: inline-flex; }
}
@media (min-width: 981px) { .nav .btn--primary.header-cta { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(560px, 78vh, 760px);
  padding-block: var(--space-2xl);
  overflow: hidden; isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: -2;
}
/* No-panel hero: the gradient alone has to carry legibility, so it runs on two
   axes. The horizontal pass darkens the left-aligned text column; the vertical
   pass holds the header and the CTA row. Deliberate deviation from the locked
   frosted-panel default — see BUILD-REPORT.md. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 22, 18, 0.58) 0%, rgba(20, 22, 18, 0.40) 45%, rgba(20, 22, 18, 0.18) 78%, rgba(20, 22, 18, 0.08) 100%),
    linear-gradient(180deg, rgba(20, 22, 18, 0.52) 0%, rgba(20, 22, 18, 0.26) 40%, rgba(20, 22, 18, 0.64) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-content { width: var(--container); max-width: 760px; margin: 0 auto; text-align: left; }

/* Panel removed by request: no blur, no border, no radius, no visible edge.
   Legibility instead comes from (a) per-line text shadows and (b) this scrim —
   a soft elliptical darkening that follows the text column and fades to nothing
   well outside it, so it reads as light falling off the photo rather than a box.
   It is what keeps the hero AA-legible on a bright photo; the measured worst
   case without it was 4.03:1 on the pale desert hero. */
.hero-overlay { position: relative; margin-bottom: var(--space-lg); }
.hero-overlay::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -7rem -10rem -6rem -10rem;
  /* closest-side, so the ellipse reaches full transparency at the nearest edge
     and the corners stay clear. A farthest-corner ellipse gets clipped by its
     own box and shows a hard rectangular seam — the exact box we removed. */
  background: radial-gradient(ellipse closest-side at 45% 50%,
      rgba(14, 16, 13, 0.62) 0%,
      rgba(14, 16, 13, 0.55) 38%,
      rgba(14, 16, 13, 0.34) 62%,
      rgba(14, 16, 13, 0.12) 82%,
      rgba(14, 16, 13, 0.00) 100%);
}
.hero-overlay > :last-child { margin-bottom: 0; }

/* Pale hero photos need a stronger scrim than dark ones. Measured against the
   composited image: the desert-panorama hero fell to 3.6:1 on the default and
   clears AA on this. Add .hero--bright to the <section> for any light photo. */
.hero--bright::after {
  background:
    linear-gradient(90deg, rgba(20, 22, 18, 0.68) 0%, rgba(20, 22, 18, 0.52) 45%, rgba(20, 22, 18, 0.30) 78%, rgba(20, 22, 18, 0.18) 100%),
    linear-gradient(180deg, rgba(20, 22, 18, 0.58) 0%, rgba(20, 22, 18, 0.34) 40%, rgba(20, 22, 18, 0.66) 100%);
}
.hero--bright .hero-overlay::before {
  background: radial-gradient(ellipse closest-side at 45% 50%,
      rgba(14, 16, 13, 0.76) 0%,
      rgba(14, 16, 13, 0.70) 38%,
      rgba(14, 16, 13, 0.46) 62%,
      rgba(14, 16, 13, 0.18) 82%,
      rgba(14, 16, 13, 0.00) 100%);
}

.hero h1 {
  color: var(--c-white); margin-bottom: var(--space-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.42);
}
.hero strong { color: inherit; }
.hero-lede {
  font-size: clamp(1.03rem, 1.75vw, 1.18rem); color: rgba(255, 249, 242, 0.97);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.40);
  margin-bottom: var(--space-md);
}
.hero-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.99rem; color: rgba(255, 249, 242, 0.97); margin-bottom: var(--space-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.40);
}
.hero-rating .stars { color: var(--c-accent-bright); letter-spacing: 0.06em; }
.hero-rating .score { font-family: var(--font-display); font-weight: 800; color: var(--c-white); }

.hero-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0;
  color: rgba(255, 249, 242, 0.97);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.40);
}
.hero-price__from { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.hero-price__amount { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--c-accent-bright); }
.hero-price__unit { font-size: 0.95rem; opacity: 0.9; }

.hero-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.hero-pills span {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
  color: var(--c-white); background: rgba(28, 25, 22, 0.58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 249, 242, 0.24);
  border-radius: 999px; padding: 0.38rem 0.9rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Hero is the ONE place yellow lives. */
.hero .btn--primary { background: var(--c-accent-bright); color: var(--c-charcoal); border-color: var(--c-accent-bright); }
.hero .btn--primary:hover { background: #E0A63C; color: var(--c-charcoal); }

@media (max-width: 640px) {
  .hero { min-height: 0; padding-top: var(--space-xl); padding-bottom: 5rem; }
}

/* ==========================================================================
   FACTS STRIP
   ========================================================================== */

.facts {
  background: var(--c-cream-soft);
  border-bottom: 1px solid var(--c-travertine);
  padding-block: clamp(1rem, 2vw, 1.4rem);
}
.facts__row {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md);
  max-width: var(--w-wide);
}
.facts__item { display: flex; flex-direction: column; text-align: center; padding: 0.35rem 0.5rem; }
.facts__value {
  font-family: var(--font-display); font-weight: 800; line-height: 1.15;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--c-primary-deep);
}
.facts__label { font-size: clamp(0.92rem, 1.3vw, 1.02rem); color: var(--c-charcoal-mute); }

@media (min-width: 720px) { .facts__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) {
  .facts__row { grid-template-columns: repeat(5, 1fr); }
  .facts__item:not(:last-child) { border-right: 1px solid var(--c-travertine); }
}

/* ==========================================================================
   INTRO
   ========================================================================== */

.intro__body { max-width: var(--w-read); margin: 0 auto var(--space-xl); }
.intro .intro__body:first-of-type > p:first-of-type::first-letter,
.intro-lead::first-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2.2em; line-height: 1; color: var(--c-accent-deep);
}
.section--olive .intro-lead::first-letter { color: var(--c-accent-on-dark); }

.hl {
  font-weight: 700; color: var(--c-primary-deep);
  background-image: linear-gradient(transparent 58%, rgba(200, 155, 85, 0.34) 58%);
  padding: 0 .08em; border-radius: 2px;
}

.experience-summary__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  max-width: 1000px; margin-inline: auto;
}
@media (min-width: 720px) { .experience-summary__grid { grid-template-columns: 1fr 1fr; } }
.experience-summary__col {
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm);
}
.experience-summary__col h3 {
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--c-travertine); margin-bottom: var(--space-md);
}
.experience-summary__col ul { list-style: none; margin: 0; padding: 0; }
.experience-summary__col li {
  position: relative; padding-left: 1.85rem; margin-bottom: 0.7rem; font-size: 1rem;
}
.experience-summary__col li::before {
  content: "✓"; position: absolute; left: 0; top: 0.05rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white);
  font-size: 0.78rem; font-weight: 700; line-height: 1.3rem; text-align: center;
}
.experience-summary__cta { text-align: center; margin: var(--space-xl) 0 0; }

/* ==========================================================================
   BOOKING / AVAILABILITY
   ========================================================================== */

.booking-section { background: var(--c-cream-soft); }
.booking-widget-wrapper { width: 100%; margin-inline: auto; }
/* Un-box: the GYG frame ships its own chrome. Scoped so the class keeps its look elsewhere. */
.booking-section .gyg-widget-container {
  max-width: none; background: none; border: 0; border-radius: 0;
  padding: 0; box-shadow: none; min-height: 0;
}
.featured-proof { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin: var(--space-lg) auto 0; }
@media (min-width: 760px) { .featured-proof { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }
.featured-proof__item {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 1.05rem; line-height: 1.4; color: var(--c-charcoal);
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-left: 4px solid var(--c-primary); border-radius: var(--radius-md);
  padding: var(--space-md); box-shadow: var(--shadow-sm);
}
.featured-proof__item strong { color: var(--c-primary-deep); font-weight: 800; font-size: 1.15em; }
.featured-proof__item svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--c-primary); }
.featured-proof__star { color: var(--c-accent); }

/* ==========================================================================
   ITINERARY / NUMBERED LISTS  (#experience, and any reuse)
   ========================================================================== */

.itinerary__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--w-wide); }
.itinerary__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md);
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--c-travertine);
}
.itinerary__item:last-child { border-bottom: 0; }
.itinerary__num {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800; line-height: 1; color: var(--c-accent-deep);
}
.itinerary__item h3 { margin-bottom: 0.45rem; }
.itinerary__item p { margin-bottom: 0; }

/* ==========================================================================
   GALLERY — full-width strip
   ========================================================================== */

.gallery { background: var(--c-charcoal); color: var(--c-cream); padding-block: var(--section-py); }
.gallery h2 { color: var(--c-white); }
.gallery .section-head__sub { color: rgba(255, 249, 242, 0.8); }
.gallery__wrapper { position: relative; }
.gallery__wrapper--full {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.gallery__wrapper--full .gallery__strip {
  padding-left:  max(1rem, calc((100vw - 1240px) / 2));
  padding-right: max(1rem, calc((100vw - 1240px) / 2));
}
.gallery__strip {
  display: flex; flex-wrap: nowrap; gap: 0.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-block: 0.5rem 1rem;
  scrollbar-width: thin; scrollbar-color: var(--c-accent) rgba(255, 249, 242, 0.14);
}
.gallery__strip::-webkit-scrollbar { height: 9px; }
.gallery__strip::-webkit-scrollbar-track { background: rgba(255, 249, 242, 0.12); border-radius: 999px; }
.gallery__strip::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 999px; }
.gallery__item { margin: 0; flex: 0 0 78vw; max-width: 520px; scroll-snap-align: start; }
.gallery__item img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-md); }
.gallery__item figcaption { font-size: 0.9rem; color: rgba(255, 249, 242, 0.75); padding-top: 0.5rem; }
@media (min-width: 720px) { .gallery__item { flex: 0 0 46vw; } }
@media (min-width: 1080px) { .gallery__item { flex: 0 0 32vw; } }

.gallery__wrapper::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(51, 46, 42, 0) 0%, var(--c-charcoal) 100%);
}
.gallery__arrow {
  display: none; position: absolute; top: 45%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 249, 242, 0.92); color: var(--c-charcoal);
  border: 0; font-size: 1.7rem; line-height: 1; box-shadow: var(--shadow-md);
}
.gallery__arrow--prev { left: 1rem; }
.gallery__arrow--next { right: 1rem; }
.gallery__arrow:hover { background: var(--c-white); }
@media (min-width: 1080px) and (hover: hover) { .gallery__arrow { display: block; } }

/* ==========================================================================
   CARD GRID (#why-choose, #reviews)
   ========================================================================== */

.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: var(--w-wide); margin-inline: auto; }
@media (min-width: 720px)  { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }
.section--olive .card {
  background: rgba(255, 249, 242, 0.07); border-color: rgba(255, 249, 242, 0.2); color: var(--c-cream);
}
.section--olive .card h3 { color: var(--c-white); }
.section--olive .card .eyebrow { color: var(--c-accent-on-dark); }

/* --- Review cards -------------------------------------------------------- */
.review-card blockquote { margin: 0 0 var(--space-md); font-size: 1.02rem; }
.review-card__stars { color: var(--c-accent); letter-spacing: 0.08em; margin-bottom: 0.5rem; display: block; }
.review-card cite {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; color: var(--c-primary-deep); margin-top: auto;
}
.reviews__note { text-align: center; max-width: var(--w-read); margin: var(--space-lg) auto 0; font-size: 0.95rem; color: var(--c-charcoal-mute); }

/* ==========================================================================
   ALSO — alternatives (Layout A, 2x2)
   ========================================================================== */

.also { background: var(--c-travertine-soft); padding-block: var(--section-py); }
.also__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: var(--w-wide); margin-inline: auto; }
@media (min-width: 720px) { .also__grid { grid-template-columns: 1fr 1fr; } }

.category-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-cream-soft); border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md); padding: var(--space-lg);
  color: var(--c-charcoal); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.category-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.category-card__img {
  width: calc(100% + 2 * var(--space-lg)); max-width: none;
  height: 180px; object-fit: cover; object-position: center;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0.9rem;
  transition: transform var(--transition);
}
.category-card:hover .category-card__img { transform: scale(1.04); }
.category-card h3 { margin-bottom: 0.5rem; }
.category-card p { font-size: 0.99rem; }
.category-card p:last-of-type { margin-bottom: var(--space-sm); }
.category-card__featured {
  display: block; font-size: 0.92rem; color: var(--c-charcoal-mute);
  padding-top: 0.6rem; border-top: 1px solid var(--c-travertine); margin-bottom: 0.7rem;
}
.category-card__cta {
  margin-top: auto; font-family: var(--font-display); font-weight: 700;
  font-size: 0.98rem; color: var(--c-primary-deep);
}

/* ==========================================================================
   GUIDE — the single editorial body
   ========================================================================== */

.guide__body { max-width: var(--w-read); margin: 0 auto; }
.guide__body h3 { margin-top: var(--space-xl); color: var(--c-primary-deep); }
.guide__body h3:first-child { margin-top: 0; }
.guide__body p:last-child { margin-bottom: 0; }

.callout {
  max-width: var(--w-read); margin-inline: auto;
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-left: 4px solid var(--c-accent-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md); margin-top: var(--space-lg); font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.cta-banner { background: var(--c-olive); color: var(--c-cream); padding-block: var(--section-py); }
.cta-banner__inner { max-width: var(--w-read); margin: 0 auto; text-align: center; }
.cta-banner h2 { color: var(--c-white); }
.cta-banner ul {
  display: flex; flex-direction: column; width: max-content; max-width: 100%;
  margin: 0 auto var(--space-lg); text-align: left; padding-left: 1.3rem;
}
.cta-banner li { margin-bottom: 0.4rem; }
.cta-banner .btn--primary { display: inline-flex; margin: 0 auto; }
.cta-banner__disclosure { font-size: 0.88rem; color: rgba(255, 249, 242, 0.75); margin: var(--space-md) 0 0; }

/* ==========================================================================
   MORE EXPERIENCES (auto widget)
   ========================================================================== */

.more-experiences { padding-block: var(--section-py); background: var(--c-cream); }
.more-experiences .section-sub { max-width: var(--w-read); margin-inline: auto; color: var(--c-charcoal-mute); }
.more-experiences .eyebrow { text-align: left; max-width: var(--w-read); margin-inline: auto; }
.more-experiences__widget { max-width: var(--w-wide); margin: var(--space-xl) auto 0; }
.more-experiences__widget:empty { margin-top: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__list { max-width: var(--w-wide); margin: 0 auto; }
.faq__item {
  background: rgba(255, 249, 242, 0.07); border: 1px solid rgba(255, 249, 242, 0.2);
  border-radius: var(--radius-md); margin-bottom: var(--space-sm); overflow: hidden;
}
.faq__item summary {
  cursor: pointer; list-style: none; padding: var(--space-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--c-white);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; color: var(--c-accent-on-dark); line-height: 1; flex-shrink: 0; }
.faq__item[open] summary::after { content: "–"; }
.faq__item > div { padding: 0 var(--space-md) var(--space-md); }
.faq__item p:last-child { margin-bottom: 0; }

/* #faq sits directly above the olive final CTA on the guide pages. Shift the
   upper band one step lighter so the seam reads (the dark-band trap). Cream
   body text still clears AA on this shade. */
#faq.section--olive { background: #3F566B; }

/* ==========================================================================
   EXPLORE — spoke link grid
   ========================================================================== */

.explore__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-sm);
  max-width: var(--w-wide);
}
@media (min-width: 720px) { .explore__grid { grid-template-columns: 1fr 1fr; } }
.explore__grid a {
  display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md); padding: var(--space-md);
  color: var(--c-charcoal); transition: var(--transition);
}
.explore__grid a:hover { text-decoration: none; border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.explore__grid strong { font-family: var(--font-display); font-size: 1.06rem; color: var(--c-primary-deep); }
.explore__grid span { font-size: 0.94rem; color: var(--c-charcoal-mute); }

/* ==========================================================================
   VERTICAL RHYTHM between sibling content blocks (rails ship margin: 0 auto)
   ========================================================================== */

:is(.card-grid, .table-wrap, .experience-summary__grid, .itinerary__list, .faq__list,
    .explore__grid, .also__grid, .featured-proof, .table-note, .callout)
+ :is(.card-grid, .table-wrap, .experience-summary__grid, .itinerary__list, .faq__list,
      .explore__grid, .also__grid, .featured-proof) { margin-top: var(--space-lg); }

/* ==========================================================================
   TABLES (spoke pages)
   ========================================================================== */

.table-wrap { max-width: var(--w-wide); margin-inline: auto; overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; background: var(--c-white); }
.vs-table th, .vs-table td { padding: 0.85rem 1rem; border: 1px solid var(--c-travertine); text-align: left; vertical-align: top; }
.vs-table thead th { background: var(--c-cream-soft); font-family: var(--font-display); color: var(--c-primary-deep); }
.vs-table tbody th { font-weight: 700; color: var(--c-charcoal); background: var(--c-cream); }
.table-note { max-width: var(--w-read); margin: var(--space-lg) auto 0; text-align: center; font-size: 0.95rem; color: var(--c-charcoal-mute); }

/* ==========================================================================
   LEGAL / TEXT PAGES
   ========================================================================== */

.text-block, .legal__inner { max-width: var(--w-read); margin: 0 auto; }
.legal__inner h2 { margin-top: var(--space-xl); }
.legal__inner h2:first-of-type { margin-top: 0; }
.page-head { background: var(--c-cream-soft); border-bottom: 1px solid var(--c-travertine); padding-block: var(--space-xl); }
.page-head .section-head { margin-bottom: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--c-charcoal); color: rgba(255, 249, 242, 0.82); padding-block: var(--space-2xl) var(--space-lg); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: var(--max-width); margin-inline: auto; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-xl); } }
.site-footer h3 { color: var(--c-white); font-size: 1.05rem; margin-bottom: var(--space-sm); }
.site-footer p { font-size: 0.96rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: rgba(255, 249, 242, 0.86); font-size: 0.96rem; }
.site-footer a:hover { color: var(--c-accent-on-dark); }
.site-footer__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--c-white); display: block; margin-bottom: var(--space-sm); }
.site-footer__bottom {
  max-width: var(--max-width); margin: var(--space-xl) auto 0; padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 249, 242, 0.16); font-size: 0.88rem; color: rgba(255, 249, 242, 0.66);
}
.site-footer__bottom p { margin-bottom: 0.4rem; }

/* ==========================================================================
   MOBILE STICKY BOOKING BAR
   ========================================================================== */

.sticky-cta { display: none; }

@media (max-width: 768px) {
  .sticky-cta {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 60;
    align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(51, 46, 42, 0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 249, 242, 0.16);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(100%); transition: transform 0.25s ease;
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta[hidden] { display: none; }
  .sticky-cta__meta {
    flex: 1 1 auto; min-width: 0; color: var(--c-cream);
    font-weight: 700; font-size: 1.05rem; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sticky-cta__unit { font-weight: 500; font-size: 0.8rem; opacity: 0.72; }
  .sticky-cta .btn--primary {
    flex: 0 0 auto; padding: 0.72rem 1.35rem; font-weight: 700;
    background: var(--c-accent-bright); color: var(--c-charcoal); border-color: var(--c-accent-bright);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.35);
  }
  /* Legal/404 pages have no #book-now, so the bar stays up — clear the footer. */
  .site-footer { padding-bottom: calc(var(--space-lg) + 4.5rem + env(safe-area-inset-bottom)); }
}


/* ===========================================================================
   FLAT DESIGN OVERLAY — /hugo-site-factory-flat
   ===========================================================================
   Applied 2026-09-06. The grammar is measured off queenstownhelicoptertours.com
   (a Weebly "Adventurous" theme) via that skill's README-DESIGN.md; the palette
   and fonts stay this project's own, so every value below is a token or a
   literal from the reference.

   Selector names differ from the skill's Hugo scaffold, so each section is
   mapped onto this site's classes. Section numbers match the source overlay.

   Appended at the END so it wins on source order.                          */

/* -- 1. Buttons: square, uppercase, letter-spaced, flat, bordered ---------*/
.btn {
  border-radius: 1px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;                 /* 13px - the reference's small button */
  padding: 10px 14px;
  border-width: 1px;
  box-shadow: none;
  transition: background-color 250ms ease-in, border-color 250ms ease-in,
              color 250ms ease-in;
}
.btn:hover  { transform: none; box-shadow: none; }  /* the reference does not lift */
.btn:active { transform: none; }
.btn--lg { padding: 12px 20px; font-size: 0.9375rem; }

.btn--primary   { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: var(--c-white); }
.btn--primary:hover { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-white); }
.btn--secondary { background: transparent; border-color: var(--c-white); color: var(--c-white); }
.btn--secondary:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-charcoal); }
.btn--ghost     { background: transparent; border-color: var(--c-primary); color: var(--c-primary-deep); }
.btn--ghost:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

/* The hero keeps the one yellow CTA on the site (new-site-simple rule #1), now
   in the flat idiom: solid fill, matching border, no lift. */
.hero .btn--primary { background: var(--c-accent-bright); border-color: var(--c-accent-bright); color: var(--c-charcoal); }
.hero .btn--primary:hover { background: #E0A63C; border-color: #E0A63C; color: var(--c-charcoal); }

/* -- 2. Header: 60px transparent over the hero, 50px solid once scrolled --*/
.site-header {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: color-mix(in srgb, var(--c-white) 15%, transparent);
}
.site-header__inner { min-height: 60px; padding-block: 0; }
.site-header .brand { color: var(--c-white); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.site-header .nav a { color: var(--c-white); }
.site-header .nav-toggle { color: var(--c-white); }

.site-header.is-scrolled,
.site-header--solid {
  position: sticky;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-travertine);
}
.site-header.is-scrolled::after,
.site-header--solid::after { background: transparent; }
.site-header.is-scrolled .site-header__inner,
.site-header--solid .site-header__inner { min-height: 50px; }
.site-header.is-scrolled .brand,
.site-header--solid .brand { color: var(--c-primary-deep); }
.site-header.is-scrolled .nav a:not(.btn),
.site-header--solid .nav a:not(.btn) { color: var(--c-charcoal); }
.site-header.is-scrolled .nav-toggle,
.site-header--solid .nav-toggle { color: var(--c-primary-deep); }

.nav a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.875rem;                  /* 14px */
  padding: 15px 10px;
  border-radius: 0;
}
.nav a:hover { background: transparent; color: var(--c-accent-on-dark); }
.site-header.is-scrolled .nav a:not(.btn):hover,
.site-header--solid .nav a:not(.btn):hover { color: var(--c-primary); }
.nav .btn--primary { color: var(--c-white); }

@media (max-width: 980px) {
  /* the open drawer sits on the photograph, so it needs its own surface */
  .nav.is-open {
    background: var(--c-cream);
    border-top: 1px solid var(--c-travertine);
    padding: var(--space-sm) 1rem;
    margin-top: 0;
  }
  /* :not(.btn) matters — the header CTA is an <a> too, and .nav.is-open a
     (0,2,1) out-specifies .nav .btn--primary (0,2,0), which put charcoal text
     on the terracotta fill at 3.06:1. */
  .nav.is-open a:not(.btn) { color: var(--c-charcoal); border-bottom-color: var(--c-travertine); }
}

/* -- 3. Hero: centred, uppercase display line, top-down scrim -------------
   The reference banner is CENTRED, so the earlier left-to-right scrim geometry
   no longer matches the copy - the right half of every centred line would sit
   unveiled. Replaced with a top-to-bottom wash, heaviest at the TOP and fully
   transparent at the FOOT: the dark top is what the transparent header, the
   eyebrow and the display line sit on, while the foot of a travel frame usually
   carries the most interesting thing in it.
   Section 3 and section 10 change together or not at all.                  */
.hero { align-items: center; text-align: center; }
.hero::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-charcoal) 88%, transparent)   0%,
    color-mix(in srgb, var(--c-charcoal) 68%, transparent)  50%,
    color-mix(in srgb, var(--c-charcoal)  0%, transparent) 100%);
}
/* The elliptical scrim was cut for LEFT-aligned copy; a centred hero on a
   top-down wash does not want it. */
.hero-overlay::before { content: none; }
/* On the pale desert hero the copy runs lower than on the others, into the
   falloff — .hero-rating measured 4.05:1 against a 4.5 floor. The extra stop at
   78% slows the fade through the copy zone while the FOOT stays fully
   transparent, which is the point of the direction. Raise the top and middle
   stops on a failure; never deepen the last one. */
.hero--bright::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-charcoal) 92%, transparent)   0%,
    color-mix(in srgb, var(--c-charcoal) 80%, transparent)  45%,
    color-mix(in srgb, var(--c-charcoal) 54%, transparent)  78%,
    color-mix(in srgb, var(--c-charcoal)  0%, transparent) 100%);
}
.hero .container { width: var(--container); }
.hero-content { max-width: 900px; text-align: center; }
.hero-overlay { margin-bottom: var(--space-md); }
.hero h1 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.12;
}
.hero-lede { margin-inline: auto; max-width: 54ch; }
.hero-rating, .hero-price, .hero-pills, .hero-actions { justify-content: center; }

/* -- 4. Section headings at the reference's 32px --------------------------*/
.section-head h2 { letter-spacing: 0.005em; }
@media (min-width: 768px)  { .section-head h2 { font-size: 2rem;     } }
@media (min-width: 1024px) { .section-head h2 { font-size: 2.125rem; } }

/* -- 5. Cards: hard edges, hairline border, no hover lift -----------------*/
.category-card:hover, .explore__grid a:hover, .card:hover { transform: none; box-shadow: none; }
.category-card:hover   { border-color: var(--c-primary); }
.explore__grid a:hover { border-color: var(--c-primary); }
.category-card:hover .category-card__img { transform: none; }
.category-card__cta {
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 0.75rem;
}

/* -- 6. Body measure: the reference's 16px / 30px -------------------------*/
body { font-size: 1rem; line-height: 1.75; }
.intro__body p, .guide__body p, .section-head__sub, .card p,
.category-card p, .review-card blockquote { line-height: 1.8; }

/* -- 7. Footer: 40px band, uppercase column heads, 13px links -------------*/
.site-footer { padding-top: 40px; }
.site-footer h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.site-footer a { font-size: 0.8125rem; }
.site-footer__brand { text-transform: uppercase; letter-spacing: 0.05em; }

/* -- 8. Badges and pills inherit the same square, uppercase discipline ----*/
.hero-pills span {
  border-radius: 1px; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.75rem;
}

/* -- 9. Square corners, everywhere ---------------------------------------- */
.btn, .card, .category-card, .category-card__img, .experience-summary__col,
.explore__grid a, .featured-proof__item, .faq__item, .callout, .vs-table,
.vs-table th, .vs-table td, .gallery__item img, .gallery__arrow,
.hero-pills span, .site-header, .nav a, .nav-toggle, .sticky-cta,
.sticky-cta .btn, .booking-widget-wrapper, .gyg-widget-container,
.more-experiences__widget, .facts, .facts__item, .hl, .review-card__stars,
.intro__body, .guide__body, .table-wrap, .page-head { border-radius: 0; }

/* -- 10. The facts strip lives at the FOOT OF THE HERO --------------------
   It carries its OWN upward-fading wash. That is load-bearing: section 3 now
   runs fully transparent at the foot, so a transparent strip would be light
   text on open photograph. Only these ~70px carry darkness; the rest of the
   lower hero is the picture. Governed by the hero-contrast measurement.    */
.hero .facts {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-bottom: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-charcoal) 40%, transparent)   0%,
    color-mix(in srgb, var(--c-charcoal) 82%, transparent)  55%,
    color-mix(in srgb, var(--c-charcoal) 88%, transparent) 100%);
  padding-block: 16px;
}
.hero .facts__row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 14px 30px; max-width: min(1240px, 100% - 2rem); margin-inline: auto;
}
.hero .facts__item { border-right: 0; gap: 2px; padding: 0; min-width: 0; }
.hero .facts__value {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700;
  line-height: 1.2; color: var(--c-white); letter-spacing: 0.01em;
}
.hero .facts__label {
  font-size: 0.6875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-accent-on-dark);
}

/* The strip occupies the hero's bottom edge, so the copy has to clear it - and
   the whole hero has to stay inside 100svh, or the strip lands below the fold
   on the commonest laptop viewport. */
.hero {
  min-height: 100svh;
  padding-top: calc(64px + 60px);
  padding-bottom: 136px;
}
@media (min-width: 768px) {
  .hero { padding-top: calc(24px + 60px); padding-bottom: 104px; }
  .hero-overlay { margin-bottom: 0.75rem; }
  .hero .facts__row  { gap: 14px 40px; }
  .hero .facts__value { font-size: 1rem; }
}
/* Below 560px, five facts across is two words per line. Three columns puts them
   in two rows instead of three, which is the difference between the strip
   clearing the fold on a short phone and not. */
@media (max-width: 560px) {
  .hero .facts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .hero .facts { padding-block: 12px; }
  .hero .facts__value { font-size: 0.8125rem; }
  .hero .facts__label { font-size: 0.5625rem; letter-spacing: 0.05em; line-height: 1.15; }
}

/* -- 11. Flat panels ------------------------------------------------------
   The reference puts no elevation on content at all. Nothing here is a drawer
   sliding over the page - the mobile nav expands inline under a solid surface -
   so nothing on this site keeps a shadow. Panels that were relying on elevation
   for definition get a hairline instead.                                    */
.card, .category-card, .experience-summary__col, .explore__grid a,
.featured-proof__item, .callout, .site-header, .site-header.is-scrolled,
.site-header--solid, .sticky-cta, .gallery__arrow, .vs-table,
.hero-overlay, .hero-pills span, .review-card { box-shadow: none; }
.card, .experience-summary__col, .featured-proof__item { border: 1px solid var(--c-travertine); }
/* .sticky-cta .btn--primary (0,2,0) out-specifies the .btn rule above (0,1,0),
   so the mobile bar's CTA kept its shadow and only showed up in the 390px
   sweep — the viewport-conditional case the audit sweeps two widths for. */
.sticky-cta .btn--primary { box-shadow: none; }

/* -- 12. Explore hub: three columns ---------------------------------------*/
@media (min-width: 900px) {
  .explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -- 13. Section sub-headings: block labels take the chrome voice ---------
   The tier that LABELS A BLOCK - Highlights / What's Included, the numbered
   step titles, the guide-body headings - switches onto the same voice as the
   buttons and nav, accent-coloured, one size up. Card titles are deliberately
   excluded: they are the clickable name of a thing, and accent-colouring them
   makes every card read as already visited.                                */
.experience-summary__col h3,
.itinerary__item h3,
.guide__body h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-primary-deep);
  font-size: 1.15rem;
  line-height: 1.3;
}
.section--olive .itinerary__item h3,
.section--dark .itinerary__item h3 { color: var(--c-accent-on-dark); }

/* -- 14. No on-page logo mark - the site name already stands alone. -------*/


/* -- 10b. Narrow-viewport hero fit (gate F6) ------------------------------
   The strip is pinned to the hero's foot, so the whole hero has to stay inside
   100svh or the strip lands below the fold. This hero carries a rating row and
   a price badge on top of the reference's inventory, so the narrow scale needs
   tightening. Every value here was set by re-running the fold measurement
   across all five hero pages at 390x844, not by eye. */
@media (max-width: 767px) {
  .hero { padding-top: calc(12px + 60px); padding-bottom: 132px; }
  .hero .eyebrow  { font-size: 12px; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
  .hero h1        { font-size: 1.5rem; line-height: 1.14; margin-bottom: 0.5rem; }
  .hero-lede      { font-size: 0.9rem; line-height: 1.45; margin-bottom: 0.6rem; }
  .hero-rating    { font-size: 0.85rem; gap: 0.3rem; margin-bottom: 0.4rem; }
  .hero-price     { gap: 0.35rem; }
  .hero-price__amount { font-size: 1.45rem; }
  .hero-price__unit, .hero-price__from { font-size: 0.85rem; }
  .hero-overlay   { margin-bottom: 0.75rem; }
  .hero-pills     { gap: 0.4rem; margin-bottom: 0.75rem; }
  .hero-pills span { font-size: 0.68rem; padding: 0.3rem 0.7rem; }
  .hero-actions   { gap: 0.5rem; }
  .hero-actions .btn { flex: 1 1 auto; }
}