/* ============================================================
   Heart of the Valley Yoga — design system
   Palette drawn from the room itself: plaster, charcoal,
   copper (the murals), coral (the bench, the shell).
   ============================================================ */

:root {
  --plaster:       #EFE9DE;
  --plaster-deep:  #E5DCCB;
  --ink:           #221B13;
  --night:         #14100A;
  --night-soft:    #1D1710;
  --copper:        #A9713F;
  --copper-bright: #C98F58;
  --coral:         #C24B32;
  --coral-deep:    #A83D27;
  --stone:         #756A5A;
  --stone-light:   #A79C8B;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, "Helvetica Neue", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

a { color: inherit; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 420;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); font-variation-settings: "opsz" 100; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-variation-settings: "opsz" 72; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

h2 em, h1 em { font-style: italic; font-weight: 400; }

.overline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1.4rem;
}
.overline.copper { color: var(--copper-bright); }

h2 + .body-lg { margin-top: 1.7rem; }

.chapter { scroll-margin-top: 70px; }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 380;
  line-height: 1.45;
}

.body-lg {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 44em;
}
.body-lg + .body-lg { margin-top: 1.2em; }

.muted { color: var(--stone); }

/* ---------- layout primitives ---------- */

.measure       { max-width: 62rem;  margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 4rem); }
.measure-wide  { max-width: 78rem;  margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 4rem); }
.measure.center { text-align: center; }

.chapter { padding: clamp(5rem, 11vh, 9rem) 0; }

.bleed { margin: clamp(3rem, 7vh, 5.5rem) 0 0; position: relative; }
.bleed img { width: 100%; height: clamp(20rem, 82vh, 46rem); object-fit: cover; }
.bleed figcaption {
  position: absolute; left: clamp(1.4rem, 5vw, 4rem); bottom: 1.2rem;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; opacity: 0.85;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }

.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }

.btn-ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.btn-small { padding: 0.6em 1.4em; font-size: 0.82rem; }
.btn-big   { padding: 1.05em 2.4em; font-size: 1rem; }

.text-link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid var(--stone-light);
  padding-bottom: 1px;
  transition: color 0.25s, border-color 0.25s;
}
.text-link:hover { color: var(--coral); border-color: var(--coral); }

/* ---------- header ---------- */

.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem clamp(1.4rem, 4vw, 3rem);
  color: #fff;
  transition: background 0.4s, color 0.4s, box-shadow 0.4s, padding 0.4s;
}
.site-head.solid {
  background: rgba(239, 233, 222, 0.6);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(34, 27, 19, 0.08);
  padding-top: 0.65rem; padding-bottom: 0.65rem;
}
.site-head.solid.over-dark {
  background: rgba(20, 16, 10, 0.45);
  color: #EDE4D6;
  box-shadow: 0 1px 0 rgba(201, 143, 88, 0.18);
}

/* hamburger */
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  color: inherit; /* buttons don't inherit color by default */
}
.menu-btn span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- menu drawer ---------- */

.drawer {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 16, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #EDE4D6;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.drawer.open { opacity: 1; visibility: visible; }

.drawer-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 8vw, 7rem);
  padding: 2rem;
}
.drawer-label {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 1.1rem;
}
.drawer-label-gap { margin-top: 2.2rem; }
.drawer nav a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 420;
  line-height: 1.7;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.25s;
}
.drawer.open nav a { opacity: 1; transform: none; }
.drawer nav a:hover { color: var(--copper-bright); }
.drawer.open nav a:nth-child(1) { transition-delay: 0.08s; }
.drawer.open nav a:nth-child(2) { transition-delay: 0.13s; }
.drawer.open nav a:nth-child(3) { transition-delay: 0.18s; }
.drawer.open nav a:nth-child(4) { transition-delay: 0.23s; }
.drawer.open nav a:nth-child(5) { transition-delay: 0.28s; }
.drawer.open nav a:nth-child(6) { transition-delay: 0.33s; }
.drawer.open nav a:nth-child(7) { transition-delay: 0.38s; }

body.drawer-locked { overflow: hidden; }

.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-right: auto;
}
.brand-mark {
  width: 30px; height: 30px;
  object-fit: contain;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 560;
  letter-spacing: 0.01em;
}
.brand-name em { font-style: italic; font-weight: 420; opacity: 0.85; }

