/* =========================================================
   My Wild Child — Site Styles
   ========================================================= */

/* -- Fonts --------------------------------------------------
   Licensed fonts, split by role:
   --font-display (serif slots: headings, nav, buttons, quote)
     = Base 12 Serif OT Bold
   --font-body (sans-serif slots: paragraphs, labels, attribution)
     = Apercu Bold
   Only one weight was provided for each, so both are registered
   across the 400–700 range — any element asking for any weight in
   that band resolves to the same cut, regardless of its own
   declared font-weight.

   Old free stand-in (Bevan/Karla) is commented out below, not
   deleted — reverting either role is a one-line variable swap.
------------------------------------------------------------- */
/* @import url('https://fonts.googleapis.com/css2?family=Bevan&family=Karla:wght@400;500;600;700&display=swap'); */

@font-face {
  font-family: 'Base 12 Serif OT';
  src: url('../assets/fonts/base12serifot-bold-webfont.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apercu';
  src: url('../assets/fonts/apercu-bold.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette (from Figma style guide) */
  --color-cream: #FFDFA5;
  --color-pink-light: #FA8EE8;
  --color-orange: #FF7E1C;
  --color-gold: #F5B805;
  --color-teal-light: #9BDDD8;
  --color-sage: #7E9A8A;
  --color-magenta: #FC48CB;
  --color-rust: #B45E12;
  --color-olive-gold: #AA8619;
  --color-blue: #15A9D7;
  --color-dark-olive: #534E2C;

  --color-cream-text: #FFDFA5; /* copy sitting on olive backgrounds, per Figma */
  --color-ink: #3C3820;

  /* Fonts */
  --font-display: 'Base 12 Serif OT', 'Georgia', serif;
  --font-body: 'Apercu', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  /* --font-display: 'Bevan', 'Georgia', serif; */
  /* --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */

  /* Layout */
  --max-width: 1280px; /* unified max-width for all type containers */
  --subtitle-max-width: 780px; /* narrower cap for the hero subtitle so it breaks evenly across two lines */
  --side-pad: clamp(2rem, 6vw, 5rem); /* responsive gutter: keeps type off the browser edge at every width */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Bevan only ships one weight; treat as bold-equivalent */
  margin: 0;
}

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

/* -- Buttons -------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: var(--color-cream);
  color: var(--color-dark-olive);
  padding: 0.9em 1.75em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: #FF9FEF; /* bubblegum pink */
  transform: translateY(-2px);
}

/* "Copied!" confirmation injected by js/script.js next to mailto buttons.
   Absolutely positioned (below the button row) so it never reflows the layout. */
.site-footer__cta {
  position: relative;
}

.copy-note {
  position: absolute;
  top: -100px; /* sticker pops over the button's top-right corner */
  right: -24px;
  width: 130px;
  opacity: 0;
  transform: scale(0.6) rotate(-10deg);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.copy-note img {
  width: 100%;
  height: auto;
  display: block;
}

.copy-note--visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* -- Site Header ------------------------------------------------ */
.site-header {
  background: var(--color-dark-olive);
  padding: var(--space-sm) 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-header__logo img {
  height: 26px;
  width: auto;
}

.site-nav ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 18px; /* was 0.8rem (12.8px), bumped ~5px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-text);
}

.site-nav a:hover {
  color: var(--color-gold);
}

/* -- Hero --------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-dark-olive);
  overflow: hidden;
  padding-top: 8rem;
}

.hero__decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.hero__decor--gold {
  top: 210px; /* nudged down 200px from the previous 10px */
  left: -60px;
  width: 420px;
}

.hero__decor--rust {
  top: 0;
  right: -70px;
  width: 520px; /* rust reads larger than gold, per Figma */
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--side-pad);
}

.hero__title {
  color: var(--color-pink-light);
  font-size: clamp(4rem, calc(6vw + 20px), 5.75rem); /* previous clamp +20px across the range */
  line-height: 1;
}

.hero__subtitle {
  color: var(--color-cream-text);
  font-size: 20px;
  margin: var(--space-sm) auto 0;
  max-width: var(--subtitle-max-width);
}

.hero__image {
  margin-top: var(--space-lg);
}

.hero__image img {
  width: 100%;
  height: auto;
}

/* -- Wave dividers -------------------------------------------
   Reusable wavy transition between two section colors.
   Usage: <div class="wave-divider" style="--wave-from:#534E2C; --wave-to:#FFDFA5;">
--------------------------------------------------------------- */
.wave-divider {
  display: block;
  width: 100%;
  height: 90px;
  background: var(--wave-from, transparent);
  margin-bottom: -1px; /* avoid hairline gap between wave and next section */
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* -- Garden / Values section --------------------------------------
   ONE continuous background (paper texture + semi-transparent cream
   tint) spans the whole section. The olive band is a shape with a
   wavy, transparent bottom edge layered ON TOP of that background —
   not a separately-colored block — so wherever it doesn't cover,
   you're looking at the exact same unbroken texture underneath.
   No seams to line up.
----------------------------------------------------------------------- */
.garden {
  position: relative;
  overflow: hidden;
  padding-bottom: 3rem; /* halved from --space-xl (6rem) to tighten the gap before the testimonial curve */
}

.garden__texture {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/bg-paper-flat.jpg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.garden__tint {
  position: absolute;
  inset: 0;
  background-color: #FCD58D;
  opacity: 0.7;
  z-index: 1;
}

.garden__olive {
  position: relative;
  z-index: 2;
  width: 100%;
}

.garden__wave {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1728 / 503; /* native SVG proportions — never distorts */
  /* The SVG's top ~13.8vw is solid flat olive before the curve begins.
     Pull it up under the heading block to crop most of that dead zone —
     tightens the gap between heading and curve without touching the curve. */
  margin-top: calc(-12vw - 1px); /* crops all but ~1.8vw of the SVG's 13.8vw flat top */
}

.garden__heading-wrap {
  position: relative;
  z-index: 1; /* paints over the pulled-up flat top of the wave SVG */
  background: var(--color-dark-olive);
  padding: var(--space-lg) var(--side-pad) var(--space-sm);
  text-align: center;
}

.garden__heading-wrap h2 {
  color: var(--color-cream-text);
  font-size: 48px;
  line-height: 1.3;
  max-width: var(--max-width);
  margin: 0 auto;
}

.rainbow-word {
  white-space: nowrap; /* keep "values." from breaking mid-word between letter spans */
}

.rainbow-word span {
  display: inline-block;
}

.values__content {
  position: relative;
  z-index: 2;
  padding-top: var(--space-md);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* Wider than --max-width so the larger flower PNGs (some are square,
   up to 300px wide at the new size) have room in a 4-column row
   without being squeezed by max-width:100% on the images. */
.values__grid--png {
  max-width: 1400px;
}

.value-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2.75rem;
}

.value-item:nth-child(5) {
  grid-column: 2 / 3;
}
.value-item:nth-child(6) {
  grid-column: 3 / 4;
}
.value-item:nth-child(7) {
  grid-column: 4 / 5;
}

.value-item__flower {
  height: 230px;
  width: auto;
  max-width: 100%;
}

/* TRIAL: flower + label flattened into one PNG (rotation baked in),
   so this item no longer needs the reserved label space below it. */
.values__grid--png .value-item {
  padding-bottom: 0;
}

/* Height-driven sizing: Melissa's PNGs share a 430px-tall canvas but differ
   in width, so equal HEIGHT = consistent artwork scale across all seven.
   object-fit: contain makes distortion impossible when columns get narrow —
   the image scales down proportionally inside its box instead of squashing. */
.value-item__flower-png {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.value-item__label {
  position: absolute;
  left: 50%;
  bottom: var(--label-bottom, 1.2rem);
  transform: translateX(-50%) rotate(var(--label-rotate, -2deg));
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  white-space: nowrap;
}

.values__description {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: var(--space-lg) auto 0;
  text-align: center;
  padding: 0 var(--side-pad);
  /* font-size inherits the 20px body base */
}

/* -- Testimonial (reusable across pages) ------------------------
   ONE continuous cream+texture backdrop spans the whole section
   (z-index 0/1). The sage layer is a SINGLE element (z-index 2) —
   its wavy top edge is cut with a two-layer CSS mask: (1) Melissa's
   exact wave curve as an inline data-URI SVG (real beziers — a
   clip-path polygon was tried and rejected: straight segments only),
   pinned to a wave zone whose depth scales with viewport width
   (29.11vw = the SVG's native 503/1728 ratio), and (2) a plain
   rectangle covering everything below that zone, however tall the
   quote makes the box. One sage+texture render, no seam, no external
   mask file to fail to load (an external-file mask was also tried —
   at least one browser resolved it to fully-transparent and hid the
   whole section instead of falling back gracefully).

   Usage:
   <section class="testimonial" style="--testimonial-bg:#7E9A8A; --testimonial-attribution:#FFDFA5;">
     <div class="testimonial__cream-texture"></div>
     <div class="testimonial__cream-tint"></div>
     <div class="testimonial__body">
       <div class="testimonial__texture"></div>
       <div class="testimonial__content container">
         <p class="testimonial__quote">&ldquo;...&rdquo;</p>
         <p class="testimonial__attribution">&mdash;Name, role</p>
       </div>
     </div>
   </section>
------------------------------------------------------------------ */
.testimonial {
  position: relative;
  overflow: hidden;
}

.testimonial__cream-texture {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/bg-paper-flat.jpg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.testimonial__cream-tint {
  position: absolute;
  inset: 0;
  /* MUST match the tint of the section above so the two read as one
     continuous background. Overridable per page via --backdrop-tint
     (e.g. the About page's darker kraft-tan intro). */
  background-color: var(--backdrop-tint, #FCD58D);
  opacity: 0.7;
  z-index: 1;
}

.testimonial__body {
  position: relative;
  z-index: 2;
  background-color: var(--testimonial-bg, var(--color-sage));
  /* Layer 1: the curved wave shape (real beziers, Melissa's exact path,
     inlined as a data URI so there's no external file to fail to load).
     Layer 2: a plain black rectangle covering everything below the wave
     zone, with a 2px overlap to prevent a hairline gap. */
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1728 503' preserveAspectRatio='none'%3E%3Cpath d='M-2.5,503 C143,429.5 293.6,352.4 418,322 C651.5,264.939 849.5,352.5 1019.5,411 C1189.5,469.5 1354.5,503 1566.5,411 C1692.35,356.387 1778.17,245 1785,239 L1785,503 L-2.5,503 Z' fill='black'/%3E%3C/svg%3E"),
    linear-gradient(black, black);
  /* 29.11vw = native ratio at any width (capping it distorted the curve).
     The wave layer is shifted up 10vw (mask-position 0 -10vw) to crop the
     mostly-cream dead zone above the curve's crest — tightens the gap
     between the values copy and the sage, same move as the garden wave. */
  -webkit-mask-size: 100% 29.11vw, 100% calc(100% - 17.11vw + 2px);
  -webkit-mask-position: 0 -12vw, bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1728 503' preserveAspectRatio='none'%3E%3Cpath d='M-2.5,503 C143,429.5 293.6,352.4 418,322 C651.5,264.939 849.5,352.5 1019.5,411 C1189.5,469.5 1354.5,503 1566.5,411 C1692.35,356.387 1778.17,245 1785,239 L1785,503 L-2.5,503 Z' fill='black'/%3E%3C/svg%3E"),
    linear-gradient(black, black);
  mask-size: 100% 29.11vw, 100% calc(100% - 17.11vw + 2px);
  mask-position: 0 -12vw, bottom;
  mask-repeat: no-repeat, no-repeat;
}

.testimonial__texture {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/bg-paper-crumpled.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--testimonial-bg, var(--color-sage));
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.testimonial__content {
  position: relative;
  /* top padding scales with viewport width to clear the clipped wave zone */
  /* top padding clears the (shifted-up) wave zone + 100px breathing room below the curve */
  padding: calc(15vw + 100px) var(--side-pad) var(--space-xl);
  max-width: var(--max-width);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--testimonial-text, #444444); /* #444444 on all testimonials site-wide */
  margin: 0;
}

.testimonial__attribution {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testimonial-attribution, var(--testimonial-text, var(--color-ink)));
  margin: 0.6em 0 0;
}

/* -- Page intro (About / Services) ------------------------------
   Kraft-paper section with a display heading and an offset body
   column. Same texture+tint layering pattern as the other sections;
   tint color set per page via --backdrop-tint on the section. */
.page-intro {
  position: relative;
  overflow: hidden;
  padding: var(--space-lg) 0 var(--space-lg);
}

.page-intro__texture {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/bg-paper-flat.jpg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.page-intro__tint {
  position: absolute;
  inset: 0;
  background-color: var(--backdrop-tint, #FCD58D);
  opacity: 0.7;
  z-index: 1;
}

.page-intro__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

.page-intro__heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.2rem); /* lower floor: fewer one-word lines at phone widths */
  line-height: 1.35;
  color: var(--color-orange);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Photo left, body copy right, per the Figma layout */
.page-intro__columns {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: var(--space-lg);
  align-items: start;
  max-width: 1120px;
  margin: var(--space-lg) auto 0;
}

.page-intro__photo {
  width: 100%;
  height: auto;
  /* top-align with the paragraph's first line of text (offsets the
     paragraph's default top margin + line-height half-leading) */
  margin-top: 26px;
}

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

  .page-intro__photo {
    max-width: 460px;
    margin: 0 auto;
  }
}

/* -- Testimonial decorative shapes (About) -----------------------
   Olive silhouettes riding the wave edge: leaf bleeds off the left,
   burst sits on the tan above the crest at right. */
.testimonial__decor {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.testimonial__decor--left {
  /* nudged 10px right so the notch on its right edge shows solid color, not the curve transition */
  left: calc(max(-60px, -5vw) + 10px);
  top: 2vw;
  width: clamp(180px, 22vw, 440px);
}

.testimonial__decor--right {
  right: max(-40px, -3vw);
  /* sits lower so the center cutout lands on solid magenta below the crest */
  top: 5vw;
  width: clamp(150px, 19vw, 375px);
}

.page-intro__heading--ink {
  color: var(--color-ink);
}

.page-intro__heading--magenta {
  color: var(--color-magenta);
}

/* -- Services: hero photo (inset with gutters, per Figma) -------- */
.services-hero-photo {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) 3.65vw 0;
}

.services-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* -- Services: Nursery Cottage ----------------------------------- */
.nursery {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  /* last row is 1fr so the tall spanning body column's extra height is
     absorbed BELOW the schedule, not injected between intro and schedule */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-lg);
}

.nursery__chip {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  /* 469px 1x canvas scaled to our 1280 content width (vs 1728 design) */
  width: min(347px, 100%);
  height: auto;
}

.nursery__intro {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 1.3rem; /* matches the schedule line */
  line-height: 1.5;
  color: var(--color-dark-olive);
  margin: 0;
}

.nursery__schedule {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-dark-olive);
  margin: 0;
}

.nursery__body {
  grid-column: 2;
  grid-row: 2 / span 2; /* starts at the intro's row: paragraphs top-align */
}

.nursery__body p:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .nursery {
    grid-template-columns: 1fr;
  }

  .nursery__chip { grid-column: 1; grid-row: auto; }
  .nursery__intro { grid-column: 1; grid-row: auto; }
  .nursery__schedule { grid-column: 1; grid-row: auto; }
  .nursery__body { grid-column: 1; grid-row: auto; }
}

/* -- Services: offerings band (dark olive, cream text) ----------- */
.offerings-band {
  background: var(--color-dark-olive);
  color: var(--color-cream-text);
  padding: var(--space-xl) 0;
}

.offerings-band__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  color: var(--color-cream-text);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* -- Services: offerings grid ----------------------------------- */
.offerings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  max-width: var(--max-width);
  margin: var(--space-xl) auto 0;
}

.offering {
  text-align: center;
}

.offering__icon {
  /* Width-based scaling: all four lockups share ~equal 1x canvas widths
     (the exports are a mix of 1x and 2x resolution, so a fixed HEIGHT
     rendered them at visibly different scales). Bottom-anchored so the
     baked-in label chips align across the row. */
  width: 100%;
  height: auto;
  aspect-ratio: 469 / 400;
  object-fit: contain;
  object-position: bottom center;
  margin-bottom: var(--space-sm);
}

.offering__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-cream-text);
  padding: 0.35em 1em;
  transform: rotate(-1deg);
  margin: 0;
}

