/* =========================================================
   InAweStays - Global Styles
   Editorial luxury / heritage / unhurried
   ========================================================= */

:root {
  /* Palette - change these to retheme the entire site */
  --color-bg: #FAF7F2;
  --color-bg-alt: #F2EEE6;
  --color-text: #1C1C1C;
  --color-text-muted: #5A554E;
  --color-rule: #D9D2C5;
  --color-accent: #1B3A6B;
  --color-accent-hover: #142A4D;
  --color-accent-foreground: #FAF7F2;

  /* Type */
  /*--font-serif: "EB Garamond", "Garamond", Georgia, "Times New Roman", serif;*/
  --font-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* Layout */
  --container: 1280px;
  --container-narrow: 880px;
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.serif-italic { font-style: italic; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--space-xl) 0; }
@media (max-width: 720px) { section { padding: var(--space-lg) 0; } }

.rule {
  height: 1px;
  background: var(--color-rule);
  border: 0;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border: 1px solid var(--color-accent);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--ghost:hover { background: var(--color-text); color: var(--color-bg); }
.btn--large { padding: 1.15rem 2.4rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--color-rule); }
.site-header__inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: flex-start; /* changed from center */
  justify-content: space-between;
  gap: var(--space-md);
}
.brand img {
  display: block;
  width: clamp(60px, 7.5vw, 120px);
  height: auto;
  object-fit: contain;
  margin-top: 0;
}
/* Vertically centre the nav within the header height */
.nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  height: var(--header-h); /* nav fills header height, centres its own children */
}
/* Same for hamburger */
.nav-toggle {
  margin-top: calc((var(--header-h) - 2.4rem) / 2); /* centre vertically */
}
.brand {
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  font-style: italic;
}
.brand strong { font-weight: 500; font-style: normal; }

.nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
.nav a {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--color-text); }
.nav .btn { color: var(--color-accent-foreground); }

/* ============================================================
   InAweStays — MOBILE NAV
   Add this block to styles.css, replacing the existing
   @media (max-width: 820px) { .nav a:not(.btn) { display: none; } }
   rule (around line 169–171).
   ============================================================ */

/* Hide desktop nav links on mobile — hamburger takes over */
@media (max-width: 820px) {
  .nav a:not(.btn) { display: none; }
  .nav .btn { display: none; } /* Book Direct moves to overlay & sticky button */
}

/* ---------- Hamburger button ---------- */
.nav-toggle {
  display: none; /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.3rem;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 110;
  position: relative;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.35s var(--ease), opacity 0.55s var(--ease);
  transform-origin: center;
}

/* Animate to × when open */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
}

/* Prevent body scroll when menu open */
body.nav-open {
  overflow: hidden;
}

/* ---------- Mobile sticky book button ---------- */
.mobile-book {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 60;
  text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
@media (max-width: 720px) {
  .mobile-book { display: inline-flex; }
  body { padding-bottom: 5rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: flex;
  align-items: flex-end;
  color: var(--color-bg);
  overflow: hidden;
  isolation: isolate;
}
.hero__media,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
}
.hero__inner {
  padding: var(--space-xl) 0 var(--space-lg);
  max-width: 760px;
}
.hero__eyebrow {
  color: rgba(255,255,255,0.85);
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: var(--space-sm);
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero p {
  color: rgba(255,255,255,0.92);
  font-size: 1.2rem;
  max-width: 560px;
  margin-bottom: var(--space-md);
}

/* ---------- LQIP ---------- */
.lqip {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.lqip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.lqip img.is-loaded { opacity: 1; }
.lqip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.1);
  transition: opacity 0.6s var(--ease);
}
.lqip.is-loaded::before { opacity: 0; }

/* ---------- Heritage / Editorial section ---------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial--reverse .editorial__body  { order: 1; }
.editorial__media {
  aspect-ratio: 4 / 5;
  background: var(--color-bg-alt);
}
.editorial__body p { font-size: 1.1rem; }
.editorial__sig {
  margin-top: var(--space-md);
  font-style: italic;
  color: var(--color-text-muted);
}
@media (max-width: 820px) {
  .editorial { grid-template-columns: 1fr; }
  
  /* On mobile: always image first, text below */
  .editorial__media,
  .editorial--reverse .editorial__media { order: 1; }
  
  .editorial__body,
  .editorial--reverse .editorial__body  { order: 2; }
}

