/* ==========================================================================
   DIA BONITO · style.css
   Ink & Lagoon design system.
   Deep green-black ground, bone type, one sea-glass accent.
   Playfair Display (display serif) + Archivo (labels, UI, small text).
   Mobile-first. Shared across every page.
   ========================================================================== */

:root {
  /* Ground */
  --ink: #0a1310;
  --ink-2: #0e1915;
  --ink-deep: #070f0c;

  /* Type */
  --bone: #ede7da;
  --bone-2: rgba(237, 231, 218, 0.76);
  --bone-3: rgba(237, 231, 218, 0.48);

  /* Accent */
  --lagoon: #8fb8a8;
  --lagoon-dim: rgba(143, 184, 168, 0.4);

  /* Hairlines */
  --line: rgba(237, 231, 218, 0.16);
  --line-soft: rgba(237, 231, 218, 0.08);

  /* Faces */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Legacy aliases: older inline references resolve into the new palette */
  --cream: var(--ink);
  --cream-warm: var(--ink-2);
  --charcoal: var(--bone);
  --charcoal-d: var(--bone);
  --soft: var(--bone-2);
  --light: var(--bone-3);
  --faint: var(--bone-3);
  --border: var(--line);
  --green: var(--lagoon);

  /* Layout */
  --maxw: 1240px;
  --narroww: 760px;
  --gutter: 24px;
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 760px) {
  :root {
    --gutter: 40px;
    --header-h: 92px;
  }
}

/* The V3 desktop header is a centered stack (mark, name, tag, nav row)
   about 201px tall, not a 92px bar. Offsets that clear the fixed header
   (panel content, hero ledes, 404) must use its real height. */
@media (min-width: 1120px) {
  :root {
    --header-h: 204px;
  }
}

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  background: var(--ink);
  color: var(--bone-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--bone);
  text-decoration: none;
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

::selection { background: var(--lagoon); color: var(--ink); }

:focus-visible { outline: 1px solid var(--lagoon); outline-offset: 3px; }

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

.container-narrow { max-width: var(--narroww); }

/* ==========================================================================
   SCROLL REVEAL
   Per-page JS adds .reveal when a .fade-in block enters the viewport.
   The hidden state only applies once JS marks the document (html.js),
   so nothing disappears without JavaScript.
   ========================================================================== */

html.js .fade-in {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

html.js .fade-in.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .fade-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HEADER
   Fixed and transparent over heroes. body.scrolled (set by JS) draws an
   ink veil behind it once the page moves.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 16, 13, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
  pointer-events: none;
}

body.scrolled .header-scrim {
  background: rgba(9, 16, 13, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.header-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Compact toggle on small phones */
@media (max-width: 480px) {
  .menu-toggle-icon { width: 20px; }
}

/* --- Menu toggle -------------------------------------------------------- */

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  color: var(--bone);
}

.menu-toggle-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

@media (max-width: 400px) {
  .menu-toggle-label { display: none; }
}

.menu-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
}

.menu-toggle-icon span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: width 0.35s var(--ease-out);
}

.menu-toggle-icon span:last-child { width: 62%; align-self: flex-end; }

.menu-toggle:hover { color: var(--lagoon); }
.menu-toggle:hover .menu-toggle-icon span { width: 100%; }

/* ==========================================================================
   HEADER COMPONENTS
   Brand block with mark + tagline, primary nav with hover/tap dropdowns,
   lagoon INQUIRE button. Laid out by the V3 rules further down.
   ========================================================================== */

/* --- Brand block --------------------------------------------------------- */

.header-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  /* keeps both brand lines readable over bright media before the veil engages */
  text-shadow: 0 1px 10px rgba(10, 19, 16, 0.5);
}

/* Mobile/tablet rows show the compact sun variant (square-ish); the desktop
   stack swaps to the full horizon mark via the <picture> source. Sized by
   height, width follows each file's own aspect. Drop-shadow gives the mark
   the same legibility over bright hero media that the wordmark gets from
   text-shadow, before the veil engages. */
