/* ==========================================================================
   Ellie's Cove Pensacola — stylesheet
   Mobile-first. No frameworks. No build step.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
/* Palette taken from the Blue Angels livery: PMS 288 blue and their golden
   yellow. Every pairing below is contrast-checked:
     white on --navy .............. 12.9:1
     white on --navy-deep ......... 17.1:1
     --ba-yellow on --navy ......... 8.3:1
     --navy-deep on --ba-yellow ... 10.9:1  (primary button)
     --gold on white / --sand ...... 5.0 / 4.6:1  (small accent text)
   --ba-yellow is bright, so it is only ever used on dark blue or as a button
   background with dark text — never as light text on white. */
:root {
  --navy: #002f6c;
  --navy-deep: #001b40;
  --navy-soft: #00458f;
  --ba-yellow: #ffc72c;     /* Blue Angels yellow — on dark blue only */
  --ba-yellow-deep: #e0a800;
  --gold: #8f6900;          /* dark amber: the only gold safe as text on white */
  --gold-bright: #ffc72c;
  --sand: #f7f6f2;
  --sand-deep: #ebe8e0;
  --ink: #0e1c2e;
  --body: #384a5e;
  --muted: #5e6e80;         /* holds 4.5:1 on white and on --sand */
  --line: #e3e7ec;
  --line-soft: #eef1f4;
  --white: #ffffff;
  --success-bg: #edf7ef;
  --success-br: #b8ddc0;
  --success-tx: #1e5b2c;
  --error-bg: #fdf0ee;
  --error-br: #f0c2b9;
  --error-tx: #8f2d1a;

  --shadow-sm: 0 1px 2px rgba(0, 27, 64, .06), 0 2px 6px rgba(0, 27, 64, .05);
  --shadow-md: 0 4px 12px rgba(0, 27, 64, .08), 0 12px 28px rgba(0, 27, 64, .07);
  --shadow-lg: 0 8px 24px rgba(0, 27, 64, .1), 0 24px 60px rgba(0, 27, 64, .13);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: 20px;
  --nav-h: 72px;

  --step-0: clamp(1rem, .98rem + .1vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + .22vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.28rem + .45vw, 1.625rem);
  --step-3: clamp(1.625rem, 1.45rem + .85vw, 2.125rem);
  --step-4: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --step-5: clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-soft); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--ba-yellow);
  outline-offset: 2px;
  border-radius: 3px;
  /* Dark halo so the bright ring is also visible against white. */
  box-shadow: 0 0 0 6px rgba(0, 47, 108, .55);
}

/* --- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section { padding-block: clamp(40px, 6.5vw, 72px); }
.section--tight { padding-block: clamp(32px, 5vw, 52px); }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .84); }
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy strong { color: var(--white); }
.section--navy a { color: var(--gold-bright); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--navy); color: var(--white);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* --- Eyebrow + section headers ------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .85em;
}
.section--navy .eyebrow { color: var(--gold-bright); }

/* An eyebrow that also carries the rating, so the score costs no extra row. */
.eyebrow--row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  width: 100%;
}
.inline-rating {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: 0;
}
.inline-rating svg { width: 15px; height: 15px; color: var(--ba-yellow-deep); }
.inline-rating b { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.inline-rating > span { font-size: .8125rem; font-weight: 500; color: var(--muted); }

.section-head { max-width: 640px; margin-bottom: clamp(22px, 3vw, 34px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--step-1); color: var(--muted); }
.section--navy .section-head p { color: rgba(255, 255, 255, .78); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-sans);
  font-size: .9375rem; font-weight: 600; line-height: 1;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  min-height: 48px;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

/* Blue Angels yellow with dark blue text — the livery pairing, and 10.9:1. */
.btn--primary { background: var(--ba-yellow); color: var(--navy-deep); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--ba-yellow-deep); color: var(--navy-deep); box-shadow: var(--shadow-md); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); color: #fff; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

