/* ===================================================================
   ANTARES COLLECTION — stylesheet
   Palette, typography, and shared components
   =================================================================== */

/* Brand logo font */
@font-face {
  font-family: "Knockout JuniorSumo";
  src: url("../fonts/Knockout-HTF34-JuniorSumo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Script font used for collection names + "St. John Villas Curated by Experience" */
@font-face {
  font-family: "Parlare";
  src: url("../fonts/Parlare-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — tuned to match the mockup */
  --teal-deep:    #0e4d52;
  --teal-mid:     #2d7b80;
  --teal-hero:    #2a7478;
  --cream-strip:  #ecd9a2;
  --cream-luxe:   #f0dca1;
  --olive:        #848c2a;
  --orange:       #c97d2b;
  --rose:         #b86e6d;
  --script-gold:  #f2e2b3;
  --ink-dark:     #3a2b1a;
  --white-soft:   #fbf7ee;

  /* Typography */
  --font-logo:    "Knockout JuniorSumo", "Cinzel", "Trajan Pro", Georgia, serif;
  --font-display: "Knockout JuniorSumo", "Cinzel", "Trajan Pro", Georgia, serif;
  --font-script:  "Parlare", "Pinyon Script", "Allura", "Great Vibes", cursive;
  --font-body:    "Montserrat", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Sizing — anchored to a 1920px design reference.
     Use 1vw = 19.2px at 1920px wide. */
  --design-w: 1920;
  --header-h: clamp(78px, 6.25vw, 120px);
  --max-w: 1600px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink-dark);
  background: var(--white-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.header-accent {
  height: clamp(10px, 0.94vw, 18px);
  background: var(--cream-strip);
}

.header-main {
  background: var(--teal-hero);
  /* Taller to accommodate the palm fronds on the right (like the mockup) */
  height: clamp(110px, 11vw, 220px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.5vw, 48px);
  padding: 0 clamp(20px, 4vw, 60px);
  position: relative;
  /* NOTE: no overflow: hidden here — dropdown menu must be able to extend below */
}

/* Palm fronds decorative layer on the right of the header bar.
   Uses its own overflow-clipping container so the palms don't spill but the
   dropdown can still extend below the header. */
.header-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/header-palms.png");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* =============== Per-collection page header theming ===============
   Each collection's interior page uses the collection's band color as the
   header background and hides the palm fronds (the palm image's teal sky
   would clash with the non-teal headers). */
.page-waterfront .header-main { background: var(--teal-deep); }
.page-adventure  .header-main { background: var(--olive); }
.page-gatherings .header-main { background: var(--orange); }
.page-serene     .header-main { background: var(--rose); }
.page-luxe       .header-main { background: var(--cream-luxe); }

/* Entire body background matches the collection's header bar, so the villa
   card grid sits on a band of the collection's color. */
body.page-waterfront { background: var(--teal-deep); }
body.page-adventure  { background: var(--olive); }
body.page-gatherings { background: var(--orange); }
body.page-serene     { background: var(--rose); }
body.page-luxe       { background: var(--cream-luxe); }

/* All Villas master directory uses the same cream as the Luxe collection */
body.page-all-villas { background: var(--cream-luxe); }

.page-waterfront .header-main::before,
.page-adventure  .header-main::before,
.page-gatherings .header-main::before,
.page-serene     .header-main::before,
.page-luxe       .header-main::before { display: none; }

/* Swap the cream accent strip above and below the Luxe header for the same
   #8a6a2e brown used on that page's MENU text and logos. Same height, same
   placement — just a different color. */
.page-luxe .header-accent { background: #8a6a2e; }

/* The Luxe page uses pre-recolored logo assets — images/logo-luxe.png and
   images/collections/luxe-brand.png — with every pixel baked to the exact
   #8a6a2e Luxe brown (the MENU text / header-accent color). No CSS filter is
   applied, so the ANTARES wordmark and the Luxe collection logo render at an
   identical, exact color in the header. */

/* Only the top-level MENU trigger (and the mobile hamburger) take the brown
   color on the Luxe page. Items inside the dropdown panel keep their default
   cream-gold styling, so the open menu matches every other page. */
.page-luxe .nav-dropdown > a,
.page-luxe .menu-toggle { color: #8a6a2e; }

/* Keep logo + nav above the palms.
   Logo on the left, nav next to it, hamburger pushed right on mobile. */
.logo        { position: relative; z-index: 2; }
.site-nav    { position: relative; z-index: 3; }
.menu-toggle { position: relative; z-index: 2; margin-left: auto; }

.logo {
  display: inline-block;
  line-height: 0;
}

.logo img {
  /* Designed at ~263px wide in the 1920px mockup — scales proportionally */
  height: clamp(36px, 3vw, 58px);
  width: auto;
  display: block;
}

/* Collection brand logo — sits on the opposite side of the header from the
   ANTARES logo on each collection's interior page. Matched in height to
   ANTARES so the two read as paired brand marks. */
.collection-brand {
  position: relative;
  z-index: 2;
  margin-left: auto;
  /* Use flex + explicit align-items so the logo image is perfectly
     vertically centered inside the header bar, independent of the parent
     header's align-items and of any inline-box baseline quirks. */
  display: flex;
  align-items: center;
  align-self: center;
}

.collection-brand img {
  /* Sized to roughly 1.9x the ANTARES logo — still clearly the dominant
     brand mark on an interior collection page, but ~75% of the previous
     clamp(90px, 7.5vw, 145px) so it feels less oversized in the header. */
  height: clamp(68px, 5.6vw, 109px);
  width: auto;
  display: block;
}

.footer-logo { font-family: var(--font-logo); }

/* Navigation — single "MENU" dropdown sitting next to the logo */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 36px);
  list-style: none;
}

.site-nav a {
  font-family: var(--font-display);
  color: var(--script-gold);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(12px, 0.94vw, 16px);
  font-weight: 400;
  padding: 10px 4px;
  position: relative;
  transition: color 0.25s ease;
}

.site-nav a:hover { color: #fff; }

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--script-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.site-nav a:hover::after { transform: scaleX(1); }

/* Dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown > a::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-right: 8px;
  transition: transform 0.25s ease;
}

.nav-dropdown:hover > a::before,
.nav-dropdown:focus-within > a::before {
  transform: rotate(225deg) translateY(-2px);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(10px);
  /* Menu palms photo anchored to the bottom of the dropdown. Base color
     is a mid teal-blue that blends with the palm image's sky area — so
     when the menu grows taller (e.g. we added Travel Planning + Rental
     Agreement below the divider), the space above the palm doesn't
     read as a solid-teal "extra Waterfront row" the way it used to.
     Base color chosen to match the palm image's upper-sky tone. */
  background-color: #6d97ab;
  background-image: url("../images/menu-palms.png");
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 280px;
  padding: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  overflow: hidden;
}

/* Non-collection links (after the divider) sit over the palm-sky base. */
.dropdown-divider ~ a {
  background: transparent;
}
.dropdown-divider ~ a:hover {
  background: rgba(0,0,0,0.25);
  color: #fff;
}

/* Villas A-Z + All Villas together form a solid slate-blue band that matches
   the palm-sky base color. Without this, the palm image's top edge cuts
   diagonally across the ALL VILLAS row (a real visual bug — not a hover
   miss). By painting both rows in the base color, the palm photo appears
   only below them (About / Contact / Travel Planning / Rental Agreement),
   producing a clean transition instead of a mid-row cut. */
.dropdown-sub > summary,
.dropdown-menu a[href*="all-villas"] {
  background-color: #6d97ab;
}
.dropdown-sub > summary:hover,
.dropdown-menu a[href*="all-villas"]:hover {
  background-color: #5e8798;   /* same hue, one shade darker for hover */
  color: #fff;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 14px 28px;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: var(--script-gold);
  transition: filter 0.2s ease;
}

.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover { filter: brightness(1.18); }

/* Each collection link takes on its band color so the menu previews the brand */
/* "contains" selectors (*=) so the colored backgrounds still match when the
   host (Netlify, etc.) strips the `.html` extension via pretty-URL rewriting,
   and continue to match locally where the extension is present. */
.dropdown-menu a[href*="waterfront"] { background: var(--teal-deep); }
.dropdown-menu a[href*="adventure"]  { background: var(--olive); }
.dropdown-menu a[href*="gatherings"] { background: var(--orange); }
.dropdown-menu a[href*="serene"]     { background: var(--rose); }
.dropdown-menu a[href*="luxe"]       { background: var(--cream-luxe); color: #8a6a2e; }

.dropdown-divider {
  height: 1px;
  background: rgba(242, 226, 179, 0.3);
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--script-gold);
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.menu-toggle svg { width: 28px; height: 28px; }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  width: 100%;
  /* Hero wants to be 16:9 of the viewport width, capped at 820px tall. On
     viewports wider than max-height allows at 16:9, the section becomes
     wider than the video's aspect — flex centering keeps the iframe at
     16:9 in the middle, and the solid background color fills the pillar
     space on either side (no poster photo spillover). */
  aspect-ratio: 16 / 9;
  max-height: 820px;
  /* Poster still (loads instantly) sits behind the iframe. On mobile it
     fills the hero while the Vimeo player buffers, so the visitor never
     sees a black rectangle. */
  background: #1a2a30 url("../images/hero.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

/* Belt-and-braces: block taps on the iframe from routing to anything
   under it (Vimeo's overlay UI, or elements accidentally stacked below).
   The video is a passive background, not an interactive player. */
.hero iframe { pointer-events: none; }

.hero img {
  height: 100%;
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  object-position: 45% 55%;
  display: block;
}

.hero iframe {
  height: 100%;
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  border: 0;
  display: block;
}

/* ===================================================================
   CURATED SECTION ("St. John Villas Curated by Experience")
   =================================================================== */
.curated {
  position: relative;
  width: 100%;
  /* Section height is driven by content (script heading + SEO intro
     paragraph + Lodgify search widget). min-height scales with viewport
     so the palm-photo hero band stays generous on every desktop size and
     the heading + paragraph + widget never bleed into the collection
     bands beneath. The mobile media query overrides this with a smaller
     floor and lets content drive the section's full height. */
  min-height: clamp(520px, 38vw, 780px);
  background-color: var(--teal-hero);
  background-image: url("../images/curated-palms-mirrored.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* No isolation here — overlay sits between bg and content via z-index. */
}

/* Soft gradient overlay so the heading + paragraph + booking widget read
   clearly against the palm photo. The vignette is slightly darker top
   and bottom, lighter through the middle, which keeps the photo visible
   while still meeting contrast for the gold script type. */
.curated::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Remainder of the curated section — padding, color, flex layout — were
   the second half of the original .curated rule before the ::before
   overlay was added. They live in a continuation rule rather than the
   first .curated block so the structural edits stay self-contained. */
.curated {
  padding: clamp(48px, 5vw, 88px) clamp(20px, 4vw, 60px);
  color: var(--script-gold);
  /* Heading + intro paragraph + search widget centered within the section */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Hide the legacy <img> placeholder (kept in HTML for backward compatibility) */
.curated-palms-bg { display: none; }

.curated-inner {
  position: relative;
  z-index: 2;
  /* Widened from 900px so the Lodgify Portable Search Bar's Search button
     stays inside the widget's visual card. The widget renders internally at
     a wider horizontal layout; at 900px the Search button was overflowing
     the container on the right, appearing detached from the input card. */
  max-width: 1080px;
  text-align: center;
}

/* Lodgify property-search widget embedded in the curated hero. Sits beneath
   the heading, centered. The new widget renders five horizontal fields
   (Location / Check-in / Check-out / Guests / Search), so we give it a
   more generous max-width than the heading paragraph. Both the wrapper
   and the widget itself are capped so the widget can't break out wider
   than the container under any internal sizing it does. */
.curated-search {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.curated-search #lodgify-search-bar,
.collection-search-section #lodgify-search-bar,
.booking-widget-inner #lodgify-search-bar {
  display: block;
  /* Floor the slot height so the widget always has a visible footprint —
     the new portable-search-bar script can render the widget element with
     no inherent height on narrow viewports, which would collapse it. */
  min-height: 64px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 540px) {
  .curated-search #lodgify-search-bar,
  .collection-search-section #lodgify-search-bar,
  .booking-widget-inner #lodgify-search-bar {
    /* Was 320px — Lodgify's widget only renders ~240px tall on mobile once
       it mounts, so 320px left ~80px of dead space between the Check
       Availability button and the collection description below. */
    min-height: 240px;
  }
}

/* ===================================================================
   BOOKING-WIDGET HEADER
   ===================================================================
   .booking-frame is an invisible wrapper used only as the positioning
   context for the "Check Availability" header text + the Lodgify widget
   below it. No background, no border — just a centered column with the
   Antares typography above the search panel. */
.booking-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.booking-frame-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--script-gold);
  margin: 0 0 6px;
}

.booking-frame-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 50px);
  line-height: 1;
  color: var(--script-gold);
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

/* Cream-background pages (Luxe, All Villas) — gold-on-cream is invisible,
   so the eyebrow / script switch to the page's brown accent. */
.page-luxe .booking-frame-eyebrow,
.page-luxe .booking-frame-script,
.page-all-villas .booking-frame-eyebrow,
.page-all-villas .booking-frame-script {
  color: #8a6a2e;
  text-shadow: none;
}

@media (max-width: 540px) {
  .booking-frame-eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
  }
  .booking-frame-script {
    font-size: 26px;
    margin-bottom: 12px;
  }
}

/* Hero headline is now two visually distinct lines:
   - "St. John Villas,"   → Cinzel uppercase, mirroring the CHECK AVAILABILITY
     eyebrow style on this page (display sans, wide tracking, gold).
   - "Curated by Experience" → Pinyon Script, the brand's signature script
     used elsewhere as the romantic counterpart to the display caps.
   The h1 itself is just a layout shell; type styling lives on the two
   inner spans so the contrast is intentional and tunable. */
.curated h1 {
  margin: 0 0 clamp(22px, 3.4vw, 44px);
  line-height: 1.05;
  max-width: 100%;
  text-shadow: 0 2px 18px rgba(0,0,0,0.18);
}

.curated h1 .hero-display {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 36px);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--script-gold);
  /* More breathing room between the display caps and the script line —
     the two are visually distinct typefaces and benefit from extra air
     so the eye reads them as two separate moments instead of crammed. */
  margin-bottom: clamp(22px, 2.6vw, 44px);
}

.curated h1 .hero-script {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 92px);
  line-height: 1;
  color: var(--script-gold);
  /* Keep "Curated by Experience" on a single line at every viewport width —
     the mobile rule below scales the font down so it still fits. */
  white-space: nowrap;
}

@media (max-width: 540px) {
  .curated h1 .hero-display {
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-bottom: 18px;
  }
  .curated h1 .hero-script {
    /* Compute font-size from the actual viewport width so "Curated by
       Experience" always fits on a single line AND stays legible on every
       phone size. The math:
         - Available text width = 100vw minus the section's horizontal
           padding (~48px) plus a small safety margin (~16px) = 64px.
         - "Curated by Experience" in Parlare renders at roughly 12× its
           font-size in width (Parlare is noticeably wider than Pinyon
           Script — the earlier 9.5× value was tuned for Pinyon and
           caused Parlare to overflow on narrow phones).
         - So max-fitting font-size = (100vw - 64px) / 12.
       Clamp enforces a 22px floor for legibility on very narrow devices
       and a 36px ceiling so the script line doesn't dwarf the display
       caps above it on tablets. */
    font-size: clamp(22px, calc((100vw - 64px) / 12), 36px);
  }
}

