/* ==========================================================================
   Terra Intelvi — styles.css
   Editorial / travel-magazine visual language.
   Three colours only: warm paper, deep ink, one clay accent.
   Mobile-first. 8px spacing grid.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --paper: #F5F1EA;          /* warm paper base — never pure white */
  --ink: #2B2621;            /* deep warm brown-black — never pure black */
  --clay: #B5654A;           /* weathered terracotta — the one accent */
  --clay-deep: #9A5138;      /* accent, pressed/hover state */
  --card: #EFE7DB;           /* barely darker than paper, for card fills */
  --hairline: rgba(43, 38, 33, 0.12);
  --whatsapp: #25D366;       /* the one green allowed on the page */

  /* Ink at reduced strength — softness without a second grey */
  --ink-soft: rgba(43, 38, 33, 0.78);
  --ink-faint: rgba(43, 38, 33, 0.52);

  /* Shape */
  --radius: 14px;            /* text cards */
  --radius-lg: 20px;         /* photos, map, large frames */
  --section-pad: clamp(56px, 7vh, 88px);
  /* Sticky header height: 38px control + 2 x 14px padding + 1px hairline.
     The hero subtracts it so the two together are exactly one screen. */
  --nav-h: 67px;

  /* Only photographs cast a shadow. Text surfaces never do. */
  --shadow-photo: 0 26px 50px -30px rgba(43, 38, 33, 0.5);
  --shadow-btn: 0 8px 18px -10px rgba(154, 81, 56, 0.75);

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--clay); }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

/* Italic accents inside headings — one word, set in clay */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
}

/* Monospace section number: "01 —".
   Sits tight above its heading so the two read as one unit, not two blocks. */
.section-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--clay);
  margin-bottom: 10px;
}

::selection { background: var(--clay); color: var(--paper); }

/* Hairline rhythm between major sections */
.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* ---------- Layout container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 48px;
}

/* Every section is a normal flow block: no negative margins, no overlap.
   Uses section.container so it outranks the .container padding reset.
   margin: 0 auto (not margin: 0) so it doesn't cancel the centering
   margins .container already sets. */
section.container { margin: 0 auto; padding: var(--section-pad) 48px; }
/* Phones: one gutter value, stated as longhands so both sides are provably
   equal. Anything that used to break out of this box is pulled back inside it
   below, so the document is never wider than the viewport — a single pixel of
   horizontal overflow shifts every section left on a phone. */
@media (max-width: 719px) {
  .container { padding-left: 20px; padding-right: 20px; }
  section.container { padding-left: 20px; padding-right: 20px; }
}
/* The hero owns exactly one screen: header + hero = 100vh, and everything
   inside it (title, meta, CTA, photo) is balanced in that column.
   align-items stays `stretch`, NOT `center`: the photo frame breaks out of the
   container and derives its width from the figure's full width — centring the
   items would shrink-wrap the figure and collapse that math. Horizontal
   centring comes from .hero { text-align: center } instead. */
.hero.container {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 24px;
  padding-bottom: 40px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--clay);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 13px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.btn:hover { background: var(--clay-deep); color: var(--paper); }
.btn svg { flex-shrink: 0; }

/* Hero CTA: solid clay pill, compact */
.btn--clay {
  background: var(--clay);
  color: var(--paper);
  padding: 13px 30px;
  font-size: 15px;
  white-space: nowrap;
}

/* Compact round icon button (navbar WhatsApp).
   gap:0 + justify-content keep the glyph optically centred in the circle.
   The glyph keeps WhatsApp's own green — the only green on the page. */
.btn--icon-round {
  display: flex;
  width: 38px;
  height: 38px;
  padding: 0;
  gap: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--whatsapp);
  border: 1px solid var(--hairline);
  box-shadow: none;
  flex-shrink: 0;
  transition: border-color 0.4s ease, background 0.4s ease;
}
/* block display removes the inline baseline gap, so the glyph sits dead centre */
.btn--icon-round svg { display: block; }
.btn--icon-round:hover { background: transparent; color: var(--whatsapp); border-color: var(--clay); }

/* Secondary: thin clay outline */
.btn--outline {
  background: transparent;
  color: var(--clay);
  border: 1px solid var(--clay);
  box-shadow: none;
}
.btn--outline:hover {
  background: transparent;
  color: var(--clay-deep);
  border-color: var(--clay-deep);
}

