/* =========================================================
   Surfers Chalet — Canonical Website Stylesheet
   Brand: Deep Teal / Lagoon / Turquoise / Sea Foam / Sand
   Display: Righteous  |  Body & UI: Montserrat

   SOURCE OF TRUTH. This is the exact stylesheet from the Homepage
   Design Review artifact (the reference build, confirmed canonical
   2026-09-20 after Experiences Page Draft diverged from it — see
   README.md "Known divergence, resolved" for what changed and why).

   Every "SC Website — <Page> page" task must open this file first and
   copy it verbatim into the new page's <style> block. Never retype it
   from memory — that is exactly how Experiences drifted (it picked up
   a topbar, a different hero, different grid breakpoints and a
   different nav z-index that Homepage never had). If a page needs a
   new component, add its CSS here too, in the matching section below,
   so the next page inherits it.
   ========================================================= */

:root {
  /* Brand palette */
  --deep-teal: #0F4A50;
  --lagoon: #1B6B72;
  --turquoise: #2ABFB0;
  --sea-foam: #EEF7F6;
  --sand: #F7F3EC;
  --white: #FFFFFF;
  --ink: #163338;
  --ink-soft: #4a6367;
  --line: #d8e8e6;

  /* Type */
  --font-display: 'Righteous', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --max-width: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(15, 74, 80, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 74, 80, 0.14);
  --header-h: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

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

/* ---------- Utility ---------- */
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sand { background: var(--sand); }
.section--foam { background: var(--sea-foam); }
.section--teal { background: var(--deep-teal); color: var(--white); }
.section--turquoise { background: var(--turquoise); color: var(--deep-teal); }
.section--turquoise h2.section-title, .section--turquoise .eyebrow { color: var(--deep-teal); }
.section--turquoise .eyebrow::before { background: var(--deep-teal); }
.section--turquoise .lede, .section--turquoise .tier-band__meta, .section--turquoise .tier-band__descriptors { color: rgba(15,74,80,0.78); }
.section--lagoon { background: var(--lagoon); color: var(--white); }
.section--lagoon h2.section-title, .section--lagoon .eyebrow { color: var(--white); }
.section--lagoon .eyebrow { color: var(--turquoise); }
.section--lagoon .lede, .section--lagoon .tier-band__meta { color: rgba(255,255,255,0.85); }
.section--lagoon .tier-band__descriptors { color: rgba(255,255,255,0.7); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--turquoise);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--turquoise); display: inline-block; }
h2.section-title {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem); color: var(--deep-teal); margin-top: .5rem;
}
.section--teal h2.section-title, .section--teal .eyebrow { color: var(--white); }
.section--teal .eyebrow { color: var(--turquoise); }
.lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; margin-top: .9rem; }
.section--teal .lede { color: rgba(255,255,255,0.82); }
.section--teal .tier-band__meta { color: rgba(255,255,255,0.85); }
.section--teal .tier-band__descriptors { color: rgba(255,255,255,0.7); }

/* ---------- Tier band header (Room Types Collection bands) ---------- */
.tier-head { max-width: 60ch; }
.tier-head__mark {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.tier-head__mark img { width: auto; height: 36px; display: block; }
.section--sand .tier-head__mark, .section--foam .tier-head__mark { background: rgba(15,74,80,0.08); }
.section--teal .tier-head__mark, .section--lagoon .tier-head__mark { background: rgba(255,255,255,0.14); }
.section--turquoise .tier-head__mark { background: rgba(255,255,255,0.45); }
.tier-band__meta {
  margin-top: .85rem; font-size: .85rem; font-weight: 600; color: var(--lagoon);
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
}
.tier-band__descriptors {
  margin-top: .35rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.visually-hidden {
  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: 1rem; top: -60px; background: var(--deep-teal); color: var(--white);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm); z-index: 999; transition: top .2s ease;
  font-weight: 600; font-size: .9rem;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--turquoise); color: var(--deep-teal); }
.btn-primary:hover { background: var(--sea-foam); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-outline-dark { background: transparent; color: var(--deep-teal); border-color: var(--deep-teal); }
.btn-outline-dark:hover { background: var(--deep-teal); color: var(--white); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--lagoon);
}
.btn-ghost .mark-icon { width: 20px; height: auto; transition: transform .25s ease; }
.btn-ghost:hover .mark-icon { transform: translateY(-3px) rotate(-6deg); }
.btn-ghost::after { content: "→"; transition: transform .2s ease; }
.btn-ghost:hover::after { transform: translateX(4px); }

/* =========================================================
   Header (every page)
   ========================================================= */
.hide-sm { }
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 400px) {
  .header-actions .btn-primary { padding: .49rem .7rem; font-size: .5rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
}
.site-header__bar {
  height: 100%; width: 100%; margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.75rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}

.nav-toggle {
  justify-self: start; display: flex; flex-direction: column; gap: 5px; background: none; border: 0;
  width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--sea-foam); }
