/* ============================================================
   BERRY BAR — Site Styles
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Acai-derived palette */
  --berry-deep: #47222C;
  --berry: #61303C;
  --berry-light: #E48973;
  --berry-blush: #F1E4E6;   /* soft berry pink (replaced the butter yellow) */
  --berry-mist: #FBF4E2;
  /* One green across the site: forest green, used by the footer, the
     cards, the calculator, the labels and the icons */
  --green: #3E5235;
  --sage-mist: #C9D3BE;   /* light green tint (FAQ, estimator, offer note, icon circles) */
  --coral: #E48973;
  --cream: #F7F1E3;
  --warm-white: #FFFCF7;   /* lightest warm tone: Book Now panels */
  --ink: #2E2226;
  --ink-soft: #5E4A4E;
  --line: #E6DCC8;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1200px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Base size for the whole site. Text and headings are set in rem, so this
   one value scales them all (15px; the browser default is 16px). */
html { font-size: 93.75%; }
/* Smooth scrolling for in-page links, switched on by js/main.js once the
   page has loaded. Left off while a page opens, so a link to a section
   (pricing.html#estimate) jumps straight there instead of starting a glide
   that the animation setup can interrupt. */
html.is-ready { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--berry); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--berry-deep); }
ul, ol { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0 0 0.4em;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
  text-align: center;
  white-space: nowrap;
}

.btn--solid {
  background: var(--berry);
  color: var(--cream);
  border-color: var(--berry);
}
.btn--solid:hover {
  background: var(--berry-deep);
  border-color: var(--berry-deep);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(71,34,44,0.5);
}

.btn--outline {
  background: transparent;
  color: var(--berry);
  border-color: var(--berry);
}
.btn--outline:hover {
  background: var(--berry);
  color: var(--cream);
}

.btn--light {
  color: var(--cream);
  border-color: var(--cream);
}
.btn--light:hover {
  background: var(--cream);
  color: var(--berry-deep);
  border-color: var(--cream);
}

.btn--cream {
  background: var(--cream);
  color: var(--berry-deep);
  border-color: var(--cream);
}
.btn--cream:hover {
  background: var(--berry-light);
  color: var(--cream);
  border-color: var(--berry-light);
}

.btn--lg { padding: 18px 36px; font-size: 1rem; }

.btn--text {
  padding: 0;
  background: none;
  color: var(--berry);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid var(--berry);
  border-radius: 0;
  padding-bottom: 4px;
}
.btn--text:hover {
  color: var(--berry-deep);
  border-bottom-color: var(--berry-deep);
}

/* ---------- 4. Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  transition: color 0.3s var(--ease), opacity 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav__logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* FIX: explicit hover for logo so it never goes invisible */
.nav__logo:hover { color: var(--cream); opacity: 0.85; }

.nav__menu { display: flex; gap: 8px; align-items: center; }

