/* ═══════════════════════════════════════════════════════════════
   Solea Hotels & Resorts — concept redesign
   The page runs the "tide line": shallow (kids' pool) → lagoon
   (main pools) → tide (beach) → reef (Anda) → deep (open water) →
   sky (Azure's rooftop, breaking bright at the very end).
   Motif: the caustic ripple — a pure CSS/SVG scalloped rule used as
   divider, photo frame and once behind the booking CTA.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* the tide line, top of the page to bottom */
  --shallow: #EAFBF5;   /* the kids' 2ft pool */
  --lagoon:  #6FDCCB;   /* the main pools */
  --tide:    #16847F;   /* the beach at the waterline */
  --reef:    #0E5960;   /* Anda — turtles, dolphins, deeper colour */
  --deep:    #0A2740;   /* open water */
  --sky:     #EAF5FF;   /* Azure's rooftop — the bright break */

  /* ink & surface */
  --ink:      #0B2530;
  --ink-soft: #48666D;
  --foam:     #F5FBFA;
  --foam-dim: rgba(245, 251, 250, .72);

  /* two accents: warm sun for calls to action, bright current for links */
  --sun:     #F0A63C;
  --current: #1FB8AE;

  --edge:    rgba(11, 37, 48, .14);
  --edge-lt: rgba(245, 251, 250, .2);

  /* card surfaces layered on top of the bands — named here, never hard-coded
     at the call site, same rule as the six tide-line tokens above */
  --card:        #FFFFFF;   /* .prop / .roomtype, on the light bands */
  --venue-tide:  #0F726E;   /* .venue card on the tide band */
  --venue-reef:  #0B4A50;   /* .venue card on the reef band */
  --venue-deep:  #0D3355;   /* .venue card on the deep band */
  --venue-photo: #06222A;   /* .venue__frame letterboxing behind photos */
  --foot-bg:     #071722;   /* footer, darker than --deep on purpose */

  --f-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--shallow);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  width: min(var(--wrap), 100% - (var(--gut) * 2));
  margin-inline: auto;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sun); color: #1a1204; padding: .75rem 1.25rem;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─────────────────  type  ───────────────── */

.display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  font-variation-settings: 'opsz' 90, 'wdth' 100;
  text-wrap: balance;
}
.h2--light { color: var(--foam); }

.subhead {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  font-variation-settings: 'opsz' 48, 'wdth' 100;
}

.copy { margin: 0 0 1.1rem; max-width: 56ch; color: var(--ink-soft); }
.copy--wide { max-width: 68ch; }
.copy--light { color: rgba(245, 251, 250, .78); }

.kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tide);
  margin: 0 0 .85rem;
}
.kicker--light { color: var(--sun); }

.link {
  color: var(--current);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

/* ─────────────────  buttons  ───────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.6rem;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--wave { background: var(--sun); color: #1a1204; }
.btn--wave:hover { background: #d88f26; }
.btn--line { border-color: var(--edge-lt); color: var(--foam); background: none; }
.btn--line:hover { background: rgba(245, 251, 250, .12); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn--block { display: block; width: 100%; margin-top: 1.4rem; text-align: center; }

/* ─────────────────  concept ribbon  ───────────────── */

.concept {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #0B2530;
  color: rgba(245, 251, 250, .85);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .45rem 1rem;
  text-align: center;
}
.concept__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun); flex: none;
}
/* The full wording wraps to two lines on a phone, and the ribbon is fixed —
   two lines of it plus the nav ate a third of a 320px screen before any of the
   page showed. The short form keeps both claims the disclaimer has to make,
   unofficial and unaffiliated, on one line. The footer carries the full text. */
.concept__short { display: none; }

/* ─────────────────  nav  ───────────────── */

.nav {
  position: fixed; inset: var(--ribbon-h, 28px) 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1rem var(--gut);
  transition: background-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck {
  background: rgba(234, 251, 245, .93);
  backdrop-filter: blur(14px);
  padding-block: .65rem;
  box-shadow: 0 1px 0 var(--edge);
}

.nav__brand {
  text-decoration: none; line-height: 1;
  color: var(--foam);
  transition: color .35s var(--ease);
}
.nav.is-stuck .nav__brand { color: var(--ink); }
.nav__brand-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 40, 'wdth' 100;
}
.nav__brand-sub {
  display: block;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .72; margin-top: .18rem;
}

