/* ==========================================================================
   StarDust Retreat — brand tokens
   Golden tropical fantasy: warm gold, palm mint, tropical aqua, soft pastel
   sparkle accents. See DESIGN.md at the repo root for the full system.
   ========================================================================== */
:root {
  /* Brand palette — verbatim client hex, kept literal (not converted) */
  --sun-kissed-gold: #f7d27a;
  --warm-honey-gold: #e8b95c;
  --soft-sunshine-yellow: #fceaa2;

  --palm-leaf-mint: #bee8c4;
  --tropical-aqua-glow: #a8e6e9;
  --warm-sand-beige: #f5e9d6;

  --golden-stardust: #ffdfaf;
  --soft-peach-light: #f7c9b8;
  --dreamy-pastel-glow: #e9e4ff;

  /* Ink — the only text colors; every brand swatch above is too light to
     carry text. Verified ≥4.5:1 against every background it's used on. */
  --color-ink: #3a2314;
  --color-ink-muted: #6b4a2e;

  /* Legacy semantic aliases kept so the rest of this file (and ~20 inline
     `color: var(--color-gold-deep)` icon accents across the Razor views)
     don't need touching one-by-one — only their values moved to the new
     palette. */
  --color-gold: var(--sun-kissed-gold);
  --color-gold-deep: #b8801f; /* unchanged — already verified 4.6:1 on white/sand */
  --color-midnight: var(--color-ink);
  --color-text-main: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);

  /* Lagoon — the one deep, saturated accent in an otherwise pastel palette.
     Carries links and secondary buttons; ≥5:1 on white, off-white, sand,
     aqua and sun-kissed gold, so it can sit on any band on the site. */
  --color-lagoon: #0b5f68;
  --color-lagoon-deep: #084950;

  /* Page ground is a clean, near-neutral off-white — the gold, sand and aqua
     bands carry the warmth; the body no longer has to. */
  --color-bg: #fbfbfa;
  --color-bg-alt: var(--warm-sand-beige);
  --color-surface: #ffffff;
  --color-border-soft: #e9d9b8;

  --shadow-glow-gold: 0 8px 30px rgba(232, 185, 92, 0.28);
  --shadow-glow-soft: 0 4px 16px rgba(247, 210, 122, 0.35);
  --shadow-lift: 0 10px 30px rgba(58, 35, 20, 0.12);
  --shadow-lift-hover: 0 18px 44px rgba(184, 128, 31, 0.28);

  /* Two faces. Fraunces — a warm, soft serif with optical sizing — carries
     every heading from the hero down to h5 (display and heading are the same
     family on purpose: one voice, two volumes). Nunito carries body and UI. */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-heading: var(--font-display);
  --font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  position: relative;
  min-height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-optical-sizing: auto;
  color: var(--color-ink);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Links site-wide take the lagoon accent instead of Bootstrap's default blue. */
a {
  color: var(--color-lagoon);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover {
  color: var(--color-lagoon-deep);
}

/* Bootstrap's .text-muted is a translucent gray — washed out on warm
   backgrounds. Route it through the ink ramp (≥5.7:1 on every band). */
.text-muted {
  color: var(--color-ink-muted) !important;
}

/* Display type — the sign-painter voice. */
.sv-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.08;
  color: var(--color-ink);
}
.sv-display-2 {
  font-size: clamp(2rem, 3vw + 0.9rem, 3.25rem);
}
.sv-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-bottom: 2rem;
}
.sv-section-intro {
  color: var(--color-ink-muted);
  font-size: 1.1rem;
  max-width: 44rem;
}

/* A quiet text link that still reads as an action — used beside a primary
   button so the pair never looks like two buttons shouting at once. */
.sv-link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid rgba(58, 35, 20, 0.3);
  padding-bottom: 0.1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sv-link-quiet::after {
  content: "\2192";
  transition: transform 0.35s var(--ease-out-expo);
}
.sv-link-quiet:hover,
.sv-link-quiet:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-link-quiet:hover::after,
  .sv-link-quiet:focus-visible::after {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   Sparkles — the site-wide magic-dust motion system. Mostly golden-stardust
   dots, an occasional dreamy-pastel shimmer. Slow drift + fade, never dense
   enough to sit on top of copy. See DESIGN.md → Motion.
   ========================================================================== */
.sv-sparkle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sv-sparkle {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--golden-stardust) 0%, rgba(255, 223, 175, 0) 72%);
  opacity: 0.28;
}
.sv-sparkle.sv-sparkle-pastel {
  background: radial-gradient(circle, var(--dreamy-pastel-glow) 0%, rgba(233, 228, 255, 0) 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-sparkle {
    opacity: 0;
    animation: sv-sparkle-drift var(--sdur, 4.5s) ease-in-out var(--sdelay, 0s) infinite;
  }
}
@keyframes sv-sparkle-drift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1; }
  50%  { transform: translate(7px, -16px) scale(1); }
  82%  { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-5px, -30px) scale(0.5); }
}

/* Small fixed sparkle accents anchored near a heading — a couple of dots,
   never a field. */
.sv-heading-sparkle {
  position: relative;
  display: inline-block;
}
.sv-heading-sparkle::before,
.sv-heading-sparkle::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
}
.sv-heading-sparkle::before {
  top: -0.4rem;
  right: -1rem;
  background: radial-gradient(circle, var(--golden-stardust), transparent 70%);
}
.sv-heading-sparkle::after {
  bottom: -0.2rem;
  right: -1.6rem;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, var(--dreamy-pastel-glow), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-heading-sparkle::before {
    opacity: 0;
    animation: sv-sparkle-drift 5s ease-in-out 0.2s infinite;
  }
  .sv-heading-sparkle::after {
    opacity: 0;
    animation: sv-sparkle-drift 6s ease-in-out 1.4s infinite;
  }
}