/* Secondary on photo backgrounds: thin paper outline, reads below the main CTA */
.btn--ghost-light {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(245, 241, 234, 0.6);
  box-shadow: none;
}
.btn--ghost-light:hover {
  background: rgba(245, 241, 234, 0.1);
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- Scroll animation — a long, clearly visible rise, no bounce ----------
   48px of travel over 1s on a decelerating curve: far enough to read as motion,
   slow enough that it never looks like a repaint glitch. */
.fade-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger, 0ms);
}
.fade-up.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .hero__figure img { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   1. Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.4s ease;
}
/* Once the page has moved, let content pass under a soft blur */
.header.is-scrolled {
  background: rgba(245, 241, 234, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.header__brand {
  font-family: var(--font-serif);
  font-size: 23px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.header__brand:hover { color: var(--ink); }

.header__nav { display: none; }

.header__right { display: flex; align-items: center; gap: 20px; }

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.lang__sep { color: var(--hairline); }
.lang a { color: var(--ink-faint); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.lang a:hover { color: var(--clay); }
.lang a.is-active { color: var(--ink); border-bottom-color: var(--clay); }

.header .btn { padding: 10px 20px; font-size: 14px; }
.header .btn--icon-round { padding: 0; width: 38px; height: 38px; margin-left: auto; }

@media (min-width: 900px) {
  .header__nav {
    display: flex;
    gap: 40px;
    font-size: 14px;
    font-weight: 400;
  }
  .header__nav a { color: var(--ink-soft); }
  .header__nav a:hover { color: var(--clay); }
}

/* ==========================================================================
   2. Hero — must fit within the first screen on desktop
   ========================================================================== */
.hero { text-align: center; }

/* Sized so the two-line title costs ~131px, not ~165px — the single biggest
   vertical saving in the hero. */
.hero__title {
  font-size: clamp(40px, 5vw, 62px);
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.hero__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  margin: 12px 0 0;
}

/* Clean paper between the meta line and the photo: no overlap, no negative
   margin, no z-index. The default clay glow is enough here. */
.hero__cta { margin: 24px 0 0; }

.hero__figure { text-align: center; margin-top: 28px; }
/* Desktop only (>=1224px): the frame breaks well outside the 1104px text column
   so the photo reads as a full-bleed-ish band. Equal negative margins do the
   centring — the container's content width (a fixed 1104px in this range) minus
   the target frame width, halved, on each side.
      --hero-frame-w tracks the page: 93.75vw up to 1440px, then it slows to
      31.25vw + 900px and stops at 1500px, so it never chases an ultrawide.
      1280 -> 1200px   1440 -> 1350px   1600 -> 1400px   >=1920 -> 1500px
   Side margin is 3.125vw (40px) at its tightest, so the blob never reaches the
   page edge. Width only: no height, no clip-path, nothing below 1224px. */
@media (min-width: 1224px) {
  .hero__figure {
    --hero-frame-w: min(93.75vw, 31.25vw + 900px, 1500px);
    margin-left: calc((100% - var(--hero-frame-w)) / 2);
    margin-right: calc((100% - var(--hero-frame-w)) / 2);
  }
}
/* The clipPath carrier is layout-inert */
.hero__clip { position: absolute; width: 0; height: 0; }
/* Wrapper carries the sizing and the wavy-blob cutout.
   The frame is sized from the viewport, never from a fixed pixel height, so the
   whole thing lands above the fold on load. The 100vh term is what the header,
   title, meta and CTA above it leave behind (~400px on a 1440px-wide laptop),
   so on shorter screens the photo gives ground instead of pushing past the fold.
      The x1.2 (and the cap moving 640 -> 768) is what makes the blob read as a
   panoramic window instead of a strip. It is paid for out of the frame's own
   dead space: the clip path bottoms out at y=0.8816, so the lowest 11.84% of
   this box is always transparent. What has to clear the fold is the blob's
   bottom edge at 0.8816 x height, not the box — at 1440x900 that lands at
   889px, 10px clear of a 900px viewport. Only invisible tail falls below. */
.hero__figure-inner {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: min(768px, max(200px, calc(1.2 * (100vh - 400px))));
  /* Organic wavy blob: irregular flowing edges on all four sides.
     No radius or shadow — a clip-path would crop both anyway. */
  clip-path: url(#heroWave);
  overflow: hidden;
  background: var(--card);
}
/* Oversized 6% top and bottom so the parallax shift never uncovers an edge */
.hero__figure-inner img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 719px) {
  /* Phones: don't force one screen. Mobile 100vh is unreliable (the URL bar
     changes it mid-scroll) and the taller 4:3 frame would be cropped by the
     desktop height budget, so both constraints are lifted here.
     Still a flex column, but only so the CTA can be reordered: on a phone the
     thumb is at the bottom, so the button follows the photo instead of sitting
     between the meta line and it. Reading order stays title → meta → photo →
     button; the DOM order (and therefore desktop) is untouched. */
  .hero.container {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
  }
  /* Small margin because the blob's wavy bottom edge already leaves ~40px of
     optical space inside the frame */
  .hero__cta { order: 1; margin-top: 8px; }
  /* Taller 4:3 frame on phones. height:auto hands sizing back to the aspect
     ratio — the desktop 80vh/640px budget would crop it. */
  .hero__figure-inner {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
  }
  .hero__figure { margin-top: 24px; }
}

/* ==========================================================================
   3. Gallery — asymmetric preview grid + lightbox
   ========================================================================== */
.section-head { margin-bottom: 36px; max-width: 640px; }

.section-head h2 { font-size: clamp(32px, 4vw, 42px); }
.section-head p { font-size: 17px; color: var(--ink-faint); margin: 12px 0 0; }

/* Mobile: big kitchen tile on top, then 2x2 grid of vertical photos */
.gallery__preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 180px;
  gap: 20px;
}

/* Gallery tiles read as photos, not buttons: zoom + light darken on hover */
.gallery__tile {
  position: relative;
  padding: 0;
  border: none;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: default;
  box-shadow: 0 18px 34px -28px rgba(43, 38, 33, 0.55);
}
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 33, 0);
  transition: background 0.6s ease;
  pointer-events: none;
}
/* Very slow drift on hover — no bounce, no lift */
.gallery__tile:hover img { transform: scale(1.03); }
.gallery__tile:hover::after { background: rgba(43, 38, 33, 0.06); }

.gallery__tile--large { grid-column: span 2; grid-row: span 1; }

.gallery__more { text-align: center; margin-top: 32px; }
.gallery__more .btn { font-size: 14px; padding: 13px 28px; }
.gallery__more .icon-up { display: none; }
.gallery__more .btn.is-open .icon-up { display: block; }
.gallery__more .btn.is-open .icon-grid { display: none; }

/* Expanded inline gallery (remaining 13 photos) */
.gallery__extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.gallery__extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 20px;
  padding-top: 20px;
}
.gallery__extra .gallery__tile {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.gallery__extra.is-open .gallery__tile { opacity: 1; transform: none; }
.gallery__tile--wide { grid-column: span 2; }

/* Desktop: large kitchen tile left (full height), 2x2 verticals right */
@media (min-width: 720px) {
  .gallery__preview {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-auto-rows: 250px;
    gap: 20px;
  }
  .gallery__tile--large { grid-column: 1; grid-row: 1 / span 2; }
  .gallery__extra-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
    padding-top: 20px;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(43, 38, 33, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity 0.25s ease;
}
.lightbox__img.is-fading { opacity: 0; }

.lightbox__counter {
  position: absolute;
  top: 20px;
  left: 24px;
  color: rgba(245, 241, 234, 0.8);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(245, 241, 234, 0.12);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.3s ease;
}
.lightbox__btn:hover { background: rgba(245, 241, 234, 0.22); }

.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 720px) {
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; }
}