/* rising water level, the tidemark */
.tidemark {
  position: relative;
  width: 5px; height: 26px;
  border-radius: 3px;
  background: rgba(245, 251, 250, .25);
  overflow: hidden;
  flex: none;
}
.nav.is-stuck .tidemark { background: rgba(11, 37, 48, .15); }
.tidemark__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--tide-pct, 0) * 1%);
  background: var(--current);
  transition: height .2s linear;
}

.nav__links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-left: auto; margin-right: 1.2rem; }
.nav__links a {
  text-decoration: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(245, 251, 250, .88);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .25s var(--ease);
}
.nav.is-stuck .nav__links a { color: var(--ink-soft); }
.nav__links a:hover { border-bottom-color: currentColor; }

/* ─────────────────  hero  ───────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--ribbon-h, 28px) + 7rem) var(--gut) clamp(3rem, 7vh, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 39, 64, .9) 0%, rgba(10, 39, 64, .45) 44%, rgba(10, 39, 64, .1) 74%),
    linear-gradient(to right, rgba(10, 39, 64, .5), transparent 60%);
}

.hero__body { position: relative; max-width: 46rem; }

.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 1.1rem + 6.8vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--foam);
  margin: 0 0 1.3rem;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
}
.hero__line { display: block; }
.hero__line--warm { color: var(--sun); }

.hero__lede {
  color: rgba(245, 251, 250, .85);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  max-width: 42rem;
  margin: 0 0 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.4rem; }

/* the hero device: quick-jump to each resort */
.picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge-lt);
  border: 1px solid var(--edge-lt);
  position: relative;
}
.picker__item {
  display: flex; flex-direction: column; gap: .25rem;
  background: rgba(10, 39, 64, .55);
  padding: .85rem 1rem;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
.picker__item:hover { background: rgba(10, 39, 64, .8); }
.picker__name {
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  color: var(--foam);
  font-variation-settings: 'opsz' 24, 'wdth' 100;
}
.picker__loc {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245, 251, 250, .58);
}

/* ─────────────────  the caustic ripple  ─────────────────
   A scalloped rule built from two offset repeating radial
   gradients — pure CSS, no image assets, no external requests. */

.ripple-rule {
  --rc: var(--tide);
  height: 16px;
  background-image:
    radial-gradient(circle at 10px -6px, transparent 11px, var(--rc) 12px),
    radial-gradient(circle at 10px 22px, transparent 11px, var(--rc) 12px);
  background-position: 0 0, 20px 0;
  background-size: 20px 16px;
  background-repeat: repeat-x;
  animation: rippleDrift 5.5s linear infinite;
}
@keyframes rippleDrift {
  from { background-position: 0 0, 20px 0; }
  to   { background-position: 40px 0, 60px 0; }
}

.ripple-rule--frame {
  --rc: var(--foam);
  height: 12px;
  opacity: .9;
}
.ripple-rule--panel {
  --rc: var(--sun);
  height: 100%;
  width: 100%;
  background-size: 26px 20px;
}

/* ─────────────────  bands  ───────────────── */

:where(.band, .hero, #main)[id] {
  scroll-margin-top: calc(var(--ribbon-h, 28px) + var(--nav-h, 5.5rem) + 1rem);
}

.band { padding-block: clamp(4.5rem, 9vw, 8rem); }
.band--shallow { background: var(--shallow); }
.band--lagoon  { background: var(--lagoon); }
.band--tide    { background: var(--tide); }
.band--reef    { background: var(--reef); }
.band--deep    { background: var(--deep); }
.band--sky     { background: var(--sky); }