/* CTA / logo hover sparkle burst — pure CSS, no extra DOM. */
.sv-sparkle-hover {
  position: relative;
}
.sv-sparkle-hover::after {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(2.5px 2.5px at 14% 20%, var(--golden-stardust), transparent 65%),
    radial-gradient(2px 2px at 82% 18%, var(--dreamy-pastel-glow), transparent 65%),
    radial-gradient(2.5px 2.5px at 66% 82%, var(--golden-stardust), transparent 65%),
    radial-gradient(2px 2px at 24% 78%, var(--golden-stardust), transparent 65%);
  transition: opacity 0.25s ease;
}
.sv-sparkle-hover:hover::after,
.sv-sparkle-hover:focus-visible::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .sv-sparkle-hover:hover::after,
  .sv-sparkle-hover:focus-visible::after {
    animation: sv-sparkle-pop 0.6s ease-out;
  }
}
@keyframes sv-sparkle-pop {
  from { transform: scale(0.75); }
  to   { transform: scale(1); }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--color-ink);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
.skip-link:focus {
  top: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(232, 185, 92, 0.85);
  outline-offset: 2px;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.sv-navbar {
  background: linear-gradient(180deg, var(--soft-sunshine-yellow) 0%, var(--color-bg) 100%);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.sv-brand {
  color: var(--color-ink) !important;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.sv-brand i {
  color: var(--warm-honey-gold);
}
.sv-navbar .nav-link {
  color: var(--color-ink) !important;
  font-weight: 600;
}
.sv-navbar .nav-link:hover {
  color: var(--color-gold-deep) !important;
}
.sv-navbar .nav-link.sv-cta-nav {
  background: var(--sun-kissed-gold);
  color: var(--color-ink) !important;
  border-radius: 999px;
  padding: 0.4rem 1.1rem !important;
  font-weight: 700;
  box-shadow: var(--shadow-glow-soft);
}
.sv-navbar .nav-link.sv-cta-nav:hover {
  background: var(--warm-honey-gold);
  color: var(--color-ink) !important;
}
.sv-contrast-toggle {
  background: transparent;
  border: 1px solid rgba(58, 35, 20, 0.3);
  color: var(--color-ink);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}
.sv-contrast-toggle:hover {
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
}
.sv-contrast-toggle[aria-pressed="true"] {
  background: var(--sun-kissed-gold);
  border-color: var(--sun-kissed-gold);
  color: var(--color-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Full-bleed photo hero. The gold gradient paints first (and is all a
   no-photo fallback ever shows); the photo fades in over it, and a gold wash
   rising from the bottom-left keeps the copy on solid colour while the top of
   the picture stays clear. Layers, bottom to top: media (0) → wash (1) →
   stars/Mickey + sparkles (2) → copy (3). `isolation` keeps that stack
   private so the wave divider below can sit over the whole hero. */
.sv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-ink);
  background: radial-gradient(ellipse at top, var(--soft-sunshine-yellow) 0%, var(--sun-kissed-gold) 55%, var(--warm-honey-gold) 100%);
  min-height: clamp(30rem, 84vh, 50rem);
  min-height: clamp(30rem, 84svh, 50rem);
  display: flex;
  align-items: flex-end;
  padding: 6rem 0 6.5rem;
}
@media (min-width: 768px) {
  .sv-hero {
    padding: 7rem 0 7.5rem;
  }
}
.sv-hero-media {
  position: absolute;
  inset: -10% 0 0 0; /* headroom so the parallax drift never exposes the edge */
  z-index: 0;
}
.sv-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.sv-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(247, 210, 122, 1) 0%,
      rgba(247, 210, 122, 0.96) 26%,
      rgba(247, 210, 122, 0.62) 50%,
      rgba(247, 210, 122, 0.14) 76%,
      rgba(252, 234, 162, 0) 100%),
    linear-gradient(100deg,
      rgba(247, 210, 122, 0.82) 0%,
      rgba(247, 210, 122, 0.4) 48%,
      rgba(247, 210, 122, 0) 78%);
}
.sv-hero .container {
  position: relative;
  z-index: 3;
}
.sv-hero-content {
  max-width: 44rem;
}
.sv-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(2.75rem, 6.5vw + 0.5rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35), 0 14px 40px rgba(184, 128, 31, 0.22);
}
.sv-hero h1 > span {
  display: block;
}
.sv-hero-greeting {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 1.6vw + 0.7rem, 1.9rem);
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-shadow: none;
}
.sv-hero p.lead {
  color: var(--color-ink);
  font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
  max-width: 36rem;
  margin-bottom: 1.75rem;
}
.sv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.sv-hero .sv-emphasis {
  color: var(--color-gold-deep);
  text-shadow: 0 0 18px rgba(233, 228, 255, 0.7);
}

/* Small stars (plus a hidden Mickey) drifting behind the hero content —
   decorative, aria-hidden, never under the copy column. */
.sv-hero-decor,
.sv-hero .sv-sparkle-field {
  z-index: 2;
}
.sv-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sv-hero-stars {
  position: absolute;
  top: -4%;
  left: -3%;
  width: 106%;
  height: 112%;
}
/* Starfield — small twinkling stars over the hero sky (server-rendered from
   Home.cshtml), and the layer home.js drops shooting stars into. */
.sv-starfield {
  position: absolute;
  inset: 0;
}
.sv-star {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 30%);
  width: var(--s, 0.8rem);
  height: var(--s, 0.8rem);
  fill: #ffffff;
  opacity: 0.6;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75));
  overflow: visible;
}
.sv-star-pastel {
  fill: var(--soft-sunshine-yellow);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-star {
    animation:
      sv-star-twinkle var(--dur, 3s) ease-in-out var(--d, 0s) infinite alternate,
      sv-star-float calc(var(--dur, 3s) * 3) ease-in-out var(--d, 0s) infinite alternate;
  }
}
@keyframes sv-star-twinkle {
  from { opacity: 0.15; transform: scale(0.7); }
  to   { opacity: 0.95; transform: scale(1.12); }
}
@keyframes sv-star-float {
  from { translate: 0 0; }
  to   { translate: 0 -8px; }
}

/* Shooting star: a streak that pivots around its bright head and travels
   down-left along its own axis, fading as it goes. Spawned by home.js only
   when motion is allowed; removed when its animation ends. */