.nav__link {
  color: var(--cream);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__link:hover { color: var(--cream); background: rgba(255,255,255,0.14); }
.nav__link--active { color: var(--cream); }

.nav__link--cta {
  background: var(--cream);
  color: var(--berry-deep);
  padding: 10px 22px;
  margin-left: 8px;
}
.nav__link--cta:hover {
  background: var(--berry-light);
  color: var(--cream);
}

.nav.is-scrolled {
  background: rgba(31,16,20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 0;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.25);
}

.nav__toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- 5. Hero ---------- */
/* Editorial full-bleed: photo dominates the viewport; eyebrow, title,
   subtitle, and CTAs anchor to the bottom-left with generous padding.
   Bottom-anchored overlay keeps the upper portion of the photo clean. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  color: var(--cream);
  overflow: hidden;
  padding: 130px clamp(24px, 6vw, 80px) clamp(60px, 9vh, 110px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* Deep-berry gradient acts as the fallback when no hero photo is set
     and as a subtle wash beneath translucent photos. */
  background-color: var(--berry-deep);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(228,137,115, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(85,42,52, 0.5), transparent 50%),
    linear-gradient(135deg, #3A1D25 0%, #552A34 50%, #2B161B 100%);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Hero video fills the hero like a cover photo, cropping its edges as
   needed (on phones it crops to the middle of the frame). */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The clip has bright white bowls, so the video gets an extra wash: an
   even darkening plus a left-side shade behind the headline on laptops. */
.hero:has(.hero__video) .hero__overlay {
  background:
    linear-gradient(90deg, rgba(31,16,20, 0.6) 0%, rgba(31,16,20, 0.25) 55%, rgba(31,16,20, 0) 80%),
    linear-gradient(180deg, rgba(31,16,20, 0.25) 0%, rgba(31,16,20, 0.15) 30%, rgba(31,16,20, 0.6) 70%, rgba(31,16,20, 0.9) 100%);
}
@media (max-width: 720px) {
  /* Phones: text covers most of the frame, so darken more evenly */
  .hero:has(.hero__video) .hero__overlay {
    background: linear-gradient(180deg, rgba(31,16,20, 0.35) 0%, rgba(31,16,20, 0.45) 35%, rgba(31,16,20, 0.75) 70%, rgba(31,16,20, 0.92) 100%);
  }
}

/* Bottom-anchored gradient: clean photo up top, readable text down low. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(31,16,20, 0.15) 0%,
    rgba(31,16,20, 0)    32%,
    rgba(31,16,20, 0.55) 72%,
    rgba(31,16,20, 0.88) 100%
  );
  z-index: 1;
}

/* Faint top-right tag spelling out what photo belongs here.
   Remove this block (and the matching markup) once a real photo lands. */
.hero__placeholder {
  position: absolute;
  top: 110px;
  right: clamp(24px, 6vw, 80px);
  z-index: 2;
  max-width: 280px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(247,241,227, 0.55);
  pointer-events: none;
}
.hero__placeholder-label {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.65rem;
  color: rgba(247,241,227, 0.75);
  margin-bottom: 4px;
}

.hero__content {
  position: relative;
  z-index: 5;
  max-width: 720px;
}

.hero__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 1.4rem;
  opacity: 0.92;
}

.hero__title {
  color: var(--cream);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  margin-bottom: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero__subtitle {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  max-width: 580px;
  margin: 0 0 2.4rem;
  opacity: 0.92;
  line-height: 1.6;
}

.hero__cta {
  display: flex;
  gap: 14px 28px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
/* Secondary hero action: an underlined text link, not a button */
.hero__link {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(247,241,227,0.55);
}
.hero__link:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* ---------- 6. Section heads ---------- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.section-head__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.7rem;
}
/* Some sections style every <p> inside them as body text (.story__text p,
   .meet__text p, .story-long__block p), which made their
   small labels body-text sized. Keep labels identical everywhere. */
.story__text p.section-head__eyebrow,
.meet__text p.section-head__eyebrow,
.story-long__block p.section-head__eyebrow {
  font-size: 0.8rem;
  line-height: 1.6;
}
.story__text p.section-head__eyebrow,
.meet__text p.section-head__eyebrow,
.story-long__block p.section-head__eyebrow {
  color: var(--green);
}
.section-head__title {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin-bottom: 0.7rem;
  line-height: 1.15;
}
.section-head__title--left { text-align: left; }
.section-head__subtitle {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ---------- 7. Urgency strip ---------- */
.urgency {
  background: var(--berry-deep);
  color: var(--cream);
  padding: 14px 0;
  position: relative;
  z-index: 10;
}
.urgency__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.urgency__text { margin: 0; font-size: 0.95rem; }
.urgency__link {
  color: var(--cream);
  font-weight: 600;
  margin-left: 6px;
  /* An underline, not a border: on phones the link is padded to a 44px tap
     target, and a border would sit at the bottom of that box, far below the text. */
  text-decoration: underline;
  text-decoration-color: rgba(247,241,227,0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.urgency__link:hover {
  color: var(--cream);
  text-decoration-color: var(--cream);
}

/* ---------- 8. Values ---------- */
.values {
  /* Smaller top: it follows the gallery preview on a near-identical cream,
     so the two paddings read as one gap */
  padding: 64px 0 90px;
  background: var(--cream);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.value { text-align: center; padding: 8px; }
.value__icon {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center; justify-content: center;
  /* Forest green circle with cream icons, matching the green cards */
  background: var(--green);
  border-radius: 50%;
}
.value__icon svg { width: 38px; height: 38px; }
.value__title { font-size: 1.3rem; margin-bottom: 0.5rem; }
.value__text { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* ---------- 9. How It Works ---------- */
.how {
  padding: 80px 0;
  background: var(--cream);
  position: relative;
}
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}
.step {
  background: var(--cream);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  position: relative;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -12px rgba(71,34,44,0.15);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Step cards in the site green (the footer's deep green), with white text. */
.step {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 10px 24px -14px rgba(62,82,53,0.45);
}
.step .step__num { color: #fff; opacity: 0.85; }
.step .step__title { color: #fff; }
.step .step__text { color: rgba(255,255,255,0.9); }
/* No lift on hover, so the three cards always stay level */
.step:hover {
  box-shadow: 0 14px 30px -14px rgba(62,82,53,0.5);
}
.step__num {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--green);
  margin-bottom: 0.4rem;
  line-height: 1;
}
.step__title {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.step__text {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

/* ---------- 10. Packages preview ---------- */
.packages-preview {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--berry-blush) 100%);
}

.packages-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
  align-items: stretch;
}

.pkg-card {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 40px 32px 36px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px -16px rgba(71,34,44,0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  /* Guarantees the card fills its grid cell so all three are equal height,
     even during font load before align-items: stretch fully settles. */
  height: 100%;
}
.pkg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(71,34,44,0.28);
}

.pkg-card--featured {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%);
  border: 2px solid var(--berry);
  box-shadow: 0 24px 48px -20px rgba(71,34,44,0.3);
  /* No vertical offset — keeps all three cards aligned on the same baseline.
     The badge, accent border, and deeper shadow already mark this as the
     recommended pick without creating a stair-step layout. */
}
.pkg-card--featured:hover { transform: translateY(-6px); }

.pkg-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--berry);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.pkg-card__top { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.pkg-card__name { font-size: 1.55rem; margin-bottom: 0.25rem; color: var(--berry-deep); }
.pkg-card__guests {
  color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pkg-card__price {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
/* "Starting at" prefix sits as a small caps label above the dollar amount.
   Shared by .pkg-card and .tier price blocks. */
.pkg-card__price span,
.tier__price span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.pkg-card__list { margin: 0 0 28px; flex-grow: 1; }
.pkg-card__list li {
  padding: 10px 0 10px 26px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
}
.pkg-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 14px;
  background: var(--sage-mist);
  border-radius: 50%;
}
.pkg-card__list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 21px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.pkg-card__link {
  font-weight: 600; color: var(--berry); font-size: 0.95rem;
  align-self: flex-start;
  /* Pushes the link to the bottom of the card regardless of how flex-grow
     on the list above resolves. Ensures all three links sit at the same y. */
  margin-top: auto;
}
.pkg-card__link:hover { color: var(--berry-deep); }

.packages-preview__note { text-align: center; color: var(--ink-soft); margin: 0; }

/* ---------- 13. Gallery teaser ---------- */
.gallery-teaser {
  padding: 80px 0 48px;
  background: var(--berry-mist);
}
.gallery-teaser__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px;
  /* Tiles 5 and 6 land in a third row the template never declares.
     Without grid-auto-rows that implicit row collapses to ~0 and those
     two tiles disappear, which is what happened while they were empty
     placeholders (their labels were absolutely positioned, so they
     never gave the row any height either). */
  grid-auto-rows: 200px;
  gap: 14px;
  margin-bottom: 40px;
}
.g-tile {
  background: linear-gradient(135deg, var(--berry-blush) 0%, var(--berry-mist) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease);
}
.g-tile:hover { transform: scale(1.02); }
.g-tile span {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(71,34,44,0.78);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.g-tile--1 { grid-column: span 2; grid-row: span 2; }
.g-tile--2 { grid-column: span 2; }
.g-tile--3 {}
.g-tile--4 {}
.g-tile--5 { grid-column: span 2; }
.g-tile--6 { grid-column: span 2; }

.gallery-teaser__cta { text-align: center; }

/* ---------- 14. Story teaser ---------- */
.story {
  padding: 80px 0;
  background: var(--berry-mist);
}
.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.story__media { position: relative; }
.story__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center;
  background-color: var(--berry-blush);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(71,34,44,0.4);
}
.placeholder-tag {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(71,34,44,0.85);
  color: var(--cream);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.story__text p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

/* ---------- 15. Reviews ---------- */
.reviews {
  padding: 80px 0;
  /* Guests photo behind the review cards, darkened with a neutral shade so
     the white heading reads. Brown shows while it loads. */
  background:
    linear-gradient(rgba(20,14,10,0.32), rgba(20,14,10,0.32)),
    #3A2A1E url('../images/hero-bowls.jpg') center / cover;
}
.reviews .section-head__eyebrow { color: rgba(255,255,255,0.9); }
.reviews .section-head__title { color: #fff; }
.reviews .section-head { text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 22px rgba(0,0,0,0.45); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 36px 28px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-card--empty {
  background: rgba(247,241,227,0.95);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.6);
}
.review-card__placeholder {
  color: var(--berry-deep);
  opacity: 0.45;
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.03em;
}

/* ---------- 16. Final CTA ---------- */
.final-cta {
  position: relative;
  padding: 64px 0 56px;
  background: var(--berry-deep);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta__title {
  color: var(--cream);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin-bottom: 0.7rem;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
}
.final-cta__text {
  font-size: 1rem;
  /* Wide enough that the text runs across in two lines instead of being
     squeezed into a narrow middle column */
  max-width: 860px;
  margin: 0 auto 1.6rem;
  text-wrap: balance;
  opacity: 0.92;
}
.final-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
/* Regular-size buttons in this band (they use btn--lg in the HTML) */
.final-cta .btn--lg { padding: 14px 28px; font-size: 0.95rem; }
.final-cta .btn--solid {
  background: var(--cream);
  color: var(--berry-deep);
  border-color: var(--cream);
}
.final-cta .btn--solid:hover {
  background: var(--berry-light);
  color: var(--cream);
  border-color: var(--berry-light);
}
.final-cta__note {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

/* ---------- 17. Footer ---------- */
.footer {
  background: var(--green);
  color: rgba(247,241,227,0.75);
  padding: 70px 0 24px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 14px;
  display: block;
}
.footer__logo {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--cream);
  margin: 0 0 0.4rem;
  font-weight: 700;
}
.footer__tag { font-style: italic; margin-bottom: 1rem; color: var(--berry-light); }
.footer__service-area { font-size: 0.9rem; margin: 0; }
.footer__heading {
  font-family: var(--font-head);
  color: var(--cream);
  margin: 0 0 1rem;
  font-size: 1.05rem;
}
.footer__col ul li { margin-bottom: 8px; }
.footer__col a { color: rgba(247,241,227,0.7); font-size: 0.95rem; }
.footer__col a:hover { color: var(--cream); }
.footer__bottom { padding-top: 24px; text-align: center; font-size: 0.85rem; opacity: 0.6; }

/* ---------- 18. Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 16px; right: 16px;
  bottom: 16px;
  z-index: 90;
  background: var(--berry-deep);
  color: var(--cream);
  text-align: center;
  padding: 16px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 12px 32px -8px rgba(71,34,44,0.55);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.mobile-cta:hover { color: var(--cream); transform: translateY(-2px); }

/* ---------- 19. Responsive ---------- */
@media (max-width: 980px) {
  .gallery-teaser__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 180px 180px 180px;
    grid-auto-rows: 180px;
  }
  .g-tile--1 { grid-column: span 2; grid-row: span 1; }
  .g-tile--2 { grid-column: span 2; }
  .g-tile--5 { grid-column: span 2; }
}

@media (max-width: 900px) {
  .values__grid,
  .packages-preview__grid,
  .reviews__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .story__inner { grid-template-columns: 1fr; gap: 40px; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(31,16,20,0.96);
    backdrop-filter: blur(10px);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .nav__menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__link, .nav__link--cta { width: 100%; text-align: center; margin: 0; }

  .hero {
    padding: 110px 22px 90px;
    /* Slightly tighter on phones so the photo still feels generous */
    min-height: 92vh;
  }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { width: 100%; max-width: 360px; }
  .hero__placeholder { top: 90px; max-width: 200px; font-size: 0.66rem; }

  .values, .packages-preview, .story, .reviews, .how, .gallery-teaser {
    padding: 70px 0;
  }
  /* Gallery preview and icons sit on two near-identical creams, so their
     paddings read as one gap: trim the shared edge to match other gaps */
  .gallery-teaser { padding-bottom: 40px; }
  .values { padding-top: 48px; }
  .how__steps { grid-template-columns: 1fr; }

  /* Show mobile CTA */
  .mobile-cta { display: block; }
  body { padding-bottom: 80px; }
  .footer { padding-bottom: 80px; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .urgency__text { font-size: 0.88rem; }
}

/* ============================================================
   INNER PAGES (Packages, About, Gallery, Contact)
   ============================================================ */

/* When nav is on inner pages, give it a solid bg by default
   so logo + links don't sit against random page color */
.nav--solid {
  background: rgba(31,16,20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.18);
}

/* ---------- Sub-hero (compact banner for inner pages) ---------- */
.subhero {
  position: relative;
  /* Top padding clears the fixed nav (about 70px tall) */
  padding: 116px 24px 56px;
  color: var(--cream);
  overflow: hidden;
  text-align: center;
}
.subhero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--berry-deep);
  z-index: 0;
}
.subhero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.subhero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  opacity: 0.9;
}
.subhero__title {
  color: var(--cream);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  margin-bottom: 0.8rem;
}
.subhero__title em {
  font-style: italic;
  color: var(--berry-light);
}
.subhero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  opacity: 0.95;
  margin: 0;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
  line-height: 1.65;
}


/* 404 page: the banner is the whole page, so it fills the screen and
   carries the buttons that get visitors back on track. */
.subhero--404 {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subhero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 2.2rem;
}


/* ---------- Pricing page: base price card ---------- */
.price { padding: 72px 0; }
/* Pricing page opens on this section (no banner): clears the fixed nav */
.price--intro { padding: 128px 0 40px; }
.price-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.price-intro .section-head__subtitle { margin-bottom: 1.5rem; }
@media (max-width: 720px) {
  .price--intro { padding: 104px 0 24px; }
}
/* Small section padding: the panel's own edge already separates it, so the
   neighbors' padding alone gives the same ~115px gap as elsewhere */
.price--home {
  padding: 20px 0 32px;
  background: var(--cream);
  color: var(--cream);
}
/* The pricing preview sits in a rounded dark-purple panel on the light
   page, rather than filling the whole section. */
.price--home > .container {
  max-width: 1080px;
  background: var(--berry-deep);
  border-radius: var(--radius-lg);
  padding: 64px 48px;
}
@media (max-width: 720px) {
  .price--home { padding: 8px 0 16px; }
  .price--home > .container {
    width: auto;
    margin: 0 16px;
    padding: 44px 20px;
  }
}
/* Inside the panel: white text, the price card stays a cream card, and the
   buttons flip to cream so they show up. */
.price--home .section-head__eyebrow { color: rgba(247,241,227,0.8); }
.price--home .section-head__title { color: var(--cream); }
.price--home .section-head__subtitle,
.price--home .price-facts { color: rgba(247,241,227,0.85); }
.price--home .price-facts strong { color: var(--cream); }
.price--home .btn--solid { background: var(--cream); color: var(--berry-deep); border-color: var(--cream); }
.price--home .btn--solid:hover { background: var(--berry-light); color: var(--cream); border-color: var(--berry-light); }
.price--home .btn--outline { color: var(--cream); border-color: var(--cream); }
.price--home .btn--outline:hover { background: var(--cream); color: var(--berry-deep); }
.price__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 0;
}
.price-card {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 40px;
  background: var(--cream);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 36px 40px;
  max-width: 920px;
  margin: 0 auto;
}
.price-card__rate {
  border-right: 1px solid var(--line);
  padding-right: 32px;
}
.price-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--berry);
  margin: 0 0 0.4rem;
}
.price-card__amount {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  margin: 0;
}
.price-card__unit { margin: 0.4rem 0 0.8rem; color: var(--ink-soft); font-size: 1.05rem; }
.price-card__bulk { margin: 0; color: var(--berry); font-weight: 600; }
.price-card__heading { font-size: 1.15rem; margin: 0 0 0.9rem; font-family: var(--font-body); font-weight: 700; }
.price-card__list li {
  position: relative;
  padding: 7px 0 7px 28px;
  color: var(--ink);
  font-size: 1rem;
}
.price-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 16px; height: 16px;
  background: var(--sage-mist);
  border-radius: 50%;
}
.price-card__list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 16px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.price-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 24px auto 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.price-facts strong { color: var(--ink); }
.price:not(.price--home) .price-facts li {
  /* small pill badges */
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem;
}
.price:not(.price--home) .price-facts { gap: 10px; margin-top: 20px; }
.price-note {
  /* Rounded dark-purple box with white text */
  max-width: 760px;
  margin: 20px auto 0;
  padding: 14px 24px;
  background: var(--berry-deep);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.92rem;
  color: rgba(247,241,227,0.9);
  text-wrap: balance;
}
.price-note strong { color: var(--cream); }
.offer-note {
  max-width: 920px;
  margin: 20px auto 0;
  padding: 12px 18px;
  /* Light green tint with a green edge (same layout as before, in green) */
  background: var(--sage-mist);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink);
}
.offer-note a { color: var(--green); font-weight: 600; white-space: nowrap; }
.offer-note a:hover { color: var(--berry-deep); }
.price-deposit { text-align: center; margin: 10px 0 0; font-size: 0.95rem; color: var(--berry); font-weight: 600; }

/* ---------- Pricing page: estimator ---------- */
.estimate {
  /* Cream like its neighbors; small padding keeps the gaps around the
     purple panel the same as between the other sections */
  padding: 64px 0 40px;
  background: var(--cream);
  /* Landing room under the fixed nav when jumped to via #estimate */
  scroll-margin-top: 24px;
}
.estimate > .container {
  /* rounded purple panel, like Our Promise on the About page */
  max-width: 1080px;
  background: var(--berry-deep);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
}
@media (max-width: 720px) {
  .estimate > .container { width: auto; margin: 0 16px; padding: 40px 18px; }
  .estimate { padding: 40px 0 26px; }
}
.estimate .section-head__eyebrow { color: rgba(247,241,227,0.8); }
.estimate .section-head__title { color: var(--cream); }
.estimate .section-head__subtitle { color: rgba(247,241,227,0.85); }
.estimate__card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
  align-items: stretch;
}
/* Left card: the choices, on cream */
.estimate__inputs {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 18px 40px -26px rgba(62,82,53,0.45);
}
.estimate__card .field input,
.estimate__card .field select { background-color: var(--warm-white); }
.estimate__inputs { display: grid; gap: 16px; align-content: start; }
/* "Extra toppings" group: a heading styled like the other field labels,
   with smaller sub-labels for Fruit toppings and Other */
.estimate__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.estimate__group legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.field label.estimate__sublabel,
.estimate__sublabel {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  min-height: 32px;
}
.check input { width: 18px; height: 18px; accent-color: var(--berry); }
/* Right card: the total, on cream like the choices card, with a large
   berry number and a purple button */
.estimate__result {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,0.45);
}
.estimate__label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  margin: 0;
}
.estimate__total {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--berry-deep);
  margin: 0.2rem 0 0.9rem;
  font-variant-numeric: tabular-nums;
}
.estimate__lines { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 12px; flex-grow: 1; }
.estimate__lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.estimate__lines li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.estimate__lines li.is-note { display: block; border: 0; color: var(--berry); font-style: italic; }
.estimate__note { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 16px; }