.btn--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.btn--light:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn--wide { width: 100%; }
.btn--sm { padding: 11px 18px; min-height: 42px; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* --- Live availability bar ----------------------------------------------
   Sits above the header, so it is the first thing read. Only ever rendered
   when the iCal feed gave us a real date. */
.availbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .9);
  font-size: .8125rem;
}
.availbar__inner {
  margin: 0;
  padding: 9px 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px;
  text-align: center;
}
.availbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #48d17a; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(72, 209, 122, .22);
}
.availbar__text strong { color: var(--ba-yellow); font-weight: 700; }
.availbar__link {
  color: #fff; font-weight: 600;
  text-underline-offset: 3px;
}
.availbar__link:hover { color: var(--ba-yellow); }

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--nav-h);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
/* The logo is a near-square circular badge (1568x1592). Sized by height so the
   header rhythm stays fixed; width follows the aspect ratio. Bump this and
   --nav-h together, or the badge will crowd the bar. */
.brand__mark { height: 48px; width: auto; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
}
.brand__sub {
  font-size: .625rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  border-radius: var(--radius-sm);
}
.nav__toggle:hover { background: var(--sand); }

.nav__menu {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  display: none; flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 8px var(--gutter) 20px;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.nav__menu.is-open { display: flex; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.nav__list a {
  display: block; padding: 14px 4px;
  font-weight: 500; font-size: 1rem;
  color: var(--ink); text-decoration: none;
}
.nav__list a:hover { color: var(--gold); }
.nav__cta { margin-top: 16px; }
.nav__cta .btn { width: 100%; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-deep); overflow: hidden; }

.hero__media { position: relative; }
/* <picture> is a wrapper with no intrinsic size. It must be told to fill the
   media box, otherwise `height: 100%` on the <img> has nothing to resolve
   against and the image falls back to its intrinsic ratio and overflows. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Two stacked gradients: a vertical one for the mobile crop, and on wider
   screens a left-side wash so the overlaid headline keeps AA contrast against
   the pale siding behind it. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,20,50,.3) 0%, rgba(0,20,50,.04) 40%, rgba(0,20,50,.5) 100%);
}

.hero__body {
  position: relative;
  padding-block: clamp(28px, 6vw, 56px);
  color: rgba(255,255,255,.9);
}

.hero__flag {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 { color: #fff; margin-bottom: .45em; }
.hero h1 em { font-style: normal; color: var(--ba-yellow); }

.hero__lede {
  font-size: var(--step-1);
  color: rgba(255,255,255,.92);
  max-width: 46ch;
  margin-bottom: 1.5em;
}

/* Airbnb badge overlaid on hero image */
.airbnb-badge {
  position: absolute; z-index: 3;
  right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  color: var(--ink);
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .8125rem; font-weight: 600; line-height: 1.2;
  box-shadow: var(--shadow-md);
  transition: transform .18s, box-shadow .18s;
  backdrop-filter: blur(4px);
}
.airbnb-badge:hover { transform: translateY(-2px); color: var(--ink); box-shadow: var(--shadow-lg); }
/* The Airbnb Bélo is 333x357 — not square. Height-constrained with auto width
   so it is never squashed. Bump the height here to resize it everywhere. */
.airbnb-mark { height: 26px; width: auto; flex-shrink: 0; }
.btn .airbnb-mark { height: 22px; }
.airbnb-badge__stack { display: flex; flex-direction: column; }
.airbnb-badge__stack small {
  font-size: .625rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.airbnb-badge svg { flex-shrink: 0; opacity: .5; }

/* --- Trust bar ---------------------------------------------------------- */
/* Key facts strip. Label sits above the value so the eye reads
   "Corry Station → 5 minutes" rather than the number first. */
.trustbar { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.1); }
.trustbar__inner {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,.1);
  list-style: none; margin: 0; padding: 0;
}
.trustbar__item {
  background: var(--navy-deep);
  padding: 18px 16px; text-align: center;
  margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.trustbar__label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  margin-bottom: 5px;
}
.trustbar__value {
  font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 600; color: #fff;
  line-height: 1.2;
}

