/* Montserrat Font — body copy sitewide */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap");
/* Playball — bold rounded script for hero h1 titles */
@import url("https://fonts.googleapis.com/css2?family=Playball&display=swap");

/* HEADING FONT — Cormorant Garamond, sitewide */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

/* ===== PREMIUM SUB-PAGE HERO ===== */
/* Reusable, upgraded hero for interior pages (bar & restaurant, conference,
   special offers, blog, etc). Fraunces serif display paired with the site's
   Montserrat, a soft bottom scrim so the photography stays the star, and a
   single thin gold rule as the only ornament — restraint over decoration. */
.premium-hero {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: 58vh auto;
  overflow: visible;
  isolation: isolate;
}
.premium-hero-bg {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center;
  filter: brightness(1) saturate(1.05);
  animation: premiumHeroDrift 26s ease-in-out infinite alternate;
}
@keyframes premiumHeroDrift {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .premium-hero-bg { animation: none; }
}
/* Full-bleed crossfade slideshow — used instead of the marquee strip for
   the premium sub-page hero. One image visible at a time, auto-advances
   via JS by toggling .active, smooth CSS opacity crossfade. Fixes mobile
   cropping since each slide covers the full box (both axes), not just
   full height like the old scrolling strip did. */
.premium-hero-slideshow {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.premium-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.premium-hero-slide.active {
  opacity: 1;
  z-index: 1;
}
.premium-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(1) saturate(1.05);
  transform: scale(1.05);
  transform-origin: center 35%;
}
@media (prefers-reduced-motion: reduce) {
  .premium-hero-slide { transition: none; }
}
.premium-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(1) saturate(1.05);
}
.premium-hero-overlay {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(78, 27, 13,0) 0%, rgba(78, 27, 13,0) 45%, rgba(78, 27, 13,0.42) 100%);
  pointer-events: none;
}
.premium-hero-rule {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--gold);
  opacity: 0.85;
}
/* Caption band — sits BELOW the photo, not on top of it. Solid light
   background so text is always fully legible against any photo. */
.premium-hero-content {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 44px 40px 48px;
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-warm-white);
}
.premium-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 18px;
}
.premium-hero-eyebrow::before,
.premium-hero-eyebrow::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
}
.premium-hero-content h1 {
  font-family: 'Playball', cursive;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--logo-brown);
  margin-bottom: 16px;
  line-height: 1.2;
}
.premium-hero-content h1 em {
  font-style: normal;
  color: var(--oxblood);
}
@media(max-width: 640px) {
  .premium-hero-content h1 { font-size: 44px; }
}
.premium-hero-sub {
  margin-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--logo-brown);
}
@media(max-width: 640px) {
  .premium-hero-content { padding: 50px 26px 40px; }
  .premium-hero-sub { font-size: 17.5px; }
  .premium-hero-slide img,
  .premium-hero-video { object-position: center 30%; }
}

/* ===== CAROUSEL PAGINATION DOTS (shared by premium-hero-slideshow
   and the app-hero mobile carousel) — injected by shared JS ===== */
.carousel-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}
.carousel-dots .carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel-dots .carousel-dot.active {
  width: 18px;
  border-radius: 4px;
  background: var(--gold);
}
.premium-hero-slideshow, .app-hero-slideshow-wrap {
  touch-action: pan-y;
}
/* app-hero's search card overlaps the hero's bottom ~44px, so lift its
   dots clear of that overlap instead of using the generic bottom offset. */
.app-hero .carousel-dots { bottom: 58px; }

/* ============ SHARED AFRICAN HILL RESORT STYLES ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --color-primary-green: var(--oxblood); /* main accent: section titles, stat numbers, top-bar icons */
  --gold: var(--oxblood); /* legacy name kept for compatibility — now maps to oxblood */
  --oxblood: #6C1C11; /* oxblood — navbar background, hero-page h1 titles */
  --color-dark-green: var(--oxblood);
  --color-mid-green: var(--oxblood);
  --color-cream: #ffffff;
  --color-warm-white: #ffffff;
  --logo-brown: #4E1B0D; /* brand brown, sampled from the logo — replaces black sitewide */
  --color-text-dark: var(--logo-brown);
  --color-text-light: #ffffff;
  --color-text-muted: var(--logo-brown);
  --color-border: var(--logo-brown);
  --color-overlay-dark: rgba(78, 27, 13, 0.45);
  --burgundy: var(--oxblood); /* legacy name kept for compatibility — now maps to oxblood */
  --burgundy-dark: var(--oxblood); /* legacy name kept for compatibility — now maps to oxblood */
  --cream: #ffffff;
  --cream-mid: #ffffff;
  --section-bg: #ffffff;
  --text-dark: var(--logo-brown);
  --text-mid: var(--logo-brown);
  --text-light: var(--logo-brown);
  --white: #fff;
}
html, body { margin-bottom: 0; padding-bottom: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; color: var(--text-dark); background: var(--color-warm-white); overflow-x: hidden; font-size: 15px; }
h1, h2, h3, h4, .hero-title, .hero-subtitle-heading, .section-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: 0.03em; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
p, li, a, label, input, textarea, select, button { font-size: inherit; }