/* SEO + AI-search friendly intro paragraph beneath the script heading and
   above the Lodgify search widget. Cream-gold tones on the palm photo,
   readable size for body copy, max-width keeps the line length comfortable. */
.curated-intro {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto clamp(22px, 3vw, 38px);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--script-gold);
  text-shadow: 0 1px 10px rgba(0,0,0,0.32);
}

@media (max-width: 540px) {
  .curated-intro {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 20px;
  }
}

.book-now {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(12px, 0.94vw, 18px);
  letter-spacing: 0.38em;
  color: var(--script-gold);
  text-transform: uppercase;
  padding: clamp(14px, 1.1vw, 22px) clamp(28px, 2.6vw, 50px);
  border: 1px solid rgba(242, 226, 179, 0.7);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.book-now:hover {
  background: var(--script-gold);
  color: var(--teal-deep);
  border-color: var(--script-gold);
}

/* ---- Book Now button in the header ----
   Same aesthetic as the curated section's .book-now (cream glass button with
   a script-gold stroke) but sized to sit comfortably inside the header bar.
   Positioned on the right side of the header, aligned vertically with the
   ANTARES logo. */
.book-now-header {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.82vw, 14px);
  letter-spacing: 0.32em;
  color: var(--script-gold);
  text-transform: uppercase;
  padding: clamp(10px, 0.9vw, 16px) clamp(20px, 1.9vw, 34px);
  border: 1px solid rgba(242, 226, 179, 0.7);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  /* Default: Book Now owns the right edge. Overridden below when the
     collection-brand logo is also present, so the two cluster together on
     the right instead of fighting for the same auto-margin. */
  margin-left: auto;
  white-space: nowrap;
}

.book-now-header:hover {
  background: var(--script-gold);
  color: var(--teal-deep);
  border-color: var(--script-gold);
}

@media (max-width: 540px) {
  .book-now-header {
    font-size: 9px;
    letter-spacing: 0.2em;
    padding: 8px 14px;
  }
}

/* ===================================================================
   COLLECTION BANDS
   =================================================================== */
.bands { display: flex; flex-direction: column; }

.band {
  position: relative;
  display: flex;
  align-items: center;
  /* Horizontal padding matches .header-main so collection logos align with the ANTARES logo */
  padding: clamp(56px, 4.95vw, 120px) clamp(20px, 4vw, 60px);
  overflow: hidden;
  transition: filter 0.35s ease;
  color: var(--script-gold);
}

.band-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  width: 100%;
  /* No max-width constraint — content flushes against band padding so logos
     align to the same left edge as the ANTARES logo in the header */
  z-index: 2;
}

.band-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Branded collection logo (script + COLLECTION in one image) */
.collection-logo {
  display: block;
  /* Enlarged so each collection wordmark fills its band more prominently.
     Width auto preserves the logo's native aspect; max-width keeps it inside
     its grid column on narrower desktops. */
  height: clamp(50px, 5.2vw, 96px);
  width: auto;
  max-width: 100%;
}

/* Luxe logo is on a light cream band — it's cream on transparent, so give it a
   subtle filter to shift into the darker cream text tone when it would otherwise
   disappear against the luxe background. */
.band.luxe .collection-logo {
  /* Homepage Luxe band: approximate the #8a6a2e brown via filter (this band
     still uses the cream-toned collections/luxe.png source image). */
  filter: brightness(0.48) sepia(1) saturate(2.2) hue-rotate(-8deg);
  transition: filter 0.35s ease;
}

/* On hover, the Luxe band reveals its photo behind a dark gradient overlay.
   Flip the brown logo to pure white so it reads clearly against the photo. */
.band.luxe:hover .collection-logo {
  filter: brightness(0) invert(1);
}

.band-tagline {
  /* Slightly smaller than the previous clamp(15px, 1.46vw, 28px) — about 80%
     of every value so the tagline reads as a more restrained subtitle below
     the collection logo. */
  font-size: clamp(12px, 1.17vw, 22px);
  font-weight: 300;
  letter-spacing: 0.02em;
  max-width: 620px;
  color: inherit;
  opacity: 0.95;
  transition: opacity 0.4s ease;
}

/* On hover, fade the tagline out so the photo underneath is the focal point */
.band:hover .band-tagline {
  opacity: 0;
}

/* Hover image layer — a slot to swap in real photos later */
.band-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.band-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.45) 100%);
}

.band:hover .band-hover { opacity: 1; }

.band-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
}

/* Per-collection colors & real hover photos (positioned to keep subjects in frame) */
.band.waterfront { background: var(--teal-deep); }
.band.waterfront .band-hover {
  /* Villa + woman at pool center */
  background-image: url("../images/hover/waterfront.jpg");
  background-position: center center;
}

.band.adventure { background: var(--olive); }
.band.adventure .band-hover {
  /* Paddleboarders in center-right of frame */
  background-image: url("../images/hover/adventure.jpg");
  background-position: center center;
}

.band.gatherings { background: var(--orange); }
.band.gatherings .band-hover {
  /* Pool + chairs + people. Vertical origin shifted toward the bottom of the
     image so the two people in the lounge chairs pan up into the center of
     the visible band instead of sitting low in the frame. */
  background-image: url("../images/hover/gatherings.jpg");
  background-position: center 70%;
}

.band.serene { background: var(--rose); }
.band.serene .band-hover {
  /* Couple on loungers — upper center of frame */
  background-image: url("../images/hover/serene.jpg");
  background-position: center 30%;
}

.band.luxe {
  background: var(--cream-luxe);
  color: #8a6a2e;
}
.band.luxe .band-hover {
  /* Woman in white robe is on the left side of frame. Vertical origin shifted
     toward the top so the crown of the subject's hat is in frame. */
  background-image: url("../images/hover/luxe.jpg");
  background-position: 30% 20%;
}

/* ===================================================================
   FOOTER PALM BAND + FOOTER
   =================================================================== */
.footer-palms {
  height: clamp(180px, 22vw, 360px);
  background-image: url("../images/footer-palms.jpg");
  background-size: cover;
  background-position: center;
}

.site-footer {
  background: var(--teal-deep);
  color: var(--script-gold);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 90px);
  text-align: center;
}

.site-footer .footer-logo {
  font-family: var(--font-display);
  letter-spacing: 0.32em;
  font-size: 18px;
  margin-bottom: 14px;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  margin-bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Footer links split across two rows: the five collections on the first
   line, About + Contact on the line beneath. */
.footer-nav-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 42px);
}

/* Mobile: split the two rows into cleanly-labeled vertical columns so
   the 9 links aren't wrapping into an unreadable jumble. Two side-by-side
   groups ("Collections" / "Explore"), each link on its own line, small
   uppercase label above. Desktop keeps the existing horizontal layout. */
@media (max-width: 600px) {
  .site-footer nav {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(28px, 8vw, 48px);
  }
  .footer-nav-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
  /* The tiny group label rendered above each column, e.g. "COLLECTIONS" */
  .footer-nav-row::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    letter-spacing: 0.34em;
    color: rgba(242, 226, 179, 0.55);
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .footer-nav-row a {
    font-size: 12px;
    letter-spacing: 0.2em;
    padding: 2px 0;
  }
}

.site-footer small {
  opacity: 0.65;
  font-size: 11px;
  letter-spacing: 0.15em;
}

/* ===================================================================
   CATEGORY PAGES — properties grid
   =================================================================== */
/* Hero is now a decorative photo-only banner. The collection's identity is
   carried by the logo that lives in the header on the opposite side from
   ANTARES. */
.category-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 720;
  min-height: 240px;
  max-height: 720px;
  overflow: hidden;
}

.category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
}

.category-hero.waterfront { background: var(--teal-deep); }
.category-hero.waterfront::before { background-image: url("../images/hero-collections/waterfront.jpg"); }

.category-hero.adventure { background: var(--olive); }
.category-hero.adventure::before { background-image: url("../images/hero-collections/adventure.jpg"); }

.category-hero.gatherings { background: var(--orange); }
.category-hero.gatherings::before { background-image: url("../images/hero-collections/gatherings.jpg"); }

.category-hero.serene { background: var(--rose); }
.category-hero.serene::before { background-image: url("../images/hero-collections/serene.jpg"); }

.category-hero.luxe { background: var(--cream-luxe); color: #8a6a2e; }
.category-hero.luxe::before { background-image: url("../images/hero-collections/luxe.jpg"); }


/* Property grid */
/* SEO + AI-search friendly intro paragraph at the top of each collection
   page, between the photo banner and the Lodgify search widget. Explains
   what defines the collection. Body color shows through from the page's
   collection-color background — cream-gold text reads on every dark page;
   Luxe (cream background) is overridden below to use the page's brown. */
.collection-intro {
  padding: clamp(32px, 4vw, 60px) clamp(20px, 5vw, 60px) 0;
}

/* On mobile the gap between the search widget and the intro paragraph
   was extra big because the widget's mobile min-height reserved more
   space than it needed. Trim the intro's top padding on narrow viewports
   so the two sections sit closer together. */
@media (max-width: 540px) {
  .collection-intro { padding-top: 16px; }
}

.collection-intro-inner {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--script-gold);
  text-align: center;
}

.page-luxe .collection-intro-inner { color: #6a4f1f; }

/* Lodgify property-search widget on each collection page. Sits between the
   intro paragraph and the villa grid. Horizontal padding mirrors .properties
   so the widget aligns to the same content gutter as the cards below;
   padding-bottom is 0 because .properties supplies its own top padding. */
.collection-search-section {
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 5vw, 60px) 0;
}

.collection-search-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.collection-search-section #lodgify-search-bar {
  display: block;
  min-height: 64px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 540px) {
  .collection-search-section #lodgify-search-bar { min-height: 320px; }
}

.properties {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(50px, 7vw, 100px) clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.property {
  /* Warm off-white on every page that shows villa listings — reads cleaner
     against the collection-colored page backgrounds than the previous cream.
     The Luxe collection page flips this to brown — see .page-luxe .property
     below. */
  background: #faf7f1;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(14,77,82,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover-only (desktop pointer) — on touch devices :hover sticks to a tapped
   element until the next tap, which can shift the card under the finger
   mid-tap and cause the click to register in the wrong place. Guarding the
   lift/shadow with @media (hover: hover) means touch devices keep the card
   stationary during the tap. */
@media (hover: hover) {
  .property:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(14,77,82,0.16);
  }
}

.property-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #ddd;
  display: block;
  transition: opacity 0.3s ease;
}

a.property-img {
  text-decoration: none;
  /* Harden the tap: full-width block so the photo always represents a large
     tap target, position:relative so it owns its own stacking context, and
     `touch-action: manipulation` skips the 300ms double-tap delay on iOS. */
  display: block;
  width: 100%;
  position: relative;
  touch-action: manipulation;
  /* Min-height fallback — ensures a clearly tappable area even on rare
     browsers that don't honour aspect-ratio correctly. */
  min-height: 180px;
  -webkit-tap-highlight-color: rgba(14, 77, 82, 0.1);
}

/* ---- In-card photo carousel ---------------------------------------------
   Wraps the photo link with absolutely-positioned prev/next arrows and a
   counter pill, so guests can cycle through a villa's photo set without
   navigating to its detail page. Clicking the photo (not the arrows) still
   follows the link. */
.property-img-stage {
  position: relative;
  /* Acts as the positioning context for arrows + counter, so they pin to
     the photo area exactly. */
}

.property-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 0;
  cursor: pointer;
  color: #1a2a30;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.property-img-prev { left: 10px; }
.property-img-next { right: 10px; }

/* Show arrows on hover for pointer devices, always for touch */
.property:hover .property-img-nav,
.property-img-stage:focus-within .property-img-nav {
  opacity: 1;
}

.property-img-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.property-img-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 12px;
  z-index: 3;
  pointer-events: none;
}

/* Touch devices: arrows always visible since hover isn't available. */
@media (hover: none) {
  .property-img-nav { opacity: 1; }
}

/* Phones: shrink the arrows so they don't crowd the card photo. */
@media (max-width: 540px) {
  .property-img-nav { width: 30px; height: 30px; }
  .property-img-nav svg { width: 14px; height: 14px; }
  .property-img-counter { font-size: 10px; padding: 2px 7px; }
}

.property-title-link,
.property-ctas .btn {
  touch-action: manipulation;
}

@media (hover: hover) {
  a.property-img:hover {
    opacity: 0.92;
  }
}

.property-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.property-title-link:hover {
  color: var(--teal-mid);
}

.property-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.property-body h3 {
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  font-size: 16px;
  color: var(--teal-deep);
  text-transform: uppercase;
}

.property-body p {
  color: #5c5042;
  font-size: 14px;
  flex: 1;
  /* Reserve space for ~2 lines so short-location descriptions don't leave
     uneven gaps between cards in the same row */
  min-height: 2.8em;
}

/* Per-collection card accents — a thin collection-colored ribbon on top of
   each card, and tags + outlined "More Info" borders picking up the
   collection's palette. Keeps cards readable (cream bg, teal-deep titles)
   while giving each collection a visual signature that matches its page. */

/* ---- Waterfront (teal) ---- */
.page-waterfront .property { border-top: 3px solid var(--teal-deep); }
.page-waterfront .property-body h3 a,
.page-waterfront .property-body h3 { color: var(--teal-deep); }
.page-waterfront .btn {
  border-color: rgba(14, 77, 82, 0.55);
  color: var(--teal-deep);
  background: rgba(14, 77, 82, 0.05);
}

/* ---- Adventure (olive) ---- */
.page-adventure .property { border-top: 3px solid var(--olive); }
.page-adventure .property-body h3 a,
.page-adventure .property-body h3 { color: var(--olive); }
.page-adventure .btn {
  border-color: rgba(132, 140, 42, 0.6);
  color: #5c641a;
  background: rgba(132, 140, 42, 0.06);
}

/* ---- Gatherings (orange) ---- */
.page-gatherings .property { border-top: 3px solid var(--orange); }
.page-gatherings .property-body h3 a,
.page-gatherings .property-body h3 { color: var(--orange); }
.page-gatherings .btn {
  border-color: rgba(201, 125, 43, 0.6);
  color: #8e5518;
  background: rgba(201, 125, 43, 0.06);
}

/* ---- Serene (rose) ---- */
.page-serene .property { border-top: 3px solid var(--rose); }
.page-serene .property-body h3 a,
.page-serene .property-body h3 { color: var(--rose); }
.page-serene .btn {
  border-color: rgba(184, 110, 109, 0.6);
  color: #7d3f3e;
  background: rgba(184, 110, 109, 0.06);
}

/* Per-page "More Info" hover — filled cream-luxe background on every page
   except Luxe (handled separately). The text picks up each page's own
   collection color so the hover reads as "that collection's accent color
   on a Luxe-cream card", visually tying every page back to the brand's
   signature cream while preserving each collection's identity. */