/* --- Prose + intro ------------------------------------------------------ */
.lede { font-size: var(--step-1); color: var(--ink); }

.split { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; }

/* --- Highlight cards ---------------------------------------------------- */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: var(--sand-deep); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { font-size: var(--step-1); margin-bottom: .35em; }
.card p { color: var(--muted); font-size: .9375rem; margin: 0; }

.card__icon {
  width: 42px; height: 42px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--sand); color: var(--navy);
}
.card__icon svg { width: 21px; height: 21px; }

/* --- Reasons: compact rows that open on click ----------------------------
   All six stay visible so the section can be scanned at a glance; the
   explanation is one tap away rather than always on screen. */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reasons li { margin: 0; }

.reason {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s;
}
.reason[open] { border-color: var(--sand-deep); box-shadow: var(--shadow-sm); }
.reason:hover { border-color: var(--navy); }

.reason > summary {
  list-style: none;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  cursor: pointer;
  min-height: 56px;
}
.reason > summary::-webkit-details-marker { display: none; }

.reason__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--sand); color: var(--navy);
}
.reason[open] .reason__icon { background: var(--navy); color: var(--ba-yellow); }
.reason__icon svg { width: 18px; height: 18px; }

.reason__title {
  flex: 1;
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}

/* chevron */
.reason > summary::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.reason[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }

.reason__body {
  margin: 0; padding: 0 16px 16px 63px;
  font-size: .9375rem; color: var(--muted);
}

@media (min-width: 640px) { .reasons { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, 1fr); } }

/* --- Gallery ------------------------------------------------------------ */
.gallery-filters {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 6px; margin-bottom: 18px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-filters::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  background: var(--white); border: 1.5px solid var(--line);
  color: var(--body);
  border-radius: 999px; padding: 9px 16px;
  font-family: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s, border-color .16s, color .16s;
  min-height: 40px;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.gallery__item {
  position: relative; margin: 0; padding: 0;
  border: 0; background: var(--sand-deep);
  border-radius: var(--radius); overflow: hidden;
  cursor: zoom-in; aspect-ratio: 4 / 3;
  display: block; width: 100%;
}
.gallery__item[hidden] { display: none; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease, filter .3s;
}
.gallery__item:hover img { transform: scale(1.05); }

/* The caption sits on a gradient over an unpredictable photo, so the scrim is
   weighted dark at the bottom and backed by a text shadow. Together these keep
   the label readable even over a blown-out white wall. */
.gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 10px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(9,23,38,.55) 45%, rgba(9,23,38,.88) 100%);
  color: #fff; font-size: .6875rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: left; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.gallery__more { margin-top: 18px; text-align: center; }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  background: rgba(7, 17, 28, .96);
  padding: 0;
}
.lightbox[open], .lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }

.lightbox__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px;
  color: rgba(255,255,255,.7); font-size: .8125rem; font-weight: 600;
}

.lightbox__stage {
  position: relative; display: grid; place-items: center;
  min-height: 0; padding: 0 8px;
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px;
}

.lightbox__cap {
  padding: 12px 16px 20px; text-align: center;
  color: rgba(255,255,255,.78); font-size: .875rem;
  max-width: 60ch; margin-inline: auto;
}

.lb-btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  color: #fff; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  transition: background-color .16s;
}
.lb-btn:hover { background: rgba(255,255,255,.24); }

.lightbox__nav {
  position: absolute; inset: auto 0 12px 0;
  display: flex; justify-content: center; gap: 14px;
}

/* --- Progressive disclosure ----------------------------------------------
   Keeps the page short without hiding anything from crawlers or assistants:
   the content stays in the DOM inside <details>, it is simply collapsed. The
   label swaps via a CSS content attribute so there is no JavaScript involved
   and it still works if scripts fail. */
.more { margin-top: 18px; }
.more > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: .5em;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .875rem; font-weight: 600; line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 18px;
  min-height: 44px;
  transition: border-color .16s, background-color .16s, color .16s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.more > summary::before { content: attr(data-open); }