.brand-mark {
  flex: 0 0 auto;
  height: 30px;
  width: auto;
  color: var(--bone);
}

.brand-mark picture { display: block; height: 100%; }

.brand-mark img,
.brand-mark svg {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 1px 8px rgba(10, 19, 16, 0.55));
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--bone);
  white-space: nowrap;
}

.brand-tag {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin-top: 4px;
  white-space: nowrap;
}

/* --- Primary nav ---------------------------------------------------------- */

.header-menu { display: none; }

@media (min-width: 1120px) {
  .header-menu { display: block; margin-left: auto; }
}

.header-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-2);
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.nav-link:hover { color: var(--bone); }

.nav-caret {
  width: 9px;
  height: 6px;
  flex: 0 0 auto;
  transition: transform 0.35s var(--ease-out);
}

.nav-drop:hover .nav-caret,
.nav-drop.open .nav-caret,
.nav-drop:focus-within .nav-caret { transform: rotate(180deg); }

/* --- Dropdown panels -------------------------------------------------------- */

.nav-drop { position: relative; }

.drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -130px;
  padding-top: 14px; /* hover bridge between trigger and panel */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              visibility 0s linear 0.35s;
  z-index: 110;
}

/* Right-most dropdown hugs the right edge instead of centering */
.nav-drop:last-child .drop-panel { left: auto; right: -16px; margin-left: 0; }

.nav-drop:hover .drop-panel,
.nav-drop.open .drop-panel,
.nav-drop:focus-within .drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.drop-list {
  list-style: none;
  min-width: 260px;
  background: rgba(9, 16, 13, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  padding: 14px 0;
}

.drop-list a {
  display: block;
  padding: 11px 28px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}

.drop-list a:hover { color: var(--lagoon); }

.drop-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 10px 28px;
}

/* --- INQUIRE button ---------------------------------------------------------- */

.header-book {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lagoon);
  border: 1px solid var(--lagoon);
  padding: 11px 16px;
  white-space: nowrap;
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out);
}

@media (min-width: 1120px) {
  .header-book { font-size: 11px; padding: 14px 30px; }
}

.header-book:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

/* ==========================================================================
   HEADER V3 (centered stack, selvaterra-style)
   Mark centered at top, name + ISLAND RESORT beneath, primary nav on its
   own centered row below the brand. INQUIRE stays far right; the hamburger
   takes over below the desktop breakpoint.
   ========================================================================== */

.header-inner-v3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-h);
}

/* Mobile row: hamburger left, brand centered IN FLOW between its siblings
   (auto margins). Flex layout means the pieces can never overlap: extra
   text width on real devices shifts the brand, it does not collide. */
.header-inner-v3 .menu-toggle { flex: 0 0 auto; }

.header-inner-v3 .header-brand {
  margin-left: auto;
  margin-right: auto;
}

.header-inner-v3 .header-book { flex: 0 0 auto; }

.header-inner-v3 .header-menu { display: none; }

/* The compact sun variant stays visible on narrow phones; flex keeps the
   brand in flow, so it shifts rather than collides with its neighbors. */

/* Tightest phones: shave type and button padding, never clip */
@media (max-width: 360px) {
  .header-inner-v3 { gap: 8px; }
  .header-inner-v3 .brand-name { font-size: 12px; }
  .header-inner-v3 .brand-tag { font-size: 7.5px; letter-spacing: 0.34em; }
  .header-inner-v3 .header-book { padding: 9px 10px; letter-spacing: 0.18em; }
}

/* ISLAND RESORT must be legible: larger, heavier, brighter than V2 */
.header-inner-v3 .brand-tag {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.38em;
  color: var(--lagoon);
  margin-top: 5px;
}