.sv-shooting-star {
  position: absolute;
  left: var(--x, 70%);
  top: var(--y, 15%);
  width: 180px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 18%, rgba(255, 255, 255, 0) 100%);
  animation: sv-shoot var(--dur, 1.3s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.sv-shooting-star::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8), 0 0 18px 6px rgba(252, 234, 162, 0.6);
}
@keyframes sv-shoot {
  0%   { opacity: 0; transform: rotate(var(--angle, -25deg)) translateX(0); }
  8%   { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--angle, -25deg)) translateX(-360px); }
}

.sv-hero-mickey {
  position: absolute;
  bottom: 6%;
  left: 4%;
  width: 96%;
  max-width: 720px;
  fill: #ffffff;
  opacity: 0.16;
  /* The rest of this layer is pointer-events:none so it can't intercept
     clicks meant for the hero buttons underneath — but that would also
     swallow the hover that reveals this element's <title> tooltip, so
     re-enable pointer events just for this one shape. */
  pointer-events: auto;
  cursor: default;
}

/* Gold page header every interior page opens with (Views/Shared/_PageHead). */
.sv-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-ink);
  background: linear-gradient(180deg, var(--soft-sunshine-yellow) 0%, var(--sun-kissed-gold) 100%);
  padding: 3.25rem 0 4.75rem;
}
@media (min-width: 768px) {
  .sv-page-head {
    padding: 4.25rem 0 6.5rem;
  }
}
.sv-page-head .container {
  position: relative;
  z-index: 1;
}
.sv-display-1 {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 4.25rem);
}
.sv-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}
.sv-breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.4rem;
  color: var(--color-ink-muted);
}
.sv-breadcrumb a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 35, 20, 0.3);
}
.sv-breadcrumb a:hover {
  border-bottom-color: var(--color-ink);
}
.sv-display-3 {
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.1rem);
}
.sv-page-lead {
  font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
  max-width: 44rem;
  margin: 0;
}
.sv-page-head .sv-admin-nav {
  margin: 1.75rem 0 0 !important;
  gap: 0.35rem;
}
.sv-page-head .sv-admin-nav .nav-link {
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-ink);
  font-weight: 700;
}
.sv-page-head .sv-admin-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.8);
}
.sv-page-head .sv-admin-nav .nav-link.active {
  background: var(--color-ink);
  color: var(--soft-sunshine-yellow);
}

.sv-hero-placeholder {
  background: linear-gradient(135deg, var(--soft-sunshine-yellow), var(--warm-sand-beige));
  border: 1px solid rgba(58, 35, 20, 0.12);
  border-radius: 24px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-deep);
  font-size: 3rem;
  box-shadow: var(--shadow-glow-gold), inset 0 0 60px rgba(255, 223, 175, 0.6);
  position: relative;
}

.sv-hero-photo {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(58, 35, 20, 0.12);
  box-shadow: var(--shadow-glow-gold), inset 0 0 60px rgba(255, 223, 175, 0.6);
  position: relative;
  aspect-ratio: 4 / 3;
}
.sv-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv-map-frame {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(58, 35, 20, 0.12);
  box-shadow: var(--shadow-glow-gold);
  aspect-ratio: 4 / 3;
  background: var(--warm-sand-beige);
  position: relative;
}
.sv-map-frame iframe,
.sv-map-frame .sv-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Label-free MapLibre map (Villa page, js/pages/villa-map.js). Until the
   map has loaded — or if it never does — the frame shows a plain link out
   to Google Maps instead of an empty box. */
.sv-map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--color-lagoon);
  background: var(--warm-sand-beige);
  text-decoration: none;
  z-index: 1;
}
.sv-map.is-ready .sv-map-fallback {
  display: none;
}
/* Wrapper is sized to the rotated pin's bounding box so the teardrop's point
   lands exactly on the marker anchor (bottom centre). */
