:root {
  /* Palette: lagoon teal, pool aqua, golden-hour sun, warm sand */
  --lagoon: #0E4B4F;
  --lagoon-deep: #0A3538;
  --lagoon-mid: #0C7F86;
  --jungle: #0D7A5F;
  --jungle-deep: #0A5E58;
  --aqua: #35C9C4;
  --aqua-deep: #1FB0AE;
  --aqua-soft: #DDF4F4;
  --ice: #A6EBEC;
  --sky: #6EC1EA;
  --surface: #ffffff;

  --accent: var(--aqua);
  --accent-dark: var(--aqua-deep);
  --ink: #14353A;
  --muted: #56706F;
  --border: #EADFC9;
  --bg: #FFF9EF;
  --bg-soft: #F5EAD7;

  --radius: 22px;
  --radius-lg: 36px;
  --shadow: 0 10px 30px rgba(14, 75, 79, 0.10);
  --shadow-lg: 0 24px 60px rgba(14, 75, 79, 0.20);

  --font-display: "Nunito", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-brand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --header-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); }

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

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header: transparent over the hero (.is-top, toggled by script.js), solid once scrolled */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 249, 239, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(14, 75, 79, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-top {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

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

.logo {
  font-family: var(--font-brand);
  font-size: 31px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--lagoon);
  transition: color 0.3s ease;
}

.logo span { font-weight: 600; color: var(--lagoon-mid); transition: color 0.3s ease; }

.site-header.is-top .logo { color: var(--bg); }
.site-header.is-top .logo span { color: var(--ice); }

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after { transform: scaleX(1); }

@media (min-width: 861px) {
  .site-header.is-top .nav-links a { color: var(--bg); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(31, 176, 174, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31, 176, 174, 0.55);
}

/* Over the hero photo (the pool is right behind the buttons) and on the dark teal panel, a
   turquoise button would blend in: use pale ice-blue with dark text instead */
.hero .btn-primary,
.site-header.is-top .btn-primary,
.booking-card .btn-primary {
  background: var(--ice);
  color: var(--lagoon-deep);
  box-shadow: 0 10px 26px rgba(166, 235, 236, 0.35);
}

.hero .btn-primary:hover,
.site-header.is-top .btn-primary:hover,
.booking-card .btn-primary:hover { box-shadow: 0 14px 32px rgba(166, 235, 236, 0.55); }

.btn-outline {
  background: transparent;
  color: var(--lagoon);
  border-color: var(--lagoon);
}

.btn-outline:hover {
  background: var(--lagoon);
  color: var(--bg);
}

.site-header .btn { padding: 11px 24px; font-size: 14px; }

/* Hero */
.hero {
  position: relative;
  min-height: 640px;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--bg);
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Deep-teal fade for legibility plus a soft turquoise tint */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 53, 56, 0.55) 0%, rgba(10, 53, 56, 0.08) 24%, rgba(10, 53, 56, 0.36) 50%, rgba(10, 53, 56, 0.86) 100%),
    linear-gradient(120deg, rgba(43, 181, 174, 0.22), rgba(43, 181, 174, 0) 55%);
  z-index: 1;
}

/* Wave that carries the hero into the cream page below */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(44px, 7vw, 96px);
  background: var(--bg);
  z-index: 3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 48c180 60 360 60 540 24s360-72 540-48 270 40 360 24v48H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 48c180 60 360 60 540 24s360-72 540-48 270 40 360 24v48H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-bottom: clamp(96px, 13vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.hero-content > * { animation: rise 0.8s ease both; }
.hero-content > :nth-child(2) { animation-delay: 0.08s; }
.hero-content > :nth-child(3) { animation-delay: 0.16s; }
.hero-content > :nth-child(4) { animation-delay: 0.24s; }
.hero-content > :nth-child(5) { animation-delay: 0.32s; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 249, 239, 0.45);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--font-brand);
  font-size: clamp(60px, 12vw, 140px);
  margin: 0 0 18px;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 34px rgba(10, 53, 56, 0.45);
}

.hero p {
  font-size: clamp(17px, 2vw, 20px);
  max-width: 620px;
  color: rgba(255, 249, 239, 0.96);
  text-shadow: 0 2px 18px rgba(10, 53, 56, 0.6);
  margin: 0 0 34px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero .btn-outline {
  color: var(--bg);
  border-color: rgba(255, 249, 239, 0.7);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.hero .btn-outline:hover { background: var(--bg); color: var(--lagoon); border-color: var(--bg); }

.hero-rating {
  margin-top: 36px;
  display: flex;
  gap: 8px 0;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 249, 239, 0.92);
}

.hero-rating strong { color: var(--bg); }

.hero-rating span + span::before {
  content: "\2022";
  margin: 0 14px;
  color: var(--ice);
}

/* Section shell */
section { padding: 104px 0; }

section[id] { scroll-margin-top: calc(var(--header-h) - 8px); }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lagoon-mid);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-label::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.section-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-intro {
  color: var(--muted);
  font-size: 17px;
  max-width: 640px;
  margin: 0 0 48px;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.about-text p { color: var(--muted); font-size: 17px; margin: 0 0 18px; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.stat {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 22px 12px;
  text-align: center;
}

.stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--lagoon);
}