/* ---------- Pricing page: menu ---------- */
.menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 920px;
  margin: 0 auto;
}
.menu__heading { font-size: 1.8rem; color: var(--green); margin: 0 0 18px; }
.flavor-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--green);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.flavor-table th, .flavor-table td {
  padding: 11px 16px;
  font-size: 0.95rem;
  border-top: 1px solid var(--line);
}
.flavor-table tr:first-child th, .flavor-table tr:first-child td { border-top: 0; }
.flavor-table th { text-align: left; font-weight: 400; color: var(--ink); }
.flavor-table td { text-align: right; font-weight: 700; color: var(--ink); }
.menu__list { margin: 0; }
.menu__list li {
  position: relative;
  padding: 5px 0 5px 18px;
  color: var(--ink);
}
.menu__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.menu__list--2col { columns: 2; column-gap: 24px; }
.menu__list--2col li { break-inside: avoid; }
.menu__group { margin-bottom: 22px; }
.menu__group h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.menu__group p { margin: 0; color: var(--ink); }
.menu__group .menu__price-note { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 8px; }
.extras-band {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 28px;
  max-width: 920px;
  margin: 40px auto 0;
  /* light card with a thin border */
  background: var(--warm-white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 22px 32px;
}
.extras-band__label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
}
.extras-band__item p { margin: 0; line-height: 1.45; }
.extras-band__label { color: var(--green); }
.extras-band__item strong { color: var(--berry-deep); }
.extras-band__item + .extras-band__item { border-left: 1px solid var(--line); padding-left: 28px; }