@media (min-width: 1120px) {
  .header-inner-v3 {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    height: auto;
    min-height: var(--header-h);
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .header-inner-v3 .menu-toggle { display: none; }

  .header-inner-v3 .header-brand {
    position: static;
    transform: none;
    order: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  /* Full horizon mark: 48px is the brand kit's floor for the three-dash
     reflection reading clearly (~127px wide at its 2.65:1 aspect) */
  .header-inner-v3 .brand-mark { height: 48px; width: auto; }

  .header-inner-v3 .brand-text { align-items: center; }

  .header-inner-v3 .brand-name { font-size: 23px; letter-spacing: 0.06em; }

  .header-inner-v3 .brand-tag {
    font-size: 11px;
    letter-spacing: 0.5em;
    /* nudge right by the trailing tracking so the word reads centered */
    margin-right: -0.5em;
    margin-top: 7px;
  }

  .header-inner-v3 .header-menu {
    display: block;
    order: 1;
    margin: 16px 0 0;
  }

  .header-inner-v3 .header-book {
    order: 2;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

/* --- Mobile overlay: expandable sub-menus ------------------------------------ */

.menu-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 6vh, 44px);
  line-height: 1.5;
  color: var(--bone);
  transition: color 0.3s var(--ease-out);
}

.menu-sub-toggle:hover { color: var(--lagoon); }

.menu-sub-toggle .nav-caret {
  width: 12px;
  height: 8px;
  color: var(--lagoon);
}

.menu-sub.open .menu-sub-toggle .nav-caret { transform: rotate(180deg); }

.menu-sub-list {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}

.menu-sub.open .menu-sub-list {
  max-height: 480px;
  opacity: 1;
}

.menu-sub-list li { padding: 7px 0; }
.menu-sub-list li:first-child { padding-top: 14px; }
.menu-sub-list li:last-child { padding-bottom: 20px; }

.menu-sub-list a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-2);
}

.menu-sub-list a:hover { color: var(--lagoon); }

.menu-sub-list .menu-sub-divider {
  width: 28px;
  height: 1px;
  background: var(--line);
  margin: 10px auto;
  padding: 0;
}

/* ==========================================================================
   FULL-SCREEN MENU
   ========================================================================== */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 15, 12, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s var(--ease-out);
}

/* Expanded sub-menus can make the list taller than the viewport: allow the
   overlay to scroll while staying visually centered when short. */
.site-menu {
  align-items: flex-start;
  overflow-y: auto;
}

.site-menu .menu-nav { margin: auto; }

body.menu-open { overflow: hidden; }

.menu-close {
  position: absolute;
  top: 12px;
  right: calc(var(--gutter) - 12px);
  width: 52px;
  height: 52px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bone-3);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}

.menu-close:hover { color: var(--bone); transform: rotate(90deg); }

.menu-nav { width: 100%; padding: 40px var(--gutter); }

.menu-list { list-style: none; text-align: center; }

.menu-list li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.site-menu.is-open .menu-list li { opacity: 1; transform: none; }

.site-menu.is-open .menu-list li:nth-child(1) { transition-delay: 0.08s; }
.site-menu.is-open .menu-list li:nth-child(2) { transition-delay: 0.13s; }
.site-menu.is-open .menu-list li:nth-child(3) { transition-delay: 0.18s; }
.site-menu.is-open .menu-list li:nth-child(4) { transition-delay: 0.23s; }
.site-menu.is-open .menu-list li:nth-child(5) { transition-delay: 0.28s; }
.site-menu.is-open .menu-list li:nth-child(6) { transition-delay: 0.33s; }
.site-menu.is-open .menu-list li:nth-child(7) { transition-delay: 0.38s; }
.site-menu.is-open .menu-list li:nth-child(8) { transition-delay: 0.43s; }
.site-menu.is-open .menu-list li:nth-child(9) { transition-delay: 0.48s; }

.menu-link {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(28px, 6vh, 44px);
  line-height: 1.5;
  color: var(--bone);
  transition: color 0.3s var(--ease-out);
}

.menu-link:hover { color: var(--lagoon); }