.section-head { max-width: 62rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* dark bands need light ink for the default copy tone */
.band--tide .kicker, .band--reef .kicker, .band--deep .kicker { color: var(--sun); }
.band--tide .subhead, .band--reef .subhead, .band--deep .subhead { color: var(--foam); }

/* ─────────────────  properties (#stay)  ───────────────── */

.props {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.prop:first-child { grid-column: 1 / -1; }

.prop {
  background: var(--card);
  border: 1px solid var(--edge);
}
.prop__frame { position: relative; overflow: hidden; }
.prop__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.prop__frame .ripple-rule { position: absolute; left: 0; right: 0; bottom: -1px; }

.prop__body { padding: 1.5rem 1.6rem 1.8rem; }
.prop__addr {
  font-style: normal;
  margin: 0 0 .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.prop__gallery { display: flex; gap: .6rem; margin: 0 0 1rem; }
.prop__gallery img { width: 50%; aspect-ratio: 16 / 10; object-fit: cover; height: auto; }
.prop__small { font-size: .78rem; color: var(--ink-soft); border-left: 2px solid var(--sun); padding-left: .8rem; }
.prop__cta { margin-top: .6rem; }

.attractions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  margin: 0 0 1.2rem;
}
.attraction { margin: 0; }
.attraction img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; height: auto; }
.attraction figcaption {
  margin-top: .35rem; font-size: .72rem; text-align: center; color: var(--ink-soft);
}

/* small venue-style facilities list nested inside the Reef card */
.venues--inline { grid-template-columns: repeat(2, 1fr); margin: 1rem 0; }
.venues--inline .venue { padding: .8rem .9rem; background: var(--shallow); }

/* ─────────────────  rooms (#rooms)  ───────────────── */

.roomgroup { margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.roomgroup__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.roomgroup__mark { width: 64px; height: auto; }

.roomtypes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1.2rem;
}
.roomtype { background: var(--card); border: 1px solid var(--edge); padding-bottom: 1rem; }
.roomtype--text { padding: 1.2rem 1.1rem; }
.roomtype__frame { overflow: hidden; }
.roomtype__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.roomtype__name {
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  margin: .9rem 1.1rem .2rem;
  font-variation-settings: 'opsz' 32, 'wdth' 100;
}
.roomtype--text .roomtype__name { margin: 0 0 .3rem; }
.roomtype__meta {
  margin: 0 1.1rem; font-size: .8rem; color: var(--ink-soft);
}
.roomtype--text .roomtype__meta { margin: 0; }

.amenities { margin-top: clamp(2.4rem, 4vw, 3.2rem); }
.amenities__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .6rem 1.2rem;
}
.amenities__list li { font-size: .88rem; color: var(--ink-soft); }
.amenities__list li span { display: block; font-size: .74rem; color: var(--tide); }

/* ─────────────────  venues (dining / water / relax)  ───────────────── */

.venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--edge-lt); }

.venues--water { grid-template-columns: repeat(4, 1fr); border: 1px solid var(--edge-lt); }
.venues--dine  { grid-template-columns: repeat(3, 1fr); border: 1px solid var(--edge-lt); }
.venues--relax { grid-template-columns: repeat(2, 1fr); border: 1px solid var(--edge-lt); }

.venue {
  position: relative;
  padding: 1.2rem 1.2rem 1.4rem;
  background: var(--tide);
  transition: background-color .3s var(--ease);
}
.band--tide .venue { background: var(--venue-tide); }
.band--reef .venue { background: var(--venue-reef); }
.band--deep .venue { background: var(--venue-deep); }
.venue:hover { filter: brightness(1.08); }

.venue__frame { overflow: hidden; margin-bottom: .9rem; background: var(--venue-photo); }
.venue__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; height: auto; }

.venue__logo { height: 34px; width: auto; margin-bottom: .6rem; filter: brightness(0) invert(1); opacity: .92; }

.venue__name {
  font-family: var(--f-display); font-weight: 600; font-size: 1.1rem;
  color: var(--foam);
  margin: 0 0 .3rem;
  font-variation-settings: 'opsz' 32, 'wdth' 100;
}
.venue__type { font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: rgba(245, 251, 250, .6); }
.venue__note { margin: 0 0 .4rem; font-size: .84rem; color: rgba(245, 251, 250, .68); }
.venue__hours {
  margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sun); font-weight: 700;
}
.venue__hours--closed { color: rgba(245, 251, 250, .5); }
.venue--closed { opacity: .72; }