/* ---------- Section headers ---------- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}
.section-head--left { text-align: left; margin-left: 0; }

/* ============================================================
   InAweStays - CSS ADDITIONS for ladder layout + scroll effects
   
   INSTRUCTIONS:
   1. In styles.css, DELETE the entire block marked
      "---------- Cottage grid ----------"
      (from .cottage-grid down to the closing @media for it)
      That's approximately lines 161–195 in your current styles.css
   
   2. PASTE everything below this comment block
      at the end of styles.css (before the closing comment
      "COTTAGE PAGE" section is fine - just add before that)
   ============================================================ */
 
 
/* ---------- Ladder layout ---------- */
.ladder {
  margin-top: var(--space-lg);
}
 
.ladder__row {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0;
  align-items: center;
  border-top: 1px solid var(--color-rule);
}
 
.ladder__row--reverse {
  grid-template-columns: 45fr 55fr;
}
 
.ladder__row--reverse .ladder__media {
  order: 2;
}
 
.ladder__row--reverse .ladder__body {
  order: 1;
}
 
.ladder__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
}
 
.ladder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease-out;
}

 
/* Zoom-as-you-scroll - driven by JS below */
/*.ladder__media img.is-zoomed {
  transform: scale(1.06);
}*/
 
.ladder__body {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
}
 
.ladder__body h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  margin: 0.4rem 0 0.8rem;
}
 
.ladder__body p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}
 
.ladder__link {
  display: inline-block;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.15rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
 
.ladder__link:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
 
@media (max-width: 820px) {
  .ladder__row,
  .ladder__row--reverse {
    grid-template-columns: 1fr;
  }
 
  .ladder__row--reverse .ladder__media,
  .ladder__row--reverse .ladder__body {
    order: unset;
  }
 
  .ladder__media {
    aspect-ratio: 3 / 2;
  }
 
  .ladder__body {
    padding: var(--space-md) 0;
    /* on mobile, body lives inside container padding */
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
  }
}
 
 
/* ============================================================
   InAweStays - REPLACE the existing "Scroll reveal" block
   in styles.css with this entire block.
   Find: "---------- Scroll reveal ----------"
   Replace everything from there down to the closing
   @media (prefers-reduced-motion) block with this.
   ============================================================ */

/* ---------- Scroll reveal - text elements only ---------- */

/*
   .reveal is on the <article> (ladder row) but we only want
   the TEXT body to animate - not the image.
   Target .ladder__body inside a .reveal row,
   and any standalone .reveal elements (section heads, etc.)
*/
.reveal .ladder__body,
.reveal:not(:has(.ladder__body)) {
  opacity: 0;
  transform: translateY(48px);        /* starts lower, more travel = more visible */
  transition:
    opacity 1.5s var(--ease),          /* 2× slower than before */
    transform 1.5s var(--ease);
}

/* Scrolling DOWN - slides up into place */
.reveal.is-visible .ladder__body,
.reveal.is-visible:not(:has(.ladder__body)) {
  opacity: 1;
  transform: translateY(0);
}

/* Scrolling UP - slides DOWN into place (reversed) */
.reveal.is-visible-up .ladder__body,
.reveal.is-visible-up:not(:has(.ladder__body)) {
  opacity: 1;
  transform: translateY(0);
}

/* Starting position for scroll-up reveal - above instead of below */
.reveal:not(.is-visible):not(.is-visible-up) .ladder__body,
.reveal:not(.is-visible):not(.is-visible-up):not(:has(.ladder__body)) {
  transform: translateY(48px);
}

/* When we know scroll direction is up, start from above */
/* JS adds is-visible-up which transitions from -48px */
.ladder__row:not(.is-visible):not(.is-visible-up) .ladder__body {
  transform: translateY(48px);
}

/* The image inside a reveal row - always fully visible, no float */
.reveal .ladder__media,
.reveal .ladder__media img {
  opacity: 1 !important;
  transform: none;   /* zoom handled by JS inline style, not this */
  transition: none;
}
/* Re-enable the JS zoom transition on the img specifically */
.ladder__media img {
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal .ladder__body,
  .reveal:not(:has(.ladder__body)) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
 

/* ---------- Experiences ---------- */
.experiences {
  background: var(--color-bg-alt);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.exp__num {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-sm);
}
.exp h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.exp p { color: var(--color-text-muted); }
@media (max-width: 820px) {
  .exp-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}
/* ---------- Experiences — header above gallery layout ---------- */
.exp-section-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-lg);
}