/* ===== TOP BAR ===== */
.top-bar {
  background: var(--oxblood);
  padding: 10px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.top-bar-contact {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.top-bar-contact i { color: #ffffff; font-size: 10px; }
.top-bar-contact:hover { color: #ffffff; opacity: 0.75; }
.top-bar-right { display: flex; align-items: center; gap: 16px; }
.top-bar-right a { color: #ffffff; font-size: 13px; transition: color 0.2s, opacity 0.2s; }
.top-bar-right a:hover { color: #ffffff; opacity: 0.75; }
/* Legacy: pages that still use .social-icons inside .top-bar */
.top-bar .social-icons { display: flex; gap: 14px; align-items: center; }
.top-bar .social-icons a { color: #ffffff; font-size: 16px; transition: color 0.2s, opacity 0.2s; }
.top-bar .social-icons a:hover { color: #ffffff; opacity: 0.75; }

/* ===== NAVBAR ===== */
.navbar {
  background: var(--oxblood);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  box-shadow: 0 2px 20px rgba(78, 27, 13,0.3);
  transition: min-height 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
  min-height: 60px;
  box-shadow: 0 4px 30px rgba(78, 27, 13,0.4);
}
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  opacity: 0.6;
}
.navbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar-logo img { height: 66px; width: auto; max-width: none; object-fit: contain; flex-shrink: 0; }
/* Desktop: drop the logo so the full nav-links row (including Book Now) has room to fit without clipping */
@media (min-width: 901px) {
  .navbar-logo { display: none; }
  .nav-links { flex: 1 1 auto; justify-content: center; }
}
.navbar-logo-placeholder { display: flex; align-items: center; gap: 0; }
.navbar-logo-text {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
}
.navbar-logo-sub {
  color: var(--cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

.nav-links { display: flex; align-items: center; list-style: none; }
.nav-links li a {
  display: block;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 28px 11px;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
}
/* White underline slide-in on hover */
.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: #ffffff;
  transition: left 0.25s, right 0.25s;
}
.nav-links li a:hover { color: #ffffff; opacity: 0.75; }
.nav-links li a:hover::after,
.nav-links li a.active::after { left: 11px; right: 11px; }
.nav-links li a.active { color: #ffffff; }

.nav-links li.book-now a {
  background: #ffffff;
  color: #4E1B0D;
  border: 2px solid #4E1B0D;
  padding: 8px 20px;
  border-radius: 50px;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.nav-links li.book-now a::after { display: none; }
.nav-links li.book-now a:hover { background: var(--oxblood); color: #ffffff; border-color: var(--oxblood); transform: translateY(-1px); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 26px; height: 2px; background: #ffffff; border-radius: 2px; transition: all 0.3s; }

/* ===== MOBILE NAVBAR CENTER TITLE ===== */
.navbar-mobile-title {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== BUTTONS ===== */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 15px 38px;
  border: 2px solid #4E1B0D;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.15s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn-gold:hover {
  background: var(--oxblood);
  color: #ffffff;
  border-color: var(--oxblood);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108,28,17,0.35);
}
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 13px 36px;
  border: 2px solid #4E1B0D;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
  white-space: nowrap;
}
.btn-outline-white:hover {
  background: var(--oxblood);
  color: #ffffff;
  border-color: var(--oxblood);
  transform: translateY(-2px);
}
.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 34px;
  border: 2px solid #4E1B0D;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.15s;
  white-space: nowrap;
}
.btn-outline-gold:hover {
  background: var(--oxblood);
  color: #ffffff;
  border-color: var(--oxblood);
  transform: translateY(-2px);
}

/* ===== SECTION TITLES ===== */
.section-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--color-primary-green); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; }
.gold-divider { width: 50px; height: 2px; background: var(--gold); margin: 0 0 20px; }
.gold-divider-left { width: 60px; height: 2px; background: var(--gold); margin: 0 0 20px; }

/* ===== SECTION LABEL ===== */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 16px;
}
.section-label::after {
  content: '';
  display: block;
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* ===== PAGE HERO BANNER (inner pages) ===== */
.page-hero { position: relative; width: 100%; min-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.75); }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(78, 27, 13,0.25) 0%, rgba(78, 27, 13,0.45) 40%, rgba(78, 27, 13,0.65) 100%); }
.page-hero-content { position: relative; z-index: 2; text-align: center; padding: 80px 40px; }
.page-hero-content h1 { font-family: 'Cormorant Garamond', serif; font-size: 58px; font-weight: 400; color: #ffffff; line-height: 1.12; margin-bottom: 8px; letter-spacing: 0.05em; text-shadow: 0 2px 16px rgba(78, 27, 13,0.4); }
.page-hero-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #ffffff; margin-top: 10px; }

.page-hero-section {
  position: relative; width: 100%; min-height: 360px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.page-hero-section .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.75);
}
.page-hero-section .hero-overlay {
  position: absolute; inset: 0;
  background: rgba(78, 27, 13,0.4);
}
.page-hero-section .hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 80px 40px;
}
.page-hero-section .hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 800; color: #fff; margin-bottom: 8px;
}
.page-hero-section .hero-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: #ffffff; margin-top: 10px;
}

/* ===== SHARED CONTENT BODY ===== */
.content-body { max-width: 1100px; margin: 0 auto; padding: 80px 60px; }

/* ============================================================
   INDEX PAGE — HOMEPAGE-SPECIFIC STYLES
   ============================================================ */

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: 62vh auto;
  background: var(--color-warm-white);
  overflow: visible;
}
.hero-marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-marquee-row {
  display: flex;
  height: 100%;
  width: max-content;
  animation: heroMarqueeScroll 34s linear infinite;
}
.hero-marquee-row img {
  height: 100%;
  width: auto;
  max-width: none;
  min-width: 640px;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
  filter: brightness(0.9);
}
@keyframes heroMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-row { animation: none; }
}
@media (max-width: 640px) {
  .hero-marquee-row { animation-duration: 20s; }
  .hero-marquee-row img { min-width: 100vw; max-width: 100vw; }
}
.hero-overlay {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(78, 27, 13,0.05) 0%,
    rgba(78, 27, 13,0.1) 40%,
    rgba(78, 27, 13,0.2) 75%,
    rgba(78, 27, 13,0.3) 100%
  );
}
.hero-vignette {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(78, 27, 13,0.15) 100%);
}
.hero-content {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 40px 52px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  background: var(--color-warm-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 20px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
}
.hero-content h1 {
  font-family: 'Playball', cursive;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--logo-brown);
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero-content h1 em {
  font-style: normal;
  color: var(--oxblood);
}
@media(max-width: 640px) {
  .hero-content h1 { font-size: 44px; }
}
.hero-location {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--logo-brown);
  margin: 14px 0 30px;
}
.hero-subtitle {
  color: var(--logo-brown);
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  margin-bottom: 44px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.hero-subtitle strong { color: var(--oxblood); font-weight: 700; }
.hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  animation: bounce 2s ease-in-out infinite;
}
.hero-scroll span {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}
.hero-scroll i { color: var(--oxblood); font-size: 14px; }
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ===== AVAILABILITY CHECKER ===== */
.av-card {
  background: #ffffff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(78,27,13,0.12);
  border-radius: 16px;
  padding: 28px 36px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: end;
  box-shadow: 0 20px 60px rgba(78, 27, 13,0.15);
}
.av-card-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -6px;
}
.av-card-label span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--oxblood);
  letter-spacing: 0.5px;
}
.av-card-label::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.av-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.av-field label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--logo-brown);
  display: flex;
  align-items: center;
  gap: 6px;
}
.av-field label i { color: var(--oxblood); }
.av-field .input-wrap {
  display: flex;
  align-items: center;
  background: rgba(78,27,13,0.04);
  border: 1.5px solid rgba(78,27,13,0.15);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 48px;
}
.av-field .input-wrap:focus-within {
  border-color: var(--oxblood);
  box-shadow: 0 0 0 3px rgba(108,28,17,0.3);
}
.av-field .input-wrap i {
  padding: 0 12px;
  font-size: 13px;
  color: var(--oxblood);
  flex-shrink: 0;
}
.av-field input[type="date"] {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--logo-brown);
  padding: 0 12px 0 0;
  width: 100%;
  cursor: pointer;
  height: 100%;
  color-scheme: light;
}
.av-nights {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: var(--logo-brown);
  min-height: 16px;
  letter-spacing: 1px;
}
.av-nights span { color: var(--oxblood); font-weight: 700; font-size: 12px; }
.av-err {
  grid-column: 1 / -1;
  background: rgba(108,28,17,0.1);
  border: 1px solid rgba(108,28,17,0.35);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--oxblood);
  text-align: center;
  display: none;
}
.av-summary {
  grid-column: 1 / -1;
  background: rgba(108,28,17,0.06);
  border: 1.5px solid rgba(108,28,17,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  display: none;
}
.av-summary p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--logo-brown);
  line-height: 1.8;
}
.av-summary strong { color: var(--oxblood); }
.av-summary .av-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  color: var(--logo-brown);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 6px;
  text-align: center;
  display: block;
}
.av-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: end;
  min-width: 160px;
}
.av-btn-check {
  background: #ffffff;
  color: #4E1B0D;
  border: 2px solid #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  height: 48px;
}
.av-btn-check:hover { background: var(--oxblood); color: #ffffff; border-color: var(--oxblood); transform: translateY(-1px); }
.av-btn-proceed {
  display: none;
  background: #ffffff;
  color: #4E1B0D;
  border: 2px solid #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.av-btn-proceed:hover { background: var(--oxblood); color: #ffffff; border-color: var(--oxblood); }

/* ===== ABOUT SECTION ===== */
.about-section {
  background: var(--white);
  padding: 90px 80px 90px;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-text-col h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 28px;
}
.about-text-col h2 em { font-style: italic; color: var(--oxblood); }
.about-text-col p {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-mid);
  margin-bottom: 20px;
}
.about-text-col p strong { color: var(--text-dark); font-weight: 700; }
.about-cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.about-stats-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.stat-box {
  background: var(--section-bg);
  border: 1px solid rgba(78, 27, 13,0.06);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 0.25s, transform 0.25s;
}
.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(78, 27, 13,0.08);
}
.stat-box i { font-size: 22px; color: var(--oxblood); margin-bottom: 12px; }
.stat-box .stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--color-primary-green);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-box .stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ===== AMENITIES STRIP ===== */
.amenities-strip {
  background: var(--oxblood);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  border-top: 3px solid #ffffff;
}
.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 40px;
  border-right: 1px solid rgba(255,255,255,0.25);
  min-width: 150px;
}
.amenity-item:last-child { border-right: none; }
.amenity-item i { font-size: 34px; color: #ffffff; }
.amenity-item span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

/* ===== CTA BANNER — signature-style square photo grid (image only, no text) ===== */
.cta-banner {
  position: relative;
  width: 100%;
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  overflow: hidden;
}
.cta-leaves-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cta-leaf-scatter {
  position: absolute;
  color: #6b9c53;
  opacity: 0.45;
  filter: drop-shadow(0 3px 5px rgba(78, 27, 13,0.1));
}
.cta-leaf-scatter-1 { top: 8%; left: 6%; font-size: 30px; transform: rotate(-20deg); }
.cta-leaf-scatter-2 { top: 18%; left: 22%; font-size: 16px; transform: rotate(45deg); opacity: 0.3; }
.cta-leaf-scatter-3 { top: 4%; left: 42%; font-size: 22px; transform: rotate(15deg); }
.cta-leaf-scatter-4 { top: 14%; right: 30%; font-size: 18px; transform: rotate(-55deg); opacity: 0.3; }
.cta-leaf-scatter-5 { top: 6%; right: 10%; font-size: 28px; transform: rotate(30deg); }
.cta-leaf-scatter-6 { top: 48%; left: 3%; font-size: 20px; transform: rotate(70deg); opacity: 0.35; }
.cta-leaf-scatter-7 { top: 55%; right: 5%; font-size: 24px; transform: rotate(-15deg); }
.cta-leaf-scatter-8 { bottom: 10%; left: 16%; font-size: 18px; transform: rotate(-40deg); opacity: 0.3; }
.cta-leaf-scatter-9 { bottom: 14%; left: 46%; font-size: 26px; transform: rotate(20deg); }
.cta-leaf-scatter-10 { bottom: 6%; right: 22%; font-size: 20px; transform: rotate(60deg); opacity: 0.35; }
.cta-leaf-scatter-11 { bottom: 20%; right: 8%; font-size: 16px; transform: rotate(-25deg); opacity: 0.3; }
.cta-leaf-scatter-12 { top: 36%; left: 48%; font-size: 15px; transform: rotate(80deg); opacity: 0.25; }
.cta-photo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 24px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.cta-photo-card { position: relative; text-align: center; }
.cta-photo-wrap { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.cta-photo {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f5efe6;
  border: 5px solid #ffffff;
  box-shadow: 0 16px 34px rgba(78,27,13,0.22);
}
.cta-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-leaf {
  position: absolute;
  color: #6b9c53;
  font-size: 20px;
  filter: drop-shadow(0 3px 5px rgba(78, 27, 13,0.18));
  pointer-events: none;
}
.cta-leaf-1 { top: -8px; right: 6px; font-size: 26px; transform: rotate(18deg); }
.cta-leaf-2 { bottom: -4px; left: -16px; font-size: 20px; transform: rotate(-35deg); }
.cta-leaf-3 { bottom: 22px; right: -18px; font-size: 16px; transform: rotate(65deg); }
@media(max-width:900px){ .cta-photo-grid{ grid-template-columns:repeat(2,1fr); gap:28px 18px; } .cta-photo-wrap{ width:160px; height:160px; } }
@media(max-width:480px){ .cta-photo-grid{ gap:20px 14px; } .cta-photo-wrap{ width:135px; height:135px; } }
@media(max-width:640px){
  .cta-leaf-scatter-2, .cta-leaf-scatter-4, .cta-leaf-scatter-6, .cta-leaf-scatter-11, .cta-leaf-scatter-12 { display: none; }
  .cta-leaf-scatter { opacity: 0.3; }
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  background: var(--section-bg);
  padding: 90px 0 80px;
  overflow: hidden;
}
.testimonials-inner { max-width: 1300px; margin: 0 auto; padding: 0 48px; margin-bottom: 48px; }
.testimonials-header { margin-bottom: 8px; }
.testimonials-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--burgundy);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.testimonials-header h2 em { color: var(--gold); font-style: italic; }
.stars-gold { color: var(--burgundy); font-size: 16px; letter-spacing: 3px; }
.testimonials-wrapper { max-width: 1300px; margin: 0 auto; padding: 0 48px; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  min-height: 168px;
}
.testimonials-grid.is-visible { opacity: 1; transform: translateY(0); }
.testimonial-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(108,28,17,0.15);
  border-radius: 12px;
  padding: 18px 18px 16px;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.testimonial-card:hover {
  background: #ffffff;
  border-color: var(--burgundy);
  transform: translateY(-2px);
}
.testimonial-card .stars {
  color: var(--oxblood);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.testimonial-card p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #4E1B0D;
  margin-bottom: 14px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial-card .reviewer {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--oxblood);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--burgundy-dark);
  letter-spacing: 0.5px;
}
.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.testimonial-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(108,28,17,0.25);
  background: rgba(255,255,255,0.9);
  color: var(--burgundy);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.testimonial-arrow:hover:not(:disabled) {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
  transform: scale(1.05);
}
.testimonial-arrow:disabled { opacity: 0.35; cursor: default; }
.testimonial-dots { display: flex; align-items: center; gap: 8px; }
.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(108,28,17,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.testimonial-dot:hover { background: rgba(108,28,17,0.5); }
.testimonial-dot.active { background: var(--burgundy); transform: scale(1.25); }

/* ===== GALLERY SECTION ===== */
.gallery-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.gallery-image-side { overflow: hidden; position: relative; }
.gallery-image-side img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.gallery-image-side:hover img { transform: scale(1.04); }
.gallery-text-side {
  background: var(--cream-mid);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 64px;
}
.gallery-text-side h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 20px;
}
.gallery-text-side h2 em { color: var(--oxblood); font-style: italic; }
.gallery-text-side p {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 36px;
}