.menu-list-divider {
  width: 44px;
  height: 1px;
  background: var(--line);
  margin: 24px auto;
}

.menu-link-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lagoon);
  line-height: 1;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lagoon-dim);
}

.menu-link-cta:hover {
  font-style: normal;
  color: var(--bone);
  border-bottom-color: var(--bone);
}

/* ==========================================================================
   SHARED EDITORIAL PIECES
   ========================================================================== */

/* --- Role captions (the only surviving small-caps label; section eyebrows
       were removed site-wide for legibility over media) ------------------- */

.team-member-role {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin-bottom: 26px;
}

/* --- Hairline rules ------------------------------------------------------ */

.opening-rule, .parallax-rule, .differentiators-intro-rule, .closing-rule,
.stay-hero-rule, .house-rule, .includes-rule, .running-rule, .exclusivity-rule,
.isl-hero-rule, .isl-section-rule, .isl-note-rule,
.exp-hero-rule, .exp-category-rule, .exp-feature-rule, .exp-closer-rule,
.din-hero-rule, .din-section-rule, .din-meal-rule, .din-note-rule,
.gh-hero-rule, .gh-step-rule, .gh-note-rule,
.occ-hero-rule,
.family-hero-rule, .letter-rule, .team-intro-rule, .team-member-rule,
.booking-rule {
  width: 52px;
  height: 1px;
  background: var(--lagoon-dim);
  margin: 30px 0;
}

/* Rules inside centered blocks sit centered */
.opening-rule, .parallax-rule, .differentiators-intro-rule, .closing-rule,
.stay-hero-rule, .exclusivity-rule, .running-rule,
.isl-hero-rule, .isl-section-rule,
.exp-hero-rule, .exp-category-rule, .exp-closer-rule,
.din-hero-rule, .din-section-rule,
.gh-hero-rule, .gh-step-rule,
.occ-hero-rule,
.letter-rule, .team-intro-rule,
.booking-rule {
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons ------------------------------------------------------------- */

.hero-cta, .closing-cta,
.stay-closing-cta, .isl-cta-button, .exp-cta-button, .din-cta-button,
.gh-closing-cta, .family-closing-cta,
.btn-submit, .booking-cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(237, 231, 218, 0.45);
  padding: 19px 46px;
  cursor: pointer;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}

.hero-cta:hover, .closing-cta:hover,
.stay-closing-cta:hover, .isl-cta-button:hover, .exp-cta-button:hover,
.din-cta-button:hover, .gh-closing-cta:hover, .family-closing-cta:hover,
.btn-submit:hover, .booking-cta:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.hero-cta.primary, .closing-cta.primary {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.hero-cta.primary:hover, .closing-cta.primary:hover {
  background: transparent;
  color: var(--bone);
}

/* ==========================================================================
   FULL-SCREEN MEDIA PANELS
   The core of the media-forward layout. A .panel is taller than the
   viewport; its .panel-sticky child pins for the extra distance, so the
   background "holds" while content transitions, then releases to the next
   panel. Backgrounds are named media slots: swap the <img> inside
   .panel-media for a <video data-autoplay muted loop playsinline> and
   nothing else changes (autoplay + offscreen pausing come from main.js).
   ========================================================================== */

/* No scroll-snap here by design: snapping fought trackpad momentum and
   made the page feel sticky. The cinematic hold comes from .panel-sticky
   alone; scrolling stays fully free. */

.panel {
  position: relative;
  min-height: 135svh;
}

.panel-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Centered variant for statement panels (category titles, pavilion) */
.panel-center .panel-sticky {
  align-items: center;
  justify-content: center;
}

.panel-media {
  position: absolute;
  inset: 0;
  background: var(--ink-2);
}

.panel-media img,
.panel-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow cinematic drift on still images (videos supply their own motion) */
@keyframes panel-drift {
  0%   { transform: scale(1.03); }
  50%  { transform: scale(1.075); }
  100% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: no-preference) {
  .panel-media img { animation: panel-drift 60s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
}

/* Text zones hold >=0.65 ink so bone body text stays at WCAG AA (4.5:1)
   even over the brightest photo regions. The gradient turns early because
   tall panel content (title + lede + notes) reaches mid-screen on phones. */
.panel-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 19, 16, 0.5) 0%,
    rgba(10, 19, 16, 0.32) 22%,
    rgba(10, 19, 16, 0.68) 40%,
    rgba(10, 19, 16, 0.86) 56%,
    rgba(10, 19, 16, 0.97) 100%
  );
}

