/* =====================================================
   GBC UPGRADES STYLESHEET (v1 — editorial redesign)
   Load AFTER styles.css so declarations cascade over it.
   Implements plan items 1-15.
   ===================================================== */

/* ---------- 1. Design tokens (v2 — bounce-fix overhaul, Apr 2026) ----------
   Ditched Fraunces-for-everything: too literary, too precious, illegible
   italics on cream. One-font Inter at multiple weights lets contrast and
   spacing do the work; photography provides the warmth. */
:root {
  /* Single-font system — Inter for everything, with tight tracking at display sizes */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --font-accent: var(--font-sans);

  /* Cranked-contrast palette — no more #5b gray-italic on cream */
  --ink: #0e120f;            /* near-black with a whisper of green */
  --ink-2: #1f2320;          /* primary secondary */
  --ink-3: #3a3f3b;          /* muted — still AAA on paper backgrounds */
  --ink-4: #6a6f6b;          /* only for captions / disabled state */
  --paper: #faf7f0;          /* slightly brighter cream, feels less dusty */
  --paper-2: #efe9dc;
  --line: rgba(14,18,15,0.14);
  --line-soft: rgba(14,18,15,0.07);
  --forest: #2E5D34;
  --forest-deep: #173321;
  --forest-moss: #3f6e46;
  --clay: #b85a3a;
  --gold: #c2781c;           /* punchier terracotta-gold (was #c89b54 — too beige) */
  --sun: #e4a853;

  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(14,18,15,.05), 0 8px 24px rgba(14,18,15,.07);
  --shadow-float: 0 8px 32px rgba(14,18,15,.12), 0 24px 60px rgba(14,18,15,.10);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Body — one family, tighter leading, real contrast */
body {
  font-family: var(--font-sans) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 700;
  font-style: normal !important;
}

h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 700; letter-spacing: -0.025em; }
h3 { font-weight: 700; letter-spacing: -0.02em; }

/* Kill any stray italics on anything that isn't a pull-quote.
   The kicker / eyebrow classes below used to render as italic Fraunces on
   cream — low contrast and illegible. Force them all to upright sans. */
em, i { font-style: normal; }
blockquote em, blockquote i,
.testimonial em, .testimonial i,
.testimonial-card em, .testimonial-card i,
.testimonial-card__quote { font-style: italic; }

.hero__kicker,
.hero__alt-cta,
.hero__owner-title,
.section-header__badge,
.section-header__stat strong,
.collection-card__kicker,
.cabin-card__title,
.editorial-label,
.text-accent,
.review-aggregate__stat,
.reviews-summary__stat,
.diff-table__value,
.diff-table__caption,
.why-section__stat,
.map-cabin__name,
.cabin-card__sub,
.cabin-card__price-num,
.cabin-card__price-suffix,
.pref-card__title,
.wish-item__name,
.footer__title,
.footer__tagline,
.benefit-card__title,
.guide-card__title,
.reviews-section h2,
.wishlist__title,
.compare__title,
.compare-row__label,
.chat-header__title,
.photo-credit,
.price-comparator h3 { font-style: normal !important; }

/* ---------- 2. Icon sprite sizing ---------- */
.gi {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.2em;
  color: currentColor;
}
.gi--sm { width: 1em; height: 1em; }
.gi--lg { width: 1.75em; height: 1.75em; vertical-align: -0.35em; }
.gi--xl { width: 2.5em; height: 2.5em; vertical-align: middle; }
.gi--gold { color: var(--gold); }
.gi--forest { color: var(--forest); }
.gi--clay  { color: var(--clay); }

/* Guarantee any legacy inline Heroicons stay visually consistent */
svg:not(.gi):not([class*="footer__"]):not([class*="testimonial-card__"]) {
  stroke-width: 1.75;
}

/* ---------- 3. Kill gradient underline + italic kicker (v2) ----------
   Replaced the twee italic "— Five handpicked cabins" pattern with solid
   uppercase forest-green labels. AAA contrast, no more whispery kickers. */
.section-header::after { display: none !important; content: none !important; }
.section-header__badge,
.text-accent {
  font-family: var(--font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--forest) !important;
  opacity: 1 !important;
  display: inline-block;
  margin-bottom: 0.85rem;
}
.section-header__badge::before,
.text-accent::before { content: none !important; }

/* Left-align section headers by default (editorial feel), but preserve
   existing centered ones via an opt-in modifier if needed. */
.section-header {
  text-align: left !important;
  max-width: 860px !important;
  margin: 0 0 3rem !important;
}
.section-header__title {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  margin-bottom: 0.75rem !important;
  max-width: 22ch;
}
.section-header__desc {
  color: var(--ink-2) !important;
  font-size: 1.08rem !important;
  max-width: 60ch;
  line-height: 1.55 !important;
}

/* Flex section-header variant with an inline stat on the right */
.section-header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 100% !important;
}
.section-header--row .section-header__main { flex: 1 1 520px; }
.section-header__stat {
  text-align: right;
  color: var(--ink-3);
  line-height: 1.35;
  font-size: 0.95rem;
  max-width: 32ch;
}
.section-header__stat strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 2.4rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

@media (max-width: 640px) {
  .section-header__title { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; }
  .section-header__stat { text-align: left; }
}

/* ---------- 4. EDITORIAL HERO (#3) ---------- */
.hero {
  min-height: auto !important;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(3rem, 6vh, 5rem) !important;
  background: var(--paper) !important;
}
.hero::before, .hero__bg, .hero > picture { display: none !important; }
.hero__overlay { display: none !important; }

.hero__content {
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--ink) !important;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
}
.hero__content > .hero__left { min-width: 0; }
.hero__content > .hero__mosaic { min-width: 0; }

/* Kicker: uppercase forest label, no dash line, no italic */
.hero__kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--forest);
  margin-bottom: 1.25rem;
}
.hero__kicker::before { content: none; }

.hero__title {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
  text-transform: none !important;
  margin-bottom: 1.25rem !important;
  animation: none !important;
  opacity: 1 !important;
}
.hero__title em {
  font-style: normal;
  color: var(--forest-deep);
  font-weight: 800;
}

.hero__subtitle {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  color: var(--ink-2) !important;
  max-width: 52ch;
  line-height: 1.5 !important;
  animation: none !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  margin-bottom: 2rem !important;
}

/* Hero search pill lives in index.html critical CSS - single source of truth.
   Overrides here were fighting each other with !important wars. */

/* Hero trust row — restrained, editorial, one line */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  font-size: 0.9rem;
  color: var(--ink-3);
  align-items: center;
}
.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__trust strong { color: var(--ink); font-weight: 600; }

/* Photo mosaic (right side of hero) */
.hero__mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 0.75rem;
  aspect-ratio: 1/1.05;
  max-height: 600px;
}
.hero__mosaic picture,
.hero__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.hero__mosaic .mi-1 { grid-column: 1; grid-row: 1 / span 4; }
.hero__mosaic .mi-2 { grid-column: 2; grid-row: 1 / span 3; }
.hero__mosaic .mi-3 { grid-column: 2; grid-row: 4 / span 3; }
.hero__mosaic .mi-4 { grid-column: 1; grid-row: 5 / span 2; }
.hero__mosaic .mi-caption {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--ink-3);
  font-style: normal;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

@media (max-width: 960px) {
  .hero__content {
    grid-template-columns: 1fr !important;
  }
  .hero__mosaic {
    aspect-ratio: 16/11;
    max-height: 360px;
    order: 2;
    margin-top: 1.5rem;
  }
  .hero__left { order: 1; }
}

/* Legacy hero elements we're overriding — hide any old badge */
.hero__badge { display: none !important; }
.hero__urgency {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  color: var(--clay) !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  margin-top: 1rem !important;
  padding: 0 !important;
}

/* ---------- 5. Trust bar refined ---------- */
.trust-bar {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--line-soft) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 1rem 0 !important;
}
.trust-bar__inner {
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-2);
}
.trust-bar__item {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-2) !important;
}
.trust-bar__item .gi { color: var(--forest); }
.trust-bar__item svg { color: var(--forest); }

