/* The Gardenia Venue · homepage dev mockup
   Layout follows the Hartford design Christine sent (measured at 1440px wide),
   recolored and reworded for The Gardenia. Original code; no template assets.
   Oct 17: Christine's sage green (#a4b792) replaces the navy. The sage is too light
   for text (2:1 on white), so it takes the bands, buttons and fills, and text moves
   to a deep green-charcoal. The light blues stay as the accent pairing.
   Oct 19: the header logo and the giant hero word are Christine's own GARDENIA wordmark
   (img/gardenia-wordmark.svg), sized in em off the old font sizes; color is currentColor.
   Oct 21 (call with Christine): all blue is gone. Two greens carry the site, the dark green
   of the Questions section and the mid sage of the section after it, with a pale green as
   the occasional light fill. The header logo is the dark green; the hero word stays white. */

:root {
  /* Gardenia palette: Christine's greens on the blush white page */
  --paper: #f9f4f4;      /* blush white page */
  --ink: #262b24;        /* deep green-charcoal: text */
  --forest: #2f4331;     /* dark green: header logo, facts, galleries, questions, steps */
  --sage: #a4b792;       /* Christine's mid green: bands, buttons, fills */
  --pale: #e2e9da;       /* light green: italic words over photos and dark bands */
  --moss: #5f7350;       /* green for italic display words on the page (4.7:1) */
  --shade: 30, 36, 27;   /* rgb of the photo shading */

  --f-display: 'Antic Didone', 'Didot', Georgia, serif;
  --f-mark: 'Forum', 'Didot', Georgia, serif;
  --f-body: 'Libre Baskerville', Georgia, serif;
  --f-label: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --canvas: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.canvas { width: min(var(--canvas), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--forest); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 10px; top: 10px; }
.dark { background: var(--sage); color: var(--ink); }
.dark-forest { background: var(--forest); color: var(--paper); }
/* Text inside sage bands stays dark; the "--light" styles below read these */
.halves__text.dark { --on-band: var(--ink); --on-band-accent: var(--ink); }

/* ── Type ─────────────────────────────────────────── */
.display {
  font-family: var(--f-display);
  font-size: 55px;
  line-height: 66px;
  color: var(--ink);
}
.display em { font-style: italic; color: var(--moss); }
.display--light { color: var(--on-band, var(--paper)); }
.display--light em { color: var(--on-band-accent, var(--pale)); }
.display--small { font-size: 38px; line-height: 46px; }

.body {
  font-size: 14px;
  line-height: 25.2px;
  letter-spacing: 0.7px;
}
.body p + p { margin-top: 25.2px; }
.body--light { color: var(--on-band, var(--paper)); }
.body--15 { font-size: 15px; line-height: 27px; letter-spacing: 0; }
.body--15 p + p { margin-top: 27px; }

.eyebrow {
  font-family: var(--f-label);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--on-band, var(--paper)); }

.link-line {
  display: inline-block;
  font-family: var(--f-label);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  padding: 0 7px 7px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s ease;
}
.link-line:hover { opacity: 0.65; }
.link-line--light { color: var(--on-band, var(--paper)); letter-spacing: 1.5px; }

.arrow {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 1px;
  background: var(--ink);
}
.arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: rotate(45deg);
  transform-origin: 100% 0;
}
.arrow--light, .arrow--light::after { background: var(--on-band, var(--paper)); border-color: var(--on-band, var(--paper)); }
.arrow--light::after { background: none; }
.arrow::after { background: none; }

/* ── Header ───────────────────────────────────────── */
/* Pinned while scrolling, as in the original */
.site-header { z-index: 50; background: var(--paper); }   /* position + states: Nov 2026 block below */
.nav {
  width: min(var(--canvas), 100% - 40px);
  margin-inline: auto;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__group { display: flex; justify-content: space-around; }
.nav__group a {
  font-family: var(--f-label);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.nav__group a:hover { opacity: 0.6; }
.nav__group a[aria-current="page"] { border-bottom: 1px solid currentColor; }
.nav__group .nav__cta, .mobile-menu .nav__cta {
  padding: 7px 16px; border-radius: 999px;
  background: var(--forest); color: var(--paper); border: 0;
}
.nav__group .nav__cta:hover { opacity: 1; background: var(--sage); color: var(--ink); }
.logo {
  display: block;
  height: auto;
  aspect-ratio: 6177 / 1152;
  overflow: visible;
}
.wordmark {
  font-size: 40px;
  padding: 0 28px;
  color: var(--forest);
}
.wordmark .logo { width: 5.4em; }
.nav__toggle { display: none; }
.mobile-menu { display: none; }

/* ── Hero ─────────────────────────────────────────── */
.hero { padding-bottom: 10px; }
.hero__frame {
  position: relative;
  height: 798px;
  margin: 0 40px;
  overflow: hidden;
}
.hero__strip {
  display: flex;
  height: 100%;
  width: max-content;
  animation: strip 70s linear infinite;
}
.hero__strip img {
  width: 600px;
  height: 100%;
  object-fit: cover;
  flex: none;
}
@keyframes strip { to { transform: translateX(-50%); } }

.hero__wordmark {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;                   /* the last A's swash rests on the frame's bottom edge */
  font-size: 250px;
  color: var(--paper);
  pointer-events: none;
}
.hero__wordmark .logo { width: 4.2em; margin-inline: auto; }
.hero__tagline {
  margin-top: 48px;
  text-align: center;
  font-family: var(--f-label);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

/* ── Text + photo split (welcome, rental details) ── */
.split { padding: 112px 0; }
.split__inner {
  display: grid;
  grid-template-columns: 508px 495px;
  column-gap: 74px;
  align-items: center;
  padding-left: 26px;
}
.split__inner--narrow-gap {
  grid-template-columns: 489px 495px;
  column-gap: 68px;
  padding-left: 51px;
}
.split__text--right { text-align: right; }
.split__text .display { margin-bottom: 15px; }
.split__text .eyebrow + .display { margin-top: 3px; margin-bottom: 19px; }
.split__text .body { letter-spacing: 0.28px; max-width: 408px; margin-left: auto; }
.split__text--wide .body { max-width: none; }
.split__text--wide .body { letter-spacing: 0.7px; }
.split__text .links { margin-top: 27px; display: flex; justify-content: flex-end; gap: 27px; }
.split__photo { height: 626px; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Crossfading photo stack */
.fade-stack { position: relative; overflow: hidden; }
.fade-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fade 15s infinite; }
.fade-stack img:nth-child(1) { animation-delay: 0s; }
.fade-stack img:nth-child(2) { animation-delay: 5s; }
.fade-stack img:nth-child(3) { animation-delay: 10s; }
@keyframes fade {
  0% { opacity: 0; } 5% { opacity: 1; } 36% { opacity: 1; } 42% { opacity: 0; } 100% { opacity: 0; }
}

/* ── Full-bleed photo band ────────────────────────── */
.band {
  position: relative;
  height: 844px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.band__bg {
  position: absolute; left: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover;
  z-index: -2;
  will-change: transform;
}
.band::after { content: ''; position: absolute; inset: 0; background: rgba(var(--shade), 0.38); z-index: -1; }
.band__inner { width: min(1100px, 100% - 40px); }
.band__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-size: 90px;
  line-height: 100px;
  text-transform: uppercase;
}
.band__title em { font-style: italic; color: var(--pale); }
.band__title .lc { text-transform: none; }
.band__body { width: min(497px, 100%); margin: 8px auto 0; }
.pill {
  display: inline-block;
  margin-top: 34px;
  padding: 13px 35px;
  border: 1px solid var(--paper);
  border-radius: 999px;
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.35px;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}
.pill:hover { background: var(--paper); color: var(--ink); }

/* ── Galleries: three tall cards under one wide word (Christine's pick, victory-template) ── */
.galleries { background: var(--forest); overflow: hidden; padding: 98px 0 60px; }
.galleries--page { padding-top: 70px; }
.galleries__inner { position: relative; width: min(1222px, 100% - 80px); margin-inline: auto; }
.galleries__row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 34px; position: relative; }
/* Nov 4 call: the two hairlines that ran edge to edge across the cards are gone (Christine). */
.gcard { position: relative; display: block; aspect-ratio: 385 / 496; overflow: hidden; background: var(--ink); }
.gcard img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.9); transition: transform 0.8s ease, filter 0.4s ease; }
.gcard:hover img { transform: scale(1.04); filter: brightness(0.92) saturate(1); }
.gcard__label {
  position: absolute; left: 0; right: 0; bottom: 12%; z-index: 1;
  text-align: center; color: #fff;
  font-family: var(--f-mark); font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(var(--shade), 0.5);
}
.galleries__word {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  transform: translate(-50%, -62%);
  font-family: var(--f-display);
  font-size: clamp(48px, 10.2vw, 148px);
  line-height: 1;
  letter-spacing: 0.2em;
  margin-right: -0.2em;          /* trailing tracking would push it off center */
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 28px rgba(var(--shade), 0.3);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Questions: tall word, two photos, numbered list (Christine's pick, madisonmae) ── */
.answers { background: var(--forest); color: var(--paper); overflow: hidden; }
.answers__inner { position: relative; width: min(1440px, 100%); margin-inline: auto; aspect-ratio: 1440 / 960; max-height: 960px; }
.answers__word {
  position: absolute; left: -0.12em; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-size: clamp(64px, 10.4vw, 150px);
  line-height: 0.86;
  text-transform: uppercase;
  color: rgba(164, 183, 146, 0.42);
  white-space: nowrap;
  pointer-events: none;
}
.answers__photo { position: absolute; margin: 0; }
.answers__photo img { width: 100%; height: 100%; object-fit: cover; }
.answers__photo--small { left: 10%; top: 34%; width: 18.75%; aspect-ratio: 270 / 335; }
.answers__photo--tall { left: 31.4%; top: 20.5%; width: 27.5%; aspect-ratio: 396 / 534; }
.answers__list { position: absolute; left: 55%; top: 24%; width: 36%; }
.answers__title {
  font-family: var(--f-body); font-style: italic;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25;
  color: var(--paper);
  margin-bottom: 18px;
  padding-left: 22%;           /* clear of the tall photo, in line with the list */
}
.answers__list ol { list-style: none; margin: 0; padding: 0 0 0 22%; }
.answers__list a {
  display: grid; grid-template-columns: clamp(58px, 6.4vw, 92px) 1fr; column-gap: 14px; align-items: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid rgba(249, 244, 244, 0.6);
  transition: opacity 0.2s ease;
}
.answers__list a:hover { opacity: 0.7; }
.answers__num { font-family: var(--f-display); font-size: clamp(44px, 4.4vw, 64px); line-height: 1; color: var(--sage); }
.answers__text { font-family: var(--f-display); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4; }

/* ── Halves: dark text block + photo ──────────────── */
.halves { display: grid; grid-template-columns: 1fr 1fr; height: 775px; }
.halves__photo { height: 100%; overflow: hidden; }
.halves__photo img { width: 100%; height: 100%; object-fit: cover; }
.halves__text { position: relative; }
.halves__copy {
  position: absolute;
  left: 26.25%;           /* 189px of 720 */
  top: 148px;
  width: min(458px, 66%);
}
.halves__copy .display { margin-bottom: 14px; }
.pullquote {
  margin-top: 30px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 20px;
  line-height: 28px;
  color: var(--on-band, rgba(249, 244, 244, 0.9));
  width: min(401px, 100%);
}
.halves__link { display: table; margin: 60px 0 0 auto; }
.halves__sig { margin-top: 26px; font-size: 12px; letter-spacing: 1.6px; }
#story .halves__photo img { object-position: 50% 40%; }

.halves--photo-left { height: 800px; }

/* ── Quick facts: dark green band right under the hero (Oct 21: moved up, adds price, open vendor, BYOB) ── */
.facts { padding: 56px 0 48px; text-align: center; }
.facts__row {
  width: min(1180px, 100% - 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 38px;
}
.facts__row li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; }
.facts__row li:not(:nth-child(4n)) { border-right: 1px solid rgba(226, 233, 218, 0.25); }
.fact__big {
  font-family: var(--f-mark);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--paper);
}
.fact__small {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--pale);
}
.facts__link { margin-top: 40px; }