.nav-toggle span { width: 22px; height: 2.5px; background: var(--deep-teal); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.brand { justify-self: center; display: flex; align-items: center; gap: .65rem; }
.brand__mark { width: 30px; height: auto; }
.brand__word { font-family: var(--font-display); color: var(--deep-teal); line-height: 1; text-align: center; }
.brand__word .line1 { font-size: 1.28rem; letter-spacing: .01em; display: block; }
.brand__word .line2 { font-size: .58rem; letter-spacing: .32em; color: var(--lagoon); display: block; margin-top: 2px; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.header-actions .btn { padding: .53rem .91rem; font-size: .56rem; }

/* Slide-in nav panel — z-index 300 must outrank the sticky header (100) and
   the cookie banner (200), or the menu opens partly hidden behind whichever
   of those is stacked above it once the page is scrolled. */
.nav-panel {
  position: fixed; inset: 0; z-index: 300; visibility: hidden;
}
.nav-panel__scrim {
  position: absolute; inset: 0; background: rgba(15,74,80,0.45); opacity: 0; transition: opacity .3s ease;
}
.nav-panel__sheet {
  position: absolute; top: 0; left: 0; height: 100%; width: min(360px, 86vw);
  background: var(--deep-teal); color: var(--white);
  transform: translateX(-102%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  padding: 1.75rem 2rem 2rem; overflow-y: auto;
}
.nav-panel.is-open { visibility: visible; }
.nav-panel.is-open .nav-panel__scrim { opacity: 1; }
.nav-panel.is-open .nav-panel__sheet { transform: translateX(0); }
.nav-panel__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; color: var(--white); width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; }
.nav-panel__close:hover { background: rgba(255,255,255,0.12); }
.nav-panel__links { margin-top: 1.5rem; display: flex; flex-direction: column; }
.nav-panel__links a {
  font-family: var(--font-display); font-size: 1.5rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-panel__links a:hover, .nav-panel__links a[aria-current="page"] { color: var(--turquoise); }
.nav-panel__meta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.16); font-size: .85rem; color: rgba(255,255,255,0.75); }
.nav-panel__meta a { display: block; margin-top: .5rem; }
.nav-panel__meta a svg { width: 14px; height: 14px; margin-right: .4rem; vertical-align: -2px; }
.nav-panel__socials { display: flex; gap: .75rem; margin-top: 1.25rem; }
.nav-panel__socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nav-panel__socials a:hover { background: var(--turquoise); border-color: var(--turquoise); color: var(--deep-teal); }
.nav-panel__socials svg { width: 16px; height: 16px; }

/* Footer info panels — an edge-anchored quick-view drawer for two footer
   links (Traditional Owners, Directions), opening from the right so it
   never collides with the primary nav-panel opening from the left.
   Progressive enhancement: the footer links this attaches to keep their
   real hrefs to the full pages, so this is an optional faster layer, not
   the only way to reach the content. Sits above the nav-panel (z-index
   300) and cookie banner (200) since it can be triggered while either is
   visible. See components/Footer-CookieBanner/README.md. */
.info-scrim {
  position: fixed; inset: 0; z-index: 320; background: rgba(15,74,80,0.45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.info-scrim.is-visible { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.info-panel {
  position: fixed; top: 0; right: 0; z-index: 330; height: 100%; width: min(420px, 90vw);
  background: var(--white); color: var(--deep-teal);
  transform: translateX(102%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; visibility: hidden; box-shadow: var(--shadow-md);
}
.info-panel.is-open { transform: translateX(0); visibility: visible; }
.info-panel__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(15,74,80,0.55); border: 0;
  color: var(--white); width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.info-panel__close:hover { background: var(--deep-teal); }
.info-panel__media { height: 200px; background-size: cover; background-position: center; background-color: var(--sea-foam); }
.info-panel__media--owners {
  background-image: linear-gradient(135deg, var(--deep-teal), var(--lagoon) 60%, var(--turquoise));
  display: flex; align-items: center; justify-content: center;
}
.info-panel__media--owners svg { width: 56px; height: 56px; stroke: rgba(255,255,255,0.55); }
.info-panel__body { padding: 1.75rem 2rem 2rem; }
.info-panel__body h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--deep-teal); margin: .35rem 0 1rem; line-height: 1.25; }
.info-panel__body p { font-size: .92rem; line-height: 1.6; color: rgba(15,74,80,0.85); }
.info-panel__body .btn { margin-top: 1.4rem; }
.info-panel__note { margin-top: 1rem; font-size: .7rem; color: rgba(15,74,80,0.45); font-style: italic; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: linear-gradient(155deg, var(--deep-teal), var(--lagoon));
  color: var(--white); padding-block: clamp(3.5rem, 10vw, 6rem);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(42,191,176,0.35), transparent 70%);
}
.page-hero .container { position: relative; }
.page-hero .eyebrow { color: var(--turquoise); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem);
  margin-top: .6rem; max-width: 16ch; line-height: 1.05;
}
.page-hero p { max-width: 56ch; color: rgba(255,255,255,0.85); margin-top: 1rem; font-size: 1.05rem; }
.breadcrumb { font-size: .78rem; letter-spacing: .05em; color: rgba(255,255,255,0.65); margin-top: 1.4rem; }
.breadcrumb a:hover { color: var(--turquoise); }

/* ---------- Page hero: photo variant (needs isolation: isolate — without it
   the element's own solid background paints over the negative-z-index
   background image/scrim, hiding the photo) ---------- */
.page-hero--photo { background: var(--deep-teal); padding-block: clamp(4.5rem, 14vw, 8rem); isolation: isolate; }
.page-hero--photo::after { content: none; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,74,80,0.65) 0%, rgba(15,74,80,0.42) 45%, rgba(15,74,80,0.94) 100%);
}

/* =========================================================
   Home hero
   ========================================================= */
.hero {
  position: relative; min-height: min(92vh, 880px); display: flex; align-items: flex-end;
  overflow: hidden; color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--deep-teal); }
/* Rotating video reel: every clip is stacked full-bleed and crossfades via
   opacity — swapping which one is .is-active — rather than being mounted
   and unmounted, so playback never has to restart mid-loop. Not populated
   with clips yet on Homepage — falls back to the static image below until
   final video is sourced (see README "Open items"). */
.hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  opacity: 0; transition: opacity 1.6s ease; will-change: opacity;
}
.hero__media video.is-active { opacity: 1; }
.hero__media-fallback {
  width: 100%; height: 100%; object-fit: cover; object-position: center 65%;
}
/* JS swaps in the video stack and hides this static image; it only shows
   when JS hasn't run, autoplay is blocked, or the browser can't play mp4. */
.hero__media.has-reel .hero__media-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__media video { display: none; }
  .hero__media.has-reel .hero__media-fallback { display: block; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,74,80,0.35) 0%, rgba(15,74,80,0.15) 38%, rgba(15,74,80,0.88) 100%);
}
.hero__content { position: relative; width: 100%; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 7vw, 4.5rem); }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: end; }
.hero__eyebrow { color: rgba(255,255,255,0.85); }
.hero__title {
  font-family: var(--font-display); font-weight: 400; line-height: .98;
  font-size: clamp(3rem, 9vw, 6.4rem); margin-top: .4rem;
}
.hero__sub { font-family: var(--font-body); font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-top: .6rem; }
.hero__panel { max-width: 380px; }
.hero__panel h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }
.hero__panel p { color: rgba(255,255,255,0.85); margin-top: .7rem; }
.hero__panel .btn-ghost { color: var(--white); margin-top: 1.2rem; }
.hero__panel .btn-ghost::after { color: var(--turquoise); }
.hero__strip { display: flex; gap: .5rem; margin-top: 1.5rem; }
.hero__strip img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,0.5); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr auto 1fr; gap: 3rem; }
}

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--deep-teal); color: var(--white); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; justify-content: space-between; padding-block: 1.3rem; }
.trust-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; letter-spacing: .03em; color: rgba(255,255,255,0.9); }
.trust-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--turquoise); }

/* =========================================================
   Cards: Rooms / Experiences / Offers
   ========================================================= */
.grid-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }

.room-grid, .card-grid { display: grid; gap: 1.6rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .room-grid, .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Room cards: 3-up at medium widths (a 5-card set reads as a balanced 3+2),
   5-up only once there's room for each card to stay comfortably readable. */
@media (min-width: 900px) { .room-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .room-grid { grid-template-columns: repeat(5, 1fr); } }

.room-card {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column;
}
.room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.room-card__media { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--lagoon), var(--deep-teal)); position: relative; display: flex; align-items: center; justify-content: center; }
.room-card__media svg { width: 46px; height: 46px; color: rgba(255,255,255,0.55); }
.room-card__tag { position: absolute; top: .8rem; left: .8rem; background: rgba(255,255,255,0.9); color: var(--deep-teal); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; }
.room-card__body { padding: 1.35rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.room-card__body h3 { font-size: 1.05rem; color: var(--deep-teal); font-weight: 700; }
.room-card__body p { font-size: .88rem; color: var(--ink-soft); flex: 1; }
.room-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .76rem; color: var(--lagoon); font-weight: 600; }
.room-card__link { margin-top: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lagoon); display: inline-flex; align-items: center; gap: .4rem; }
.room-card__link::after { content: "→"; transition: transform .2s ease; }
.room-card:hover .room-card__link::after { transform: translateX(4px); }

/* ---------- Stay cards: homepage "Where you'll stay" collection teaser ----------
   One colour per Collection (Sand / Turquoise / Surf / Horizon) applied as a
   solid mat that frames the photo and carries straight through behind the
   copy beneath it. Each photo is a small client-side carousel (4 photos,
   chevron + "n/4" counter). */
.stay-grid { display: grid; gap: 1.6rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stay-grid { grid-template-columns: repeat(4, 1fr); } }

.stay-card {
  border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.stay-card--sand { background: var(--sand); color: var(--deep-teal); }
.stay-card--turquoise { background: var(--turquoise); color: var(--deep-teal); }
.stay-card--surf { background: var(--sea-foam); color: var(--deep-teal); }
.stay-card--horizon { background: var(--deep-teal); color: var(--white); }

.stay-card__media { position: relative; aspect-ratio: 4/3; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; background: rgba(15,74,80,0.12); }
.stay-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stay-card__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15,74,80,0.55); color: var(--white); border: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, opacity .2s ease;
}
.stay-card__nav:hover { background: rgba(15,74,80,0.8); }
.stay-card__nav svg { width: 18px; height: 18px; }
.stay-card__nav--prev { left: .6rem; }
.stay-card__nav--prev svg { transform: rotate(180deg); }
.stay-card__nav--next { right: .6rem; }
.stay-card__nav[hidden] { display: none; }

.stay-card__count {
  position: absolute; right: .6rem; bottom: .6rem; background: rgba(15,74,80,0.55); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: .2rem .55rem; border-radius: 999px;
}

