/* ==========================================================================
   hawaii-helicopter-tours.com
   Palette: Hawaii brief (warm sand / misty sky / ocean blue / tropical green /
   sunset orange). Fonts: Poppins (display) + Inter (body).
   Structure follows the locked new-site-simple pattern.
   ========================================================================== */

:root {
  /* === COLOUR ROLES ===
     Two values are deliberately shifted from the supplied brief so the palette
     clears WCAG AA as *text*, which the brief's originals do not:
       Ocean Blue  #0088A9 -> #00758F  (brief value gives only 3.94:1 on cream
                                        as text and 4.12:1 behind white button
                                        text; both fail AA. Same hue, ~6% deeper.)
       Sunset accent #F5A623 -> #F9BC57 (4.29:1 on the olive dark sections failed;
                                         the lighter amber reads 5.12:1.)
     #0088A9 is kept below as --c-primary-brand for decorative fills only. */
  --c-primary:         #00758F;  /* Ocean Blue (AA-safe) — CTAs, links, brand accents */
  --c-primary-brand:   #0088A9;  /* Brief's exact Ocean Blue — decorative fills only, never text */
  --c-primary-deep:    #04617A;  /* Deeper ocean — headings on light, btn hover, eyebrows */
  --c-accent:          #3C9D5A;  /* Tropical Green — checkmarks, trust marks */
  --c-accent-bright:   #F9BC57;  /* Warm amber — hero CTA bg + dark-bg eyebrows */
  --c-cta:             #F28C38;  /* Sunset Orange — reserved, sparing use */
  --c-cream:           #FFF9F1;  /* Warm Sand — base page background */
  --c-cream-soft:      #F2F8FA;  /* Misty Sky Blue — alternate sections */
  --c-travertine:      #E6ECEF;  /* Borders */
  --c-travertine-soft: #EAF2F5;  /* Light tint — categories bg, featured card outer */
  --c-olive:           #0C4453;  /* Mid-dark teal — why-choose, FAQ, final CTA.
                                    Deepened from #0F5265 so low-opacity cream text
                                    (the 60% disclosure line) still clears AA. */
  --c-olive-deep:      #08333F;  /* Deeper variant for hover/border */
  --c-charcoal:        #243746;  /* Very dark — gallery, footer, body text on light */
  --c-charcoal-mute:   #566B7D;  /* Supporting text on light — AA-safe on cream */
  --c-white:           #FFFFFF;

  /* === TYPOGRAPHY === */
  --font-display: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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(36, 55, 70, 0.08);
  --shadow-md:  0 10px 28px rgba(36, 55, 70, 0.12);
  --shadow-lg:  0 18px 40px -14px rgba(36, 55, 70, 0.35);

  /* === AUDIT ALIASES (contrast_audit.py compatibility — literal hex, 0 real uses) ===
     The audit script plugs these into a role model inherited from the parent skill's
     layout (gold buttons on navy, dark facts strip). This layout differs, so each alias
     is mapped to the colour that plays the equivalent role HERE. Real rendered pairs are
     verified separately — see the build report. */
  --c-ice:          #FFF9F1;   /* light text on dark */
  --c-navy:         #0C4453;   /* the dark section background (our olive) */
  --c-ocean:        #0C4453;   /* the why-choose section background — in this layout
                                  that band is olive, not a mid-blue as the model assumes */
  --c-slate:        #566B7D;   /* supporting text on light */
  --c-amber:        #F9BC57;   /* dark-bg accent (our bright variant) */
  --c-amber-bright: #F9BC57;
  --c-gold:         #F9BC57;
}

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

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

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  line-height: 1.65;
  color: var(--c-charcoal);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-primary-deep);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.7vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem); }

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

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-deep); }

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

ul { margin: 0 0 var(--space-md); padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

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

.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-white); }
.section--olive p, .section--dark p { color: rgba(255, 249, 241, 0.9); }
.section--olive strong, .section--dark strong { color: var(--c-white); }
.section--olive a, .section--dark a { color: var(--c-accent-bright); }

.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;
}