.exp-section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin: 0.4rem 0 0.8rem;
}

.exp-section-head p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 600px;
}

.exp-gallery {
  column-count: 3;
}

@media (max-width: 820px) {
  .exp-gallery { column-count: 2; }
}

@media (max-width: 480px) {
  .exp-gallery { column-count: 1; }
}
/* ---------- Parallax mask ---------- */
.parallax {
  height: 60vh;
  min-height: 380px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}
.parallax__quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-style: italic;
  line-height: 1.4;
  background: rgba(0,0,0,0.35);
}
.parallax__quote span { max-width: 820px; display: block; }
@media (max-width: 820px) {
  .parallax { background-attachment: scroll; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.testimonial {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
}
.testimonial p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-text);
}
.testimonial cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.testimonial cite span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 820px) { .testimonials { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-lg) 0 var(--space-md);
}
.site-footer a { color: var(--color-bg); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.site-footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.6);
  margin-bottom: var(--space-sm);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; font-size: 0.95rem; }
.site-footer .brand { color: var(--color-bg); margin-bottom: var(--space-sm); display: block; }
.footer-bottom {
  border-top: 1px solid rgba(250,247,242,0.15);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: rgba(250,247,242,0.6);
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   InAweStays - ABOUT PAGE ADDITIONS
   ============================================================ */


/* ---------- Page hero (interior pages) ---------- */
/*
   Used on About, FAQ, Gallery, Reviews pages.
   Shorter than the homepage hero - image with caption overlay.
*/
.page-hero {
  position: relative;
  height: clamp(320px, 52vh, 580px);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
}

.page-hero__caption {
  position: absolute;
  bottom: var(--space-lg);
  left: 0;
  right: 0;
  z-index: 2;
  color: #fff;
}

.page-hero__caption .eyebrow {
  color: rgba(255,255,255,0.8);
}

.page-hero__caption h1 {
  color: #fff;
  margin: 0;
  max-width: 760px;
}

@media (max-width: 720px) {
  .page-hero {
    height: clamp(260px, 44vh, 400px);
  }
  .page-hero__caption {
    bottom: var(--space-md);
  }
}


/* ---------- Full-width image block (about page) ---------- */
/*
   Used between editorial sections for breathing room.
   Cinematic proportion, edge-to-edge, no container.
*/
.about-full-img {
  width: 100%;
  height: clamp(300px, 48vw, 640px);
  overflow: hidden;
  display: block;
}

.about-full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ---------- Name list (What's In A Name section) ---------- */
.name-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  border-top: 1px solid var(--color-rule);
}

.name-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 1.05rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.name-list li strong {
  min-width: 120px;
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
}

   
/* ============================================================
   InAweStays - REVIEWS PAGE STYLES
   ============================================================ */

/* ---------- Reviews: platform heading ---------- */
.reviews-platform-head {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

/* Tighten intro section on reviews page */
.reviews-intro {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.7;
}

/* ---------- Reviews: masonry grid ---------- */
.reviews-masonry {
  column-count: 3;
  column-gap: var(--space-md);
  margin-top: var(--space-md);
}

.reviews-masonry .review-card {
  break-inside: avoid;
  margin-bottom: var(--space-md);
}

@media (max-width: 960px) {
  .reviews-masonry { column-count: 2; }
}

@media (max-width: 600px) {
  .reviews-masonry { column-count: 1; }
}

/* ---------- Review card ---------- */
.review-card {
  margin: 0;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border-top: 3px solid var(--color-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Platform badge */
.review-card__platform {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  align-self: flex-start;
  margin-bottom: 0.4rem;
}

.review-card__platform--ta {
  background: #00af87;
  color: #fff;
}

.review-card__platform--g {
  background: #4285F4;
  color: #fff;
}

.review-card__platform--b {
  background: #003580;
  color: #fff;
}

/* Large decorative quote mark */
.review-card__quote-mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--color-accent);
  opacity: 0.18;
  user-select: none;
  margin-bottom: 0.2rem;
}

/* Pull quote - the killer line */
.review-card__pull {
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0;
}

/* Full review body */
.review-card__body {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Footer: avatar + name/meta */
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}

/* Monogram avatar */
.review-card__avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  flex-shrink: 0;
}

.review-card__cite {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
}

.review-card__meta {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* ---------- Photo break between platform sections ---------- */
.review-photo-break {
  position: relative;
  height: clamp(280px, 40vw, 520px);
  overflow: hidden;
  margin: var(--space-xl) 0;
}

.review-photo-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.review-photo-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
}

.review-photo-break__caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
}