.page-waterfront .btn:hover {
  background: var(--cream-luxe);
  color: var(--teal-deep);
  border-color: var(--cream-luxe);
}
.page-waterfront .property-title-link:hover { color: var(--teal-hero); }

.page-adventure .btn:hover {
  background: var(--cream-luxe);
  color: var(--olive);
  border-color: var(--cream-luxe);
}
.page-adventure .property-title-link:hover { color: var(--orange); }

.page-gatherings .btn:hover {
  background: var(--cream-luxe);
  color: var(--orange);
  border-color: var(--cream-luxe);
}
.page-gatherings .property-title-link:hover { color: var(--teal-deep); }

.page-serene .btn:hover {
  background: var(--cream-luxe);
  color: var(--rose);
  border-color: var(--cream-luxe);
}
.page-serene .property-title-link:hover { color: var(--teal-hero); }

/* All Villas master directory — same cream hover, with teal-deep text as a
   neutral default since this page mixes every collection together. */
.page-all-villas .btn:hover {
  background: var(--cream-luxe);
  color: var(--teal-deep);
  border-color: var(--cream-luxe);
}

.page-luxe .btn:hover {
  background: var(--cream-luxe);
  color: #8a6a2e;
  border-color: var(--cream-luxe);
}
.page-luxe .property-title-link:hover { color: var(--teal-deep); }

/* Luxe collection page — villa cards use the #8a6a2e brown (same as the
   Luxe header border) instead of the default cream. Text + tag colors are
   flipped to cream tones for readability on the dark card. */
/* ---- Luxe (brown on cream) ----
   Cards use the default off-white background like every other page — the
   Luxe palette shows through via tags, buttons, and the brown top ribbon. */
.page-luxe .property { border-top: 3px solid #8a6a2e; }
.page-luxe .property-body h3 a,
.page-luxe .property-body h3 { color: #8a6a2e; }
.page-luxe .btn {
  border-color: rgba(138, 106, 46, 0.55);
  color: #8a6a2e;
  background: rgba(138, 106, 46, 0.05);
}

.property-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  align-content: flex-start;
}

/* Second tag row — collection classification ("Also Waterfront" / collection
   links) and the "Coming Soon" badge sit on their own line, beneath the
   bedrooms/guests row. min-height reserves the line even when a villa has no
   secondary collection, so cards in a row stay vertically aligned. */
.property-tags-collections {
  margin-top: -4px;
  min-height: 24px;
}

.tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--teal-mid);
  color: var(--teal-deep);
  background: rgba(45,123,128,0.06);
}

/* Secondary-collection tag: appears on properties that belong to more than
   one collection (e.g., a Waterfront villa that is also Luxe). */
.tag.tag-secondary {
  border-color: var(--cream-luxe);
  background: rgba(240, 220, 161, 0.22);
  color: #8a6a2e;
}

/* When a secondary tag is rendered as a link (on all-villas, for jumping
   to a collection page), give it a subtle hover state. */
a.tag.tag-secondary {
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a.tag.tag-secondary:hover {
  background: rgba(240, 220, 161, 0.4);
  border-color: #c4a95a;
  color: #6d5020;
}

/* Future / not-yet-available property badge. */
.tag.tag-future {
  border-color: var(--orange);
  background: rgba(201, 125, 43, 0.12);
  color: var(--orange);
}

.property-ctas {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* "More Info" button — outlined & translucent, echoing the homepage Book Now
   button's glass/outline aesthetic but sized like the solid Check Availability
   button beside it. On hover it fills in to its solid counterpart. Uses
   inline-flex so the label is perfectly centered horizontally and vertically
   regardless of padding/font-size. */
.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid rgba(14, 77, 82, 0.55);
  color: var(--teal-deep);
  background: rgba(14, 77, 82, 0.04);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}

.btn:hover {
  background: var(--teal-deep);
  color: var(--cream-luxe);
  border-color: var(--teal-deep);
}

/* "Check Availability" — solid, always the collection's own color on the
   collection pages so the button reinforces the collection identity. Default
   stays teal-deep for the all-villas and homepage contexts. */
.btn.primary {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-deep);
}

.btn.primary:hover {
  background: var(--teal-mid);
  color: #fff;
  border-color: var(--teal-mid);
}

/* On the collection pages, page-specific primary rules (below) override the
   default teal-mid hover above. Apply a subtle brightness lift so every
   collection's primary button still responds on hover regardless of its
   base color. */
.page-waterfront .btn.primary:hover,
.page-adventure  .btn.primary:hover,
.page-gatherings .btn.primary:hover,
.page-serene     .btn.primary:hover {
  filter: brightness(1.1);
}

.page-waterfront .btn.primary {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-deep);
}

.page-adventure .btn.primary {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
}

.page-gatherings .btn.primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

.page-serene .btn.primary {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

.page-luxe .btn.primary {
  background: #8a6a2e;
  color: #fff;
  border-color: #8a6a2e;
}

/* All Villas — Check Availability uses the exact sky-blue tone visible in
   the header-palms photo behind the ANTARES header bar, sampled from that
   image at #5098a1. Hover uses the same brightness-lift pattern as the
   other collection pages' primary buttons. */
.page-all-villas .btn.primary {
  background: #5098a1;
  color: #fff;
  border-color: #5098a1;
}

.page-all-villas .btn.primary:hover {
  background: #5098a1;
  color: #fff;
  border-color: #5098a1;
  filter: brightness(1.1);
}

.page-luxe .btn.primary:hover {
  filter: brightness(1.15);
}

/* On the Luxe brown villa cards the outlined "More Info" button needs its
   strokes and text shifted to cream so it reads against the dark card. */

/* ===================================================================
   Simple content page (About, Contact, All Villas stub)
   =================================================================== */
.content-page {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 60px);
}
.content-page h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  color: var(--teal-deep);
  margin-bottom: clamp(28px, 3vw, 48px);
  text-align: center;
}

/* About / Contact body paragraphs are short narrative blocks — center-align
   them under the centered heading so the page reads as a tight, balanced
   composition rather than a left-justified wall of text. */
.content-page p {
  text-align: center;
  line-height: 1.7;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.content-page .caps {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  font-size: 13px;
  color: var(--teal-mid);
  margin-bottom: 30px;
}
.content-page p { margin-bottom: 22px; color: #4a3f32; }

/* ===================================================================
   ALL VILLAS PAGE — master directory of every property.
   =================================================================== */
.all-villas-hero {
  background: var(--teal-hero);
  color: var(--script-gold);
  padding: clamp(60px, 7vw, 120px) clamp(20px, 5vw, 80px);
  text-align: center;
}

.all-villas-hero-inner { max-width: 860px; margin: 0 auto; }

.all-villas-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  font-size: clamp(10px, 0.9vw, 13px);
  text-transform: uppercase;
  /* Matched to .villa-eyebrow — wider gap below so script ascenders below
     don't crowd the small-caps eyebrow text. */
  margin: 0 0 clamp(26px, 2.6vw, 42px);
  padding-left: 0.5em;
  opacity: 0.9;
}

.all-villas-title {
  font-family: var(--font-script);
  font-weight: 400;
  /* Matched to .villa-name on individual villa pages */
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.1;
  color: var(--script-gold);
  margin: 0 0 clamp(16px, 1.6vw, 24px);
}

.all-villas-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.95;
}

.all-villas-divider {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 60px) 0;
  text-align: center;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.all-villas-divider::before,
.all-villas-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--script-gold);
  opacity: 0.35;
}

.all-villas-divider-label {
  font-family: var(--font-display);
  letter-spacing: 0.45em;
  font-size: clamp(11px, 1vw, 14px);
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* ===================================================================
   VILLA DETAIL PAGE — one page per property.
   Hero photo banner followed by centered info column.
   =================================================================== */
.villa-hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  min-height: 280px;
  max-height: 680px;
  background-size: cover;
  background-position: center;
  background-color: #1a2a30;
}

/* ---- Villa photo gallery ----
   Horizontal scroll strip replacing the single large hero. Strip is sized
   to roughly half the previous hero height (~340px max). Photos keep their
   native aspect ratio; users scroll horizontally to browse. Scroll-snap
   gives a gentle paging feel. Touch scrolling is hardware-accelerated on
   iOS via -webkit-overflow-scrolling. */
.villa-gallery {
  width: 100%;
  /* The gallery's background shows through the gaps between photos, so
     colour it with the same cream as the header accent strips for visual
     continuity with the rest of the site. */
  background: var(--cream-strip);
  position: relative;
}

/* Scroll arrow buttons overlaying the left and right edges of the gallery.
   Colors match the "More Info" button on the collection pages — teal border
   + teal chevron in the default state, filling with cream-luxe on hover.
   Uses an inline SVG chevron (not a text glyph) so the arrow always sits
   perfectly centered in the circle regardless of font metrics. */
.villa-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--teal-deep);
  background: rgba(250, 247, 241, 0.85);
  color: var(--teal-deep);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}

.villa-gallery-nav svg {
  display: block;
  width: 18px;
  height: 18px;
}

.villa-gallery-nav:hover {
  background: var(--cream-luxe);
  color: var(--teal-deep);
  border-color: var(--cream-luxe);
}

.villa-gallery-nav-prev { left: clamp(10px, 1.5vw, 24px); }
.villa-gallery-nav-next { right: clamp(10px, 1.5vw, 24px); }

.villa-gallery-nav[hidden],
.villa-gallery-nav.is-disabled {
  opacity: 0;
  pointer-events: none;
}

.villa-gallery-scroll {
  display: flex;
  /* Same thickness as the cream header accent strip (.header-accent height)
     so the dividers between photos read as an extension of the header trim. */
  gap: clamp(10px, 0.94vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: clamp(220px, 30vw, 400px);
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 226, 179, 0.4) transparent;
}

.villa-gallery-scroll::-webkit-scrollbar { height: 8px; }
.villa-gallery-scroll::-webkit-scrollbar-track { background: transparent; }
.villa-gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(242, 226, 179, 0.4);
  border-radius: 4px;
}
.villa-gallery-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 226, 179, 0.65);
}

.villa-gallery-scroll img {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transition: filter 0.2s ease;
}

.villa-gallery-scroll img:hover,
.villa-gallery-scroll img:focus {
  filter: brightness(1.06);
  outline: none;
}

/* ---- Photo lightbox modal ---- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  /* CRITICAL: must sit above the site-header (z-index: 10000). Without
     this, on mobile the header covered the top strip of the lightbox —
     including where the close X and prev arrow live — leaving visitors
     with no visible way to exit the expanded photo. */
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  background: rgba(10, 20, 24, 0.93);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.photo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.photo-lightbox-image {
  /* Explicit width AND height are required for object-fit: contain to
     actually preserve aspect ratio inside the box. With only max-* set,
     the image was sometimes stretched/cropped by the flex container's
     sizing logic on desktop, cutting off the sides or top/bottom of
     wider photos. Fixing the box to 92vw x 88vh (capped at 1400px wide)
     and using object-fit: contain guarantees the full photo fits with
     letterbox space around it instead of being clipped. */
  width: 92vw;
  height: 88vh;
  max-width: 1400px;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.3s ease, opacity 0.2s ease;
  user-select: none;
}

.photo-lightbox.is-open .photo-lightbox-image { transform: scale(1); }

.photo-lightbox-close,
.photo-lightbox-nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(242, 226, 179, 0.45);
  color: var(--script-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  transition: background 0.2s ease, border-color 0.2s ease;
  border-radius: 50%;
  /* CRITICAL: sit above the image. The lightbox image is 92vw x 88vh —
     on mobile that box covers essentially the entire viewport, including
     where the close and nav buttons live. Since the image comes after
     the buttons in the DOM and they share a stacking context, without
     an explicit z-index the image would paint on top and swallow the
     button taps — leaving no visible way to close the lightbox. */
  z-index: 2;
}

.photo-lightbox-close {
  top: clamp(16px, 2.5vw, 34px);
  right: clamp(16px, 2.5vw, 34px);
  width: 48px;
  height: 48px;
  padding: 0;
  /* Slight dark backdrop so the X button reads against a bright photo
     behind it on mobile — the border alone can wash out. */
  background: rgba(10, 20, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.photo-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
}

.photo-lightbox-close svg,
.photo-lightbox-nav svg { display: block; }

.photo-lightbox-prev { left: clamp(16px, 3vw, 44px); }
.photo-lightbox-next { right: clamp(16px, 3vw, 44px); }

.photo-lightbox-close:hover,
.photo-lightbox-nav:hover {
  background: rgba(242, 226, 179, 0.15);
  border-color: var(--script-gold);
}

@media (max-width: 540px) {
  .villa-gallery-nav { width: 38px; height: 38px; }
  .villa-gallery-nav svg { width: 15px; height: 15px; }
  .photo-lightbox-close { width: 40px; height: 40px; }
  .photo-lightbox-close svg { width: 17px; height: 17px; }
  .photo-lightbox-nav { width: 42px; height: 42px; }
  .photo-lightbox-nav svg { width: 18px; height: 18px; }
}

@media (max-width: 540px) {
  .villa-gallery-scroll { height: clamp(200px, 52vw, 300px); }
}

.villa-detail {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(50px, 7vw, 110px) clamp(24px, 6vw, 60px);
  text-align: center;
}

/* Villa page layout: title block, then gallery, then description. Both
   halves of the split .villa-detail need reduced padding on the sides
   facing the gallery so the three sections read as one continuous block
   instead of three stacked cards separated by dead space. */
.villa-detail-upper { padding-bottom: clamp(12px, 1.5vw, 22px); }
/* More breathing room between the photo gallery and "About this Villa"
   title. Previously ~44px felt cramped against the last row of photos;
   ~90px gives the script heading room to land. */
.villa-detail-lower {
  padding-top: clamp(56px, 6.5vw, 96px);
  /* Zero bottom padding — the Why boxes wrap below owns the entire gap
     via its own top padding, so no need to double-pad here. */
  padding-bottom: 0;
}

/* Check Availability button, promoted above the gallery. Centered
   standalone with generous room above/below so it reads as a primary
   call-to-action rather than a stray link between the title and photos. */
.villa-cta-standalone {
  display: flex;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 60px) clamp(28px, 3.5vw, 48px);
}

/* Second CTA — now sits between the House Rules panel and the location
   map. Balanced vertical padding: enough to breathe between the white
   rules card above and the map section below, without floating. */
.villa-cta-inline {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 6vw, 60px);
}

/* Script-font title above the description. Uses Parlare (same family as
   the "Curated by Experience" script on the homepage) so the section
   reads as a warm intro rather than a system-font header. */
.villa-description-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  color: var(--teal-deep);
  text-align: center;
  margin: 0 0 clamp(16px, 2vw, 28px);
}

/* Read more / Read less toggle for long villa descriptions.
   Shows the first paragraph always; wraps the remaining paragraphs in a
   native <details> that expands on click. When open, the summary jumps
   to the bottom via `order:` so the toggle sits below the full
   description instead of awkwardly between paragraphs 1 and 2. */