.site-nav { display: flex; gap: 1.7rem; }
.site-nav a {
  font-size: 0.98rem; font-weight: 600;
  text-decoration: none; opacity: 0.88;
  transition: opacity 0.2s;
}
.site-nav a:hover { opacity: 1; }

/* ---------- ch.0 arrive ---------- */

.arrive {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.arrive-media { position: absolute; inset: 0; }
.arrive-media .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 2.2s ease;
}
.arrive-media .slide.is-active {
  opacity: 1;
  animation: hero-settle 8s var(--ease-out) both;
}
@keyframes hero-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.arrive-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,16,10,0.38) 0%, rgba(20,16,10,0) 32%),
    linear-gradient(8deg, rgba(20,16,10,0.84) 0%, rgba(20,16,10,0.38) 48%, rgba(20,16,10,0.06) 74%);
}
.arrive-copy {
  position: relative;
  padding: 0 clamp(1.4rem, 5vw, 4rem) clamp(4.5rem, 11vh, 8rem);
  max-width: 68rem;
}
.arrive-copy .overline {
  color: #EFE0CB;
  text-shadow: 0 1px 10px rgba(20, 16, 10, 0.55);
}
.arrive-copy .lede { margin-top: 1.4rem; opacity: 0.92; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

.scroll-cue {
  position: absolute; right: clamp(1.6rem, 4vw, 3rem); bottom: 2.4rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  display: grid; place-items: center;
}
.scroll-cue span {
  width: 8px; height: 8px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg) translate(-1px,-1px);
  animation: cue-drift 2.2s ease-in-out infinite;
}
@keyframes cue-drift {
  0%, 100% { transform: rotate(45deg) translate(-2px,-2px); opacity: 0.6; }
  50%      { transform: rotate(45deg) translate(1px,1px);  opacity: 1; }
}

/* ---------- ch.1 the room ---------- */

.room { background: var(--plaster); }

/* triptych: outer corners rounded, side images fade into the center image,
   reading as one continuous space */