/* ── Feature cards ───────────────────────────────── */
.features { padding: 86px 0 89px; }
.features__row {
  width: min(1120px, 100% - 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 38px;
}
.card img { width: 100%; aspect-ratio: 348 / 499; object-fit: cover; }
.card__title {
  margin-top: 25px;
  width: min(292px, 100%);
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 48px;
}
.card__link { display: inline-block; margin-top: 20px; transition: opacity 0.2s ease; }
.card__link:hover { opacity: 0.6; }

/* ── Fixed photo the page scrolls over (Oct 21: replaces the ticker; the Tastefully Yours effect) ──
   The photo is position: fixed inside a clipped section, which works on iOS Safari too,
   where background-attachment: fixed does not. */
.reveal {
  position: relative;
  height: 760px;
  clip-path: inset(0);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--paper);
}
.reveal__bg { position: fixed; inset: 0; z-index: -1; }
.reveal__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.reveal::after { content: ''; position: absolute; inset: 0; background: rgba(var(--shade), 0.36); z-index: 0; }
.reveal__inner { position: relative; z-index: 1; width: min(1100px, 100% - 40px); }

/* ── Closing CTA ─────────────────────────────────── */
/* Oct 21: the words sit up in the sky and the couple shows in full below them,
   instead of the words landing on their faces. */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 92px;
}
.cta__copy { display: flex; flex-direction: column; align-items: center; }
.cta__body { width: min(509px, 100% - 40px); margin: 13px auto 34px; }
.cta__bg {
  position: absolute; left: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover;
  object-position: 50% 34%;
  z-index: -2;
  will-change: transform;
}
/* Shade only behind the words at the top, clear over the couple */
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), 0.62) 0%, rgba(var(--shade), 0.4) 36%, rgba(var(--shade), 0.04) 62%, rgba(var(--shade), 0) 100%);
}
.pill--filled {
  margin-top: 0;
  padding: 14px 56px;
  background: var(--sage);
  border-color: var(--sage);
  color: var(--ink);
  font-weight: 400;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pill--filled:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ── Footer ──────────────────────────────────────── */
/* Oct 21: no phone number and no email anywhere. Every contact goes through the inquiry form
   (or the chat bubble), so the footer carries the address and the page links instead. */
.footer {
  position: relative;
  display: grid;
  grid-template-columns: 415px 1fr;
  column-gap: 10px;
  padding: 48px 0 96px 52px;
  overflow: hidden;
}
.footer__handle { font-family: var(--f-body); font-style: italic; font-size: 14px; line-height: 25.2px; letter-spacing: 0.7px; margin-left: 4px; }
.footer__title { margin-top: 8px; font-family: var(--f-display); font-size: 40px; line-height: 48px; }
.footer__text .body { margin-top: 11px; width: 375px; max-width: 100%; }
.footer__text .body a { text-decoration: underline; text-underline-offset: 3px; }
.footer__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--f-label); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }
.footer__links a:hover { opacity: 0.6; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social svg { width: 20px; height: 20px; fill: var(--forest); }
.social a:hover svg { fill: var(--sage); }
.footer__grid { display: flex; margin-top: 17px; }
.footer__grid img { width: 290px; height: 290px; object-fit: cover; flex: none; }
.footer__legal {
  grid-column: 1 / -1;
  margin-top: 28px; padding-right: 20px;
  text-align: right;
  font-size: 12px; line-height: 21.6px; letter-spacing: 0.6px;
}

/* ── Sticky tour bar (Oct 21). Bottom left, so the chat bubble keeps the bottom right. ── */
.tourbar {
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 24px;
  background: var(--forest); color: var(--paper);
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(var(--shade), 0.6);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.tourbar.is-shown { transform: none; opacity: 1; }
.tourbar__facts { display: flex; gap: 8px; font-family: var(--f-label); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.tourbar__dot { color: var(--sage); }
.tourbar__btn {
  padding: 12px 24px; border-radius: 999px;
  background: var(--sage); color: var(--ink);
  font-family: var(--f-label); font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap; transition: background 0.2s ease;
}
.tourbar__btn:hover { background: var(--paper); }

/* ── Reviews: real Google reviews, equal cards with Read more (Oct 21: replaces the carousel
   and the paid widget) ── */
.reviews { background: var(--sage); padding: 100px 0 110px; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 42px; }
.reviews__head .display em { color: var(--forest); }
.reviews__badge {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 14px; padding: 14px 20px;
  font-family: var(--f-label); font-size: 13px; line-height: 1.5;
  box-shadow: 0 10px 30px -18px rgba(var(--shade), 0.6);
}
.reviews__badge strong { font-size: 22px; font-weight: 500; }
.reviews__badge .g-logo { width: 34px; height: 34px; }
.reviews__stars svg, .rcard__stars svg { width: 15px; height: 15px; fill: #f5a623; vertical-align: -2px; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.rcard {
  background: #fff; border-radius: 14px; padding: 22px 22px 18px;
  box-shadow: 0 12px 30px -20px rgba(var(--shade), 0.7);
  display: flex; flex-direction: column;
  font-family: var(--f-label);
}
.rcard__top { display: flex; align-items: center; gap: 12px; }
.rcard__av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--paper); font-size: 17px; flex: none; }
.rcard__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rcard__name { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard__date { font-size: 12px; color: #6a6f66; }
.rcard .g-logo { width: 24px; height: 24px; flex: none; }
.rcard__stars { display: flex; align-items: center; gap: 2px; margin: 12px 0 10px; }
.rcard__stars .rcard__check { width: 15px; height: 15px; fill: #1a73e8; margin-left: 8px; }
.rcard__src { font-size: 11.5px; color: #6a6f66; margin-left: 5px; }
.rcard__text {
  font-family: var(--f-body); font-size: 13.5px; line-height: 23px; letter-spacing: 0.2px;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(23px * 6);
}
.rcard.is-open .rcard__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rcard__more {
  align-self: flex-start; margin-top: 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-label); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--forest); border-bottom: 1px solid currentColor;
}

/* ── Inner pages ─────────────────────────────────── */
.phead { padding: 80px 0 70px; }
.phead__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: center; }
.phead--text .phead__inner { grid-template-columns: 1fr; max-width: 760px; }
.phead--center { text-align: center; padding-bottom: 50px; }
.phead--center .canvas { max-width: 760px; }
.phead .display { margin: 6px 0 22px; }
.phead .eyebrow a { border-bottom: 1px solid currentColor; }
.phead__text .body p + p { margin-top: 18px; }
.phead__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.close { padding: 100px 0 110px; text-align: center; }
.close__inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.pgrid { columns: 3; column-gap: 16px; }
.pgrid figure { break-inside: avoid; margin-bottom: 16px; }
.pgrid img { width: 100%; height: auto; }
.gallery-sec { padding: 10px 0 90px; }

.wlist { padding: 0 0 100px; }
.wlist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
.wcard { display: flex; flex-direction: column; gap: 10px; }
.wcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity 0.3s ease; }
.wcard:hover img { opacity: 0.85; }
.wcard__names { font-family: var(--f-display); font-size: 32px; line-height: 1.2; margin-top: 8px; }
.wcard__link { font-size: 12px; color: var(--moss); }

.wedding { padding: 0 0 90px; }
.wedding__vendors { max-width: 860px; margin: 60px auto 0; text-align: center; }
.vendors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 28px 0 0; text-align: left; }
.vendors div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(38, 43, 36, 0.15); }
.vendors dt { font-family: var(--f-label); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.vendors dd { margin: 0; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.vendors a { border-bottom: 1px solid rgba(38, 43, 36, 0.35); }
.wedding__nav { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 70px; font-family: var(--f-display); font-size: 24px; }
.wedding__nav a { display: flex; flex-direction: column; gap: 4px; }
.wedding__nav a:nth-child(2) { font-family: var(--f-label); font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.wedding__nav a:last-child { text-align: right; }
.wedding__nav .eyebrow { font-size: 11px; }

.spaces { padding: 0 0 70px; }
.spaces__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 60px; }
.spaces__grid--3 { grid-template-columns: repeat(3, 1fr); }
.spaces .card__title { margin: 0 0 12px; width: auto; font-size: 32px; line-height: 40px; }

.faq { padding: 10px 0 100px; }
.faq__inner { display: grid; grid-template-columns: 250px 1fr; column-gap: 70px; align-items: start; }
.faq__toc { position: sticky; top: 90px; }
.faq__toc ul { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--sage); padding-left: 18px; }
.faq__toc a { font-family: var(--f-label); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.faq__toc a:hover { color: var(--moss); }
.faq__group { scroll-margin-top: 90px; margin-bottom: 56px; }
.faq__group .display { margin-bottom: 14px; }
.faq__more { margin-top: 22px; }
.qa { border-bottom: 1px solid rgba(38, 43, 36, 0.18); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 20px;
  padding: 18px 0; font-family: var(--f-display); font-size: 21px; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font-family: var(--f-label); font-weight: 300; font-size: 24px; line-height: 1; color: var(--moss); transition: transform 0.2s ease; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 40px 20px 0; font-size: 14px; line-height: 25px; letter-spacing: 0.4px; }

.rentals { padding: 0 0 90px; }
.rentals__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rcta {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--pale); padding: 30px 28px; border-radius: 4px;
  transition: background 0.2s ease;
}
.rcta:hover { background: #d6e0cb; }
.rcta__title { font-family: var(--f-display); font-size: 30px; line-height: 1.2; }
.rcta--quote summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.rcta--quote summary::-webkit-details-marker { display: none; }
.rcta--quote[open] { grid-column: 1 / -1; order: 4; background: var(--pale); }
.rcta--quote iframe { width: 100%; height: 1100px; border: 0; background: #fff; margin-top: 18px; }
.rentals__split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 80px; }
.rentals__split .display { margin-bottom: 16px; }
.rentals__addr-h { margin: 34px 0 6px; font-size: 12px; }
.sizes li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(38, 43, 36, 0.15); font-size: 14px; }
.sizes li.fits { font-weight: 700; font-style: italic; }
.sizes li span { font-family: var(--f-label); font-weight: 400; font-style: normal; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--moss); white-space: nowrap; }