.villa-description-more {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.villa-description-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  border-bottom: 1px solid rgba(14, 77, 82, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.villa-description-more > summary::-webkit-details-marker { display: none; }
.villa-description-more > summary::marker { display: none; }
.villa-description-more > summary:hover {
  color: #062e31;
  border-color: rgba(14, 77, 82, 0.55);
}

/* When expanded: paragraphs stack above (natural order), summary moves
   to the last position — so "Read less" sits at the bottom of the
   expanded block, not sandwiched between paragraphs 1 and 2. */
.villa-description-more[open] > summary {
  order: 999;
  margin-top: 20px;
}

/* Paragraphs inside the details need explicit alignment because the
   parent flex container centers them by default (align-items: center). */
.villa-description-more > p {
  align-self: stretch;
}

/* Toggle label swap: show "Read more" when closed, "Read less" when open */
.villa-description-more:not([open]) .rm-less { display: none; }
.villa-description-more[open]      .rm-more { display: none; }

/* Chevron rotation on open */
.villa-description-more .rm-chevron svg {
  display: block;
  transition: transform 0.25s ease;
}
.villa-description-more[open] .rm-chevron svg { transform: rotate(180deg); }

/* Give paragraphs inside .villa-description-more the same rhythm as those
   outside it, so the expanded content reads as one continuous block. */
.villa-description-more p { margin: 0 0 1em; }
.villa-description-more p:last-child { margin-bottom: 0; }

/* "Return to Serene or Adventure" back link, now placed below the Villa
   Experience section and above the description. Centered, subtle. */
.villa-back-standalone {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 6vw, 60px) clamp(12px, 1.5vw, 20px);
  text-align: center;
}

.villa-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  font-size: clamp(10px, 0.9vw, 13px);
  text-transform: uppercase;
  color: var(--teal-mid);
  /* Wider gap below the eyebrow so the Pinyon Script ascenders on the villa
     name below don't crowd or overlap it. */
  margin-bottom: clamp(26px, 2.6vw, 42px);
  padding-left: 0.5em;
}

.villa-name {
  font-family: var(--font-script);
  font-weight: 400;
  /* Slightly reduced from the previous clamp(42px, 6vw, 92px) */
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.1;
  color: var(--teal-deep);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}

.villa-location {
  font-family: var(--font-display);
  letter-spacing: 0.28em;
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--teal-deep);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}

.villa-future-badge {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.28em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange);
  background: rgba(201, 125, 43, 0.08);
  padding: 6px 14px;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}

.villa-description {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: #4a3f32;
  margin-bottom: clamp(32px, 3vw, 44px);
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* When the description has multiple paragraphs, give each one breathing
   room and keep them legible for long-form prose. */
.villa-description p {
  margin: 0 0 1.1em;
}

.villa-description p:last-child { margin-bottom: 0; }

/* Stand-out callouts (e.g., "6 night minimum stay required" / "NEW air
   conditioning added") get a subtle teal accent so they read as important
   booking-policy notices, not body prose. */
.villa-description .villa-description-highlight {
  font-weight: 500;
  color: var(--teal-deep);
}

/* Closing notes / fine-print rendered slightly muted and italic */
.villa-description .villa-description-note {
  font-style: italic;
  font-size: clamp(13px, 0.95vw, 15px);
  color: #6a5a48;
  margin-top: 1.4em;
}

.villa-cta-row {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.villa-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 40px;
  /* Matches the Check Availability button on the All Villas page — the
     sky-blue sampled from the header-palms photo, with a brightness lift
     on hover instead of a color switch. */
  background: #5098a1;
  color: #fff;
  border: 1px solid #5098a1;
  transition: filter 0.2s ease;
  /* Fast, no-delay tap response on iOS (skips the 300ms double-tap zoom
     heuristic) so the scroll to #calendar starts the instant the user taps. */
  touch-action: manipulation;
}

.villa-cta:hover { filter: brightness(1.1); }

.villa-back {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--teal-mid);
}

.villa-back a {
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.villa-back a:hover { color: var(--teal-hero); }

/* Extra breathing room when the back-link lives under the calendar legend
   instead of under the Check Availability button. */
.villa-back-after-calendar {
  margin-top: clamp(24px, 3vw, 40px);
}

/* ---- Availability calendar (mock) ---------------------------------
   A visual mock of a Lodgify availability calendar. Sits directly below the
   villa-detail section on every villa page. Two months side-by-side on
   desktop; stacks to a single column on mobile. Colors + typography match
   the rest of the site. The .calendar-day-booked / -available / -today /
   -past classes are the hooks for wiring real Lodgify availability data
   into the cell states later. */
/* Calendar sits directly under the villa hero photo. Slightly more generous
   top padding than before (the hero's photo is right above), and a wider
   max-width to comfortably accommodate a 2x2 grid of four months. */
/* Calendar now sits BELOW the villa-detail section, which already carries
   generous bottom padding. Ease the calendar's own top padding so the two
   sections don't double up; keep healthy bottom padding before the footer. */
.villa-calendar-section {
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 60px) clamp(60px, 8vw, 120px);
  background: transparent;
  /* When Check Availability anchor-scrolls to #calendar, the sticky site
     header would otherwise cover the top of this section. Reserve enough
     top margin for the header + accent strips so the "LIVE AVAILABILITY"
     eyebrow lands fully visible below the header on every viewport. */
  scroll-margin-top: clamp(140px, 13vw, 260px);
}

.villa-calendar-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.calendar-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  /* Sits noticeably larger than the month titles (16px max) so the section
     heading reads as the primary label of the calendar. */
  font-size: clamp(15px, 1.55vw, 22px);
  text-transform: uppercase;
  color: var(--teal-mid);
  /* Balanced gap below — roughly 1x the font-size so the italic sub-line
     reads as a caption belonging to the heading, not a separate block. */
  margin: 0 0 clamp(18px, 1.8vw, 28px);
  padding-left: 0.5em;
}

.calendar-title {
  font-family: var(--font-script);
  font-weight: 400;
  /* Half the previous clamp(34px, 4.8vw, 72px) — compact secondary heading */
  font-size: clamp(17px, 2.4vw, 36px);
  line-height: 1.1;
  color: var(--teal-deep);
  margin: 0 0 clamp(10px, 1vw, 16px);
}

.calendar-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #6a5a48;
  max-width: 520px;
  /* Larger bottom margin gives the sub-text room to breathe before the
     calendar grid below — the section feels less crammed. */
  margin: 0 auto clamp(48px, 5.5vw, 80px);
  font-style: italic;
  opacity: 0.85;
}

/* On mobile, force the hint text to break onto exactly two lines:
     "Click an arrival and a departure date"
     "to check availability and book."
   The tail span becomes block-level so the browser wraps at the
   exact spot we want instead of choosing an awkward break itself. */
@media (max-width: 540px) {
  .calendar-sub .calendar-sub-tail { display: block; }
}

.calendar-months {
  display: grid;
  /* Two columns on desktop → four months render as a balanced 2x2 grid.
     On narrower screens, auto-collapses to single column. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(20px, 2vw, 32px);
}

@media (max-width: 780px) {
  .calendar-months { grid-template-columns: 1fr; }
}

/* "Show more months" button injected below the live calendar by
   js/availability.js. Styled like a subtle secondary CTA — clearly
   tappable but visually calmer than the primary Check Availability
   button so it doesn't compete for attention. */
.calendar-show-more {
  display: block;
  margin: 0 auto clamp(28px, 3vw, 44px);
  padding: 12px 32px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: transparent;
  border: 1px solid var(--teal-deep);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.calendar-show-more:hover {
  background: var(--teal-deep);
  color: #ffffff;
}
.calendar-show-more[hidden] { display: none; }

.calendar-month {
  background: #faf7f1;
  border: 1px solid rgba(14, 77, 82, 0.1);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 2px 14px rgba(14, 77, 82, 0.05);
}

.calendar-month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.calendar-month-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 500;
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-weekday {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-mid);
  text-align: center;
  padding: 6px 0 10px;
  font-weight: 500;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--teal-deep);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: default;
  position: relative;
}

.calendar-day-empty { visibility: hidden; }

.calendar-day-past {
  color: rgba(14, 77, 82, 0.25);
  text-decoration: line-through;
}

.calendar-day-available {
  color: var(--teal-deep);
  background: rgba(14, 77, 82, 0.04);
  border-color: rgba(14, 77, 82, 0.14);
  cursor: pointer;
}

.calendar-day-available:hover,
.calendar-day-available:focus {
  background: var(--teal-hero);
  color: #fff;
  border-color: var(--teal-hero);
  outline: none;
}

.calendar-day-today:hover,
.calendar-day-today:focus {
  filter: brightness(1.15);
  outline: none;
  cursor: pointer;
}

.calendar-day-booked {
  /* Slightly darker orange wash + firmer border + less-faded text so booked
     cells pop against the available-day cells without losing the "muted,
     can't interact" feel. */
  color: rgba(14, 77, 82, 0.6);
  background: rgba(201, 125, 43, 0.22);
  border-color: rgba(201, 125, 43, 0.55);
  text-decoration: line-through;
}

.calendar-day-today {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-deep);
  font-weight: 600;
}

/* Active-widget states — applied by js/main.js when a user picks dates */
.calendar-day-range-start,
.calendar-day-range-end {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-deep);
  font-weight: 600;
}

.calendar-day-range-middle {
  background: rgba(14, 77, 82, 0.22);
  color: var(--teal-deep);
  border-color: rgba(14, 77, 82, 0.3);
}

.calendar-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 32px);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  /* Generous gap below the legend so the "Click an arrival..." sub-text
     reads as a separate step rather than crammed against the swatches. */
  margin: 0 0 clamp(28px, 3.2vw, 52px);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid transparent;
  display: inline-block;
}

.legend-swatch-available {
  background: rgba(14, 77, 82, 0.04);
  border-color: rgba(14, 77, 82, 0.14);
}

.legend-swatch-booked {
  /* Matches the darker .calendar-day-booked wash above */
  background: rgba(201, 125, 43, 0.22);
  border-color: rgba(201, 125, 43, 0.55);
}

.legend-swatch-today { background: var(--teal-deep); border-color: var(--teal-deep); }

.legend-swatch-selected {
  /* Matches the sky-blue used for arrival/departure cells in the
     click-to-book picker below. */
  background: #5098a1;
  border-color: #5098a1;
}

/* ===================================================================
   CLICK-TO-BOOK PICKER (Casa del Palmas + Easy Breezes)
   ===================================================================
   On villa pages that have a Lodgify Book Now Box widget, js/booking-select.js
   turns the 4-month grid into a two-tap range picker:
     - Arrival / departure cells get a solid sky-blue fill.
     - Days between get a light sky-blue tint.
     - A small banner with the date range and a "Continue to booking" CTA
       appears beneath the grid; the CTA opens Lodgify's hosted checkout
       in a new tab with arrival + departure pre-filled as URL params.
   On villa pages without a Book Now Box, the script does nothing and
   these styles are inert. */
.calendar-day-arrival,
.calendar-day-departure {
  background: #5098a1;
  border-color: #5098a1;
  color: #ffffff;
  font-weight: 500;
}
.calendar-day-arrival:hover,
.calendar-day-departure:hover,
.calendar-day-arrival:focus,
.calendar-day-departure:focus {
  background: #3a7179;
  border-color: #3a7179;
}
.calendar-day-in-range {
  background: rgba(80, 152, 161, 0.18);
  border-color: rgba(80, 152, 161, 0.28);
  color: #0e4d52;
}

/* The banner now reads as a PROMINENT pop-up: solid sky-blue panel,
   high-contrast white CTA, deep drop shadow, and a slide-up entrance
   animation so it visibly arrives the moment the user picks dates.
   It uses position: sticky pinned to the bottom of the viewport so it
   stays visible while the user is scrolling around the calendar
   looking at availability — impossible to miss.

   Layout is a vertical stack — date summary on top, "Continue to
   booking" CTA centered directly beneath it, and a small Clear
   affordance at the bottom. This puts the CTA visually under the
   dates it acts on, rather than pushed off to the right. */
.calendar-select-banner {
  position: sticky;
  bottom: 24px;
  z-index: 50;
  margin: 36px auto 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  background: #5098a1;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(14, 77, 82, 0.38),
              0 4px 12px rgba(14, 77, 82, 0.22);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  animation: bookingBannerPop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}
.calendar-select-banner[hidden] { display: none; }

@keyframes bookingBannerPop {
  0%   { opacity: 0; transform: translateY(28px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.calendar-select-text {
  /* Full-width so the dates summary spans the top of the stack and the
     CTA can center underneath it cleanly. */
  flex: none;
  width: 100%;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  /* Order overrides the DOM sequence so the visual stack reads
     dates → CTA → Clear, even though the JS inserts them as
     [text, Clear button, CTA link]. */
  order: 1;
}
.calendar-guests       { order: 2; }
.calendar-select-cta   { order: 3; }
.calendar-select-clear { order: 4; }

/* ===================================================================
   GUEST PICKER (matches Lodgify Book Now Box design)
   ===================================================================
   Sits inside the sticky booking banner between the date summary
   and the "Continue to booking" CTA. Compact toggle button by
   default; click to expand a full picker with +/- controls for
   Adults / Children / Infants / Pets. Selections are passed through
   to the Lodgify checkout URL as query params. */
.calendar-guests {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guests-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.15);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #0e4d52;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.guests-toggle:hover {
  background: #f7f5ef;
  border-color: rgba(14, 77, 82, 0.28);
}

.guests-toggle-label {
  font-weight: 400;
  color: #6a5a48;
}

.guests-toggle-summary {
  font-weight: 500;
  color: #0e4d52;
  flex: 1;
  text-align: left;
}

.guests-toggle-chevron {
  font-size: 12px;
  color: #6a5a48;
  transition: transform 0.2s ease;
}
.guests-toggle[aria-expanded="true"] .guests-toggle-chevron {
  transform: rotate(180deg);
}

.guests-panel {
  margin-top: 8px;
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(14, 77, 82, 0.22);
  padding: 8px 4px 12px;
  animation: guestsPanelIn 0.2s ease;
}
@keyframes guestsPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}

.guest-info {
  text-align: left;
  flex: 1;
}
.guest-type {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #0e4d52;
  line-height: 1.2;
}
.guest-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: #6a5a48;
  margin-top: 2px;
}

.guest-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.guest-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #5098a1;
  background: #ffffff;
  color: #5098a1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.guest-btn:hover:not(:disabled) {
  background: #5098a1;
  color: #ffffff;
}
.guest-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.guest-count {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #0e4d52;
  min-width: 18px;
  text-align: center;
}

.guests-done {
  display: block;
  margin: 8px 12px 4px auto;
  padding: 8px 20px;
  background: #5098a1;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.guests-done:hover {
  background: #3a7179;
}

.calendar-select-clear {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.calendar-select-clear:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
}

.calendar-select-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: #ffffff;
  color: #0e4d52;
  padding: 14px 22px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(14, 77, 82, 0.28);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.calendar-select-cta:hover {
  background: #f2e2b3;
  color: #0e4d52;
  transform: translateY(-1px);
}
.calendar-select-cta[hidden] { display: none; }

@media (max-width: 540px) {
  .calendar-select-banner {
    bottom: 16px;
    padding: 18px 20px;
    margin-top: 28px;
    gap: 12px;
  }
  .calendar-select-clear {
    /* Small text-like button on mobile so it takes less visual weight
       than the primary CTA above it. */
    font-size: 10px;
    padding: 8px 12px;
  }
}