/* Menu layout: the fruit trays photo sits beside the menu (left column),
   instead of behind it. Stacks with the photo on top on smaller screens. */
.menu { padding: 80px 0 56px; background: var(--cream); }
.menu__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: stretch;
}
.menu__photo {
  border-radius: var(--radius-lg);
  background: var(--berry-blush) url('../images/fruit-tiers.jpg') center 45% / cover;
  min-height: 420px;
  box-shadow: 0 24px 50px -30px rgba(71,34,44,0.45);
}
.menu__content .menu__grid { max-width: none; gap: 36px; }
/* Laptops: Flavors stacked above Toppings, each laid out in two columns so
   the stack stays as short as the side-by-side version. The photo keeps
   its size (528px tall, the height it had before). */
@media (min-width: 981px) {
  .menu__layout { align-items: start; }
  .menu__photo { min-height: 0; height: 528px; }
  .menu__content .menu__grid { grid-template-columns: 1fr; gap: 26px; }
  .menu__content .menu__col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .menu__content .menu__heading { grid-column: 1 / -1; margin-bottom: 12px; }
  .menu__content .flavor-table { margin-bottom: 0; }
  .menu__content .flavor-table th, .menu__content .flavor-table td { padding: 9px 14px; }
  .menu__content .menu__list li { padding: 3px 0 3px 18px; }
  .menu__content .menu__list li::before { top: 12px; }
  /* Toppings: Fruit on the left, Classics and Premium on the right */
  .menu__content .menu__col .menu__group:first-of-type { grid-row: 2 / span 2; margin-bottom: 0; }
  .menu__content .menu__col .menu__group { margin-bottom: 14px; }
  .menu__content .extras-band { margin-top: 16px; }
  .menu__content .menu__grid { gap: 16px; }
}
/* Flavors and Toppings on soft white cards, matching the Extras box,
   with the same 16px gap between all three cards on every screen */
.menu__layout .menu__content .menu__grid { gap: 16px; }
.menu__layout .menu__content .extras-band { margin-top: 16px; }
.menu__content .menu__col {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
}
@media (min-width: 981px) {
  .menu__content .menu__heading { margin-bottom: 6px; font-size: 1.5rem; }
  .menu__content .menu__col { padding: 16px 24px 16px; }
  .menu__content .flavor-table th, .menu__content .flavor-table td { padding: 7px 14px; }
  .menu__layout .menu__content .extras-band { margin-top: 16px; padding: 14px 24px; }
}
.menu__content .extras-band { max-width: none; margin-top: 32px; }
@media (max-width: 980px) {
  .menu__layout { grid-template-columns: 1fr; gap: 32px; }
  .menu__photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .menu { padding: 72px 0 56px; }
}

