/* ==========================================================================
   Homes for Holiday — Crystalline Bento (light)
   Brand-navy glassmorphic bento rebuild
   ========================================================================== */

:root {
  /* Brand blues (exact navy from the "home for holiday" wordmark) */
  --navy: #122248;
  --navy-deep: #0b1730;
  --primary: #24379b;
  --primary-bright: #3f5fd6;
  --sky: #5aa0e6;

  /* Accents */
  --aqua: #0f9e94;
  --aqua-light: #6ff0e6;
  --amber: #b26a00;
  --amber-bright: #e0951f;

  /* Ink */
  --ink: #16203a;
  --muted: #5b6478;
  --outline-variant: #b9c0d0;

  /* Surfaces (airy, cool white) */
  --surface: #f6f8fc;
  --pearl: #ffffff;
  --container-low: #eef2f9;
  --container: #e7edf7;

  /* Lines & glass */
  --line: rgba(26, 32, 58, 0.09);
  --hairline: rgba(26, 32, 58, 0.07);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 16px;

  /* Shadows (soft, navy-tinted) */
  --shadow-soft: 0 14px 34px -20px rgba(26, 42, 108, 0.28);
  --shadow-lift: 0 34px 70px -34px rgba(26, 42, 108, 0.36);
  --glow: 0 20px 50px -24px rgba(36, 55, 155, 0.4);

  /* Type */
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "Geist", "Hanken Grotesk", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Brand orange, sampled from the hfh logo — used to highlight key phrases */
  --brand-orange: #f7891b;
  --brand-orange-light: #fcb43a;
  /* Editorial gold for the hero — the brand orange reads too orange at this
     size, so the cover uses a paler, less saturated gold */
  --cover-gold: #e7cd96;
  --cover-gold-rule: rgba(231, 205, 150, 0.55);

  /* Layout */
  --container-max: 1220px;
  --gutter: 40px;
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Header height */
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Luminous mesh canvas */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 8% -5%, rgba(90, 160, 230, 0.12), transparent 60%),
    radial-gradient(50vw 50vw at 100% 0%, rgba(111, 240, 230, 0.10), transparent 55%),
    radial-gradient(60vw 55vw at 90% 100%, rgba(63, 95, 214, 0.08), transparent 60%);
}

/* ---------- Typography ---------- */
/* Editorial serif for display headings; sans keeps functional labels crisp */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.16; letter-spacing: 0.002em; color: var(--ink); }
h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
h3 { font-size: 1.62rem; font-weight: 600; letter-spacing: 0; }
p { color: var(--muted); }

.label-caps {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(60px, 9vw, 120px) 0; }
.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .label-caps { display: block; margin-bottom: 16px; }
.section-head p { margin-top: 16px; font-size: 1.08rem; }
.destination-cta { margin-top: 22px; }
/* a fineprint line in a section head stays fineprint-sized */
.section-head p.fineprint { font-size: 0.85rem; }
/* Property types at a glance, under the featured section intro */
.type-chips {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 10px; margin-top: 22px;
}
/* Type matches .label-caps exactly (client request) — same font, size, weight,
   tracking and colour as the section eyebrows */
.type-chips li {
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.68);
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary);
}

.eyebrow-rule { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-rule::after { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--aqua); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 14px 26px; border-radius: var(--r-pill);
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-bright)); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn-amber { background: linear-gradient(135deg, var(--amber), var(--amber-bright)); color: #fff; }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(224, 149, 31, 0.7); }
.btn-ghost { background: var(--glass-bg); color: var(--primary); border-color: rgba(36, 55, 155, 0.28); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: #fff; border-color: var(--primary); transform: translateY(-2px); }
.btn-glass { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.5); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,0.24); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   Header / Navigation (transparent overlay, glass on scroll)
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  --nav-ink: #ffffff;
  transition: box-shadow .3s ease;
}
/* Blur lives on a pseudo-element so the header does NOT create a containing
   block for the fixed mobile menu (backdrop-filter on the header itself would). */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(246, 248, 252, 0.82);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--hairline);
  opacity: 0; transition: opacity .3s ease;
}
/* Top scrim keeps the white overlay nav legible over bright hero imagery */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1;
  background: linear-gradient(180deg, rgba(19, 31, 82, 0.55), rgba(19, 31, 82, 0));
  pointer-events: none; opacity: 1; transition: opacity .3s ease;
}
.site-header.scrolled { --nav-ink: var(--ink); box-shadow: var(--shadow-soft); }
.site-header.scrolled::before { opacity: 1; }
.site-header.scrolled::after { opacity: 0; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; line-height: 1; flex-shrink: 0; }
/* Thin destinations line beside the logo — subtle, so it recedes behind the
   logo and nav rather than competing with them */
.brand-tagline {
  font-family: var(--font-label); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--nav-ink); opacity: 0.68;
  transition: color .3s ease;
}
/* "& more" is the first thing to go as the header narrows — the four
   destinations are the part worth keeping visible on a phone */
.brand-tagline .tagline-extra { display: inline; }
/* Horizontal lockup: the client's logo split into mark + text so the business
   name can be scaled up for legibility without forcing a taller header
   (a tall fixed header would eat mobile screen space on every page). */
/* Client-supplied lockup. Tight edge + soft halo so the orange separates
   from bright sky; shadow drops away once the header turns solid on scroll. */
.brand-mark { height: 66px; width: auto; display: block; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(6,12,28,0.55)) drop-shadow(0 3px 12px rgba(6,12,28,0.5));
  transition: filter .3s ease; }
.site-header.scrolled .brand-mark { filter: none; }
/* Inline traced wordmark; recolours to the current nav ink via currentColor */
.brand-logo {
  display: block; height: 54px; width: auto;
  color: var(--nav-ink); fill: currentColor; transition: color .3s ease;
}
.brand-logo use, .brand-logo path { fill: currentColor; }