/* the live open/closed mark — JS fills this span with real text (e.g. "Open
   now"), so the state is carried by the words themselves, not by colour;
   the dot and pill below are decoration on top of that text, not a
   replacement for it. */
.venue__state {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  line-height: 1;
}
.venue__state:empty { display: none; }
.venue__state::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.venue.is-open .venue__state {
  color: var(--venue-photo);
  background: var(--current);
  padding: .3rem .6rem .3rem .5rem;
  border-radius: 999px;
}

.dine-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 2rem; }
.dine-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; height: auto; }

.deep-extra { margin: 1.6rem 0 0; }
.deep-extra img { width: 100%; max-width: 30rem; aspect-ratio: 3 / 2; object-fit: cover; height: auto; }

/* ─────────────────  family  ───────────────── */

.family { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.family img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }

/* ─────────────────  events  ───────────────── */

.events { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 2rem; }
.events--use { grid-template-columns: repeat(3, 1fr); }
.event { margin: 0; }
.event img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.event__name {
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  color: var(--foam);
  margin: .7rem 0 .2rem;
  font-variation-settings: 'opsz' 24, 'wdth' 100;
}
.event__note { margin: 0; font-size: .8rem; color: rgba(245, 251, 250, .68); }

.funcrooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1rem; }
.funcrooms__group .subhead { color: var(--foam); font-size: 1.05rem; }
.funcrooms__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .7rem; height: auto; }
.funcrooms__group ul { list-style: none; margin: 0; padding: 0; }
.funcrooms__group li { font-size: .84rem; color: rgba(245, 251, 250, .74); margin-bottom: .3rem; }
.funcroom__name { font-weight: 700; color: var(--foam); }

/* ─────────────────  plan your stay (#plan)  ───────────────── */

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.plan__text { max-width: 42rem; }
.plan__contact { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .6rem; }
.plan__contact li { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.plan__k {
  flex: none; min-width: 7.5rem;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.plan__v { font-family: var(--f-display); font-size: 1.05rem; }

.plan__addrs { display: grid; gap: .9rem; margin-bottom: 1.6rem; }
.plan__addrs address { font-style: normal; font-size: .88rem; color: var(--ink-soft); }
.plan__addrs .plan__k { display: block; margin-bottom: .15rem; }

.plan__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.plan__fine { margin: 1.2rem 0 0; font-size: .78rem; color: var(--ink-soft); }

.plan .btn--line { color: var(--ink); border-color: var(--edge); }
.plan .btn--line:hover { background: rgba(11, 37, 48, .06); }

.cta-panel {
  aspect-ratio: 3 / 4;
  background: var(--deep);
  border: 12px solid var(--foam);
  box-shadow: 0 30px 60px -40px rgba(10, 39, 64, .5);
  overflow: hidden;
  display: flex; align-items: flex-end;
}

/* ─────────────────  footer  ───────────────── */

.site-foot { background: var(--foot-bg); color: rgba(245, 251, 250, .7); padding-block: 3.2rem 2rem; }
.site-foot__inner {
  display: flex; flex-wrap: wrap; gap: 2.2rem; justify-content: space-between;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(240, 166, 60, .14);
}
.site-foot__brand { display: flex; align-items: center; gap: 1rem; }
.site-foot__logo { width: 120px; height: auto; }
.site-foot__addr { margin: 0; font-size: .82rem; max-width: 26ch; }
.site-foot__links, .site-foot__social { display: grid; gap: .5rem; align-content: start; }
.site-foot__links a, .site-foot__social a { text-decoration: none; font-size: .85rem; }
.site-foot__links a:hover, .site-foot__social a:hover { color: var(--sun); }
.foot__fine {
  margin: 1.5rem 0 0;
  font-size: .72rem;
  color: rgba(245, 251, 250, .42);
  max-width: 68ch;
}

/* ─────────────────  booking sheet (#booking)  ───────────────── */

.flow {
  width: min(34rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--deep);
  color: var(--foam);
}
.flow::backdrop { background: rgba(6, 20, 26, .72); backdrop-filter: blur(3px); }
.flow__form { display: flex; flex-direction: column; height: 100%; }

.flow__head {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--edge-lt);
  flex: none;
}
.flow__back, .flow__close {
  background: none; border: 0; color: var(--foam);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  padding: .4rem .5rem; border-radius: 2px;
}
.flow__back:hover, .flow__close:hover { color: var(--sun); }
.flow__back[hidden] { visibility: hidden; display: block; }
.flow__stayname {
  margin: 0 auto;
  font-family: var(--f-display); font-size: 1.02rem;
}

.flow__brand { padding: 1.5rem 1.5rem .3rem; text-align: center; flex: none; }
.flow__brand .kicker { color: var(--sun); margin-bottom: .4rem; }
.flow__brand .display { color: var(--foam); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.1rem); }