/* A light wash only: seats the fixed header at the top and eases the seam
   into the footer at the bottom. Legibility for any real body copy comes
   from .panel-backing (below), a tight ink card behind the words, not from
   darkening the whole frame. This replaces the old permanent dark pool,
   which was tuned to keep paragraph-length copy legible dead center and
   ended up dimming photos and video that had nothing to do with it. */
.panel-center .panel-scrim {
  background: linear-gradient(
    to bottom,
    rgba(10, 19, 16, 0.3) 0%,
    rgba(10, 19, 16, 0.08) 30%,
    rgba(10, 19, 16, 0) 55%,
    rgba(10, 19, 16, 0.35) 100%
  );
}

.panel-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--header-h) + 48px) var(--gutter) clamp(72px, 12vh, 130px);
}

.panel-center .panel-content {
  text-align: center;
  padding-bottom: clamp(72px, 14vh, 150px);
}

.panel-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 8.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--bone);
  /* Large text only needs 3:1 contrast, so a shadow carries it without
     darkening the photo behind it. */
  text-shadow:
    0 1px 3px rgba(10, 19, 16, 0.9),
    0 2px 20px rgba(10, 19, 16, 0.7),
    0 4px 40px rgba(10, 19, 16, 0.5);
}

.panel-title a { color: inherit; display: inline-block; }

/* --------------------------------------------------------------------------
   PANEL BACKING
   A tight, solid card behind body copy that sits over a photo or video,
   sized to the text itself rather than the whole frame. Replaces the old
   practice of darkening the entire panel to keep a paragraph legible.
   Wrap everything after the heading (the rule, the body copy, any closing
   invite) in <div class="panel-backing">...</div>; the heading itself
   stays outside it, carried by its own text-shadow instead.
   -------------------------------------------------------------------------- */
.panel-backing {
  max-width: calc(660px + 2 * clamp(28px, 4vw, 52px));
  margin: clamp(22px, 3vh, 30px) auto 0;
  padding: clamp(34px, 5vh, 48px) clamp(28px, 4vw, 52px) clamp(38px, 5.5vh, 52px);
  background: rgba(10, 19, 16, 0.8);
}

.panel-backing .faq-short,
.panel-backing > :first-child { margin-top: 0; }

@media (max-width: 759px) {
  .panel-backing {
    margin-left: calc(var(--gutter) * -0.5);
    margin-right: calc(var(--gutter) * -0.5);
    padding: 30px 20px 36px;
  }
}

/* Panels whose body copy runs wider than the default 660px measure (e.g.
   .exp-overview-body at 720px, .gh-overview-body at 680px) can widen the
   card to match; set on the specific panel via a page stylesheet, e.g.
   [data-media-slot="exp-overview"] .panel-backing { max-width: ... }. */

.panel-title a::after {
  content: '\2192';
  display: inline-block;
  font-size: 0.42em;
  vertical-align: 0.28em;
  margin-left: 0.4em;
  color: var(--lagoon);
  transition: transform 0.45s var(--ease-out);
}

.panel-title a:hover::after { transform: translateX(10px); }

.panel-rule {
  width: 52px;
  height: 1px;
  background: var(--lagoon-dim);
  margin: 32px 0;
}

.panel-center .panel-rule { margin-left: auto; margin-right: auto; }

.panel-lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.6;
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(10, 19, 16, 0.55);
  max-width: 560px;
  margin-top: 22px;
}