.nav-menu { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.nav-menu-logo { display: none; }
.nav-menu a {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--nav-ink); position: relative; padding: 6px 0; transition: color .3s ease, opacity .2s;
}
.nav-menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a.active { opacity: 1; }
.site-header.scrolled .nav-menu a.active { color: var(--primary); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Copy of the header CTA for the slide-in menu; the header one is hidden there */
.nav-menu-cta { display: none; }
/* Between the hamburger breakpoint and ~1180px the logo, tagline, five links
   and the CTA need more width than there is, and the CTA gets clipped at the
   edge. The tagline is the one piece that can go. */
@media (min-width: 861px) and (max-width: 1180px) {
  .brand-tagline { display: none; }
}
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 95; }
.nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--nav-ink); margin: 5px 0; transition: .3s; }
.nav-toggle.open span { background: var(--ink); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero (full-bleed behind nav)
   ========================================================================== */
.hero {
  position: relative; min-height: 82vh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* Bias the crop right so more of the property is in frame (client request) */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(85% 95% at 20% 76%,
      rgba(9, 18, 40, 0.52) 0%,
      rgba(9, 18, 40, 0.30) 30%,
      rgba(9, 18, 40, 0.12) 54%,
      rgba(9, 18, 40, 0.03) 72%,
      rgba(9, 18, 40, 0) 88%),
    linear-gradient(180deg, rgba(11, 23, 48, 0.10) 0%, rgba(11, 23, 48, 0) 28%, rgba(11, 23, 48, 0) 66%, rgba(11, 23, 48, 0.22) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 64px; padding-top: calc(var(--header-h) + 36px); }
.hero .label-caps { color: var(--aqua-light); text-shadow: 0 1px 3px rgba(8,15,35,0.6); }
/* No CTA in the hero any more (client request) — the copy is spread through
   the space the button freed up rather than leaving a gap at the bottom */
/* Descriptive headline (client request) — longer than the old two-worder, so
   it runs smaller and wider to stay two or three lines rather than five */
.hero h1 {
  color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 600;
  margin: 16px 0 22px; max-width: 19ch; letter-spacing: 0.005em; line-height: 1.08;
  text-shadow: 0 3px 12px rgba(6,12,28,0.75), 0 1px 3px rgba(6,12,28,0.85);
}
/* The qualifier is part of the same thought, but shouldn't carry equal weight */
.h1-qual { display: block; margin-top: 10px; font-size: 0.5em; font-style: italic; color: rgba(255,255,255,0.92); }
.hero-sub { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: clamp(0.85rem, 1.7vw, 1.05rem); color: var(--brand-orange-light); margin: 0; text-shadow: 0 2px 8px rgba(6,12,28,0.85), 0 1px 2px rgba(6,12,28,0.9); }
.hero p { color: #fff; font-size: 1.16rem; max-width: 52ch; font-weight: 500; margin-top: 26px; text-shadow: 0 2px 8px rgba(6,12,28,0.8), 0 1px 2px rgba(6,12,28,0.85); }
/* Key selling point picked out in the logo's orange */
.hl { color: var(--brand-orange-light); font-weight: 700; }
/* --------------------------------------------------------------------------
   Editorial hero (client layout reference): set entirely in the display serif
   straight onto the photograph — no panel behind it. Legibility comes from the
   existing hero-bg scrim plus the text shadows below.
   -------------------------------------------------------------------------- */
.hero-cover { align-items: center; }
/* Editorial type sits directly on the photo, so it needs a deeper scrim than
   the default hero — weighted to the side the copy occupies */
.hero-cover .hero-bg::after {
  background:
    linear-gradient(100deg,
      rgba(8, 16, 36, 0.58) 0%,
      rgba(8, 16, 36, 0.40) 32%,
      rgba(8, 16, 36, 0.10) 60%,
      rgba(8, 16, 36, 0) 82%),
    linear-gradient(180deg, rgba(11, 23, 48, 0.22) 0%, rgba(11, 23, 48, 0) 26%);
}
.cover-copy { max-width: 640px; }
/* Small price/date note pinned to the hero's bottom-right corner — readable
   but deliberately quiet next to the headline */
/* Selector carries the .hero prefix so it outranks `.hero p`, which would
   otherwise force the 1.16rem body size onto this note */
.hero .hero-price-note {
  position: absolute; right: max(var(--gutter), calc((100vw - var(--container-max)) / 2));
  bottom: 20px; z-index: 3; text-align: right; margin: 0; max-width: none;
  font-family: var(--font-label); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 8px rgba(6,12,28,0.8), 0 1px 3px rgba(6,12,28,0.9);
}
.hero .hero-price-note strong { color: inherit; font-weight: inherit; }
.hero-cover h1 {
  max-width: none; margin: 0 0 4px; font-weight: 400; line-height: 0.98;
  font-size: clamp(4.2rem, 22vw, 7.5rem); letter-spacing: -0.015em;
}
/* Second line is roman, not italic, and set a step down from "Travel," */
.hero-cover h1 em {
  display: block; font-style: normal; font-weight: 400; font-size: 0.76em;
  color: var(--cover-gold); margin-top: 0.02em; letter-spacing: -0.005em;
}
/* Hairline rule broken by a small diamond, as on the reference layout.
   Rules are drawn as backgrounds so the single pseudo-element is free for the
   diamond itself. */
.cover-orn {
  position: relative; height: 9px; max-width: 30ch;
  margin: clamp(18px, 2.6vw, 30px) 0;
  background:
    linear-gradient(var(--cover-gold-rule), var(--cover-gold-rule)) left center / calc(50% - 13px) 1px no-repeat,
    linear-gradient(var(--cover-gold-rule), var(--cover-gold-rule)) right center / calc(50% - 13px) 1px no-repeat;
}
.cover-orn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--cover-gold);
}
.cover-lead {
  font-family: var(--font-display); color: #fff; font-weight: 400;
  font-size: clamp(1.62rem, 4.9vw, 2.3rem); line-height: 1.36;
  max-width: 26ch; margin-top: 0;
  text-shadow: 0 2px 10px rgba(6,12,28,0.7), 0 1px 3px rgba(6,12,28,0.8);
}
/* Wide enough that the second row reaches its intended break after "for" */
.cover-lines { margin-top: clamp(22px, 3.4vw, 40px); max-width: 580px; }
.cover-lines li {
  display: flex; gap: 20px; align-items: center; padding: clamp(12px, 1.6vw, 18px) 0;
  font-family: var(--font-display); font-weight: 500; color: var(--cover-gold);
  font-size: clamp(1.4rem, 3.9vw, 1.7rem); line-height: 1.25;
  text-shadow: 0 2px 10px rgba(6,12,28,0.7), 0 1px 3px rgba(6,12,28,0.8);
}
/* A single rule between the two rows — none above the first or below the last */
.cover-lines li + li { border-top: 1px solid var(--cover-gold-rule); }
/* First line reads as plain fact, so it sits in white like the paragraph
   above it; the second carries the offer and stays in the gold that matches
   "reimagined" — heavier and with its own glow so it holds up as the one
   line in the list meant to stand out */
.cover-lines li:first-child { color: #fff; }
.cover-lines li:first-child svg { color: #fff; }
.cover-lines li:last-child {
  font-weight: 600;
  text-shadow: 0 0 26px rgba(231,205,150,0.45), 0 2px 10px rgba(6,12,28,0.75), 0 1px 3px rgba(6,12,28,0.85);
}
/* The second row breaks after "for" where the line fits, but that string is too
   long for a phone, so narrow screens break after "Homes" instead — two balanced
   lines either way, never a stranded word */
.cover-lines .br-narrow { display: none; }
.cover-lines svg {
  width: clamp(40px, 4.8vw, 50px); height: clamp(40px, 4.8vw, 50px);
  flex: none; stroke-width: 1.1; color: var(--cover-gold);
}

/* --------------------------------------------------------------------------
   Regions strip — the coverage line sits on its own directly under the header
   image, so it reads as a statement of reach rather than hero decoration
   -------------------------------------------------------------------------- */
.regions-strip {
  background: var(--pearl); border-bottom: 1px solid var(--hairline);
  text-align: center; padding: clamp(16px, 2.2vw, 24px) 0;
}
.regions-line {
  font-family: var(--font-label); text-transform: uppercase; font-weight: 700;
  color: var(--navy); margin: 0;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem); letter-spacing: 0.14em; line-height: 1.5;
}
.regions-tagline {
  display: block; margin-top: 8px; color: var(--navy); opacity: 0.55;
  font-size: 0.7rem; letter-spacing: 0.26em;
}

/* --------------------------------------------------------------------------
   Belief band — the fee promise set straight onto a photograph, in the same
   editorial voice as the hero (client layout reference)
   -------------------------------------------------------------------------- */
.belief-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; min-height: clamp(360px, 46vw, 620px);
}
.belief-bg { position: absolute; inset: 0; z-index: -1; }
/* Content of the photo sits right of centre, so it is anchored there and the
   copy takes the open water on the left */
.belief-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.belief-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(8, 16, 36, 0.58) 0%,
      rgba(8, 16, 36, 0.42) 34%,
      rgba(8, 16, 36, 0.14) 62%,
      rgba(8, 16, 36, 0) 84%);
}
.belief-inner { position: relative; z-index: 1; width: 100%; padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px); }
.belief-head {
  font-family: var(--font-display); color: #fff; font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.5rem); line-height: 1.12;
  max-width: 15ch; margin: 0;
  text-shadow: 0 3px 12px rgba(6,12,28,0.7), 0 1px 3px rgba(6,12,28,0.8);
}
/* The fee line sits on its own frosted card — same glass/rounded-corner
   language as the USP tiles and the float badge on the bespoke-escape photo,
   rather than more text laid straight over the picture */