.stay-card__body { padding: 1.1rem .4rem .5rem; display: flex; flex-direction: column; gap: .5rem; }
.stay-card__body h3 { font-size: 1.1rem; font-weight: 700; }
.stay-card__body p { font-size: .88rem; line-height: 1.55; }
.stay-card--sand .stay-card__body p, .stay-card--surf .stay-card__body p { color: rgba(15,74,80,0.82); }
.stay-card--turquoise .stay-card__body p { color: var(--sea-foam); }
.stay-card--horizon .stay-card__body p { color: rgba(255,255,255,0.85); }
.stay-card__meta { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.stay-card--sand .stay-card__meta, .stay-card--turquoise .stay-card__meta, .stay-card--surf .stay-card__meta { color: var(--lagoon); }
.stay-card--horizon .stay-card__meta { color: var(--turquoise); }

/* Experiences flip cards ("Netflix style" flip boards) */
.flip-grid { display: grid; gap: 1.4rem; margin-top: 2.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .flip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .flip-grid { grid-template-columns: repeat(5, 1fr); } }
.flip-card { perspective: 1200px; aspect-ratio: 3/4; }
.flip-card__inner {
  position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.flip-card:hover .flip-card__inner, .flip-card:focus-within .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md);
  display: flex; align-items: flex-end; padding: 1.1rem; overflow: hidden;
}
.flip-card__face--front { background-size: cover; background-position: center; }
.flip-card__face--front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,74,80,0.05), rgba(15,74,80,0.85)); }
.flip-card__face--front span { position: relative; color: var(--white); font-weight: 700; font-size: 1.05rem; }
.flip-card__face--back { background: var(--deep-teal); color: var(--white); transform: rotateY(180deg); flex-direction: column; justify-content: center; gap: .5rem; align-items: flex-start; }
.flip-card__face--back h3 { font-weight: 700; font-size: 1rem; }
.flip-card__face--back p { font-size: .78rem; color: rgba(255,255,255,0.82); }
.flip-card--feature { grid-column: span 2; }
@media (min-width: 700px) { .flip-card--feature { grid-row: span 2; aspect-ratio: auto; } }

/* Offers */
.offer-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.8rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .75rem; }
.offer-card__badge { align-self: flex-start; background: var(--sea-foam); color: var(--deep-teal); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; }
.offer-card h3 { color: var(--deep-teal); font-size: 1.15rem; }
.offer-card p { color: var(--ink-soft); font-size: .92rem; }
.payment-plan { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.payment-plan span { background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem; font-size: .78rem; font-weight: 700; color: var(--lagoon); }

/* ---------- Split section (welcome / about copy blocks) ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .split--reverse .split__media { order: 2; } }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split__media--collage { display: grid; grid-template-columns: 1.3fr 1fr; gap: .8rem; }
.split__media--collage img { border-radius: var(--radius-md); height: 100%; object-fit: cover; }
.split__media--collage .collage-stack { display: grid; gap: .8rem; }
.split__body ul { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.split__body li { display: flex; gap: .6rem; font-size: .95rem; color: var(--ink-soft); align-items: flex-start; }
.split__body li svg { width: 18px; height: 18px; color: var(--turquoise); flex-shrink: 0; margin-top: 3px; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; margin-top: 2.4rem; }
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip svg { width: 30px; height: 30px; color: var(--turquoise); }
.stat-strip strong { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--deep-teal); font-weight: 400; display: block; }
.stat-strip span { font-size: .78rem; color: var(--ink-soft); letter-spacing: .03em; }
.section--teal .stat-strip strong { color: var(--white); }
.section--teal .stat-strip span { color: rgba(255,255,255,0.75); }

/* ---------- Location ---------- */
.distance-cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.2rem; }
@media (min-width: 700px) { .distance-cards { grid-template-columns: repeat(4, 1fr); } }
.distance-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem; text-align: center; box-shadow: var(--shadow-sm); }
.distance-card strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--lagoon); display: block; }
.distance-card span { font-size: .82rem; color: var(--ink-soft); }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Team ---------- */
.team-grid { display: grid; gap: 1.6rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.team-card__photo { aspect-ratio: 1/1; overflow: hidden; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo--icon { background: linear-gradient(135deg, var(--lagoon), var(--deep-teal)); display: flex; align-items: center; justify-content: center; }
.team-card__photo--icon svg { width: 54px; height: 54px; color: rgba(255,255,255,0.6); }
.team-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.team-card__body h3 { color: var(--deep-teal); font-size: 1.05rem; }
.team-card__role { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise); font-weight: 700; margin-top: .2rem; display: block; }
.team-card__body p { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }

/* ---------- Timeline (About / History) ---------- */
.timeline { margin-top: 2.6rem; border-left: 2px solid var(--line); padding-left: 1.8rem; display: flex; flex-direction: column; gap: 2rem; }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: -2.32rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--turquoise); border: 3px solid var(--sea-foam); }
.timeline__year { font-family: var(--font-display); color: var(--lagoon); font-size: 1.15rem; }
.timeline__item p { color: var(--ink-soft); margin-top: .35rem; max-width: 62ch; }

/* =========================================================
   Forms (Contact)
   ========================================================= */
.form-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 2.6rem; }
@media (min-width: 940px) { .form-layout { grid-template-columns: 1.1fr .9fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.15rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--deep-teal); text-transform: uppercase; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .95rem; background: var(--white); color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(42,191,176,0.16); outline: none; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: .78rem; color: var(--ink-soft); margin-top: .5rem; }
.form-success {
  display: none; background: var(--sea-foam); border: 1px solid var(--turquoise); color: var(--deep-teal);
  padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-size: .9rem; margin-top: 1rem;
}
.form-success.is-visible { display: block; }
.contact-card { background: var(--deep-teal); color: var(--white); border-radius: var(--radius-lg); padding: 2rem; }
.contact-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.contact-card__group { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.16); }
.contact-card__group:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.2rem; }
.contact-card__group h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise); }
.contact-card__group p, .contact-card__group a { display: block; margin-top: .4rem; font-size: .92rem; color: rgba(255,255,255,0.88); }
.contact-card__group a:hover { color: var(--turquoise); }
.contact-card__group svg { width: 15px; height: 15px; margin-right: .4rem; vertical-align: -2px; flex-shrink: 0; }