/* ---- Calendar widget (active booking controls) ----
   Summary of the user's selected dates + Book Now + Clear buttons.
   Sits just below the legend inside the calendar section. */
.calendar-widget {
  max-width: 720px;
  /* Top + bottom margin both set — the widget now sits between the sub
     instructions and the calendar grid, so it needs breathing room on both
     sides instead of only above. */
  margin: clamp(28px, 3vw, 44px) auto;
  padding: clamp(22px, 2.4vw, 34px);
  background: #faf7f1;
  border: 1px solid rgba(14, 77, 82, 0.12);
  box-shadow: 0 2px 14px rgba(14, 77, 82, 0.06);
  text-align: center;
}

.calendar-widget-dates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-bottom: clamp(18px, 2vw, 28px);
}

.calendar-widget-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 clamp(4px, 1vw, 12px);
  border-right: 1px solid rgba(14, 77, 82, 0.12);
}

.calendar-widget-field:last-child { border-right: 0; }

.calendar-widget-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

.calendar-widget-value {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.05vw, 14px);
  color: var(--teal-deep);
  font-weight: 500;
}

.calendar-widget-cta {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  background: #5098a1;
  border: 1px solid #5098a1;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
  font-family: inherit;
  font-family: var(--font-display);
}

.calendar-widget-cta:hover:not(:disabled) { filter: brightness(1.1); }

.calendar-widget-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.calendar-widget-clear {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.calendar-widget-clear:hover { opacity: 1; }

@media (max-width: 540px) {
  .calendar-widget { padding: 18px 14px; }
  .calendar-widget-dates { grid-template-columns: 1fr; gap: 10px; }
  .calendar-widget-field {
    border-right: 0;
    border-bottom: 1px solid rgba(14, 77, 82, 0.12);
    padding-bottom: 10px;
  }
  .calendar-widget-field:last-child { border-bottom: 0; padding-bottom: 0; }
  .calendar-widget-cta { padding: 12px 20px; font-size: 12px; letter-spacing: 0.26em; }
}

@media (max-width: 540px) {
  .calendar-months { gap: 20px; }
  .calendar-month { padding: 18px 14px; }
  .calendar-day { font-size: 12px; }
  .calendar-legend { gap: 14px; font-size: 9px; letter-spacing: 0.18em; }
}

/* ===================================================================
   BOOKING PAGE — headline band over a Lodgify widget placeholder.
   =================================================================== */
.book-hero {
  background: var(--teal-hero);
  color: var(--script-gold);
  padding: clamp(60px, 7vw, 120px) clamp(20px, 5vw, 80px);
  text-align: center;
}

.book-hero-inner { max-width: 860px; margin: 0 auto; }

.book-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  font-size: clamp(10px, 0.9vw, 13px);
  text-transform: uppercase;
  /* Matched to .villa-eyebrow — wider gap below so script ascenders below
     don't crowd the small-caps eyebrow text. */
  margin: 0 0 clamp(26px, 2.6vw, 42px);
  padding-left: 0.5em;
  opacity: 0.9;
}

.book-title {
  font-family: var(--font-script);
  font-weight: 400;
  /* Matched to .villa-name on individual villa pages */
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.1;
  color: var(--script-gold);
  margin: 0 0 clamp(16px, 1.6vw, 24px);
}

.book-subtitle {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.95;
}

.book-subtitle a {
  color: var(--script-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.booking-widget-section {
  background: #fff;
  padding: clamp(40px, 6vw, 90px) clamp(20px, 5vw, 60px);
}

.booking-widget-inner {
  max-width: 1100px;
  margin: 0 auto;
  min-height: 320px;
}

/* Placeholder styling until the real Lodgify embed lands. Once the Lodgify
   snippet is pasted in, this rule is inert (no .lodgify-placeholder element
   will exist in the DOM). */
.lodgify-placeholder {
  border: 1px dashed rgba(14, 77, 82, 0.35);
  background: rgba(42, 116, 120, 0.05);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px);
  text-align: center;
  color: var(--teal-deep);
  font-family: var(--font-body);
}

.lodgify-placeholder-note {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.lodgify-placeholder-sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a3f32;
  max-width: 640px;
  margin: 0 auto;
}

.lodgify-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(14, 77, 82, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

/* Lodgify widget container + fallback — gives the slot a visible footprint
   so it's obvious where the widget should appear, even before the script
   has rendered (or if it can't). When the widget renders successfully,
   Lodgify replaces these children and the styling on the host wrapper is
   harmless.

   IMPORTANT: this floor is mobile-only. On desktop the Lodgify portable
   search bar renders as a single thin horizontal row (~64px tall); a
   180px catch-all floor would leave 100+px of empty white space below
   the widget — the "wonky tall white card" bug. The per-page scoped
   rules (.curated-search, .collection-search-section, .booking-widget-inner)
   already set min-height: 64px for desktop, so we only need this larger
   floor on mobile where the widget reflows to a stacked layout. */
@media (max-width: 540px) {
  #lodgify-search-bar { min-height: 180px; }
}

.lodgify-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  background: #faf7f1;
  border: 1px dashed rgba(14, 77, 82, 0.35);
  text-align: center;
  color: var(--teal-deep);
  font-family: var(--font-body);
}

.lodgify-fallback-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.lodgify-fallback-sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a3f32;
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Custom booking form on book.html ----
   A mock of a Lodgify-style availability form, styled to match the rest
   of the site (cream + teal palette, Cinzel/Pinyon type stack). */
.availability-form {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 60px) clamp(22px, 3vw, 50px);
  background: #faf7f1;
  border: 1px solid rgba(14, 77, 82, 0.12);
  box-shadow: 0 4px 24px rgba(14, 77, 82, 0.08);
}

.availability-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

.availability-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.availability-field-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-deep);
  padding-left: 0.25em;
}

.availability-field input,
.availability-field select {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--teal-deep);
  background: #fff;
  border: 1px solid rgba(14, 77, 82, 0.25);
  padding: 12px 14px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.availability-field input:focus,
.availability-field select:focus {
  outline: none;
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(14, 77, 82, 0.1);
}

.availability-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230e4d52' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.availability-submit {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  background: var(--teal-deep);
  border: 1px solid var(--teal-deep);
  cursor: pointer;
  transition: filter 0.2s ease;
}

.availability-submit:hover { filter: brightness(1.12); }

.availability-note {
  margin-top: clamp(18px, 2vw, 28px);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #6a5a48;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 540px) {
  .availability-form { padding: 24px 18px; }
  .availability-form-fields { gap: 14px; }
  .availability-submit { padding: 14px 20px; font-size: 12px; letter-spacing: 0.26em; }
}

/* ===================================================================
   GUEST REVIEWS — homepage section below the collection bands.
   Mirrors the "Stays Curated" band stylistically (teal hero + script-gold)
   so the page reads as bookended bands of teal wrapping the collections.
   =================================================================== */
.reviews {
  background: var(--teal-hero);
  color: var(--script-gold);
  padding: clamp(64px, 8vw, 140px) clamp(20px, 5vw, 80px);
  position: relative;
  text-align: center;
}

.reviews-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.5em;
  font-size: clamp(10px, 0.9vw, 13px);
  text-transform: uppercase;
  color: var(--script-gold);
  /* Wider gap below the eyebrow so it breathes above the script title */
  margin: 0 0 clamp(22px, 2.4vw, 40px);
  padding-left: 0.5em;
  opacity: 0.9;
}

.reviews-title {
  font-family: var(--font-script);
  font-weight: 400;
  /* ~3/4 the size of .curated h1 — secondary, more subdued emphasis */
  font-size: clamp(21px, 2.9vw, 60px);
  line-height: 1.05;
  margin: 0 0 clamp(20px, 2vw, 32px);
  color: var(--script-gold);
}

.reviews-summary {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  margin: 0 auto clamp(36px, 4vw, 64px);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.95;
}

.reviews-summary-stars {
  color: var(--script-gold);
  letter-spacing: 0.18em;
  font-size: 1.1em;
}

.reviews-summary-score {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: 0.04em;
}

.reviews-summary-note { opacity: 0.75; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin-bottom: clamp(36px, 4vw, 60px);
  text-align: left;
}

.review-card {
  background: rgba(242, 226, 179, 0.05);
  border: 1px solid rgba(242, 226, 179, 0.22);
  padding: clamp(26px, 2.4vw, 42px) clamp(22px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 22px);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.review-card:hover {
  background: rgba(242, 226, 179, 0.09);
  border-color: rgba(242, 226, 179, 0.4);
  transform: translateY(-2px);
}

.review-stars {
  color: var(--script-gold);
  letter-spacing: 0.25em;
  font-size: clamp(14px, 1.05vw, 17px);
}

.review-quote {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--script-gold);
  margin: 0;
  flex: 1;
}

.review-meta {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: clamp(10px, 1vw, 14px);
  border-top: 1px solid rgba(242, 226, 179, 0.2);
}

.reviewer-name {
  color: var(--script-gold);
  font-weight: 500;
}

.review-source {
  opacity: 0.72;
  letter-spacing: 0.18em;
}

.reviews-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--script-gold);
  padding: 14px 38px;
  border: 1px solid rgba(242, 226, 179, 0.6);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.reviews-cta:hover {
  background: var(--script-gold);
  color: var(--teal-hero);
  border-color: var(--script-gold);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  /* On mobile/tablet the hamburger moves to the LEFT of the ANTARES logo
     site-wide. `order: -1` swaps flex order without touching the HTML
     (menu-toggle sits first despite being the second child in the DOM),
     and the default margin-left:auto from the desktop rule is reset so
     the pair packs cleanly to the left edge. */
  .menu-toggle {
    display: inline-flex;
    order: -1;
    margin-left: 0;
    margin-right: clamp(10px, 2vw, 22px);
  }

  /* Hide the large collection-brand logo on mobile/tablet — the header now
     reads as [hamburger] [ANTARES] with an empty right edge. Desktop still
     shows the collection-brand on the right. */
  .collection-brand { display: none; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--teal-deep);
    padding: 18px 0;
    gap: 0;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    /* CRITICAL: pointer-events:none seals the closed menu so taps on the
       hero video / homepage content below can't leak through and hit
       menu links (which sit right under the header, invisibly). Without
       this, tapping the video area was routing to the second menu row
       (Adventure). visibility:hidden alone doesn't reliably block taps
       when descendants override visibility, so this is a belt-and-braces
       guard that works no matter what the descendants do. */
    pointer-events: none;
    transition: all 0.3s ease;
    /* Constrain to viewport minus header so the menu itself scrolls when
       content overflows — otherwise the bottom rows (ALL VILLAS, About,
       Contact, etc.) get clipped below the fold on shorter phones. */
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav > li, .site-nav > a { width: 100%; }
  .site-nav a { padding: 14px 28px; display: block; }
  .site-nav a::after { display: none; }

  .nav-dropdown .dropdown-menu {
    /* Mobile layout — inline list under the parent nav item instead of
       a floating dropdown card. */
    position: static;
    transform: none;
    box-shadow: none;
    /* Use background-color (not the shorthand `background:`) so the
       menu-palms image from the desktop rule is preserved on mobile. */
    background-color: rgba(0, 0, 0, 0.18);
    padding: 4px 0 10px;
    border-top: none;
    min-width: 0;
    /* CRITICAL: visibility / opacity are intentionally NOT forced visible
       here. If we set visibility:visible unconditionally, it overrides the
       parent .site-nav's visibility:hidden (an explicit child value beats
       inherited visibility) — which leaves the dropdown items tappable on
       top of the page even when the hamburger menu appears closed. The
       result is mis-routed taps: a user tapping a property card actually
       hits an overlaid menu link (Luxe / Adventure / etc.). We instead
       reveal the dropdown only when the parent .site-nav.open is set. */
  }

  /* Reveal dropdown items only when the mobile menu is explicitly open */
  .site-nav.open .nav-dropdown .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
  .nav-dropdown > a::before { display: none; }
  .dropdown-menu a { padding: 10px 44px; }

  .band-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    /* Center each band's content (logo + tagline) on mobile and tablet —
       desktop keeps the left-aligned two-column layout. */
    justify-items: center;
    text-align: center;
  }

  /* Center the collection wordmark within its band-label column on mobile */
  .band-label { align-items: center; }

  /* Enlarged collection wordmark — fills the band at tablet widths */
  .collection-logo { height: 64px; width: auto; }

  /* Uniform band height on mobile so all 5 collections are visually equal */
  .band { min-height: 280px; height: 280px; }

  /* Force each collection tagline onto a single line on mobile — smaller font */
  .band-tagline {
    white-space: nowrap;
    font-size: clamp(5px, 1.5vw, 8px);
    letter-spacing: 0;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 540px) {
  /* Header logo sizes tuned for mobile. Both are height-only so the browser
     preserves the native aspect ratio (no stretching). The collection-brand
     is rendered slightly taller than the ANTARES wordmark so it still reads
     as the dominant brand mark on an interior collection page, while being
     compact enough to sit alongside ANTARES and the hamburger without
     crowding on a 375–400px viewport. */
  .logo img { height: 30px; width: auto; }
  /* ~75% of the previous 38px mobile collection-brand size */
  .collection-brand img { height: 29px; width: auto; }

  /* Tighter reviews section on mobile — single column, smaller title, less padding */
  .reviews { padding: 52px 20px; }
  /* ~3/4 the size of .curated h1 mobile — subdued */
  .reviews-title { font-size: clamp(11px, 3.6vw, 20px); line-height: 1.15; }
  .reviews-summary { font-size: 12px; }
  .reviews-grid { gap: 16px; margin-bottom: 32px; }
  .review-card { padding: 22px 20px; gap: 14px; }
  .review-quote { font-size: 13px; line-height: 1.6; }
  .review-meta { font-size: 10px; letter-spacing: 0.18em; }
  .reviews-cta { padding: 11px 26px; font-size: 10px; letter-spacing: 0.28em; }

  /* Keep the 16:9 hero aspect on mobile — prevents Vimeo letterboxing */

  /* Mobile-scale the curated section — shorter height, tighter padding,
     smaller Book Now button to match the smaller script text. Because the
     palms photo is anchored at "center top" with background-size: cover,
     shrinking the section naturally crops the palms down to just the top
     of the image (mostly sky + a sliver of palms). */
  .curated {
    aspect-ratio: auto;
    min-height: 200px;
    padding: 36px 20px;
  }
  .curated-inner {
    max-width: 100%;
  }
  .curated h1 {
    /* "St. John Villas Curated by Experience" is allowed to wrap to two
       lines on phones — natural break is after "Villas" — sized small
       enough to read cleanly on narrow viewports. */
    font-size: clamp(16px, 4.6vw, 26px);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .book-now {
    font-size: 8px;
    padding: 6px 16px;
    letter-spacing: 0.22em;
  }
  /* Keep uniform band height on narrow phones (tuned smaller than tablets) */
  .band { padding: 44px 24px; min-height: 240px; height: 240px; }
  /* Enlarged collection wordmark — fills the band on phones */
  .collection-logo { height: 52px; width: auto; }
  .band-tagline { font-size: 13px; }

  /* Mobile: stack the villa-card CTAs and size them generously for easy
     thumb-tapping. Each button ends up full-width inside the card body
     with ~44px total touch height (meets common accessibility guidance).
     Explicit width:100% is belt-and-suspenders — the parent's default
     align-items:stretch would do it, but declaring it removes any doubt
     that the whole button area is tappable, not just its text. */
  .property-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .property-ctas .btn {
    width: 100%;
    padding: 14px 16px;
    font-size: 12px;
    letter-spacing: 0.26em;
    -webkit-tap-highlight-color: rgba(14, 77, 82, 0.15);
  }
}

/* ===================================================================
   GUEST REVIEW BLOCKS
   ===================================================================
   .villa-review appears on individual villa pages between the photo
   gallery and the calendar; .home-review appears on the homepage between
   the curated section and the collection bands. Same visual language —
   warm cream background, big script open-quote, italic body type, Cinzel
   attribution — with the homepage variant adding a CTA link to the
   featured villa underneath. */
.villa-review,
.home-review {
  background: #faf7f1;
  padding: clamp(56px, 6vw, 104px) clamp(20px, 4vw, 60px);
  text-align: center;
}

.villa-review-inner,
.home-review-inner {
  max-width: 760px;
  margin: 0 auto;
}

.review-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 28px;
}

