/* ==========================================================================
   LA CREAM BEACH RESORT — shared stylesheet
   Palette taken from the brand: logo teal #108088 / site teal #0B726D,
   logo gold #B89860, site ink #1A222C, cream ground (the name is the brand).
   Type: Cormorant Garamond + Lato — both already in use on lacream.orbitagencyco.com
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  --teal:        #0B726D;   /* primary — from the live site's links & buttons */
  --teal-deep:   #085651;   /* pressed / hover */
  --teal-dark:   #06403C;   /* dark sections */
  --gold:        #B89860;   /* from the logo — rules, ornament, large display */
  --gold-deep:   #8A6B35;   /* gold as TEXT on cream — 4.7:1 */
  --gold-light:  #C9AA74;   /* gold as TEXT on teal-dark — 5.3:1 */
  --cream:       #FBF8F3;   /* ground */
  --cream-deep:  #F2EDE4;   /* alternate band */
  --ink:         #1A222C;   /* from the live site */
  --ink-soft:    #5A6270;   /* secondary text — 5.8:1 on cream */
  --white:       #FFFFFF;
  --border:      #E3DACB;

  /* --- type ------------------------------------------------------------- */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-label: .72rem;
  --t-body:  1rem;
  --t-lead:  clamp(1.05rem, 1.5vw, 1.28rem);
  --t-h3:    clamp(1.35rem, 2.4vw, 1.75rem);
  --t-h2:    clamp(2.1rem, 5vw, 3.6rem);
  --t-hero:  clamp(2.6rem, 8vw, 6.5rem);

  /* --- space ------------------------------------------------------------ */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px; --s-7:136px;

  --ease: cubic-bezier(.16,1,.3,1);
  --dur: 260ms;
  --z-sticky:40; --z-nav:60; --z-menu:70;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

.wrap{width:min(1220px,90vw);margin-inline:auto}
.wrap--narrow{width:min(860px,90vw);margin-inline:auto}
.label{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.label--onDark{color:var(--gold-light)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;left:16px;z-index:100;background:var(--teal);color:#fff;padding:12px 20px;transition:top var(--dur) var(--ease)}
.skip:focus{top:16px}

.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:60ch}
.rule{height:1px;background:var(--border);border:0;margin:var(--s-5) 0}

/* --- reveal -------------------------------------------------------------
   Scoped to .js so that if scripting is blocked or fails the content is
   simply visible, rather than an invisible page. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:90ms}.rv-d2{transition-delay:180ms}
.rv-d3{transition-delay:270ms}.rv-d4{transition-delay:360ms}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero__line{opacity:1!important;transform:none!important;animation:none!important}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:18px 5vw;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),padding var(--dur) var(--ease);
}
.nav--solid{background:var(--cream);box-shadow:0 1px 0 var(--border);padding:12px 5vw}
.nav__logo img{height:44px;width:auto;transition:height var(--dur) var(--ease)}
.nav--solid .nav__logo img{height:38px}
.nav__logo .on-dark{display:block}
.nav__logo .on-light{display:none}
.nav--solid .nav__logo .on-dark{display:none}
.nav--solid .nav__logo .on-light{display:block}

/* --- nav right cluster --------------------------------------------------- */
.nav__right{display:flex;align-items:center;gap:var(--s-3)}
.nav__tel{
  font-size:.78rem;letter-spacing:.14em;color:var(--white);min-height:44px;
  display:inline-flex;align-items:center;gap:8px;transition:color var(--dur) var(--ease);
}
.nav--solid .nav__tel{color:var(--ink)}
.nav__tel:hover{color:var(--gold)}
.nav__tel svg{width:16px;height:16px}
@media (max-width:720px){.nav__tel span{display:none}}

/* --- hamburger: present at every breakpoint, labelled Menu / Close ------- */
.nav__toggle{
  display:flex;background:none;border:0;cursor:pointer;height:48px;padding:0 4px 0 14px;
  align-items:center;gap:10px;position:relative;z-index:calc(var(--z-menu) + 2);
  border-radius:24px;transition:background 220ms var(--ease);
}
.nav__toggle:hover{background:rgba(255,255,255,.1)}
.nav--solid .nav__toggle:hover{background:rgba(11,114,109,.08)}
/* Open state reads as an actual button, not just an icon — the thing people
   scanned for and couldn't find was "is there a close button", so give it
   a visible boundary rather than relying on hover alone. */
/* The dedicated .mega__close now owns the close job and sits in the same
   corner — leaving both visible stacked two controls on top of each other.
   visibility:hidden (not opacity) also drops it from the tab order while
   open, so keyboard focus can't land on a control that isn't there to see. */
.nav[data-open="true"] .nav__toggle{visibility:hidden}
.nav__toggleLabel{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--white);transition:color 180ms var(--ease);
}
.nav--solid .nav__toggleLabel{color:var(--ink)}
/* Open state reads CLOSE in the accent colour — the clearest "this exits" cue */
.nav[data-open="true"] .nav__toggleLabel{color:var(--gold-deep)}