.detail-row {
  display: flex;
  align-items: flex-start;
  max-width: 78rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.detail { min-width: 0; }
.detail img {
  width: 100%;
  height: clamp(11rem, 26vw, 24rem);
  object-fit: cover;
}
/* The center image is wider and extends beneath both side images' fade
   zones, so each seam is a pure crossfade with no hard edge. The outer
   images are narrower and their fades complete before the middle, leaving
   a clear central band where the center photo lives on its own. */
/* Only the two outer images carry a fade. The center sits fully opaque
   BENEATH them, wide enough that its hard edges stay hidden under each
   neighbour's opaque zone, and each fade lives entirely within the overlap
   so the outer image dissolves into the shell (never into the background). */
.t-left, .t-right { flex: 0 0 42%; position: relative; z-index: 2; }
.t-center { flex: 0 0 34%; z-index: 1; margin: 0 -9%; }
.t-left img {
  border-radius: 1.25rem 0 0 1.25rem;
  -webkit-mask-image: linear-gradient(to right, #000 79%, transparent 99%);
          mask-image: linear-gradient(to right, #000 79%, transparent 99%);
}
.t-right img {
  border-radius: 0 1.25rem 1.25rem 0;
  -webkit-mask-image: linear-gradient(to left, #000 79%, transparent 99%);
          mask-image: linear-gradient(to left, #000 79%, transparent 99%);
}
.detail figcaption {
  margin-top: 0.9rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone);
}
.t-right figcaption { text-align: right; }

/* ---------- ch.2 the heat ---------- */

.heat {
  background: var(--night);
  color: #EDE4D6;
}
.heat h2 { color: #F3EADB; }
.heat h2 em { color: var(--copper-bright); }
.heat .body-lg { color: rgba(237, 228, 214, 0.82); }
.heat .body-lg strong { color: var(--copper-bright); font-weight: 600; }

.heat-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 78rem;
  margin: clamp(3.5rem, 8vh, 6rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.heat-img img {
  width: 100%; height: auto;
  border-radius: 1.25rem;
  /* pull the washed-out haze down so the figure reads */
  filter: brightness(0.93) contrast(1.14) saturate(1.05);
}

.dark-bleed figcaption { color: rgba(237,228,214,0.75); }

.practices { margin-top: clamp(4rem, 9vh, 6.5rem); }
.practices-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--copper-bright);
  margin-bottom: 1.6rem;
}
.practice-list { list-style: none; }
.practice-list li { border-top: 1px solid rgba(201, 143, 88, 0.28); }
.practice-list li:last-child { border-bottom: 1px solid rgba(201, 143, 88, 0.28); }
.practice-list a {
  display: flex; justify-content: flex-start; align-items: baseline;
  gap: 2rem;
  padding: 1.15rem 0.2rem;
  text-decoration: none;
  transition: padding-left 0.4s var(--ease-out), background 0.3s;
}
.practice-list a:hover { padding-left: 1rem; background: rgba(201, 143, 88, 0.06); }
.p-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 420;
  transition: color 0.25s;
}
.practice-list a:hover .p-name { color: var(--copper-bright); }
.p-note { font-size: 0.88rem; color: rgba(237,228,214,0.6); margin-left: auto; text-align: right; }
.p-arrow {
  color: var(--copper-bright);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.practice-list a:hover .p-arrow { opacity: 1; transform: none; }

/* ---------- ch.3 the people ---------- */

.people { background: var(--plaster); }

.people-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  max-width: 78rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.people-grid figure { overflow: hidden; border-radius: 1.25rem; }
.people-grid img { width: 100%; height: 100%; object-fit: cover; }
.pg-a { grid-row: span 2; }
.pg-b, .pg-c { aspect-ratio: 4 / 3.1; }

.pull {
  max-width: 62rem;
  margin: clamp(4rem, 9vh, 6rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
  text-align: center;
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--ink);
}
.pull cite {
  display: block;
  margin-top: 1.2rem;
  font-style: normal;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
}

/* ---------- ch.4 begin ---------- */

.begin { background: var(--plaster-deep); padding-bottom: 0; }

.begin-card {
  position: relative;
  max-width: 34rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.8rem, 4vw, 3rem);
  background: var(--plaster);
  text-align: center;
  border: 1px solid rgba(169, 113, 63, 0.25);
  border-radius: 1.25rem;
}
.bc-kicker {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper);
}
.bc-price {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0.7rem 0 0.3rem;
}
.bc-price strong { color: var(--coral); font-weight: 560; }
.bc-note { color: var(--stone); font-size: 0.95rem; margin-bottom: 1.8rem; }
.begin-card .btn { margin-bottom: 1.1rem; }
.begin-card .text-link { display: block; }

.first-visit {
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  text-align: center;
}
.first-visit h3 { margin-bottom: 1.2rem; }
.first-visit ul { list-style: none; color: var(--stone); }
.first-visit li { padding: 0.35rem 0; }

/* schedule */
.schedule { margin-top: clamp(4rem, 9vh, 6rem); }
.schedule-title { margin-bottom: 1.6rem; }
.schedule-widget {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid rgba(34, 27, 19, 0.08);
  border-radius: 1.25rem;
}

/* visit */
.visit-photo {
  margin-top: clamp(4rem, 9vh, 6rem);
  position: relative;
}
.visit-photo img {
  width: 100%;
  height: clamp(18rem, 60vh, 34rem);
  object-fit: cover;
  border-radius: 1.25rem;
}
.visit-photo figcaption {
  position: absolute; left: clamp(1.4rem, 5vw, 4rem); bottom: 1.2rem;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.visit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: clamp(4rem, 9vh, 6rem);
  padding-bottom: clamp(4rem, 9vh, 6rem);
}
.visit-col h3 { font-size: 1.1rem; margin-bottom: 0.7rem; color: var(--copper); }
.visit-col a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--stone-light); }
.visit-col a:hover { color: var(--coral); border-color: var(--coral); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--night);
  color: rgba(237, 228, 214, 0.7);
  text-align: center;
  padding: clamp(3.5rem, 8vh, 5rem) 1.5rem;
  font-size: 0.9rem;
}
.foot-logo {
  height: 44px; width: auto;
  margin: 0 auto 1.4rem;
  filter: invert(0.92) sepia(0.14);
  opacity: 0.9;
}
.foot-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-bottom: 0.7rem;
}
.foot-nav a {
  color: rgba(237, 228, 214, 0.75);
  font-size: 0.85rem;
  text-decoration: none;
}
.foot-nav a:hover { color: var(--copper-bright); }
.foot-nav-sub { margin-bottom: 1.6rem; }
.foot-nav-sub a { color: rgba(237, 228, 214, 0.45); font-size: 0.78rem; }
.site-foot .muted { color: rgba(237, 228, 214, 0.4); margin-top: 0.4rem; }