.belief-card {
  display: inline-block; margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.8vw, 28px);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-lg); backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px); box-shadow: var(--shadow-soft);
  max-width: 34ch;
}
.belief-sub {
  color: #fff; font-weight: 500; margin: 0;
  text-shadow: 0 2px 8px rgba(6,12,28,0.65), 0 1px 3px rgba(6,12,28,0.7);
  /* Runs between the documented Body (17px) and Title (1.4rem) steps */
  font-size: clamp(1.0625rem, 2.1vw, 1.4rem); line-height: 1.5;
}
/* The fee figure is the strongest claim on the page — a lighter gold reads
   clearly against the dark photo, where the standard darker amber did not */
.belief-sub .hl { color: #ffc966; font-weight: 800; }
.belief-band .cover-orn { max-width: 150px; }

/* Inline links inside body copy — otherwise they inherit the muted paragraph
   colour and read as plain text */
.split-body p a {
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.split-body p a:hover { color: var(--primary-bright); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-hint { margin-top: 24px; font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.9); }

/* Glass quick-select bar */
.quickbar { position: relative; z-index: 3; margin: -42px auto 0; max-width: 1000px; }
.quickbar-inner {
  background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); padding: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.quickbar-label { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 12px; font-weight: 600; }
.quickbar a {
  flex: 1 1 auto; text-align: center; min-width: 120px;
  padding: 13px 16px; border-radius: var(--r); font-size: 0.88rem; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,0.6); border: 1px solid transparent; transition: .25s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.quickbar a svg { width: 16px; height: 16px; color: var(--primary); }
.quickbar a:hover { background: linear-gradient(135deg, var(--primary), var(--primary-bright)); color: #fff; }
.quickbar a:hover svg { color: var(--aqua-light); }

/* ==========================================================================
   USP strip (bento chips)
   ========================================================================== */
.usp-strip { padding: clamp(48px, 7vw, 84px) 0; }
.usp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.usp {
  padding: 30px 22px; text-align: center; border-radius: var(--r-lg);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.usp:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.usp-ico {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(36,55,155,0.12), rgba(90,160,230,0.14)); color: var(--primary);
}
.usp-ico svg { width: 26px; height: 26px; stroke-width: 1.7; }
.usp h4 { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; }

/* ==========================================================================
   Destinations bento
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 18px; }
.dest-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft); display: block; color: #fff; border: 1px solid var(--glass-border);
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
/* For tall shots whose subject sits low in the frame — hold the bottom, not the top */
.dest-card img.focus-bottom { object-position: center 30%; }
.dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,31,82,0) 30%, rgba(19,31,82,0.82) 100%); }
.dest-card:hover img { transform: scale(1.07); }
.dest-card .dest-body { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 26px; width: 100%; }
.dest-card .dest-count { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua-light); font-weight: 600; }
.dest-card h3 { color: #fff; font-size: 1.5rem; margin-top: 6px; }
.dest-card .dest-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.82rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: .3s; }
.dest-card:hover .dest-go { opacity: 1; transform: translateY(0); }
.dest-card.tall { grid-row: span 2; }
.dest-card.wide { grid-column: span 2; }
/* Home page showcase: same photos, but nothing to click — the directory is
   behind the paywall, so no hover cue that implies a link (client request) */
.dest-static { cursor: default; }
.dest-static:hover img { transform: none; }
.destination-note {
  margin: 28px auto 0; max-width: 52ch; text-align: center;
  color: var(--muted); font-family: var(--font-label); font-size: 0.78rem;
  letter-spacing: 0.08em; line-height: 1.6;
}

/* ==========================================================================
   Editorial split
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 6vw, 84px); }
.about-intro .split-body { max-width: 860px; margin: 0 auto; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--glass-border); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
/* Hold the lower third in frame when the crop goes wide at <=860px — for shots
   whose subject sits low (e.g. loungers at the waterline) and would be cut off. */