/* --- Section heads: centered block, read rail --- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  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-bright);
}

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

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-primary-deep); color: var(--c-white); transform: translateY(-1px); }
.btn--secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.22); color: var(--c-white); }

/* Nav link rule out-specifies .btn--primary — re-assert white 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, 241, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-travertine);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding-block: 0.7rem;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--c-primary-deep); text-decoration: none;
  line-height: 1.15;
}
.brand:hover { color: var(--c-primary); }
.brand svg { flex: 0 0 auto; }

.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav a {
  color: var(--c-charcoal); text-decoration: none;
  font-size: 0.93rem; font-weight: 500;
}
.nav a:hover { color: var(--c-primary); }
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.45rem; color: var(--c-primary-deep);
}
.nav-toggle svg { display: block; }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 3.6rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-travertine);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm) 1rem var(--space-md);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--c-travertine); }
  .nav .btn { margin-top: var(--space-sm); border-bottom: 0; }
}

/* ==========================================================================
   HERO  (two-zone: frosted panel + siblings below)
   ========================================================================== */

.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(30rem, 78vh, 44rem);
  padding-block: var(--space-2xl);
  overflow: hidden;
  background: var(--c-charcoal);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
/* No-panel hero variant (accepted deviation from the locked frosted-panel default —
   see skill §7g). The panel's background/blur/border/shadow/padding are gone; legibility
   is carried instead by a deeper two-axis gradient (horizontal pass for the left-aligned
   text zone + vertical pass) and stronger text-shadow on every hero text element below. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 22, 30, 0.72) 0%, rgba(10, 22, 30, 0.42) 55%, rgba(10, 22, 30, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 22, 30, 0.55) 0%, rgba(10, 22, 30, 0.20) 40%, rgba(10, 22, 30, 0.66) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero-content {
  width: 100%; max-width: 760px;
  margin: 0 auto; text-align: left;
}

.hero-overlay { margin-bottom: var(--space-lg); }
.hero-overlay > :last-child { margin-bottom: 0; }

.hero h1 {
  color: var(--c-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--space-sm);
}
.hero strong { color: inherit; }
.hero-lede {
  color: rgba(255, 249, 241, 0.96);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--space-md);
}
.hero-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  color: rgba(255, 249, 241, 0.96); font-size: 0.95rem; margin-bottom: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-rating .stars { color: var(--c-accent-bright); letter-spacing: 0.06em; }
.hero-rating .score { font-weight: 700; color: var(--c-white); }
.eyebrow { text-shadow: none; }
.hero .eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4); }

.hero-pills {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  margin-bottom: var(--space-lg);
}
.hero-pills span {
  display: inline-block;
  background: rgba(255, 249, 241, 0.14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 249, 241, 0.3);
  color: var(--c-white);
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  font-size: 0.84rem; font-weight: 500;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* LOCKED: hero primary CTA is the bright/yellow one — the one place it lives. */
.hero .btn--primary {
  background: var(--c-accent-bright);
  color: var(--c-charcoal);
}
.hero .btn--primary:hover { background: #EFAA3C; color: var(--c-charcoal); }

@media (max-width: 640px) {
  .hero { 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; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
  max-width: var(--w-wide); margin-inline: auto;
}
.facts__item { text-align: center; margin: 0; padding-inline: 0.4rem; }
.facts__value {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--c-primary-deep); line-height: 1.15;
}
.facts__label {
  display: block;
  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); gap: 0; }
  .facts__item:not(:last-child) { border-right: 1px solid var(--c-travertine); }
}

/* ==========================================================================
   INTRO  (combined: heads + body + 2-col grid + CTA)
   ========================================================================== */

.intro__body { max-width: var(--w-read); margin: 0 auto var(--space-xl); }

.experience-summary__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  max-width: var(--w-wide); margin-inline: auto;
}
@media (min-width: 720px) {
  .experience-summary__grid { grid-template-columns: repeat(2, 1fr); }
}
.experience-summary__col {
  background: var(--c-white);
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-sm);
}
.experience-summary__col h3 {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--c-travertine);
  margin-bottom: var(--space-sm);
}
.experience-summary__col ul { list-style: none; padding: 0; margin: 0; }
.experience-summary__col li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem;
  font-size: 0.97rem;
}
.experience-summary__col li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-white), 0 0 0 1px var(--c-accent);
}
.experience-summary__cta { text-align: center; margin: var(--space-xl) 0 0; }

/* ==========================================================================
   ITINERARY / NUMBERED LISTS  (#experience, #reality-check)
   ========================================================================== */