.sv-map-marker {
  width: 3.7rem;
  height: 3.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-map-pin {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-gold-deep);
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(58, 35, 20, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
}
.sv-map-pin i {
  transform: rotate(45deg);
}
.sv-map .maplibregl-ctrl-attrib {
  font-size: 0.7rem;
}
.sv-map .maplibregl-ctrl-group button:focus-visible {
  outline: 3px solid var(--color-gold-deep);
}
/* Attraction markers: a lagoon disc with a white Font Awesome glyph. */
.sv-map-poi {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-lagoon);
  border: 2.5px solid #ffffff;
  box-shadow: 0 4px 12px rgba(58, 35, 20, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo);
}
.sv-map-poi:hover {
  transform: scale(1.12);
}
.sv-map-popup .maplibregl-popup-content {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
  border-radius: 12px;
  padding: 0.55rem 0.85rem;
  box-shadow: 0 10px 28px rgba(58, 35, 20, 0.22);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sv-map-popup .maplibregl-popup-content strong {
  font-weight: 800;
}
.sv-map-popup .maplibregl-popup-content span {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}
.sv-map-popup .maplibregl-popup-tip {
  border-top-color: var(--color-surface);
}

/* Legend under the map — every marker reachable by keyboard. */
.sv-map-legend {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.sv-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(58, 35, 20, 0.2);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.3s var(--ease-out-expo);
}
.sv-map-legend-item:hover,
.sv-map-legend-item:focus-visible {
  background: #ffffff;
  border-color: var(--color-lagoon);
  transform: translateY(-1px);
}
.sv-map-legend-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-lagoon);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex: 0 0 auto;
}
.sv-map-legend-icon.sv-map-legend-villa {
  background: var(--color-gold-deep);
}
.sv-map-legend-icon.sv-map-legend-all {
  background: var(--color-ink);
}
.sv-map-legend-note {
  font-weight: 600;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-sv-gold {
  background: var(--sun-kissed-gold);
  border-color: var(--sun-kissed-gold);
  color: var(--color-ink);
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(252, 234, 162, 0);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-sv-gold:hover {
  background: var(--warm-honey-gold);
  border-color: var(--warm-honey-gold);
  color: var(--color-ink);
  box-shadow: 0 0 0 8px rgba(252, 234, 162, 0.45);
  transform: translateY(-1px);
}
/* Ink button — for calls to action that sit on a gold band, where a gold
   button would vanish. */
.btn-sv-ink {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--soft-sunshine-yellow);
  font-weight: 700;
  border-radius: 999px;
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-sv-ink:hover,
.btn-sv-ink:focus-visible {
  background: #24140a;
  border-color: #24140a;
  color: #ffffff;
  box-shadow: 0 0 0 8px rgba(58, 35, 20, 0.18);
  transform: translateY(-1px);
}
.btn-sv-outline {
  background: transparent;
  border: 2px solid var(--color-lagoon);
  color: var(--color-lagoon);
  font-weight: 700;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-sv-outline:hover,
.btn-sv-outline:focus-visible {
  background: var(--color-lagoon);
  border-color: var(--color-lagoon);
  color: #ffffff;
  box-shadow: 0 0 0 8px rgba(168, 230, 233, 0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   Section dividers — soft flowing curves between alternating sections.
   Markup: Views/Shared/_WaveDivider.cshtml (aqua or gold variant).
   ========================================================================== */
.sv-divider {
  --sv-wave-h: 40px;
  line-height: 0;
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--sv-wave-h));
  pointer-events: none;
}
.sv-divider svg {
  display: block;
  width: 100%;
  height: var(--sv-wave-h);
}
@media (min-width: 768px) {
  .sv-divider {
    --sv-wave-h: 64px;
  }
}

/* The calendar + inquiry form sit on one white panel. */
.sv-booking-panel {
  position: relative;
  border-radius: 24px;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 18px 50px rgba(184, 128, 31, 0.14);
}
@media (min-width: 768px) {
  .sv-booking-panel {
    padding: 2.25rem;
  }
}
/* Legacy alias — same panel, older name. */
.sv-booking-glow {
  position: relative;
  border-radius: 24px;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 18px 50px rgba(184, 128, 31, 0.14);
}

/* ==========================================================================
   Sections / cards
   ========================================================================== */
.sv-section {
  /* Floor of 4rem keeps content clear of the overlapping wave divider
     (64px at md+) that may sit on a section's bottom edge. */
  padding: clamp(4rem, 7vw, 5.5rem) 0;
  position: relative;
}
.sv-section-alt {
  background: var(--warm-sand-beige);
}
.sv-section-sun {
  background: var(--soft-sunshine-yellow);
}
.sv-band-aqua {
  background: var(--tropical-aqua-glow);
}
.sv-band-gold {
  background: var(--sun-kissed-gold);
}
.sv-band-mint {
  background: var(--palm-leaf-mint);
}

/* Prose blocks (the villa description, CMS-authored pages): ink, not muted,
   at a readable measure. Also styles whatever Markdown emits. */
.sv-prose p {
  color: var(--color-ink);
  max-width: 62ch;
  line-height: 1.65;
}
.sv-prose h2,
.sv-prose h3,
.sv-prose h4 {
  font-family: var(--font-display);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}
.sv-prose h2 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.1rem); }
.sv-prose h3 { font-size: 1.35rem; }
.sv-prose h4 { font-size: 1.15rem; }
.sv-prose > :first-child { margin-top: 0; }
.sv-prose ul,
.sv-prose ol {
  max-width: 62ch;
  padding-left: 1.4rem;
  line-height: 1.6;
}
.sv-prose li + li { margin-top: 0.3rem; }
.sv-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  margin: 1.25rem 0;
}
.sv-prose blockquote {
  margin: 1.25rem 0;
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  background: var(--soft-sunshine-yellow);
  color: var(--color-ink);
  max-width: 62ch;
}
.sv-prose blockquote p:last-child { margin-bottom: 0; }
.sv-prose table {
  width: 100%;
  max-width: 62ch;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}
.sv-prose th,
.sv-prose td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
  vertical-align: top;
}
.sv-prose code {
  background: var(--warm-sand-beige);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
  color: var(--color-ink);
}
/* Compact variant for the Helpful Information grid cells. */
.sv-prose-sm p,
.sv-prose-sm ul,
.sv-prose-sm ol {
  max-width: none;
  line-height: 1.5;
}
.sv-prose-sm p:last-child,
.sv-prose-sm ul:last-child,
.sv-prose-sm ol:last-child {
  margin-bottom: 0;
}
.sv-prose-sm ul,
.sv-prose-sm ol {
  padding-left: 0;
  list-style: none;
}
.sv-prose-sm li + li { margin-top: 0.25rem; }
.text-muted .sv-prose p,
.sv-prose.text-muted p {
  color: inherit;
}

/* Admin content editors. */
.sv-content-nav .nav-link {
  border: 1px solid var(--color-border-soft);
}
.sv-thumb {
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 8px rgba(58, 35, 20, 0.15);
}
.sv-plan-picker {
  cursor: crosshair;
}
.sv-plan-picker img {
  user-select: none;
}
.sv-upload .form-control {
  max-width: 24rem;
}
.sv-md-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 12rem;
}
.sv-md-preview {
  min-height: 8rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: var(--color-surface);
}
.sv-md-preview:empty::before {
  content: "Start typing and the preview appears here.";
  color: var(--color-ink-muted);
}
.sv-md-help summary {
  cursor: pointer;
  list-style: none;
}
.sv-md-help summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.2s ease;
}
.sv-md-help[open] summary::before {
  transform: rotate(90deg);
}

/* Icon-led lists — rooms (two-line) and quick facts (one-line). The icon
   is the bullet; the text keeps a hanging indent so wrapped lines align. */