.nav__toggle i{
  display:block;width:26px;height:1px;background:var(--white);position:relative;
  flex:none;margin:0 4px;transition:background 180ms var(--ease);
}
.nav--solid .nav__toggle i{background:var(--ink)}
.nav__toggle i::before,.nav__toggle i::after{
  content:'';position:absolute;left:0;width:26px;height:1px;background:inherit;
  transition:transform 320ms var(--ease),width 320ms var(--ease);
}
.nav__toggle i::before{top:-8px}
.nav__toggle i::after{top:8px;width:17px}
.nav__toggle:hover i::after{width:26px}
.nav[data-open="true"] .nav__toggle i{background:transparent}
.nav[data-open="true"] .nav__toggle i::before{background:var(--gold);transform:translateY(8px) rotate(45deg)}
.nav[data-open="true"] .nav__toggle i::after{background:var(--gold);width:26px;transform:translateY(-8px) rotate(-45deg)}
/* Measured at 375px: logo and toggle clear each other with ~120px to spare,
   so the MENU / CLOSE label stays visible at every width rather than only
   showing on larger screens. */
@media (max-width:340px){.nav__toggleLabel{display:none}.nav__toggle{padding:0;justify-content:center;width:48px}}

/* ==========================================================================
   MEGA MENU — opens on every device, not just mobile
   ========================================================================== */
.mega{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--cream);
  display:grid;grid-template-columns:1fr 1fr;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity 420ms var(--ease),transform 520ms var(--ease),visibility 0s linear 420ms;
}
.nav[data-open="true"] ~ .mega,.mega.open{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
@media (prefers-reduced-motion:reduce){.mega{transition:opacity 1ms linear}}

/* --- a dedicated, unmissable close control ------------------------------
   The corner hamburger-turned-X was the only way to close the panel, and it
   was getting missed — same small icon, same corner, easy to read as
   decoration once the full-screen panel is up. This sits inside the panel
   itself, in the one corner every full-screen overlay convention points to,
   with a visible border, a label, and real weight — not just an aria-label. */
.mega__close{
  position:absolute;top:22px;right:5vw;z-index:5;
  display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 20px;
  background:var(--ink);color:var(--cream);border:0;border-radius:24px;cursor:pointer;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  box-shadow:0 8px 24px -8px rgba(6,26,25,.35);
  transition:background var(--dur) var(--ease),transform 160ms var(--ease);
}
.mega__close:hover{background:var(--teal)}
.mega__close:active{transform:scale(.95)}
.mega__close svg{width:16px;height:16px;flex:none}
@media (max-width:480px){
  .mega__close{top:16px;right:16px;padding:0 14px 0 16px}
  .mega__close span{display:none}      /* icon-only on the smallest phones, still 48px and bordered */
  .mega__close{gap:0}
}

.mega__nav{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s-7) 5vw var(--s-5);
}
.mega__list{list-style:none;margin:0;padding:0}
.mega__list li{overflow:hidden}
.mega__list a{
  display:flex;align-items:center;font-family:var(--display);font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:1.18;color:var(--ink);position:relative;
  /* min-height keeps the smallest breakpoint above the 44px touch target,
     where the clamped type alone lands at 42px */
  padding:5px 0;min-height:44px;transform:translateY(110%);
  transition:transform 620ms var(--ease),color 260ms var(--ease);
}
.mega.open .mega__list a{transform:none}
.mega.open .mega__list li:nth-child(1) a{transition-delay:60ms}
.mega.open .mega__list li:nth-child(2) a{transition-delay:110ms}
.mega.open .mega__list li:nth-child(3) a{transition-delay:160ms}
.mega.open .mega__list li:nth-child(4) a{transition-delay:210ms}
.mega.open .mega__list li:nth-child(5) a{transition-delay:260ms}
.mega.open .mega__list li:nth-child(6) a{transition-delay:310ms}
.mega.open .mega__list li:nth-child(7) a{transition-delay:360ms}
.mega__list a:hover,.mega__list a:focus-visible{color:var(--teal)}
.mega__list a[aria-current="page"]{color:var(--teal)}
.mega__list a[aria-current="page"]::before{
  content:'';position:absolute;left:-22px;top:50%;width:12px;height:1px;background:var(--gold);
}
@media (prefers-reduced-motion:reduce){.mega__list a{transform:none}}