.flow__steps {
  list-style: none;
  display: flex; justify-content: center; gap: 1.3rem;
  margin: 1.1rem 0 0; padding: 0;
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700;
  color: rgba(245, 251, 250, .38);
}
.flow__steps li { position: relative; }
.flow__steps li + li::before {
  content: ''; position: absolute; left: -.8rem; top: 50%;
  width: .35rem; height: 1px; background: currentColor;
}
.flow__steps .is-done { color: var(--current); }
.flow__steps [aria-current] { color: var(--sun); }

.flow__body { flex: 1 1 auto; overflow-y: auto; padding: 1.3rem 1.5rem 2rem; }

.pane { display: none; }
.pane.is-on { display: block; }

.flow__lede { margin: 0 0 1rem; font-size: .9rem; color: rgba(245, 251, 250, .68); }
.flow__note { margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: rgba(245, 251, 250, .5); }
.flow__note:empty { margin: 0; }

.flow__card { border: 1px solid var(--edge-lt); background: rgba(255, 255, 255, .03); }
.flow__row { padding: 1rem 1.1rem; }
.flow__row + .flow__row { border-top: 1px solid var(--edge-lt); }

.flow__row--dates { display: flex; align-items: center; gap: 1rem; }
.field { flex: 1 1 0; display: block; min-width: 0; }
.field__k {
  display: block; margin-bottom: .3rem;
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(245, 251, 250, .5); font-weight: 700;
}
.field input {
  width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--edge-lt);
  color: var(--foam); font: inherit; font-family: var(--f-display); font-size: 1.03rem;
  padding: .2rem 0;
  color-scheme: dark;
}
.nights {
  flex: none; margin: 1rem 0 0;
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sun);
  border: 1px solid var(--edge-lt); border-radius: 999px;
  padding: .2rem .7rem;
}