.steps { padding: 60px 0 64px; }
.steps__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; counter-reset: none; }
.steps__row li { display: flex; flex-direction: column; gap: 10px; }
.steps__num { font-family: var(--f-display); font-size: 64px; line-height: 1; color: var(--sage); }
.steps__title { font-family: var(--f-display); font-size: 26px; line-height: 1.25; }
.steps__row p { font-size: 14px; line-height: 24px; color: var(--pale); }

.inquire { padding: 80px 0 100px; }
.inquire__inner {
  display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; row-gap: 30px; align-items: start;
  grid-template-areas: "text form" "photo form";
}
.inquire__text { grid-area: text; display: flex; flex-direction: column; gap: 18px; }
.inquire__photo { grid-area: photo; }
.inquire__form { grid-area: form; }
.inquire__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.inquire__form iframe { width: 100%; min-height: 760px; border: none; border-radius: 4px; }

.drive { padding: 64px 0 70px; }
.drive__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; align-items: center; }
.drive__text { display: flex; flex-direction: column; gap: 22px; }
.drive__stats { display: flex; gap: 56px; }
.drive__stats li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.drive__times li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(226, 233, 218, 0.22); font-size: 14px; letter-spacing: 0.3px; }
.drive__times li span:last-child { font-family: var(--f-label); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pale); white-space: nowrap; }
.drive__note { font-size: 12px; color: var(--pale); margin-top: -10px; }