.sv-room-list,
.sv-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sv-room-list li,
.sv-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.45;
}
.sv-room-list li > i,
.sv-check-list li > i {
  flex: 0 0 1.35rem;
  text-align: center;
  color: var(--color-gold-deep);
  margin-top: 0.3rem;
}
.sv-room-list li > div {
  display: flex;
  flex-direction: column;
}
.sv-room-list li span {
  color: var(--color-ink-muted);
}
.sv-card {
  border: 1.5px solid var(--sun-kissed-gold);
  border-radius: 20px;
  background: var(--warm-sand-beige);
  height: 100%;
  box-shadow: var(--shadow-glow-gold);
}
.sv-dashboard-card {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sv-dashboard-card:hover {
  border-color: var(--color-gold-deep);
  box-shadow: var(--shadow-glow-gold);
  color: inherit;
  transform: translateY(-2px);
}
.sv-gallery-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--warm-sand-beige), var(--soft-sunshine-yellow));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-deep);
  font-size: 2rem;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-glow-gold), inset 0 0 40px rgba(255, 223, 175, 0.55);
}

.sv-gallery-frame {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-glow-gold);
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}
.sv-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.sv-gallery-frame:hover img,
.sv-gallery-frame:focus-visible img {
  transform: scale(1.05);
}
.sv-gallery-frame:focus-visible {
  outline: 3px solid var(--color-gold-deep);
  outline-offset: 2px;
}

.sv-gallery-modal .modal-content {
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
}
.sv-gallery-carousel .carousel-item img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #14110c;
}
.sv-gallery-carousel .carousel-control-prev,
.sv-gallery-carousel .carousel-control-next {
  width: 4rem;
}
.sv-gallery-counter {
  color: var(--color-ink-muted);
}
.sv-gallery-title {
  color: var(--color-ink);
  font-weight: 600;
}
.sv-gallery-title::before {
  content: "\2022";
  margin-right: 0.5rem;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   Reviews / guestbook — see the pull-quote block further down (.sv-quotes)
   ========================================================================== */
.sv-pending-banner {
  background: var(--soft-sunshine-yellow);
  border: 1px dashed var(--warm-honey-gold);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  color: var(--color-ink);
}

/* ==========================================================================
   Calendar (Book Now)
   ========================================================================== */
.sv-calendar {
  border: 1.5px solid var(--sun-kissed-gold);
  border-radius: 20px;
  padding: 1rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-glow-gold);
}
.sv-calendar table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.sv-calendar caption {
  caption-side: top;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink);
  padding-bottom: 0.5rem;
}
.sv-calendar th {
  color: var(--color-ink-muted);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.25rem;
}
.sv-calendar td {
  padding: 0.35rem;
  font-size: 0.85rem;
}
/* The two months only sit side by side at lg+ (see col-lg-6 in book-now.js)
   — below that each month gets the full width stacked, so keep day buttons
   compact until there's genuinely room, or a tablet-width two-up layout
   would overflow horizontally. */
@media (min-width: 992px) {
  .sv-calendar {
    padding: 1.5rem;
  }
  .sv-calendar caption {
    font-size: 1.05rem;
    padding-bottom: 0.75rem;
  }
  .sv-calendar th {
    font-size: 0.85rem;
    padding: 0.4rem;
  }
  .sv-calendar td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  .sv-calendar .sv-day {
    width: 2.4rem;
    height: 2.4rem;
  }
}
.sv-calendar-nav .btn {
  border-color: var(--color-border-soft);
  color: var(--color-ink);
}
.sv-calendar .sv-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.sv-calendar .sv-day:hover:not(:disabled) {
  border-color: var(--color-border-soft);
}
.sv-calendar .sv-day:disabled {
  color: var(--color-ink-muted);
  opacity: 0.4;
  cursor: not-allowed;
}
/* A day fully covered by an existing reservation (not a check-in/check-out
   edge) — solid, disabled, not selectable at all. */
.sv-calendar .sv-day.sv-full {
  background: #f8d7da;
  color: #842029;
  text-decoration: line-through;
  opacity: 1;
}
.sv-calendar .sv-day.sv-in-range {
  background: var(--warm-sand-beige);
  border-radius: 0;
}
.sv-calendar .sv-day.sv-selected-start,
.sv-calendar .sv-day.sv-selected-end {
  border-color: var(--color-gold-deep);
  font-weight: 700;
}

/* Half-day triangles: AM = upper-left, PM = lower-right, split by a diagonal
   running bottom-left to top-right. The two <span> halves are only painted
   (and the divider line only drawn) on a day where a reservation starts or
   ends — a plain open day or a fully-booked day renders as one flat square. */