.mega__foot{
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--border);
  display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;
  opacity:0;transition:opacity 400ms var(--ease) 320ms;
}
.mega.open .mega__foot{opacity:1}
.mega__foot a{color:var(--ink-soft);font-size:.92rem;transition:color var(--dur) var(--ease)}
.mega__foot a:hover{color:var(--teal)}

/* right-hand image panel — the "mega" part */
.mega__media{position:relative;overflow:hidden;background:var(--cream-deep)}
.mega__media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 600ms var(--ease)}
.mega__media figure.on{opacity:1}
.mega__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.mega.open .mega__media figure.on img{transform:none}
.mega__cap{
  position:absolute;left:var(--s-4);bottom:var(--s-4);color:var(--white);
  font-family:var(--display);font-size:1.5rem;text-shadow:0 2px 24px rgba(6,26,25,.6);
}
@media (max-width:900px){
  .mega{grid-template-columns:1fr}
  .mega__media{display:none}
  .mega__nav{justify-content:flex-start;padding-top:calc(var(--s-7) + 10px)}
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 28px;border:0;border-radius:2px;cursor:pointer;
  background:var(--teal);color:var(--white);
  font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--dur) var(--ease),transform 120ms var(--ease);white-space:nowrap;
}
.btn:hover{background:var(--teal-deep)}
.btn:active{transform:scale(.985)}
.btn svg{width:17px;height:17px;flex:none}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--onDark{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn--onDark:hover{background:var(--white);color:var(--ink)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-deep);color:var(--white)}
.btn--lg{min-height:56px;padding:0 36px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate}
.hero--short{min-height:62svh}

/* --- home hero -----------------------------------------------------------
   Two rows rather than one bottom-anchored stack: the type sits optically
   centred in the upper row, the booking card anchors the lower one. Stops
   the whole composition piling into the bottom-left corner. */