/* ---------- Review buttons (Guest Directory) ---------- */
.review-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 1.9rem; }
.review-buttons__link { display: inline-block; border-radius: var(--radius-md); transition: transform .18s ease, box-shadow .18s ease; }
.review-buttons__link:hover, .review-buttons__link:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-buttons__btn { display: block; width: 260px; max-width: 100%; height: auto; border-radius: var(--radius-md); }
/* ---------- Review buttons: surfboard badge variant ----------
   For the Social Surfboard Icon Set review badges (review-surfboard-*.png,
   transparent board shapes): no rounded box, drop-shadow on hover instead
   of a rectangular box-shadow. Guest Guide uses it; Contact's stacked
   compliment prompt (.review-buttons--stack) carries the same rules. */
.review-buttons--boards .review-buttons__btn { width: 187px; border-radius: 0; }
.review-buttons--boards .review-buttons__link { border-radius: 0; }
.review-buttons--boards .review-buttons__link:hover, .review-buttons--boards .review-buttons__link:focus-visible { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(15,74,80,0.22)); }

/* ---------- Guide hub: audience wayfinding tiles (Guest Guide) ----------
   Added for the Guest Guide page ("who are you visiting us as?"): one
   dominant tile for Guests (the majority of traffic), a lighter secondary
   row for Owners / Investors / Residents. Actions marked data-dev-link are
   placeholders pending real URLs; actions marked data-form-context route
   into a single adaptable form rather than one form per audience — see
   Guide-Hub/README.md and shared-behaviour.md. */
.guide-hub { margin-top: 2.6rem; display: flex; flex-direction: column; gap: 1.6rem; }
.guide-tile--guest {
  background: linear-gradient(120deg, var(--deep-teal), var(--lagoon));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.guide-tile__head { display: flex; align-items: flex-start; gap: .9rem; }
.guide-tile__head svg { color: var(--turquoise); margin-top: .2rem; }
.guide-tile--guest h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.guide-tile--guest .guide-tile__head p { color: rgba(255,255,255,0.8); margin-top: .3rem; max-width: 56ch; }
.guide-actions { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 640px) { .guide-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .guide-actions--guest { grid-template-columns: repeat(4, 1fr); } }
.guide-action {
  display: flex; flex-direction: column; gap: .5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  transition: background .2s ease, transform .2s ease;
}
.guide-action:hover, .guide-action:focus-visible { background: rgba(255,255,255,0.2); transform: translateY(-3px); }
.guide-action__icon { width: 24px; height: 24px; flex-shrink: 0; }
.guide-action__label { font-weight: 700; font-size: .95rem; }
.guide-action__meta { font-size: .78rem; color: rgba(255,255,255,0.7); }
.guide-secondary { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .guide-secondary { grid-template-columns: repeat(3, 1fr); } }
.guide-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .3rem;
}
.guide-tile__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--sea-foam); display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.guide-tile__icon svg { width: 20px; height: 20px; color: var(--lagoon); }
.guide-tile h3 { color: var(--deep-teal); font-size: 1.1rem; font-family: var(--font-display); font-weight: 400; }
.guide-tile > p { font-size: .86rem; color: var(--ink-soft); margin-bottom: .5rem; }
.guide-tile .guide-action { background: var(--sand); border: 1px solid var(--line); color: var(--ink); margin-top: .6rem; }
.guide-tile .guide-action:hover, .guide-tile .guide-action:focus-visible { background: var(--sea-foam); transform: translateY(-2px); }
.guide-tile .guide-action__meta { color: var(--ink-soft); }
.dev-note-inline { font-weight: 400; opacity: .75; }

/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 2.4rem; display: flex; flex-direction: column; gap: .9rem; max-width: 860px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.faq-item__q {
  width: 100%; text-align: left; background: none; border: 0; padding: 1.15rem 1.4rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--deep-teal); font-size: .98rem;
}
.faq-item__q:hover { background: var(--sea-foam); }
.faq-item__icon { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--lagoon); border-radius: 2px; transition: transform .25s ease; }
.faq-item__icon::before { width: 14px; height: 2.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item__icon::after { width: 2.5px; height: 14px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item__a-inner { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-size: .92rem; max-width: 68ch; }

/* ---------- Experiences accordion (rows with thumb + expandable panel) ---------- */
.exp-accordion { display: flex; flex-direction: column; gap: .9rem; }
.exp-row { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); }
.exp-row__toggle {
  width: 100%; display: flex; align-items: center; gap: 1.1rem; text-align: left;
  background: none; border: 0; padding: .9rem 1.3rem; cursor: pointer; font: inherit; color: inherit;
}
.exp-row__toggle:hover, .exp-row__toggle:focus-visible { background: var(--sea-foam); }
.exp-row__media { flex-shrink: 0; width: 68px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; }
.exp-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.exp-row__title { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--deep-teal); letter-spacing: .01em; }
.exp-row__blurb { font-size: .88rem; color: var(--ink-soft); }
.exp-row__icon { width: 26px; height: 26px; flex-shrink: 0; position: relative; }
.exp-row__icon::before, .exp-row__icon::after { content: ""; position: absolute; background: var(--lagoon); border-radius: 2px; transition: transform .25s ease; }
.exp-row__icon::before { width: 16px; height: 2.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.exp-row__icon::after { width: 2.5px; height: 16px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.exp-row__toggle[aria-expanded="true"] .exp-row__icon::after { transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.exp-panel[hidden] { display: none; }
.exp-panel__inner { padding: .2rem 1.3rem 1.6rem; border-top: 1px solid var(--line); padding-top: 1.3rem; margin: 0 1.3rem 0; }
.exp-panel__inner .lede { max-width: 62ch; }
.exp-panel__inner ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.exp-panel__inner li { display: flex; gap: .6rem; font-size: .93rem; color: var(--ink-soft); align-items: flex-start; }
.exp-panel__inner li svg { width: 18px; height: 18px; color: var(--turquoise); flex-shrink: 0; margin-top: 3px; }

/* ---------- Provider-group carousel (placeholder photography) ---------- */
.provider-carousel { margin-top: 1.4rem; }
.provider-carousel__viewport { position: relative; aspect-ratio: 16/7; border-radius: var(--radius-md); overflow: hidden; background: var(--sea-foam); }
.provider-carousel__group { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: flex; align-items: flex-end; }
.provider-carousel__group.is-active { opacity: 1; }
.provider-carousel__group img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.provider-carousel__label {
  position: relative; z-index: 1; margin: 0; padding: .7rem 1rem; width: 100%; color: var(--white);
  font-size: .82rem; font-weight: 600; background: linear-gradient(0deg, rgba(15,74,80,0.82), rgba(15,74,80,0));
}
.provider-carousel__label .dev-note-inline { font-weight: 400; font-size: .72rem; opacity: .8; text-transform: none; letter-spacing: normal; }
.provider-carousel__dots { display: flex; gap: .45rem; justify-content: center; margin-top: .7rem; }
.provider-carousel__dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.provider-carousel__dots button[aria-current="true"] { background: var(--turquoise); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--deep-teal), var(--lagoon)); color: var(--white); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; }
.cta-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 30ch; }
.cta-band p { color: rgba(255,255,255,0.8); margin-top: .5rem; }
.cta-band__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* =========================================================
   Footer (every page)
   ========================================================= */