.split-media img.focus-lower { object-position: center 70%; }
.split-media .float-badge {
  position: absolute; right: 20px; bottom: 20px;
  background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 18px 22px; text-align: center;
  box-shadow: var(--shadow-soft);
}
/* Flip to the opposite corner where the photo's subject sits bottom-right */
.split-media .float-badge.badge-left { left: 20px; right: auto; }
/* Pin to the top where the bottom of the photo is busy (loungers, basket) */
.split-media .float-badge.badge-top { top: 20px; bottom: auto; }
.split-media .float-badge.badge-recommended {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-lg);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  box-shadow: var(--shadow-soft);
}
.split-media .float-badge.badge-recommended .fb-num {
  color: #fff;
  text-shadow: 0 2px 8px rgba(6,12,28,0.65), 0 1px 3px rgba(6,12,28,0.7);
}
.split-media .float-badge.badge-recommended .fb-txt {
  color: rgba(255,255,255,0.88);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-shadow: 0 1px 3px rgba(6,12,28,0.7);
}
.float-badge .fb-num { font-weight: 800; font-size: 1.7rem; color: var(--primary); line-height: 1; letter-spacing: -0.02em; }
.float-badge .fb-txt { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.split-body h2 { margin-bottom: 20px; }
.split-body p { font-size: 1.06rem; margin-bottom: 16px; }
.tick-list { margin: 24px 0; display: grid; gap: 13px; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.tick-list svg { width: 20px; height: 20px; color: var(--aqua); flex-shrink: 0; margin-top: 3px; }
.tick-list strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   How it works — bento tiles
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.step {
  position: relative; padding: 28px 24px 26px; border-radius: var(--r-lg);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.step-num { font-family: var(--font-label); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--primary-bright); }
/* Lucide swaps the <i> for an <svg>, which defaults to display:inline — without
   this the icon sits beside the step number instead of on its own line */
.step-ico { display: block; width: 30px; height: 30px; color: var(--primary); margin: 0 0 14px; stroke-width: 1.7; }
.step h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.step p { font-size: 0.94rem; }
/* Optional last step — links out to the flight/car hire resources */
.step-optional { display: block; color: inherit; }
.step-optional:hover h4 { color: var(--primary-bright); }
.step-num em { font-style: normal; letter-spacing: 0.04em; color: var(--muted); text-transform: none; }

/* ==========================================================================
   Listing hero (inner pages)
   ========================================================================== */
.listing-hero {
  position: relative; color: #fff; min-height: 58vh; display: flex; align-items: flex-end; overflow: hidden;
}
.listing-hero .hero-bg::after {
  background:
    radial-gradient(90% 120% at 20% 82%,
      rgba(9,18,40,0.52) 0%,
      rgba(9,18,40,0.30) 32%,
      rgba(9,18,40,0.12) 56%,
      rgba(9,18,40,0.03) 74%,
      rgba(9,18,40,0) 90%),
    linear-gradient(180deg, rgba(11,23,48,0.14) 0%, rgba(11,23,48,0) 44%, rgba(11,23,48,0.30) 100%);
}
.listing-hero-inner { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 30px); padding-bottom: 56px; }
.listing-hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 14px 0 16px; letter-spacing: -0.03em; text-shadow: 0 2px 8px rgba(8,15,35,0.5); }
.listing-hero p { color: #fff; max-width: 58ch; font-weight: 500; text-shadow: 0 1px 5px rgba(8,15,35,0.6); }
.listing-hero .label-caps { color: var(--aqua-light); text-shadow: 0 1px 3px rgba(8,15,35,0.6); }
.listing-hero-price {
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 4px 0 20px;
  text-shadow: 0 2px 8px rgba(8,15,35,0.5);
}
.listing-hero-price span { font-size: 0.55em; font-weight: 500; opacity: 0.8; }
.listing-hero--destination .hero-bg img { object-position: center 78%; }
.listing-hero .listing-price-note { font-size: 0.85rem; margin-top: -12px; }

.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--muted); padding: 22px 0; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--outline-variant, #b9c0d0); }

.region-group { padding-top: 20px; }
.region-group-head h2[id] { scroll-margin-top: calc(var(--header-h) + var(--region-nav-h, 128px) + 32px); }
.region-group-head h2:focus { outline: none; }
.region-nav {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 60;
  display: flex; align-items: center; gap: 12px 18px;
  margin-bottom: 16px; padding: 14px 18px;
  background: var(--pearl); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.region-nav-label { flex-shrink: 0; font-family: var(--font-label); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.region-nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.region-nav-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 12px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  font-size: .82rem; line-height: 1.35; color: var(--primary); text-decoration: none;
}
.region-nav-links a[hidden] { display: none; }
.region-nav-links a:hover, .region-nav-links a[aria-current="location"] { background: var(--primary); border-color: var(--primary); color: var(--pearl); }
.region-nav-links a:focus-visible, .region-nav select:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.region-nav select { display: none; min-height: 44px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; }
@media (max-width: 700px) {
  :root { --region-nav-h: 72px; }
  .region-nav { padding: 10px 12px; gap: 10px; }
  html.js .region-nav-links { display: none; }
  .region-nav select:not([hidden]) { display: block; flex: 1; }
  html:not(.js) .region-nav { flex-direction: column; align-items: flex-start; }
}
.region-group + .region-group { padding-top: 58px; }
.region-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.region-group-head h2 { font-size: 1.7rem; }
.region-group-head .count { font-family: var(--font-label); font-size: 0.82rem; color: var(--muted); }

.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.prop-card {
  background: var(--pearl); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft); transition: transform .3s ease, box-shadow .3s ease;
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--glow); }
.prop-media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.prop-card:hover .prop-media img { transform: scale(1.06); }
.prop-pool {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); color: var(--ink);
  font-family: var(--font-label); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px;
}
.prop-pool svg { width: 13px; height: 13px; color: var(--aqua); }
.prop-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.prop-sub { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.prop-card h3 { font-size: 1.22rem; line-height: 1.22; margin-bottom: 6px; }
.prop-type { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }
.prop-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; margin-top: auto; border-top: 1px solid var(--line); }
.prop-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--ink); font-weight: 600; }
.prop-meta svg { width: 17px; height: 17px; color: var(--primary); }
.prop-card .prop-soft { margin-top: 16px; text-align: center; font-size: 0.82rem; color: var(--muted); padding: 13px; background: var(--container-low); border-radius: var(--r); }
/* Whole card is the link; the CTA is a calm text affordance, not a button wall */
a.prop-card { cursor: pointer; color: inherit; }
.prop-cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--primary); }
.prop-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.prop-card:hover .prop-cta { color: var(--primary-bright); }
.prop-card:hover .prop-cta svg { transform: translate(3px, -3px); }
.featured .prop-card:hover { transform: none; box-shadow: var(--shadow-soft); }
.featured .prop-card:hover .prop-media img { transform: none; }

/* ==========================================================================
   Bedroom filter (region listing pages)
   ========================================================================== */
.bed-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  margin-bottom: 36px; padding: 14px 18px;
  background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.bed-filter[hidden] { display: none; }
.bed-filter-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bed-filter-label svg { width: 16px; height: 16px; }
.bed-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.bed-filter-options button {
  min-width: 44px; min-height: 40px; padding: 8px 16px;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--ink);
  background: var(--pearl); border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.bed-filter-options button:hover { border-color: var(--primary); }