/* ==========================================================================
   4. About
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }

.about__text h2 { font-size: clamp(32px, 4vw, 42px); margin-bottom: 24px; }
.about__text p { margin: 0 0 16px; max-width: 540px; }
.about__text p:last-child { margin-bottom: 0; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Text cards: card fill, one hairline, no shadow */
.fact-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.fact-card__value { font-family: var(--font-serif); font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; color: var(--ink); }
.fact-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 10px;
}

.tags {
  grid-column: span 2;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
.tags .dot { color: var(--clay); }

/* Phones: two equal columns that are allowed to shrink. Plain `1fr` tracks
   refuse to go below their min-content ("Self check-in" + 52px of padding),
   which pushed the grid ~24px wider than the screen on 320-360px phones — the
   document then scrolled sideways and every section looked shifted left with
   its right edge cut off. minmax(0, 1fr) plus tighter padding removes it. */
@media (max-width: 719px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fact-card { padding: 20px 16px; min-width: 0; }
  .fact-card__value { overflow-wrap: break-word; }
  .tags { padding: 16px 18px; }
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1.1fr 1fr; gap: 80px; }
}

/* ==========================================================================
   5. Amenities
   ========================================================================== */
/* An index, not a grid of boxes: hairline-ruled rows in two columns */
.amenities__list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 72px;
  border-top: 1px solid var(--hairline);
}

/* These rows are an index, not a menu — nothing sits behind them. So they carry
   no cursor change, no hover and no active state: a non-interactive element must
   never signal that it can be tapped. */
.amenity {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}

/* Thin outlined disc: 56px wide, a 30px mark inside it — just over half the
   diameter, so the icon reads at text scale without crowding the edge.
   1px hairline reads finer than 2. */