.more[open] > summary::before { content: attr(data-close); }
/* chevron */
.more > summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.more[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }

.more__body { padding-top: 22px; }
/* Inside the contact form the toggle is a full-width row, and its body must
   re-establish the two-column grid the form uses. */
.more--inline { margin-top: 0; }
.more--inline > summary { width: 100%; justify-content: center; }
.more--inline .more__body { padding-top: 16px; }
.more--inline .form { gap: 16px; }

/* On dark sections the toggle needs light borders. */
.section--navy .more > summary { border-color: rgba(255,255,255,.3); color: #fff; }
.section--navy .more > summary:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Inside a light panel that sits on a dark section, go back to dark-on-light. */
.panel .more > summary { border-color: var(--line); color: var(--ink); }
.panel .more > summary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* --- Rooms / layout list ------------------------------------------------ */
.rooms { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rooms li {
  display: flex; gap: 13px; align-items: flex-start; margin: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px;
}
.rooms__icon {
  flex-shrink: 0; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--sand); color: var(--navy);
}
.rooms__icon svg { width: 19px; height: 19px; }
.rooms b { display: block; color: var(--ink); font-family: var(--font-serif); font-size: 1rem; font-weight: 600; }
/* Smaller descriptions keep all six rooms on screen without collapsing any. */
.rooms span { font-size: .8125rem; color: var(--muted); line-height: 1.5; }

/* --- Amenities ---------------------------------------------------------- */
.amenity-groups { display: grid; gap: 28px; }
.more__body > .amenity-groups,
.more__body > .cards,
.more__body > .reviews { margin-top: 0; }
.amenity-group h3 {
  font-size: .8125rem; font-family: var(--font-sans); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gold);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.amenity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.amenity-list li {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0; font-size: .9375rem;
}
.amenity-list svg { flex-shrink: 0; margin-top: 5px; color: var(--gold); width: 14px; height: 14px; }

/* --- Location ----------------------------------------------------------- */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sand-deep);
  box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 300px; border: 0; display: block; }