.review-photo-break__caption span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  color: #fff;
  max-width: 680px;
  display: block;
  line-height: 1.4;
}

/* =========================================================
   COTTAGE PAGE
   ========================================================= */
.cottage-hero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  overflow: hidden;
}
.cottage-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cottage-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.cottage-hero__cap {
  position: absolute;
  bottom: var(--space-lg);
  left: 0; right: 0;
  color: #fff;
}
.cottage-hero__cap .eyebrow { color: rgba(255,255,255,0.8); }
.cottage-hero__cap h1 { color: #fff; margin: 0; }

.cottage-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.cottage-intro__facts {
  border-left: 1px solid var(--color-rule);
  padding-left: var(--space-md);
}
.facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  margin: 0;
}
.facts dt {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.3rem;
}
.facts dd { margin: 0; }

@media (max-width: 820px) {
  .cottage-intro { grid-template-columns: 1fr; }
  .cottage-intro__facts { border-left: 0; border-top: 1px solid var(--color-rule); padding: var(--space-md) 0 0; }
}

/* ---------- Cottage gallery — natural proportions ---------- */
.cottage-gallery {
  column-count: 3;
  column-gap: 0.6rem;
}

.cottage-gallery-item {
  break-inside: avoid;
  margin: 0 0 0.6rem;
  overflow: hidden;
  display: block;
  background: var(--color-bg-alt);
}

.cottage-gallery-item img,
.cottage-gallery-item video {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.4s var(--ease);
  filter: brightness(0.96);
}

.cottage-gallery-item:hover img,
.cottage-gallery-item:hover video {
  transform: scale(1.02);
  filter: brightness(1.02);
}

/* Video specific — vertical videos need explicit ratio */
.cottage-gallery-item--video video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  height: auto;
  width: 100%;
}
/* When the video itself goes into native fullscreen */
.cottage-gallery-item--video video:fullscreen {
  object-fit: contain; /* Shows the full video without clipping */
  aspect-ratio: auto;  /* Lets the native video dimensions take over */
  width: 100%;
  height: 100%;
}
/* Safari webkit specific fallback */
.cottage-gallery-item--video video:-webkit-full-screen {
  object-fit: contain;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .cottage-gallery { column-count: 2; }
}

@media (max-width: 480px) {
  .cottage-gallery { column-count: 1; }
}
.editorial .cottage-gallery {
  column-count: 2;
}

@media (max-width: 820px) {
  .editorial .cottage-gallery {
    column-count: 2; /* stays 2 on mobile since it goes full width */
  }
}
/* Editorial with more space for media */
.editorial--media-wide {
  grid-template-columns: 3fr 2fr;
}

