/* =========================================================
   LAST RESORTS — Fluid baseline-scaled layout
   Desktop baseline: 1440px  ->  --u = 1vw / 14.4   (1 design px)
   Mobile  baseline:  390px  ->  --u = 1vw /  3.9   (1 design px)
   Use:  any-property: calc(<designPx> * var(--u));
   ========================================================= */

:root {
  /* palette */
  --c-cream:  #f2e9db;
  --c-yellow: #ffca62;
  --c-orange: #ff8b2c;
  --c-black:  #000000;

  /* fluid design unit = one design pixel on the desktop baseline */
  --u: calc(1vw / 14.4);

  /* scaled design tokens */
  --gutter:  calc(40 * var(--u));
  --border:  calc(2.5 * var(--u));
  --radius:  calc(999 * var(--u));
}

@media (max-width: 768px) {
  :root {
    --u: calc(1vw / 3.9);
    --gutter: calc(20 * var(--u));
    --border: calc(1.5 * var(--u));
  }
}

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

html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }      /* clip intentional full-bleed overflow (no sideways scroll) */

body {
  background: var(--c-cream);
  color: var(--c-black);
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

button { font: inherit; }

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

.skip-link:focus {
  position: fixed; top: calc(8 * var(--u)); left: calc(8 * var(--u));
  width: auto; height: auto; clip: auto;
  background: var(--c-yellow); color: #000;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  z-index: 1000; border: var(--border) solid #000;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(18 * var(--u)) var(--gutter);
  background: var(--c-cream);
  position: relative;
  z-index: 950;                    /* stays above the mobile overlay (900) */
}

/* hamburger toggle + overlay menu are desktop-hidden by default */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ---- hamburger / close toggle ---- */
.nav-toggle {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-black);
  cursor: pointer;
}
.nav-toggle__icon { width: 100%; height: 100%; }
.nav-toggle__icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: block; }

/* ---- full-screen overlay menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--u));
  background: rgba(242, 233, 219, 0.95);   /* cream @ 95% */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
/* all three menu SVGs share one cap height (keeps the Reserve pill in check) */
.mobile-menu .nav-link img,
.mobile-menu .btn-fancy__inner img { height: calc(22 * var(--u)); width: auto; }

.logo img { height: calc(54 * var(--u)); width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u));
}

.nav-link img { height: calc(15 * var(--u)); width: auto; }  /* match the Reserve SVG height */

.nav-link { transition: transform .15s ease; }
.nav-link:hover { transform: scale(1.03); }   /* match the Reserve button */

/* ---------- nested "fancy" button (Reserve / Panic) ---------- */
.btn-fancy {
  display: inline-block;
  transition: transform .15s ease;
}
.btn-fancy:hover { transform: scale(1.03); }
.btn-fancy:active { transform: scale(0.98); }

.btn-fancy__ring {
  display: block;
  background: var(--c-orange);
  border: var(--border) solid var(--c-black);
  border-radius: var(--radius);
  padding: calc(3 * var(--u));
}

.btn-fancy__inner {
  display: block;
  background: var(--c-yellow);
  border: var(--border) solid var(--c-black);
  border-radius: var(--radius);
  padding: calc(12 * var(--u)) calc(24 * var(--u));
}

.btn-fancy__inner img { height: calc(15 * var(--u)); width: auto; }

/* larger variant — Panic button */
.btn-fancy--lg .btn-fancy__ring   { padding: calc(5 * var(--u)); }
.btn-fancy--lg .btn-fancy__inner  { padding: calc(15 * var(--u)) calc(30 * var(--u)); }
.btn-fancy--lg .btn-fancy__inner img { height: calc(24 * var(--u)); }

/* =========================================================
   HERO + VIDEO
   ========================================================= */
.hero { position: relative; line-height: 0; }

.hero__media {
  display: block;
  width: 100%;
  margin: 0; padding: 0; border: 0;
  background: #000;
  cursor: pointer;
  position: relative;
}