.panel-center .panel-lede { margin-left: auto; margin-right: auto; }

.panel-note {
  max-width: 520px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.panel-note-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.25;
  color: var(--bone);
  margin-bottom: 14px;
}

.panel-note-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--bone);
}

/* Long-form text laid over media (pavilion, closers) */
.panel-prose {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.8;
  color: var(--bone);
  max-width: 620px;
  margin: 0 auto 24px;
  text-align: left;
}

.panel-prose:last-child { margin-bottom: 0; }

/* Every paragraph over media reads in full bone; the per-page classes
   keep their sizes and weights, only the color is lifted for contrast */
.panel-content p,
.moment-content p,
.parallax-content p {
  color: var(--bone);
}

/* ==========================================================================
   INTERIOR PAGE HEROES
   Full-bleed image, ink gradient, editorial stack pinned low.
   ========================================================================== */

.stay-hero, .isl-hero, .exp-hero, .din-hero, .gh-hero, .occ-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.stay-hero-image, .isl-hero-image, .exp-hero-image, .din-hero-image, .gh-hero-image, .occ-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Still heroes carry the same breath as the panels below them (panel-drift,
   defined with the panel rules). Heroes under video are excluded: Stay and
   Getting Here supply their own motion. The hero section clips overflow, so
   the 1.03 minimum scale never exposes an edge. Paused while off-screen. */
@media (prefers-reduced-motion: no-preference) {
  .din-hero-image, .exp-hero-image, .isl-hero-image, .occ-hero-image {
    animation: panel-drift 60s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .hero-offscreen .din-hero-image, .hero-offscreen .exp-hero-image,
  .hero-offscreen .isl-hero-image, .hero-offscreen .occ-hero-image {
    animation-play-state: paused;
  }
}

/* Hero video on Stay and Getting Here. No z-index anywhere in this stack:
   the image, the video (and its loop twin), the overlay and the content all
   paint in DOM order, so the video sits between the image and the overlay.
   Fade mirrors .hero-video in home.css. */
.stay-hero-video, .gh-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.stay-hero-video.active, .gh-hero-video.active { opacity: 1; }

.stay-hero-overlay, .isl-hero-overlay, .exp-hero-overlay, .din-hero-overlay, .gh-hero-overlay, .occ-hero-overlay {
  position: absolute;
  inset: 0;
  /* The lower ~35% is the text zone: >=0.72 ink there keeps bone body
     text at WCAG AA (4.5:1) even over a pure-white background region */
  background: linear-gradient(
    to bottom,
    rgba(10, 19, 16, 0.5) 0%,
    rgba(10, 19, 16, 0.18) 34%,
    rgba(10, 19, 16, 0.72) 62%,
    rgba(10, 19, 16, 0.94) 88%,
    var(--ink) 100%
  );
}

.stay-hero-content, .isl-hero-content, .exp-hero-content, .din-hero-content, .gh-hero-content, .occ-hero-content {
  position: relative;
  text-align: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(56px, 10vh, 110px);
  max-width: 920px;
}

.stay-hero-title, .isl-hero-title, .exp-hero-title, .din-hero-title, .gh-hero-title, .occ-hero-title {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(52px, 13vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--bone);
}

.stay-hero-rule, .isl-hero-rule, .exp-hero-rule, .din-hero-rule, .gh-hero-rule, .occ-hero-rule {
  margin-top: 34px;
  margin-bottom: 30px;
}

.stay-hero-lede, .isl-hero-lede, .exp-hero-lede, .din-hero-lede, .gh-hero-lede, .occ-hero-lede {
  /* Legibility pass: no italic, regular posture at medium weight, full
     bone, larger floor. Multigenerational audience reads these at arm's
     length on a phone. */
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2.8vw, 24px);
  line-height: 1.6;
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(10, 19, 16, 0.55);
  max-width: 580px;
  margin: 0 auto;
}