/* ---------- 6. BUTTONS refined ---------- */
.btn {
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary { background: var(--forest-deep) !important; color: #fff !important; }
.btn--primary:hover { background: var(--forest) !important; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn--secondary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.btn--secondary:hover { background: var(--ink) !important; color: #fff !important; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--ink); background: #fff; }

/* ---------- 7. NAVIGATION polish ---------- */
.header { backdrop-filter: saturate(1.3) blur(10px); }
.header--scrolled {
  background: rgba(247,244,238,.92) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
}
.nav__link { font-family: var(--font-sans) !important; letter-spacing: 0 !important; }
.nav__link--active { color: var(--forest-deep) !important; }

/* Wishlist pill in nav */
.nav__wishlist {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
}
.nav__wishlist:hover { border-color: var(--clay); color: var(--clay); }
.nav__wishlist[data-count="0"] { opacity: 0.7; }
.nav__wishlist .gi { color: var(--clay); }
.nav__wishlist__count {
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
  text-align: center;
}
.header--transparent:not(.header--scrolled) .nav__wishlist {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.header--transparent:not(.header--scrolled) .nav__wishlist .gi { color: #fff; }

/* ---------- 8. CABIN CARDS — differentiated ---------- */
.cabins-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}
@media (max-width: 1024px) { .cabins-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .cabins-grid { grid-template-columns: 1fr !important; } }

.cabin-card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: transform .3s var(--ease) !important;
}
.cabin-card:hover { transform: translateY(-4px) !important; box-shadow: none !important; }

.cabin-card__image {
  height: 320px !important;
  border-radius: var(--radius-m) !important;
  overflow: hidden !important;
  position: relative;
  display: block;
}
.cabin-card__image img {
  transition: transform .9s var(--ease) !important;
}
.cabin-card:hover .cabin-card__image img {
  transform: scale(1.04) !important;
}

/* Remove old pills on cards (Save 15%, badge, location) */
.cabin-card .cabin-card__save,
.cabin-card__location { display: none !important; }

/* Keep sleeps badge but restyle */
.cabin-card__badge {
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(21,23,21,0.75) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.7rem !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

/* Wishlist heart corner */
.cabin-card__wish {
  position: absolute;
  top: 1rem; left: 1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  transition: transform .2s var(--ease), background .2s var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  z-index: 3;
}
.cabin-card__wish:hover { transform: scale(1.08); }
.cabin-card__wish .gi { width: 18px; height: 18px; color: var(--ink); }
.cabin-card__wish[aria-pressed="true"] { background: #fff; }
.cabin-card__wish[aria-pressed="true"] .gi { color: var(--clay); }
.cabin-card__wish .gi--fill { display: none; }
.cabin-card__wish[aria-pressed="true"] .gi--out { display: none; }
.cabin-card__wish[aria-pressed="true"] .gi--fill { display: inline-block; }

/* Star rating on image */
.cabin-card__rating {
  top: auto !important;
  bottom: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  padding: 0.3rem 0.65rem !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-pill) !important;
}
.cabin-card__rating svg { width: 14px; height: 14px; fill: var(--gold); }
.cabin-card__reviews {
  position: absolute;
  bottom: 1rem;
  left: 5rem;
  background: transparent !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  font-size: 0.78rem !important;
  font-family: var(--font-sans) !important;
}

/* Card content */
.cabin-card__content {
  padding: 1.1rem 0 0 !important;
}
.cabin-card__known {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--forest);
  display: block;
  margin-bottom: 0.4rem;
}
.cabin-card__title {
  font-size: 1.4rem !important;
  margin-bottom: 0.35rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.cabin-card__title a { color: var(--ink) !important; }

.cabin-card__meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  color: var(--ink-3);
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
}
.cabin-card__meta-row .dot { width: 3px; height: 3px; background: var(--ink-3); border-radius: 50%; opacity: 0.5; display: inline-block; }

.cabin-card__price {
  display: flex !important;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: flex-start !important;
  margin: 0.4rem 0 0 !important;
  font-family: var(--font-sans) !important;
}
.cabin-card__price-from { color: var(--ink-3) !important; font-size: 0.85rem !important; }
.cabin-card__price-amount { color: var(--ink) !important; font-size: 1.3rem !important; font-weight: 600 !important; font-family: var(--font-sans) !important; }
.cabin-card__price-night { color: var(--ink-3) !important; font-size: 0.85rem !important; }
.cabin-card__per-person {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  margin-left: 0.5rem;
}
.cabin-card__per-person strong { color: var(--forest-deep); font-weight: 600; }

.cabin-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem !important;
}
.cabin-card__amenity {
  background: var(--paper-2) !important;
  color: var(--ink-2) !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.78rem !important;
  font-family: var(--font-sans) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid transparent !important;
}
.cabin-card__amenity .gi { width: 14px; height: 14px; color: var(--forest); }

.cabin-card__footer {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--line-soft);
}
.cabin-card__link {
  background: var(--forest) !important;
  color: #fff !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: var(--radius-s) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  text-decoration: none !important;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cabin-card__link:hover {
  background: var(--forest-deep) !important;
  color: #fff !important;
}
.cabin-card__link .gi {
  color: currentColor;
}

/* Feature ribbon: first cabin gets a special tag */
.cabin-card--feature::before {
  content: 'Editor\'s Pick';
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--forest-deep);
  color: #fff;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  z-index: 2;
}

/* Section toolbar (filter + compare + map toggle) */
.cabins-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.cabins-toolbar__filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.cabins-toolbar__filter {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.cabins-toolbar__filter:hover { border-color: var(--ink); color: var(--ink); }
.cabins-toolbar__filter[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cabins-toolbar__actions { display: flex; gap: 0.5rem; }

/* ---------- 9. INTERACTIVE MAP (#5) ---------- */
.section-map { padding: 4rem 0 !important; background: var(--paper-2); }
.map-wrap {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  min-height: 520px;
}
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }
.map-wrap__list {
  padding: 1.25rem;
  overflow-y: auto;
  max-height: 520px;
}
.map-wrap__list h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.map-wrap__list p { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 1rem; }
.map-cabin {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background .2s var(--ease);
  border: 1px solid transparent;
  align-items: center;
}
.map-cabin:hover, .map-cabin.is-active {
  background: var(--paper-2);
  border-color: var(--line-soft);
}
.map-cabin img {
  width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-s);
}
.map-cabin__info { min-width: 0; }
.map-cabin__name { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink); }
.map-cabin__meta { font-size: 0.8rem; color: var(--ink-3); }
.map-cabin__price { font-size: 0.85rem; font-weight: 600; color: var(--forest-deep); }
#cabins-map {
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: #e8e2d4;
}
.leaflet-container a { color: var(--forest-deep) !important; }
.gbc-pin {
  width: 36px; height: 36px;
  background: #fff;
  border: 2px solid var(--forest-deep);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.gbc-pin__inner {
  transform: rotate(45deg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--forest-deep);
}
.gbc-pin.is-active { background: var(--forest-deep); border-color: var(--gold); }
.gbc-pin.is-active .gbc-pin__inner { color: #fff; }

/* ---------- 10. MOSAIC GALLERY (#6) ---------- */
.cabin-gallery.cabin-gallery--mosaic {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: 2rem;
}
.mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  aspect-ratio: 16/9;
  max-height: 540px;
}
.mosaic__item, .mosaic__tile { overflow: hidden; cursor: pointer; position: relative; display: block; text-decoration: none; border-radius: var(--radius-m, 12px); }
.mosaic__item img, .mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic__item:hover img, .mosaic__tile:hover img { transform: scale(1.03); }
.mosaic__item--hero, .mosaic__tile--hero { grid-column: 1; grid-row: 1 / span 2; }
.mosaic__item:nth-child(2), .mosaic__tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.mosaic__item:nth-child(3), .mosaic__tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.mosaic__item:nth-child(4), .mosaic__tile:nth-child(4) { grid-column: 2; grid-row: 2; }
.mosaic__item:nth-child(5), .mosaic__tile:nth-child(5) { grid-column: 3; grid-row: 2; }
.mosaic__tile--more { position: relative; }
.mosaic__more {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  pointer-events: none;
}
.mosaic__tile--more:hover .mosaic__more { background: var(--ink); color: #fff; }
.mosaic__showall {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 2;
}
.mosaic__showall:hover { background: var(--ink); color: #fff; }

@media (max-width: 720px) {
  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
    max-height: none;
  }
  .mosaic__item, .mosaic__tile { aspect-ratio: 4/3; }
  .mosaic__item:not(.mosaic__item--hero):nth-child(n+4),
  .mosaic__tile:not(.mosaic__tile--hero):not(.mosaic__tile--more):nth-child(n+4) { display: none; }
  .mosaic__item--hero, .mosaic__tile--hero,
  .mosaic__item:nth-child(2), .mosaic__tile:nth-child(2),
  .mosaic__item:nth-child(3), .mosaic__tile:nth-child(3),
  .mosaic__tile--more {
    grid-column: 1 !important; grid-row: auto !important;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(21,23,21,0.96);
  z-index: 3000;
  display: none;
  flex-direction: column;
  padding: 1rem 0;
}
.lightbox.is-open { display: flex; }
.lightbox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  color: #fff;
  font-family: var(--font-sans);
}
.lightbox__counter { font-variant-numeric: tabular-nums; font-size: 0.9rem; opacity: 0.8; }
.lightbox__close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }
.lightbox__main {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  padding: 1rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-s);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__filmstrip {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.lightbox__filmstrip img {
  width: 90px; height: 60px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity .2s;
  flex: 0 0 auto;
}
.lightbox__filmstrip img.is-active { opacity: 1; outline: 2px solid var(--gold); }

/* ---------- 11. STICKY BOOKING (#7) ---------- */
.cabin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: flex-start;
  margin: 2rem 0;
}
@media (max-width: 980px) { .cabin-layout { grid-template-columns: 1fr; } }

.booking-dock {
  position: sticky;
  top: 110px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.booking-dock__price {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.booking-dock__price small { font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }
.booking-dock__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.booking-dock__stars .gi { color: var(--gold); width: 14px; height: 14px; }
.booking-dock__form { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.booking-dock__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.booking-dock__dates label {
  padding: 0.65rem 0.85rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: block;
}
.booking-dock__dates label + label { border-left: 1px solid var(--line); }
.booking-dock__dates input {
  display: block;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  width: 100%;
  padding: 0.1rem 0 0;
}
.booking-dock__guests {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.65rem 0.85rem;
}
.booking-dock__guests label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-2);
  display: block;
}
.booking-dock__guests select {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  padding: 0.1rem 0 0;
}
.booking-dock__cta {
  width: 100%;
  background: var(--forest-deep);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 0.5rem;
}
.booking-dock__cta:hover { background: var(--forest); }
.booking-dock__summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.booking-dock__summary__row {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}
.booking-dock__summary__row--total {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--ink);
}
.booking-dock__save {
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booking-dock__save strong { color: var(--forest-deep); }
.booking-dock__ownerchip {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.booking-dock__ownerchip__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-moss), var(--forest-deep));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Mobile booking bar */
.booking-bar-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 0.85rem 1rem;
  z-index: 900;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.booking-bar-mobile__price strong { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.booking-bar-mobile__price small { color: var(--ink-3); display: block; font-size: 0.78rem; }
.booking-bar-mobile__cta {
  background: var(--forest-deep);
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-family: var(--font-sans);
}
@media (max-width: 980px) {
  .booking-bar-mobile { display: flex; }
  body.has-booking-bar { padding-bottom: 70px; }
}

/* ---------- 12. CALENDAR + FLEX DATES (#8) ---------- */
.gbc-calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  padding: 1rem;
}
.gbc-calendar__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 720px) { .gbc-calendar__months { grid-template-columns: 1fr; } }
.gbc-calendar__month h4 {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.gbc-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--font-sans);
}
.gbc-calendar__dow {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0;
}
.gbc-calendar__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease);
  text-align: center;
  line-height: 1.1;
}
.gbc-calendar__day:hover { background: var(--paper-2); }
.gbc-calendar__day--blocked {
  color: var(--ink-3);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.45;
}
.gbc-calendar__day--blocked:hover { background: transparent; }
.gbc-calendar__day--today { outline: 1px dashed var(--ink-3); }
.gbc-calendar__day--selected,
.gbc-calendar__day--in-range {
  background: var(--forest-deep);
  color: #fff;
}
.gbc-calendar__day--in-range { background: color-mix(in srgb, var(--forest-deep) 18%, transparent); color: var(--ink); border-radius: 0; }
.gbc-calendar__day__price {
  font-size: 0.6rem;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 1px;
}
.gbc-calendar__day--selected .gbc-calendar__day__price { color: rgba(255,255,255,.8); }