@media (max-width: 760px) {
  .price-card, .estimate__card, .menu__grid { grid-template-columns: 1fr; }
  .price-card { padding: 28px 24px; gap: 24px; }
  .price-card__rate { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; }
  .estimate__inputs, .estimate__result { padding: 24px 20px; }
  .menu__grid { gap: 32px; }
  .extras-band { grid-template-columns: 1fr; gap: 14px; padding: 22px 24px; }
  .extras-band__item + .extras-band__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
}

/* ---------- Included strip ---------- */
.included {
  padding: 90px 0;
  background: var(--cream);
}
.included__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 36px;
  max-width: 920px;
  margin: 0 auto;
}
.included__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.included__item p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.included__item strong { color: var(--ink); }
.included__check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--berry);
  color: var(--cream);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- Tier cards (alternating full layout) ---------- */
.tiers {
  padding: 80px 0;
  background: var(--berry-mist);
}
.tier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
  padding: 48px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px -20px rgba(71,34,44,0.2);
}
.tier:last-of-type { margin-bottom: 0; }
.tier:nth-of-type(even) .tier__media { order: 2; }

.tier--featured {
  border: 2px solid var(--berry);
  box-shadow: 0 20px 60px -24px rgba(71,34,44,0.32);
}

.tier__media {
  position: relative;
}
.tier__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--berry-blush);
  background: linear-gradient(135deg, var(--berry-blush) 0%, var(--berry-mist) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.tier__badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--berry);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  z-index: 1;
}

.tier__body {}
.tier__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--berry);
  margin-bottom: 0.5rem;
}
.tier__name {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--berry-deep);
  margin-bottom: 0.4rem;
}
.tier__tagline {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--berry);
  margin-bottom: 0.8rem;
}
.tier__best {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}
.tier__pricing {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 1.6rem;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tier__price {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
/* .tier__price span styling is shared with .pkg-card__price span above */
.tier__guests {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tier__list {
  margin: 0 0 1.8rem;
}
.tier__list li {
  padding: 10px 0 10px 28px;
  position: relative;
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.tier__list li strong { color: var(--ink); }
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 16px; height: 16px;
  background: var(--sage-mist);
  border-radius: 50%;
}
.tier__list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 21px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.tier-note {
  background: var(--cream);
  padding: 28px 32px;
  border-radius: var(--radius);
  border-left: 4px solid var(--berry);
  margin-top: 24px;
}
.tier-note p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.tier-note strong { color: var(--berry-deep); }

/* ---------- Pricing explainer ----------
   Sits below the three tier cards to set expectations: cards are
   starting points, final quote varies by guest count, flavors,
   toppings, and add-ons. */
.pricing-explainer {
  max-width: 760px;
  margin: 50px auto 30px;
  padding: 36px clamp(24px, 4vw, 44px);
  background: var(--berry-mist);
  border-left: 4px solid var(--berry);
  border-radius: var(--radius-sm);
}
.pricing-explainer__title {
  font-size: 1.6rem;
  margin: 0 0 0.6rem;
  color: var(--berry-deep);
}
.pricing-explainer__intro {
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
.pricing-explainer__list {
  margin: 0 0 1.2rem;
}
.pricing-explainer__list li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pricing-explainer__list li::before {
  content: '+';
  position: absolute; left: 0; top: 6px;
  color: var(--berry);
  font-weight: 700;
  font-size: 1.1rem;
  font-family: var(--font-head);
}
.pricing-explainer__list strong { color: var(--ink); }
.pricing-explainer__cta {
  margin: 1.2rem 0 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Comparison table ---------- */
.compare {
  padding: 80px 0;
  background: var(--cream);
}
.compare__wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px -16px rgba(71,34,44,0.15);
}
.compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.compare__table thead {
  background: var(--berry-mist);
}
.compare__table th, .compare__table td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.compare__table thead th {
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--berry-deep);
  padding: 24px 22px;
}
.compare__table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 30%;
  background: var(--cream);
}
.compare__table tbody td {
  text-align: center;
  color: var(--ink-soft);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: none; }
.compare__featured {
  background: var(--berry);
  color: var(--cream) !important;
}
.compare__featured .compare__tier-name { color: var(--cream); }
.compare__table tbody td:nth-child(3) {
  background: rgba(97,48,60, 0.04);
}

/* ---------- Add-ons ---------- */
.addons {
  padding: 80px 0;
  background: var(--cream);
}
.addons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.addon {
  background: var(--berry-mist);
  padding: 32px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.addon:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -16px rgba(71,34,44,0.22);
}
.addon__icon {
  width: 52px; height: 52px;
  margin-bottom: 16px;
  display: flex;
  align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 12px;
}
.addon__icon svg { width: 28px; height: 28px; }
.addon h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--berry-deep);
}
.addon p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq {
  padding: 80px 0;
  background: var(--cream);
}
.faq__list {
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  /* Simple rows separated by thin lines */
  border-bottom: 1px solid rgba(62,82,53,0.22);
}
.faq__item:first-child { border-top: 1px solid rgba(62,82,53,0.22); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.faq__icon::before {
  top: 50%; left: 0; right: 0; height: 2px;
  transform: translateY(-50%);
}
.faq__icon::after {
  left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%);
}
.faq__item[open] .faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq__answer {
  padding: 0 4px 22px;
}
.faq__answer p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- About: Meet section ---------- */
.meet {
  padding: 80px 0;
  background: var(--cream);
}
/* About page opens straight into this section (no banner), so it clears
   the fixed nav */
.meet--first { padding-top: 128px; }
@media (max-width: 720px) {
  .meet.meet--first { padding-top: 104px; }
}
.meet__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.meet__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--berry-blush) 0%, var(--berry-mist) 100%);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(71,34,44,0.4);
}
.meet__text p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.meet__text em {
  font-style: italic;
  color: var(--berry);
}

/* ---------- About: Long story blocks ---------- */
/* Our Promise: a rounded dark-purple panel on the light page, matching the
   Home page pricing panel, with white text. */