.flow__row--who { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.qty { display: flex; align-items: center; gap: .5rem; }
.qty__k {
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(245, 251, 250, .5); font-weight: 700; margin-right: .2rem;
}
.qty button {
  width: 1.85rem; height: 1.85rem;
  background: none; border: 1px solid var(--edge-lt); border-radius: 50%;
  color: var(--foam); font: inherit; line-height: 1; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.qty button:hover { border-color: var(--sun); color: var(--sun); }
.qty output { font-family: var(--f-display); font-size: 1.1rem; min-width: 1.2rem; text-align: center; }

.stays { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.stays .roomtype--text,
.stays li {
  border: 1px solid var(--edge-lt);
  padding: 1rem 1.05rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.stays li:hover { border-color: var(--foam-dim); background: rgba(255, 255, 255, .03); }
.stays li.is-picked { border-color: var(--current); background: rgba(31, 184, 174, .1); }

.summary { margin: 0 0 1.3rem; border: 1px solid var(--edge-lt); }
.summary dt, .summary dd { margin: 0; }
.summary > div, .summary .srow {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 1.05rem;
  font-size: .88rem;
  border-top: 1px solid var(--edge-lt);
}
.summary > div:first-child, .summary .srow:first-child { border-top: 0; }
.summary dt, .summary .srow dt { color: rgba(245, 251, 250, .55); }

.guest { display: grid; gap: .85rem; margin-bottom: 1.1rem; }
.guest label { display: block; }
.guest span {
  display: block; margin-bottom: .3rem;
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(245, 251, 250, .5); font-weight: 700;
}
.guest input {
  width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--edge-lt);
  color: var(--foam); font: inherit; font-size: .96rem; padding: .3rem 0;
}
.guest input:focus { border-bottom-color: var(--sun); outline: none; }

.result {
  margin-top: 1.3rem;
  border: 1px solid var(--sun);
  border-top-width: 5px;
  padding: 1.05rem 1.15rem;
  background: rgba(240, 166, 60, .08);
}
.result__k {
  margin: 0 0 .5rem;
  font-size: .64rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sun); font-weight: 700;
}
.result__p { margin: 0 0 .75rem; font-size: .87rem; color: rgba(245, 251, 250, .8); }
.result__lines { margin: 0; font-family: var(--f-display); font-size: 1.02rem; line-height: 1.7; }
.result__lines .link { color: var(--current); }

/* ─────────────────  reveal  ───────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ─────────────────  responsive  ───────────────── */

@media (max-width: 1000px) {
  .props { grid-template-columns: 1fr; }
  .prop:first-child { grid-column: auto; }
  .venues--water { grid-template-columns: repeat(2, 1fr); }
  .venues--dine { grid-template-columns: repeat(2, 1fr); }
  .events { grid-template-columns: repeat(2, 1fr); }
  .events--use { grid-template-columns: repeat(2, 1fr); }
  .funcrooms { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr; }
  .cta-panel { max-width: 20rem; }
  .attractions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* The links used to be hidden outright below this width, which left a
     seventeen-screen page with no way to jump — you either scrolled the whole
     thing or gave up. They stay, as a scrolling chip row on a second line. */
  .nav { gap: .4rem .8rem; flex-wrap: wrap; padding-block: .45rem; }
  .nav__brand { margin-right: auto; }
  .nav__brand-name { font-size: 1.25rem; }
  .nav__brand-sub { font-size: .56rem; }
  .nav__cta { order: 2; padding: .5rem 1rem; font-size: .8rem; }
  .nav__links {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    margin: 0;
    gap: .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter, 1.1rem) * -1);
    padding-inline: var(--gutter, 1.1rem);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a {
    flex: none;
    padding: .3rem .7rem;
    border: 1px solid rgba(245, 251, 250, .3);
    border-radius: 999px;
    font-size: .76rem;
  }
  .nav.is-stuck .nav__links a { border-color: var(--edge); }
  .hero { min-height: 94svh; padding-top: 7rem; }
  .picker { grid-template-columns: 1fr 1fr; }
  .venues--relax { grid-template-columns: 1fr; }
  .family { grid-template-columns: 1fr; }
  .concept {
    font-size: .66rem; letter-spacing: .01em;
    padding: .35rem .8rem; gap: .45rem;
  }
  .concept__full { display: none; }
  .concept__short { display: inline; }

  /* A phone stacks every one of these sets into a single column, and the page
     turns into one long tower you scroll past rather than read. Below 720px the
     repeated sets become swipeable rails instead: the same content, laid along
     the axis the thumb is already on, with the next card peeking so it is
     obvious there is more. Each rail scrolls inside itself — the page body
     never scrolls sideways. */
  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 76%;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding: 0 var(--gutter, 1.1rem);
    padding-bottom: .8rem;
    margin-inline: calc(var(--gutter, 1.1rem) * -1);
    padding-inline: var(--gutter, 1.1rem);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; min-width: 0; }
  .rail:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

  .venues--water, .venues--dine { border: 0; background: none; gap: .9rem; }
  .venues--water > .venue, .venues--dine > .venue { border: 1px solid var(--edge-lt); }
  .attractions { grid-auto-columns: 42%; }
  .dine-gallery { grid-auto-columns: 58%; margin-bottom: 1.6rem; }
  .events, .events--use { grid-auto-columns: 72%; }
  .funcrooms { grid-auto-columns: 82%; }

  /* 23 amenities in one column is 800px of list nobody reads to the end of */
  .amenities__list { grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
  .amenities__list li { font-size: .82rem; }
}

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