/* =========================================================
   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.25s 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; }
}

/* ---------- Mobile nav overlay ---------- */
.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: var(--space-md);
  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);
}

.mobile-nav a {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-style: italic;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
  text-align: center;
}

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

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

.mobile-nav .mobile-nav__book {
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 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 { direction: rtl; }
.editorial--reverse > * { direction: ltr; }
.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; }
  .editorial--reverse { direction: ltr; }
}

/* ---------- 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
   Add to end of styles.css
   ============================================================ */

/* ---------- 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;
}

/* ---------- 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;
  }
}