.story-long {
  /* Same cream as the sections above and below, so it only needs a little
     room of its own: this keeps the gap on each side of the purple panel
     equal to the gaps between the other sections */
  padding: 16px 0;
  background: var(--cream);
}
.story-long .story-long__block {
  max-width: 1000px;
  background: var(--berry-deep);
  color: var(--cream);
  padding: 64px 56px;
  border-radius: var(--radius-lg);
}
.story-long .story-long__block p.section-head__eyebrow { color: rgba(247,241,227,0.8); }
.story-long .story-long__block h2 { color: var(--cream); text-wrap: balance; }
.story-long .story-long__block p { color: rgba(247,241,227,0.88); text-wrap: pretty; }
.story-long .story-long__block p:last-child { margin-bottom: 0; }
.story-long .story-long__block > p:not(.section-head__eyebrow) { max-width: 700px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .story-long .story-long__block { padding: 44px 22px; }
}
.story-long__block {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.story-long__block:last-child { margin-bottom: 0; }
/* Label and heading use the same look as every other section head
   (.section-head__eyebrow / .section-head__title). */
.story-long__block .section-head__eyebrow {
  display: inline-block;
  margin-bottom: 0.7rem;
}
.story-long__block h2 {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin-bottom: 1rem;
  color: var(--ink);
}
.story-long__block p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.story-long__block--alt {
  background: var(--cream);
  padding: 56px 48px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -20px rgba(71,34,44,0.18);
}

/* ---------- About: Beliefs (principles) ---------- */
.beliefs {
  padding: 80px 0;
  background: var(--cream);
}
.beliefs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.belief {
  /* Site green with white text: the same setting as the Home page step
     cards (.step), so the two always match */
  background: var(--green);
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  position: relative;
}
.belief__num {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 2.4rem;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.4rem;
  line-height: 1;
}
.belief h3 {
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.belief p {
  color: rgba(255,255,255,0.9);
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ---------- About: Behind the scenes grid ---------- */
.bts {
  /* Same cream as the sections above, so the top padding is small: the gap
     from the green belief cards to this heading matches the other gaps */
  padding: 16px 0 80px;
  background: var(--cream);
}
.bts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bts__tile {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--berry-blush) 0%, var(--cream) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease);
}
.bts__tile:hover { transform: scale(1.02); }
.bts__tile span {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(71,34,44,0.78);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---------- Gallery page ---------- */
.gallery-full {
  padding: 80px 0;
  background: var(--cream);
}
.gallery-empty {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 48px 32px;
  background: var(--berry-mist);
  border: 2px dashed var(--berry-light);
  border-radius: var(--radius-lg);
}
.gallery-empty h3 {
  color: var(--berry-deep);
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}
.gallery-empty p {
  color: var(--ink-soft);
  margin: 0;
}
/* Masonry layout: photos stack down each column with even 16px spacing,
   so tall, square and wide shots fit together without row gaps. */
.gallery-grid {
  columns: 3;
  column-gap: 16px;
}
.gallery-grid__tile {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  break-inside: avoid;
}
.gallery-grid__tile {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--berry-blush) 0%, var(--berry-mist) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery-grid__tile span {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(71,34,44,0.78);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.gallery-grid__tile--tall { aspect-ratio: 3 / 4; }
.gallery-grid__tile--wide { aspect-ratio: 4 / 3; }

/* ---------- Contact / Booking page (inquiry-first layout) ---------- */
.booking {
  padding: 80px 0;
  background: var(--cream);
}
.booking__layout {
  /* One column: the form, with What happens next underneath it */
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 780px;
  margin: 0 auto;
}
.booking__form-col {
  background: var(--cream);
  padding: 48px 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 32px -18px rgba(71,34,44,0.18);
}
.booking__form-title {
  /* Same size and color as every other section heading */
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin: 8px 0 0.5rem;
  color: var(--ink);
}
.booking__form-subtitle {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 1.8rem;
  line-height: 1.6;
}
.booking__small {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 14px 0 0;
}

/* Sidebar — what happens next */
.booking__info-col {
  position: static;
}
.next-steps {
  background: var(--berry-mist);
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.next-steps__title {
  font-size: 1.3rem;
  color: var(--berry-deep);
  margin-bottom: 1.4rem;
}
.next-steps__list {
  margin: 0;
  padding: 0;
  counter-reset: step-counter;
}
.next-steps__item {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.next-steps__item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.next-steps__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--berry);
  color: var(--cream);
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  /* Playfair defaults to old-style figures, which sit low in the circle */
  font-variant-numeric: lining-nums;
}
.next-steps__heading {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
}
.next-steps__body {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.55;
}
.next-steps__note {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed var(--berry-light);
}
.next-steps__note p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.next-steps__note strong {
  color: var(--berry-deep);
}

/* ---------- Form fields ---------- */
.inquiry-form {
  margin-top: 8px;
}
.form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}
.form-row--2 {
  grid-template-columns: 1fr 1fr;
}
.field {
  display: flex;
  flex-direction: column;
}
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 12px 14px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(97,48,60,0.15);
}
.field textarea { resize: vertical; min-height: 100px; }
/* .field sets display:flex, which would otherwise beat the hidden attribute */
.field[hidden] { display: none; }

/* Asterisk drawn in CSS so the notification email reads "Phone number:",
   not "Phone number *:" (Netlify copies the label text). */
.field label.is-required::after {
  content: " *";
  color: var(--berry);
}
.field__hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Text / Email toggle */
.contact-pref { margin: 0 0 14px; }
.contact-pref__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  width: 100%;
  max-width: 280px;
  position: relative;
}
.toggle button {
  font-family: var(--font-body);
  font-weight: 600;
  background: transparent;
  border: 0;
  margin: 0;
  text-align: center;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.toggle button[aria-pressed="true"] {
  background: var(--berry);
  color: #fff;
}
.toggle button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(97,48,60,0.25);
}

/* Date picker (flatpickr), tinted to the brand */
.flatpickr-calendar {
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(46,34,38,0.15);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--berry);
  border-color: var(--berry);
}
.flatpickr-day.today { border-color: var(--berry-light); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--berry-deep);
  fill: var(--berry-deep);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--berry); }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2361303C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.btn--full { width: 100%; margin-top: 8px; }

/* Shown when a send fails; the form keeps everything they typed */
.form-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--berry-mist);
  border: 1.5px solid var(--berry-light);
  border-radius: var(--radius-sm);
  color: var(--berry-deep);
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-error[hidden] { display: none; }
.form-error a { color: var(--berry); font-weight: 600; }

.form-row + .field,
.inquiry-form > .field + .field { margin-top: 14px; }

/* Form success message */
.form-success {
  background: var(--berry-mist);
  border: 2px solid var(--berry-light);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  margin-top: 8px;
}
.form-success__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--berry);
  color: var(--cream);
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 18px;
}
.form-success h3 {
  color: var(--berry-deep);
  margin-bottom: 0.5rem;
}
.form-success p {
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Contact info strip ---------- */
.contact-info {
  padding: 80px 0;
  background: var(--berry-mist);
}
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.contact-info__card {
  background: var(--cream);
  padding: 32px 24px;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid var(--line);
}
.contact-info__icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center; justify-content: center;
  background: var(--berry-blush);
  border-radius: 50%;
}
.contact-info__icon svg { width: 26px; height: 26px; }
.contact-info__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.contact-info__value {
  margin: 0;
  color: var(--berry-deep);
  font-weight: 600;
  font-size: 0.98rem;
  word-break: break-word;
}
a.contact-info__value:hover { color: var(--berry); }