/* Route and area maps: a saved OpenStreetMap image with the line and pins drawn over it */
.routemap { margin: 0; }
.routemap__frame, .areamap__frame { position: relative; }
.routemap__frame img, .areamap__frame img { display: block; width: 100%; height: auto; border-radius: 3px; }
.routemap__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.routemap__halo, .routemap__line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.routemap__halo { stroke: var(--paper); stroke-width: 8; opacity: 0.9; }
.routemap__line { stroke: var(--forest); stroke-width: 4; }
.routemap__pin, .areamap__pin, .areamap__venue { position: absolute; width: 0; height: 0; }
.routemap__pin::before, .areamap__pin::before, .areamap__venue::before {
  content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--paper); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.routemap__pin--venue::before, .areamap__venue::before { left: -9px; top: -9px; width: 18px; height: 18px; background: var(--sage); border-color: var(--forest); }
.routemap__label, .areamap__label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--paper); color: var(--ink); padding: 5px 9px; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--f-label); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.2;
}
.routemap__pin--left .routemap__label, .areamap__pin--left .areamap__label { left: auto; right: 14px; }
.areamap__pin--top .areamap__label { left: 0; top: auto; bottom: 12px; transform: translateX(-50%); }
.routemap__credit { margin-top: 8px; font-size: 11px; letter-spacing: 0.3px; color: var(--pale); }
.routemap__credit a { text-decoration: underline; }
.areamap-sec { padding: 0 0 70px; }
.areamap { max-width: 760px; margin-inline: auto; }
.areamap .routemap__credit { color: var(--moss); }
.areamap__label { padding: 4px 7px; font-size: 10px; letter-spacing: 1px; }
a.areamap__pin:hover .areamap__label, a.areamap__pin:focus-visible .areamap__label { background: var(--forest); color: var(--paper); }

.localvendors { padding: 0 0 80px; }
.localvendors__intro { max-width: 760px; margin-top: 14px; }
.vlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 26px; }
.vlist li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid rgba(38, 43, 36, 0.15); }
.vlist__role { font-family: var(--f-label); font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--moss); }
.vlist__name { font-family: var(--f-display); font-size: 24px; line-height: 1.2; transition: color 0.2s ease; }
.vlist__name:hover { color: var(--moss); }
.vlist__note { font-size: 13px; line-height: 22px; }
.vlist__note a { text-decoration: underline; }
.nearby { margin-top: 34px; }
.nearby .eyebrow { margin-bottom: 12px; }
.nearby ul { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cityfacts { padding: 60px 0; }
.cityfacts .fact__big { color: var(--forest); font-size: 32px; }
.cityfacts .fact__small { color: var(--moss); }
.cityfacts .facts__row li:not(:nth-child(4n)) { border-right-color: rgba(38, 43, 36, 0.15); }
.areas { padding: 0 0 90px; }
.areas__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.areas__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(38, 43, 36, 0.15); transition: color 0.2s ease; }
.areas__list a:hover { color: var(--moss); }
.areas__city { font-family: var(--f-display); font-size: 24px; }
.areas__drive { font-family: var(--f-label); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--moss); white-space: nowrap; }
.denton-qa { padding: 0 0 90px; }
.denton-qa__inner { max-width: 860px; }
.denton-qa .display { margin-bottom: 10px; }

@media (max-width: 1020px) {
  .drive__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Medium screens ──────────────────────────────── */
@media (max-width: 1180px) {
  .split__inner, .split__inner--narrow-gap { grid-template-columns: 1fr 1fr; column-gap: 56px; padding-left: 0; }
  .hero__wordmark { font-size: 17.5vw; }
  .band__title { font-size: 72px; line-height: 82px; }
  .card__title { font-size: 32px; line-height: 40px; }
  .wordmark { font-size: 32px; padding: 0 16px; }
  .nav__group a { letter-spacing: 1.2px; }
  .nav__group .nav__cta { padding: 6px 10px; }
  .footer { grid-template-columns: 1fr; padding-right: 52px; }
  .footer__grid { margin: 30px -52px 0; overflow: hidden; }
  .footer__grid img { width: 16.666vw; height: 16.666vw; }
  .rgrid { grid-template-columns: repeat(2, 1fr); }
  .tourbar__more { display: none; }
  .phead__inner { column-gap: 44px; }
  .spaces__grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1020px) {
  .nav__group a { font-size: 11px; letter-spacing: 0.8px; }
  .nav__group { justify-content: space-evenly; }
  .facts__row { grid-template-columns: repeat(2, 1fr); }
  .facts__row li:not(:nth-child(4n)) { border-right: 0; }
  .facts__row li:nth-child(odd) { border-right: 1px solid rgba(226, 233, 218, 0.25); }
  .faq__inner { grid-template-columns: 1fr; }
  .faq__toc { position: static; margin-bottom: 40px; }
  .faq__toc ul { flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; gap: 10px 18px; }
  .rentals__cards, .steps__row { grid-template-columns: 1fr; }
  /* Stacked steps: each number sits beside its words, so step one reads on the first screen (Ops 652) */
  .steps__row { gap: 32px; }
  .steps__row li { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; align-items: start; }
  .steps__num { grid-row: span 2; min-width: 0.7em; text-align: center; }
  .rentals__split { grid-template-columns: 1fr; }
  .inquire__inner { grid-template-columns: 1fr; grid-template-areas: "text" "form" "photo"; }
  .pgrid { columns: 2; }
  .wlist__grid { grid-template-columns: repeat(2, 1fr); }
  .areas__list { grid-template-columns: repeat(2, 1fr); }
  .cityfacts .facts__row li:nth-child(odd) { border-right-color: rgba(38, 43, 36, 0.15); }
}

/* ── Phone layout (stacks like the original's mobile view) ── */
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; height: 56px; }
  .nav__group { display: none; }
  .wordmark { font-size: 24px; padding: 0; justify-self: center; margin-left: 40px; }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 40px; height: 40px; background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .nav__toggle span { display: block; height: 1px; background: var(--ink); }
  .mobile-menu:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 24px 0 32px; background: var(--paper);
    font-family: var(--f-label); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  }
  .mobile-menu .nav__cta { padding: 12px 26px; }

  .hero__frame { height: 430px; margin: 0; }
  .hero__strip img { width: 300px; }
  .hero__wordmark { font-size: 21vw; }
  .hero__tagline { margin: 24px auto 0; width: 300px; font-size: 13px; line-height: 20px; }

  .split { padding: 64px 0 72px; }
  .split__inner, .split__inner--narrow-gap { display: flex; flex-direction: column-reverse; gap: 36px; }
  .split__photo { width: 100%; height: auto; aspect-ratio: 495 / 626; }
  .split__text--right { text-align: center; }
  .split__text .links { flex-direction: column; align-items: center; gap: 22px; }
  .display { font-size: 32px; line-height: 38px; }
  .body { font-size: 13px; line-height: 21px; }
  .body p + p { margin-top: 21px; }
  .body--lines br { display: none; }

  .band { height: auto; padding: 120px 0; }
  .band__title { font-size: 40px; line-height: 46px; }

  .galleries { padding: 56px 0 64px; }
  .galleries__inner { width: calc(100% - 40px); }
  .galleries__word { position: static; transform: none; margin: 0 -0.2em 24px 0; text-align: center; color: var(--paper); font-size: 12vw; letter-spacing: 0.16em; text-shadow: none; }
  .galleries__row { grid-template-columns: 1fr; row-gap: 14px; }
  .gcard { aspect-ratio: 4 / 3; }
  .gcard__label { bottom: 50%; transform: translateY(50%); font-size: 22px; }

  .answers__inner { aspect-ratio: auto; max-height: none; padding: 56px 20px 64px; display: grid; grid-template-columns: 42fr 58fr; column-gap: 14px; align-items: end; }
  .answers__word { position: static; grid-column: 1 / -1; transform: none; writing-mode: horizontal-tb; font-size: 17.5vw; line-height: 1; margin: 0 0 24px; text-align: center; }
  .answers__photo { position: static; width: auto; }
  .answers__photo--small { margin-bottom: 40px; }
  .answers__list { position: static; grid-column: 1 / -1; width: auto; margin-top: 36px; }
  .answers__list ol { padding-left: 0; }
  .answers__list a { grid-template-columns: 62px 1fr; column-gap: 10px; padding: 14px 0 16px; }

  .halves, .halves--photo-left { grid-template-columns: 1fr; height: auto; }
  .halves .halves__photo { height: 440px; }
  #story .halves__photo { order: -1; }
  .halves__copy { position: static; width: auto; padding: 56px 24px 64px; }
  .halves__link { margin-top: 40px; }
  .pullquote { font-size: 17px; line-height: 25px; }

  .facts { padding: 44px 0 40px; }
  .facts__row { row-gap: 30px; }
  .fact__big { font-size: 30px; }
  .fact__small { font-size: 9.5px; letter-spacing: 1.8px; }

  .features { padding: 24px 0 56px; }
  .features__row { grid-template-columns: 1fr; row-gap: 48px; width: calc(100% - 40px); }
  .card__title { font-size: 30px; line-height: 36px; width: auto; }

  .reveal { height: 560px; }

  .cta { height: 760px; padding: 76px 20px 0; }
  .cta__bg { object-position: 50% 40%; }

  .reviews { padding: 64px 0 72px; }
  .rgrid { grid-template-columns: 1fr; }
  .rcard__text { min-height: 0; }

  .phead { padding: 48px 0 40px; }
  .phead__inner { grid-template-columns: 1fr; row-gap: 32px; }
  .display--small { font-size: 28px; line-height: 34px; }
  .close { padding: 72px 0 80px; }
  .pgrid { columns: 2; column-gap: 8px; }
  .pgrid figure { margin-bottom: 8px; }
  .wlist__grid { grid-template-columns: 1fr; }
  .vendors { grid-template-columns: 1fr; }
  .wedding__nav { font-size: 18px; }
  .spaces__grid, .spaces__grid--3 { grid-template-columns: 1fr; gap: 34px; }
  .spaces .card__title { font-size: 26px; line-height: 32px; }
  .qa summary { font-size: 18px; }
  .qa p { padding-right: 0; }
  .steps__num { font-size: 48px; }
  .areas__list { grid-template-columns: 1fr; }
  .drive__stats { gap: 40px; }
  .vlist { grid-template-columns: 1fr; }
  .areamap__label { font-size: 9px; padding: 3px 5px; }
  .cityfacts { padding: 44px 0; }
  .cityfacts .fact__big { font-size: 26px; }

  .footer { padding: 40px 20px 110px; }
  .footer__title { font-size: 28px; line-height: 34px; }
  .footer__text .body { width: auto; }
  .footer__grid { margin: 24px -20px 0; }
  .footer__grid img { width: 33.333vw; height: 33.333vw; }
  .footer__grid img:nth-child(n+4) { display: none; }
  .footer__legal { margin-top: 16px; padding-right: 0; text-align: center; font-size: 11px; }

  /* Full-width bar on phones, stopping short of the chat bubble in the right corner */
  .tourbar { left: 12px; right: 84px; bottom: 14px; padding: 6px 6px 6px 16px; gap: 10px; justify-content: space-between; }
  .tourbar__facts { font-size: 10.5px; letter-spacing: 0.6px; }
  .tourbar__btn { padding: 11px 14px; font-size: 11.5px; letter-spacing: 0.8px; }
}