.amenity__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
}
/* Full-strength terracotta: the mark is set in the page accent, not greyed back */
.amenity svg { width: 30px; height: 30px; stroke: var(--clay); flex-shrink: 0; }

/* Phones: two per row, halving the height of the section. A cell is only
   ~130px wide there, so the disc sits above its label rather than beside it,
   and both are centred so the ragged label lengths still read as a grid.
   Grid stretches the cells in a row to equal height, so the hairlines below
   them stay on one line even when a label wraps. */
@media (max-width: 719px) {
  .amenities__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .amenity {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 12px;
    padding: 20px 4px;
    font-size: 14px;
    line-height: 1.35;
  }
  .amenity__icon { width: 52px; height: 52px; }
}

@media (min-width: 720px) {
  .amenities__list { grid-template-columns: 1fr 1fr; }
  .amenity { padding: 20px 2px; }
}

/* ==========================================================================
   6. Location
   ========================================================================== */
.location__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

.location__text h2 { font-size: clamp(32px, 4vw, 42px); margin-bottom: 20px; }
.location__text > p { margin: 0 0 28px; max-width: 500px; }

.location__list { display: flex; flex-direction: column; gap: 0; max-width: 500px; border-top: 1px solid var(--hairline); }
.location__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  font-size: 16px;
}
.location__item span:first-child { font-weight: 400; color: var(--ink); }
.location__item span:last-child {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-photo);
  height: 420px;
  background: var(--card);
}
.location__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 900px) {
  .location__grid { grid-template-columns: 1fr 1.1fr; gap: 80px; }
}

/* ==========================================================================
   7. Reviews
   ========================================================================== */
.reviews__head { margin-bottom: 40px; }
.reviews__head h2 { font-size: clamp(32px, 4vw, 42px); }

/* A spread, not a card grid: one full-width pull-quote, two equal notes beneath */
.reviews__spread { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }

.review-lead { margin: 0; }
.review-lead__mark {
  font-family: var(--font-serif);
  font-size: 92px;
  line-height: 0.6;
  color: var(--clay);
  margin-bottom: 20px;
}
.review-lead p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.5;
  color: var(--ink);
}
.review-lead footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.review-lead__name { color: var(--ink); }
.review-lead__origin { color: var(--ink-faint); }

/* Name and place stay on one line; the credibility label drops beneath it */
.review__by { display: flex; align-items: baseline; gap: 12px; }
/* Identical on all three reviews, so none reads as the truncated one */
.review-meta {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

/* The two secondary notes: equal columns, equal weight, no cropping */
.reviews__side { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
/* No borders, no fills — just a rule above each note */
.review-note { border-top: 1px solid var(--hairline); padding-top: 24px; }
/* Sized up towards the lead quote — still clearly secondary, but substantial
   enough that the shorter text reads as a complete review, not a stub. */
.review-note p {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.review-note footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.review-note__name { color: var(--ink); }
.review-note__origin { color: var(--ink-faint); }

/* Phones: the lead quote runs to several screens at this type size, so it is
   clamped to five lines with an ellipsis. Desktop keeps the full text. */
@media (max-width: 719px) {
  .review-lead p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 720px) {
  /* Lead quote keeps its own full-width row, capped to a readable measure */
  .review-lead p { max-width: 62ch; }
  .reviews__side { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ==========================================================================
   8. Closing CTA — rounded rectangular photo with a light natural overlay
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: url('images/stock/hero-lake.jpg') center / cover no-repeat;
  box-shadow: var(--shadow-photo);
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 33, 0.5);
}
.cta__inner { position: relative; padding: 72px 24px; }
.cta h2 { font-size: clamp(34px, 4.4vw, 48px); color: var(--paper); margin-bottom: 14px; }
.cta p { color: rgba(245, 241, 234, 0.86); margin: 0 0 32px; }
.cta__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Both actions share one width so their edges line up in the stack. The fill
   still carries the hierarchy: clay solid for the primary, paper outline for
   the secondary — only the geometry is equalised. */
.cta__actions .btn {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}

@media (min-width: 900px) { .cta__inner { padding: 88px 64px; } }

/* ==========================================================================
   9. Footer — light beige, dark text
   ========================================================================== */
.footer {
  margin: 0;
  background: var(--paper);
  color: var(--ink-faint);
  font-size: 14px;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid var(--hairline);
}
.footer__brand { font-family: var(--font-serif); font-size: 20px; color: var(--ink); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer a { color: var(--ink-faint); }
.footer a:hover { color: var(--clay); }

@media (min-width: 720px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}