.hero--home{display:grid;grid-template-rows:1fr auto;align-items:center;padding-top:96px}
.hero--home .hero__inner{
  padding:var(--s-5) 5vw var(--s-3);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hero--home .hero__eyebrow{margin-bottom:var(--s-3)}
.hero--home h1{
  max-width:16ch;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.025em;
  /* balance stops the wrap landing as one word on a line of its own */
  text-wrap:balance;
}
/* Real spaces sit between the spans in the markup, so screen readers and
   copy-paste get "One house. One beach. Yours." — no faked margin gaps. */
.hero--home h1 .hero__line{display:inline-block}
@media (max-width:760px){
  .hero--home h1{max-width:none}
  .hero--home h1 .hero__line{display:block}
  .hero--home{padding-top:80px}
}
.hero--home .hero__sub{
  margin:var(--s-3) auto 0;max-width:52ch;text-align:center;
  font-size:clamp(1rem,1.35vw,1.2rem);
}
.hero__book{padding:0 5vw var(--s-5);width:100%;display:flex;justify-content:center}
.hero__book .av{margin-top:0;width:100%;max-width:1000px}
/* A quiet cue that there is more below */
.hero__scroll{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  color:rgba(255,255,255,.55);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  pointer-events:none;
}
@media (max-height:720px){.hero--home{padding-top:76px}.hero--home .hero__inner{padding-block:var(--s-4) var(--s-2)}}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,25,.55) 0%,rgba(6,26,25,.15) 40%,rgba(6,26,25,.82) 100%);
}
.hero__inner{padding:0 5vw var(--s-5);color:var(--white);width:100%}
.hero__eyebrow{color:var(--gold-light);margin-bottom:var(--s-3)}
.hero h1{font-size:var(--t-hero);color:var(--white);max-width:16ch}
.hero--short h1{font-size:clamp(2.2rem,6vw,4.2rem)}
.hero__line{display:block;opacity:0;transform:translateY(30px);animation:riseIn 950ms var(--ease) forwards}
.hero__line:nth-child(1){animation-delay:150ms}
.hero__line:nth-child(2){animation-delay:290ms}
.hero__line:nth-child(3){animation-delay:430ms}
@keyframes riseIn{to{opacity:1;transform:none}}
.hero__sub{margin-top:var(--s-3);max-width:46ch;font-size:var(--t-lead);color:rgba(255,255,255,.9);font-weight:300}

/* ==========================================================================
   AVAILABILITY WIDGET
   ========================================================================== */
.av{background:var(--cream);color:var(--ink);padding:var(--s-3);margin-top:var(--s-4);
    box-shadow:0 26px 70px -20px rgba(6,26,25,.55);max-width:980px}
.av__row{display:grid;grid-template-columns:1fr 1fr .75fr .75fr auto;gap:var(--s-2);align-items:end}
@media (max-width:900px){.av__row{grid-template-columns:1fr 1fr}.av__field--go{grid-column:1/-1}}
.av__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.av__field label,.av__field .label{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.av__field input,.av__field select{
  height:48px;padding:0 10px;background:transparent;border:0;border-bottom:1px solid var(--border);
  border-radius:0;width:100%;font-size:1rem;transition:border-color var(--dur) var(--ease);
}
.av__field input:hover,.av__field select:hover{border-bottom-color:var(--ink-soft)}
.av__field input:focus-visible,.av__field select:focus-visible{border-bottom-color:var(--teal)}
.av__nights{height:48px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border);
  color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.av__nights[data-set="true"]{color:var(--teal);font-weight:700}
.av__note{margin-top:var(--s-2);font-size:.82rem;color:var(--ink-soft)}

/* ==========================================================================
   STICKY BOOKING BAR
   ========================================================================== */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  background:var(--teal-dark);color:var(--white);
  padding:14px 5vw;padding-bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateY(115%);transition:transform 420ms var(--ease);
  box-shadow:0 -12px 44px -14px rgba(6,26,25,.5);
}
.sticky.show{transform:none}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}
.sticky__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:min(1220px,100%);margin-inline:auto}
.sticky__fields{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.sticky__field{display:flex;flex-direction:column;gap:2px}
.sticky__field label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.sticky__field input,.sticky__field select{height:32px;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.3);color:var(--white);font-size:.9rem;padding:0}
.sticky__field input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer}
.sticky__nights{font-size:.85rem;color:var(--gold-light);font-variant-numeric:tabular-nums}
.sticky__pill{display:none;width:100%;align-items:center;justify-content:space-between;background:none;border:0;
  cursor:pointer;color:var(--white);min-height:44px;padding:0}
.sticky__pill span:first-child{font-family:var(--display);font-size:1.15rem}
.sticky__pill span:last-child{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
@media (max-width:860px){
  .sticky__inner{display:block}
  .sticky__pill{display:flex}
  .sticky__fields,.sticky .btn{display:none}
  .sticky.open .sticky__pill{margin-bottom:var(--s-3)}
  .sticky.open .sticky__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-bottom:var(--s-2)}
  .sticky.open .btn{display:flex;width:100%}
  .sticky__field input,.sticky__field select{height:44px}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:var(--s-7) 0}