@media (max-width: 420px) {
  .tourbar__facts { display: none; }
  .tourbar { right: 84px; padding: 6px; }
  .tourbar__btn { flex: 1; text-align: center; }
}

/* Reduced motion: one block, at the very end of this file (Nov 2026). */

/* ═══════════════════════════════════════════════════════════════════════════════════
   Nov 2026 redo (docs/redo-2026-11.md). Client corrections (B) and the finishing layer (C) our
   newer sites carry, ported from aa-septic / turner-septic into plain CSS. Rules below override
   the ones above where they overlap, on purpose, so the original layout stays readable as is.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Brand scrollbar (C10) ── */
html { scrollbar-color: var(--sage) var(--paper); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--sage); border: 3px solid var(--paper); border-radius: 999px; }

/* ── Focus (C8): forest ring on light surfaces, white where the forest ring would vanish ── */
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.dark-forest :focus-visible, .band :focus-visible, .reveal :focus-visible, .cta :focus-visible,
.reviews--forest :focus-visible, .halves__text :focus-visible, .tourbar :focus-visible,
.galleries :focus-visible, .site-header[data-state="ghost"] :focus-visible, .preloader :focus-visible,
.back-top:focus-visible { outline-color: #fff; }

/* ── Press feedback on every tappable element (C6, from motion.css) ── */
.pill, .nav__cta, .tourbar__btn, .gcard, .card__link, .wcard, .rcta, .link-line, .back-top, .nav__toggle,
.mobile-menu a, .nav__group a, .answers__list a, .rcard__more, .wedding__nav a, .areas__list a,
.footer__links a, .downarrow, .faq__toc a, .vlist__name, .reviews__badge, .social a, .qa summary, .areamap__pin {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 160ms ease, transform 120ms ease;
}
.pill:active, .nav__cta:active, .tourbar__btn:active, .gcard:active, .card__link:active, .wcard:active, .rcta:active,
.link-line:active, .back-top:active, .nav__toggle:active, .mobile-menu a:active, .nav__group a:active,
.answers__list a:active, .rcard__more:active, .wedding__nav a:active, .areas__list a:active, .footer__links a:active,
.downarrow:active, .faq__toc a:active, .vlist__name:active, .reviews__badge:active, .social a:active { transform: scale(0.97); }

/* ── Header in two states (C2; the Nov 4 call dropped "hidden", so it shows from the top).
   Fixed; the page keeps its own top space on inner pages.  ghost: over the hero on the home page.
   solid: past the hero (and always, on inner pages): compact white bar with a soft shadow. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
.site-header[data-state="ghost"] { color: #fff; background: linear-gradient(180deg, rgba(var(--shade), 0.42), rgba(var(--shade), 0)); }
.site-header[data-state="ghost"] .wordmark { color: #fff; }
.site-header[data-state="ghost"] .nav__toggle span { background: #fff; }
.site-header[data-state="ghost"] .nav__group .nav__cta { background: rgba(249, 244, 244, 0.92); color: var(--ink); }
.site-header[data-state="solid"] { background: var(--paper); box-shadow: 0 10px 30px -18px rgba(var(--shade), 0.5); }
.site-header[data-state="solid"] .nav { height: 56px; }
.site-header[data-state="solid"] .wordmark { font-size: 34px; }
.nav { transition: height 0.4s ease; }
.wordmark { transition: font-size 0.4s ease, color 0.4s ease; }
body:not(.has-hero) main { padding-top: 60px; }

/* ── Mobile menu (C3): fades in, locks the page, toggle becomes a close glyph ── */
body.menu-open { overflow: hidden; }
@media (max-width: 760px) {
  .mobile-menu:not([hidden]) {
    position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 49;
    justify-content: center; overflow-y: auto;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }
  .mobile-menu.is-open { opacity: 1; transform: none; }
  .mobile-menu a { font-size: 15px; padding: 4px 8px; }
  .nav { grid-template-columns: 1fr auto; column-gap: 12px; }       /* hamburger stays on the first row */
  .nav__toggle { position: relative; }
  .nav__toggle span { transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header[data-state="ghost"].is-menu-open { background: var(--paper); color: var(--ink); }
  .site-header[data-state="ghost"].is-menu-open .wordmark { color: var(--forest); }
  .site-header[data-state="ghost"].is-menu-open .nav__toggle span { background: var(--ink); }
  .site-header.is-menu-open { opacity: 1; pointer-events: auto; transform: none; }
}

/* ── Hero (C1, C6): full viewport, staggered entrance ── */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 24px; }
.hero__frame { height: clamp(520px, 74svh, 900px); animation: hero-in 1.1s ease both; }
.hero__wordmark { animation: hero-up 1s ease 0.25s both; }
.hero__tagline { animation: hero-up 0.9s ease 0.55s both; }
.hero .downarrow { animation: hero-up 0.9s ease 0.85s both, nudge 2.4s ease-in-out 1.8s infinite; }
@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Phones (B2): one photo at a time, stepped by script.js, swipeable; no CSS strip animation */
@media (max-width: 760px) {
  .hero { padding-top: 56px; min-height: 0; }
  .hero__frame { height: 62svh; min-height: 400px; }
  .hero__strip { animation: none; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); touch-action: pan-y; }
  .hero__strip img { width: 100vw; }
}