.editorial--media-wide.editorial--reverse {
  grid-template-columns: 2fr 3fr;
}
/* Editorial with strongly dominant media */
.editorial--media-xl {
  grid-template-columns: 2fr 1fr;
}

.editorial--media-xl.editorial--reverse {
  grid-template-columns: 1fr 2fr;
}

.amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 2rem;
  list-style: none;
  padding: 0;
}
.amenities li {
  border-bottom: 1px solid var(--color-rule);
  padding: 0.9rem 0;
  font-size: 1rem;
}
@media (max-width: 720px) { .amenities { grid-template-columns: 1fr 1fr; } }

.reserve-strip {
  background: var(--color-text);
  color: var(--color-bg);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}
.reserve-strip h2 { color: #fff; margin-bottom: var(--space-sm); }
.reserve-strip p { color: rgba(255,255,255,0.75); margin-bottom: var(--space-md); }
.reserve-strip .btn {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}
.reserve-strip .btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border-color: var(--color-accent);
}


/* ============================================================
   InAweStays - GALLERY PAGE STYLES
   ============================================================ */

/* ---------- Gallery section ---------- */
.gallery-section {
  padding: var(--space-lg) 0 var(--space-xl);
}

/* ---------- Masonry grid ---------- */
.gallery-masonry {
  column-count: 3;
  column-gap: 0.75rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--container);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .gallery-masonry { column-count: 2; }
}

@media (max-width: 520px) {
  .gallery-masonry { column-count: 1; }
}

/* ---------- Gallery item ---------- */
.gallery-item {
  break-inside: avoid;
  margin: 0 0 0.75rem;
  overflow: hidden;
  display: block;
  background: var(--color-bg-alt);
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition:
    transform 0.9s var(--ease),
    filter 0.4s var(--ease);
  filter: brightness(0.96);
}

.gallery-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

/* ---------- Scroll reveal for gallery items ---------- */
/*
   Lighter than the main page reveal - just a short fade-up.
   Gallery items are small so large travel distances look wrong.
*/
.reveal-gallery {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.reveal-gallery.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-gallery {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(10, 8, 6, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.lightbox__backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img-wrap {
  position: relative;
  z-index: 201;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img-wrap img {
  max-width: 90vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}

/* Nav buttons */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  z-index: 202;
  background: rgba(250,247,242,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.2s var(--ease);
  line-height: 1;
  font-family: var(--font-serif);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  padding: 0.7rem 1rem;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(250,247,242,0.2);
}

.lightbox__close {
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
}

.lightbox__prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}

.lightbox__next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}

@media (max-width: 520px) {
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
}


/* ============================================================
   InAweStays - FAQ PAGE STYLES
   ============================================================ */

/* ---------- FAQ section spacing ---------- */
.faq-section {
  padding: var(--space-md) 0 var(--space-xl);
}

/* ---------- FAQ group ---------- */
.faq-group {
  padding: var(--space-lg) 0;
}

.faq-group__heading {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ---------- FAQ accordion item ---------- */
.faq-item {
  border-top: 1px solid var(--color-rule);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

/* ---------- Summary (the question) ---------- */
.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: var(--font-serif);
  color: var(--color-text);
  list-style: none;
  user-select: none;
  transition: color 0.2s var(--ease);
}

/* Remove default triangle in all browsers */
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; }

/* Custom +/− indicator */
.faq-summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
  line-height: 1;
}

details[open] .faq-summary::after {
  content: "−";
}

.faq-summary:hover {
  color: var(--color-accent);
}

/* ---------- Answer ---------- */
.faq-answer {
  padding: 0 0 1.4rem;
  max-width: 680px;
}

.faq-answer p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.8em;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-answer a:hover {
  color: var(--color-accent-hover);
}

/* ---------- Open state animation ---------- */
details[open] .faq-answer {
  animation: faqReveal 0.3s var(--ease) both;
}

@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  details[open] .faq-answer {
    animation: none;
  }
}