.stat .label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Arched photo with an offset aqua shadow shape behind it */
.about-media {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}

.about-media::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: 999px 999px 36px 36px;
  background: var(--aqua-soft);
}

.about-media img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: 999px 999px 36px 36px;
  box-shadow: var(--shadow-lg);
}

/* Gallery: dark lagoon panel. One grid row is exactly 16:9 of a column width, so a
   landscape photo (1 row) is a 16:9 tile and a portrait photo (figure.tall, 3 rows) is
   almost exactly 9:16. Dense packing fills the gaps, so the order and number of
   figures can change freely; just add class="tall" to portrait photos. */
#gallery {
  /* Plain green base: this is all you see if the collage script does not run. */
  position: relative;
  background: linear-gradient(155deg, var(--jungle) 0%, var(--jungle-deep) 55%, var(--lagoon) 100%);
  margin: 0 clamp(8px, 2vw, 28px);
  border-radius: var(--radius-lg);
}

/* Backdrop collage (built by js/script.js): whole photos, each keeping its own shape (tall
   photos in tall tiles, wide photos in wide tiles), fitted exactly to the panel so nothing is
   cut off at the edges. Bottom to top: green base, photo tiles, green film, then
   the real content. */
.collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.collage-grid {
  --cols: 4;
  --rows: 12;
  --collage-gap: 16px;
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: var(--collage-gap);
}

.collage-tile {
  overflow: hidden;
  border-radius: 30px;
  background: var(--jungle-deep);
}

.collage-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(13, 122, 95, 0.70) 0%, rgba(10, 94, 88, 0.76) 55%, rgba(14, 75, 79, 0.84) 100%);
}

#gallery .container { container-type: inline-size; position: relative; z-index: 1; }
#gallery .section-label,
#gallery .section-title,
#gallery .section-intro { text-shadow: 0 1px 14px rgba(4, 30, 32, 0.6); }
#gallery .section-label { color: var(--ice); }
#gallery .section-title { color: var(--bg); }
#gallery .section-intro { color: rgba(255, 249, 239, 0.78); }

.gallery-grid {
  --cols: 3;
  --gap: 22px;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 150px;
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 0.5625);
  grid-auto-flow: dense;
  gap: var(--gap);
}

.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  background: var(--lagoon-deep);
  box-shadow: 0 10px 28px rgba(4, 30, 32, 0.35);
}

.gallery-grid figure.tall { grid-row: span 3; }
/* figure.mid: a landscape photo shown as a taller (about 4:5) tile. Used once so the total
   number of rows divides evenly into 2 and 3 columns and every column ends level. */
.gallery-grid figure.mid { grid-row: span 2; }

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-grid figure:hover img { transform: scale(1.05); }

/* Amenities */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.amenity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.amenity-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: var(--aqua);
}

.amenity-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aqua-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 26px;
}

.amenity-card h3 { margin: 2px 0 6px; font-size: 19px; font-weight: 800; }
.amenity-card p { margin: 0; font-size: 15px; color: var(--muted); }

/* Rooms */
#rooms { background: var(--bg-soft); }

.rooms-summary {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 44px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}

.rooms-summary .item .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--aqua-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.rooms-summary .item .title { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.rooms-summary .item .desc { font-size: 14px; color: var(--muted); }

/* Reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.review-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 5px solid var(--aqua);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 28px 26px;
}

.review-card:nth-child(3n+2) { border-top-color: var(--sky); }
.review-card:nth-child(3n) { border-top-color: var(--lagoon-mid); }

/* Three cards per row on desktop, on a 6-column grid so an incomplete last row is centred
   (e.g. 5 reviews = 3 + 2, 4 reviews = 3 + 1) instead of hugging the left edge. */
@media (min-width: 861px) {
  .reviews-grid { grid-template-columns: repeat(6, 1fr); }
  .review-card { grid-column: span 2; }
  .review-card:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .review-card:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}

.review-card p {
  margin: 0 0 22px;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.7;
}

.review-card footer {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.review-card footer strong { font-size: 15px; color: var(--lagoon); }
.review-card footer span { color: var(--muted); margin-top: 2px; }

/* Location */
#location { background: var(--bg-soft); }

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.location-info ul {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.location-info li {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(14, 75, 79, 0.25);
  font-size: 15px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.location-info li span:last-child { color: var(--lagoon); font-weight: 700; text-align: right; }

.map-frame {
  border-radius: var(--radius-lg);
  border: 8px solid var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 340px;
}

.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

/* Contact / Booking: a deep turquoise-to-lagoon panel */
#contact { padding-bottom: 96px; }

.booking-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lagoon-mid) 0%, var(--lagoon) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 80px 32px;
  text-align: center;
  color: var(--bg);
}

/* Soft pool-light glow, top right */
.booking-card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -90px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 235, 236, 0.4), rgba(166, 235, 236, 0) 68%);
  pointer-events: none;
}