.review-quote {
  position: relative;
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--script-gold);
}

/* Big Pinyon-script left double-quote floating above the quote text —
   purely decorative, hidden from screen readers via aria-hidden in HTML. */
.review-quote::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 1;
  color: var(--teal-deep);
  opacity: 0.5;
  pointer-events: none;
}

.review-stars {
  margin: 18px 0 0;
  font-size: 16px;
  color: #d8a93a;
  letter-spacing: 0.18em;
}

.review-attribution {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.home-review-cta {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-deep);
  padding-bottom: 4px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.home-review-cta:hover {
  color: #5098a1;
  border-color: #5098a1;
}

/* ===================================================================
   HOMEPAGE REVIEW CAROUSEL
   ===================================================================
   .reviews-carousel holds three .review-slide articles stacked on top of
   each other; only the .is-active slide is visible (opacity 1, pointer
   events on). Slides cross-fade as the carousel auto-advances or as the
   user clicks a dot. The track uses grid stacking so the carousel always
   sizes itself to the *tallest* slide, preventing height jumps that
   would shift the page beneath the section. */
.reviews-carousel {
  position: relative;
  margin: 4px auto 0;
  max-width: 760px;
}

.reviews-track {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
}

.review-slide {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.review-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.reviews-dots {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.reviews-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(14, 77, 82, 0.45);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.reviews-dot:hover { border-color: var(--teal-deep); }
.reviews-dot.is-active {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  transform: scale(1.1);
}

@media (max-width: 540px) {
  .reviews-dot { width: 8px; height: 8px; }
  .reviews-dots { margin-top: 24px; gap: 10px; }
}

@media (max-width: 540px) {
  .villa-review,
  .home-review {
    padding: 56px 22px;
  }
  .review-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    margin-bottom: 22px;
  }
  .review-quote { font-size: 15px; line-height: 1.6; }
  .review-quote::before { font-size: 56px; top: -26px; }
  .review-attribution { font-size: 10px; letter-spacing: 0.2em; }
  .home-review-cta { font-size: 11px; letter-spacing: 0.22em; }
}


/* ===================================================================
   BOOKING HINT
   ===================================================================
   Small italic reminder that sits just under the Lodgify Book Now Box
   widget on every villa page. We use this because the widget's own
   internal "Select dates to see total price" text is hard-styled by
   Lodgify (bold, oversized, misaligned) and unreachable from outside
   their Shadow DOM. Instead of fighting the widget, we hide their label
   (via data-select-dates-to-see-price-label=' ') and put our own line
   here where we control every pixel of typography. */
.booking-hint {
  max-width: 500px;
  /* Middle ground — connected to the widget's "From $X per night" line
     above but with enough breathing room that it doesn't feel crammed. */
  margin: 8px auto 0;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: #6a5a48;
  text-align: center;
  opacity: 0.9;
}

/* Trim the widget's reserved min-height so it hugs its rendered content
   instead of reserving ~80px of empty space at the bottom. Higher-specificity
   selector (body + #id) is needed to beat each villa page's inline
   #lodgify-book-now-box { min-height: 280px; } rule. Mobile floor stays
   generous so the widget still gets enough vertical room to initialize
   before Lodgify's script finishes rendering. */
body #lodgify-book-now-box { min-height: 200px; }

@media (max-width: 540px) {
  .booking-hint {
    font-size: 12px;
    margin-top: 8px;
  }
  body #lodgify-book-now-box { min-height: 480px; }
}

/* ===================================================================
   VILLA AMENITIES + HOUSE RULES SECTION
   ===================================================================
   Sits between the photo gallery and the calendar section on each
   villa detail page. Data is sourced from antares.vi's individual
   villa pages: quick facts (guests / bedrooms / beds / bathrooms),
   categorized amenities, and house rules with check-in/out times. */
.villa-amenities {
  background: #faf7f1;
  /* Bottom is trimmed to nearly 0 since the inline CTA now always sits as
     the last child of .villa-amenities-inner — the CTA supplies its own
     breathing room below (see .villa-cta-inline), so the section itself
     doesn't need to add more. Top stays generous for the amenities grid. */
  padding: clamp(56px, 6vw, 96px) clamp(20px, 5vw, 60px) clamp(12px, 1.5vw, 24px);
}
/* Map section that follows villa-amenities gets a trimmed top padding
   too, so the visual gap below the CTA matches the gap above it. */
.villa-amenities + .villa-map-section {
  padding-top: clamp(28px, 3vw, 44px);
}

.villa-amenities-inner {
  max-width: 960px;
  margin: 0 auto;
}

.villa-amenities-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-align: center;
  margin: 0 0 clamp(32px, 4vw, 52px);
}

/* --- Quick facts row --------------------------------------------- */
.villa-quick-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 28px);
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.quick-fact {
  text-align: center;
  padding: clamp(18px, 2vw, 26px) 12px;
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.08);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(14, 77, 82, 0.05);
}

.quick-fact-number {
  display: block;
  /* Clean sans-serif light-weight numeral instead of the script — reads
     cleaner at large sizes and pairs better with the Cinzel labels below. */
  font-family: var(--font-body);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 300;
  color: var(--teal-deep);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.quick-fact-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #6a5a48;
}

/* --- Amenities grid ---------------------------------------------- */
.villa-amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(28px, 3vw, 40px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.amenity-group-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(14, 77, 82, 0.14);
}

.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amenity-list li {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #4a3f32;
  position: relative;
  padding-left: 18px;
}

.amenity-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5098a1;
  opacity: 0.6;
}

/* --- House rules ------------------------------------------------- */
.villa-house-rules {
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.08);
  border-radius: 6px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 2px 10px rgba(14, 77, 82, 0.05);
}

.villa-house-rules-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 20px;
  text-align: center;
}

.house-rules-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
}

.house-rules-list li {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #4a3f32;
  padding-left: 20px;
  position: relative;
}

.house-rules-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #5098a1;
  font-weight: 500;
}

.checkin-checkout {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
  padding-top: 20px;
  border-top: 1px solid rgba(14, 77, 82, 0.08);
}

.checkin-checkout > div {
  font-family: var(--font-body);
  font-size: 13px;
  color: #4a3f32;
  text-align: center;
}

.checkin-checkout strong {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 4px;
}

@media (max-width: 540px) {
  .villa-quick-facts { grid-template-columns: repeat(2, 1fr); }
  .amenity-list li { font-size: 13px; }
  .house-rules-list { grid-template-columns: 1fr; }
  .checkin-checkout { flex-direction: column; gap: 14px; }
}


/* ===================================================================
   VILLA RATES SECTION
   ===================================================================
   Sits inside the villa-amenities section, below the amenities grid
   and above the house rules panel. Shows the seasonal rate breakdown
   pulled from antares.vi. Uses a clean table-style layout with
   subtle dividers and brand-aligned typography. */
.villa-rates {
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.08);
  border-radius: 6px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 2px 10px rgba(14, 77, 82, 0.05);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.villa-rates-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 6px;
  text-align: center;
}

.villa-rates-note {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  color: #6a5a48;
  text-align: center;
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.rates-table {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr auto;
  gap: 0;
  border-top: 1px solid rgba(14, 77, 82, 0.1);
}

.rates-table > * {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(14, 77, 82, 0.08);
  font-family: var(--font-body);
  font-size: 14px;
  color: #4a3f32;
  line-height: 1.4;
}

.rate-season-name {
  font-weight: 500;
  color: var(--teal-deep);
}

.rate-dates {
  color: #6a5a48;
  font-weight: 300;
  font-size: 13px;
}

.rate-price {
  font-weight: 500;
  color: var(--teal-deep);
  text-align: right;
  white-space: nowrap;
}
.rate-price small {
  font-weight: 300;
  color: #6a5a48;
  font-size: 12px;
  margin-left: 2px;
}

@media (max-width: 540px) {
  /* Two-column mobile layout, but each rate season needs its 3 DOM
     children (name, dates, price) arranged as: name on the left of
     row 1, price on the right of row 1, dates spanning the full
     width of row 2. Without explicit column placement the grid
     auto-flow reshuffles them out of order. */
  .rates-table {
    grid-template-columns: 1fr auto;
  }
  .rates-table .rate-season-name { grid-column: 1; padding-bottom: 4px; border-bottom: none; }
  .rates-table .rate-price       { grid-column: 2; padding-bottom: 4px; border-bottom: none; text-align: right; }
  .rates-table .rate-dates {
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(14, 77, 82, 0.08);
    font-size: 12px;
  }
  /* Remove the bottom border on the FINAL dates row so the table
     ends cleanly instead of with an orphaned separator line. */
  .rates-table > *:last-child { border-bottom: none; }

  /* Tighten padding inside the rates card so the table has room to
     breathe on narrow screens. */
  .villa-rates { padding: 24px 18px; }
  .rates-table > * { padding-left: 4px; padding-right: 4px; }
}


/* ===================================================================
   RENTAL AGREEMENT PAGE
   ===================================================================
   The default .content-page center-aligns paragraphs — appropriate for
   short narrative pages (About, Contact). The rental agreement is
   long-form legal text where left-aligned dense paragraphs read better.
   .rental-agreement-page overrides the centering and provides section
   headings, sub-headings, and list styling. */
.content-page.rental-agreement-page {
  max-width: 900px;
}

/* Legal-document heading — scaled down from the default script H1 so it
   reads as a title, not a hero flourish. Rental agreements should feel
   authoritative and calm rather than shouting; a compact Cinzel treatment
   keeps the visual weight in line with the surrounding section headings. */
.rental-agreement-page h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-align: center;
  margin-bottom: clamp(20px, 2.2vw, 32px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 77, 82, 0.2);
}

.rental-agreement-page p,
.rental-agreement-page ul {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.ra-intro {
  background: #faf7f1;
  padding: 20px 24px;
  border-left: 3px solid #5098a1;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.7;
  color: #4a3f32;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.ra-h2 {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: clamp(40px, 4vw, 56px) 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(14, 77, 82, 0.18);
}

.ra-h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--teal-deep);
  margin: clamp(20px, 2vw, 30px) 0 8px;
}

.ra-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.ra-list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #4a3f32;
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.ra-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5098a1;
  opacity: 0.55;
}

.ra-list li strong {
  color: var(--teal-deep);
  font-weight: 500;
}

.ra-close {
  margin-top: clamp(40px, 4vw, 56px);
  padding: 24px;
  background: #faf7f1;
  border-top: 2px solid #5098a1;
  border-radius: 4px;
  text-align: center !important;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--teal-deep);
  letter-spacing: 0.04em;
}

@media (max-width: 540px) {
  .rental-agreement-page p,
  .rental-agreement-page .ra-list li { font-size: 14px; }
  .ra-h2 { letter-spacing: 0.2em; }
}


/* ===================================================================
   TRAVEL PLANNING PAGE
   ===================================================================
   Long-form informational page combining island expectations, arrival
   logistics, flight timing, transportation, driving directions, and
   hurricane-season guidance. Follows the same left-aligned readable
   layout as .rental-agreement-page but adds a table-of-contents
   navigation strip at the top and a numbered-step list style for the
   turn-by-turn direction blocks. */
.content-page.travel-planning-page {
  max-width: 900px;
}

/* Sub-page titles inside the Travel Planning section (Maps &
   Directions, Hurricane Season, Island Expectations, etc.) are
   informational section headings — the default .content-page H1
   sizing (up to 88px) reads as a hero flourish and overwhelms the
   dense practical copy below. Compact script treatment: smaller
   than the hub title so the visual hierarchy still reads sub-page
   → hub, plus a bit of top padding so Pinyon Script's tall
   ascenders don't clip the sub-nav above. */
.travel-planning-page h1 {
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.2;
  padding-top: 6px;
  text-align: center;
  color: var(--teal-deep);
  margin-bottom: clamp(16px, 2vw, 28px);
}

@media (max-width: 540px) {
  .travel-planning-page h1 { font-size: 28px; }
}

.travel-planning-page p,
.travel-planning-page ul,
.travel-planning-page ol {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.tp-intro {
  background: #faf7f1;
  padding: 22px 26px;
  border-left: 3px solid #5098a1;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.7;
  color: #4a3f32;
  margin-bottom: clamp(20px, 2vw, 32px);
}

/* --- Table of contents / on-this-page nav strip --- */
.tp-toc {
  background: rgba(80, 152, 161, 0.06);
  border-top: 1px solid rgba(14, 77, 82, 0.14);
  border-bottom: 1px solid rgba(14, 77, 82, 0.14);
  padding: 18px 22px;
  margin: 0 0 clamp(32px, 3.5vw, 52px);
}

.tp-toc-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 10px !important;
  text-align: center !important;
}

.tp-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}

.tp-toc li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
}

.tp-toc a {
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  padding-bottom: 2px;
}

.tp-toc a:hover { border-bottom-color: #5098a1; }

/* --- Section + sub-section headings --- */
.tp-h2 {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: clamp(44px, 4.5vw, 64px) 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(14, 77, 82, 0.18);
  scroll-margin-top: 100px;   /* offset for sticky header on smooth-scroll */
}

.tp-h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--teal-deep);
  margin: clamp(22px, 2.2vw, 32px) 0 8px;
}

/* --- Tip / callout paragraph --- */
.tp-tip {
  background: rgba(242, 226, 179, 0.22);
  border-left: 3px solid var(--script-gold);
  padding: 12px 18px;
  border-radius: 3px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a3f32;
  margin: 12px 0 20px;
}

.tp-tip strong { color: var(--teal-deep); }

/* --- Bulleted + numbered lists --- */
.tp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.tp-list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #4a3f32;
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}

.tp-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5098a1;
  opacity: 0.55;
}

.tp-list li strong { color: var(--teal-deep); font-weight: 500; }

/* Numbered step list (turn-by-turn directions) — uses CSS counters so
   the number sits in the same accent-tint circle position as the
   round bullet on the unordered list, keeping visual rhythm. */
ol.tp-list-ordered {
  counter-reset: tp-step;
}

ol.tp-list-ordered li { padding-left: 32px; }