.hero__video {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.hero__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  opacity: .9;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.hero__media:hover .hero__play { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
.hero__play svg { width: 100%; height: 100%; }

/* =========================================================
   STARBURST BADGE (rotating layers + slideshow)
   ========================================================= */
.starburst {
  position: absolute;
  right: calc(40 * var(--u));
  bottom: calc(35 * var(--u));
  width: calc(288 * var(--u));    /* ~80% of prior 360 */
  height: calc(288 * var(--u));
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transform-origin: center center;
  /* reveal / hide transition (load-in pop + 4s cycle) */
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.3), opacity .35s ease;
}
.starburst.is-hidden { transform: scale(0); opacity: 0; }

.starburst__back,
.starburst__front,
.starburst__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.starburst__back  {
  animation: spin-cw 30s linear infinite;
  top: calc(13.3 * var(--u));    /* offset ~13px @1440 (reduced ~1/3) */
  left: calc(-6.7 * var(--u));   /* offset ~-7px @1440 (reduced ~1/3) */
}
.starburst__front { animation: spin-cw 30s linear infinite; }  /* same direction & speed (clockwise) */

.starburst__slides { display: grid; place-items: center; }

.starburst__slide {
  grid-area: 1 / 1;
  width: 62%;
  height: auto;
  transform: rotate(15deg);
  opacity: 0;
  transition: opacity .3s ease;
}
/* slides 2 and 3 sized up (reduced 5% from prior 75% / 81.8%) */
.starburst__slides .starburst__slide:nth-child(2) {
  width: 71.25%;
  transform: translate(calc(0 * var(--u)), calc(6.5 * var(--u))) rotate(15deg);
}
.starburst__slides .starburst__slide:nth-child(3) {
  width: 77.71%;
  transform: translate(calc(-3 * var(--u)), calc(8.5 * var(--u))) rotate(15deg);
}
.starburst__slide.is-active { opacity: 1; }

@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* =========================================================
   CLIMATE BUNKER HEADLINE — full width, overlaps video,
   never blocks clicks beneath it (video / merch)
   ========================================================= */
.climate-banner {
  position: relative;
  z-index: 2;
  /* Overlap expressed as a % of width so the banner (a fixed-ratio image)
     keeps the SAME proportional overlap on both desktop and mobile.
     SVG aspect = 525.1 x 134.6 -> height = 25.633% of width.
     We want the top 28.9% of the SVG to overlap the video:
     0.289 * 0.25633 = 7.41% of width. */
  margin: -4.71% 0 0;
  pointer-events: none;            /* clicks fall through to video & merch */
}
.climate-banner img { width: 100%; height: auto; }

/* =========================================================
   PROMO COPY (units available + bonus offer)
   ========================================================= */
.promo {
  margin-top: calc(24 * var(--u));
}
.premier-timeshares,
.units-available,
.introductory-offer,
.bonus-offer {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.premier-timeshares { width: 45%; margin-top: calc(40 * var(--u)); margin-bottom: calc(128 * var(--u)); }
.units-available    { width: 60%; }
.introductory-offer { width: 45%; margin-top: calc(24 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.bonus-offer        { width: 57%; margin-top: calc(78 * var(--u)); }

/* large logo + last-vacation pill below the merch */
.logo-large    { display: block; width: 60%; height: auto; margin: calc(140 * var(--u)) auto 0; }
.last-vacation.one-percent { width: 48%; margin: calc(30 * var(--u)) auto calc(120 * var(--u)); }   /* ~80% of the logo width */

/* ============ FEATURE SLIDER ============ */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: var(--border) solid var(--c-black);
  margin: calc(120 * var(--u)) 0 calc(36 * var(--u));
}
.slider__track { display: flex; transition: transform .5s ease; }
.slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide__bg--steel   { background-image: url('images/military-grade-steel-01.jpg'); }
.slide__bg--bathing { background-image: url('images/community-bathing-01.jpg'); }
.slide__bg--sunsets { background-image: url('images/solarium-01.jpg'); }
.slide__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(to bottom, rgba(242, 233, 219, 0) 0%, var(--c-cream) 92%);
  z-index: 2;
}
.slide__ticker { position: absolute; left: 0; right: 0; bottom: calc(8 * var(--u)); overflow: hidden; z-index: 3; }
.ticker { display: flex; width: max-content; animation: ticker-scroll 52s linear infinite; }
/* trailing gap on each copy keeps the -50% loop seamless while spacing the duplicates */
.ticker img { height: calc(46 * var(--u)); width: auto; display: block; margin-right: calc(28 * var(--u)); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pill floats on top (reuses the .one-percent yellow/orange pill visual) */
.slider .slider__pill {
  position: absolute;
  top: calc(34 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  margin: 0;
  z-index: 5;
}

/* dot nav */
.slider__dots {
  position: absolute; left: 0; right: 0; bottom: 14%;
  display: flex; justify-content: center; gap: calc(16 * var(--u));
  z-index: 4;
}
.slider__dot {
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  padding: 0; border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--c-black);
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
}
.slider__dot.is-active { background: var(--c-black); }

/* palm trees */
.palms {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(30 * var(--u));
  margin: calc(96 * var(--u)) auto calc(40 * var(--u));
}
.palms img { width: calc(150 * var(--u)); height: auto; }

/* check-in / barbed-wire overlapping pair (merch-card style) */
.checkin-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(72 * var(--u));            /* more space below one-percent */
  padding-bottom: calc(88 * var(--u));        /* decent padding below the row */
}
.poster {
  background: #fff;
  padding: calc(14 * var(--u));
  box-shadow: calc(5 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .28);
}
.poster img { display: block; width: 100%; height: auto; }
.poster--left  { width: calc(600 * var(--u)); transform: rotate(-11deg); position: relative; z-index: 1; }
.poster--right { width: calc(600 * var(--u)); transform: rotate(14deg);  position: relative; z-index: 2;
                 margin-left: calc(-33 * var(--u)); }   /* overlap onto the left, right on top */

/* one-percent: framed in the same two-color style as the buttons (not clickable) */
.one-percent { display: block; width: 52%; margin: calc(50 * var(--u)) auto; }
.one-percent picture { display: block; }
.one-percent .btn-fancy__inner img { width: 100%; height: auto; }

/* =========================================================
   MERCHANDISE
   ========================================================= */
.merch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;          /* don't stretch cards to the tallest in the row */
  gap: calc(84 * var(--u)) calc(76 * var(--u));   /* row-gap  column-gap (extra to offset the row nudge) */
  width: calc(1107 * var(--u));                    /* ~90% of the old merch width */
  max-width: 83%;
  margin: calc(110 * var(--u)) auto calc(70 * var(--u));   /* extra space above the grid */
}
.merch-item {
  width: calc(50% - 30 * var(--u));                /* 2 per row, leaves slack for the gap + row nudge */
  background: #fff;
  padding: calc(14 * var(--u));                    /* thick white "polaroid" frame */
  box-shadow: calc(5 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.merch-item img { width: 100%; height: auto; display: block; }

/* randomized scatter — rotation + offset + scale vary per item/row
   (transforms don't affect flex layout, so 2-per-row + centered 7th hold) */
/* scale pattern: big, small, small, big, big, small, small (smalls eased up) */
.merch-item:nth-of-type(1) { transform: translate(calc(-6 * var(--u)), calc(-10 * var(--u))) rotate(-4deg)   scale(1.05); }
.merch-item:nth-of-type(2) { transform: translate(calc( 8 * var(--u)), calc(  6 * var(--u))) rotate(3deg)    scale(0.975); }
.merch-item:nth-of-type(3) { transform: translate(calc(-7 * var(--u)), calc( 12 * var(--u))) rotate(2.5deg)  scale(0.97); }
.merch-item:nth-of-type(4) { transform: translate(calc( 9 * var(--u)), calc( -8 * var(--u))) rotate(-3.5deg) scale(1.06); }
.merch-item:nth-of-type(5) { transform: translate(calc(-9 * var(--u)), calc( 10 * var(--u))) rotate(-2.5deg) scale(1.05); }
.merch-item:nth-of-type(6) { transform: translate(calc( 7 * var(--u)), calc(-10 * var(--u))) rotate(4deg)    scale(0.975); }
.merch-item:nth-of-type(7) { transform: translate(calc( 3 * var(--u)), calc(  6 * var(--u))) rotate(3deg)    scale(1.06); }  /* big, tipped the other way */

/* nudge whole rows so columns don't line up cleanly — desktop only:
   odd rows drift left, even rows drift right */
@media (min-width: 769px) {
  .merch-item:nth-of-type(1), .merch-item:nth-of-type(2),
  .merch-item:nth-of-type(5), .merch-item:nth-of-type(6) { margin-left: calc(-16 * var(--u)); }
  .merch-item:nth-of-type(3), .merch-item:nth-of-type(4),
  .merch-item:nth-of-type(7) { margin-right: calc(-16 * var(--u)); }
}

/* hover: settle to neutral position, tip PAST zero the opposite way; bigs grow more */
.merch-item:hover {
  box-shadow: calc(8 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .34);
  position: relative;
  z-index: 2;
}
.merch-item:nth-of-type(1):hover { transform: translate(0, 0) rotate(2deg)    scale(1.12); }  /* big */
.merch-item:nth-of-type(2):hover { transform: translate(0, 0) rotate(-1.5deg) scale(1.07); }
.merch-item:nth-of-type(3):hover { transform: translate(0, 0) rotate(-0.5deg) scale(1.07); }
.merch-item:nth-of-type(4):hover { transform: translate(0, 0) rotate(2deg)    scale(1.12); }  /* big */
.merch-item:nth-of-type(5):hover { transform: translate(0, 0) rotate(1.5deg)  scale(1.12); }  /* big */
.merch-item:nth-of-type(6):hover { transform: translate(0, 0) rotate(-2deg)   scale(1.07); }
.merch-item:nth-of-type(7):hover { transform: translate(0, 0) rotate(-1.5deg) scale(1.12); }  /* big */

/* hovering a card makes its row-mate shrink + tilt (in the mate's own hover direction) */
/* the shrinking mate tips a bit PAST its own hover angle */
.merch-grid:has(.merch-item:nth-of-type(2):hover) .merch-item:nth-of-type(1) { transform: translate(0, 0) rotate(3.5deg)  scale(0.9); }
.merch-grid:has(.merch-item:nth-of-type(1):hover) .merch-item:nth-of-type(2) { transform: translate(0, 0) rotate(-3deg)   scale(0.9); }
.merch-grid:has(.merch-item:nth-of-type(4):hover) .merch-item:nth-of-type(3) { transform: translate(0, 0) rotate(-2deg)   scale(0.9); }
.merch-grid:has(.merch-item:nth-of-type(3):hover) .merch-item:nth-of-type(4) { transform: translate(0, 0) rotate(3.5deg)  scale(0.9); }
.merch-grid:has(.merch-item:nth-of-type(6):hover) .merch-item:nth-of-type(5) { transform: translate(0, 0) rotate(3deg)    scale(0.9); }
.merch-grid:has(.merch-item:nth-of-type(5):hover) .merch-item:nth-of-type(6) { transform: translate(0, 0) rotate(-3.5deg) scale(0.9); }

/* ---- full-width banners interleaved between merch rows ---- */
.merch-banner { flex: 0 0 100%; }       /* forces its own row in the grid */
.merch-banner img { display: block; max-width: none; }   /* allow the bleed past container */

/* reserve-today: full-bleed like the climate banner (no negative top margin).
   The inner image breaks out to viewport width regardless of grid width. */
.merch-banner--reserve { padding: calc(20 * var(--u)) 0; }
.merch-banner--reserve a { display: block; }
.merch-banner--reserve img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* end-of-the-world: same width + top padding as the bonus-offer svg */
.merch-banner--eotw img {
  width: 45vw;
  margin: calc(54 * var(--u)) auto 0;
}

/* =========================================================
   PANIC BUTTON
   ========================================================= */
.panic {
  flex: 0 0 100%;                 /* full-width row inside the merch grid */
  display: flex;
  justify-content: center;
  padding: calc(18 * var(--u)) 0 calc(14 * var(--u));
}

/* =========================================================
   NEWSLETTER SIGNUP
   ========================================================= */
.newsletter {
  border-top: var(--border) solid var(--c-black);
  padding: calc(100 * var(--u)) var(--gutter);
  text-align: center;
}
.newsletter__heading {
  display: block;
  width: 38%;
  height: auto;
  margin: 0 auto calc(16 * var(--u));
}
.newsletter__form {
  max-width: calc(500 * var(--u));
  margin: 0 auto;
}

@media (max-width: 768px) {
  .newsletter { padding: calc(64 * var(--u)) var(--gutter); }
  .newsletter__heading { width: 70%; }
}

/* =========================================================
   NEWSLETTER POPUP
   ========================================================= */
.nl-popup {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--u));
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nl-popup.is-open { opacity: 1; visibility: visible; }

.nl-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}

.nl-popup__inner {
  position: relative;
  background: var(--c-cream);
  border: var(--border) solid var(--c-black);
  width: min(88vw, calc(560 * var(--u)));
  padding: calc(72 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u));
  text-align: center;
  transform: scale(.96);
  transition: transform .3s ease;
}
.nl-popup.is-open .nl-popup__inner { transform: scale(1); }