.bed-filter-options button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bed-filter-options button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.bed-filter-status { margin: 0 0 0 auto; font-size: 0.86rem; color: var(--muted); }
.prop-card.is-filtered-out { display: none; }
.region-group.is-empty { display: none; }
@media (max-width: 620px) {
  .bed-filter { padding: 14px; }
  .bed-filter-status { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Featured carousel ("this month's entries")
   ========================================================================== */
.featured { padding-bottom: clamp(50px, 7vw, 90px); }
.carousel { position: relative; margin: 0 auto; max-width: 1600px; }
.car-viewport { overflow: hidden; padding: 6px 0 14px; }
.car-track {
  display: flex; gap: 24px; padding: 0 max(var(--gutter), calc((100vw - var(--container-max)) / 2));
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 calc((min(100vw, var(--container-max)) - 2 * var(--gutter) - 48px) / 3); scroll-snap-align: start; }
.car-slide .prop-card { height: 100%; }
.feat-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: linear-gradient(135deg, var(--amber), var(--amber-bright)); color: #fff;
  font-family: var(--font-label); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill);
}
.car-btn {
  position: absolute; top: calc(50% - 34px); transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-lift); color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: .25s;
}
.car-btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.car-btn svg { width: 22px; height: 22px; }
.car-btn[disabled] { opacity: 0; pointer-events: none; }
.car-prev { left: 14px; }
.car-next { right: 14px; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.car-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--outline-variant); transition: .25s;
}
.car-dots button[aria-selected="true"] { background: var(--brand-orange); width: 24px; border-radius: 99px; }
.feat-cta {
  margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 26px;
  flex-wrap: wrap; padding: 28px 32px; border-radius: var(--r-xl);
  background: linear-gradient(160deg, #fff7ea, #fdf3f7); border: 1px solid var(--glass-border);
}
.feat-cta h3 { margin-bottom: 6px; }
/* Paywall prompt on the destinations hub — same panel, key-gold accent */
.unlock-band { background: linear-gradient(160deg, #fff4e2, #fdf1ef); }
.unlock-band .label-caps { display: block; margin-bottom: 8px; color: var(--brand-orange); }
.feat-cta p { max-width: 60ch; font-size: 0.98rem; }

/* ==========================================================================
   "Key to the door" — the monthly-access concept
   ========================================================================== */
.key-section { padding-top: 0; }
.key-card {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 60px);
  align-items: center; padding: clamp(30px, 5vw, 54px); border-radius: var(--r-xl);
  background: linear-gradient(150deg, #fff8ec 0%, #fdf3f7 55%, #eef2fb 100%);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
}
.key-body .label-caps { display: block; margin-bottom: 12px; }
.key-body h2 { margin-bottom: 14px; }
.key-lead { font-size: 1.1rem; margin-bottom: 6px; }
.key-price {
  text-align: center; padding: 30px 26px; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.82); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-soft);
}
.key-ico { width: 34px; height: 34px; color: var(--brand-orange); }
.key-amount { white-space: nowrap; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; color: var(--ink); line-height: 1; margin: 10px 0 4px; }
/* Orientation for the US/international audience — approximate, not a quote */
.key-usd { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
.key-term { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
/* Reassures buyers there's plenty behind the paywall before they unlock it */
.key-count {
  margin: -6px 0 20px; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.7); border: 1px dashed var(--glass-border);
}
.key-count strong { display: block; font-size: 1.02rem; color: var(--ink); line-height: 1.3; }
.key-count span {
  display: block; margin-top: 4px; font-family: var(--font-label); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.key-btn { cursor: default; opacity: 0.92; }
.key-soon { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* ==========================================================================
   Bespoke travel band
   ========================================================================== */
/* Stands alone as its own section now, so it brings no inherited top gap */
.travel-section .travel-band { margin-top: 0; }
.travel-band {
  margin-top: 44px; padding: clamp(26px, 4vw, 38px); border-radius: var(--r-xl);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: center;
}
.travel-intro .label-caps { display: block; margin-bottom: 10px; }
.travel-intro h3 { margin-bottom: 8px; }
.travel-intro p { font-size: 0.98rem; }
.travel-links { display: grid; gap: 14px; }
.travel-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: var(--pearl); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.travel-card:hover { transform: translateX(4px); border-color: var(--brand-orange); box-shadow: var(--shadow-soft); }
.travel-card > svg:first-child { width: 26px; height: 26px; color: var(--brand-orange); flex-shrink: 0; }
.travel-card div { flex: 1; display: flex; flex-direction: column; }
.travel-card strong { font-size: 1.02rem; color: var(--ink); }
.travel-card span { font-size: 0.88rem; color: var(--muted); }
.travel-go { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

/* ==========================================================================
   Region hub cards (destinations page)
   ========================================================================== */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.hub-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  min-height: 340px; display: flex; align-items: flex-end; color: #fff;
  box-shadow: var(--shadow-soft); border: 1px solid var(--glass-border);
}
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hub-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,31,82,0.1) 24%, rgba(19,31,82,0.86) 100%); }
.hub-card:hover img { transform: scale(1.06); }
.hub-body { position: relative; z-index: 2; padding: 32px; width: 100%; }
.hub-body .hub-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: var(--r-pill);
  background: rgba(19,31,82,0.78); border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(6,12,28,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.9); font-weight: 600;
}
.hub-body .hub-count strong { color: var(--brand-orange-light); font-size: 1.12em; font-weight: 800; }
.hub-body h3 { color: #fff; font-size: 1.8rem; margin: 8px 0 10px; }
.hub-body p { color: rgba(255,255,255,0.86); font-size: 0.95rem; margin-bottom: 16px; max-width: 42ch; }
.hub-body .hub-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--aqua-light); }
.hub-card.feature { grid-column: span 2; min-height: 420px; }

/* ==========================================================================
   CTA band (navy gradient — lighter than charcoal)
   ========================================================================== */
.cta-band { position: relative; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(130deg, var(--navy-deep) 0%, var(--primary) 60%, var(--primary-bright) 120%); }
.cta-band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(40vw 40vw at 15% 20%, rgba(111,240,230,0.16), transparent 60%),
              radial-gradient(40vw 40vw at 90% 90%, rgba(90,160,230,0.2), transparent 55%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band .label-caps { color: var(--aqua-light); }
.cta-band h2 { color: #fff; margin: 16px auto 18px; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 54ch; margin: 0 auto 30px; font-size: 1.08rem; }
.cta-band .hero-actions { justify-content: center; }

/* Owners feature */
.owners-feature { background: linear-gradient(160deg, #fff7ea, #fdf2f7); }
.owners-price { font-weight: 800; font-size: 2.3rem; color: var(--amber); letter-spacing: -0.02em; }
.owners-price span { font-size: 0.95rem; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: var(--pearl); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(36,55,155,0.1); background: #fff; }

.contact-tiles { display: grid; gap: 14px; }
.contact-tile { display: flex; gap: 15px; align-items: center; padding: 18px 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); transition: .25s; }
.contact-tile:hover { transform: translateX(4px); box-shadow: var(--shadow-soft); }
.contact-tile svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.contact-tile .ct-label { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.contact-tile .ct-val { font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Prose
   ========================================================================== */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.1rem, 5vw, 3rem); letter-spacing: -0.03em; }
.prose h2 { margin: 38px 0 16px; }
.prose h3 { margin: 28px 0 12px; }
.prose p { margin-bottom: 16px; font-size: 1.05rem; }
.prose ul.dotted { margin: 16px 0; display: grid; gap: 11px; }
.prose ul.dotted li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.prose ul.dotted svg { width: 18px; height: 18px; color: var(--aqua); flex-shrink: 0; margin-top: 4px; }

/* Resource links */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.res-col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.res-col h3 svg { width: 22px; height: 22px; color: var(--aqua); }
.res-list { display: grid; gap: 10px; }
.res-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--r); font-weight: 600; transition: .25s;
}
.res-list a:hover { border-color: var(--aqua); transform: translateX(4px); box-shadow: var(--shadow-soft); }
.res-list a svg { width: 16px; height: 16px; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: #eaeefb; padding: 76px 0 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40vw 30vw at 90% 0%, rgba(63,95,214,0.28), transparent 60%),
              radial-gradient(30vw 30vw at 5% 100%, rgba(15,158,148,0.18), transparent 60%); }
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 56px; }
.footer-logo { width: 180px; height: auto; display: block; margin-bottom: 10px; }
.footer-brand .brand-sub { font-family: var(--font-label); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aqua-light); margin-top: 6px; display: block; }
.footer-brand p { color: rgba(234,238,251,0.62); margin-top: 16px; font-size: 0.95rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua-light); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: rgba(234,238,251,0.72); font-size: 0.92rem; margin-bottom: 11px; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-col .with-ico { display: flex; gap: 10px; align-items: flex-start; }
.footer-col .with-ico svg { width: 16px; height: 16px; color: var(--aqua-light); flex-shrink: 0; margin-top: 3px; }
.footer-col .with-ico a[href^="mailto:"] { white-space: nowrap; }
/* Small-print disclaimers used near outbound/third-party links */
.fineprint { font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
.fineprint a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fineprint a:hover { color: var(--primary-bright); }

.footer-legal { border-top: 1px solid rgba(234,238,251,0.14); padding: 22px 0 4px; }
.footer-legal p { color: rgba(234,238,251,0.45); font-size: 0.82rem; line-height: 1.6; max-width: 90ch; margin-bottom: 8px; }

.footer-bottom { border-top: 1px solid rgba(234,238,251,0.14); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { color: rgba(234,238,251,0.5); font-size: 0.84rem; }
.footer-bottom .fb-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(234,238,251,0.5); font-size: 0.84rem; }
.footer-bottom a:hover { color: var(--aqua-light); }

/* ==========================================================================
   Back-to-top (mobile)
   ========================================================================== */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)); color: #fff;
  align-items: center; justify-content: center; box-shadow: var(--shadow-lift);
  display: none; opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.to-top svg { width: 22px; height: 22px; }