.site-footer { background: var(--deep-teal); color: rgba(255,255,255,0.85); }
.footer-top { padding-block: clamp(2.8rem, 6vw, 4rem); }
.footer-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr .9fr; gap: 2rem; } }
.footer-brand .brand__word { color: var(--white); }
.footer-brand .brand__word .line2 { color: rgba(255,255,255,0.6); }
.footer-brand { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.1rem; }
.footer-brand .brand__word .line3 {
  display: block; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-body); font-size: .62rem; font-weight: 600; text-transform: uppercase;
  color: var(--turquoise); white-space: nowrap; letter-spacing: -1.4px;
}
.footer-col h4 { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise); margin-bottom: 1rem; }
.footer-col p, .footer-col address { font-style: normal; font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,0.78); }
.footer-col a { display: block; font-size: .9rem; padding: .15rem 0; color: rgba(255,255,255,0.78); }
.footer-col a:hover { color: var(--turquoise); }
.footer-map { border-radius: var(--radius-md); overflow: hidden; margin-top: 1rem; border: 1px solid rgba(255,255,255,0.14); }
.footer-map iframe { width: 100%; height: 160px; border: 0; display: block; filter: grayscale(.15); }
.footer-socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.footer-socials a:hover { background: var(--turquoise); border-color: var(--turquoise); }
.footer-socials svg { width: 16px; height: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-block: 1.4rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between; font-size: .78rem; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.footer-legal-links a:hover { color: var(--turquoise); }
.footer-copy { color: rgba(255,255,255,0.6); }

/* =========================================================
   Cookie consent banner
   ========================================================= */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 620px; margin-inline: auto;
  background: var(--white); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  border: 1px solid var(--line); padding: 1.3rem 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center;
  justify-content: space-between; transform: translateY(140%); transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: .84rem; color: var(--ink-soft); max-width: 46ch; }
.cookie-banner p a { text-decoration: underline; color: var(--lagoon); }
.cookie-banner__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: .65rem 1.2rem; font-size: .72rem; }
.cookie-banner .btn-text { background: none; border: 0; color: var(--ink-soft); font-size: .78rem; text-decoration: underline; padding: .4rem; }

/* ---------- Placeholder note tag (dev/shell only — strip before launch) ---------- */
.dev-note {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lagoon);
  background: var(--sea-foam); border: 1px dashed var(--turquoise); border-radius: 999px;
  padding: .3rem .7rem; display: inline-block; margin-top: .5rem;
}

/* ---------- Preview-only fallback (Artifact mockups only — the real site
   keeps the live Google Maps iframe via .footer-map iframe above; this
   static placeholder exists only because arbitrary iframe hosts aren't
   available inside a published Artifact preview) ---------- */
.footer-map--static { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; height: 160px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); text-align: center; }
.footer-map--static .footer-map__pin { font-size: 1.4rem; }
.footer-map--static p { font-size: .74rem; color: rgba(255,255,255,0.55); }
.footer-map--static span { font-size: .68rem; }

/* ---------- Room card with a real photo (Rooms page) ----------
   .room-card__media was built for an icon placeholder; a photo fills it
   edge to edge and the tag stays above it. Cards with no photo yet keep
   the icon fallback. */
.room-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-card__media .room-card__tag { z-index: 1; }
/* Collection overview: stay-card titles jump to their collection band */
.stay-card__body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Collection band: spacing for a CTA placed under a tier-head */
.tier-band__cta { margin-top: 1.4rem; }
/* Collection bands hold 3-4 apartments: size columns to the set so a short
   row never leaves empty tracks (the default room-grid is tuned for 5). */