/* ============================================================
   InAweStays — COLLABS PAGE STYLES
   ============================================================ */

.collabs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.collab-item {
  padding: var(--space-lg) 0;
}

.collab-item h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin: 0.3rem 0 var(--space-sm);
}

.collab-item p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 600px;
}
/* ============================================================
   InAweStays — EXPERIENCES PAGE: View more gallery
   ============================================================ */

/* ---------- View more toggle button ---------- */
/*.exp-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.15rem;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-serif);
  margin-top: var(--space-md);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.exp-more-toggle:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.exp-more-toggle__icon {
  display: inline-block;
  transition: transform 0.35s var(--ease);
  font-style: normal;
}

.exp-more-toggle.is-open .exp-more-toggle__icon {
  transform: rotate(45deg);
}*/

/* ---------- Hidden gallery panel ---------- */
/*.exp-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
  margin-top: 0;
}

.exp-more-panel.is-open {
  grid-template-rows: 1fr;
  margin-top: var(--space-md);
}

.exp-more-panel__inner {
  overflow: hidden;
}*/
/* Panels are now read by overlay JS, not shown inline */
.exp-more-panel {
  display: none;
}
/* ---------- Gallery inside the panel ---------- */
.exp-more-gallery {
  column-count: 3;
  column-gap: 0.6rem;
  padding-top: 0.6rem;
}

.exp-more-gallery .cottage-gallery-item {
  break-inside: avoid;
  margin-bottom: 0.6rem;
}

/* ---------- Video inside the panel ---------- */
.exp-more-gallery .cottage-gallery-item--video video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}

/* Horizontal video override */
.exp-more-gallery .cottage-gallery-item--video-landscape video {
  aspect-ratio: 16 / 9;
}

@media (max-width: 820px) {
  .exp-more-gallery { column-count: 2; }
}

@media (max-width: 480px) {
  .exp-more-gallery { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-more-panel {
    transition: none;
  }
}

/* ============================================================
   InAweStays — GALLERY OVERLAY + ZOOM
   Add to end of styles.css
   ============================================================ */

/* ---------- Backdrop ---------- */

.go-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 8, 6, 0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  display: none; /* ADD THIS */
}
.go-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  display: block; /* ADD THIS */
}

/* ---------- Overlay container ---------- */
.go-overlay {
  position: fixed;
  inset: 0;
  z-index: 301;
  display: none; /* CHANGE from flex to none */
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.go-overlay.is-open {
  display: flex; /* ADD THIS */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ---------- Header ---------- */
.go-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}
.go-title {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.go-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.go-close:hover { opacity: 1; }

/* ---------- Thumbnail grid ---------- */

.go-grid {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 160px));
  gap: 0.5rem;
  align-content: start;
  justify-content: center;
}

.go-thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  width: 160px;
  height: 160px;
}

.go-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease), filter 0.3s;
  filter: brightness(0.85);
}
.go-thumb:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}
.go-thumb__video-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ---------- Single viewer ---------- */
.go-viewer {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.go-viewer.is-open {
  display: flex;
}

.go-viewer__wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}

.go-viewer__img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.go-viewer__video-wrap {
  width: 100%;
  max-width: min(90vw, 900px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.go-viewer__video {
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  background: #000;
}

/* Prev / Next / Back buttons */
.go-viewer__prev,
.go-viewer__next,
.go-viewer__back {
  position: fixed;
  z-index: 302;
  background: rgba(250,247,242,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-serif);
  padding: 0.7rem 1rem;
  line-height: 1;
}
.go-viewer__prev:hover,
.go-viewer__next:hover,
.go-viewer__back:hover {
  background: rgba(250,247,242,0.22);
}

.go-viewer__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}
.go-viewer__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}
.go-viewer__back {
  top: 1rem;
  left: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

/* ---------- Zoom controls ---------- */
.go-zoom-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}
.go-zoom-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: var(--font-serif);
}
.go-zoom-btn:hover { background: rgba(255,255,255,0.22); }