/* ---------- Inner-page responsive overrides ---------- */
@media (max-width: 980px) {
  .tier {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px;
  }
  .tier:nth-of-type(even) .tier__media { order: 0; }
  .tier__img { aspect-ratio: 16 / 10; }
  .addons__grid { grid-template-columns: repeat(2, 1fr); }
  .included__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .subhero { padding: 108px 20px 48px; }
  .tiers, .compare, .addons, .faq, .included { padding: 70px 0; }
  .tier { padding: 28px; }
  .addons__grid { grid-template-columns: 1fr; }
  .compare__table th, .compare__table td { padding: 14px 16px; font-size: 0.9rem; }

  /* Contact responsive */
  .booking, .contact-info { padding: 60px 0; }
  .booking__form-col { padding: 32px 24px; }
  .next-steps { padding: 28px 22px; }
  .form-row--2 { grid-template-columns: 1fr; }
  .contact-info__grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 980px) {
  .contact-info__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked: label and heading first, then the photo, then the story.
     display: contents lets the text's pieces sit around the photo. */
  .meet__inner { grid-template-columns: 1fr; gap: 0; }
  .meet__text { display: contents; }
  .meet__text > .section-head__eyebrow { order: 1; }
  .meet__text > h1, .meet__text > h2 { order: 2; margin-bottom: 24px; }
  .meet__media { order: 3; margin-bottom: 28px; }
  .meet__text > p:not(.section-head__eyebrow) { order: 4; }
  .beliefs__grid { grid-template-columns: 1fr; }
  .bts__grid { grid-template-columns: repeat(2, 1fr); }
  /* Two columns can't balance nine mixed-height photos, so smaller screens
     get an even grid of square tiles. The last photo spans both columns
     so the final row has no hole. */
  .gallery-grid {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gallery-grid__tile,
  .gallery-grid__tile--tall,
  .gallery-grid__tile--wide {
    margin-bottom: 0;
    aspect-ratio: 1 / 1;
  }
  .gallery-grid__tile:last-child:nth-child(odd) {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 720px) {
  .meet, .beliefs, .bts, .gallery-full { padding: 70px 0; }
  .bts { padding-top: 8px; }
  .story-long { padding: 8px 0; }
  .meet.meet--first { padding-top: 104px; }
  .story-long__block--alt { padding: 32px 24px; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html, html.is-ready { scroll-behavior: auto; }
}

/* ============================================================
   29. PHOTO TILES
   ------------------------------------------------------------
   Tiles carry their photo as an inline background-image so each
   one can be swapped in the HTML without touching CSS. The
   gradient defined on each tile class stays underneath as the
   fallback if an image is ever missing.
   ============================================================ */
.g-tile,
.gallery-grid__tile,
.bts__tile,
.tier__img,
.pkg-card__media,
.story__img,
.meet__img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Founders photo (founders.jpg): a tall shot with sky above the couple.
   Anchor low so the crop keeps them and trims sky. */
.story__img,
.meet__img { background-position: center 78%; }

/* Gallery tiles are decorative crops; a gentle lift on hover reads
   as interactive without implying they open a lightbox. */
.gallery-grid__tile {
  transition: transform 0.4s var(--ease);
}
.gallery-grid__tile:hover {
  transform: scale(1.02);
}


/* Visible to screen readers only. Used where the visual design has no
   heading but the document still needs one for navigation. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ============================================================
   30. MOBILE TOUCH + OVERFLOW GUARD
   ------------------------------------------------------------
   Findings from a 400px-wide pass over every page.
   ============================================================ */

/* The story section animates in from x:-40 / x:+40. The layout itself fits
   400px exactly, but while those tweens are mid-flight the page is briefly
   422px wide, which lets a phone scroll sideways for about a second.
   `clip` rather than `hidden` so position:sticky keeps working. */
html,
body {
  overflow-x: clip;
}

@media (max-width: 720px) {
  /* The hamburger is the primary navigation control on a phone and sat at
     40px. 44px is the smallest comfortable touch target. */
  .nav__toggle {
    width: 44px;
    height: 44px;
  }

  /* Standalone text CTAs were 21-30px tall. Padding lifts the tap area to
     44px without changing where the text sits or how the line reads. */
  .urgency__link,
  .btn--text {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links inside the opened menu need room between them, not just around
     the label, or neighbouring items get mis-tapped. */
  .nav__menu a {
    display: block;
    padding-block: 11px;
  }
}

/* ============================================================
   31. BOOK NOW PAGE (contact.html)
   ------------------------------------------------------------
   Two warm-white panels on the cream page: the inquiry form and a
   side panel (quick facts, What happens next, deposit note).
   Side by side and always the same height on laptops; stacked
   on phones, form first. These rules override the older
   booking styles above.
   Colors: neutral gray panel outlines and step lines, button
   purple on the form boxes, sage green on the four fact tiles.
   ============================================================ */
.booking {
  --booking-line: #E3E1DE;   /* neutral gray: panels, step lines, deposit box */
  padding: 56px 0 88px;
}
.page-contact .subhero { padding-bottom: 40px; }

.booking__layout {
  max-width: 1120px;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 981px) {
  .booking__layout {
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;   /* both panels end at the same height */
    gap: 40px;
  }
  .booking__info-col { display: flex; }
  .booking__info-col .next-steps { flex: 1; }
}

/* The two panels */
.booking__form-col,
.next-steps {
  background: var(--warm-white);
  border-color: var(--booking-line);
}
.booking__form-col { padding-top: 36px; }
.next-steps { padding: 32px 28px; }

/* Form boxes: warm white with a button-purple outline */
.booking__form-col .field input,
.booking__form-col .field select,
.booking__form-col .field textarea {
  background-color: var(--warm-white);
  border-color: var(--berry);
}
.booking__form-col .toggle {
  background: var(--warm-white);
  border-color: var(--berry);
}

/* Quick facts: a 2x2 grid of small tiles with green icons */
.booking-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.booking-facts li {
  background: var(--warm-white);
  border: 1px solid var(--sage-mist);
  border-radius: var(--radius);
  padding: 14px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.booking-facts__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sage-mist);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.booking-facts__icon svg { width: 18px; height: 18px; }
.booking-facts small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}
.booking-facts strong,
.booking-facts a { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.booking-facts a { color: var(--berry); font-weight: 700; }

/* What happens next: even 44px between steps, gray line centered in it */
.booking .next-steps__item {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom-color: var(--booking-line);
}
.booking .next-steps__item:last-child { padding-bottom: 0; margin-bottom: 0; }

/* Deposit note: its own small box instead of a dashed line */
.booking .next-steps__note {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid var(--booking-line);
  border-radius: var(--radius);
}

/* Thank-you screen (filled in by main.js after the form sends) */
.booking .form-success {
  background: var(--warm-white);
  border: 0;
  padding: 24px 8px 8px;
}
.booking .form-success h3 { font-size: 1.9rem; margin: 6px 0 10px; }
.booking .form-success p {
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 440px;
  margin: 0 auto;
}
.booking .form-success p.form-success__fix {
  margin-top: 14px;
  font-size: 0.92rem;
}
.form-success__fix a { white-space: nowrap; }
/* "submit a new form": a button that looks like the links around it */
.form-success__again {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.form-success__again:hover { color: var(--berry-deep); }
.form-success__next {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--booking-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.booking .form-success p.form-success__label {
  width: 100%;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-success__next .btn--outline { padding: 10px 18px; font-size: 0.9rem; }
/* On laptops, center the thank-you message in the tall form panel */
@media (min-width: 981px) {
  .booking__form-col:has(.form-success:not([hidden])) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .booking-facts { margin-bottom: 28px; }
  .booking .next-steps__item { padding-bottom: 18px; margin-bottom: 18px; }
  .booking .next-steps__item:last-child { padding-bottom: 0; margin-bottom: 0; }
}
/* Phones: the four tiles become slim rows (icon left, text right) */
@media (max-width: 600px) {
  .booking-facts { grid-template-columns: 1fr; gap: 8px; }
  .booking-facts li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 10px 12px;
  }
  .booking-facts__icon { grid-row: span 2; margin-bottom: 0; }
}

/* ============================================================
   Book page on phones: a compact banner so the form, and its
   first field, show without scrolling on a 390x844 screen.
   (Kept at the end of the file so it wins over the rules above.)
   ============================================================ */
@media (max-width: 720px) {
  .page-contact .subhero { padding: 92px 20px 22px; }
  .page-contact .subhero__eyebrow { margin-bottom: 0.4rem; }
  .page-contact .subhero__title { font-size: 1.75rem; margin-bottom: 0; }
  .page-contact .subhero__subtitle { display: none; }
  .page-contact .booking { padding-top: 20px; }
  .page-contact .booking__form-col { padding-top: 24px; }
  .page-contact .booking__form-title { margin-top: 0; }
}

/* ============================================================
   Home page section backgrounds (index.html only)
   ============================================================ */
/* Pricing preview: the deep-berry panel keeps its light text; the price
   card inside it is warm white (the Book Now page's white) instead of cream */
.price-card { background: var(--warm-white); }
/* How It Works: heading block aligned left */
.how .section-head { text-align: left; margin-left: 0; }

/* ============================================================
   Gallery photos as real <img> tags (Gallery page and Home
   gallery preview). Each photo fills its tile exactly the way the
   old background-image did, so the layout is unchanged. Tiles open
   in a full-screen viewer (js/main.js, section 11).
   ============================================================ */
.g-tile img,
.gallery-grid__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.g-tile,
.gallery-grid__tile { cursor: zoom-in; }
.g-tile:focus-visible,
.gallery-grid__tile:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }

/* Full-screen photo viewer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  background: rgba(20,12,15,0.92);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.lightbox__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(247,241,227,0.14);
  color: var(--cream);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(247,241,227,0.28); outline: none; }
body.lightbox-open { overflow: hidden; }

/* ============================================================
   Privacy Policy page (privacy.html): a single readable column
   ============================================================ */
.legal {
  padding: 64px 0 96px;
  background: var(--cream);
}
.legal__inner { max-width: 720px; }
.legal__lead {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 2rem;
}
.legal h2 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  color: var(--berry-deep);
  margin: 2.4rem 0 0.8rem;
}
.legal p,
.legal li { color: var(--ink-soft); line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1em; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); }
@media (max-width: 720px) {
  .legal { padding: 44px 0 72px; }
  .legal h2 { font-size: 1.3rem; }
}

/* Small privacy link in the footer's bottom line */
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--cream); }

/* One-line privacy note under the booking form's send button */
.booking__privacy { margin-top: 0.4rem; }
.booking__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   Two price cards: Weddings and Corporate & Parties
   (Home pricing preview and Pricing page). Each card opens with a
   green header bar naming who it's for.
   ============================================================ */
.price-card { position: relative; }
/* Green header bar across the top of each card: the label and a short
   line saying who the card is for. The negative margins pull the bar out
   to the card's edges (they match the card padding). */
.price-card { overflow: hidden; }
.price-card__label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -28px -34px 0;
  padding: 16px 34px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
}
.price-card__label small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.9;
}
.price-card--wedding { margin-top: 8px; }
.price-card--corp { margin-top: 28px; }
/* Corporate card: three columns like the printed sheet:
   Drop-off | Add staff | Every bar includes */