.sv-calendar .sv-day .sv-day-half {
  position: absolute;
  inset: 0;
}
.sv-calendar .sv-day .sv-day-half.sv-half-am {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.sv-calendar .sv-day .sv-day-half.sv-half-pm {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.sv-calendar .sv-day .sv-day-half.sv-occupied {
  background: #f8d7da;
}
.sv-calendar .sv-day .sv-day-half.sv-selected {
  background: var(--sun-kissed-gold);
}
.sv-calendar .sv-day .sv-day-half.sv-in-range {
  background: var(--warm-sand-beige);
}
.sv-calendar .sv-day.sv-half-day::after {
  content: '';
  position: absolute;
  inset: 0;
  /* A gradient's color bands run *perpendicular* to its stated direction, so
     "to bottom right" is what draws a visible line along the bottom-left-to
     -top-right diagonal — matching the AM/PM clip-path triangles below,
     which are already split along that same diagonal. */
  background: linear-gradient(to bottom right,
    transparent calc(50% - 0.5px), var(--color-ink) calc(50% - 0.5px),
    var(--color-ink) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  opacity: 0.35;
  pointer-events: none;
}
.sv-calendar .sv-day .sv-day-number {
  position: relative;
  z-index: 1;
}

.sv-calendar-legend .sv-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.sv-calendar-legend .sv-swatch.sv-full {
  background: #f8d7da;
  border: 1px solid #842029;
}
.sv-calendar-legend .sv-swatch.sv-selected {
  background: var(--sun-kissed-gold);
  border: 1px solid var(--color-gold-deep);
}
.sv-calendar-legend .sv-swatch.sv-half {
  background: linear-gradient(to bottom right, #f8d7da 50%, #fff 50%);
  border: 1px solid var(--color-border-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.sv-footer {
  background: var(--color-ink);
  color: var(--soft-sunshine-yellow);
  margin-top: 0;
  padding: 3.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.sv-footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .sv-footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.sv-footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--sun-kissed-gold);
  line-height: 1.1;
}
.sv-footer-brand i {
  font-size: 1.1rem;
  vertical-align: 0.15em;
}
.sv-footer-tag {
  color: rgba(252, 234, 162, 0.85);
  max-width: 34ch;
}
.sv-footer-heading {
  font-weight: 800;
  color: var(--sun-kissed-gold);
  margin-bottom: 0.75rem;
}
.sv-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sv-footer-legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(252, 234, 162, 0.22);
  color: rgba(252, 234, 162, 0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.sv-footer-signout {
  color: var(--soft-sunshine-yellow);
  font-weight: 700;
  text-decoration: none;
}
.sv-footer-signout:hover {
  color: #ffffff;
  text-decoration: underline;
}
.sv-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8% 30%, var(--golden-stardust), transparent 70%),
    radial-gradient(2px 2px at 92% 20%, var(--dreamy-pastel-glow), transparent 70%),
    radial-gradient(1.5px 1.5px at 45% 70%, var(--golden-stardust), transparent 70%),
    radial-gradient(1.5px 1.5px at 70% 85%, var(--golden-stardust), transparent 70%),
    radial-gradient(2px 2px at 25% 85%, var(--dreamy-pastel-glow), transparent 70%);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .sv-footer::before {
    animation: sv-footer-shimmer 6s ease-in-out infinite alternate;
  }
}
@keyframes sv-footer-shimmer {
  from { opacity: 0.35; }
  to   { opacity: 0.75; }
}
.sv-footer .container {
  position: relative;
}
.sv-footer a {
  color: var(--soft-sunshine-yellow);
  text-decoration: none;
  font-weight: 700;
}
.sv-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ==========================================================================
   Admin
   ========================================================================== */
.sv-admin-nav .nav-link {
  color: var(--color-ink);
  border-radius: 999px;
}
.sv-admin-nav .nav-link.active {
  color: var(--color-ink);
  background-color: var(--sun-kissed-gold);
  font-weight: 700;
}
.badge.sv-badge-pending {
  background: var(--sun-kissed-gold);
  color: var(--color-ink);
}
.badge.sv-badge-approved {
  background: #2ba84a;
}
.badge.sv-badge-featured {
  background: var(--tropical-aqua-glow);
  color: var(--color-ink);
}

/* ==========================================================================
   Home — evidence typography ("Wish you were here?")
   Three figures set in the display face carry the argument; no icon cards.
   ========================================================================== */
.sv-evidence-grid {
  display: grid;
  gap: 2.25rem 3rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "a" "b" "copy";
}
@media (min-width: 768px) {
  .sv-evidence-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "lead a"
      "copy b";
    align-items: start;
    gap: 2.5rem 4rem;
  }
}
.sv-evidence-lead { grid-area: lead; }
.sv-evidence-a    { grid-area: a; }
.sv-evidence-b    { grid-area: b; }
.sv-evidence-copy { grid-area: copy; }

.sv-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 0.9;
  color: var(--color-gold-deep);
  letter-spacing: -0.03em;
}
.sv-figure small {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.26em;
  margin-left: 0.15em;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
}
.sv-evidence-lead .sv-figure {
  font-size: clamp(5.5rem, 13vw, 10rem);
  margin-left: -0.04em; /* optical: pull the fat "2" onto the text edge */
}
.sv-evidence-a .sv-figure,
.sv-evidence-b .sv-figure {
  font-size: clamp(3rem, 5vw, 4.25rem);
}
.sv-evidence-a,
.sv-evidence-b {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-soft);
}
.sv-evidence-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-ink);
  max-width: 24ch;
  text-wrap: balance;
}
.sv-evidence-detail {
  margin: 0.5rem 0 0;
  color: var(--color-ink-muted);
  max-width: 36ch;
}
.sv-evidence-copy {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}
/* 404 / 500 pages: the status code set like an evidence figure. */
.sv-error-code {
  font-size: clamp(5.5rem, 16vw, 11rem);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Guest portal — Fun page: hidden Mickey quest + answers
   ========================================================================== */
.sv-mickey-mark {
  width: 4.5rem;
  height: 4.5rem;
  fill: var(--sun-kissed-gold);
  margin-bottom: 1rem;
  display: block;
}
/* A genuine numbered sequence — the clue number is the marker. */
.sv-clue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sv-clue-list li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.sv-clue-number {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sun-kissed-gold);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-clue-room {
  display: block;
  font-weight: 800;
  color: var(--color-gold-deep);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}
.sv-clue-list p {
  max-width: 52ch;
}
.sv-clue-answer {
  font-weight: 700;
  color: var(--color-lagoon);
}
/* Clues are collapsed by default: a native <details> whose <summary> is
   styled as the site's gold button, so it works with no JavaScript and
   reports its open/closed state to assistive tech. */
.sv-clues summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.sv-clues summary::-webkit-details-marker {
  display: none;
}
.sv-clues summary::marker {
  content: "";
}
.sv-clues .sv-clues-hide,
.sv-clues[open] .sv-clues-show {
  display: none;
}
.sv-clues[open] .sv-clues-hide {
  display: inline;
}
.sv-clues-body {
  margin-top: 1.75rem;
}
@media (prefers-reduced-motion: no-preference) {
  .sv-clues[open] .sv-clues-body {
    animation: sv-clues-reveal 0.5s var(--ease-out-expo);
  }
}
@keyframes sv-clues-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sv-rule-list {
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 56ch;
}
.sv-rule-list::marker,
.sv-rule-list li::marker {
  font-weight: 800;
  color: var(--color-gold-deep);
}
.sv-photo-frame {
  cursor: default;
}
.sv-photo-frame:hover {
  transform: none;
  box-shadow: var(--shadow-lift);
}
.sv-photo-frame:hover img {
  transform: none;
}

/* Fun hub — two big photo tiles, each a single link. */
.sv-fun-tiles {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .sv-fun-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.sv-fun-tile {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lift);
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
}
.sv-fun-tile:hover,
.sv-fun-tile:focus-visible {
  color: var(--color-ink);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift-hover);
}
.sv-fun-tile:focus-visible {
  outline: 3px solid var(--color-gold-deep);
  outline-offset: 3px;
}
.sv-fun-tile-photo {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--warm-sand-beige);
}
.sv-fun-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out-expo);
}
.sv-fun-tile:hover .sv-fun-tile-photo img {
  transform: scale(1.045);
}
.sv-fun-tile-photo .sv-gallery-placeholder {
  height: 100%;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.sv-fun-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.75rem 1.9rem;
}
.sv-fun-tile-kicker {
  font-weight: 800;
  color: var(--color-gold-deep);
}
.sv-fun-tile-title {
  display: block;
}
.sv-fun-tile-text {
  color: var(--color-ink-muted);
  line-height: 1.55;
}
.sv-fun-tile .sv-link-quiet {
  align-self: flex-start;
  margin-top: 0.4rem;
}