.sec--tight{padding:var(--s-6) 0}
.sec--cream{background:var(--cream-deep)}
.sec--dark{background:var(--teal-dark);color:var(--white)}
.sec--dark h2,.sec--dark h3{color:var(--white)}
.sec--dark .lead{color:rgba(255,255,255,.78)}

.head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:end;margin-bottom:var(--s-5)}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:var(--s-3)}}
.head h2{font-size:var(--t-h2)}
.head__intro{font-size:var(--t-lead);color:var(--ink-soft)}
.sec--dark .head__intro{color:rgba(255,255,255,.78)}

/* split image + text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center}
.split--flip .split__media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s-3)}.split--flip .split__media{order:0}}
.split__media img{aspect-ratio:4/3;object-fit:cover;width:100%}
.split__body h3{font-size:var(--t-h2);margin-bottom:var(--s-3)}
.split__body p+p{margin-top:var(--s-2)}

/* feature beats */
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);border-top:1px solid var(--border);padding-top:var(--s-4)}
.sec--dark .beats{border-top-color:rgba(255,255,255,.18)}
@media (max-width:940px){.beats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.beats{grid-template-columns:1fr}}
.beat__n{font-family:var(--display);font-size:1rem;color:var(--gold-deep);display:block;margin-bottom:var(--s-2)}
.sec--dark .beat__n{color:var(--gold-light)}
.beat h3{font-size:var(--t-h3);margin-bottom:10px}
.beat p{font-size:.95rem;color:var(--ink-soft)}
.sec--dark .beat p{color:rgba(255,255,255,.75)}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:940px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
/* Browsers ship a default figure{margin:1em 40px} — left unreset, that eats
   ~80px of width from every card photo and is why the grid read uneven. */
.card figure{margin:0 0 var(--s-3)}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%;display:block}
.card--wide img{aspect-ratio:4/3}
.card h3{font-size:var(--t-h3);margin-bottom:8px}
.card p{font-size:.95rem;color:var(--ink-soft)}
.card__meta{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:10px}

/* ==========================================================================
   GALLERY STRIP / CAROUSEL
   Auto-advances, and stops the moment anyone touches, hovers or focuses it.
   The control row is injected by JS, so it only exists when it actually works.
   ========================================================================== */
.strip-wrap{position:relative}
.strip__bar{
  display:flex;align-items:center;gap:var(--s-3);
  margin:var(--s-2) 5vw 0;
}
.strip__track{
  position:relative;flex:1;height:1px;background:var(--border);overflow:hidden;
}
.sec--dark .strip__track{background:rgba(255,255,255,.22)}
.strip__fill{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--teal);
  transition:width 220ms var(--ease);
}
.sec--dark .strip__fill{background:var(--gold-light)}
.strip__ctrl{
  flex:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--border);border-radius:50%;color:var(--ink);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 160ms var(--ease);
}
.strip__ctrl:hover{background:var(--teal);border-color:var(--teal);color:var(--white)}
.strip__ctrl:active{transform:scale(.92)}
.strip__ctrl svg{width:15px;height:15px}
.strip__ctrl .ico-pause{display:block}
.strip__ctrl .ico-play{display:none}
.strip__ctrl[aria-pressed="true"] .ico-pause{display:none}
.strip__ctrl[aria-pressed="true"] .ico-play{display:block}
.strip__status{
  flex:none;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:5ch;
}
.sec--dark .strip__status{color:rgba(255,255,255,.7)}

/* gallery strip */
.strip{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5vw var(--s-2);scrollbar-width:thin}
.strip::-webkit-scrollbar{height:2px}
.strip::-webkit-scrollbar-thumb{background:var(--border)}
/* 76vw depends on the viewport dimensions being established at first
   layout. Several embedded webviews (in-app browsers from Instagram/
   WhatsApp, and this project's own preview pane) run an early layout
   pass before that happens, where vw resolves against a 0-width
   viewport and collapses flex-basis to 0 — slides render as slivers
   that don't fill their box. Percentage of the (already laid-out)
   flex container sidesteps that pass entirely. */