.nl-popup__heading {
  display: block;
  width: 72%;
  height: auto;
  margin: 0 auto calc(16 * var(--u));
}

.nl-popup__close {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--c-black);
  cursor: pointer;
  padding: 0;
}
.nl-popup__close svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
  .nl-popup__inner { padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); }
  .nl-popup__heading { width: 82%; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  background: var(--c-black);
  padding: calc(40 * var(--u)) var(--gutter);
}
.footer-logo img  { height: calc(28 * var(--u)); width: auto; }
.footer-phone img { height: calc(26 * var(--u)); width: auto; }
.footer-phone { transition: transform .15s ease; }
.footer-phone:hover { transform: scale(1.04); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--u));
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
}

.lightbox__inner {
  position: relative;
  width: min(92vw, 1280px);
  transform: scale(.96);
  transition: transform .25s ease;
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }

.lightbox__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  border-radius: calc(6 * var(--u));
}

.lightbox__close {
  position: absolute;
  top: calc(-46 * var(--u));
  right: 0;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.lightbox__close svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
  .lightbox__close { top: calc(-44 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

  /* starburst badge sits in the bottom-right corner of the (smaller) video */
  .starburst {
    width: calc(150 * var(--u));
    height: calc(150 * var(--u));
    right: calc(14 * var(--u));
    bottom: calc(20 * var(--u));
  }
  /* back-layer offset halved on mobile */
  .starburst__back {
    top: calc(6.65 * var(--u));
    left: calc(-3.35 * var(--u));
  }

  /* swap inline nav for the hamburger + overlay menu */
  .site-nav   { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu { display: flex; }

  /* taller hero video on mobile */
  .hero__video { aspect-ratio: 4 / 5; }

  /* headline bleeds wider on mobile; top nudged to keep alignment */
  .climate-banner { margin: -6.4% -16% 0; }

  /* promo copy is wider on mobile */
  .premier-timeshares { width: 86%; margin-top: calc(20 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .logo-large    { width: 90%; margin-top: calc(70 * var(--u)); }
  .last-vacation.one-percent { width: 90%; margin-bottom: calc(60 * var(--u)); }
  .units-available    { width: 90%; }
  .introductory-offer { width: 86%; }
  .one-percent     { width: 80%; margin-top: calc(24 * var(--u)); margin-bottom: calc(36 * var(--u)); }

  /* slider: square on mobile (matches the 900x900 art), bigger pill, smaller ticker */
  .slider { margin-top: calc(45 * var(--u)); }
  .slide { aspect-ratio: 1 / 1; }
  .slide__bg--steel   { background-image: url('images/military-grade-steel-mobile.jpg'); }
  .slide__bg--bathing { background-image: url('images/community-bathing-mobile.jpg'); }
  .slide__bg--sunsets { background-image: url('images/solarium-mobile.jpg'); }
  .slide__fade { height: 20%; }
  .slider .slider__pill { width: 88%; top: calc(26 * var(--u)); }
  .ticker img { height: calc(15 * var(--u)); }
  .slider__dots { bottom: 12%; gap: calc(12 * var(--u)); }
  .slider__dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

  /* palms: ~50% total on mobile */
  .palms { gap: calc(16 * var(--u)); margin: calc(28 * var(--u)) auto calc(24 * var(--u)); }
  .palms img { width: calc(62 * var(--u)); }

  /* check-in / barbed-wire pair scaled down to fit */
  .checkin-row { margin-top: calc(55 * var(--u)); padding-bottom: calc(37 * var(--u)); }
  .poster { padding: calc(7 * var(--u)); }
  .poster--left, .poster--right { width: calc(200 * var(--u)); }
  .poster--right { margin-left: calc(-17 * var(--u)); }
  .one-percent .btn-fancy__inner { padding-left: calc(30 * var(--u)); padding-right: calc(30 * var(--u)); }
  /* full pill around the two-line svg */
  .one-percent .btn-fancy__ring,
  .one-percent .btn-fancy__inner { border-radius: var(--radius); }
  .bonus-offer     { width: 80%; margin-top: calc(20 * var(--u)); }

  /* merch: single column on mobile, lighter frame/shadow */
  .merch-grid {
    width: auto;
    max-width: 80%;
    gap: calc(30 * var(--u));
    margin: calc(60 * var(--u)) auto calc(36 * var(--u));   /* more space above the cards */
  }
  .merch-item {
    width: 100%;
    padding: calc(7 * var(--u));
    box-shadow: calc(3 * var(--u)) calc(4 * var(--u)) calc(11 * var(--u)) rgba(0, 0, 0, .26);
  }
  /* alternating tilt, varied angle + scale (wider variance, down to 0.87) */
  .merch-item:nth-of-type(1) { transform: rotate(-4deg)   scale(1.04); }
  .merch-item:nth-of-type(2) { transform: rotate(3deg)    scale(0.9);  }
  .merch-item:nth-of-type(3) { transform: rotate(-2deg)   scale(1.06); }
  .merch-item:nth-of-type(4) { transform: rotate(4.5deg)  scale(0.87); }
  .merch-item:nth-of-type(5) { transform: rotate(-2.5deg) scale(1);    }
  .merch-item:nth-of-type(6) { transform: rotate(3.5deg)  scale(0.92); }
  .merch-item:nth-of-type(7) { transform: rotate(-3deg)   scale(1.03); }   /* ~2x prior */

  /* banners on mobile: reserve bleeds -16% each side (like the climate banner), eotw wider */
  .merch-banner--reserve { padding-top: calc(10 * var(--u)); }
  .merch-banner--reserve img { width: 132vw; margin-left: calc(50% - 66vw); }
  .merch-banner--eotw img    { width: 90vw;  margin-top: calc(36 * var(--u)); }
  .merch-banner--eotw        { padding-bottom: calc(16 * var(--u)); }

  /* panic row inside the merch grid */
  .panic { padding: calc(18 * var(--u)) 0 calc(14 * var(--u)); }
  /* keep the mobile panic button at its prior size (desktop bumped, mobile unchanged) */
  .btn-fancy--lg .btn-fancy__ring  { padding: calc(4 * var(--u)); }
  .btn-fancy--lg .btn-fancy__inner { padding: calc(12 * var(--u)) calc(24 * var(--u)); }
  .btn-fancy--lg .btn-fancy__inner img { height: calc(20 * var(--u)); }

  /* smaller footer marks */
  .footer-logo img  { height: calc(18 * var(--u)); }
  .footer-phone img { height: calc(17 * var(--u)); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .starburst__back,
  .starburst__front { animation: none; }
  .starburst { transition: opacity .3s ease; }
  .starburst.is-hidden { transform: none; }
  * { scroll-behavior: auto; }
}