/* ---------- interior page template ---------- */

.page-hero {
  position: relative;
  min-height: clamp(26rem, 64vh, 42rem);
  display: flex; align-items: flex-end;
}
.page-hero-media { position: absolute; inset: 0; overflow: hidden; }
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* the image dissolves into the page: the treatment carried over
     from the original interior headers */
  -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 46%, transparent 98%);
}
/* same top scrim as the home hero so the transparent header stays legible */
.page-hero-media::after {
  content: '';
  position: absolute; inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(20,16,10,0.4) 0%, rgba(20,16,10,0) 100%);
}
.page-hero-copy {
  position: relative;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(9rem, 26vh, 14rem) clamp(1.4rem, 5vw, 4rem) 0;
}
.page-hero-copy h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.page-hero-copy .lede { margin-top: 1rem; color: var(--stone); }
/* the overline sits where the image is still strong: lift it with a plaster glow */
.page-hero-copy .overline {
  text-shadow:
    0 0 10px rgba(239, 233, 222, 0.9),
    0 0 22px rgba(239, 233, 222, 0.75);
}
.page-hero-copy h1 {
  text-shadow:
    0 0 14px rgba(239, 233, 222, 0.55),
    0 0 34px rgba(239, 233, 222, 0.4);
}

.keywords {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--copper);
  text-align: center;
  max-width: 62rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
  text-wrap: balance;
}

.page-body { padding-top: clamp(2.5rem, 5vh, 4rem); }
.page-body .measure > .body-lg { margin-top: 1.2em; }
.page-body h3 { margin: 2.6em 0 0; }
.page-body h3 + .body-lg { margin-top: 0.8em; }

.page-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 78rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.page-split figure img { width: 100%; height: auto; border-radius: 1.25rem; }
.page-split figcaption {
  margin-top: 0.9rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone);
}

/* low-resolution originals render at their natural size, never upscaled */
.img-natural {
  display: block;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  max-width: min(100%, var(--natural-w, 24rem));
  height: auto; /* keep aspect ratio when max-width overrides the width attribute */
  border-radius: 1rem;
}

.page-cta {
  text-align: center;
  margin-top: clamp(4rem, 9vh, 6rem);
  padding: clamp(3rem, 7vh, 5rem) clamp(1.4rem, 5vw, 4rem);
  background: var(--plaster-deep);
}
.page-cta .btn { margin: 1.4rem 0.5rem 0.9rem; }
.page-cta .text-link { display: block; max-width: max-content; margin: 0 auto; }
.page-cta h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* offerings index: cards */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.4rem, 3vw, 2.4rem);
  max-width: 78rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.offer-card { display: block; text-decoration: none; }
.offer-card img {
  width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover;
  border-radius: 1.25rem;
  transition: transform 0.5s var(--ease-out);
}
.offer-card:hover img { transform: translateY(-4px); }
.offer-card h3 { margin-top: 1.1rem; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.offer-card h3::after {
  content: ' \2192';
  color: var(--coral);
  opacity: 0;
  transition: opacity 0.25s;
}
.offer-card:hover h3::after { opacity: 1; }
.offer-card p { color: var(--stone); font-size: 0.92rem; margin-top: 0.25rem; }

/* community gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 78rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.gallery-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 1.25rem;
}

@media (max-width: 900px) {
  .page-split { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .arrive-media .slide { animation: none; transition: none; }
  .scroll-cue span { animation: none; }
}

/* ---------- responsive ---------- */

.desk-only { display: inline; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .drawer-inner { grid-template-columns: 1fr; gap: 2rem; overflow-y: auto; max-height: 100vh; padding: 5.5rem 2rem 3rem; }
  .drawer { place-items: start center; }
  .drawer nav a { font-size: 1.35rem; line-height: 1.9; }
  .heat-split { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .pg-a { grid-row: auto; }
  .detail figcaption { font-size: 0.66rem; }
  .visit { grid-template-columns: 1fr; gap: 2.2rem; }
  .desk-only { display: none; }
}