.to-top.show { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .to-top { display: flex; }
}

/* ==========================================================================
   Reveal animation (JS-gated so no-JS always shows content)
   ========================================================================== */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   Photo strip — a glimpse of real listings above the directory unlock
   ========================================================================== */
.strip-section { padding: clamp(28px, 4vw, 44px) 0; }
.photo-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.strip-thumb {
  flex: 1 1 0; min-width: 0; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft); background: var(--container-low);
}
/* Decorative reinforcement only — deliberately not links, so no hover affordance */
.strip-thumb img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; }
.strip-caption {
  display: block; padding: 9px 8px;
  background: var(--pearl); color: var(--primary);
  font-family: var(--font-label); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.06em; line-height: 1.2; text-align: center; text-transform: uppercase;
}
/* Six fill the row on a wide screen; the rest are for the mobile swipe */
@media (min-width: 861px) {
  .strip-thumb:nth-child(n+7) { display: none; }
}
@media (max-width: 860px) {
  /* fixed width so the row scrolls and the last thumb peeks as a swipe hint */
  .photo-strip { gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .strip-thumb { flex: 0 0 auto; width: 205px; }
}
@media (max-width: 620px) {
  /* roughly half the viewport, so two sit side by side and the third peeks */
  .strip-thumb { width: 180px; }
}

/* ==========================================================================
   FAQ accordion (native <details> — works with JS disabled)
   ========================================================================== */
.faq-group { max-width: 860px; }
.faq-group + .faq-group { margin-top: 56px; }
/* Matches the group-heading step already used by .region-group-head */
.faq-group > h2 { font-size: 1.7rem; margin-bottom: 8px; }
.faq-group > .faq-intro { color: var(--muted); margin-bottom: 28px; max-width: 60ch; }

.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--pearl); box-shadow: var(--shadow-soft);
  margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.faq-item[open] { border-color: rgba(36, 55, 155, 0.22); box-shadow: var(--shadow-lift); }

.faq-item > summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  padding: 20px 24px; font-weight: 700; color: var(--ink);
  list-style: none; user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--primary); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--primary-bright); outline-offset: -2px;
}
.faq-q { flex: 1; }

/* Chevron drawn in CSS so the accordion never waits on the icon script */
.faq-item > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease, border-color .25s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--primary);
}

.faq-a { padding: 0 24px 22px; max-width: 68ch; }
.faq-a p { color: var(--muted); }
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: var(--primary); font-weight: 600; }