.strip figure{margin:0;flex:0 0 min(440px,84%);scroll-snap-align:start}
.strip img{aspect-ratio:4/5;object-fit:cover;width:100%}
.strip figcaption{margin-top:12px;font-size:.85rem;color:var(--ink-soft)}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.mosaic img{width:100%;height:100%;object-fit:cover}
/* .mosaic figure{aspect-ratio:1} carries a type selector (1 class + 1 tag),
   which is MORE specific than a single class like .mosaic__tall — so the
   square ratio was silently winning over 3/4 and 16/9 below, forcing every
   image in the grid back to a square. Compounding the class onto the same
   figure.mosaic__tall selector restores the intended ratio without relying
   on source order. Verified: with this fixed, the grid auto-generates the
   extra rows it needs and every image measures exactly on-ratio — no
   redesign required, this was the entire bug. */
.mosaic figure{margin:0;aspect-ratio:1}
.mosaic figure.mosaic__tall{grid-row:span 2;aspect-ratio:3/4}
.mosaic figure.mosaic__wide{grid-column:span 2;aspect-ratio:16/9}
@media (max-width:820px){.mosaic{grid-template-columns:1fr 1fr}.mosaic__wide{grid-column:span 2}}

/* rate blocks */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:900px){.rates{grid-template-columns:1fr}}
.rate{border-top:1px solid var(--ink);padding-top:var(--s-3)}
.sec--dark .rate{border-top-color:var(--gold)}
.rate__amt{font-family:var(--display);font-size:clamp(2rem,4.4vw,3rem);line-height:1;margin:10px 0 14px;font-variant-numeric:tabular-nums}
.rate ul{list-style:none;margin:var(--s-2) 0 0;padding:0}
.rate li{font-size:.92rem;color:var(--ink-soft);padding:7px 0;border-bottom:1px solid var(--border);display:flex;gap:10px}
.sec--dark .rate li{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.14)}
.rate li svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--teal)}
.sec--dark .rate li svg{color:var(--gold-light)}

/* checklist */
.checks{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px var(--s-5)}
@media (max-width:680px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);
  border-bottom:1px solid var(--border);padding-bottom:12px}
.checks li svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--teal)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-5)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--border);padding-top:var(--s-3)}
.sec--dark .step{border-top-color:rgba(255,255,255,.2)}
.step__n{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--gold-deep);display:block;margin-bottom:10px}
.sec--dark .step__n{color:var(--gold-light)}
.step p{color:var(--ink-soft);font-size:.95rem}
.sec--dark .step p{color:rgba(255,255,255,.75)}

/* FAQ */
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-3) 44px var(--s-3) 0;position:relative;
  font-family:var(--display);font-size:var(--t-lead);min-height:44px;transition:color var(--dur) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal)}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 0 var(--s-3);color:var(--ink-soft);max-width:64ch}

/* quote / pull */
.quote{text-align:center;max-width:22ch;margin-inline:auto;font-family:var(--display);
  font-size:var(--t-h2);line-height:1.14}
.quote em{font-style:italic;color:var(--gold-deep)}
.sec--dark .quote em{color:var(--gold-light)}

/* CTA band */
.cta{position:relative;min-height:76svh;display:grid;place-items:center;text-align:center;color:var(--white);isolation:isolate}
.cta__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{content:'';position:absolute;inset:0;background:rgba(6,26,25,.62)}
.cta__inner{padding:var(--s-5) 5vw}
.cta h2{font-size:var(--t-h2);color:var(--white);max-width:18ch;margin-inline:auto}
.cta p{margin:var(--s-3) auto var(--s-4);max-width:40ch;color:rgba(255,255,255,.86);font-size:var(--t-lead);font-weight:300}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:var(--s-6) 0 calc(var(--s-5) + 84px)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-5)}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr;gap:var(--s-4)}}
.foot img{height:52px;width:auto;margin-bottom:var(--s-3)}
.foot h4{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);
  font-family:var(--body);font-weight:700;margin-bottom:var(--s-2)}