/* ── Section arrows (C13) ── */
.downarrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 26px auto 0;
  color: var(--forest); border-radius: 50%;
}
.downarrow svg { width: 22px; height: 22px; animation: nudge 2.4s ease-in-out infinite; }
.downarrow--light { color: var(--pale); }
.downarrow:hover { background: rgba(var(--shade), 0.08); }
.downarrow--light:hover { background: rgba(249, 244, 244, 0.14); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.facts, .galleries, .band { position: relative; }
.facts .downarrow, .galleries .downarrow, .band .downarrow { position: absolute; left: 50%; bottom: 14px; margin: 0; transform: translateX(-50%); z-index: 2; }
.facts .downarrow:active, .galleries .downarrow:active, .band .downarrow:active { transform: translateX(-50%) scale(0.97); }
.facts { padding-bottom: 72px; }
.galleries { padding-bottom: 84px; }

/* ── Welcome as a scrolling photo band (B4). On wide screens the words sit over the sky and
      grass on the right of her photo, not on the couple. ── */
main > section[id] { scroll-margin-top: 56px; }
@media (min-width: 1021px) {
  .band--welcome { justify-content: flex-end; text-align: right; }
  .band--welcome .band__inner { width: min(560px, 46%); margin-right: 7%; }
  .band--welcome .band__body { margin-left: auto; margin-right: 0; }
  .band--welcome .links--center { justify-content: flex-end; }
}
.band--welcome .display--light { color: var(--paper); }
.band--welcome .display--light em { color: var(--pale); }
.band--welcome .band__body { margin-top: 22px; }
.links--center { display: flex; justify-content: center; flex-wrap: wrap; gap: 27px; margin-top: 30px; }
.band--welcome .band__bg { object-position: 50% 42%; }

/* ── Alternating greens down the home page (B5): facts forest, galleries sage, story forest,
      questions pale, reviews forest ── */
.galleries--sage { background: var(--sage); }
.galleries--sage .galleries__word { color: var(--paper); text-shadow: 0 2px 28px rgba(var(--shade), 0.35); }
.halves__text.dark-forest { --on-band: var(--paper); --on-band-accent: var(--pale); }
.answers--pale { background: var(--pale); color: var(--ink); }
.answers--pale .answers__word { color: rgba(47, 67, 49, 0.13); }
.answers--pale .answers__title { color: var(--ink); }
.answers--pale .answers__list a { border-bottom-color: rgba(38, 43, 36, 0.25); }
.answers--pale .answers__num { color: var(--moss); }
.reviews--forest { background: var(--forest); color: var(--paper); }
.reviews--forest .display { color: var(--paper); }
.reviews--forest .display em { color: var(--pale); }
.reviews--forest .eyebrow { color: var(--pale); }

/* ── Gallery tiles on shadow boxes (B15, the Shaker Bar & Bev block) ── */
.galleries__row { column-gap: 46px; }
.gcard { box-shadow: 14px 14px 0 0 var(--forest); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gcard:hover { transform: translate(-2px, -2px); box-shadow: 18px 18px 0 0 var(--forest); }
.gcard img { filter: brightness(0.9) saturate(0.95); }
.galleries--page { background: var(--paper); padding: 70px 0 90px; }
.galleries--page .gcard { box-shadow: 14px 14px 0 0 var(--sage); }
.galleries--page .gcard:hover { box-shadow: 18px 18px 0 0 var(--sage); }

/* ── Galleries page sections (B14, A1) ── */
.gsec { padding: 90px 0 80px; scroll-margin-top: 56px; }
.gsec--pale { background: var(--pale); }
.gsec__head { max-width: 720px; margin-bottom: 40px; }
.gsec__head .display { margin: 6px 0 16px; }
.gsec__real { margin-top: 72px; scroll-margin-top: 90px; }
.gsec__real .display { margin-bottom: 8px; }
.wlist__grid--row { margin-top: 30px; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.wlist__grid--row .wcard__names { font-size: 20px; }
.wlist__grid--row .wcard__link { font-size: 11px; }
.lookbook { margin-top: 10px; box-shadow: 14px 14px 0 0 var(--sage); }
.lookbook iframe { display: block; height: clamp(420px, 72vh, 820px) !important; border-color: var(--pale) !important; }
.gsec__more { margin-top: 36px; }

/* ── Split page headers (B7, after the #split hero demo) ── */
.phead--split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(72vh, 720px); padding: 0; }
.phead--split .phead__panel { background: var(--sage); color: var(--ink); display: flex; align-items: center; padding: 80px clamp(24px, 6vw, 96px); }
.phead--split .phead__text { max-width: 520px; margin-left: auto; }
.phead--split .display { margin: 6px 0 22px; }
.phead--split .phead__photo { overflow: hidden; }
.phead--split .phead__photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
body:not(.has-hero) main > .phead--split:first-child { margin-top: 0; }

/* ── Photos first (C7): big grids breathe, cards keep their crop but gain room ── */
.pgrid { column-gap: 18px; }
.pgrid figure { margin-bottom: 18px; }
.features { padding: 96px 0 100px; }
.split { padding: 120px 0; }

/* ── Scroll reveals (C6). script.js marks the elements; nothing is hidden without it. ── */
[data-reveal] { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.8s ease, transform 0.8s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ── Sticky tour bar (C4): smooth appear, press feedback, clear of the footer and the chat bubble ── */
.tourbar { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease; }
.tourbar__btn:active { transform: scale(0.97); }

/* ── Back to top (C5): bottom left, above the tour bar ── */
.back-top {
  position: fixed; left: 20px; bottom: 90px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--shade), 0.18);
  background: var(--paper); color: var(--forest); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -14px rgba(var(--shade), 0.5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 120ms ease;
}
.back-top svg { width: 18px; height: 18px; }
.back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--pale); }
.back-top:active { transform: scale(0.95); }

/* ── Footer (C9, C11). The old grid had a 415px column plus six fixed 290px photos, so the
      footer's min-content width (1740px) pushed the page wider than the screen and only
      body { overflow-x: hidden } was covering it. Fluid columns and fluid photos now. ── */
.footer {
  grid-template-columns: minmax(0, 415px) minmax(0, 1fr); column-gap: 48px;
  width: min(calc(var(--canvas) + 80px), 100%); margin-inline: auto;
  padding: 56px 40px 150px; overflow: visible;
}
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 0; }
.footer__grid img { width: 100%; height: auto; aspect-ratio: 1; }
.footer__legal { margin-top: 32px; padding-right: 0; }

/* ── Preloader (C12): wordmark on the greens, under a second, first visit of the session only.
      The <html class="preload"> is set by an inline script in <head> before the page paints. ── */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: var(--forest); color: var(--pale);
  place-items: center; pointer-events: none;
}
html.preload .preloader { display: grid; animation: preload-out 0.9s ease 0.35s both; }
.preloader .logo { width: min(60vw, 420px); animation: hero-up 0.6s ease both; }
@keyframes preload-out { to { opacity: 0; visibility: hidden; } }

/* ── Medium screens ── */
@media (max-width: 1180px) {
  .footer { grid-template-columns: 1fr; padding-right: 40px; }
  .footer__grid { margin: 32px 0 0; grid-template-columns: repeat(6, 1fr); }
  .footer__grid img { width: 100%; height: auto; }
}
@media (max-width: 1020px) {
  .wlist__grid--row { grid-template-columns: repeat(3, 1fr); }
  .phead--split { min-height: 0; }
  .phead--split .phead__panel { padding: 64px 32px; }
}