@media (min-width: 900px) { .room-grid--fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* ---------- Contact form: guest counts + multi-choice room dropdown ----------
   Added for the Contact page's "Your stay" group. .field-label gives a
   group heading the same look as a field <label>; .guest-counts fits three
   inline-labelled number boxes (Adults / Children / Infants) into one field
   column; .multi-select is a <details> dropdown of checkboxes ("Preferred
   room/s") — works without JS, enhanced in shared-behaviour.md. */
.field-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--deep-teal); text-transform: uppercase; }
.guest-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.field .guest-count { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.field .guest-count input { width: 100%; min-width: 2.6rem; padding: .8rem .35rem; text-align: center; }
.field [hidden], .field[hidden] { display: none; }
.multi-select { position: relative; }
.multi-select__summary {
  list-style: none; cursor: pointer; position: relative;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 2.6rem .8rem .95rem;
  background: var(--white); color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease;
}
.multi-select__summary::-webkit-details-marker { display: none; }
.multi-select__summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--deep-teal); border-bottom: 2px solid var(--deep-teal);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.multi-select[open] .multi-select__summary::after { transform: translateY(-30%) rotate(-135deg); }
.multi-select[open] .multi-select__summary, .multi-select__summary:focus-visible { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(42,191,176,0.16); outline: none; }
.multi-select__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: .4rem; max-height: 320px; overflow-y: auto;
}
.multi-select__heading { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lagoon); padding: .45rem .6rem .2rem; }
.field .multi-select__option {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 6px; cursor: pointer;
  font-size: .92rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.multi-select__option:hover { background: var(--sea-foam); }
.field .multi-select__option input { width: 18px; height: 18px; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--lagoon); flex-shrink: 0; }
.multi-select__option small { color: var(--ink-soft); font-size: .8rem; }

/* ---------- Contact form: topic sub-categories + "Please review us" ----------
   .form-aside is the small italic note shown with the Feedback sub-category.
   .message-row narrows the Message box and places .review-prompt (Google /
   Facebook review buttons) beside it when the feedback is a compliment;
   it stacks on narrow screens. */
.form-aside { font-size: .84rem; font-style: italic; color: var(--ink-soft); line-height: 1.55; margin-bottom: .55rem; max-width: 62ch; }
.message-row.has-review { display: grid; gap: 0 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .message-row.has-review { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } }
.review-prompt { margin-bottom: 1.15rem; }
.review-prompt[hidden] { display: none; }
.review-prompt__title { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.2; color: var(--deep-teal); }
.review-buttons--stack { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .55rem; margin-top: .65rem; }
.review-buttons--stack .review-buttons__btn { width: 187px; border-radius: 0; }
.review-buttons--stack .review-buttons__link { border-radius: 0; }
.review-buttons--stack .review-buttons__link:hover, .review-buttons--stack .review-buttons__link:focus-visible { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(15,74,80,0.22)); }

/* ---------- Form send error (shared form handler) ---------- */
.form-error {
  display: none; background: #fdf1ef; border: 1px solid #e3a99c; color: #8a2c1c;
  padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; margin-top: .9rem;
}
.form-error.is-visible { display: block; }
button[type="submit"][disabled] { opacity: .65; cursor: progress; transform: none; }

/* ---------- Hero reviews: rotating guest quotes inset in a page-hero ----------
   Added for the Location page. A frosted inset that sits bottom-right of a
   .page-hero on wide screens (stacks under the hero copy on narrow ones) and
   crossfades through short guest quotes. Every item is stacked in one grid
   cell so the box keeps the height of its tallest quote and never jumps.
   Without JS the first quote shows on its own. Behaviour (auto-rotate, dots,
   pause, reduced-motion) lives in shared-behaviour.md, "Hero reviews". */
.page-hero__layout { display: grid; gap: 2.2rem; }
@media (min-width: 980px) { .page-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); align-items: end; gap: 3rem; } }
.hero-reviews {
  position: relative; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-md); padding: 1.3rem 1.4rem 1.05rem; color: var(--white);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-reviews .hero-reviews__label { margin: 0; max-width: none; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--turquoise); }