/* Local wildlife — photo + text rows, photo side alternating. */
.sv-species-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.sv-species {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 768px) {
  .sv-species {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
  }
  .sv-species:nth-child(even) .sv-species-photo {
    order: 2;
  }
}
.sv-species-photo {
  margin: 0;
}
.sv-species-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  background: var(--warm-sand-beige);
}
.sv-species-credit {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  margin-top: 0.4rem;
}
.sv-species-body p {
  max-width: 58ch;
}
.sv-species-spot {
  font-weight: 700;
  color: var(--color-lagoon);
}

/* Solution page — floor plan with numbered markers, then photo answers. */
.sv-plan {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lift);
}
.sv-plan img {
  width: 100%;
  height: auto;
  display: block;
}
.sv-plan-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-gold-deep);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(58, 35, 20, 0.35);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .sv-plan-marker {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.15rem;
  }
}
.sv-answer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.sv-answer {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num body"
    "photo photo";
  align-items: start;
}
@media (min-width: 768px) {
  .sv-answer {
    grid-template-columns: auto minmax(0, 4fr) minmax(0, 7fr);
    grid-template-areas: "num photo body";
    align-items: center;
  }
}
.sv-answer-number { grid-area: num; }
.sv-answer-photo  { grid-area: photo; }
.sv-answer-body   { grid-area: body; }
.sv-answer-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}

/* Confirmation dialog (Bootstrap modal, restyled). */
.sv-confirm {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(58, 35, 20, 0.35);
}

/* ==========================================================================
   Home — editorial photo strip ("Peek inside")
   One big frame, two stacked beside it; captions sit on the photo.
   ========================================================================== */
.sv-strip {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-strip-item {
  margin: 0;
  position: relative;
}
.sv-strip-item:first-child {
  grid-column: 1 / -1;
}
.sv-strip-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--warm-sand-beige);
  box-shadow: var(--shadow-lift);
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
  /* the same frame works as a <button> (opens the gallery modal) */
  padding: 0;
  border: 0;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sv-strip-item:first-child .sv-strip-link {
  aspect-ratio: 3 / 2;
}
.sv-strip-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out-expo);
}
.sv-strip-link:hover,
.sv-strip-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift-hover);
}
.sv-strip-link:hover img,
.sv-strip-link:focus-visible img {
  transform: scale(1.045);
}
.sv-strip-link:focus-visible {
  outline: 3px solid var(--color-gold-deep);
  outline-offset: 3px;
}
.sv-strip-caption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  pointer-events: none;
  background: rgba(251, 251, 250, 0.92);
  color: var(--color-ink);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(58, 35, 20, 0.12);
}
@media (min-width: 768px) {
  .sv-strip {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(190px, 23vw));
    gap: 1.1rem;
  }
  .sv-strip-item:first-child {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }
  .sv-strip-item:nth-child(n + 2) {
    grid-column: 8 / span 5;
  }
  .sv-strip-link,
  .sv-strip-item:first-child .sv-strip-link {
    aspect-ratio: auto;
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .sv-strip {
    grid-template-rows: repeat(2, 290px);
  }
}
/* Six-photo gallery preview (Villa / Resort): the three-tile strip plus a
   row of three beneath it. */
.sv-strip-gallery .sv-strip-item:last-child:nth-child(even) {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .sv-strip-gallery {
    grid-template-rows: repeat(2, minmax(190px, 23vw)) minmax(150px, 15vw);
  }
  .sv-strip-gallery .sv-strip-item:nth-child(n + 4) {
    grid-column: auto / span 4;
    grid-row: 3;
  }
  .sv-strip-gallery .sv-strip-item:last-child:nth-child(even) {
    grid-column: auto / span 4;
  }
}
@media (min-width: 1200px) {
  .sv-strip-gallery {
    grid-template-rows: repeat(2, 290px) 210px;
  }
}

/* ==========================================================================
   Home — "Twenty minutes to the magic" (aqua band)
   ========================================================================== */
.sv-drive-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1rem;
  max-width: 34rem;
}
.sv-drive-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(58, 35, 20, 0.18);
}
.sv-drive-list li:last-child {
  border-bottom: 0;
}
.sv-drive-name {
  font-weight: 700;
}
.sv-drive-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink);
  white-space: nowrap;
}

/* A tilted white-bordered print with a note in the margin. */
.sv-postcard {
  position: relative;
  background: #ffffff;
  padding: 0.65rem 0.65rem 2.6rem;
  border-radius: 6px;
  box-shadow: 0 22px 50px rgba(58, 35, 20, 0.2);
  transform: rotate(-2deg);
  max-width: 34rem;
  margin: 1rem auto 0;
}
@media (min-width: 768px) {
  .sv-postcard {
    margin: 0 0 0 auto;
  }
}
.sv-postcard img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
}
.sv-postcard-note {
  position: absolute;
  left: 1rem;
  bottom: 0.55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-lagoon);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Home — pull quotes ("Guests, in their own words")
   ========================================================================== */