ol.tp-list-ordered li::before {
  content: counter(tp-step);
  counter-increment: tp-step;
  background: none;
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  left: 0;
  top: 0.3em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(80, 152, 161, 0.55);
  background: rgba(80, 152, 161, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

/* --- Closing farewell block --- */
.tp-close {
  margin-top: clamp(44px, 4.5vw, 64px);
  padding: 24px;
  background: #faf7f1;
  border-top: 2px solid #5098a1;
  border-radius: 4px;
  text-align: center !important;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--teal-deep);
  letter-spacing: 0.02em;
}

.tp-close a { color: var(--teal-deep); text-decoration: underline; }

@media (max-width: 540px) {
  .travel-planning-page p,
  .travel-planning-page .tp-list li { font-size: 14px; }
  .tp-h2 { letter-spacing: 0.2em; }
  .tp-toc ul { flex-direction: column; align-items: center; gap: 6px; }
}


/* ===================================================================
   TRAVEL PLANNING — HUB PAGE (travel-planning.html)
   ===================================================================
   Landing page for the Travel Planning section. Instead of one long
   scroll, the six travel topics are surfaced as six brand-toned cards
   the visitor picks from. Mirrors the sidebar-driven navigation of
   antaresvi.com/island-expectations, but as a first-class grid rather
   than an afterthought column. */
.content-page.travel-hub-page {
  max-width: 1000px;
}

/* Shared Pinyon Script heading treatment for the "hub-style" pages —
   Travel Planning, About ("Our Story"), and Contact ("Inquire Now").
   The default .content-page h1 sizing (up to 88px) wraps at typical
   viewport widths and reads as a hero flourish that overwhelms the
   short pages below it. Cap at ~54px with white-space:nowrap so the
   script always renders as one continuous line, and pin the color to
   teal-deep so all three pages share exactly the same headline color. */
.travel-hub-page h1,
.about-page h1,
.contact-page h1 {
  font-size: clamp(38px, 5vw, 54px);
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  color: var(--teal-deep);
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

@media (max-width: 420px) {
  .travel-hub-page h1,
  .about-page h1,
  .contact-page h1 { font-size: 34px; }
}

.tp-hub-intro {
  text-align: center !important;
  color: #4a3f32;
  font-size: 16px;
  font-weight: 300;
  max-width: 620px !important;
  margin: 0 auto clamp(40px, 4vw, 60px) !important;
  line-height: 1.7;
}

.tp-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-bottom: clamp(40px, 4vw, 60px);
}

.tp-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #faf7f1;
  border: 1px solid rgba(14, 77, 82, 0.14);
  border-left: 3px solid #5098a1;
  border-radius: 4px;
  padding: 22px 26px 26px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 170px;
}

.tp-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14, 77, 82, 0.12);
  border-left-color: var(--teal-deep);
}

.tp-hub-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5098a1;
}

.tp-hub-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--teal-deep);
  letter-spacing: 0.04em;
}

.tp-hub-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a3f32;
  margin-top: 2px;
}

.tp-hub-arrow {
  position: absolute;
  right: 22px;
  bottom: 20px;
  font-family: var(--font-display);
  font-size: 18px;
  color: #5098a1;
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.tp-hub-card:hover .tp-hub-arrow {
  transform: translateX(4px);
  opacity: 1;
  color: var(--teal-deep);
}

.tp-hub-close {
  text-align: center !important;
  color: var(--teal-deep) !important;
  font-size: 14px !important;
  margin-top: 0 !important;
}

.tp-hub-close a { color: var(--teal-deep); text-decoration: underline; }

/* ===================================================================
   TRAVEL PLANNING — SUB-PAGE NAV
   ===================================================================
   Persistent nav strip at the top of each sub-page (island-expectations,
   arrival-day, etc.) — same purpose as the sidebar on the reference site
   but rendered as a compact horizontal tab bar so it stays out of the
   way on desktop and stacks cleanly on mobile.
   The parent "Travel Planning" link doubles as a breadcrumb back to the
   hub landing page. */
.tp-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 14px 0 16px;
  margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid rgba(14, 77, 82, 0.14);
}

.tp-subnav-parent {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
  padding-right: 18px;
  border-right: 1px solid rgba(14, 77, 82, 0.18);
  white-space: nowrap;
}

.tp-subnav-parent:hover { color: #5098a1; }

.tp-subnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.tp-subnav-links a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: #4a3f32;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.tp-subnav-links a:hover {
  color: var(--teal-deep);
  border-bottom-color: #5098a1;
}

.tp-subnav-links a[aria-current="page"] {
  color: var(--teal-deep);
  font-weight: 500;
  border-bottom-color: #5098a1;
}

@media (max-width: 540px) {
  .tp-subnav { gap: 4px 12px; }
  .tp-subnav-parent { padding-right: 12px; font-size: 10px; letter-spacing: 0.24em; }
  .tp-subnav-links a { font-size: 12px; }
}


/* ===================================================================
   CONTACT PAGE — INQUIRY FORM
   ===================================================================
   Netlify-Forms-backed inquiry form. Design goals:
   - Reads like the rest of the site: cream + teal, subtle borders,
     Cinzel labels, Montserrat body.
   - Two-column layout on desktop for related field pairs
     (first/last name, arrival/departure, etc.); collapses to a single
     column on mobile.
   - Focus states use the sky-blue accent that matches Book Now Box
     and the Continue-to-booking CTA so the form feels part of the
     larger booking experience. */
.content-page.contact-page {
  max-width: 720px;
}

.contact-page h1 {
  text-align: center;
  margin-bottom: clamp(16px, 2vw, 28px);
}

.contact-intro {
  text-align: center !important;
  color: #4a3f32;
  font-size: 15.5px;
  font-weight: 300;
  max-width: 560px !important;
  margin: 0 auto clamp(30px, 3vw, 46px) !important;
  line-height: 1.75;
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 20px);
  background: #faf7f1;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(14, 77, 82, 0.14);
  border-top: 3px solid #5098a1;
  border-radius: 4px;
}

/* Honeypot — hidden trap field for bots; humans never see it, and
   Netlify Forms discards any submission where it's non-empty. */
.inquiry-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.5vw, 20px);
}

.inquiry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inquiry-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.inquiry-label em {
  font-style: normal;
  color: #b78240;
  margin-left: 2px;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: #4a3f32;
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.18);
  border-radius: 3px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.inquiry-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Custom chevron for the villa dropdown (native arrows differ per OS
   and clash with the brand palette). Uses a data-URI SVG so no extra
   asset request. */
.inquiry-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%230e4d52' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: #5098a1;
  box-shadow: 0 0 0 3px rgba(80, 152, 161, 0.15);
}

.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: #a89a86;
  font-style: italic;
}

/* Submit button — teal-deep for the resting state so it reads as the
   page's primary action; on hover it deepens rather than lightening,
   which matches the collection's Book Now Box shadow-DOM injected style. */
.inquiry-submit {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--teal-deep);
  border: none;
  padding: 16px 32px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: clamp(8px, 1vw, 14px);
  transition: background 0.25s ease, transform 0.15s ease;
  align-self: stretch;
}

.inquiry-submit:hover { background: #062e31; }
.inquiry-submit:active { transform: translateY(1px); }

.inquiry-fine-print {
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 300;
  color: #6a5f52 !important;
  margin: 6px 0 0 !important;
  letter-spacing: 0.02em;
}

@media (max-width: 540px) {
  .inquiry-row { grid-template-columns: 1fr; }
  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea { font-size: 15px; }
  .contact-intro { font-size: 14.5px; }
}

/* ===================================================================
   THANK YOU PAGE
   =================================================================== */
.content-page.thank-you-page { max-width: 640px; text-align: center; }

.thank-you-lead {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  color: var(--teal-deep);
  margin-bottom: 20px !important;
}

.thank-you-page p {
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.thank-you-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 44px);
  flex-wrap: wrap;
}

.thank-you-cta {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--teal-deep);
  padding: 14px 26px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.thank-you-cta:hover { background: #062e31; }

.thank-you-cta-alt {
  background: transparent;
  color: var(--teal-deep);
  border: 1px solid var(--teal-deep);
}

.thank-you-cta-alt:hover { background: var(--teal-deep); color: #ffffff; }


/* ===================================================================
   SEARCH RESULTS PAGE (search-results.html)
   ===================================================================
   Lands here from the Portable Search Bar on the homepage, book page,
   or any collection page. Reuses .property-card / .properties markup so
   the results feel like a native slice of the site. Adds:
   - A hero band with the search summary the user just entered
   - An inline "Refine Search" widget for tweaking dates or guests
   - Results count above the grid
   - Empty state for group sizes too big for any single villa */
.search-results-hero {
  background: var(--cream-warm, #faf7f1);
  padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 80px) clamp(28px, 3vw, 44px);
  border-bottom: 1px solid rgba(14, 77, 82, 0.08);
}

.search-results-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.search-results-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #5098a1;
  /* Extra bottom margin because Pinyon Script's tall ascenders on the
     H1 below (e.g. the "Y" in "Your Matches") extend well above the
     font's baseline. Without this gap the ascender clips into the
     eyebrow's baseline and reads as overlapping text. */
  margin: 0 0 22px !important;
}

.search-results-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(46px, 6vw, 74px);
  color: var(--teal-deep);
  margin: 0 0 clamp(20px, 2vw, 32px);
  /* line-height 1.05 crowds tall ascenders into the eyebrow above.
     1.25 gives the script font enough vertical breathing room to sit
     comfortably below the "Villa Search" eyebrow. */
  line-height: 1.25;
  padding-top: 4px;
}

/* Search summary bar — dots between items, wraps on small screens. */
.search-summary {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: #4a3f32;
  margin-bottom: clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 14px;
  min-height: 22px;
}

.ss-item { display: inline-flex; align-items: baseline; gap: 8px; }

.ss-item-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5098a1;
}

.ss-item-value { color: var(--teal-deep); font-weight: 500; }

.ss-sep { color: rgba(14, 77, 82, 0.35); }

.ss-empty {
  color: #6a5f52;
  font-size: 14.5px;
  font-style: italic;
  margin: 0 !important;
}

.search-edit-frame {
  max-width: 780px;
  margin: 0 auto;
}

/* ============================
   RESULTS GRID
   ============================ */
.search-results-section {
  padding: clamp(40px, 4.5vw, 72px) clamp(20px, 5vw, 80px);
}

.search-results-body {
  max-width: 1200px;
  margin: 0 auto;
}

.results-count {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-align: center;
  margin: 0 0 clamp(24px, 2.5vw, 40px) !important;
}

/* Reuse .properties visual behavior — flow into whatever the site's
   card grid already does. Adds a subtle top spacing tweak so cards
   feel anchored below the results count. */
.search-results-grid { margin-top: 0 !important; }

.results-empty {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 60px) 0;
}

.results-empty h2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 16px;
}

.results-empty p {
  color: #4a3f32;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 520px;
}

.results-empty-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 540px) {
  .search-summary { font-size: 13.5px; }
  .search-results-title { font-size: 42px; }
}


/* ===================================================================
   SEARCH RESULTS — collection filter badge
   ===================================================================
   When a visitor arrives at search-results.html from a collection page
   (waterfront/adventure/gatherings/serene/luxe), search-results.js
   reads sessionStorage.antaresCollection and adds a "Collection: X"
   badge to the summary strip. This styles the inline "clear" link. */
.ss-item-collection .ss-item-value {
  color: var(--teal-deep);
  font-weight: 500;
}

/* Clear-collection link sits on its own line below the summary row —
   keeps the summary itself uncluttered and makes the clear action
   clearly a separate control rather than part of the value. */
.ss-clear-row {
  margin-top: 10px;
  text-align: center;
}

.ss-clear {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: #5098a1;
  text-decoration: none;
  border-bottom: 1px solid rgba(80, 152, 161, 0.5);
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ss-clear:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal-deep);
}


/* ===================================================================
   HEADER / FOOTER Z-INDEX GUARD
   ===================================================================
   The Lodgify Portable Search Bar renders its date-picker and guest
   popovers at z-index: 999 (via --ldg-component-modal-z-index). If any
   of those overlays get stuck (or even briefly render offscreen), they
   sit on top of our header + footer and eat every link click. Pinning
   the site chrome to a higher stacking context guarantees the Antares
   navigation is always the highest-clickable layer. */
.site-header {
  z-index: 10000 !important;
}
.site-footer {
  position: relative;
  z-index: 10000;
  isolation: isolate;
}

/* Refine Search widget on the results page needs the same 1080px
   working width as .booking-frame elsewhere — the earlier 780px cap
   crowded the four-field row into a wonky wrap. */
.search-edit-frame {
  max-width: 1080px !important;
}


/* ===================================================================
   INQUIRY FORM — COLLECTIONS CHECKBOX GROUP
   ===================================================================
   Fieldset that lists the five experiential collections (Waterfront,
   Adventure, Gatherings, Serene, Luxe) as checkboxes so a visitor can
   tell us which categories they're weighing without having to already
   have a villa in mind. Netlify Forms captures multi-selected values
   as an array under the "collections[]" name. */
.inquiry-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.inquiry-legend-hint {
  font-family: var(--font-body);
  font-weight: 300;
  color: #6a5f52;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  margin-left: 4px;
}

.inquiry-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 12px;
  margin-top: 4px;
}

.inquiry-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.18);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: #4a3f32;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  user-select: none;
}

.inquiry-checkbox:hover {
  border-color: #5098a1;
  color: var(--teal-deep);
}

.inquiry-checkbox input[type="checkbox"] {
  /* Restore native checkbox appearance since .inquiry-form's global
     select/textarea rule zeroes -webkit-appearance for its selects. */
  appearance: auto;
  -webkit-appearance: auto;
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  accent-color: #5098a1;
  cursor: pointer;
  flex-shrink: 0;
}

/* Selected state — subtle sky-blue wash so checked options are easy to
   scan without being loud. Uses :has() so we don't need JS to toggle
   a "checked" class. Progressive enhancement — older browsers just see
   the checkbox tick. */
.inquiry-checkbox:has(input:checked) {
  background: rgba(80, 152, 161, 0.08);
  border-color: #5098a1;
  color: var(--teal-deep);
  font-weight: 400;
}

@media (max-width: 540px) {
  .inquiry-checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .inquiry-checkbox { font-size: 13.5px; padding: 10px 12px; }
}


/* ===================================================================
   SEARCH RESULTS — toolbar (count + sort) and per-card rate line
   ===================================================================
   Sits above the results grid: the results count sentence on the
   left, the sort dropdown on the right. Stacks vertically on mobile
   so both stay legible. */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 clamp(24px, 2.5vw, 40px);
}

.results-toolbar .results-count {
  margin: 0 !important;
}

.results-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* When Collection + Sort are both present in the toolbar, keep them
   grouped on the right and let the count take the whole left. Without
   this, flex space-between would center Collection between them. */
.results-toolbar .results-collection {
  margin-left: auto;
}

.results-sort-select {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--teal-deep);
  background: #ffffff;
  border: 1px solid rgba(14, 77, 82, 0.18);
  border-radius: 3px;
  padding: 8px 34px 8px 14px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%230e4d52' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.results-sort-select:focus {
  border-color: #5098a1;
  box-shadow: 0 0 0 3px rgba(80, 152, 161, 0.15);
}

/* "From $604 / night" line under each card title */
.property-rate-line {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: #6a5f52;
  margin: -4px 0 10px !important;
  letter-spacing: 0.01em;
}