/* ── Phones ── */
@media (max-width: 760px) {
  .phead--split { grid-template-columns: 1fr; }
  .phead--split .phead__panel { padding: 48px 20px 52px; }
  .phead--split .phead__text { margin-left: 0; }
  .phead--split .phead__photo img { aspect-ratio: 4 / 3; height: auto; }
  .gsec { padding: 56px 0 52px; }
  .gsec__head { margin-bottom: 24px; }
  .gsec__real { margin-top: 48px; }
  .wlist__grid--row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lookbook { box-shadow: 8px 8px 0 0 var(--sage); }
  .lookbook iframe { height: min(70vh, 520px) !important; }
  .galleries__row { row-gap: 32px; }
  .gcard { box-shadow: 10px 10px 0 0 var(--forest); }
  .galleries--page .gcard { box-shadow: 10px 10px 0 0 var(--sage); }
  .galleries--page { padding: 40px 0 60px; }
  .galleries { padding-bottom: 72px; }
  .facts { padding-bottom: 64px; }
  .band--welcome { padding: 100px 0 110px; }
  .back-top { left: 12px; bottom: 74px; width: 40px; height: 40px; }
  .footer { padding: 40px 20px 140px; text-align: center; }
  .footer__text .body { width: auto; margin-inline: auto; }
  .footer__links, .social { justify-content: center; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 24px 0 0; }
  .footer__grid img:nth-child(n+4) { display: block; }
  .footer__legal { text-align: center; }
  .pgrid { column-gap: 8px; }
  .pgrid figure { margin-bottom: 8px; }
  .split { padding: 64px 0 72px; }
  .features { padding: 24px 0 56px; }
}

/* ── Reduced motion (WCAG 2.3.3): the one block for the whole stylesheet ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__strip { animation: none; }
  .fade-stack img { animation: none; }
  .fade-stack img:first-child { opacity: 1; }
  .downarrow svg { animation: none; }
  .hero__frame, .hero__wordmark, .hero__tagline, .hero .downarrow { animation: none; opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .gcard:hover { transform: none; }
  html.preload .preloader { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── B6, Miguel's call (Nov 3): the Shaker shadow box on small details behind sections, until
      Christine's picture says otherwise. Forest on the light page, sage on pale and forest bands. ── */
.card img { box-shadow: 10px 10px 0 0 var(--sage); }
.card { padding-right: 10px; }
.split__photo.fade-stack { overflow: visible; box-shadow: 12px 12px 0 0 var(--sage); }
.split__photo.fade-stack img { overflow: hidden; }
.answers__photo img { box-shadow: 10px 10px 0 0 var(--sage); }
.answers--pale .answers__photo img { box-shadow: 10px 10px 0 0 var(--forest); }
.phead:not(.phead--split) .phead__photo img { box-shadow: 12px 12px 0 0 var(--sage); }
.phead:not(.phead--split) .phead__photo { padding: 0 12px 12px 0; }
.wcard img { box-shadow: 8px 8px 0 0 var(--pale); }
.wcard { padding-right: 8px; }
.inquire__photo img { box-shadow: 12px 12px 0 0 var(--sage); }
.inquire__photo { padding: 0 12px 12px 0; }
.halves__photo { position: relative; }
@media (max-width: 760px) {
  .card img, .answers__photo img, .answers--pale .answers__photo img, .phead:not(.phead--split) .phead__photo img,
  .inquire__photo img { box-shadow: 8px 8px 0 0 var(--sage); }
  .split__photo.fade-stack { box-shadow: 8px 8px 0 0 var(--sage); }
}

/* ── Miguel, Nov 3 round two: the top-right Schedule a Tour button stays dark green in every header
      state, and the white words on the Welcome band and the hero wordmark get a deeper shade
      behind them so they stop blending into the photos. ── */
.site-header[data-state="ghost"] .nav__group .nav__cta { background: var(--forest); color: var(--paper); }
.site-header[data-state="ghost"] .nav__group .nav__cta:hover { background: var(--sage); color: var(--ink); }
.band--welcome::after { background: linear-gradient(180deg, rgba(var(--shade), 0.42) 0%, rgba(var(--shade), 0.56) 50%, rgba(var(--shade), 0.46) 100%); }
.band--welcome .band__inner { text-shadow: 0 1px 2px rgba(var(--shade), 0.35), 0 2px 24px rgba(var(--shade), 0.45); }
.hero__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--shade), 0.04) 0%, rgba(var(--shade), 0.14) 50%, rgba(var(--shade), 0.46) 100%);
}
.hero__wordmark { z-index: 2; filter: drop-shadow(0 2px 14px rgba(var(--shade), 0.35)); }

/* ── Miguel, Nov 3 round two (b): the grounds band, the review cards, the footer, the hero top ── */
/* Grounds band: darker, even shade so the white words read on the bright sky; a tidier stack */
.reveal::after { background: linear-gradient(180deg, rgba(var(--shade), 0.5) 0%, rgba(var(--shade), 0.58) 50%, rgba(var(--shade), 0.62) 100%); }
.reveal__inner { width: min(760px, 100% - 40px); display: flex; flex-direction: column; align-items: center; }
.reveal__inner .eyebrow { margin-bottom: 4px; }
.band__title--tidy { font-size: 72px; line-height: 1.1; letter-spacing: 0.02em; margin-top: 12px; }
.reveal .band__body { width: min(520px, 100%); margin-top: 18px; text-shadow: 0 1px 2px rgba(var(--shade), 0.4), 0 2px 20px rgba(var(--shade), 0.45); }
.reveal .band__title, .reveal .eyebrow { text-shadow: 0 2px 18px rgba(var(--shade), 0.4); }
.reveal .pill { margin-top: 30px; }
@media (max-width: 760px) { .band__title--tidy { font-size: 38px; } }

/* Review cards: the forest band's light text was cascading into the white cards. Dark green type. */
.reviews--forest .rcard { color: var(--forest); }
.reviews--forest .rcard__text { color: var(--forest); }
.reviews--forest .rcard__name { color: var(--forest); }
.reviews--forest .rcard__date, .reviews--forest .rcard__src { color: var(--moss); }
.reviews--forest .rcard__more { color: var(--forest); }
.reviews--forest .reviews__badge { color: var(--forest); }

/* Footer: text and photos the same height, links in a clean column, hairline legal row */
.footer { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 64px; align-items: start; padding: 64px 40px 160px; }
.footer__text .body { width: min(420px, 100%); }
.footer__links { margin-top: 24px; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 36px; }
.social { margin-top: 24px; }
.footer__grid { gap: 8px; }
.footer__legal { grid-column: 1 / -1; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(38, 43, 36, 0.15); text-align: left; }
@media (max-width: 1180px) {
  .footer { grid-template-columns: 1fr; }
  .footer__grid { margin-top: 36px; grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 760px) {
  .footer { padding: 44px 20px 150px; }
  .footer__links { grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px 28px; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
  .footer__legal { text-align: center; }
}

/* Hero: the photos touch the top of the page, where the header appears once you scroll */
.hero { padding-top: 0; justify-content: flex-start; }
.hero__frame { margin-top: 0; }
@media (max-width: 760px) { .hero { padding-top: 0; } .hero__frame { margin: 0; } }

/* ── Town pages (Nov 3, Miguel): the six real weddings on every town page ── */
.couples { padding: 0 0 80px; }
.couples .wlist__grid--row { margin-top: 26px; }

/* ── Nov 4 call with Christine (docs/redo-2026-11.md, D-items) ── */

/* D1. Hero: taller photos that keep more of their portrait shape, less white space under them.
   The header shows from the top (ghost over the photos). */
.hero { --hero-h: clamp(560px, calc(100svh - 112px), 920px); min-height: 0; padding-bottom: 12px; }
.hero__frame { height: var(--hero-h); }
.hero__strip { animation: none; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); touch-action: pan-y; cursor: grab; }
.hero__strip.is-dragging { cursor: grabbing; }
.hero__strip img { width: calc(var(--hero-h) * 0.7); user-select: none; -webkit-user-drag: none; }
.hero__tagline { margin-top: 16px; }
.hero .downarrow { margin-top: 4px; }
@media (max-width: 760px) {
  .hero { --hero-h: max(420px, 68svh); }
  .hero__strip img { width: 100vw; }
  .hero__tagline { margin-top: 12px; }
}

/* D2. Hero controls: arrows over the photos, dots under them. Phones swipe and use the dots. */
.hero__btn {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(249, 244, 244, 0.84); color: var(--forest);
  box-shadow: 0 6px 18px -10px rgba(var(--shade), 0.6); cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease;
}
.hero__btn svg { width: 22px; height: 22px; }
.hero__btn:hover { background: #fff; }
.hero__btn:active { transform: translateY(-50%) scale(0.95); }
.hero__btn--prev { left: 18px; }
.hero__btn--next { right: 18px; }
.hero__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 10px; }
.hero__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(47, 67, 49, 0.24); transition: background-color 0.3s ease, transform 0.3s ease; }
.hero__dot[aria-current="true"]::before { background: var(--forest); transform: scale(1.3); }
.hero__btn[hidden], .hero__dots[hidden] { display: none; }
@media (max-width: 760px) { .hero__dots { gap: 1px; } .hero__dot { width: 18px; height: 18px; } }   /* 17 dots on one row (Ops 444) */
@media (max-width: 760px) { .hero__btn { display: none; } }
/* Reduced motion: the photos still change on their own (Christine wants them moving), by a soft
   fade instead of a slide. */