.foot p,.foot li{font-size:.92rem;line-height:1.9}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:rgba(255,255,255,.72);transition:color var(--dur) var(--ease)}
.foot a:hover{color:var(--gold-light)}
.foot__base{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ==========================================================================
   INTERACTION — micro-animations.
   Each expresses cause and effect; none is decoration for its own sake.
   ========================================================================== */
.btn{position:relative;overflow:hidden;
  transition:background var(--dur) var(--ease),transform 180ms var(--ease),box-shadow var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(6,26,25,.45)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:90ms}
.btn::before{content:'';position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transition:transform 620ms var(--ease)}
.btn:hover::before{transform:translateX(101%)}

/* Images breathe on hover — wrapper clips, child scales */
.card figure,.strip figure,.mosaic figure,.split__media,.pkg__media{overflow:hidden;position:relative}
.card img,.strip img,.mosaic img,.split__media img,.pkg__media img{
  transition:transform 900ms var(--ease)}
.card:hover img,.strip figure:hover img,.mosaic figure:hover img,
.split__media:hover img,.pkg__media:hover img{transform:scale(1.045)}

/* Anything that opens a lightbox announces itself */
.lb-open{cursor:zoom-in}
.lb-open::after{content:'';position:absolute;inset:0;background:rgba(6,26,25,0);
  transition:background var(--dur) var(--ease);pointer-events:none}
.lb-open:hover::after{background:rgba(6,26,25,.14)}
.lb-icon{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;
  background:rgba(251,248,243,.94);display:grid;place-items:center;z-index:2;
  opacity:0;transform:translateY(6px) scale(.9);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.lb-open:hover .lb-icon,.lb-open:focus-visible .lb-icon{opacity:1;transform:none}
.lb-icon svg{width:16px;height:16px;color:var(--ink)}

.card,.rate,.pkg,.boat{transition:transform 420ms var(--ease)}
.card:hover,.pkg:hover,.boat:hover{transform:translateY(-4px)}

/* Top rules draw themselves in */
.rate,.step{position:relative}
.rate::after,.step::after{content:'';position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--teal);transition:width 620ms var(--ease)}
.rate:hover::after,.step:hover::after{width:100%}
.sec--dark .rate::after,.sec--dark .step::after{background:var(--gold-light)}

.faq summary{transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.faq summary:hover{padding-left:6px}
.av__field input:focus,.av__field select:focus{background:rgba(11,114,109,.04)}
.foot a{transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.foot a:hover{padding-left:4px}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{transform:none;box-shadow:none}
  .btn::before{display:none}
  .card img,.strip img,.mosaic img,.split__media img,.pkg__media img{transition:none}
  .card:hover img,.strip figure:hover img,.mosaic figure:hover img,
  .split__media:hover img,.pkg__media:hover img{transform:none}
  .card:hover,.pkg:hover,.boat:hover{transform:none}
  .rate::after,.step::after{display:none}
  .faq summary:hover{padding-left:0}
  .foot a:hover{padding-left:0}
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,20,19,.95);
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;transition:opacity 320ms var(--ease),visibility 0s linear 320ms}
.lb.open{opacity:1;visibility:visible;transition-delay:0s}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) 4vw;color:rgba(255,255,255,.7)}
.lb__count{font-size:.8rem;letter-spacing:.18em;font-variant-numeric:tabular-nums}
/* .lb__stage is itself display:grid with no explicit track sizes, so its
   single implicit cell auto-sizes TO ITS CONTENT (the image) rather than
   stretching to the stage's own already-correct box — a circular
   percentage-height problem. max-height:100% on .lb__img then resolves
   against that indefinite auto track and is effectively ignored, so
   portrait images (tall relative to their width) blow straight through
   the stage and off the top/bottom of the screen. Giving the cell an
   explicit 1fr track makes it stretch to the stage's real, definite size
   first, so the percentage below has something real to resolve against. */