.property-rate-line strong {
  color: var(--teal-deep);
  font-weight: 500;
}

@media (max-width: 540px) {
  .results-toolbar { flex-direction: column; align-items: stretch; }
  .results-sort { justify-content: flex-end; }
}


/* ===================================================================
   VILLA LOCATION MAP (villa-map-section on every villa page)
   ===================================================================
   Leaflet + OpenStreetMap. Sits between .villa-amenities and
   .villa-calendar-section. Custom sky-blue pin (rendered as SVG in
   js/villa-map.js), branded card frame, and a Get Directions link
   below that hands off to Apple Maps / Google Maps depending on the
   visitor's platform. */
.villa-map-section {
  padding: clamp(50px, 6vw, 90px) clamp(20px, 5vw, 60px);
  background: #ffffff;
}

.villa-map-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}

.villa-map-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #5098a1;
  margin: 0 0 12px !important;
}

.villa-map-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--teal-deep);
  margin: 0 0 clamp(24px, 3vw, 36px);
}

#villa-map {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(14, 77, 82, 0.14);
  overflow: hidden;
  /* Leaflet needs an explicit background while tiles load so the box
     doesn't flash white on slow connections. */
  background: #d9e6ea;
  z-index: 0;
}

/* Reset Leaflet's default pin container so our SVG shows without a
   white bubble frame around it. */
.leaflet-marker-icon.villa-map-pin {
  background: none !important;
  border: none !important;
}

/* Leaflet popup — thin border to match the site card treatment. */
.leaflet-popup-content-wrapper {
  border-radius: 3px !important;
  box-shadow: 0 4px 14px rgba(14, 77, 82, 0.18) !important;
  padding: 4px 6px !important;
}
.leaflet-popup-content {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: #4a3f32 !important;
  margin: 10px 14px !important;
  line-height: 1.5 !important;
}
.leaflet-popup-content strong {
  color: var(--teal-deep);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 13px;
  text-transform: uppercase;
}

/* Attribution styling — small and unobtrusive */
.leaflet-control-attribution {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 540px) {
  .villa-map-title { letter-spacing: 0.1em; font-size: 18px; }
  #villa-map { height: 300px; }
}


/* ===================================================================
   HOMEPAGE COLLECTION MAP (all villas as clickable pins)
   =================================================================== */
.collection-map-section {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 60px);
  background: var(--cream-warm, #faf7f1);
  border-top: 1px solid rgba(14, 77, 82, 0.08);
  border-bottom: 1px solid rgba(14, 77, 82, 0.08);
}

.collection-map-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.collection-map-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #5098a1;
  margin: 0 0 14px !important;
}

.collection-map-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(42px, 5.5vw, 68px);
  color: var(--teal-deep);
  line-height: 1.2;
  padding-top: 4px;
  margin: 0 0 16px;
}

.collection-map-lede {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: #4a3f32;
  max-width: 560px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  line-height: 1.7;
}

#collection-map {
  width: 100%;
  height: clamp(420px, 55vw, 620px);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(14, 77, 82, 0.16);
  overflow: hidden;
  background: #d9e6ea;
  z-index: 0;
}

/* Popup card — rich preview that opens when a pin is clicked */
.collection-map-popup .leaflet-popup-content-wrapper {
  border-radius: 4px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(14, 77, 82, 0.22) !important;
}
.collection-map-popup .leaflet-popup-content {
  margin: 0 !important;
  width: 240px !important;
  font-family: var(--font-body) !important;
}

.cmp-card {
  display: block;
}

.cmp-thumb {
  display: block;
  width: 100%;
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: #d9e6ea;
}

.cmp-body {
  padding: 12px 14px 14px;
  background: #ffffff;
}

.cmp-name {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 4px;
}

.cmp-name:hover { color: #5098a1; }

.cmp-tags {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: #6a5f52;
  margin-bottom: 10px;
}

/* Higher specificity + !important so Leaflet's default link color (blue)
   on <a> tags inside .leaflet-popup-content doesn't win. Previous rule
   set color: var(--cream-luxe), but Leaflet's own `.leaflet-container a`
   was overriding it — the button rendered as pale teal on deep teal,
   nearly unreadable. Forcing cream + white text at hover fixes it. */
.leaflet-container a.cmp-cta,
.cmp-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff !important;
  background: var(--teal-deep);
  padding: 10px 18px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.leaflet-container a.cmp-cta:hover,
.cmp-cta:hover { background: #062e31; color: #ffffff !important; }

/* Popup close X — slight polish */
.collection-map-popup .leaflet-popup-close-button {
  color: #fff !important;
  font-size: 20px !important;
  padding: 6px 10px 0 0 !important;
  z-index: 2;
}

@media (max-width: 540px) {
  /* On mobile, split the title onto two lines so the script wordmark
     stays readable: "Find Your Villa" over "on St. John". The tail
     span becomes block-level to force the wrap. */
  .collection-map-title { font-size: 36px; line-height: 1.15; }
  .collection-map-title .map-title-tail { display: block; }
  #collection-map { height: 380px; }
  .collection-map-popup .leaflet-popup-content { width: 200px !important; }
  .cmp-thumb { height: 110px; }
}


/* ===================================================================
   VILLA AMENITIES v2 — Collection Experience + Base Amenity grid
   ===================================================================
   Two-tier layout matching the owner's amenity schema:
   - Tier 1: colored "Collection Experience" panels for each collection
     this villa belongs to (Waterfront / Adventure / Gatherings / Serene
     / Luxe). Panel background pulls from the site's brand palette per
     collection so the visitor gets an immediate visual reminder of
     which collection strand this villa participates in.
   - Tier 2: a grid of amenity categories. Each card lists the "base"
     (what every villa has) in muted text and then this villa's
     optional extras as check bullets. */

.villa-collection-experience {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(30px, 3.5vw, 48px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* When the collection-experience block is standalone under the gallery
   (not nested inside .villa-amenities-inner), it needs its own padding
   for horizontal breathing room and vertical rhythm — matches the site's
   standard content padding used by .villa-amenities-inner. */
.villa-collection-experience-wrap {
  max-width: 1180px;
  margin: 0 auto;
  /* Tightened top padding — Why boxes now sit right below the description,
     which has no bottom padding of its own. Was 28-56px, felt like a
     dead zone between the last paragraph and the first Why row. */
  padding: clamp(12px, 1.5vw, 24px) clamp(24px, 6vw, 60px) 0;
}
.villa-collection-experience-wrap .villa-collection-experience {
  margin-bottom: 0;
}

/* Collection panel as a native <details> disclosure. Closed = compact
   one-row bar with just the logo + "Why" affordance. Open = same top
   row plus the description and per-villa feature pills below. Reset
   the browser default marker so we can use our own chevron. */
.collection-experience-block {
  border-radius: 3px;
  color: #ffffff;
  text-align: left;
  box-shadow: 0 2px 10px rgba(14, 77, 82, 0.08);
  overflow: hidden;
  padding: 0;
}

/* Hide the default disclosure triangle across browsers. */
.collection-experience-block summary { list-style: none; }
.collection-experience-block summary::-webkit-details-marker { display: none; }
.collection-experience-block summary::marker { display: none; }

/* --- Compact summary row (always visible) --- */
.ce-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(18px, 1.8vw, 24px);
  cursor: pointer;
  color: inherit;
  transition: background 0.2s ease;
  outline: none;
}
.ce-summary:hover  { background: rgba(255, 255, 255, 0.06); }
.ce-summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }

.ce-summary-main {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  min-width: 0;
}

.ce-summary-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.ce-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
  color: currentColor;
}

/* Rotate the chevron when the panel is open. */
.collection-experience-block[open] .ce-chevron {
  transform: rotate(180deg);
}

/* --- Expanded body (revealed on open) --- */
.ce-body {
  padding: 4px clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 4px;
}

/* Brand colors per collection panel — same palette used everywhere
   else on the site (collection bands, dropdown menu, hero categories). */
.ce-waterfront { background: var(--teal-deep); }
.ce-adventure  { background: var(--olive); }
.ce-gatherings { background: var(--orange); }
.ce-serene     { background: var(--rose); }
.ce-luxe       { background: var(--cream-luxe); color: #6b4f1f; }
.ce-luxe .ce-eyebrow      { color: #8a6a2e; }
.ce-luxe .ce-title        { color: #6b4f1f; }
.ce-luxe .ce-desc         { color: #4a3521; }
.ce-luxe .ce-feature      { background: rgba(107, 79, 31, 0.14); color: #6b4f1f; border-color: rgba(107, 79, 31, 0.28); }
.ce-luxe .ce-summary-hint { color: #6b4f1f; }
.ce-luxe .ce-body         { border-top-color: rgba(107, 79, 31, 0.22); }
.ce-luxe .ce-summary:hover { background: rgba(107, 79, 31, 0.08); }

/* Eyebrow now sits INLINE with the logo in the compact summary row.
   Kept tiny so the logo remains the visual anchor. */
.ce-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  flex-shrink: 0;
}

.ce-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: inherit;
}

/* Collection wordmark (script + COLLECTION combined image) replaces
   the plain text title so each panel visually matches the branded
   homepage bands. Source images are white; they render correctly on
   the dark-toned panels (Waterfront teal, Adventure olive, Gatherings
   orange, Serene rose) without any filter. The Luxe panel uses the
   pre-rendered brown `luxe-brand.png` so no filter is needed there. */
.ce-logo {
  display: block;
  height: clamp(24px, 2.4vw, 30px);
  width: auto;
  max-width: 100%;
  margin: 0;
}

.ce-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
  color: inherit;
  opacity: 0.92;
}

.ce-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ce-feature {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 2px;
  color: #ffffff;
  /* Title-case each word so pills read consistently regardless of how
     the owner typed the entry in the source spreadsheet (e.g.
     "Dedicated game room space" → "Dedicated Game Room Space"). CSS
     text-transform capitalizes the first letter of each whitespace-
     separated word — no HTML rewriting needed. */
  text-transform: capitalize;
}

/* --- Amenity category cards --- */
/* .villa-amenities-grid already exists in the stylesheet from the
   original build (grid layout, gap, etc.). These additions restyle
   the new "base + extras" content that lives inside each .amenity-group. */

.amenity-group-base {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  color: #6a5f52;
  line-height: 1.55;
  margin: -4px 0 12px !important;
  font-style: italic;
}

/* Optional-features list: each item gets a small sky-blue check bullet
   so this-villa-specific extras stand out from the base-line above. */
.amenity-group .amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amenity-group .amenity-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--teal-deep);
  line-height: 1.5;
}

.amenity-group .amenity-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  color: #5098a1;
  font-weight: 600;
}

@media (max-width: 540px) {
  .collection-experience-block { padding: 22px 22px; }
  .ce-title { letter-spacing: 0.1em; font-size: 17px; }
  .ce-desc  { font-size: 14.5px; }
}


/* ===================================================================
   COLLECTION EXPERIENCE — expanded body transition + mobile
   ===================================================================
   Subtle fade-in on the revealed body so opening doesn't feel abrupt.
   details/summary can't animate height without JS, but opacity is a
   free tell that the panel just opened. */
.collection-experience-block[open] .ce-body {
  animation: ce-fade 0.28s ease both;
}
@keyframes ce-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
  /* Keep the "WHY" affordance visible on mobile so the user knows
     the panel is interactive — hiding it made the panels look static.
     Compact letter-spacing and font-size keep it from crowding the row. */
  .ce-summary-hint { font-size: 9px; letter-spacing: 0.22em; gap: 6px; }
  .ce-summary-main { gap: 10px; }
  .ce-eyebrow { font-size: 8.5px; letter-spacing: 0.22em; }
  .ce-logo { height: 22px; }
}


/* ===================================================================
   COLLECTION EXPERIENCE — desc label + bulleted list variant
   ===================================================================
   Some collection base descriptions in the owner's workbook use ">>"
   as a "here's a list" separator (currently just Adventure — activity
   pack + coming-soon). The renderer converts those into a compact
   label + bulleted list rather than one long comma-heavy sentence. */
.ce-desc-label {
  font-weight: 500;
  font-size: 13.5px;
  margin: 6px 0 6px !important;
  opacity: 1;
}

/* First label in the body shouldn't have a top margin. */
.ce-body > .ce-desc-label:first-child {
  margin-top: 0 !important;
}

.ce-desc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.ce-desc-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: inherit;
  opacity: 0.92;
}

.ce-desc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Luxe panel: brown text theme — bullets use the brown tint too. */
.ce-luxe .ce-desc-label { color: #6b4f1f; }
.ce-luxe .ce-desc-list li { color: #4a3521; }


/* ===================================================================
   VILLAS A-Z SUB-DROPDOWN (nested inside the header Menu)
   ===================================================================
   Native <details> element so it works without JS. Closed by default;
   click "Villas A – Z" and the list of 26 villa names slides down.
   Matches the parent dropdown's typography and hover treatment.

   width:100% + box-sizing forces the details wrapper to occupy the
   full menu width — without them, flex/inline contexts can shrink it,
   which visually clips the hover background of the sibling ALL VILLAS
   row underneath. */
.dropdown-sub {
  display: block;
  width: 100%;
  color: var(--script-gold);
}

.dropdown-sub summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.24em;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--script-gold);
  cursor: pointer;
  list-style: none;
  transition: filter 0.2s ease, background 0.2s ease;
  background: transparent;
}

/* Neighbor ALL VILLAS row and every other post-divider link: force
   full-width block-level behavior + explicit box-sizing so the hover
   background paints edge-to-edge on mobile. */
.dropdown-menu > .dropdown-divider ~ a {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.dropdown-sub summary::-webkit-details-marker { display: none; }
.dropdown-sub summary::marker { display: none; }

.dropdown-sub summary::after {
  content: '';
  display: inline-block;
  margin-left: 10px;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.75;
}
.dropdown-sub[open] summary::after {
  transform: rotate(-135deg);
}

.dropdown-sub summary:hover { background: rgba(0, 0, 0, 0.18); }

/* The list of villa links — scrolls if it exceeds available height so
   the dropdown doesn't run off-screen on shorter viewports. */
.dropdown-sub-list {
  max-height: 320px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.14);
  padding: 4px 0;
}

.dropdown-sub-list a {
  display: block;
  padding: 8px 32px 8px 44px;   /* extra left indent so villas nest under "Villas A-Z" */
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--script-gold);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  background: transparent !important;   /* override the generic dropdown-menu a background rules */
}
.dropdown-sub-list a:hover {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff;
}

/* Custom scrollbar so the villa list doesn't get a jarring default one */
.dropdown-sub-list::-webkit-scrollbar { width: 6px; }
.dropdown-sub-list::-webkit-scrollbar-track { background: transparent; }
.dropdown-sub-list::-webkit-scrollbar-thumb {
  background: rgba(242, 226, 179, 0.4);
  border-radius: 3px;
}

@media (max-width: 900px) {
  /* On mobile the dropdown-menu is a full-width overlay; keep the villa
     A-Z list scrollable and comfortably tappable. */
  .dropdown-sub-list a { padding: 12px 44px 12px 56px; font-size: 14px; }
  .dropdown-sub summary { padding: 14px 44px; }
}