.gbc-flex {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.gbc-flex__option {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.82rem;
}
.gbc-flex__option[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ---------- 13. TESTIMONIALS redesigned (#9) ---------- */
.testimonials { background: var(--paper) !important; padding: 5rem 0 !important; }
.reviews-overview {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 760px) { .reviews-overview { grid-template-columns: 1fr; gap: 1.5rem; } }
.reviews-overview__score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.reviews-overview__score__num {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
}
.reviews-overview__score__stars svg { color: var(--gold); width: 1.1rem; height: 1.1rem; fill: var(--gold); }
.reviews-overview__score__count {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.reviews-overview__bars { display: grid; gap: 0.45rem; }
.reviews-overview__bar {
  display: grid;
  grid-template-columns: 40px 1fr 48px;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.reviews-overview__bar__track {
  height: 6px;
  background: var(--paper-2);
  border-radius: 3px;
  overflow: hidden;
}
.reviews-overview__bar__fill {
  height: 100%;
  background: var(--forest-deep);
  border-radius: 3px;
}
.reviews-overview__bar__count { text-align: right; font-variant-numeric: tabular-nums; }

.testimonials-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 900px) { .testimonials-slider { grid-template-columns: 1fr !important; } }

.testimonial-card {
  background: #fff !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-m) !important;
  padding: 1.5rem !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.testimonial-card__quote { display: none !important; }
.testimonial-card__stars svg { color: var(--gold) !important; fill: var(--gold) !important; width: 14px !important; height: 14px !important; }
.testimonial-card__text {
  font-family: var(--font-display) !important;
  font-style: italic;
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.testimonial-card__photo {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius-s);
  margin-bottom: 0.25rem;
}
.testimonial-card__author {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  margin-top: auto !important;
}
.testimonial-card__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--forest-moss), var(--forest-deep)) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
.testimonial-card__name { font-weight: 600 !important; color: var(--ink) !important; font-size: 0.92rem !important; font-family: var(--font-sans) !important; }
.testimonial-card__cabin { color: var(--ink-3) !important; font-size: 0.8rem !important; font-family: var(--font-sans) !important; }
.testimonial-card__source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---------- 14. WHY-DIRECT → Price Comparator (#12) ---------- */
.why-direct {
  background: var(--ink) !important;
  color: #fff !important;
  padding: 5rem 0 !important;
  position: relative;
}
.why-direct .section-header__title,
.why-direct h2,
.why-direct h3,
.why-direct .section-header__badge { color: #fff !important; }
.why-direct .section-header__desc { color: rgba(255,255,255,0.75) !important; }

.price-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 760px) { .price-compare { grid-template-columns: 1fr; } }
.price-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  position: relative;
}
.price-card--winner {
  background: #fff;
  color: var(--ink);
  border: none;
  box-shadow: 0 20px 60px rgba(200,155,84,.25);
}
.price-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
  margin-bottom: 1rem;
}
.price-card__title .badge {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--forest);
}
.price-card__row {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.9rem;
}
.price-card--outer .price-card__row { border-bottom-color: rgba(255,255,255,0.08); }
.price-card__row:last-of-type { border-bottom: none; }
.price-card__row--total {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid currentColor;
  border-bottom: none;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price-card__savings {
  position: absolute;
  top: -14px; right: 16px;
  background: var(--gold);
  color: var(--ink);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-sans);
}
.price-compare__slider {
  margin: 1rem 0 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.price-compare__slider input[type=range] {
  flex: 1;
  accent-color: var(--gold);
}

/* ---------- 15. AMENITIES panel (still uses section) ---------- */
.amenities-section { background: var(--paper); }
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
@media (max-width: 900px) { .amenities-grid { grid-template-columns: repeat(2,1fr); } }
.amenity-card {
  background: #fff !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-m) !important;
  padding: 1.1rem !important;
  box-shadow: none !important;
  transition: border-color .2s var(--ease);
}
.amenity-card:hover { border-color: var(--ink) !important; transform: none !important; }
.amenity-card__icon {
  width: 40px !important;
  height: 40px !important;
  background: var(--paper-2) !important;
  border-radius: var(--radius-s) !important;
  margin-bottom: 0.6rem !important;
  display: grid !important;
  place-items: center;
  color: var(--forest-deep) !important;
}
.amenity-card__icon svg,
.amenity-card__icon .gi { color: var(--forest-deep); }
.amenity-card__title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  margin-bottom: 0.25rem !important;
  font-weight: 500 !important;
}
.amenity-card__desc {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}

/* ---------- 16. BENEFIT CARD (legacy overrides) ---------- */
.benefit-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding: 1.5rem !important;
  border-radius: var(--radius-m) !important;
}
.benefit-card__icon {
  color: var(--gold) !important;
  background: transparent !important;
}
.benefit-card__title { color: #fff !important; font-family: var(--font-display) !important; font-weight: 500 !important; }
.benefit-card__desc { color: rgba(255,255,255,0.7) !important; }

/* ---------- 17. GUIDE / EDITORIAL SECTION ---------- */
.guide-card { border-radius: var(--radius-m) !important; overflow: hidden; }
.guide-card__title { font-family: var(--font-display) !important; font-weight: 500 !important; }

/* Editorial modules (#14) */
.editorial {
  padding: 5rem 0;
  background: var(--paper);
}
.editorial-owner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 820px) { .editorial-owner { grid-template-columns: 1fr; } }
.editorial-owner__photo {
  aspect-ratio: 4/5;
  background: var(--paper-2);
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
}
.editorial-owner__photo img { width: 100%; height: 100%; object-fit: cover; }
.editorial-owner__photo::after {
  content: 'Family-owned since 2019';
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  color: var(--forest-deep);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.editorial-owner__body h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.editorial-owner__body p {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.editorial-owner__body p em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--forest-deep);
}
.editorial-owner__sig {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--forest-deep);
  margin-top: 0.75rem;
  display: block;
}
.editorial-owner__meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.editorial-owner__meta .stat {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1;
  display: block;
}

/* ---------- 18. WISHLIST drawer ---------- */
.wish-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(420px, 95vw);
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.wish-drawer.is-open { transform: translateX(0); }
.wish-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.wish-drawer__header h3 { font-size: 1.15rem; margin: 0; }
.wish-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.wish-drawer__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-style: normal;
}
.wish-drawer__empty .gi { width: 48px; height: 48px; color: var(--clay); opacity: 0.5; margin-bottom: 1rem; }
.wish-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.wish-item img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--radius-s); }
.wish-item__name { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; }
.wish-item__price { color: var(--ink-3); font-size: 0.8rem; }
.wish-item__remove {
  background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 0.25rem;
}
.wish-item__remove:hover { color: var(--clay); }
.wish-drawer__footer {
  border-top: 1px solid var(--line-soft);
  padding: 1rem 1.25rem;
}

.wish-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1999;
  pointer-events: none;
  transition: background .3s var(--ease);
}
.wish-backdrop.is-open { background: rgba(21,23,21,.4); pointer-events: auto; }

/* ---------- 19. COMPARE modal ---------- */
.compare-modal {
  position: fixed;
  inset: 0;
  background: rgba(21,23,21,.6);
  z-index: 2500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.compare-modal.is-open { display: flex; }
.compare-modal__inner {
  background: #fff;
  border-radius: var(--radius-l);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.compare-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.compare-modal__header h3 { margin: 0; }
.compare-modal__body { overflow: auto; padding: 1rem 0.5rem; }
.compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.compare-table th, .compare-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.compare-table thead th {
  position: sticky; top: 0;
  background: var(--paper-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  z-index: 1;
}
.compare-table img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); display: block; margin-bottom: 0.4rem; }
.compare-table .yes { color: var(--forest-deep); }
.compare-table .yes::before { content: '✓ '; }
.compare-table .no { color: var(--ink-3); }
.compare-table .no::before { content: '- '; }

/* ---------- 20. MICRO-INTERACTIONS ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Stagger-reveal cascade for grids */
.reveal-cascade > [data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); }

/* Dynamic urgency chip */
.urgency-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: color-mix(in srgb, var(--clay) 12%, transparent);
  color: var(--clay);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
}
.urgency-chip .dot {
  width: 7px; height: 7px; background: var(--clay); border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 0%, #fff 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  color: transparent !important;
  border-radius: var(--radius-xs);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Owner-response trust chip */
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-3);
  padding: 0.3rem 0.7rem;
  background: var(--paper-2);
  border-radius: var(--radius-pill);
}
.owner-chip .gi { color: var(--forest); width: 14px; height: 14px; }

/* ---------- 21. FOOTER tweaks ---------- */
.footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.7) !important;
}
.footer__title { color: #fff !important; font-family: var(--font-display) !important; font-weight: 500 !important; }
.footer__link:hover { color: var(--gold) !important; }
.footer__social a { border: 1px solid rgba(255,255,255,0.15) !important; background: transparent !important; color: #fff !important; }
.footer__social a:hover { border-color: var(--gold) !important; color: var(--gold) !important; }

/* Verified footer lockup */
.footer__verified {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
}
.footer__verified .gi { color: rgba(255,255,255,0.4); }

/* ---------- 22. SHORT-SHEET defaults for inherited sections ---------- */
/* Replace hero__title--modern's broken clamp */
.hero__title--modern {
  font-size: clamp(2.4rem, 6vw, 4.5rem) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  white-space: normal !important;
  color: var(--ink) !important;
}

/* =====================================================
   23. BOUNCE-RATE FIX COMPONENTS (Apr 2026 follow-up)
   ===================================================== */

/* ---- Hero secondary CTA (no-dates-yet visitors) ---- */
.hero__alt-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-3);
  font-size: 0.95rem;
  margin: -0.25rem 0 1.5rem;
}
.hero__alt-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--forest-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.hero__alt-cta-link:hover { color: var(--forest); text-decoration-thickness: 2px; }

/* ---- Owner signature block in hero (Plum Guide pattern) ---- */
.hero__owner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  max-width: 46ch;
}
.hero__owner-img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line);
}
.hero__owner-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.hero__owner-text strong { color: var(--ink); font-weight: 600; }
.hero__owner-sig {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--ink-3);
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 500;
}

@media (max-width: 720px) {
  .hero__owner { margin-top: 1.25rem; padding-top: 1rem; }
  .hero__owner-img { width: 44px; height: 44px; }
  .hero__owner-text { font-size: 0.85rem; }
}

/* ---- Cabin card: next-available chip + instant-book badge ---- */
.cabin-card__avail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--forest);
  background: rgba(46, 93, 52, 0.09);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-weight: 500;
  margin-top: 0.5rem;
}
.cabin-card__avail .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--forest);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
/* Bottom-right of image (top-left is wish, top-right is sleeps-badge, bottom-left is rating) */
.cabin-card__instant {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(21, 23, 21, 0.25);
}
.cabin-card__instant .gi { width: 0.95em; height: 0.95em; color: var(--sun); }

/* ---- Sticky search bar on scroll ---- */
.sticky-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: rgba(247, 244, 238, 0.96);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: 0.75rem 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
  pointer-events: none;
}
.sticky-search.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-search__form {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  box-shadow: var(--shadow-card);
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.sticky-search__field {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.35rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.sticky-search__field--where { flex: 0 0 auto; }
.sticky-search__field label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
}
.sticky-search__field span,
.sticky-search__field input,
.sticky-search__field select {
  font-size: 0.9rem;
  color: var(--ink);
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sticky-search__field input::placeholder { color: var(--ink-3); }
.sticky-search__divider {
  width: 1px;
  height: 28px;
  background: var(--line-soft);
  flex: 0 0 auto;
}
.sticky-search__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--forest-deep);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.sticky-search__btn:hover { background: var(--forest); transform: translateY(-1px); }
.sticky-search__btn .gi { color: #fff; }
@media (max-width: 720px) {
  .sticky-search__form { flex-wrap: wrap; padding: 0.35rem; border-radius: 14px; }
  .sticky-search__field { padding: 0.35rem 0.6rem; }
  .sticky-search__divider { display: none; }
  .sticky-search__btn { width: 100%; justify-content: center; margin-top: 0.35rem; }
  .sticky-search__btn span { display: inline; }
}

/* ---- Exit-intent modal ---- */
.gbc-exit {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 23, 21, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
  padding: 1rem;
}
.gbc-exit.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0s 0s;
}
.gbc-exit[aria-hidden="true"] { pointer-events: none; }
.gbc-exit.is-open[aria-hidden] { pointer-events: auto; }
.gbc-exit__card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-l);
  max-width: 860px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-float);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.gbc-exit.is-open .gbc-exit__card { transform: translateY(0) scale(1); }