/* ===== IMAGE CARD CAROUSEL =====
   Cards slide continuously in a seamless loop (CSS transform only,
   cheap to animate). Each card is a rounded oxblood/white "frame"
   with the photo inset and rounded — no caption area, matching the
   reference layout but without its empty text space below the photo. */
.gallery-cards-section {
  background: #ffffff;
  padding: 60px 0;
  overflow: hidden;
}
.gallery-cards-track {
  display: flex;
  width: max-content;
  animation: galleryCardsScroll 46s linear infinite;
}
.gallery-cards-track:hover { animation-play-state: paused; }
.gallery-cards-row {
  display: flex;
  gap: 22px;
  padding: 0 11px;
}
.gallery-card {
  flex-shrink: 0;
  width: 230px;
  height: 300px;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(78, 27, 13,0.18);
  display: flex;
}
.gallery-card-oxblood { background: var(--oxblood); }
.gallery-card-white { background: #ffffff; border: 2px solid #4E1B0D; }
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
@keyframes galleryCardsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-cards-track { animation: none; }
}
@media (max-width: 900px) {
  .gallery-card { width: 190px; height: 250px; border-radius: 22px; }
}
@media (max-width: 640px) {
  .gallery-cards-section { padding: 40px 0; }
  .gallery-card { width: 150px; height: 200px; border-radius: 18px; padding: 8px; }
  .gallery-card img { border-radius: 12px; }
  .gallery-cards-row { gap: 14px; padding: 0 7px; }
}