.lb__stage{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;padding:0 4vw;min-height:0;overflow:hidden}
/* Grid/flex items get an implicit min-height/min-width:auto, which floors
   them at their OWN content size regardless of the track — same failure
   mode as the carousel flex-basis bug above. Without the override below,
   a 2700px-tall portrait photo drags its own grid row open to 2700px
   rather than shrinking, which is why max-height:100% had no visible
   effect on tall images specifically. */
.lb__img{max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;
  opacity:0;transform:scale(.985);transition:opacity 320ms var(--ease),transform 420ms var(--ease)}
.lb__img.ready{opacity:1;transform:none}
.lb__cap{padding:var(--s-3) 4vw var(--s-5);color:rgba(255,255,255,.8);text-align:center;font-size:.95rem;min-height:2.5em}
.lb__btn{background:none;border:0;cursor:pointer;color:var(--white);width:48px;height:48px;
  display:grid;place-items:center;border-radius:50%;
  transition:background var(--dur) var(--ease),transform 180ms var(--ease)}
.lb__btn:hover{background:rgba(255,255,255,.14)}
.lb__btn:active{transform:scale(.92)}
.lb__btn svg{width:22px;height:22px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb__nav--prev{left:1vw}
.lb__nav--next{right:1vw}
@media (max-width:640px){
  .lb__nav{top:auto;bottom:-54px;transform:none}
  .lb__nav--prev{left:26%}.lb__nav--next{right:26%}
  .lb__cap{padding-bottom:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){.lb,.lb__img{transition:opacity 1ms linear}}

/* ==========================================================================
   HERO LEGIBILITY
   The Explore hero sits over bright sand and the headline fell below AA.
   A second, horizontal wash deepens the side the text actually occupies.
   ========================================================================== */
.hero__media::after{
  background:
    linear-gradient(180deg,rgba(6,26,25,.55) 0%,rgba(6,26,25,.20) 38%,rgba(6,26,25,.88) 100%),
    linear-gradient(90deg,rgba(6,26,25,.58) 0%,rgba(6,26,25,0) 62%);
}

/* ==========================================================================
   PACKAGES & BOATS
   ========================================================================== */
.pkgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:860px){.pkgs{grid-template-columns:1fr}}
.pkg{background:var(--white);border:1px solid var(--border);display:flex;flex-direction:column}
.pkg__media{aspect-ratio:16/10}
.pkg__media img{width:100%;height:100%;object-fit:cover}
.pkg__body{padding:var(--s-4);display:flex;flex-direction:column;flex:1}
.pkg__name{font-family:var(--display);font-size:var(--t-h3);margin-bottom:4px}
.pkg__price{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;
  color:var(--teal);margin:10px 0 4px;font-variant-numeric:tabular-nums}
.pkg__unit{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.pkg__meta{margin:var(--s-3) 0;padding:var(--s-2) 0;border-block:1px solid var(--border);
  display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:.9rem;color:var(--ink)}
.pkg__meta b{color:var(--ink-soft);font-weight:700;display:block;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.pkg ul{list-style:none;margin:0 0 var(--s-3);padding:0}
.pkg li{font-size:.93rem;color:var(--ink-soft);padding:6px 0;display:flex;gap:10px}
.pkg li svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--teal)}
.pkg .btn{margin-top:auto;align-self:flex-start}

.boats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:900px){.boats{grid-template-columns:1fr}}
.boat{background:var(--white);border:1px solid var(--border)}
.boat__media{aspect-ratio:4/3;overflow:hidden;position:relative}
.boat__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.boat:hover .boat__media img{transform:scale(1.045)}
.boat__body{padding:var(--s-3)}
.boat__cap{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.boat__price{font-family:var(--display);font-size:1.9rem;color:var(--teal);margin:6px 0;font-variant-numeric:tabular-nums}
.boat__body p{font-size:.9rem;color:var(--ink-soft)}
.boat__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:32px;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--teal);
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);
}
.boat__link svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.boat__link:hover{color:var(--teal-deep);gap:9px}
.boat__link:hover svg{transform:translateX(2px)}