.itinerary__list {
  list-style: none; padding: 0;
  max-width: var(--w-wide); margin: 0 auto;
}
.itinerary__item {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--c-travertine);
  margin: 0;
}
.itinerary__item:last-child { border-bottom: 0; }
.itinerary__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--c-primary);
  line-height: 1; min-width: 2.2rem;
}
.itinerary__item h3 { margin-bottom: 0.35rem; }
.itinerary__item p { margin-bottom: 0; color: var(--c-charcoal-mute); }

/* ==========================================================================
   FEATURED TOUR CARD  (merged card: text + widget)
   ========================================================================== */

.guided { background: var(--c-travertine-soft); }

.guided__grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: var(--w-wide); margin-inline: auto;
  background: var(--c-white);
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.guided__mobilehead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: var(--space-md);
  border-bottom: 1px solid var(--c-travertine);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.guided__mobilehead .eyebrow { margin-bottom: 0; }
.guided__text { padding: var(--space-lg); }
.guided__widget {
  padding: var(--space-md); order: -1;
  border-bottom: 1px solid var(--c-travertine);
  background: var(--c-white);
  min-height: 320px;
}
.guided__title-h2 { margin-bottom: var(--space-sm); }
.guided__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  font-size: 0.94rem; color: var(--c-charcoal-mute);
  margin-bottom: var(--space-md);
}
.guided__meta .rating { color: var(--c-primary-deep); font-weight: 600; }
.pill {
  display: inline-block;
  background: var(--c-cream-soft);
  color: var(--c-primary-deep);
  border: 1px solid var(--c-travertine);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.83rem; font-weight: 600;
}
.guided__why {
  background: var(--c-cream-soft);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.guided__why p { margin-bottom: 0; }
.guided__list { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.guided__list li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem;
  font-size: 0.97rem;
}
.guided__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  /* decorative fill — the brief's exact Ocean Blue is safe here (not text) */
  background: var(--c-primary-brand);
  box-shadow: inset 0 0 0 2px var(--c-white), 0 0 0 1px var(--c-primary-brand);
}
.guided__note { font-size: 0.92rem; color: var(--c-charcoal-mute); margin-bottom: 0; }

@media (min-width: 1024px) {
  .guided__grid { grid-template-columns: 1.05fr 0.95fr; }
  .guided__mobilehead { display: none; }
  .guided__widget {
    order: 0; border-bottom: 0;
    border-left: 1px solid var(--c-travertine);
  }
}
@media (max-width: 1023.98px) {
  .guided__title-h2, .guided__price-rating { display: none; }
  .guided__why { background: none; border-left: 0; padding: 0; border-radius: 0; }
}

/* ==========================================================================
   CARD GRIDS  (#highlights, #why-choose, #reviews, #safety)
   ========================================================================== */

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

.card {
  background: var(--c-white);
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--c-charcoal-mute); font-size: 0.97rem; }

/* Cards on dark sections are darkened, not lightened. A white wash lifts the card
   background toward the amber eyebrow and drops it to 4.27:1 (under AA); recessing
   the card instead pushes every element on it further clear — amber reaches 5.9:1
   and the white h3 10:1. */
.section--olive .card, .section--dark .card {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.section--olive .card p, .section--dark .card p { color: rgba(255, 249, 241, 0.85); }

/* Reviews */
.review-card blockquote { margin: 0 0 var(--space-sm); font-size: 0.97rem; }
.review-card blockquote p:last-child { margin-bottom: 0; }
.review-card cite {
  font-style: normal; font-size: 0.88rem; font-weight: 600;
  color: var(--c-primary-deep);
}
.review-card .stars { color: var(--c-accent-bright); letter-spacing: 0.06em; display: block; margin-bottom: 0.5rem; }
.reviews__note {
  max-width: var(--w-read); margin: var(--space-lg) auto 0;
  text-align: center; font-size: 0.9rem; color: var(--c-charcoal-mute);
}

/* ==========================================================================
   GALLERY  (full-width horizontal scroll)
   ========================================================================== */

.gallery { background: var(--c-charcoal); padding-block: var(--section-py); }
.gallery h2 { color: var(--c-white); }
.gallery .section-head__sub { color: rgba(255, 249, 241, 0.82); }

.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;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 249, 241, 0.45) rgba(255, 249, 241, 0.1);
  padding-bottom: var(--space-sm);
}
.gallery__strip::-webkit-scrollbar { height: 8px; }
.gallery__strip::-webkit-scrollbar-track { background: rgba(255, 249, 241, 0.1); border-radius: 4px; }
.gallery__strip::-webkit-scrollbar-thumb { background: rgba(255, 249, 241, 0.45); border-radius: 4px; }