/* ===== LOCATION SECTION ===== */
.location-section {
  background: var(--section-bg);
  padding: 90px 80px;
}
.location-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.location-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 20px;
}
.location-text h2 em { color: var(--oxblood); font-style: italic; }
.location-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 16px;
}
.location-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.location-info-item i { color: var(--oxblood); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.location-info-item span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}
.location-info-item a { color: var(--burgundy); font-weight: 700; }
.location-info-item a:hover { color: var(--oxblood); }
.map-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(78, 27, 13,0.12);
  border: 1px solid rgba(78, 27, 13,0.06);
  height: 400px;
}
.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

/* ===== FOOTER ===== */
.footer { background: #ffffff; padding: 80px 80px 0; overflow: hidden; }
.footer-top {
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(108,28,17,0.18);
}
.footer-logo-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.footer-logo-col img { max-width: 130px; }
.footer-logo-text { color: var(--burgundy); font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.footer-logo-sub { color: var(--burgundy); font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 3px; }
.footer-book-btn {
  display: inline-block;
  background: #ffffff;
  color: #4E1B0D;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 2px solid #4E1B0D;
  border-radius: 50px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.footer-book-btn:hover { background: var(--oxblood); color: #ffffff; border-color: var(--oxblood); transform: translateY(-2px); }
.footer-col-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 22px;
}
.footer-info-col p, .footer-info-col a {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--burgundy);
}
.footer-info-col a:hover { color: #4E1B0D; }
.footer-info-col strong { color: var(--burgundy); font-weight: 700; }
.footer-hours-col p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--burgundy);
}
.footer-hours-col strong { color: var(--burgundy); font-weight: 700; }
.footer-social { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(108,28,17,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--burgundy);
  font-size: 14px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social a:hover { color: #fff; border-color: var(--burgundy); background: var(--burgundy); }
.footer-nav {
  padding: 30px 0;
  border-top: 1px solid rgba(108,28,17,0.15);
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.footer-nav a {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--burgundy);
  padding: 6px 14px;
  transition: color 0.2s;
}
.footer-nav a:hover { color: #4E1B0D; }
.footer-bottom {
  background: var(--burgundy);
  padding: 18px 80px;
  text-align: center;
  margin: 0 -80px -0px;
  display: block;
}
.footer-bottom p {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #ffffff;
}
.footer-bottom a { color: #ffffff; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--gold); }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ffffff;
  z-index: 2000; flex-direction: column; overflow-y: auto;
}
.mobile-menu::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('images/nkyinkyim-medi.png') repeat;
  background-size: 480px 480px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.mobile-menu > * {
  position: relative;
  z-index: 1;
}
.mobile-menu.open { display: flex; }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(108,28,17,0.25);
  flex-shrink: 0;
}
.mobile-menu-logo {
  color: var(--burgundy); font-family: 'Montserrat', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: 1.5px;
}
.mobile-menu-close {
  background: none; border: 1.5px solid rgba(108,28,17,0.6); border-radius: 50%;
  color: var(--burgundy); font-size: 30px; cursor: pointer;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mobile-menu-close:hover { background: rgba(108,28,17,0.15); }
.mobile-menu-body { padding: 12px 0; flex: 1; }
.mobile-menu-body a {
  display: flex !important; align-items: center !important;
  font-family: 'Montserrat', sans-serif; font-size: 16px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  color: var(--burgundy) !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid rgba(108,28,17,0.12) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.2s, background 0.2s !important;
  visibility: visible !important; opacity: 1 !important;
}
.mobile-menu-body a:hover { color: var(--burgundy) !important; background: rgba(108,28,17,0.08) !important; }
.mobile-menu-footer {
  padding: 24px 28px;
  border-top: 1px solid rgba(108,28,17,0.25);
  flex-shrink: 0;
}
.mobile-menu-footer p {
  font-family: 'Montserrat', sans-serif; font-size: 13px !important;
  color: var(--burgundy) !important; margin-bottom: 12px !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
}
.mobile-menu-socials { display: flex; gap: 18px; }
.mobile-menu-socials a { color: var(--burgundy) !important; font-size: 16px !important; transition: color 0.2s, opacity 0.2s !important; padding: 0 !important; border-bottom: none !important; background: transparent !important; }
.mobile-menu-socials a:hover { color: var(--oxblood) !important; opacity: 0.6 !important; }

/* ===== MOBILE BOOK LINK — prominent pill ===== */
.mobile-menu-body a.book-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 24px 28px 8px !important;
  padding: 18px 28px !important;
  background: #ffffff !important;
  color: #4E1B0D !important;
  border: 2px solid #4E1B0D !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  letter-spacing: 2.5px !important;
  font-weight: 800 !important;
  box-shadow: none;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
.mobile-menu-body a.book-link:hover {
  background: var(--oxblood) !important;
  color: #ffffff !important;
  border-color: var(--oxblood) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .about-section { padding: 80px 48px 70px; gap: 50px; }
  .footer { padding: 70px 48px 0; }
  .footer::before { margin: -70px -48px 70px; }
  .footer-bottom { padding: 18px 48px; margin: 0 -48px; display: block; }
  .location-section { padding: 80px 48px; }
  .gallery-text-side { padding: 50px 44px; }
  .nav-links li a { font-size: 9.5px; padding: 26px 8px; }
}
@media (max-width: 900px) {
  .top-bar { display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .navbar { padding: 0 24px; min-height: 64px; position: sticky; }
  .navbar-mobile-title { display: block; }
  .navbar-logo img { height: 46px; }

  .hero { min-height: 100vh; }
  .hero-content { padding: 80px 24px 60px; }
  .hero-subtitle { font-size: 20px; }

  .premium-hero { min-height: 100vh; }

  .av-card { grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px 22px; }
  .av-btn-group { grid-column: 1 / -1; flex-direction: row; justify-content: center; }

  .about-section { grid-template-columns: 1fr; padding: 70px 32px 60px; gap: 48px; }
  .about-text-col h2 { font-size: 32px; }
  .about-stats-col { grid-template-columns: 1fr 1fr; }

  .amenities-strip { gap: 0; padding: 40px 20px; }
  .amenity-item { padding: 18px 20px; min-width: 110px; }
  .amenity-item i { font-size: 28px; }

  .gallery-section { grid-template-columns: 1fr; }
  .gallery-image-side { height: 280px; }
  .gallery-text-side { padding: 50px 32px; }

  .location-inner { grid-template-columns: 1fr; }
  .location-section { padding: 70px 32px; }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer { padding: 60px 32px 0; }
  .footer::before { margin: -60px -32px 60px; }
  .footer-bottom { padding: 16px 32px; margin: 0 -32px; display: block; }

  .page-hero-content h1 { font-size: 36px; }
}
@media (max-width: 640px) {
  .hero { min-height: 75vh; }
  .hero-marquee-row img {
    width: 100vw;
    min-width: 100vw;
    height: 100%;
    object-position: center 38%;
  }
  .hero-marquee-row { animation-duration: 40s; }
  .hero-content { padding: 60px 20px 50px; }
  .hero-location { font-size: 14px; letter-spacing: 3px; }
  .hero-eyebrow { font-size: 13px; letter-spacing: 3px; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 24px; }
  .hero-subtitle { font-size: 18px; font-weight: 700; }
  .hero-cta-row { gap: 12px; }
  .hero-scroll { display: none; }

  .av-card { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
  .av-card-label { margin-bottom: 0; }
  .av-btn-group { grid-column: 1; flex-direction: column; }
  .av-btn-check, .av-btn-proceed { width: 100%; }

  .about-section { padding: 60px 20px 50px; }
  .about-text-col h2 { font-size: 26px; margin-bottom: 16px; }
  .about-text-col p { font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
  .about-stats-col { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-box { padding: 20px 16px; }
  .stat-box .stat-num { font-size: 24px; }

  .amenities-strip { padding: 32px 16px; }
  .amenity-item { padding: 14px 16px; min-width: 100px; }
  .amenity-item i { font-size: 24px; }
  .amenity-item span { font-size: 10px; }

  .cta-banner { padding: 28px 16px; }

  .gallery-text-side { padding: 40px 20px; }
  .gallery-text-side h2 { font-size: 26px; }

  .testimonials-section { padding: 70px 0 60px; }
  .testimonials-inner { padding: 0 20px; }
  .testimonials-header h2 { font-size: 26px; }
  .testimonials-wrapper { padding: 0 20px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 12px; }
  .testimonial-card { padding: 16px 16px 14px; }
  .testimonials-nav { margin-top: 20px; gap: 14px; }

  .location-section { padding: 60px 20px; }
  .map-wrap { height: 280px; }
  .location-text h2 { font-size: 26px; }

  .footer { padding: 50px 20px 0; }
  .footer::before { margin: -50px -20px 50px; }
  .footer-bottom { padding: 16px 20px; margin: 0 -20px; display: block; }
  .footer-nav a { font-size: 12px; padding: 6px 9px; }

  .btn-gold, .btn-outline-white, .btn-outline-gold { font-size: 10px; padding: 13px 28px; }

  .navbar { padding: 0 20px; min-height: 60px; }
  .page-hero { min-height: 240px; }
  .page-hero-content h1 { font-size: 30px; }
  .page-hero-section .hero-content h1 { font-size: 34px; }
  .content-body { padding: 50px 24px; }
}
/* Texture overlay — nkyinkyim pattern */
.about-section,
.amenities-strip,
.testimonials-section,
.location-section,
.footer {
  position: relative;
}
/* Shared texture properties — do not edit here */
.about-section::before,
.amenities-strip::before,
.testimonials-section::before,
.location-section::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/nkyinkyim-medi.png') repeat;
  background-size: 480px 480px;
  pointer-events: none;
  z-index: 0;
}

/* ↓↓↓ TWEAK EACH SECTION OPACITY INDEPENDENTLY HERE ↓↓↓ */
.about-section::before        { opacity: 0.04; } /* About section */
.amenities-strip::before      { opacity: 0.04; } /* Amenities strip */
.testimonials-section::before { opacity: 0.04; } /* Testimonials */
.location-section::before     { opacity: 0.06; } /* Location section */
.footer::before               { opacity: 0; } /* Footer — texture disabled */
.about-section > *,
.amenities-strip > *,
.testimonials-section > *,
.location-section > *,
.footer > *:not(.footer-bottom) {
  position: relative;
  z-index: 1;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
  padding-bottom: 18px !important;
}
/* ===== SCROLL REVEAL (index page sections) ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   MOBILE IMAGE FIX — show the full photo, never crop
   Placed last on purpose so it wins over the older hero rules
   above. Desktop (>768px) is untouched everywhere in this block.
   ============================================================ */
@media (max-width: 768px) {

  /* --- Sub-page hero slideshow (suites, conference, bar &
     restaurant, spa, weddings, day package, special offers,
     gallery, contact, privacy, terms, book-now).
     The old design overlaid text on top of a cover-cropped photo,
     which is exactly what forced the aggressive crop. On mobile we
     instead show the FULL, uncropped photo, then the title/text
     directly below it (both on the resort's dark brand color, so
     nothing overlaps and nothing is hard to read). --- */
  .premium-hero {
    display: block;
    min-height: 0;
    background: var(--burgundy-dark);
    padding-bottom: 8px;
  }
  .premium-hero-slideshow {
    position: static;
    width: 100%;
    background: var(--burgundy-dark);
  }
  .premium-hero-slide {
    position: static;
    opacity: 1;
    display: none;
  }
  .premium-hero-slide.active { display: block; }
  .premium-hero-slide img,
  .premium-hero-video {
    position: static;
    width: 100%;
    height: auto;
    max-height: 55vh;
    object-fit: contain;
  }
  .premium-hero-overlay { display: none; }
  .premium-hero-content { position: static; padding: 32px 26px 40px; }
  .premium-hero-eyebrow,
  .premium-hero-content h1,
  .premium-hero-content h1 em {
    color: #ffffff;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
  .premium-hero-rule { position: static; }

  /* --- Homepage hero (marquee strip becomes a single contained
     photo on mobile — .hero already has a dark background so the
     letterbox area reads as intentional, not a bug) --- */
  .hero-marquee-row img {
    object-fit: contain;
    background: var(--burgundy-dark);
  }

  /* index.html's hero section uses the .premium-hero-slideshow /
     .premium-hero-slide markup (see above) inside a .hero wrapper
     rather than a .premium-hero wrapper. .hero stays display:flex
     (row) at every other breakpoint, so once the slide image above
     is switched to position:static for mobile, it and .hero-content
     become side-by-side flex items instead of stacking — that's the
     tiny left-aligned photo overlapping the text. Force the same
     block stacking .premium-hero gets so they behave identically. */
  .hero {
    display: block;
    min-height: 0;
    background: var(--burgundy-dark);
  }

  /* --- Homepage "gallery-section" split photo/text block --- */
  .gallery-image-side { height: auto; min-height: 220px; background: #ffffff; }
  .gallery-image-side img {
    height: auto;
    max-height: 60vh;
    object-fit: contain;
  }

}

/* ============================================================
   MOBILE APP HOME — Airbnb-style discovery screen for index.html
   Sits above the existing homepage sections on small screens only.
   Desktop is completely unaffected (display:none until 768px).
   Uses the site's existing color variables, existing images and
   existing room/price content — no new assets, no invented data.
   ============================================================ */
.app-home { display: none; }

.app-hero {
  position: relative;
  min-height: 340px;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  background: var(--color-warm-white);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 64px;
  box-sizing: border-box;
}
.app-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
/* Carousel version of the app hero (index.html) — reuses the site's
   existing .premium-hero-slideshow slide markup/JS so it gets the
   same auto-advance, swipe and dot behavior for free. Sits behind
   the ::before scrim below via a lower z-index override. */
/* background:transparent is required here, not decorative — the
   @media(max-width:768px) rule above sets `.premium-hero-slideshow`
   (bare class, shared with the desktop sub-page hero) to
   background: var(--burgundy-dark) for that other component's
   letterbox use case. That rule has lower specificity than this one
   but never gets overridden on `background` specifically, so on
   mobile widths (exactly where .app-hero is shown) the burgundy
   leaks in behind the video, visible at the rounded corners where
   the video doesn't fully mask it. This explicit override is the fix. */
.app-hero .premium-hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  /* Self-clip to the card's own curve, in addition to .app-hero's
     overflow:hidden above. The video is a plain rectangle that was
     only ever rounded by being clipped by an ANCESTOR box — any
     sub-pixel rendering gap at that clip edge could expose whatever
     sits behind it. Giving this immediate wrapper the same radius
     and its own overflow:hidden means the video is clipped right at
     its own edge, so there's no gap left for anything to show through. */
  border-radius: inherit;
  overflow: hidden;
  clip-path: inset(0 round 0 0 28px 28px);
  -webkit-clip-path: inset(0 round 0 0 28px 28px);
}
.app-hero .premium-hero-slide.active { z-index: 0; }
/* Override the generic mobile "show full photo, never crop" fix below
   (it turns .premium-hero-slide img into a static, letterboxed/contain
   image) so images inside the app-hero card always fill it edge-to-edge,
   cropped/zoomed in like a cover photo — no empty space, ever. Higher
   selector specificity here wins regardless of source order. */
.app-hero .premium-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}
.app-hero .premium-hero-slide.active { opacity: 1; }
.app-hero .premium-hero-slide img,
.app-hero .premium-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 35%;
  /* Belt-and-braces: round the video's own edge too, not just the
     wrappers around it, so it hugs the curve directly with nothing
     left to clip at a distance. */
  border-radius: inherit;
  /* clip-path as the forceful, cross-browser-reliable version of the
     border-radius rule above. Some mobile browsers hand <video>
     playback off to its own hardware-accelerated compositing layer,
     which can ignore an ancestor's (or even its own) border-radius +
     overflow:hidden clipping — a well-documented quirk that plain
     <img> elements never hit, since they're painted through the
     normal CSS pipeline instead. clip-path is respected by that
     video layer far more consistently, so it's applied directly on
     the video/slide element itself as the real fix for that quirk. */
  clip-path: inset(0 round 0 0 28px 28px);
  -webkit-clip-path: inset(0 round 0 0 28px 28px);
}
/* No ::before scrim here on purpose. The previous version applied a
   burgundy-tinted (rgba(78,27,13,…)) gradient directly over the hero
   video for chip/icon legibility. .app-icon-btn and .app-hero-chip
   below already carry their own independent translucent backgrounds,
   so the scrim was a redundant burgundy tint sitting on the video —
   removed at the source rather than left in place. */
.app-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-mute-btn {
  position: absolute;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.hero-mute-btn:hover { background: rgba(0,0,0,0.55); }
.hero-mute-btn:active { transform: scale(0.94); }
.hero .hero-mute-btn {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  position: relative;
  margin: 0 24px 24px 0;
}
.app-hero .hero-mute-btn {
  bottom: 90px;
  right: 18px;
}
.app-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  border: none;
}
.app-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px;
  padding: 9px 14px;
  border-radius: 20px;
}
.app-welcome-block {
  text-align: center;
  padding: 18px 24px 4px;
}
.app-welcome-block h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
}
.app-welcome-block p {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  margin-top: 8px;
}
.app-welcome-block h2 em { color: var(--oxblood); font-style: italic; }

.app-search-card {
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(78, 27, 13,0.16);
  margin: -44px 20px 0;
  padding: 16px;
}
.app-search-row {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.app-search-row i.fa-search {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--burgundy-dark);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-search-text strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 700; color: #4E1B0D;
}
.app-search-text span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: #4E1B0D; margin-top: 2px;
}
.app-search-fields {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #4E1B0D;
}
.app-search-fields.open { display: grid; }
.app-search-fields label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #4E1B0D; margin-bottom: 6px;
}
.app-search-fields input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #4E1B0D; border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Montserrat', sans-serif; font-size: 14px;
}
.app-search-btn {
  grid-column: 1 / -1;
  margin-top: 4px;
  background: #ffffff;
  color: #4E1B0D;
  border: 2px solid #4E1B0D;
  border-radius: 12px;
  padding: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s;
}
.app-search-btn:hover { background: var(--oxblood); color: #ffffff; border-color: var(--oxblood); }

.app-section { padding: 28px 20px 4px; }
.app-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.app-section-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 700; color: #4E1B0D;
  margin: 0;
}
.app-section-head a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--gold);
}
.app-card-scroll {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-card-scroll::-webkit-scrollbar { display: none; }
.app-room-card {
  flex: 0 0 auto;
  width: 240px;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(78, 27, 13,0.08);
}
.app-room-img { position: relative; width: 100%; height: 160px; }
.app-room-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-room-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(78, 27, 13,0.55);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: 20px;
}
.app-room-info { padding: 12px 14px 14px; }
.app-room-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-room-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 700; color: #4E1B0D;
}
.app-room-rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700; color: #4E1B0D;
  flex-shrink: 0;
}
.app-room-rating i { color: var(--gold); font-size: 12px; }
.app-room-meta {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; color: #4E1B0D;
  margin: 4px 0 8px;
}
.app-room-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 17.5px; font-weight: 800; color: var(--gold);
}
.app-room-price small {
  font-size: 12px; font-weight: 500; color: #4E1B0D;
}