.sv-quotes {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .sv-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
  }
  .sv-quotes > :nth-child(even) {
    margin-top: 3.5rem;
  }
}
.sv-quote-date {
  font-weight: 600;
  color: var(--color-ink-muted);
}
.sv-pull-quote {
  position: relative;
  margin: 0;
  padding-top: 2.75rem;
}
.sv-pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: -0.12em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--sun-kissed-gold);
}
.sv-pull-quote p {
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-ink);
  margin-bottom: 0.9rem;
  max-width: 32ch;
}
.sv-pull-quote footer {
  font-weight: 800;
  color: var(--color-gold-deep);
}

/* ==========================================================================
   Motion gating — home.js adds `.sv-motion` to <html> only when Motion.dev
   loaded, the visitor allows motion, and high-contrast is off. Until then
   (and forever, if it never happens) every element below is simply visible.
   ========================================================================== */
.sv-motion .sv-anim,
.sv-motion .sv-hero-media,
.sv-motion .sv-hero-stars use {
  opacity: 0;
}

/* Ambient motion — CSS-only, all behind the reduced-motion gate. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero photo: after the JS entrance settles, a 26-second Ken Burns drift. */
  .sv-hero-media.sv-drift {
    animation: sv-ken-burns 26s ease-in-out infinite alternate;
  }
  /* Stars keep twinkling around the opacity the bloom left them at. */
  .sv-hero-stars use.sv-twinkle {
    animation: sv-twinkle var(--twinkle-dur, 3s) ease-in-out infinite alternate;
  }
  /* The hidden Mickey glows in and out — still hidden, just breathing. */
  .sv-hero-mickey {
    animation: sv-mickey-glow 7s ease-in-out infinite alternate;
  }
  /* A soft ring pulses out from the hero's primary button. */
  .sv-hero .btn-sv-gold {
    animation: sv-cta-pulse 3.2s ease-in-out 2.4s infinite;
  }
  .sv-hero .btn-sv-gold:hover,
  .sv-hero .btn-sv-gold:focus-visible {
    animation: none;
  }
  /* The tilted postcard straightens up when you reach for it. */
  .sv-postcard {
    transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo);
  }
  .sv-postcard:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 30px 60px rgba(58, 35, 20, 0.24);
  }
}
@keyframes sv-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
@keyframes sv-twinkle {
  from { opacity: calc(var(--star-o, 0.7) * 0.5); }
  to   { opacity: var(--star-o, 0.7); }
}
@keyframes sv-mickey-glow {
  from { opacity: 0.12; }
  to   { opacity: 0.24; }
}
@keyframes sv-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 234, 162, 0); }
  50%      { box-shadow: 0 0 0 12px rgba(252, 234, 162, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-motion .sv-anim,
  .sv-motion .sv-hero-media,
  .sv-motion .sv-hero-stars use {
    opacity: 1;
  }
  .sv-strip-link,
  .sv-strip-link img,
  .sv-link-quiet::after {
    transition: none;
  }
}

/* ==========================================================================
   High-contrast mode — opt-in via the navbar toggle (site.js), persisted
   through the sv_contrast cookie and applied server-side in _Layout.cshtml
   so there's no flash of low-contrast content on load. Re-tuned for the
   StarDust Retreat palette: ink darkens further, borders widen, and
   decorative sparkle motion is suppressed entirely — a static texture is
   fine, drifting motion fights the "more clarity" intent of this mode.
   ========================================================================== */
body.high-contrast {
  --color-ink-muted: #2c1a0e;
  --color-gold-deep: #6b4a10;
  --color-border-soft: #6b4a2e;
}
body.high-contrast a {
  text-decoration: underline;
}
body.high-contrast .sv-navbar .nav-link,
body.high-contrast .sv-footer a,
body.high-contrast .navbar-brand {
  text-decoration: underline;
}
body.high-contrast .sv-cta-nav,
body.high-contrast .sv-navbar .nav-link.sv-cta-nav {
  text-decoration: none; /* it already reads as a button, not a text link */
}
body.high-contrast *:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(232, 185, 92, 0.9);
}
body.high-contrast .sv-card,
body.high-contrast .sv-calendar,
body.high-contrast .sv-gallery-placeholder,
body.high-contrast .sv-gallery-frame,
body.high-contrast .sv-hero-placeholder,
body.high-contrast table.table {
  border-width: 2px;
}
body.high-contrast .sv-calendar .sv-day.sv-full {
  background: #f5b5bc;
  color: #5c151d;
}
body.high-contrast .sv-calendar .sv-day .sv-day-half.sv-occupied {
  background: #f5b5bc;
}
body.high-contrast .sv-calendar .sv-day.sv-half-day::after {
  opacity: 0.7;
}
body.high-contrast .sv-sparkle,
body.high-contrast .sv-heading-sparkle::before,
body.high-contrast .sv-heading-sparkle::after,
body.high-contrast .sv-sparkle-hover::after,
body.high-contrast .sv-footer::before {
  animation: none !important;
  opacity: 0 !important;
}
body.high-contrast {
  --color-lagoon: #06424a;
  --color-lagoon-deep: #032e34;
}
/* Copy sits on solid gold in high-contrast: the photo is confined to the top. */
body.high-contrast .sv-hero-wash {
  background: linear-gradient(to top,
    var(--sun-kissed-gold) 0%,
    var(--sun-kissed-gold) 58%,
    rgba(247, 210, 122, 0.55) 80%,
    rgba(247, 210, 122, 0.2) 100%);
}
body.high-contrast .sv-hero-decor {
  opacity: 0;
}
body.high-contrast .sv-hero h1 {
  text-shadow: none;
}
body.high-contrast .sv-strip-link,
body.high-contrast .sv-postcard,
body.high-contrast .sv-booking-panel {
  border: 2px solid var(--color-ink);
}
body.high-contrast .sv-strip-caption {
  background: #ffffff;
  border: 1px solid var(--color-ink);
}
body.high-contrast .sv-link-quiet {
  border-bottom-color: var(--color-ink);
}
body.high-contrast .sv-drive-list li {
  border-bottom-color: var(--color-ink);
}
body.high-contrast .sv-map-legend-item {
  border: 2px solid var(--color-ink);
  background: #ffffff;
}
body.high-contrast .sv-map-poi {
  border-color: var(--color-ink);
}