.gbc-exit__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--ink);
  transition: background 0.2s var(--ease);
}
.gbc-exit__close:hover { background: #fff; }
.gbc-exit__media {
  overflow: hidden;
  background: var(--paper-2);
}
.gbc-exit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gbc-exit__content {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.gbc-exit__kicker {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.gbc-exit__content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.gbc-exit__content p {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.gbc-exit__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.gbc-exit__form input[type=email] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.gbc-exit__form input[type=email]:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: transparent;
}
.gbc-exit__form .btn {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
  border-radius: var(--radius-m);
}
.gbc-exit__fine {
  font-size: 0.76rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
}
.gbc-exit__success {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--forest-deep);
  padding: 0.5rem 0;
}
@media (max-width: 720px) {
  .gbc-exit__card { grid-template-columns: 1fr; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .gbc-exit__media { height: 140px; }
}

/* ---- Editorial collections (P2-15) ---- */
.collections {
  padding: clamp(3rem, 6vh, 5rem) 0;
  background: var(--paper);
}
.collections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.collection-card {
  position: relative;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4/5;
  color: #fff;
  text-decoration: none;
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  isolation: isolate;
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  color: #fff;
}
.collection-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease);
}
.collection-card:hover img { transform: scale(1.05); }
.collection-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 23, 21, 0.82) 0%, rgba(21, 23, 21, 0.1) 55%, rgba(21, 23, 21, 0) 100%);
  z-index: 1;
}
.collection-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.35rem 1.25rem;
  z-index: 2;
}
.collection-card__kicker {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.4rem;
  display: block;
}
.collection-card__title {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.35rem;
  color: #fff;
  font-weight: 700;
}
.collection-card__meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* =============================================================================
   APRIL 2026 AUDIT FIX PASS — 25+ bugs from comprehensive UI review
   ============================================================================= */

/* ---------- Fix 1-5: Header / Nav visibility ----------
   The hero background is now cream (not a dark photo), so white-on-transparent
   nav text at page top was invisible. Kill the transparent variant entirely:
   treat the header as always having a paper background so nav, logo, hamburger
   bars, and CTAs are always legible. */
.header,
.header--transparent,
.header--transparent:not(.header--scrolled) {
  background: rgba(250, 247, 240, 0.94) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.header--transparent:not(.header--scrolled) .nav__link,
.header--transparent:not(.header--scrolled) .logo,
.header--transparent:not(.header--scrolled) .nav__toggle span {
  color: var(--ink) !important;
}
.header--transparent:not(.header--scrolled) .nav__toggle span {
  background: var(--ink) !important;
}
.header--transparent:not(.header--scrolled) .nav__wishlist {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: rgba(255,255,255,0.65) !important;
}
.header--transparent:not(.header--scrolled) .nav__wishlist .gi { color: var(--clay) !important; }
.header--transparent:not(.header--scrolled) .btn--primary {
  background: var(--forest-deep) !important;
  color: #fff !important;
}

/* ---------- Fix 6-8: Hero polish ----------
   Trim the photography-credit caption (visual noise above the headline) */
.hero__mosaic .mi-caption { display: none !important; }

/* Hero search pill: see index.html critical CSS */

/* Sticky search: stop it from eating the hero H1 on scroll.
   Also normalize label casing so it matches the hero widget. */
.sticky-search {
  box-shadow: 0 2px 12px rgba(14,18,15,0.08);
}
html { scroll-padding-top: 96px; }
.sticky-search__field label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 0.78rem !important;
}
.sticky-search__btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }

/* Mid-page booking search widget: keep dates + guests on one row */
#booking .search-widget,
#booking-bar .search-widget,
.search-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
#booking .search-widget__field,
.search-widget__field {
  flex: 1 1 180px;
  min-width: 160px;
}
#booking .search-widget__field--btn { flex: 0 0 auto; }
#booking .search-widget__btn,
.search-widget__btn {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---------- Fix 16: Exit-intent modal ----------
   Too aggressive; fired on downward scroll. Tighten trigger + hide after close. */
.gbc-exit.is-dismissed { display: none !important; }

/* ---------- Fix 17-18: Cabin card overflow ----------
   At 2-col grid widths, meta-row + amenity pills were clipping because grid
   items didn't have min-width:0 and nested flex rows weren't wrapping hard. */
.cabins-grid > .cabin-card { min-width: 0 !important; }
.cabin-card__content { min-width: 0 !important; max-width: 100%; }
.cabin-card__meta-row,
.cabin-card__price,
.cabin-card__amenities,
.cabin-card__footer { min-width: 0; flex-wrap: wrap !important; }
.cabin-card__meta-row > span { white-space: normal; }
.cabin-card__amenity { white-space: nowrap; }
.cabin-card__footer {
  row-gap: 0.6rem;
}
.cabin-card__footer .cabin-card__link {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---------- Fix 21: Collection card titles (force white over photo) ----------
   The global heading color rule previously painted these near-black on dark
   photos even with the scrim. Force white and drop a small text-shadow. */
.collection-card__title,
.collection-card h3 {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.collection-card__kicker {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* Strengthen the gradient scrim so small photos don't wash out the text. */
.collection-card::after {
  background: linear-gradient(to top, rgba(14,18,15,0.88) 0%, rgba(14,18,15,0.55) 35%, rgba(14,18,15,0.05) 80%) !important;
}

/* ---------- Fix 22-23: Six-cabins-one-ridge layout ----------
   Ensure the sidebar/map split stays side-by-side at desktop widths so the
   header doesn't leave a dead column of whitespace. */
@media (min-width: 901px) {
  .map-wrap { grid-template-columns: 380px 1fr !important; }
  .section-map .section-header { max-width: none !important; }
}
.map-wrap__list { background: #fff; border-right: 1px solid var(--line-soft); }
@media (max-width: 900px) {
  .map-wrap__list { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

/* ---------- Fix 24-25: Price comparator contrast ----------
   The "Booking direct" (.price-card--winner) card is on a light/paper
   background; the plain .price-card is on a dark background. A shared
   "Total" row rule was painting the label white on both, so the direct side
   went invisible. Force correct colors per variant. */
.price-card { min-width: 0; }
.price-card--winner .price-card__row--total,
.price-card--winner .price-card__row--total * {
  color: var(--ink) !important;
}
.price-compare .price-card:not(.price-card--winner) .price-card__row--total,
.price-compare .price-card:not(.price-card--winner) .price-card__row--total * {
  color: #fff !important;
}

/* ---------- Fix 26: Reviews section column widths ---------- */
.reviews-summary,
.review-aggregate {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(260px, 1fr) minmax(320px, 1.4fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 820px) {
  .reviews-summary,
  .review-aggregate { grid-template-columns: 1fr; }
}

/* ---------- Fix 28-30: Dark-green "Explore" / CTA block text contrast ----------
   Inline styles set color:white on h2/h3 but our global heading rule was
   overriding. These rules win by specificity. */
section[style*="forest-green-dark"] h2,
section[style*="forest-green-dark"] h3,
section[style*="1e4024"] h2,
section[style*="1e4024"] h3 {
  color: #fff !important;
}
section[style*="forest-green-dark"] h3,
section[style*="1e4024"] h3 {
  color: var(--gold) !important;
}
.cta-banner,
.cta-banner__content,
.cta-banner h1,
.cta-banner h2,
.cta-banner__title,
.cta-banner__desc { color: #fff !important; }
.cta-banner__title { color: #fff !important; }
.cta-banner__desc { color: rgba(255,255,255,0.88) !important; }
.cta-banner .btn--white {
  background: #fff !important;
  color: var(--forest-deep) !important;
}

/* ---------- Fix 27: Remove duplicate Explore section ---------- */
section.section.explore-duplicate-1,
section.section.explore-duplicate-2 { display: none !important; }

/* ---------- Fix 34-35: Newsletter contrast ---------- */
.newsletter,
.newsletter__container {
  color: #fff;
}
.newsletter__title,
.newsletter h3,
.newsletter__desc,
.newsletter__desc a { color: #fff !important; }
.newsletter__desc { color: rgba(255,255,255,0.88) !important; }
.newsletter__btn {
  background: #fff !important;
  color: var(--forest-deep) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.newsletter__btn:hover {
  background: var(--paper-2) !important;
  color: var(--forest-deep) !important;
}
.newsletter__input {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
.newsletter__input::placeholder { color: rgba(255,255,255,0.6) !important; }

/* ---------- Fix 32-33: Footer brand lockup ----------
   Logo <picture> and wordmark text overlapped because the <img> was 200px
   wide next to a 350px-max-width container. Shrink the logo, keep the mark
   and wordmark on one row with tight gap, allow wordmark to wrap naturally. */
.footer__logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.footer__logo-img {
  max-width: 56px !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
.footer__logo picture { display: inline-flex; flex: 0 0 auto; }
.footer__logo span { display: inline !important; }

/* ---------- Fix 36: Unstyled "Manage cookies" leak at page bottom ----------
   The cookie-consent.css file is not bundled into app.min.css, so the
   injected "Manage cookies" button rendered as raw text at the bottom. Give
   it a minimal, quiet pill style so it stays out of the way. */
.cookie-manage-link,
body > button[aria-label*="cookie"],
body > button[aria-label*="Cookie"] {
  position: fixed !important;
  bottom: 12px !important;
  left: 12px !important;
  z-index: 90 !important;
  background: rgba(23, 51, 33, 0.9) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  cursor: pointer !important;
  opacity: 0.75 !important;
  transition: opacity .2s ease, background .2s ease !important;
}
.cookie-manage-link:hover,
.cookie-manage-link:focus-visible {
  opacity: 1 !important;
  background: rgba(23, 51, 33, 1) !important;
}
@media (max-width: 480px) {
  .cookie-manage-link { bottom: 8px !important; left: 8px !important; padding: 5px 10px !important; font-size: 11px !important; }
}

/* ---------- Fix 38: Concierge chat "?" helper badge ----------
   Orange "?" default badge looked unstyled. Hide it; the chat bubble itself
   is enough. */
.chat-toggle__badge,
.chatbot-toggle::after,
.chatbot-toggle .chatbot-badge,
.chatbot-toggle [data-help-badge],
#chatbot-toggle::after { display: none !important; }

/* =============================================================================
   ROUND 2 POLISH — Apr 21 2026
   Fixes discovered in second audit: bulky H1, left-heavy layout, mismatched
   section-header indents, dead right-column space above the fold, middle-
   breakpoint grid overflows, residual date clipping, reviews column cramping.
   ============================================================================= */

/* --- R2.1: Container sizing — never let content touch the viewport edge ---
   At ~1000px viewport the container was 99% of viewport with only 24px of
   padding — content felt slammed against the left edge. Give it real gutters
   at midrange widths and cap the max-width at 1200 so we don't spread too
   thin at very wide screens. */
.container {
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  max-width: min(1200px, 100%) !important;
}

/* --- R2.2: Editorial hero typography (matches critical CSS in index.html) -- */
.hero__title {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.032em !important;
  font-weight: 700 !important;
  max-width: 16ch !important;
  margin-bottom: 1.1rem !important;
}
.hero__title em { font-weight: 700; color: var(--forest-deep); }
.hero__subtitle {
  font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
  line-height: 1.55 !important;
  max-width: 46ch !important;
  margin-bottom: 1.75rem !important;
  color: var(--ink-2) !important;
}
.hero__kicker {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* --- R2.3: Above-the-fold density - trust row is now one clean line ------- */
.hero__trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 0.75rem !important;
  font-size: 0.88rem !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}
.hero__trust-rating {
  color: var(--gold) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
}
.hero__trust-sep { color: rgba(14,18,15,0.3) !important; }
.urgency-chip[data-urgency] { display: none !important; }
.hero__owner { display: none !important; }

/* --- R2.4: Hero two-column above 900px, one-column below -------------------
   Bring the mosaic in beside the text at mid-widths (was hidden/stacked). */
@media (min-width: 900px) {
  .hero__content {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: 3rem !important;
    align-items: start !important;
  }
  .hero__mosaic {
    display: grid !important;
    order: 0 !important;
    max-height: 540px !important;
    align-self: stretch !important;
  }
}
@media (max-width: 899px) {
  .hero__content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .hero__mosaic {
    order: 2 !important;
    max-height: 360px !important;
    margin-top: 1rem !important;
  }
  .hero__left { order: 1 !important; }
}
.hero {
  padding: clamp(5rem, 9vh, 7rem) 0 clamp(2.5rem, 5vh, 4rem) !important;
}

/* R2.5 removed: hero search pill is now fully styled in index.html critical
   CSS as the single source of truth. Fewer overrides, no !important wars. */

/* --- R2.6: Section-header alignment — kill the indent mismatch -------------
   `.section-header__desc { margin: 0 auto; }` from styles.css was centering
   the description inside a text-align:left block, producing a 40-60px
   indent vs. the kicker/h2. Force every section-header child to the same
   left edge and cap measure with max-width only. */
.section-header,
.section-header__main { text-align: left !important; }
.section-header__badge,
.section-header__title,
.section-header__desc,
.section-header p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.section-header__title {
  font-size: clamp(1.65rem, 2.6vw, 2.35rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  max-width: 24ch !important;
  margin-bottom: 0.65rem !important;
}
.section-header__desc {
  max-width: 62ch !important;
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.section-header__badge {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 0.5rem !important;
}
.section-header { margin: 0 0 2rem !important; }

/* --- R2.7: Section padding & container breathing ---------------------------
   Sections ran too tall; trim to editorial spacing. */
main > .section,
.section {
  padding-top: clamp(3rem, 6vh, 4.5rem) !important;
  padding-bottom: clamp(3rem, 6vh, 4.5rem) !important;
}

/* R2.8 removed: handled by critical CSS in index.html */

/* --- R2.9: Map section — guaranteed side-by-side at desktop widths ---------
   The map-wrap was still stacking at 997px because something (likely the
   original styles.css min-height or grid cascade) kept intercepting. Make
   the rule unambiguous. */
@media (min-width: 860px) {
  .map-wrap {
    display: grid !important;
    grid-template-columns: minmax(280px, 360px) 1fr !important;
    gap: 0 !important;
    min-height: 520px !important;
  }
  .map-wrap__list {
    max-height: 520px !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 859px) {
  .map-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* --- R2.10: Travel-guide grid — 2 cols at midrange so cards don't clip off
   the right edge of the viewport. */
.guide-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1.25rem !important;
  max-width: 100% !important;
}
@media (min-width: 1200px) {
  .guide-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* --- R2.11: Reviews — balance the three columns ----------------------------
   The middle narrative column was rendering "Aggregated / across / Airbnb /
   VRBO / ..." one word per line. Let it breathe. */
.reviews-summary,
.review-aggregate {
  display: grid !important;
  grid-template-columns: minmax(140px, 180px) minmax(240px, 1fr) minmax(280px, 1.3fr) !important;
  gap: 1.75rem !important;
  align-items: center !important;
}
@media (max-width: 820px) {
  .reviews-summary,
  .review-aggregate { grid-template-columns: 1fr !important; gap: 1rem !important; }
}
.reviews-summary__number,
.review-aggregate__number { font-size: clamp(2.5rem, 4vw, 3.5rem) !important; line-height: 1 !important; }
.reviews-summary__text,
.review-aggregate__text,
.review-aggregate p {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  color: var(--ink-2) !important;
}

/* --- R2.12: Amenities cards — tighten + prevent description clipping -------
   "300 Mbps Wi-Fi" description was being clipped by the chat bubble overlap.
   Give cards room and allow text to wrap fully. */
.amenities-grid,
.standard-grid {
  gap: 1rem !important;
}
.amenity-card,
.standard-card {
  padding: 1.1rem !important;
  min-width: 0;
}
.amenity-card h4,
.standard-card h4 {
  font-size: 1.05rem !important;
  margin-bottom: 0.25rem !important;
}
.amenity-card p,
.standard-card p {
  font-size: 0.93rem !important;
  line-height: 1.45 !important;
  color: var(--ink-2) !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* --- R2.13: Cabin card density — tighter, less bulky ---------------------- */
.cabin-card__content { padding: 1rem 1.1rem 1.1rem !important; }
.cabin-card__title {
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
}
.cabin-card__known {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}
.cabin-card__meta-row {
  font-size: 0.88rem !important;
  gap: 0.4rem !important;
  margin-bottom: 0.6rem !important;
}
.cabin-card__price-amount { font-size: 1.45rem !important; }
.cabin-card__price { margin-bottom: 0.75rem !important; }
.cabin-card__amenities { gap: 0.35rem !important; margin-bottom: 0.85rem !important; }

/* --- R2.14: Cabin-grid responsiveness --------------------------------------
   At ~1000px the 2-col grid made cards too wide. Allow 2 at midrange, 3 at
   wider desktops. */
.cabins-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1.5rem !important;
}
@media (min-width: 1200px) {
  .cabins-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- R2.15: Collection-tiles (3 theme cards) even height + readable --- */
.collections-grid,
.collection-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
}
.collection-card {
  aspect-ratio: 4 / 5 !important;
  max-height: 420px !important;
}

/* --- R2.16: Header — show nav on desktop ≥1200, clean mobile otherwise ---
   The hamburger-only header at wide viewports felt broken. Reveal nav
   links once there's room, keep the hamburger for <1200. */
@media (min-width: 1200px) {
  .header .nav__menu,
  .header .nav__list {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    background: transparent !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .header .nav__item { margin: 0 !important; }
  .header .nav__link {
    font-size: 0.92rem !important;
    color: var(--ink) !important;
    padding: 0.25rem 0 !important;
    font-weight: 500 !important;
  }
  .header .nav__toggle { display: none !important; }
}

/* --- R2.17: Header height tuning — feel lighter ------------------------- */
.header,
.header--transparent:not(.header--scrolled),
.header--transparent {
  padding: 0.75rem 0 !important;
}
.header .logo__img,
.header .header__logo-img { max-height: 44px !important; width: auto !important; }

/* --- R2.18: Price comparator header alignment ------------------------- */
.why-direct .section-header,
.price-compare .section-header {
  margin-bottom: 2rem !important;
}
.why-direct .section-header__title,
.why-direct .section-header__desc {
  max-width: 100% !important;
}

/* --- R2.19: Shrink footer columns, center brand vertically -------------- */
.footer__grid {
  gap: 2rem !important;
}
.footer__column h4,
.footer__title {
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.75rem !important;
}
.footer__column a,
.footer__link {
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
}

/* --- R2.20: Chat bubble — nudge so it doesn't sit on top of Manage cookies */
.chat-toggle,
.chatbot-toggle,
#chatbot-toggle {
  bottom: 20px !important;
  right: 20px !important;
}
.cookie-manage-link { left: 12px !important; right: auto !important; }

/* --- R2.21: Mosaic photo credit really gone (not just hidden) ----------- */
.hero__mosaic .mi-caption,
.hero__mosaic [class*="caption"] { display: none !important; }

/* --- R2.22: "See where we are" / kicker spacing parity ------------------ */
.section-header--row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
}
.section-header--row .section-header__main { flex: 1 1 460px !important; min-width: 0 !important; }
.section-header--row .section-header__stat { flex: 0 1 240px !important; min-width: 0 !important; }

/* --- R2.23: Kill residual section-header decorative underline ------------
   `.section-header::after` in styles.css added a 60px gradient line that
   made every header feel like a billboard. Suppress it. */
.section-header::after,
.section-header::before { display: none !important; content: none !important; }

/* --- R2.24: Exit-intent modal — session-persist + really strict trigger --
   Already time-gated in JS; this just makes the one-shot hide bulletproof. */
.gbc-exit.is-dismissed,
.gbc-exit[hidden],
body.exit-dismissed .gbc-exit {
  display: none !important;
  pointer-events: none !important;
}

/* --- R2.25: Prevent horizontal scroll / clip bleed at any viewport ------- */
html, body { overflow-x: hidden; }
.section, main, footer { overflow-x: clip; }

/* =============================================================================
   R3 — HERO DENSITY + VISUAL ANCHOR
   Dropped the goal of a perfectly balanced 2-col grid at midrange widths
   because the left column carries too much content (H1 + subtitle + search
   pill + alt-CTA + trust row + urgency chip + owner aside) — it forces the
   right column to be ~800px tall of mosaic, which looks awkward.
   Solution: simplify the above-the-fold; let the mosaic stack nicely below
   the primary content but with a cropped banner aspect so it registers as
   one wide hero image instead of a 4-cell collage.
   ============================================================================= */

/* R3.1 - keep urgency chip and owner aside hidden, but trust row is
   restored as a clean single line in the new hero. */
@media (max-width: 1199px) {
  .hero .urgency-chip[data-urgency] { display: none !important; }
  .hero .hero__owner { display: none !important; }
}

/* R3.2, R3.3, R3.4 removed: hero typography and layout are now fully
   owned by the critical CSS in index.html (which uses body section.hero
   specificity so it beats any stale rules in this file). */

/* R3.5 - less hero padding so the fold is actually the fold */
.hero {
  padding: clamp(5.5rem, 10vh, 8rem) 0 clamp(2rem, 4vh, 3rem);
  min-height: 0;
}

/* R3.5b — guarantee the header has a solid background so the kicker
   never disappears behind a transparent floating header */
.header,
.header--transparent,
.header--transparent:not(.header--scrolled) {
  background: rgba(250, 247, 240, 0.96) !important;
  backdrop-filter: saturate(120%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(8px) !important;
  border-bottom: 1px solid rgba(24, 53, 35, 0.06) !important;
}
.header .nav__link,
.header .logo,
.header .nav__toggle { color: var(--ink) !important; }
.header .nav__toggle span { background: var(--ink) !important; }

/* R3.6 removed: hero kicker is styled in critical CSS */

/* R3.7 / R3.8 removed: hero search pill and alt-CTA are handled by
   critical CSS in index.html. The alt-CTA has also been removed from
   the DOM as part of the hero cleanup. */

/* R3.9 — Move the "Manage cookies" + chat bubble well apart so they don't
          stack on the same edge. */
.cookie-manage-link { bottom: 14px !important; left: 14px !important; }
.chat-toggle,
#chatbot-toggle,
.chatbot-toggle { bottom: 18px !important; right: 18px !important; }

/* R3.10 — belt-and-suspenders: kill the old 960 media that fights my rules */
@media (max-width: 960px) {
  .hero__mosaic { order: 2; margin-top: 0; }
}

/* =====================================================================
   ROUND 4 POLISH — final high-specificity overrides to end the struggle
   ===================================================================== */

/* R4.1 — MAP SECTION: use flexbox (more predictable than grid here). Force
   a clean side-by-side layout at ≥860px no matter what else in the cascade
   has tried to force display:block or grid-template-columns:1fr. */
.section-map .map-wrap,
section.section-map .map-wrap,
.section-map > .container > .map-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-height: 540px !important;
  overflow: hidden !important;
}
.section-map .map-wrap > .map-wrap__list {
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 0 !important;
  max-height: 540px !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--line-soft) !important;
  border-bottom: 0 !important;
}
.section-map .map-wrap > #cabins-map {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 540px !important;
  height: 540px !important;
}
@media (max-width: 700px) {
  .section-map .map-wrap,
  section.section-map .map-wrap {
    flex-direction: column !important;
  }
  .section-map .map-wrap > .map-wrap__list {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    max-height: 320px !important;
  }
  .section-map .map-wrap > #cabins-map {
    height: 360px !important;
    min-height: 360px !important;
  }
}

/* R4.2 — Section-header alignment: kill ALL auto-centering margins on the
   kicker/title/desc so they share the same left edge. */
.section .section-header,
section .section-header,
main > .section > .container > .section-header {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 760px !important;
}
.section .section-header > *,
section .section-header > *,
main > .section > .container > .section-header > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.section .section-header__desc,
section .section-header__desc {
  max-width: 62ch !important;
  margin-left: 0 !important;
}

/* R4.3 — "A small, hand-picked collection" section: fix description /
   rating stats alignment and prevent awkward wrapping. */
.cabins-intro,
.collection-intro,
.section[aria-labelledby*="collection"] .section-header {
  text-align: left !important;
}
.collection-rating-stat,
.collection-stat {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* R4.4 removed: hero date/guests fields are sized by critical CSS */

/* R4.5 — Header: nav visible at ≥1100px (not 1200), keep it accessible
   at common laptop widths. */
@media (min-width: 1100px) {
  .header__nav,
  .nav__list,
  .header nav {
    display: flex !important;
  }
  .header__toggle,
  .header__burger,
  .mobile-menu-toggle,
  #mobile-menu-toggle {
    display: none !important;
  }
}

/* R4.6 — Solid header at top too: eliminate transparent → white text bug. */
.header,
header.header,
body .header {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: saturate(1.2) blur(10px) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(10px) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.header a,
.header .nav__link,
.header__nav a {
  color: var(--ink) !important;
}

/* R4.7 — Amenities cards: tighter, no text clipping. Let cards auto-size
   to content so descriptions are never cut off. */
.amenity-card,
.amenities-grid > li,
.amenities-list__item {
  padding: 1rem 1.1rem !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
}
.amenity-card p,
.amenity-card__desc,
.amenities-list__item p {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
}
.amenities-grid,
.amenities-list {
  align-items: stretch !important;
}

/* R4.8 — Price comparator header alignment parity with other sections. */
.why-direct .section-header,
.why-direct .section-header__title,
.why-direct .section-header__desc {
  margin-left: 0 !important;
  text-align: left !important;
}

/* R4.9 — Footer alignment: make columns share a baseline, no drift right */
.footer__cols,
.footer-grid,
footer .container > .grid {
  align-items: start !important;
}
.footer__col,
.footer-grid > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* R4.10 — Chat & cookies: bottom corners, clear of content */
.cookie-manage-link,
#cookie-manage,
.cookie-pill {
  bottom: 12px !important;
  left: 12px !important;
  font-size: 0.8rem !important;
  padding: 6px 10px !important;
  background: rgba(26, 43, 28, 0.82) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-card) !important;
}
.chat-toggle,
#chatbot-toggle,
.chatbot-toggle {
  bottom: 16px !important;
  right: 16px !important;
}

/* R4.11 — No horizontal scroll anywhere */
html, body { overflow-x: hidden !important; }
main, section, footer, header { overflow-x: clip !important; }

/* R4.12 — Collection stats row: prevent single-word-per-line wrap */
.collection-stats,
.reviews-summary,
.review-aggregate {
  flex-wrap: wrap !important;
}
.collection-stats > *,
.reviews-summary > *,
.review-aggregate > * {
  min-width: 0 !important;
}

/* ============================================================================
   ROUND 5 - Cleaned up (Apr 2026). The original R5.1-R5.6 hero rebuild was
   fighting every other rule with !important and introduced a fake "1,500+
   stays" overlay. Hero pill + typography + mosaic are now styled from one
   place (index.html critical CSS). Only the header, booking widget, section
   padding, and utility overrides remain below.
   ============================================================================ */

body section.hero {
  position: relative;
  background: linear-gradient(180deg, #faf7f0 0%, #fffaf0 100%);
  padding: clamp(5.5rem, 10vh, 7rem) 0 clamp(2.5rem, 5vh, 4rem);
  min-height: auto;
  overflow: visible;
}

body section.hero .hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  width: 100%;
}

@media (min-width: 880px) {
  body section.hero .hero__content {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

body section.hero .hero__left {
  min-width: 0;
  max-width: 100%;
  order: 2;
}

@media (min-width: 880px) {
  body section.hero .hero__left { order: 1; }
}

body section.hero .hero__kicker {
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--forest);
  margin: 0 0 1.25rem 0;
}
body section.hero .hero__kicker::before,
body section.hero .hero__kicker::after { content: none; }

body section.hero .hero__title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 1.1rem 0;
  max-width: 18ch;
}
body section.hero .hero__title em {
  font-style: normal;
  color: var(--forest-deep);
  font-weight: 700;
}

body section.hero .hero__subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 2rem 0;
  max-width: 48ch;
}

/* R5.3-R5.6 removed: hero search pill, alt-CTA, trust row, and mosaic are
   now entirely styled in index.html critical CSS. The original Round 5 also
   inserted a hallucinated "5.0 · 1,500+ stays" badge via ::after on the
   mosaic; that is gone. */

/* Hide the urgency chip / owner block if it's still in DOM elsewhere */
body section.hero .urgency-chip,
body section.hero [data-urgency],
body section.hero .hero__owner {
  display: none !important;
}

/* ---- R5.7 · Header: clean white, nav visible at laptop widths ------------- */
body .header,
body header.header {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: saturate(1.25) blur(10px) !important;
  -webkit-backdrop-filter: saturate(1.25) blur(10px) !important;
  border-bottom: 1px solid rgba(14,18,15,0.06) !important;
  box-shadow: 0 1px 3px rgba(14,18,15,0.04) !important;
}
body .header *,
body .header a,
body .header .nav__link,
body .header .nav__item > a {
  color: var(--ink) !important;
}

/* Show desktop nav at 1025px+ (matches styles.css mobile breakpoint) */
@media (min-width: 1025px) {
  body .header .nav,
  body .header .nav__list,
  body .header .header__nav {
    display: flex !important;
  }
  body .header .nav__toggle,
  body .header .header__toggle,
  body .header .mobile-menu-toggle {
    display: none !important;
  }
}

/* ---- R5.8 · Bottom booking widget (#booking) — match new pill design ------ */
#booking .search-widget,
section#booking .search-widget {
  background: #fff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(14,18,15,0.12) !important;
  padding: 6px 6px 6px 8px !important;
  box-shadow: 0 12px 30px rgba(14,18,15,0.08) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 auto !important;
  max-width: 820px !important;
}
#booking .search-widget__field {
  padding: 8px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(14,18,15,0.08) !important;
  background: transparent !important;
  min-height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#booking .search-widget__field:last-of-type { border-right: 0 !important; }
#booking .search-widget__field:hover { background: rgba(14,18,15,0.035) !important; border-radius: 999px !important; }
#booking .search-widget__date-wrapper,
#booking .search-widget__select-wrapper {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
#booking .search-widget__date-wrapper > svg,
#booking .search-widget__select-wrapper > svg { display: none !important; }
#booking .search-widget__field label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 2px !important;
}
#booking .search-widget input,
#booking .search-widget select {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
#booking .search-widget__btn {
  background: var(--forest-deep) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (max-width: 720px) {
  #booking .search-widget {
    flex-direction: column !important;
    border-radius: 20px !important;
  }
  #booking .search-widget__field {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(14,18,15,0.08) !important;
  }
  #booking .search-widget__btn { width: 100% !important; }
}

/* ---- R5.9 · Section padding + rhythm --------------------------------------- */
body main > section.section {
  padding: clamp(3rem, 6vh, 5rem) 0 !important;
}

/* ---- R5.10 · Fluid container widths ---------------------------------------- */
body .container {
  max-width: 1200px !important;
  padding-left: clamp(1.25rem, 4vw, 2rem) !important;
  padding-right: clamp(1.25rem, 4vw, 2rem) !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---- R5.11b · "View cabin" button: kill the faux-underline ::after -------- */
body .cabin-card__link,
body a.cabin-card__link {
  background: var(--forest) !important;
  color: #fff !important;
  text-decoration: none !important;
  position: relative !important;
}
body a.cabin-card__link:hover,
body .cabin-card__link:hover {
  background: var(--forest-deep) !important;
  color: #fff !important;
}
body .cabin-card__link::after,
body a.cabin-card__link::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  transform: none !important;
  height: 0 !important;
}

/* ---- R5.11 · Cookie pill + chat bubble: non-overlapping, subtler ---------- */
body .cookie-manage-link,
body #cookie-manage,
body .cookie-pill {
  position: fixed !important;
  bottom: 14px !important;
  left: 14px !important;
  background: rgba(14,18,15,0.85) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14) !important;
  z-index: 9999 !important;
  text-decoration: none !important;
}
body .chat-toggle,
body #chatbot-toggle,
body .chatbot-toggle {
  bottom: 16px !important;
  right: 16px !important;
}

/* ===========================================================================
   ROUND 6 — DESIGN POLISH & SYSTEMATIC FIXES (Apr 2026)
   Fixes remaining visual issues: unified typography, spacing, broken
   location section, card alignment, sticky header, and UI micro-fixes.
   ============================================================================ */

/* ---- R6.1 · Unify hero title color (no more black/green split) ------------ */
body section.hero .hero__title,
body section.hero .hero__title em {
  color: var(--ink) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* ---- R6.2 · Subtler kicker, tighter rhythm ------------------------------- */
body section.hero .hero__kicker {
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  color: var(--forest) !important;
  margin-bottom: 0.9rem !important;
  opacity: 0.9 !important;
}

body section.hero .hero__subtitle {
  margin-bottom: 1.5rem !important;
  max-width: 44ch !important;
}

/* ---- R6.3 · Hero left column: align with container ----------------------- */
body section.hero .hero__content {
  max-width: 1200px !important;
  padding-left: clamp(1.25rem, 4vw, 2rem) !important;
  padding-right: clamp(1.25rem, 4vw, 2rem) !important;
}

/* ---- R6.4 · Booking widget: fit the column width cleanly ----------------- */
body section.hero .hero__search {
  max-width: 100% !important;
  margin: 0 !important;
}
body section.hero .hero__search .search-widget,
body section.hero .hero__search .search-widget--pill {
  max-width: 760px !important;
}

/* ---- R6.5 · LOCATION / WHERE-WE-ARE section: populated grid ------------ */
.location-callout .location-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  margin-top: 2.25rem !important;
}
@media (min-width: 900px) {
  .location-callout .location-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 2rem !important;
    align-items: stretch !important;
  }
}

.location-callout .location-grid__map {
  position: relative !important;
  margin: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(14,18,15,0.14), 0 2px 8px rgba(14,18,15,0.06) !important;
  aspect-ratio: 16 / 10 !important;
  background: #f1ece0 !important;
}
.location-callout .location-grid__map img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(1.05) !important;
}
.location-callout .location-grid__map::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%) !important;
  pointer-events: none !important;
}
.location-callout .location-grid__map-caption {
  position: absolute !important;
  bottom: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(14,18,15,0.14) !important;
}
.location-callout .location-grid__pin {
  display: inline-flex !important;
  color: var(--forest-deep) !important;
}
.location-callout .location-grid__pin svg {
  width: 14px !important;
  height: 14px !important;
}

.location-callout .location-grid__stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  align-self: center !important;
}
.location-callout .location-grid__stats li {
  background: #fff !important;
  border: 1px solid rgba(14,18,15,0.08) !important;
  border-radius: 16px !important;
  padding: 1.1rem 1.25rem !important;
  box-shadow: 0 1px 2px rgba(14,18,15,0.03), 0 6px 18px rgba(14,18,15,0.05) !important;
}
.location-callout .location-grid__stat-value {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--forest-deep) !important;
  line-height: 1 !important;
  margin-bottom: 0.3rem !important;
}
.location-callout .location-grid__stat-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  color: var(--ink-2) !important;
  line-height: 1.3 !important;
}

/* ---- R6.6 · Cabin cards: equal heights + button row aligned at bottom ---- */
body .cabin-card,
body .cabins-grid .cabin-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
body .cabin-card__body,
body .cabin-card__content,
body .cabin-card > .cabin-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body .cabin-card__cta,
body .cabin-card__footer,
body .cabin-card__actions,
body .cabin-card .cabin-card__link-wrap {
  margin-top: auto !important;
}
body .cabin-card__link {
  margin-top: auto !important;
}
/* cabins grid -> ensure all rows have equal height */
body .cabins-grid {
  align-items: stretch !important;
}
body .cabins-grid > * {
  height: 100% !important;
}

/* ---- R6.7 · Sticky search bar: keep brand logo + nav visible ------------ */
body .sticky-search {
  /* Make it sit at the top like a real navbar replacement but with a logo */
  padding: 0.5rem 0 !important;
}
body .sticky-search__form {
  position: relative !important;
}
body .sticky-search::before {
  content: "" !important;
  display: none !important;
}

/* Keep the main header persistently visible so nav/logo never disappear */
body .header.is-scrolled,
body .header--scrolled,
body header.header {
  background: #fff !important;
  border-bottom: 1px solid rgba(14,18,15,0.06) !important;
  box-shadow: 0 1px 3px rgba(14,18,15,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Make sure sticky-search doesn't overlap header by pushing it below */
body .sticky-search.is-visible {
  top: 70px !important;
}
@media (max-width: 720px) {
  body .sticky-search.is-visible { top: 62px !important; }
}

/* ---- R6.8 · Unify floating UI: cookie pill + chat bubble ---------------- */
body .cookie-manage-link,
body #cookie-manage,
body .cookie-pill {
  bottom: 20px !important;
  left: 20px !important;
  background: rgba(255,255,255,0.98) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(14,18,15,0.1) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(14,18,15,0.12) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body .cookie-manage-link:hover,
body #cookie-manage:hover,
body .cookie-pill:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
}

body .chat-toggle,
body #chatbot-toggle,
body .chatbot-toggle {
  bottom: 20px !important;
  right: 20px !important;
  background: var(--forest-deep) !important;
  box-shadow: 0 6px 20px rgba(23,51,33,0.32) !important;
  border: 0 !important;
}

/* ---- R6.9 · Section rhythm: consistent vertical spacing ----------------- */
body main > section {
  padding-top: clamp(3rem, 6vh, 5rem) !important;
  padding-bottom: clamp(3rem, 6vh, 5rem) !important;
}
body main > section.hero {
  padding-top: clamp(5rem, 9vh, 6.5rem) !important;
  padding-bottom: clamp(2rem, 5vh, 3.5rem) !important;
}

/* Tighten space between hero and cabins grid */
body main > section.hero + section {
  padding-top: clamp(2rem, 5vh, 3.5rem) !important;
}

/* ---- R6.10 · Dark section (direct-book math): polish -------------------- */
body .why-direct {
  background: #0e120f !important;
  color: #fff !important;
}
body .why-direct .section-header__badge {
  color: rgba(255,255,255,0.55) !important;
}
body .why-direct .section-header__title,
body .why-direct .section-header__title em {
  color: #fff !important;
  font-style: normal !important;
}
body .why-direct .section-header__desc {
  color: rgba(255,255,255,0.78) !important;
}
body .why-direct .price-card {
  border-radius: 18px !important;
  padding: 1.5rem !important;
}
body .why-direct .price-card--winner {
  box-shadow: 0 14px 40px rgba(0,0,0,0.35) !important;
}

/* ---- R6.11 · Cabin card chip row: fixed min-height to equalize ---------- */
body .cabin-card__amenities,
body .cabin-card__chips,
body .cabin-card__features {
  min-height: 80px !important;
  align-content: flex-start !important;
}

/* ---- R6.12 · Header layout at desktop widths (≥1025px) ------------------ */
@media (min-width: 1025px) {
  body .header .header__inner,
  body .header > .container,
  body .header .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body .header .nav__toggle,
  body .header .mobile-menu-toggle {
    display: none !important;
  }
}

/* ---- R6.13 · Consistent section-header styling globally ---------------- */
body .section-header {
  margin-bottom: 2rem !important;
}
body .section-header__badge {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--forest) !important;
  margin-bottom: 0.85rem !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
body .section-header__title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 0 0.75rem 0 !important;
  text-transform: none !important;
}
body .section-header__title em {
  font-style: normal !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
body .section-header__desc {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: 60ch !important;
}

/* Headers inside dark section (why-direct) */
body .why-direct .section-header__desc { color: rgba(255,255,255,0.78) !important; }

/* ---- R6.14 · Chat toggle icon color fix ---------------------------------- */
body .chat-toggle svg,
body #chatbot-toggle svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* ---- R6.15 · Hero image: subtle tint + better shadow -------------------- */
body section.hero .hero__mosaic {
  box-shadow: 0 28px 70px rgba(14,18,15,0.22), 0 6px 16px rgba(14,18,15,0.08) !important;
}

/* ---- R6.16 · Cabin card image badges: unified style ---------------------- */
body .cabin-card__badge--pick,
body .cabin-card__badge--sleeps {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}

/* ---- R6.17 · Travel guide section spacing & card polish ---------------- */
body .travel-guide-section .guide-card,
body .guide-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
body .guide-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(14,18,15,0.12) !important;
}

/* ---- R6.18 · Newsletter / CTA banner: consistent rounded pill buttons --- */
body .newsletter-form button,
body .newsletter__submit,
body .newsletter button[type="submit"] {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 22px !important;
}

/* ---- R6.19 · Reviews: consistent card styling --------------------------- */
body .review-card,
body .reviews-section .review {
  border-radius: 20px !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(14,18,15,0.04), 0 10px 30px rgba(14,18,15,0.06) !important;
}

/* ---- R6.20 · Footer: tighten spacing & consistent links ------------------ */
body .footer a,
body footer a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
body .footer a:hover,
body footer a:hover {
  color: #fff !important;
}

/* ---- R6.21 · Nav header logo always visible (fix disappearing header) --- */
body .header .header__logo,
body .header .logo,
body .header a[class*="logo"] {
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---- R6.22 · Eliminate stray white strip between header and hero ------- */
body section.hero {
  margin-top: 0 !important;
}

/* ---- R6.23 · Hero on mobile: reduce image height so title is above fold - */
@media (max-width: 720px) {
  body section.hero { padding-top: 4rem !important; }
  body section.hero .hero__mosaic {
    aspect-ratio: 16 / 9 !important;
    max-height: 240px !important;
  }
  body section.hero .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
  }
  body section.hero .hero__mosaic::after {
    font-size: 0.74rem !important;
    padding: 6px 10px !important;
  }
}

/* ---- R6.24 · Anchor cabin card image aspect ratio consistent ------------ */
body .cabin-card__media,
body .cabin-card__image-wrap,
body .cabin-card figure {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}
body .cabin-card__media img,
body .cabin-card figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---- R6.25 · Kill any remaining underline on buttons-as-links ---------- */
body a.btn,
body .btn--primary,
body a[class*="btn"] {
  text-decoration: none !important;
}
body a.btn::after,
body .btn--primary::after {
  content: none !important;
  display: none !important;
}

/* ===========================================================================
   ROUND 6.2 — RE-ESTABLISH HIDDEN ELEMENTS + WIDGET FIXES
   The Round 5 "cleanup" removed critical hide rules for trust/mosaic.
   Re-add them with even higher specificity and fix the widget layout.
   ============================================================================ */

/* Hide clutter above the fold on home hero (was lost in R5 cleanup) */
body section.hero .hero__trust,
body section.hero .urgency-chip,
body section.hero [data-urgency],
body section.hero .hero__owner,
body section.hero .hero__owner-img,
body section.hero .hero__owner-text {
  display: none !important;
}

/* Hero mosaic: one prominent image, not 4 tiles (re-established) */
body section.hero .hero__mosaic {
  display: block !important;
  position: relative !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-gap: 0 !important;
  gap: 0 !important;
  aspect-ratio: 4 / 5 !important;
  max-height: 560px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(14,18,15,0.18), 0 4px 12px rgba(14,18,15,0.08) !important;
  order: 2 !important;
}
@media (max-width: 879px) {
  body section.hero .hero__mosaic {
    aspect-ratio: 16 / 10 !important;
    max-height: 300px !important;
  }
}
body section.hero .hero__mosaic picture.mi-2,
body section.hero .hero__mosaic picture.mi-3,
body section.hero .hero__mosaic picture.mi-4,
body section.hero .hero__mosaic .mi-caption {
  display: none !important;
}
body section.hero .hero__mosaic picture.mi-1 {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
body section.hero .hero__mosaic picture.mi-1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Booking widget: FORCE horizontal pill at ≥720px, even within narrow columns */
body section.hero .hero__search .search-widget,
body section.hero .hero__search .search-widget--pill,
body section.hero form#cabin-search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid rgba(14,18,15,0.12) !important;
  border-radius: 999px !important;
  padding: 6px 6px 6px 10px !important;
  box-shadow: 0 1px 2px rgba(14,18,15,0.04), 0 12px 30px rgba(14,18,15,0.08) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  overflow: visible !important;
}

body section.hero .hero__search .search-widget .search-widget__field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(14,18,15,0.08) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  min-height: 52px !important;
  transition: background-color 0.18s ease !important;
}
body section.hero .hero__search .search-widget .search-widget__field:last-of-type {
  border-right: 0 !important;
}
body section.hero .hero__search .search-widget .search-widget__field--btn {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
}

body section.hero .hero__search .search-widget .search-widget__field label {
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body section.hero .hero__search .search-widget .search-widget__date-wrapper,
body section.hero .hero__search .search-widget .search-widget__select-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
body section.hero .hero__search .search-widget .search-widget__date-wrapper > svg,
body section.hero .hero__search .search-widget .search-widget__select-wrapper > svg {
  display: none !important;
}

body section.hero .hero__search .search-widget input,
body section.hero .hero__search .search-widget select {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

body section.hero .hero__search .search-widget .search-widget__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  background: var(--forest-deep) !important;
  color: #fff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  height: auto !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(23,51,33,0.18) !important;
}
body section.hero .hero__search .search-widget .search-widget__btn:hover {
  background: var(--forest) !important;
}
body section.hero .hero__search .search-widget__label--hidden {
  display: none !important;
}

/* Stack widget at narrow widths — DISABLED, see final override block at end of file */

/* Re-add small rating badge on hero image */
body section.hero .hero__mosaic::after {
  content: "★ 5.0 rated by Airbnb, VRBO & Google guests" !important;
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(14,18,15,0.12) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  max-width: calc(100% - 32px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hero content grid: go 2-column at ≥720px (not 880), override the old 960px rule */
@media (min-width: 720px) {
  body section.hero .hero__content {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: clamp(1.75rem, 4vw, 3rem) !important;
  }
  body section.hero .hero__left { order: 1 !important; }
  body section.hero .hero__mosaic { order: 2 !important; }
}
@media (max-width: 719px) {
  body section.hero .hero__content {
    grid-template-columns: 1fr !important;
  }
  body section.hero .hero__left { order: 2 !important; }
  body section.hero .hero__mosaic { order: 1 !important; }
}

/* ===========================================================================
   ROUND 6.3 — Sizing polish: widget fit, badge fit, image ratio
   ============================================================================ */

/* Widget: taller, more comfortable + wider at 720-1099px where it was cramped */
@media (min-width: 720px) and (max-width: 1099px) {
  body section.hero .hero__content {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }
}
@media (min-width: 1100px) {
  body section.hero .hero__content {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* Make the pill fill the left column up to a sensible max */
body section.hero .hero__search .search-widget,
body section.hero .hero__search .search-widget--pill {
  max-width: none !important;
  width: 100% !important;
}

/* Compact labels/inputs so 3 fields + button fit */
body section.hero .hero__search .search-widget .search-widget__field {
  padding: 6px 10px !important;
  min-height: 56px !important;
}
body section.hero .hero__search .search-widget .search-widget__field label {
  font-size: 0.65rem !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
body section.hero .hero__search .search-widget input,
body section.hero .hero__search .search-widget select {
  font-size: 0.88rem !important;
}
body section.hero .hero__search .search-widget .search-widget__btn {
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  min-height: 42px !important;
}
/* Search button: icon only at narrow widths to save space, text at wider */
@media (max-width: 1099px) {
  body section.hero .hero__search .search-widget .search-widget__btn {
    padding: 10px 14px !important;
  }
}

/* Hero image: shorter aspect at laptop sizes so it matches left column height */
body section.hero .hero__mosaic {
  aspect-ratio: 4 / 3.4 !important;
  max-height: 420px !important;
}
@media (min-width: 1100px) {
  body section.hero .hero__mosaic {
    aspect-ratio: 4 / 4 !important;
    max-height: 500px !important;
  }
}

/* Rating badge: allow wrapping / shorten text via content rule */
body section.hero .hero__mosaic::after {
  content: "★ 5.0 · Airbnb, VRBO & Google rated" !important;
  font-size: 0.74rem !important;
  padding: 7px 12px !important;
  max-width: calc(100% - 32px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (min-width: 1100px) {
  body section.hero .hero__mosaic::after {
    content: "★ 5.0 rated by Airbnb, VRBO & Google guests" !important;
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
  }
}

/* Header hamburger toggle: color visible on light bg */
body .header .nav__toggle span {
  background: var(--ink) !important;
}

/* Tighten hero subtitle line-width */
body section.hero .hero__subtitle {
  max-width: 38ch !important;
}

/* ===========================================================================
   ROUND 6.4 — Stack hero on laptop (<1100px) so widget has room
   ============================================================================ */

/* Below 1100px: single-column hero with image on top, content below.
   Widget gets full container width, labels/values display fully. */
@media (max-width: 1099px) {
  body section.hero .hero__content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    max-width: 760px !important;
  }
  body section.hero .hero__left { order: 2 !important; }
  body section.hero .hero__mosaic {
    order: 1 !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 360px !important;
    width: 100% !important;
  }
}

/* At 1100px+ restore 2-column with proper ratio */
@media (min-width: 1100px) {
  body section.hero .hero__content {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 3rem) !important;
    align-items: center !important;
  }
  body section.hero .hero__left { order: 1 !important; }
  body section.hero .hero__mosaic { order: 2 !important; }
}

/* Widget: at all laptop widths, make fields breathe and values fit */
body section.hero .hero__search .search-widget,
body section.hero .hero__search .search-widget--pill {
  width: 100% !important;
  max-width: 640px !important;
}
@media (min-width: 600px) {
  body section.hero .hero__search .search-widget .search-widget__field {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    min-height: 60px !important;
  }
  body section.hero .hero__search .search-widget .search-widget__field label {
    font-size: 0.7rem !important;
    letter-spacing: 0.03em !important;
  }
  body section.hero .hero__search .search-widget input,
  body section.hero .hero__search .search-widget select {
    font-size: 0.95rem !important;
    width: 100% !important;
  }
  body section.hero .hero__search .search-widget .search-widget__btn {
    flex: 0 0 auto !important;
    padding: 12px 22px !important;
    font-size: 0.95rem !important;
    min-height: 46px !important;
  }
}

/* Kill any previous override forcing small widget */
body section.hero .hero__search .search-widget .search-widget__field {
  padding: 10px 14px !important;
}

/* ============================================================================
   HERO SEARCH WIDGET — FINAL OVERRIDE (May 11, 2026)
   Fixes: button alignment with pill on desktop + mobile usability above-fold
   This block intentionally placed last to win the cascade.
   ============================================================================ */

/* The pill container: clean flex row with consistent inner padding */
body section.hero .hero__search,
section.hero .hero__search {
  margin: 0 0 1.25rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

body section.hero .hero__search .search-widget,
body section.hero .hero__search .search-widget--pill,
body section.hero .hero__search form#cabin-search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid rgba(14, 18, 15, 0.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(14, 18, 15, 0.04), 0 12px 30px rgba(14, 18, 15, 0.10) !important;
  padding: 6px !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Each field is an equal-width flex item with vertically centered content */
body section.hero .hero__search .search-widget .search-widget__field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(14, 18, 15, 0.08) !important;
  border-radius: 999px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  min-height: auto !important;
  transition: background-color 0.18s ease !important;
}

body section.hero .hero__search .search-widget .search-widget__field:hover {
  background-color: rgba(14, 18, 15, 0.04) !important;
}

/* The button cell: no border, no padding, no hover bg */
body section.hero .hero__search .search-widget .search-widget__field--btn {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  cursor: default !important;
}

body section.hero .hero__search .search-widget .search-widget__field--btn:hover {
  background: transparent !important;
}

/* Labels */
body section.hero .hero__search .search-widget .search-widget__field > label {
  display: block !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #151715 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  pointer-events: none !important;
}

body section.hero .hero__search .search-widget .search-widget__label--hidden {
  display: none !important;
}

/* Input wrappers — strip all extra chrome */
body section.hero .hero__search .search-widget .search-widget__date-wrapper,
body section.hero .hero__search .search-widget .search-widget__select-wrapper {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

body section.hero .hero__search .search-widget .search-widget__date-wrapper > svg,
body section.hero .hero__search .search-widget .search-widget__select-wrapper > svg {
  display: none !important;
}

/* Inputs and select */
body section.hero .hero__search .search-widget input,
body section.hero .hero__search .search-widget select {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #0e120f !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  text-overflow: ellipsis !important;
}

body section.hero .hero__search .search-widget input::placeholder {
  color: #6b6f6c !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* THE KEY FIX: button stretches to match the row height, no hard-coded
   min-height that would be smaller than the surrounding fields */
html body section.hero form#cabin-search-form button.search-widget__btn,
html body section.hero .hero__search .search-widget .search-widget__btn,
html body section.hero .hero__search form#cabin-search-form .search-widget__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: #173321 !important;
  color: #fff !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 1.5rem !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(23, 51, 33, 0.18) !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

body section.hero .hero__search .search-widget .search-widget__btn:hover {
  background: #0f2617 !important;
}

body section.hero .hero__search .search-widget .search-widget__btn svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

/* === MOBILE / TABLET (≤ 960px): keep search widget visible above-fold
       by removing the legacy "photo on top" rule and shrinking the photo. ============================= */
@media (max-width: 960px) {
  section.hero .hero__content {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Cancel the legacy order:-1 that pushed the photo above all hero copy */
  section.hero .hero__photo,
  body section.hero .hero__photo {
    order: 0 !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 320px !important;
    margin: 0 0 0.5rem !important;
  }
  section.hero .hero__title { margin-bottom: 0.5rem !important; }
  section.hero .hero__subtitle { margin-bottom: 0.75rem !important; }
  section.hero .hero__search { margin: 0 0 1rem !important; }
  section.hero .hero__trust { margin: 0.75rem 0 0 !important; }
}

/* === SMALL MOBILE (≤ 600px): stacked search widget for usability ====== */
@media (max-width: 600px) {
  body section.hero .hero__search .search-widget,
  body section.hero .hero__search .search-widget--pill,
  body section.hero .hero__search form#cabin-search-form {
    flex-direction: column !important;
    border-radius: 18px !important;
    padding: 8px !important;
    gap: 4px !important;
    min-height: 0 !important;
  }
  body section.hero .hero__search .search-widget .search-widget__field {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(14, 18, 15, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    min-height: 56px !important;
  }
  body section.hero .hero__search .search-widget .search-widget__field:nth-of-type(3) {
    border-bottom: 0 !important;
  }
  body section.hero .hero__search .search-widget .search-widget__field--btn {
    border-bottom: 0 !important;
    margin-top: 4px !important;
  }
  body section.hero .hero__search .search-widget .search-widget__btn {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 1.25rem !important;
  }
  /* Bigger inputs on mobile to prevent iOS zoom on focus (16px font min) */
  body section.hero .hero__search .search-widget input,
  body section.hero .hero__search .search-widget select {
    font-size: 16px !important;
  }
}

/* Phase 2 / Tier-1 agent-readable styles live in css/agent-readability.css
   (loaded on all Tier-1 pages: homepage, /cabins/, 5 cabin detail pages, and
   top guide pages). Kept separate from upgrades.css so pages that don't
   include upgrades.css still get the cabin-overview / comparison-table /
   copy-for-ai styling. */