.app-bottom-nav {
  display: none;
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 500;
  background: #fff;
  border: 2px solid var(--oxblood);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(108,28,17,0.22);
  padding: 8px 10px;
  justify-content: space-around;
  align-items: center;
}
.app-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #4E1B0D;
  padding: 4px 6px;
}
.app-bottom-nav a i { font-size: 18px; color: #4E1B0D; }
.app-bottom-nav a.active { color: var(--oxblood); }
.app-bottom-nav a.active i { color: var(--oxblood); }
.app-nav-cta i {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--oxblood);
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px !important;
  margin-bottom: 1px;
}

@media (max-width: 900px) {
  .app-home { display: block; }
  .app-bottom-nav { display: flex; }
  body.has-app-hero { padding-bottom: 90px; }
  /* Replace the marquee hero + its own booking widget with the
     app-home hero + search above — avoids showing two booking
     widgets stacked on mobile. Desktop keeps both untouched. */
  section.hero { display: none; }
  /* Pages with an app-hero card already have their own menu button
     and hero photo built in (see .app-hero-top / .app-icon-btn) —
     hide the classic top navbar and the old premium-hero underneath
     so there's only ONE hamburger and ONE hero on mobile, not two.
     Uses a plain class on <body> (not :has()) so this works in every
     browser, including ones that don't support :has(). Widened from
     768px to 900px to match the .hamburger/.navbar breakpoint above —
     the old 768/900 mismatch left a gap (769–900px) where the classic
     navbar showed instead: hamburger on the right, no call button.
     Now the correct hamburger-left/call-right app header (see
     .app-hero-top) takes over at the same width the classic navbar
     would otherwise kick in, on every page. */
  body.has-app-hero .navbar { display: none; }
  body.has-app-hero .premium-hero { display: none; }
  /* Larger, more readable type across mobile. */
  body { font-size: 18px; }
}