.distances { list-style: none; margin: 0; padding: 0; }
.distances li {
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.distances li:last-child { border-bottom: 0; }
.distances__pin {
  flex-shrink: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--sand); color: var(--navy);
  font-size: .8125rem;
}
.section--navy .distances li { border-color: rgba(255,255,255,.14); }
.section--navy .distances__pin { background: rgba(255,255,255,.1); color: var(--gold-bright); }
.distances__name { flex: 1; color: var(--ink); font-weight: 500; font-size: .9375rem; }
.section--navy .distances__name { color: #fff; }
.distances__time {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600;
  color: var(--navy); white-space: nowrap;
}
.section--navy .distances__time { color: var(--gold-bright); }
.distances__note { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; }
.section--navy .distances__note { color: rgba(255,255,255,.55); }
.distances--primary li:first-child .distances__pin,
.distances li.is-key .distances__pin { background: var(--navy); color: var(--gold-bright); }

/* --- Per diem / DTS panel ---------------------------------------------- */
.panel {
  background: var(--white); color: var(--body);
  border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
}
.section--navy .panel { border-color: transparent; box-shadow: var(--shadow-lg); }
.section--navy .panel h3,
.section--navy .panel h4 { color: var(--ink); }
.section--navy .panel a { color: var(--navy-soft); }
.panel h3 { margin-bottom: .6em; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: .9375rem; }
.checklist svg {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  color: var(--white); background: var(--gold); border-radius: 50%; padding: 4px;
}

/* --- Audience tiles ----------------------------------------------------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.tile { padding: 16px; }
.tile span { font-size: .8125rem; }
.tile {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.tile b {
  display: block; font-family: var(--font-serif); font-size: 1.0625rem;
  color: var(--ink); margin-bottom: .25em; font-weight: 600;
}
.tile span { font-size: .875rem; color: var(--muted); }

/* --- Reviews ------------------------------------------------------------ */
.reviews { display: grid; gap: 16px; }
/* A single featured review reads better a little wider and calmer than a card
   in a grid, so it gets its own treatment. */
.reviews--single { max-width: 760px; }
.reviews--single .review { padding: 26px 28px; }
.reviews--single blockquote { font-size: 1.0625rem; }

.review {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column;
}
.review__stars { display: flex; gap: 2px; color: var(--ba-yellow-deep); margin-bottom: 12px; }
.review__stars svg { width: 15px; height: 15px; }
.review blockquote {
  margin: 0 0 18px; padding: 0;
  font-size: .9375rem; color: var(--body);
}
.review blockquote p:last-child { margin-bottom: 0; }
.review__by { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.review__name { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.review__meta { font-size: .8125rem; color: var(--muted); }

/* --- Booking widget -----------------------------------------------------
   The Hospitable widget renders at its own narrow intrinsic width, so giving
   it the full page width just strands it in a sea of white. Instead it gets a
   column sized to it, with the supporting copy alongside. */
.booking { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; }

/* Hospitable exposes no documented option for the widget's own background, so
   the white comes from here instead. Flat white with no border and no shadow:
   the widget's own panel is also white, so the two read as a single surface
   rather than the box-inside-a-box this used to be.
   overflow-x is auto rather than hidden so that if Hospitable ever ships a
   wider widget it stays reachable instead of being clipped, while the page
   still cannot overflow horizontally. */
.widget-shell {
  background: var(--white);
  border-radius: var(--radius-lg);
  /* 10px on mobile, not 16: at 390px the column is 350px, and 320px of widget
     plus 16px either side is 352px — two pixels too wide to centre. */
  padding: 10px;
  overflow-x: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Centring the widget takes two mechanisms, because the loader injects a
   wrapper we don't control:
     1. flex + justify-content handles a wrapper that shrinks to its content;
     2. the rules below handle a wrapper that sets its own width:100%, which
        would otherwise fill this box and leave the calendar pinned left.
   !important is needed because the loader sets those widths inline, where a
   normal rule loses. fit-content sizes to the calendar's natural width, and
   max-width keeps it from ever exceeding the box. Scoped to direct children so
   it cannot reach into the widget's internals. */
.widget-shell > *:not(.widget-fallback) {
  flex: 0 1 auto;
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

/* If Hospitable ever ships a widget that paints its own tinted background over
   this white, override it here — the loader sets styles inline, so such a rule
   would need !important to win:
     .widget-shell > div { background-color: transparent !important; }
   Not applied by default: the widget's own panel is already white, and forcing
   transparency on DOM we don't control risks breaking it. */

/* The fallback sits on the same white surface, so it needs no card of its own. */
.widget-fallback {
  text-align: center;
  padding: 28px 20px;
  color: var(--muted);
  font-size: .9375rem;
}

.booking__aside { align-self: start; }
.booking__aside h3 { font-size: var(--step-2); margin-bottom: .7em; }
.booking__note {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--sand-deep);
  font-size: .875rem; color: var(--muted);
}
.booking__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* --- Booking option cards ------------------------------------------------ */
.bopts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.bopt {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px 18px;
}
/* Direct booking is the cheapest, so it gets the livery yellow edge. */
.bopt:last-child { border-left-color: var(--ba-yellow-deep); }

.bopt__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.bopt__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.bopt__icon { height: 22px; width: auto; flex-shrink: 0; }
/* The Airbnb mark is a brand image; the other two are line icons that should
   pick up the card's own colour. */
.bopt__icon--svg { width: 22px; color: var(--navy); }
.bopt:last-child .bopt__icon--svg { color: var(--ba-yellow-deep); }
.bopt__tag {
  flex-shrink: 0;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy); background: var(--sand);
  border: 1px solid var(--sand-deep);
  border-radius: 999px; padding: 4px 9px;
}
.bopt:last-child .bopt__tag {
  color: var(--navy-deep); background: var(--ba-yellow); border-color: var(--ba-yellow-deep);
}

.bopt__summary { font-size: .875rem; color: var(--muted); margin: 0 0 12px; }

/* Two-column label/value rows that collapse to stacked on very narrow screens. */
.bopt__rows {
  display: grid; grid-template-columns: auto 1fr;
  gap: 5px 12px; margin: 0; font-size: .8125rem;
}
.bopt__rows dt {
  font-weight: 600; color: var(--muted);
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  padding-top: 2px;
}
.bopt__rows dd { margin: 0; color: var(--body); }

/* Each option carries its own call to action, so the decision and the button
   sit together rather than the button living in a shared row underneath. */
.bopt__cta { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.bopt__cta .btn { width: 100%; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer;
  font-family: var(--font-serif); font-size: var(--step-1); font-weight: 600;
  color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px; margin-top: 7px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq summary:hover { color: var(--navy-soft); }
.faq__answer { padding: 0 0 20px; max-width: 68ch; font-size: .9375rem; }

/* --- Contact / form ----------------------------------------------------- */
/* One centred column: the form is the only thing in this section now, so it is
   capped at a comfortable reading width rather than stretching the full page. */
.contact-grid {
  display: grid; gap: clamp(28px, 5vw, 48px);
  max-width: 680px; margin-inline: auto;
}

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.field--half { grid-column: span 1; }

.field label {
  font-size: .8125rem; font-weight: 600; color: var(--ink);
  letter-spacing: .01em;
}
.field label .req { color: var(--gold); }
.field .hint { font-size: .75rem; color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  width: 100%;
  min-height: 48px;
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7a89' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(0, 69, 143, .15);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #c4553c; }

.field__error { font-size: .75rem; color: #a3402a; font-weight: 500; min-height: 0; }
.field__error:empty { display: none; }

.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Centred under the full-width submit button, and capped so the two lines break
   evenly rather than leaving one word stranded. */
.form__note {
  font-size: .75rem; color: var(--muted);
  text-align: center; max-width: 46ch; margin-inline: auto;
}

.alert {
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid; font-size: .9375rem; margin-bottom: 20px;
  display: flex; gap: 10px; align-items: flex-start;
}
.alert svg { flex-shrink: 0; margin-top: 3px; }
.alert--ok { background: var(--success-bg); border-color: var(--success-br); color: var(--success-tx); }
.alert--err { background: var(--error-bg); border-color: var(--error-br); color: var(--error-tx); }

/* These alerts sit on a light panel inside the navy contact section, so they
   must undo the section's light-on-dark rules. Without this the <strong> in
   "Thanks — your inquiry is on its way." inherits white from
   `.section--navy strong` and disappears against the pale green. */
.alert strong,
.section--navy .alert strong { color: inherit; }
.section--navy .alert--ok { color: var(--success-tx); }
.section--navy .alert--err { color: var(--error-tx); }
.alert a,
.section--navy .alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert[hidden] { display: none; }

/* The email address in the section intro, on navy: gold-bright clears 4.5:1
   against --navy, and the underline keeps it identifiable as a link. */
.email-inline {
  color: var(--gold-bright); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; word-break: break-word;
}
.email-inline:hover { color: #fff; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep); color: rgba(255,255,255,.62);
  padding-block: 30px; font-size: .875rem;
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); text-decoration: underline; }
/* A single centred copyright line — the footer holds nothing else. */
.footer__bottom {
  display: flex; justify-content: center; text-align: center;
  font-size: .8125rem; color: rgba(255,255,255,.5);
}

/* --- Sticky mobile action bar ------------------------------------------ */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.actionbar.is-visible { transform: translateY(0); }
.actionbar .btn { flex: 1; padding-inline: 12px; }
body.has-actionbar { padding-bottom: 74px; }

/* --- Reveal on scroll ---------------------------------------------------
   Scoped to .js so that if JavaScript is unavailable or fails, every section
   renders visible instead of being stuck at opacity 0. The .js class is set by
   an inline script in <head>. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 480px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .airbnb-badge { right: 18px; bottom: 18px; }
}

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .trustbar__inner { grid-template-columns: repeat(4, 1fr); }
  .trustbar__value { font-size: 1.4375rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .amenity-groups { grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
  .map-frame iframe { height: 400px; }
  .lightbox__nav { position: static; inset: auto; padding-bottom: 4px; }
}

@media (min-width: 900px) {
  :root { --nav-h: 88px; }

  .nav__toggle { display: none; }
  .nav__menu {
    position: static; inset: auto; display: flex; flex-direction: row;
    align-items: center; gap: 8px;
    background: none; border: 0; box-shadow: none; padding: 0;
    max-height: none; overflow: visible;
  }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  .nav__list li { border: 0; }
  .nav__list a {
    padding: 8px 11px; font-size: .875rem; font-weight: 500;
    border-radius: var(--radius-sm);
  }
  .nav__list a:hover { background: var(--sand); color: var(--navy); }
  .nav__cta { margin: 0 0 0 10px; }
  .nav__cta .btn { width: auto; }
  .brand__mark { height: 62px; }
  .brand__name { font-size: 1.1875rem; }

  /* Hero becomes an overlay composition */
  .hero { display: grid; }
  .hero__media { position: absolute; inset: 0; }
  .hero__img { height: 100%; aspect-ratio: auto; }

  /* Light touch: a soft wash on the left only, so the house and the jets stay
     bright. The heavy lifting for legibility is done by the text shadow on the
     headline below, not by dimming the photo. */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(0,20,50,.6) 0%, rgba(0,20,50,.42) 36%, rgba(0,20,50,.16) 64%, transparent 86%),
      linear-gradient(180deg, rgba(0,20,50,.26) 0%, rgba(0,20,50,.04) 42%, rgba(0,20,50,.4) 100%);
  }

  /* Over a photo, a shadow buys contrast at the glyph edge where it actually
     matters, without flattening the image. Applied only where the hero text
     overlaps the picture — on mobile the text sits on solid blue and needs none. */
  .hero h1,
  .hero__lede {
    text-shadow: 0 1px 2px rgba(0, 18, 45, .55), 0 2px 16px rgba(0, 18, 45, .7);
  }
  .hero__body {
    position: relative; z-index: 2;
    min-height: min(76vh, 700px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-block: 90px 56px;
  }
  .hero__inner { max-width: 640px; }
  .airbnb-badge { right: 28px; top: 24px; bottom: auto; }


  .split--2 { grid-template-columns: 1.05fr .95fr; }
  .split--sidebar { grid-template-columns: 1fr 380px; }
  .split--media { grid-template-columns: 1fr 1fr; align-items: center; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .reviews--single { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(4, 1fr); }

  /* A roomy column for the calendar, which is centred inside it. The widget is
     only ~320px wide and does not stretch, so the white either side is
     deliberate breathing room.
     clamp rather than a fixed width: at a fixed 500px the booking-option cards
     beside it were squeezed to ~300px on a 900px screen. The 352px floor is the
     320px widget plus this element's 16px padding either side, so the calendar
     never has to scroll horizontally. */
  .booking { grid-template-columns: clamp(352px, 34vw, 500px) 1fr; }
  .widget-shell { padding: 16px; }

  .map-frame iframe { height: 380px; }

  .actionbar { display: none; }
  body.has-actionbar { padding-bottom: 0; }

  .lightbox { grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; }
  .lightbox__top { grid-column: 1 / -1; padding: 16px 20px; }
  .lightbox__stage { grid-column: 1 / -1; padding: 0 20px; }
  .lightbox__cap { grid-column: 1 / -1; }
  .lightbox__nav { gap: 20px; }
}

@media (min-width: 1100px) {
  .reveal { transition-duration: .6s; }
  .hero__body { padding-block: 110px 64px; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .actionbar, .lightbox, .gallery-filters,
  .widget-shell, .nav__toggle { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section--navy { background: #fff !important; color: #000 !important; }
  .section--navy h2, .section--navy h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}