/* ---------- Mobile adjustments ---------- */
@media (max-width: 600px) {
  .go-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .go-viewer__prev { left: 0.4rem; }
  .go-viewer__next { right: 0.4rem; }
  .go-viewer__back { font-size: 0.7rem; }
}

/* ============================================================
   Update exp-more-toggle to look like a button, not expand inline
   (the JS now opens overlay instead of expanding panel)
   ============================================================ */
.exp-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.15rem;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-serif);
  margin-top: var(--space-md);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.exp-more-toggle:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.exp-more-toggle__icon {
  display: inline-block;
  font-style: normal;
}

/* ---------- Viewer close button (✕ top-right, back to grid) ---------- */
.go-viewer__close {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 302;
  background: rgba(250,247,242,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem 0.8rem;
  transition: background 0.2s;
  line-height: 1;
}
.go-viewer__close:hover {
  background: rgba(250,247,242,0.22);
}

/* ============================================================
   InAweStays — NAV DROPDOWN 
   ============================================================ */

/* ---------- Nav item with dropdown ---------- */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a {
  white-space: nowrap;
}

/* Dropdown arrow indicator */
.nav-item > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 0.4em;
  opacity: 0.5;
  vertical-align: middle;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

.nav-item:hover > a::after,
.nav-item:focus-within > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------- Invisible bridge — fills the gap between link and panel ----------
   Without this, moving the mouse from the nav link down to the dropdown
   crosses empty space and kills the hover state before you get there.
   This pseudo-element covers that gap invisibly.
*/
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 1.2rem; /* matches the gap + a little extra */
  background: transparent;
}

/* ---------- Dropdown panel ---------- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem); /* slight gap so it feels separate */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.14);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.55s var(--ease),       /* slower = more premium */
    transform 0.35s var(--ease);
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Add a small delay before hiding — gives mouse time to reach the panel */
.nav-item .nav-dropdown {
  transition-delay: 0s; /* no delay on show */
}
.nav-item:not(:hover):not(:focus-within) .nav-dropdown {
  transition-delay: 0.12s; /* 120ms grace period before hiding */
}

/* Dropdown links */
.nav-dropdown a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
}

.nav-dropdown a:hover {
  color: var(--color-accent);
  background: var(--color-bg-alt);
}

.nav-dropdown__divider {
  height: 1px;
  background: var(--color-rule);
  margin: 0.4rem 0;
}

/* ============================================================
   InAweStays — MOBILE NAV
   ============================================================ */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.1dvh, 1rem); /* scales with screen height 1.5*/
  padding: 5rem 1rem 6rem; /* room for header top + sticky book btn bottom */
  overflow-y: auto; /* scroll if still too tall on very small screens */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Main nav links */
.mobile-nav > a,
.mobile-nav .mobile-nav-group > a {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3dvh, 2.2rem); /* scales with screen height 4 */
  font-style: italic;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
  text-align: center;
  line-height: 1.1;
}

.mobile-nav > a:hover,
.mobile-nav .mobile-nav-group > a:hover {
  color: var(--color-accent);
}

.mobile-nav a[aria-current="page"] {
  color: var(--color-accent);
}

/* Group wrapper */
.mobile-nav .mobile-nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Sub-items */
.mobile-nav-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: clamp(0.15rem, 0.5dvh, 0.4rem); /*0.6*/
  margin-bottom: clamp(0.1rem, 0.4dvh, 0.3rem); /*0.5*/
}

.mobile-nav-sub a {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 1.7dvh, 1rem) !important; /*2*/
  font-style: normal !important;
  color: var(--color-text-muted) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: clamp(0.1rem, 0.3dvh, 0.25rem) 0; /*0.4*/
  transition: color 0.2s var(--ease);
  text-decoration: none;
  text-align: center;
}

.mobile-nav-sub a:hover {
  color: var(--color-accent) !important;
}

/* Book Direct button */
.mobile-nav .mobile-nav__book {
  margin-top: clamp(0.3rem, 0.8dvh, 0.6rem); /*1*/
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-foreground); /* white text on navy button */
}