/* ============================================================
   DESKTOP HERO FIX — .premium-hero (all sub-pages) and .hero
   (index.html), which both render their photo through the same
   .premium-hero-slide img markup.

   Bug: the hero row height was set with `vh` alone (58vh / 62vh).
   `vh` only reads viewport HEIGHT, never width, so on a normal
   desktop screen (width usually 1.5-3x the height) the row became
   a box far wider than any real photograph — often 3:1 or more.
   object-fit:cover then had to crop deep into the top/bottom of
   the image to fill that shape, leaving only a thin horizontal
   sliver of the photo (e.g. just the headboard) visible. A second,
   permanent `transform: scale(1.05)` on the slide image (not tied
   to any animation) compounded that crop further.

   Fix: size the row from viewport WIDTH (vw) instead, clamped to a
   sane min/max, so the box keeps a consistent, attractive ~2.2-2.6:1
   aspect ratio at every desktop width (1366/1440/1536/1920/wider)
   instead of ballooning wider as monitors get relatively short. The
   stray extra zoom is removed for desktop only.

   Scoped to min-width:901px — the site's own desktop breakpoint
   (.premium-hero/.hero are already display:none at <=900px, where
   the approved .app-hero mobile component takes over) — so mobile
   and tablet rendering is completely unchanged by this block.
   ============================================================ */
@media (min-width: 901px) {
  .premium-hero,
  .hero {
    grid-template-rows: clamp(460px, 44vw, 760px) auto;
  }
  .premium-hero-slide img,
  .premium-hero-video {
    transform: none;
  }
}