.gallery__item {
  margin: 0;                       /* kill UA <figure> margin: 1em 40px */
  flex: 0 0 78vw;
  scroll-snap-align: start;
  display: flex;                   /* let the caption size itself below the image */
  flex-direction: column;
}
@media (min-width: 720px)  { .gallery__item { flex-basis: 46vw; } }
@media (min-width: 1080px) { .gallery__item { flex-basis: 30vw; } }

/* height:auto (not 100%) — with height:100% the image consumes the whole flex
   item and the caption below it gets clipped by the strip. */
.gallery__item img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}
.gallery__item figcaption {
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(255, 249, 241, 0.78);
  padding-top: 0.55rem;
  flex: 1 1 auto;
}

.gallery__wrapper::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: 4rem; pointer-events: none;
  background: linear-gradient(90deg, rgba(36, 55, 70, 0) 0%, var(--c-charcoal) 100%);
}

.gallery__arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255, 249, 241, 0.92);
  color: var(--c-charcoal);
  border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow-md);
}
.gallery__arrow:hover { background: var(--c-white); }
.gallery__arrow--prev { left: 0.75rem; }
.gallery__arrow--next { right: 0.75rem; }
@media (min-width: 1080px) and (hover: hover) { .gallery__arrow { display: block; } }

/* ==========================================================================
   INCLUDED  (2-col lists)
   ========================================================================== */

.included__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  max-width: var(--w-wide); margin-inline: auto;
}
@media (min-width: 720px) { .included__grid { grid-template-columns: repeat(2, 1fr); } }
.included__col {
  background: var(--c-white);
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.included__col h3 {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--c-travertine);
  margin-bottom: var(--space-sm);
}
.included__col ul { list-style: none; padding: 0; margin: 0; }
.included__col li {
  position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; font-size: 0.97rem;
}
.included__col li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.included__col--yes li::before { content: "\2713"; color: var(--c-accent); }
.included__col--no  li::before { content: "\2715"; color: var(--c-charcoal-mute); }

/* ==========================================================================
   COMPARISON TABLE  (#vs-island)
   ========================================================================== */

.vs-table__wrap {
  max-width: var(--w-wide); margin-inline: auto;
  overflow-x: auto;
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md);
  background: var(--c-white);
}
.vs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.vs-table th, .vs-table td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--c-travertine);
  vertical-align: top;
}
.vs-table thead th {
  background: var(--c-cream-soft);
  color: var(--c-primary-deep);
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}
.vs-table tbody th {
  font-weight: 600; color: var(--c-charcoal);
  background: var(--c-cream);
  white-space: nowrap;
}
.vs-table tbody tr:last-child th, .vs-table tbody tr:last-child td { border-bottom: 0; }
.vs-table .is-pick { color: var(--c-primary-deep); font-weight: 600; }
.vs-table__note {
  max-width: var(--w-read); margin: var(--space-md) auto 0;
  text-align: center; font-size: 0.95rem; color: var(--c-charcoal-mute);
}

/* ==========================================================================
   PRACTICAL INFO
   ========================================================================== */

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

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

.faq__list { max-width: var(--w-wide); margin: 0 auto; }
.faq__item {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  margin-bottom: 0.7rem;
  background: rgba(0, 0, 0, 0.12);   /* recessed, matching the dark-section cards */
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  padding: 0.95rem var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--c-white);
  list-style: none;
  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.35rem; line-height: 1;
  color: var(--c-accent-bright);
  flex: 0 0 auto;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 var(--space-md) var(--space-md); }
.faq__answer p { margin-bottom: 0; color: rgba(255, 249, 241, 0.9); font-size: 0.97rem; }

/* ==========================================================================
   CATEGORIES  (#also)
   ========================================================================== */

.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: repeat(2, 1fr); } }