.hero__strip.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero__strip { transition: opacity 0.45s ease !important; }
}

/* D3. The Welcome and Peaceful photos hold still while the page scrolls over them, the same way
   as the tree-lined drive band (.reveal): a fixed photo inside a clipped section, so it works on
   iOS Safari too. */
.band--fixed { clip-path: inset(0); }
.band--fixed .band__fix { position: fixed; inset: 0; z-index: -2; }
.band--fixed .band__bg { top: 0; height: 100%; will-change: auto; }

/* D4. Schedule a Tour: one photo edge to edge, the words up in the sky above the couple.
   Christine, Nov 6: the photo sits low enough in the frame to show the lawn and front walk. */
.phead--full {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(80vh, 780px); padding: 110px 20px 80px;
  display: flex; justify-content: center; text-align: center; color: var(--paper);
}
.phead--full .phead__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.phead--full::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), 0.6) 0%, rgba(var(--shade), 0.34) 38%, rgba(var(--shade), 0.04) 66%, rgba(var(--shade), 0) 100%);
}
.phead--full .phead__text { width: min(620px, 100%); text-shadow: 0 2px 18px rgba(var(--shade), 0.4); }
.phead--full .display { margin: 6px 0 18px; }
@media (max-width: 760px) { .phead--full { min-height: 70svh; padding: 72px 20px 56px; } }

/* D5. Closing call to action with her Request a Tour photo: the wedding party stays in view. */
.cta--party .cta__bg { object-position: 50% 62%; }

/* D6. FAQ: room between the header and the first questions. */
.faq { padding-top: 72px; }
@media (max-width: 760px) { .faq { padding-top: 44px; } }

/* D7. One page per gallery: a row of links between them, photos right under it. */
.gsec--first { padding-top: 48px; }  /* below the split header (Christine's Loom, Nov 5) */
.gswitch ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; }
.gswitch a {
  display: inline-block; padding: 10px 26px; border: 1px solid var(--forest); border-radius: 999px;
  font-family: var(--f-label); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--forest);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gswitch a:hover, .gswitch a[aria-current="page"] { background: var(--forest); color: var(--paper); }
.gswitch-wrap { padding-top: 48px; }
.gswitch-wrap .gswitch ul { margin-bottom: 0; }
@media (max-width: 760px) { .gswitch a { padding: 9px 18px; font-size: 12px; } }

/* Pricing (hidden page couples get after they inquire, Ops 441). Reuses the rentals cards and list. */
.pricing { padding: 0 0 100px; }
.pricing__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 90px; }
.pricing__prices, .pricing__rental, .pricing__letter { margin-top: 90px; }
.pricing__prices .display, .pricing__rental .display { margin-bottom: 28px; }
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.pricing__col .display--small { margin-bottom: 4px; }
.pricing__col .eyebrow { margin-bottom: 14px; }
.pricing__col .sizes li span { font-family: var(--f-display); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pricing__discount { margin-top: 32px; padding: 18px 22px; background: var(--pale); font-size: 15px; line-height: 24px; }
.pricing__rental .eyebrow { margin: -16px 0 22px; }
.pricing__features { list-style: disc; padding-left: 20px; font-size: 15px; line-height: 27px; }
.pricing__rental .body { margin-top: 36px; }  /* full width (Christine's Loom, Nov 5) */
.pricing__letter p + p { margin-top: 27px; }
.pricing__cta { margin-top: 36px; }
/* On the light page the filled button's paper hover made it vanish: go dark green instead. */
.pricing__cta .pill--filled:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.pricing .pgrid { margin-top: 90px; }
/* Christine's Loom, Nov 6: the season names in dark green and their months in a lighter green, an
   arrow under the intro to show there is more below, and the three photos the same height. */
.pricing__col .display--small { color: var(--forest); }
.pricing__col .eyebrow { color: var(--moss); }
/* Ashley, Nov 7: a bigger arrow here (the only page-head arrow is on the pricing page). */
.phead__text .downarrow { width: 64px; height: 64px; margin: 30px 0 0 -12px; }
.phead__text .downarrow svg { width: 40px; height: 40px; }
.pricing__prices { scroll-margin-top: 90px; }
.pricing .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pricing .pgrid figure { margin: 0; }
.pricing .pgrid img { aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 1020px) {
  .pricing__cards, .pricing__grid { grid-template-columns: 1fr; }
  .pricing__grid { gap: 30px; }
  .pricing__cards, .pricing__prices, .pricing__rental, .pricing__letter, .pricing .pgrid { margin-top: 64px; }
}
@media (max-width: 760px) { .pricing .pgrid { gap: 8px; } }

/* Christine's Loom, Nov 6: on the Weddings and Grounds galleries the photos run to the edges of the
   screen with a thin line between them, like her Showit galleries. */
.pgrid--full { columns: 3; column-gap: 4px; padding: 0 4px; }
.pgrid--full figure { margin-bottom: 4px; }
@media (max-width: 1020px) { .pgrid--full { columns: 2; } }

/* Ashley, Nov 7: the venue page's room descriptions sat flush against the split header photo. */
.phead--split + .spaces { padding-top: 80px; }
@media (max-width: 760px) { .phead--split + .spaces { padding-top: 48px; } }

/* Christine, Nov 7 (pricing page): "Pricing" sits on the same pale green as the discount, the two
   season names are underlined, the tour and gift cards look like buttons (a soft shadow that lifts
   on hover, the label in a dark green pill with an arrow), and the title is bigger on phones. */
.pricing__mark { display: inline-block; background: var(--pale); padding: 2px 22px 6px; }
.pricing__col .display--small { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.pricing__cards .rcta {
  box-shadow: 0 12px 26px -14px rgba(var(--shade), 0.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pricing__cards .rcta:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(var(--shade), 0.6); }
.pricing__cards .rcta:active { transform: scale(0.98); }
.pricing__cards .rcta .eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px; border-radius: 999px; background: var(--forest); color: var(--paper);
  font-size: 13px; line-height: 18px; letter-spacing: 1.2px;
}
.pricing__cards .rcta .eyebrow::after { content: '\2192'; font-size: 16px; line-height: 1; }
@media (max-width: 760px) {
  .phead .pricing__title { font-size: 44px; line-height: 50px; }
  .pricing__col .display--small { text-underline-offset: 6px; }
}

/* Christine, Nov 9: the home page hero photos run to both edges of the screen on desktop too
   (phones already did). script.js centers the current photo under the GARDENIA wordmark. */
.hero__frame { margin-inline: 0; }