.price-card--corp { grid-template-columns: 2fr 1.6fr; }
.price-card__rate--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-content: start;
}
.price-card__rate--split > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.price-card__sub { margin: 0 0 0.5rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }
.price-card--corp .price-card__unit { font-size: 0.95rem; line-height: 1.45; }
.price-card--corp .price-card__amount { font-size: clamp(2.4rem, 5vw, 3rem); }
.price-card--corp .price-card__bulk { font-size: 0.92rem; }
@media (max-width: 760px) {
  .price-card__label { margin: -24px -20px 0; padding: 14px 20px; font-size: 1.45rem; display: block; }
  .price-card__label small { display: block; margin-top: 2px; }
  .price-card--wedding { margin-top: 4px; }
  .price-card--corp { margin-top: 24px; }
}

/* Estimator: Wedding / Corporate & Party toggle (same look as Text / Email) */
.estimate__type { margin: 0; }
.estimate__type-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.toggle--wide { max-width: 360px; background: var(--warm-white); border-color: var(--berry); }
.toggle--wide button { font-size: 0.9rem; padding: 10px 8px; }

/* Slightly more compact price cards so the two-card section stays short */
.price-card { padding: 28px 34px; gap: 32px; }
.price-card__amount { font-size: clamp(2.6rem, 6vw, 3.4rem); }
.price-card__unit { margin: 0.3rem 0 0.5rem; }
.price-card__heading { margin-bottom: 0.6rem; }
.price-card__list li { padding: 5px 0 5px 28px; }
.price-card__list li::before { top: 9px; }
.price-card__list li::after { top: 14px; }
@media (max-width: 760px) {
  .price-card, .price-card--corp { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
  .price-card__rate--split { gap: 16px; }
  .price-card__rate--split > div + div { padding-left: 16px; }
  .price-card--corp .price-card__amount { font-size: 2.2rem; }
}

/* Pricing page: price cards in the main green with white text and a warm-white
   header bar (the Home page cards stay warm white on the purple panel). */
.price:not(.price--home) .price-card {
  background: var(--green);
  border-color: var(--green);
}
.price:not(.price--home) .price-card__amount,
.price:not(.price--home) .price-card__heading,
.price:not(.price--home) .price-card__list li,
.price:not(.price--home) .price-card__bulk { color: #fff; }
.price:not(.price--home) .price-card__eyebrow { color: rgba(255,255,255,0.75); }
.price:not(.price--home) .price-card__unit,
.price:not(.price--home) .price-card__sub { color: rgba(255,255,255,0.8); }
.price:not(.price--home) .price-card__rate,
.price:not(.price--home) .price-card__rate--split > div + div { border-color: rgba(255,255,255,0.22); }
.price:not(.price--home) .price-card__label { background: var(--warm-white); color: var(--green); }
.price:not(.price--home) .price-card__label small { color: var(--ink-soft); opacity: 1; }