.hero-reviews__track { display: grid; margin-top: .75rem; }
.hero-reviews blockquote { margin: 0; }
.hero-reviews__item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; }
.hero-reviews__item.is-active { opacity: 1; visibility: visible; }
.hero-reviews .hero-reviews__quote { margin: 0; max-width: none; font-size: .98rem; line-height: 1.5; color: var(--white); }
.hero-reviews .hero-reviews__translation { margin-top: .45rem; max-width: none; font-size: .82rem; font-style: italic; color: rgba(255,255,255,0.78); }
.hero-reviews__cite { display: block; margin-top: .75rem; font-size: .76rem; font-style: normal; color: rgba(255,255,255,0.75); }
.hero-reviews__cite strong { color: var(--white); font-weight: 700; }
.hero-reviews__score { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(42,191,176,0.2); color: var(--white); font-weight: 600; }
.hero-reviews__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .95rem; }
.hero-reviews__dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-reviews__dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,0.35); cursor: pointer; }
.hero-reviews__dots button[aria-current="true"] { background: var(--turquoise); width: 18px; }
.hero-reviews__pause { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: none; color: var(--white); font-size: .7rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.hero-reviews__pause:hover { background: rgba(255,255,255,0.14); }
.hero-reviews__controls[hidden] { display: none; }

/* ---------- Hero reviews: optional summary line (About) ----------
   One short, factual aggregate under the label, e.g. "Staff rated 10/10 in
   all 19 Booking.com reviews since Aug 2026". Keep it accurate: update it
   with each new review export. */
.hero-reviews .hero-reviews__summary { margin: .35rem 0 0; max-width: none; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
.hero-reviews__summary strong { color: var(--white); font-weight: 700; }
.hero-reviews .hero-reviews__caveat { display: block; margin-top: .15rem; font-size: .64rem; font-style: italic; letter-spacing: .02em; color: rgba(255,255,255,0.68); }

/* ---------- Page hero: banner variant (Offers) ----------
   Reuses .page-hero--photo + .page-hero__layout + .hero-reviews as a
   mid-page photo banner, so the heading is an h2, not the page h1. */
.page-hero--banner h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; margin-top: .6rem; max-width: 16ch; }
.page-hero--banner .btn { margin-top: 1.6rem; }
.page-hero--banner .page-hero__media img { object-position: center 40%; }
.page-hero--banner .page-hero__scrim { background: linear-gradient(100deg, rgba(15,74,80,0.9) 0%, rgba(15,74,80,0.7) 50%, rgba(15,74,80,0.85) 100%); }
.page-hero--banner .hero-reviews { background: rgba(15,74,80,0.6); }


/* ---------- Header wordmark: tagline line (added 2026-10-21) ----------
   Phill chose "NORTHCLIFFE BEACH" + "The space to make your holiday." for
   the header wordmark (matching the footer). Small enough to sit in the
   88px header; hidden on very narrow phones where it would crowd the
   Book Now button. */
.site-header .brand__word .line3 {
  display: block; margin-top: 3px; font-family: var(--font-body); font-size: .55rem;
  font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap;
}
@media (max-width: 420px) { .site-header .brand__word .line3 { display: none; } }

/* =========================================================
   Accessibility fixes (QA pass 2026-10-21) — WCAG 2.1 AA contrast
   and focus. Brand colours unchanged; only text tints adjusted where
   Turquoise text sat on light backgrounds (~2.1:1) or small text sat
   just under 4.5:1 on Deep Teal / Turquoise.
   ========================================================= */
:root { --turquoise-text: #45CFC1; /* Turquoise tint for small text on Deep Teal: 5.2:1 */
        --on-turquoise: #0B3B40;   /* text on Turquoise buttons: 5.4:1 */ }

/* Buttons: deep-teal text on turquoise was 4.3:1 */
.btn-primary { color: var(--on-turquoise); }

/* Eyebrows: Lagoon text on light sections (5.6–6.2:1); the short
   turquoise rule before them is decorative and stays Turquoise. */
.eyebrow { color: var(--lagoon); }
.eyebrow::before { background: var(--turquoise); }
.section--teal .eyebrow, .page-hero .eyebrow, .hero .eyebrow, .hero__eyebrow,
.cta-band .eyebrow, .guide-tile--guest .eyebrow, .site-footer .eyebrow { color: var(--turquoise-text); }
.section--lagoon .eyebrow { color: var(--sea-foam); }
.section--turquoise .eyebrow { color: var(--deep-teal); }
.info-panel .eyebrow { color: var(--lagoon); }

/* Other small turquoise text on Deep Teal */
.footer-col h2, .footer-col h4, .footer-brand .brand__word .line3,
.contact-card__group h4, .team-card__role, .hero-reviews .hero-reviews__label,
.nav-panel__links a:hover, .nav-panel__links a[aria-current="page"],
.section--teal .tier-band__meta, .stay-card--horizon .stay-card__meta { color: var(--turquoise-text); }
.team-card__role { color: var(--lagoon); }

/* Footer column titles are now h2 (were h4 — heading-order skip); keep the same look */
.footer-col h2 { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; font-family: var(--font-body); }

/* Visible focus for embedded maps and native date pickers */
iframe:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.field input[type="date"]:focus-within { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(42,191,176,0.16); }

/* Turquoise collection: all text uses the darker on-turquoise ink (was
   Sea Foam body copy at ~1.9:1 and Deep Teal headings at 4.3:1) */
.stay-card--turquoise, .stay-card--turquoise h3, .stay-card--turquoise h3 a,
.stay-card--turquoise .stay-card__body p, .stay-card--turquoise .stay-card__meta,
.section--turquoise, .section--turquoise h2.section-title, .section--turquoise .lede,
.section--turquoise .tier-band__meta, .section--turquoise .tier-band__descriptors,
.section--turquoise .eyebrow { color: var(--on-turquoise); }
.section--turquoise .eyebrow::before { background: var(--on-turquoise); }
.section--lagoon .tier-band__descriptors { color: rgba(255,255,255,0.88); }

/* ---------- 2026-10-29 review additions ---------- */
.contact-card__address { display: flex; gap: .6rem; align-items: flex-start; }
.contact-card__address > svg { width: 15px; height: 15px; flex-shrink: 0; margin: .6rem 0 0; }
.contact-card__address p { margin-bottom: .4rem; }
.contact-card__address a { display: inline-block; }
.offer-card__promo { font-size: .88rem; font-weight: 600; color: var(--deep-teal); }
.offer-card__promo a { color: var(--lagoon); text-decoration: underline; text-underline-offset: 2px; }
.payment-plan__note { font-size: .78rem; line-height: 1.5; color: var(--ink-soft); margin-top: .9rem; }
.hero__strip { flex-wrap: wrap; }
.card-grid--exp .room-card__media { aspect-ratio: 16/10; }
@media (min-width: 980px) { .card-grid--exp { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .card-grid--exp { grid-template-columns: repeat(4, 1fr); } }
.room-card__actions { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .4rem; }
.room-card__actions .room-card__link { margin-top: 0; }
.room-card__link--book { color: var(--deep-teal); }
.photo-credit { margin-top: .5rem; font-size: .75rem; font-style: italic; color: #7a8587; }
.guide-action--pending { cursor: default; opacity: .7; }
.guide-action--pending:hover { transform: none; }