.offering__commitment {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0.9em 0 0;
  opacity: 0.78; /* sit back a bit against the olive */
}

.offering__body {
  text-align: left;
  /* inherits the 20px body base — same as Home & About body copy */
  margin-top: var(--space-sm);
}

.additional-services {
  text-align: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg); /* breathing room before the photo/testimonial below */
}

.additional-services__icon {
  /* 2x export (900px canvas = 450px at 1x); 338px matches the render
     scale of the three offering lockups in their ~352px columns */
  width: min(338px, 100%);
  height: auto;
  aspect-ratio: 469 / 400;
  object-fit: contain;
  object-position: bottom center;
  margin: 0 auto var(--space-sm);
}

.additional-services__list {
  margin: var(--space-md) auto 0;
  max-width: 1000px;
}

@media (max-width: 900px) {
  .offerings {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* -- Services: photo with testimonial wave over it --------------- */
.services-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* No cream texture/tint layers: the section is pulled up so the
   transparent above-the-curve zone of the mask reveals the PHOTO. */
.testimonial--over-photo {
  margin-top: -17.11vw; /* full visible wave zone overlaps the photo's bottom edge */
}

/* -- Footer ------------------------------------------------- */
.site-footer {
  background: var(--color-dark-olive);
  padding: var(--space-lg) 0;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__logo {
  flex: 0 0 auto;
  width: clamp(180px, 32%, 380px); /* ~1/3 of the footer content area */
}

.site-footer__logo img {
  width: 100%;
  height: auto;
}

.site-footer__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__cta p {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cream-text);
  margin: 0;
  font-size: 20px;
}

.site-footer .btn {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
}

/* -- Responsive ------------------------------------------------ */
@media (max-width: 900px) {
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-item:nth-child(5),
  .value-item:nth-child(6),
  .value-item:nth-child(7) {
    grid-column: auto;
  }

  .value-item__flower {
    height: 240px;
  }

  .value-item__flower-png {
    height: 240px;
  }

  .site-footer .container {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  /* XS: staggered two-up collage — smaller flowers, alternating offsets */
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 0.5rem; /* rows touch: the stagger provides the breathing room */
  }

  .value-item__flower {
    height: 280px;
  }

  .value-item__flower-png {
    height: min(46vw, 250px);
  }

  /* slight pull-together so neighbors nestle like the sketch */
  .values__grid--png .value-item {
    margin-bottom: -0.75rem;
  }

  /* every other flower drops down for the organic stagger */
  .values__grid--png .value-item:nth-child(even) {
    margin-top: 1.75rem;
  }

  /* odd one out (7th) sits centered on its own row */
  .values__grid--png .value-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 0;
  }

  /* About: at XS the leaf shrinks instead of rising, so it clears the
     quote text without its tip getting clipped at the section edge */
  .testimonial__decor--left {
    top: 2vw;
    width: 120px;
  }

  /* smaller + pushed further off-canvas so they read as cropped
     accents and "Welcome" gets room to breathe */
  .hero__decor--gold {
    width: 150px;
    top: 6px;
    left: -60px;
  }

  .hero__decor--rust {
    width: 190px;
    top: 40px;
    right: -80px;
  }

  .site-header .container {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-header__logo img {
    height: auto;
    width: min(300px, 82vw); /* let the horizontal logo run wider at XS */
  }

  .site-footer__cta {
    flex-direction: column;
  }
}