/* Quiet staggered rise on load */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.stay-hero-content > *, .isl-hero-content > *, .exp-hero-content > *,
.din-hero-content > *, .gh-hero-content > *, .occ-hero-content > * {
  animation: hero-rise 1.1s var(--ease-out) both;
}

.stay-hero-content > *:nth-child(2), .isl-hero-content > *:nth-child(2),
.exp-hero-content > *:nth-child(2), .din-hero-content > *:nth-child(2),
.gh-hero-content > *:nth-child(2), .occ-hero-content > *:nth-child(2) { animation-delay: 0.15s; }

.stay-hero-content > *:nth-child(3), .isl-hero-content > *:nth-child(3),
.exp-hero-content > *:nth-child(3), .din-hero-content > *:nth-child(3),
.gh-hero-content > *:nth-child(3), .occ-hero-content > *:nth-child(3) { animation-delay: 0.3s; }

.stay-hero-content > *:nth-child(4), .isl-hero-content > *:nth-child(4),
.exp-hero-content > *:nth-child(4), .din-hero-content > *:nth-child(4),
.gh-hero-content > *:nth-child(4), .occ-hero-content > *:nth-child(4) { animation-delay: 0.45s; }

/* ==========================================================================
   FULL-BLEED IMAGE BREAKS
   ========================================================================== */

.full-bleed-break, .visual-break, .isl-break, .exp-break, .din-break, .gh-break {
  overflow: hidden;
}

.full-bleed-break img, .visual-break img,
.isl-break img, .exp-break img, .din-break img, .gh-break img {
  width: 100%;
  height: clamp(320px, 64vw, 700px);
  object-fit: cover;
}

@media (min-width: 900px) {
  .full-bleed-break img, .visual-break img,
  .isl-break img, .exp-break img, .din-break img, .gh-break img {
    height: min(78vh, 760px);
  }
}

/* ==========================================================================
   TWO-COLUMN NOTE GRIDS  (weather/sounds, dietary/cooking, pets/visas)
   ========================================================================== */

.isl-notes, .din-notes, .gh-notes {
  padding: clamp(90px, 13vw, 150px) 0;
}

.isl-notes-grid, .din-notes-grid, .gh-notes-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 64px;
}

@media (min-width: 860px) {
  .isl-notes-grid, .din-notes-grid, .gh-notes-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(64px, 8vw, 120px);
  }
}

.isl-note, .din-note, .gh-note {
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.isl-note-title, .din-note-title, .gh-note-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.25;
  color: var(--bone);
}

.isl-note-rule, .din-note-rule, .gh-note-rule { margin: 26px 0; }

.isl-note-body, .din-note-body, .gh-note-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--bone-2);
}

/* ==========================================================================
   CLOSING INVITE
   The booking segue folded into each page's final media moment: a warm
   line and the INQUIRE action over the last image or video.
   ========================================================================== */

.closing-invite {
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.closing-invite-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 2.3vw, 21px);
  line-height: 1.6;
  color: var(--bone);
}

.closing-invite-cta {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lagoon);
  border: 1px solid var(--lagoon);
  padding: 17px 44px;
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
              color 0.4s var(--ease-out);
}

.closing-invite-cta:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

/* ==========================================================================
   CLOSING CTA SECTIONS
   ========================================================================== */

.closing, .stay-closing, .isl-cta, .exp-cta, .din-cta, .gh-closing, .family-closing {
  text-align: center;
  padding: clamp(110px, 16vw, 190px) 0;
  border-top: 1px solid var(--line-soft);
}

.closing-title,
.stay-closing-line, .isl-cta-line, .exp-cta-line, .din-cta-line,
.gh-closing-line, .family-closing-line {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 660px;
  margin: 0 auto;
}

.closing-rule { margin-top: 36px; margin-bottom: 44px; }

.stay-closing-cta, .isl-cta-button, .exp-cta-button, .din-cta-button,
.gh-closing-cta, .family-closing-cta {
  margin-top: 48px;
}