@media (max-width: 620px) {
  .faq-item > summary { padding: 17px 18px; gap: 12px; }
  .faq-a { padding: 0 18px 18px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 28px; }
  /* Nav links are still on-screen here (hamburger kicks in at 860px), so the
     tagline gives up size before it gives up space */
  .brand-tagline { font-size: 0.62rem; }
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* odd one out — let the optional step run the full width */
  .step-optional { grid-column: 1 / -1; }
  .prop-grid { grid-template-columns: repeat(2, 1fr); }
  .car-slide { flex-basis: calc((100vw - 2 * var(--gutter) - 24px) / 2); }
}
@media (max-width: 860px) {
  /* Nav links move behind the hamburger here, so the tagline gets its size
     back — it only shares the row with the logo and the toggle now */
  .brand-tagline { font-size: 0.68rem; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    background: var(--pearl); padding: 22px 32px 40px; gap: 4px;
    transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--shadow-lift); z-index: 90; overflow-y: auto;
  }
  .nav-menu-logo { display: block; margin: 0 0 20px; }
  .nav-menu-logo img { width: 148px; height: auto; display: block; }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { color: var(--ink); font-size: 1.05rem; font-weight: 600; padding: 15px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-menu a::after { display: none; }
  .nav-menu a.active { color: var(--primary); }
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; }
  .nav-menu a.nav-menu-cta {
    display: flex; justify-content: center; margin-top: 24px; padding: 14px 26px;
    color: #fff; font-size: 0.95rem; border-bottom: 0;
  }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(19,31,82,0.4); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: .3s; z-index: 80; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
  .split { grid-template-columns: 1fr; }
  /* Purely decorative split imagery: once the columns stack it sits under the
     copy with nothing to balance, so drop it rather than cost a screen of scroll */
  .split-media.desktop-only { display: none; }
  .split.reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 16/10; }
  /* Taller than the standard mobile crop so the boat in the cove stays in
     frame instead of being cut off the top */
  .split-media img.focus-lower { aspect-ratio: 5/4; object-position: center 32%; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card.feature { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  :root { --gutter: 18px; --header-h: 72px; }
  body { font-size: 16px; }
  /* Phone header only has room for logo + tagline + toggle, so the tagline
     drops "& more", tightens up, and is allowed to shrink — without this the
     brand's flex-shrink:0 pushes the menu button off the screen edge */
  .nav { gap: 10px; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-tagline { font-size: 0.56rem; letter-spacing: 0.06em; min-width: 0; }
  /* Keep the badge from swallowing the photo it sits on */
  .split-media .float-badge { padding: 12px 15px; bottom: 14px; right: 14px; }
  .split-media .float-badge.badge-left { left: 14px; }
  .split-media .float-badge.badge-top { top: 14px; bottom: auto; }
  .float-badge .fb-num { font-size: 1.3rem; }
  .float-badge .fb-txt { font-size: 0.56rem; letter-spacing: 0.08em; margin-top: 4px; }
  .brand-logo { height: 44px; width: auto; }
  .brand-mark { height: 54px; }

  .brand { gap: 8px; }
  .brand { gap: 8px; }
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-inner { padding-bottom: 62px; }
  /* Copy runs the full width on a phone, so darken evenly rather than to one side */
  .hero-cover .hero-bg::after {
    background: linear-gradient(180deg, rgba(8, 16, 36, 0.40) 0%, rgba(8, 16, 36, 0.46) 55%, rgba(8, 16, 36, 0.36) 100%);
  }
  .cover-lead { max-width: none; }
  .cover-lines { max-width: none; }
  /* Same treatment for the belief band — the copy fills the width, so the
     photograph is darkened evenly instead of only on the left */
  .belief-band { min-height: 0; }
  .belief-bg img { object-position: 62% center; }
  .belief-bg::after {
    background: linear-gradient(180deg, rgba(8, 16, 36, 0.46) 0%, rgba(8, 16, 36, 0.52) 55%, rgba(8, 16, 36, 0.44) 100%);
  }
  .belief-head { max-width: none; }
  /* The card runs the full column width on a phone rather than the fixed
     34ch measure that suits the wider desktop layout */
  .belief-card { display: block; max-width: none; }
  /* The rule spans the whole column on a phone rather than sitting as a short
     stub under a full-width headline */
  .belief-band .cover-orn { max-width: none; margin: 18px 0; }
  .cover-lines .br-narrow { display: inline; }
  .cover-lines .br-wide { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .usp-grid > .usp:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 260px; margin: 0 auto; }
  .filter-search { flex-basis: 100%; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .dest-card.wide, .dest-card.tall { grid-column: auto; grid-row: auto; }
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step { padding: 22px 18px; }
  .prop-grid { grid-template-columns: 1fr; }
  /* peek the next card so it reads as swipeable */
  .car-track { gap: 14px; }
  .car-slide { flex-basis: calc(100vw - 2 * var(--gutter) - 34px); }
  .car-btn { display: none; }
  .feat-cta { padding: 24px; text-align: center; justify-content: center; }
  .key-card { grid-template-columns: 1fr; text-align: center; }
  .key-amount { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .travel-band { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Centre the legal bar and let the links sit as an even, tappable row */
  .footer-legal { text-align: center; }
  .footer-legal p { margin-left: auto; margin-right: auto; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 14px; }
  .footer-bottom .fb-links { justify-content: center; gap: 10px 20px; }
  .footer-bottom .fb-links a { padding: 4px 0; }
  .quickbar-inner { flex-direction: column; align-items: stretch; }
  .quickbar a { min-width: 0; }
  .quickbar-label { text-align: center; padding-bottom: 4px; }
}
@media (max-width: 380px) {
  .steps { grid-template-columns: 1fr; }
}
/* "& more" fits on a 375px phone but collides with the menu button on the
   narrowest handsets, so it drops only below that */
@media (max-width: 349px) {
  .brand-tagline .tagline-extra { display: none; }
}

/* ==========================================================================
   Directory unlock (unlock.html)
   ========================================================================== */
.unlock-shell { max-width: 470px; margin: 0 auto; }
.unlock-panel {
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-soft);
}
.unlock-panel h2 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); margin-bottom: 10px; }
.unlock-lead { color: var(--muted); margin-bottom: 22px; }
.unlock-list { margin-bottom: 26px; }
.unlock-list li { align-items: flex-start; }
.unlock-fine { font-size: 0.8rem; color: var(--muted); margin-top: 14px; text-align: center; }
.unlock-alt { font-size: 0.9rem; color: var(--muted); margin-top: 18px; text-align: center; }
.unlock-status { color: var(--muted); text-align: center; margin: 0; }
.unlock-label {
  display: block; font-family: var(--font-label); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.unlock-input {
  width: 100%; padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--pearl);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.unlock-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* Six digits, spaced out so they are easy to check against the email */
.unlock-code-input {
  font-family: var(--font-label); font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.4em; text-align: center; padding-left: 0.4em;
}
.unlock-error { color: #b3261e; font-size: 0.86rem; margin: -8px 0 14px; }
/* A button that reads as a link, so the alternative actions stay quiet */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--primary); font-weight: 600; text-decoration: underline;
}
.linkish:hover { opacity: 0.8; }

/* Header CTA once you hold access: a state, not a call to action. Aqua rather
   than the primary blue so it reads as "you are in" at a glance. */
.nav-cta .btn.has-access, .nav-menu a.nav-menu-cta.has-access {
  background: var(--aqua);
  border-color: var(--aqua);
  color: #fff;
}
.nav-cta .btn.has-access:hover, .nav-menu a.nav-menu-cta.has-access:hover { background: #0c8880; border-color: #0c8880; }

/* Payment confirmation, shown only on the way back from Stripe */
.unlock-paid {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  background: color-mix(in srgb, var(--aqua) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--aqua) 30%, transparent);
  border-radius: 10px; color: #0b6f68; font-weight: 600; font-size: 0.92rem;
}
.unlock-paid i, .unlock-paid svg { width: 18px; height: 18px; flex: none; }

/* "or" divider above the sign-in route on the buy panel */
.unlock-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.unlock-sep::before, .unlock-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.unlock-sep span { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* The buy panel: a photo card in the spirit of Gary's mock-up. The copy sits on
   a white wash that fades out, so the photo shows between the ticks and the
   button without ever sitting behind text. */
.unlock-shell:has(.unlock-feature:not([hidden])) { max-width: 520px; }
.unlock-feature { padding: 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.unlock-feature-hero {
  display: flex; flex-direction: column;
  /* Full width, pinned to the bottom, so the sea and the loungers both show
     below the copy rather than just a crop of sand */
  background: url("../images/bespoke-escape-cove.webp") center bottom / 100% auto no-repeat, #fff;
}
.unlock-feature-copy {
  --fade: clamp(56px, 12vw, 84px);
  padding: clamp(26px, 5vw, 38px) clamp(22px, 5vw, 36px) var(--fade);
  /* Solid white behind every line of text; the fade lives only in the bottom
     padding, so the photo can never rise into the ticks on a narrow screen */
  background: linear-gradient(180deg, #fff calc(100% - var(--fade)), rgba(255,255,255,0) 100%);
}
.unlock-feature-title {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: clamp(1.85rem, 5.4vw, 2.35rem); line-height: 1.06; letter-spacing: -0.01em;
  margin: 0 0 12px; text-wrap: balance;
}
.unlock-feature-title span { display: block; color: var(--amber); }
.unlock-feature-kicker { color: var(--muted); font-weight: 500; margin: 0 0 22px; }
.unlock-feature .unlock-list { margin-bottom: 0; }
.unlock-feature-cta {
  width: auto; margin: clamp(70px, 16vw, 120px) clamp(18px, 5vw, 32px) clamp(20px, 4vw, 28px);
  padding-top: 16px; padding-bottom: 16px; font-size: 1rem;
  box-shadow: 0 18px 36px -16px rgba(11, 23, 48, 0.55);
}
.unlock-feature-foot { padding: 4px clamp(22px, 5vw, 36px) clamp(24px, 4vw, 32px); }

/* ==========================================================================
   Access banner (top of each region page)
   ========================================================================== */
.access-banner {
  display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 22px;
  margin-bottom: 18px; padding: 12px 22px 12px 12px;
  background: linear-gradient(150deg, #fff8ec 0%, #fdf3f7 60%, #eef2fb 100%);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.access-banner[hidden] { display: none; }
.access-banner-media {
  align-self: stretch; min-height: 92px; border-radius: var(--r-md);
  background: url("../images/bespoke-escape-cove.webp") center 80% / cover no-repeat, var(--container-low);
}
.access-banner-title {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.12; margin: 0 0 6px;
}
.access-banner-title span { color: var(--amber); }
.access-banner-sub { color: var(--muted); font-size: 0.9rem; margin: 0; }
.access-banner-btn { white-space: nowrap; }
@media (max-width: 860px) {
  .access-banner { grid-template-columns: 110px 1fr; }
  .access-banner-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 520px) {
  .access-banner { grid-template-columns: 1fr; gap: 14px; padding: 12px 12px 16px; }
  .access-banner-media { min-height: 110px; }
  .access-banner-body { padding: 0 6px; }
}

/* Destination catalogue cover — type and accents follow Gary's reference. */
.destination-cover { min-height: clamp(740px, 88svh, 900px); align-items: center; }
.destination-cover .listing-hero-inner { padding-top: calc(var(--header-h) + 58px); padding-bottom: 70px; }
.destination-cover .hero-bg::after { background: linear-gradient(90deg, rgba(8,31,53,.57), rgba(8,31,53,.34) 43%, rgba(8,31,53,.05) 78%), linear-gradient(180deg, rgba(8,31,53,.12), transparent 70%); }
.destination-cover .label-caps { display: block; color: #26e1e5; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-weight: 700; letter-spacing: .3em; margin-bottom: 22px; }
.destination-cover h1 { font-size: clamp(3.7rem, 6.7vw, 6.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px; }
.destination-cover .listing-hero-inner > p:not(.listing-hero-price):not(.listing-price-note) { max-width: 47ch; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; font-weight: 400; }
.destination-proof { display: flex; align-items: center; gap: 22px; margin: 28px 0 18px; }
.destination-proof > svg { color: #f4cf71; width: 54px; height: 54px; flex: 0 0 auto; stroke-width: 1.4; }
.destination-proof p { border-left: 2px solid #f4cf71; padding-left: 22px; font-size: clamp(.9rem, 1.15vw, 1.05rem); line-height: 1.4; font-weight: 400; }
.destination-proof strong { color: #f4cf71; font-size: 1.18em; font-weight: 700; }
.destination-cover .listing-hero-price { font-size: clamp(2.5rem, 4vw, 3.6rem); font-weight: 400; line-height: 1.1; margin: 18px 0 24px; }
.destination-cover .listing-hero-price span { font-size: 1em; opacity: 1; font-weight: 400; }
.destination-cover-cta { display: inline-flex; align-items: center; gap: 20px; padding: 17px 30px; border-radius: 999px; background: #009fa6; color: #fff; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; box-shadow: 0 8px 26px rgba(0,40,52,.18); transition: background .2s, transform .2s; }
.destination-cover-cta svg { width: 25px; height: 25px; stroke-width: 3; }
.destination-cover-cta:hover { background: #007f86; transform: translateY(-2px); }
.destination-cover-cta:focus-visible { outline: 3px solid #f4cf71; outline-offset: 5px; }
.destination-cover .listing-price-note { max-width: none; margin: 14px 0 0; font-size: .78rem; font-weight: 400; }
#holiday-destinations, #unlock-shell { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 620px) {
  .destination-cover { min-height: 760px; }
  .destination-cover .listing-hero-inner { padding-top: calc(var(--header-h) + 55px); padding-bottom: 64px; }
  .destination-cover .hero-bg img { object-position: 66% center; }
  .destination-cover .hero-bg::after { background: linear-gradient(90deg, rgba(8,31,53,.53), rgba(8,31,53,.32) 74%, rgba(8,31,53,.15)); }
  .destination-cover .label-caps { font-size: .86rem; letter-spacing: .23em; margin-bottom: 22px; }
  .destination-cover h1 { font-size: clamp(2rem, 13vw, 3.7rem); max-width: none; white-space: nowrap; margin-bottom: 24px; }
  .destination-cover .listing-hero-inner > p:not(.listing-hero-price):not(.listing-price-note) { font-size: 1.1rem; line-height: 1.5; }
  .destination-proof { gap: 14px; margin: 24px 0 18px; }
  .destination-proof > svg { width: 38px; height: 38px; }
  .destination-proof p { padding-left: 14px; font-size: .82rem; }
  .destination-cover .listing-hero-price { font-size: 2.7rem; margin: 18px 0 22px; }
  .destination-cover-cta { font-size: .87rem; padding: 16px 23px; gap: 12px; }
  .destination-cover .listing-price-note { max-width: none; font-size: .73rem; }
}

/* Owner links describe where the click leads; booking happens with the owner. */
.prop-direct { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted); }
.featured-updates { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 18px auto 0; padding: 12px 18px; border-radius: var(--r-md); background: var(--pearl); color: var(--primary); }
.featured-updates svg { width: 18px; height: 18px; flex-shrink: 0; }

.prop-meta span:first-child { white-space: nowrap; }
.prop-meta svg { flex-shrink: 0; }

/* Optional analytics: accessible, equal-choice controls. */
.analytics-choice { position: fixed; z-index: 2500; bottom: 16px; left: 16px; right: 16px; max-width: 1000px; margin: auto; padding: 22px; display: flex; align-items: center; gap: 24px; background: #fff; color: #16203a; border: 1px solid #b9c0d0; border-radius: 16px; box-shadow: 0 8px 32px rgba(11,23,48,.22); }
.analytics-choice[hidden] { display: none; }
.analytics-choice strong { font-size: 1.05rem; }
.analytics-choice p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.analytics-choice a { color: #24379b; text-decoration: underline; }
.analytics-choice-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 10px; }
.analytics-choice .btn { min-height: 44px; }
.analytics-settings { display: block; margin: 18px 0 0; padding: 10px 0; min-height: 44px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 700px) { .analytics-choice { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; } .analytics-choice-actions { flex-wrap: nowrap; } .analytics-choice-actions .btn { flex: 1; padding: 12px 10px; font-size: .85rem; } }