.category-card {
  display: block;
  background: var(--c-cream-soft);
  border: 1px solid var(--c-travertine);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--c-charcoal);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--c-charcoal); }
.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.4rem; }
.category-card p { font-size: 0.95rem; color: var(--c-charcoal-mute); }
.category-card__featured {
  display: block; font-size: 0.88rem; font-weight: 600;
  color: var(--c-primary-deep); margin-bottom: 0.6rem;
}
.category-card__cta {
  display: inline-block; font-weight: 600; font-size: 0.93rem;
  color: var(--c-primary);
}
.category-card:hover .category-card__cta { color: var(--c-primary-deep); text-decoration: underline; }
.category-card__note {
  display: block; font-size: 0.85rem; color: var(--c-charcoal-mute);
  border-top: 1px dashed var(--c-travertine);
  margin-top: 0.7rem; padding-top: 0.6rem;
}

/* ==========================================================================
   CTA BANNER  (#book-now)
   ========================================================================== */

.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 p { color: rgba(255, 249, 241, 0.9); }
.cta-banner__list {
  list-style: none; padding: 0;
  margin: 0 auto var(--space-lg);
  display: inline-block; text-align: left;
}
.cta-banner__list li {
  position: relative; padding-left: 1.7rem; margin-bottom: 0.5rem;
  color: rgba(255, 249, 241, 0.92); font-size: 0.97rem;
}
.cta-banner__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--c-accent-bright); font-weight: 700;
}
.cta-banner .btn--primary { background: var(--c-accent-bright); color: var(--c-charcoal); }
.cta-banner .btn--primary:hover { background: #EFAA3C; color: var(--c-charcoal); }
.cta-banner__disclosure {
  font-size: 0.85rem; color: rgba(255, 249, 241, 0.72);
  margin: var(--space-md) 0 0;
}

/* ==========================================================================
   CALLOUT
   ========================================================================== */

.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-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md);
}
.callout p:last-child { margin-bottom: 0; }

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

.site-footer { background: var(--c-charcoal); color: rgba(255, 249, 241, 0.82); padding-block: var(--space-xl) var(--space-lg); }
.site-footer h3 {
  color: var(--c-white); font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-sm);
}
.footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); } }
.footer__brand { display: flex; align-items: center; gap: 0.55rem; margin-bottom: var(--space-sm); }
.footer__brand span { font-family: var(--font-display); font-weight: 700; color: var(--c-white); font-size: 1.05rem; }
.site-footer p { font-size: 0.92rem; color: rgba(255, 249, 241, 0.72); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: rgba(255, 249, 241, 0.86); text-decoration: none; font-size: 0.92rem; }
.site-footer a:hover { color: var(--c-accent-bright); text-decoration: underline; }
.footer__bottom {
  border-top: 1px solid rgba(255, 249, 241, 0.16);
  padding-top: var(--space-md);
  font-size: 0.85rem; color: rgba(255, 249, 241, 0.62);
}
.footer__bottom p { font-size: 0.85rem; color: rgba(255, 249, 241, 0.62); 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;
    box-sizing: border-box;
    max-width: 100%;
    align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(36, 55, 70, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 249, 241, 0.16);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta[hidden] { display: none; }

  .sticky-cta__price { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; overflow: hidden; }
  .sticky-cta__from {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-accent-bright);
  }
  .sticky-cta__line { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
  .sticky-cta__amount { color: var(--c-cream); font-weight: 700; font-size: 1.4rem; }
  .sticky-cta__unit { color: rgba(255, 249, 241, 0.72); font-size: 0.75rem; }

  .sticky-cta__btn {
    flex: 0 0 auto;
    padding: 0.7rem 1.5rem;
    background: var(--c-accent-bright);
    color: var(--c-charcoal);
    white-space: nowrap;
  }
  .sticky-cta__btn:hover { background: #EFAA3C; color: var(--c-charcoal); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
  * { scroll-behavior: auto !important; }
}

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

.legal { padding-block: var(--section-py); }
.legal__inner { max-width: var(--w-read); margin: 0 auto; }
.legal__inner h2 { margin-top: var(--space-lg); }
.legal__inner h2:first-of-type { margin-top: 0; }
.text-block { max-width: var(--w-read); margin: 0 auto; }
.page-head { text-align: center; max-width: var(--w-read); margin: 0 auto var(--space-xl); }