.closing-ctas { margin-bottom: 36px; }

.closing-subtle-link a {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--bone-3);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.closing-subtle-link a:hover { color: var(--lagoon); border-bottom-color: var(--lagoon-dim); }

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

.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line-soft);
  /* Bottom padding clears the fixed WhatsApp float at max scroll: the float
     tops out 70px above the viewport edge (52px + 18px offset; 60px on
     phones), so 96px keeps the contact links and copyright above it. */
  padding: clamp(64px, 9vw, 96px) 0 96px;
  text-align: center;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-bottom: 60px;
}

.footer-nav-list a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.footer-nav-list a:hover { color: var(--lagoon); }

.footer-mast {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.4em;
  color: var(--bone);
  margin-bottom: 18px;
}

.footer-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  margin-bottom: 36px;
}

.footer-copy {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(237, 231, 218, 0.3);
}

/* Legal link on the copyright line: stays as quiet as the line itself */
.footer-copy a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.footer-copy a:hover { color: var(--bone-2); border-bottom-color: var(--lagoon-dim); }


/* ==========================================================================
   COMPACT HEADER ON SCROLL (desktop stack only)
   Full centered stack at the top of the page; once the visitor is reading,
   the mark shrinks, the brand drops to a single line, and the nav tucks up.
   body.header-compact is set by main.js past 160px and cleared under 60px.
   ========================================================================== */
@media (min-width: 1120px) {
  .header-inner-v3 { transition: padding 0.4s var(--ease-out); }
  .header-inner-v3 .brand-mark { transition: height 0.4s var(--ease-out); }
  .header-inner-v3 .header-brand { transition: gap 0.4s var(--ease-out); }
  .header-inner-v3 .brand-name { transition: font-size 0.4s var(--ease-out); }
  .header-inner-v3 .brand-tag {
    max-height: 24px;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out), opacity 0.25s ease, margin 0.4s var(--ease-out);
  }
  .header-inner-v3 .header-menu { transition: margin 0.4s var(--ease-out); }

  body.header-compact .header-inner-v3 {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  body.header-compact .header-inner-v3 .brand-mark { height: 24px; }
  body.header-compact .header-inner-v3 .header-brand { gap: 5px; }
  body.header-compact .header-inner-v3 .brand-name { font-size: 16px; }
  body.header-compact .header-inner-v3 .brand-tag { max-height: 0; opacity: 0; margin-top: 0; }
  body.header-compact .header-inner-v3 .header-menu { margin-top: 6px; }
}

/* ==========================================================================
   GALLERIES (Stay, Dining)
   Three-image strip: swipeable row on mobile, three-up grid on desktop.
   Lives here so both pages share one set of rules.
   ========================================================================== */

.gallery {
  padding: 0 0 clamp(40px, 6vw, 80px);
}

.gallery-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--gutter);
}

.gallery-grid::-webkit-scrollbar { display: none; }

.gallery-item {
  flex: 0 0 82%;
  scroll-snap-align: center;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 860px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: var(--maxw);
    margin: 0 auto;
    overflow: visible;
  }
  .gallery-item { flex: none; }
}

/* ==========================================================================
   WHATSAPP FLOAT (every page)
   On-palette, bottom-right, under the menu overlay (z 200) and above content.
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lagoon);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(10, 19, 16, 0.45);
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }
.wa-float:hover { transform: translateY(-2px); background: var(--bone); }
@media (max-width: 479px) {
  .wa-float { width: 46px; height: 46px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 23px; height: 23px; }
}

/* ==========================================================================
   FOOTER CONTACT
   ========================================================================== */
.footer-contact {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--bone-3);
  margin: -20px 0 36px;
}
.footer-contact a {
  color: var(--bone-2);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.footer-contact a:hover { color: var(--bone); border-bottom-color: var(--lagoon-dim); }
.footer-dot { margin: 0 12px; color: var(--lagoon-dim); }