.booking-card > * { position: relative; }

.booking-card h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.booking-card p { font-size: 18px; max-width: 520px; margin: 0 auto 34px; }

.booking-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.booking-card .booking-note { font-size: 15px; margin: 28px auto 0; color: rgba(255, 249, 239, 0.82); }
.booking-note a { text-decoration: underline; text-underline-offset: 3px; }
.booking-note a:hover { color: var(--ice); }

.booking-card .btn-outline { color: var(--bg); border-color: rgba(255, 249, 239, 0.7); }
.booking-card .btn-outline:hover { background: var(--bg); color: var(--lagoon-deep); border-color: var(--bg); }

/* Footer */
.site-footer {
  background: var(--lagoon-deep);
  padding: 40px 0;
  color: rgba(255, 249, 239, 0.72);
  font-size: 14px;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 38, 0.94);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 30px;
  color: var(--bg);
  font-size: 40px;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 249, 239, 0.16);
  border: 1px solid rgba(255, 249, 239, 0.3);
  color: var(--bg);
  font-size: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lightbox-nav:hover { background: var(--ice); color: var(--lagoon-deep); border-color: var(--ice); }

.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.3s ease;
}

.site-header.is-top .nav-toggle span { background: var(--bg); }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Responsive */
@media (max-width: 860px) {
  section { padding: 84px 0; }
  .about-grid, .location-grid { grid-template-columns: 1fr; gap: 48px; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-summary { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-card { padding: 56px 24px; }

  .nav-toggle { display: flex; }

  /* Keep the booking button in the bar on phones: it is the whole point of the site */
  .site-header .btn-primary { margin-left: auto; padding: 10px 18px; font-size: 13px; }

  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-links.open { max-height: 420px; }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 16px 24px;
    border-bottom: 1px dashed var(--border);
  }

  .nav-links a::after { display: none; }
}

@media (max-width: 700px) {
  .collage-grid { --collage-gap: 12px; }
  .collage-tile { border-radius: 22px; }
  .gallery-grid { --cols: 2; --gap: 14px; }
  .gallery-grid figure { border-radius: 22px; }
}

@media (max-width: 520px) {
  section { padding: 64px 0; }
  .amenities-grid { grid-template-columns: 1fr; }
  .rooms-summary { grid-template-columns: 1fr 1fr; padding: 32px 16px; gap: 24px 12px; }
  .reviews-grid { grid-template-columns: 1fr; }
  #gallery { border-radius: 28px; }
  .site-header .container { gap: 10px; }
  .logo { font-size: 24px; white-space: nowrap; }
  .site-header .btn-primary { padding: 9px 14px; white-space: nowrap; }

  /* Hero: never grow taller than the phone allows without pushing text under the header,
     darken the photo further down where the text sits, and give the buttons one shared width */
  .hero { height: auto; min-height: 100svh; padding-top: calc(var(--header-h) + 20px); }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(10, 53, 56, 0.55) 0%, rgba(10, 53, 56, 0.4) 30%, rgba(10, 53, 56, 0.62) 55%, rgba(10, 53, 56, 0.9) 100%),
      linear-gradient(120deg, rgba(43, 181, 174, 0.22), rgba(43, 181, 174, 0) 55%);
  }
  .hero img { object-position: 32% center; }
  .hero-content { padding-bottom: 56px; }
  .hero-eyebrow { font-size: 13px; padding: 7px 14px; margin-bottom: 16px; }
  .hero h1 { margin-bottom: 14px; }
  .hero p { font-size: 16px; margin-bottom: 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; }
  .hero-rating { flex-direction: column; align-items: center; gap: 2px; margin-top: 22px; font-size: 13px; }
  .hero-rating span + span::before { display: none; }
  .about-stats { gap: 10px; }
  .stat .num { font-size: 26px; }
}

@media (max-width: 380px) {
  .logo { font-size: 21px; }
  .site-header .btn-primary { padding: 8px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}