/* ==========================================================================
   Twisted Whisk — Fall 2026 design mock (loads AFTER styles.css)
   Direction: cozy-autumn moves (cream canvas, rust/brown/ochre, tracked caps, square ghost buttons, falling leaves) adapted to a
   refined bakery. Photos are never touched: no filters, crops or overlays
   are added to any <img>/<video>. Fall visuals live only on bands and
   decorative areas.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-var.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-700.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Canvas: a warm cream that nods to #F7F6E0 but leans warmer so it sits with the photos and the logo teal. */
  --paper:       #F7F3E4;
  --paper-tint:  #EFE7D1;
  --card:        #F2EBD8;
  --line:        #E2D6BC;
  --line-soft:   #EAE0CA;

  /* Fall accents (from the reference, used sparingly) */
  --rust:        #9A2B07;   /* labels, numerals, hovers — 8:1 on cream */
  --brown:       #8C5C2F;   /* secondary display accents — 5:1 on cream */
  --ochre:       #C87A19;   /* decoration only: ornament, leaves, rules (never small text) */
  --ochre-light: #E3AE5E;   /* ochre on dark grounds */

  /* Logo teal stays the one action colour */
  --teal:        #215660;
  --teal-deep:   #17434A;
  --teal-abyss:  #0F2F34;

  /* Remap the earlier fall tokens onto the new palette */
  --spice:       var(--rust);
  --spice-soft:  var(--brown);

  --sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --label: "Montserrat", "Lato", -apple-system, "Segoe UI", sans-serif;
}
body { background: var(--paper); }

/* ---------- Tracked uppercase labels (Montserrat) ---------- */
.eyebrow,
.band__eyebrow,
.fall__more-label,
.footer__heading,
.menucard__kicker,
.award__cat {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.26em;
}
.eyebrow { font-size: 0.72rem; color: var(--rust); gap: 0; }
.eyebrow__dot { display: none; }               /* no dots / tag look */
.eyebrow--onDark { color: var(--ochre-light); }
.award__cat { font-size: 0.72rem; text-transform: uppercase; }
.award__cat em { font-style: normal; }

/* ---------- Nav: Montserrat caps + grow-in underline ---------- */
.primary-nav__list a {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-position: 50% 100%;               /* grows out from the centre */
  background-size: 0% 1px;
}
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible,
.primary-nav__list a.is-current { color: var(--rust); background-size: 100% 1px; }

/* ---------- Buttons: square ghost, slide-fill on hover ---------- */
.btn {
  border-radius: 2px;
  background: transparent;
  color: var(--teal);
  border: 1.5px solid currentColor;
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  min-height: 48px;
}
.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.7rem; min-height: 44px; }
.btn--lg { padding: 1.15rem 2rem; font-size: 0.8rem; }
.btn::before {
  background: var(--teal);
  border-radius: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}
.btn:hover, .btn:focus-visible { transform: none; box-shadow: none; color: var(--cream); border-color: var(--teal); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

/* Ghost on dark grounds: cream line, cream fill */
.btn--on-dark,
.hero--video .btn {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 244, 234, 0.85);
}
.btn--on-dark::before,
.hero--video .btn::before { background: var(--cream); }
.btn--on-dark:hover, .btn--on-dark:focus-visible,
.hero--video .btn:hover, .hero--video .btn:focus-visible { color: var(--ink); border-color: var(--cream); box-shadow: none; }

/* The one solid button: the form submit (a submit should look like one) */
.contact-form .btn { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.contact-form .btn::before { background: var(--teal-deep); }

/* Text links: thin rust underline that draws in */
.link-underline { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; background-size: 0% 1px; background-image: linear-gradient(var(--rust), var(--rust)); }
.link-underline:hover { background-size: 100% 1px; }

/* ---------- Hero: headline is exactly 0398f62 (Fraunces + italic accent); only the kicker,
   same-day line and buttons change. Video/photos untouched. ---------- */
.hero--video .eyebrow { font-size: 0.8rem; letter-spacing: 0.42em; color: rgba(251, 244, 234, 0.92); }
/* Same-day line: plain text, not a pill */
.hero__samedaynotice { background: none; border: 0; border-radius: 0; padding: 0; font-family: var(--sans); font-size: 0.95rem; font-weight: 400; color: rgba(251, 244, 234, 0.9); }
.hero__samedaynotice .icon { display: none; }
.hero__samedaynotice a { font-weight: 700; }
.hero__trust { font-family: var(--sans); }

/* ---------- Fall foot: decorative band anchored under the hero ---------- */
.fallfoot {
  position: relative;
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.fallfoot__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); }
/* three stacked hairlines, echoing the rules beside the whisk in the logo */
.fallfoot__rules {
  height: 13px;
  background:
    linear-gradient(var(--teal), var(--teal)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) 0 12px / 100% 1px no-repeat;
  opacity: 0.35;
}
.fallfoot__rules:first-child { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.fallfoot__rules:last-child  { -webkit-mask-image: linear-gradient(270deg, transparent, #000 40%); mask-image: linear-gradient(270deg, transparent, #000 40%); }
.fallfoot__ornament { width: clamp(220px, 30vw, 380px); height: auto; }
.o-stem, .o-awn, .o-rib { fill: none; stroke: var(--brown); stroke-width: 1.2; stroke-linecap: round; }
.o-awn { stroke-width: 0.8; opacity: 0.7; }
.o-grain { fill: none; stroke: var(--ochre); stroke-width: 1.2; }
.o-leaf, .o-maple { fill: none; stroke: var(--rust); stroke-width: 1.2; stroke-linejoin: round; }
.fallfoot__line {
  margin: clamp(0.9rem, 2vw, 1.2rem) auto 0;
  padding-inline: var(--gutter);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--ink);
  line-height: 1.5;
}
.fallfoot__line a { margin-left: 0.6rem; font-style: normal; vertical-align: 0.1em; }

/* ---------- Marquee strip: leaf separators instead of sparkles ---------- */
.marquee__item { font-family: var(--serif); }
.marquee__sep { color: var(--ochre-light); opacity: 0.8; width: 0.75em; height: 0.75em; }

/* ---------- Fall flavors: deeper cream, falling leaves behind the type ---------- */
.fall { background: var(--paper-tint); isolation: isolate; }
.fall > .container { position: relative; z-index: 1; }
.fall__title .script { color: var(--brown); }
.fall__item:first-child { border-top-color: var(--brown); }
.fall__num { color: var(--rust); }
.fall__more-label { font-size: 0.68rem; }
.fall__cta { gap: 1.4rem 2rem; }


/* ---------- Reviews: plain lines instead of badge pills ---------- */
.badges { gap: 0; }
.badge, .badge--foil {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0.2rem 1.6rem; text-align: center;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft);
}
.badge + .badge { border-left: 1px solid var(--line); }
.badge .icon { display: none; }
.badge br { display: none; }
.badge b { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rust); margin-right: 0.6rem; }

/* ---------- Owners' quote tile + closing band ---------- */
.bento--quote { background: var(--teal-deep); }
.band {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -1 160 26'%3E%3Cpath d='M0 12 C20 4 60 4 80 12 S140 20 160 12' fill='none' stroke='%23C87A19' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M28.0 7.5C28.4 2.0 32.3 -0.3 36.4 0.4C36.4 4.6 33.5 8.1 28.0 7.5Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M56.0 7.0C57.3 1.6 61.5 0.1 65.5 1.5C64.7 5.6 61.3 8.5 56.0 7.0Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M104.0 16.5C109.5 15.9 112.4 19.4 112.4 23.6C108.3 24.3 104.4 22.0 104.0 16.5Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M132.0 17.0C126.7 18.5 123.3 15.6 122.5 11.5C126.5 10.1 130.7 11.6 132.0 17.0Z' fill='%23C87A19' fill-opacity='.6'/%3E%3C/svg%3E") repeat-x center top 30px / 240px 39px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -1 160 26'%3E%3Cpath d='M0 12 C20 4 60 4 80 12 S140 20 160 12' fill='none' stroke='%23C87A19' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M28.0 7.5C28.4 2.0 32.3 -0.3 36.4 0.4C36.4 4.6 33.5 8.1 28.0 7.5Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M56.0 7.0C57.3 1.6 61.5 0.1 65.5 1.5C64.7 5.6 61.3 8.5 56.0 7.0Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M104.0 16.5C109.5 15.9 112.4 19.4 112.4 23.6C108.3 24.3 104.4 22.0 104.0 16.5Z' fill='%23C87A19' fill-opacity='.6'/%3E%3Cpath d='M132.0 17.0C126.7 18.5 123.3 15.6 122.5 11.5C126.5 10.1 130.7 11.6 132.0 17.0Z' fill='%23C87A19' fill-opacity='.6'/%3E%3C/svg%3E") repeat-x center bottom 30px / 240px 39px,
    var(--chestnut-deep);
}
.band__title .script { color: var(--ochre-light); }

/* ---------- Mobile: glass menu ---------- */
@media (max-width: 780px) {
  .nav-toggle {
    width: 48px; height: 48px; border-radius: 2px;
    background: rgba(247, 243, 228, 0.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(44, 35, 29, 0.18);
  }
  .primary-nav {
    inset: calc(var(--header-h) - 4px) 10px 10px 10px;
    max-height: none;
    justify-content: flex-start;
    border-radius: 4px;
    background: rgba(247, 243, 228, 0.9);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
    backdrop-filter: saturate(160%) blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 60px -24px rgba(46, 24, 16, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 0.4rem 1.4rem 1.4rem;
  }
  .primary-nav__list li { border-bottom-color: rgba(140, 92, 47, 0.18); }
  .primary-nav__list a {
    font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
    letter-spacing: -0.01em; text-transform: none;
    padding: 0.8rem 0.1rem; min-height: 48px; color: var(--ink);
  }
  .primary-nav__list a:hover { color: var(--rust); }
  .primary-nav__actions { gap: 0.6rem; }
  .primary-nav__actions .social-link { width: 46px; height: 46px; }
  .primary-nav__actions .btn { min-height: 48px; }
  .fallfoot__line a { display: flex; width: fit-content; margin: 0.3rem auto 0; min-height: 44px; align-items: center; }
}
@media (max-width: 560px) {
  .fallfoot__ornament { width: 230px; }
  .fallfoot__line { font-size: 1.05rem; }
  .badges { flex-direction: column; align-items: center; gap: 0.6rem; }
  .badge + .badge { border-left: 0; }
  .hero--video .eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; }
  .link-underline { min-height: 44px; }
}

/* ---------- Flavors page (inner) ---------- */
.menucard__mark { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; margin: 0.8rem auto 0.6rem; }
.menucard__mark .fallfoot__ornament { width: clamp(200px, 26vw, 300px); }
.menucard__rule { background: linear-gradient(90deg, transparent, var(--ochre), transparent); opacity: 0.55; height: 1px; }
.menucard__sub { color: var(--brown); }
.menu-tab { border-radius: 2px !important; font-family: var(--label); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; min-height: 44px; }

/* ---------- Small-phone refinements ---------- */
@media (max-width: 560px) {
  .btn { letter-spacing: 0.14em; }
  .award__content .btn, .hero__cta .btn { width: 100%; }
  .award__content .btn { letter-spacing: 0.1em; font-size: 0.7rem; text-align: center; line-height: 1.6; padding-inline: 1rem; }
  .award__content .btn .icon { display: none; }
  .badge b { display: block; margin: 0 0 0.2rem; }
}

/* ---------- Tap targets ≥ 44px on phones ---------- */
@media (max-width: 560px) {
  .social-link { width: 44px; height: 44px; }
  .verse-trigger { min-width: 44px; min-height: 44px; }
  .brand { min-height: 44px; }
  .footer__nav a, .footer__contact a, .contact__details a, .hero__samedaynotice a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__nav li, .footer__contact p { margin-block: 0; }
}

/* ==========================================================================
   v2 "POP" PASS — warm bands, bigger falling leaves, layered garlands.
   Photos/video untouched; leaves and garlands only live in photo-free sections.
   ========================================================================== */
:root {
  --rust-band:    #7A2E12;   /* fall band under the hero — cream text 8.5:1 */
  --pumpkin:      #8A3A14;   /* Fall flavors band — cream text 7.0:1 */
  --chestnut-band:#5E2A14;   /* Reviews band — cream text 10.4:1 */
  --on-dark:      #F7F3E4;   /* cream text on warm bands */
  --on-dark-soft: #EFE2C8;   /* secondary text on warm bands (≥6:1 on all three) */
  --on-dark-accent:#F0CF94;  /* labels/numerals on warm bands (≥5.2:1) */
  --maple-red:    #D9572A;   /* decoration only */
}

/* ---------- Falling leaves (CSS only) ---------- */
.leaves { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.leaves__fall {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px;
  animation: leaf-drop var(--d) linear var(--delay) infinite;
}
.leaves__fall svg {
  position: absolute; top: -60px; left: 0; max-width: none;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2);
  color: var(--c); opacity: var(--o);
  filter: drop-shadow(0 2px 2px rgba(30, 10, 2, 0.18));
  animation: leaf-sway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate;
}
@keyframes leaf-drop { from { transform: translateY(-4%); } to { transform: translateY(106%); } }
@keyframes leaf-sway {
  0%   { transform: translateX(-20px) rotate(-40deg); }
  50%  { transform: translateX(6px)   rotate(60deg); }
  100% { transform: translateX(22px)  rotate(170deg); }
}
.fallfoot > .container, .fallfoot > p, .fall > .container, .reviews > .container { position: relative; z-index: 1; }
.band__inner { z-index: 2; }

/* ---------- Layered garlands anchored to the bottom of a band ---------- */
.garland { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 0; pointer-events: none; }
.garland__l, .garland__r { position: absolute; bottom: -6px; width: clamp(180px, 36vw, 560px); height: auto; overflow: visible; }
.garland__l { left: 0; }
.garland__r { right: 0; transform: scaleX(-1); }

/* ---------- Fall band under the hero: deep rust ---------- */
.fallfoot {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(200, 122, 25, 0.22), transparent 60%),
    var(--rust-band);
  color: var(--on-dark);
  border-bottom: 0;
  padding: clamp(2.8rem, 5vw, 4rem) 0 clamp(6.5rem, 15vw, 12.5rem);
}
.fallfoot__rules {
  background:
    linear-gradient(var(--on-dark-accent), var(--on-dark-accent)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--on-dark-accent), var(--on-dark-accent)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--on-dark-accent), var(--on-dark-accent)) 0 12px / 100% 1px no-repeat;
  opacity: 0.55;
}
.fallfoot .o-stem, .fallfoot .o-awn, .fallfoot .o-rib { stroke: var(--on-dark-soft); }
.fallfoot .o-grain { stroke: var(--ochre-light); fill: rgba(227, 174, 94, 0.35); }
.fallfoot .o-leaf, .fallfoot .o-maple { stroke: var(--on-dark-accent); fill: rgba(217, 87, 42, 0.55); }
.fallfoot__ornament { width: clamp(240px, 32vw, 420px); }
.fallfoot__line {
  color: var(--on-dark);
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.9rem);
  line-height: 1.35;
  max-width: 30ch;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  text-wrap: balance;
}
.fallfoot__line a { display: flex; width: fit-content; margin: 1.1rem auto 0; min-height: 44px; align-items: center; }

/* Links on warm bands: cream with ochre underline (teal can't reach AA on rust) */
.link-underline--onDark,
.fall .link-underline,
.reviews .link-underline { color: var(--on-dark); background-image: linear-gradient(var(--ochre-light), var(--ochre-light)); background-size: 100% 1px; }
.link-underline--onDark .icon, .fall .link-underline .icon, .reviews .link-underline .icon { color: var(--ochre-light); }
.link-underline--onDark:hover, .fall .link-underline:hover, .reviews .link-underline:hover { color: #fff; }

/* Every button stays logo teal; on dark grounds it is solid teal with a cream hairline and a cream slide-fill */
.btn--on-dark, .hero--video .btn, .fall .btn {
  background: var(--teal); color: var(--on-dark);
  border-color: rgba(247, 243, 228, 0.55);
}
.btn--on-dark::before, .hero--video .btn::before, .fall .btn::before { background: var(--on-dark); }
.btn--on-dark:hover, .btn--on-dark:focus-visible, .hero--video .btn:hover, .hero--video .btn:focus-visible, .fall .btn:hover, .fall .btn:focus-visible { color: var(--ink); border-color: var(--on-dark); }

/* ---------- Marquee: light strip so it doesn't stack two dark bands ---------- */
.marquee { background: var(--paper-tint); border-block: 1px solid var(--line); }
.marquee__item { color: var(--rust); }
.marquee__sep { color: var(--ochre); opacity: 1; }

/* ---------- Fall flavors: deep pumpkin band ---------- */
.fall { background:
    radial-gradient(60% 80% at 0% 0%, rgba(227, 174, 94, 0.16), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(46, 24, 16, 0.35), transparent 60%),
    var(--pumpkin);
  border-bottom: 0; overflow: clip; }
.fall .eyebrow, .fall__more-label { color: var(--on-dark-accent); }
.fall__title { color: var(--on-dark); }
.fall__title .script { color: var(--on-dark-accent); }
.fall__lede { color: var(--on-dark-soft); }
.fall__list { border-bottom-color: rgba(247, 243, 228, 0.22); }
.fall__item { border-top-color: rgba(247, 243, 228, 0.22); }
.fall__item:first-child { border-top: 2px solid var(--on-dark-accent); }
.fall__num { color: var(--on-dark-accent); }
.fall__item h3 { color: var(--on-dark); }
.fall__item p { color: var(--on-dark-soft); }
.fall__more { color: var(--on-dark); }

/* ---------- Reviews: chestnut band ---------- */
.reviews { background: var(--chestnut-band); color: var(--on-dark); overflow: clip; isolation: isolate; }
.reviews .eyebrow { color: var(--on-dark-accent); }
.reviews__statement > p:first-of-type { color: var(--on-dark); }
.reviews__statement .quote-mark { color: var(--ochre-light); }
.reviews .badge, .reviews .badge--foil { color: var(--on-dark-soft); }
.reviews .badge b { color: var(--on-dark-accent); }
.reviews .badge + .badge { border-left-color: rgba(247, 243, 228, 0.25); }

/* ---------- Closing band: top vine kept, layered garland at the bottom ---------- */
.band {
  isolation: isolate;
  padding-bottom: clamp(7rem, 15vw, 12rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -1 160 26'%3E%3Cpath d='M0 12 C20 4 60 4 80 12 S140 20 160 12' fill='none' stroke='%23E3AE5E' stroke-opacity='.6' stroke-width='1'/%3E%3Cpath d='M28 7.5C28.4 2 32.3-.3 36.4.4 36.4 4.6 33.5 8.1 28 7.5Z' fill='%23E3AE5E' fill-opacity='.7'/%3E%3Cpath d='M56 7C57.3 1.6 61.5.1 65.5 1.5 64.7 5.6 61.3 8.5 56 7Z' fill='%23D9572A' fill-opacity='.8'/%3E%3Cpath d='M104 16.5C109.5 15.9 112.4 19.4 112.4 23.6 108.3 24.3 104.4 22 104 16.5Z' fill='%23C87A19' fill-opacity='.8'/%3E%3Cpath d='M132 17C126.7 18.5 123.3 15.6 122.5 11.5 126.5 10.1 130.7 11.6 132 17Z' fill='%23E3AE5E' fill-opacity='.7'/%3E%3C/svg%3E") repeat-x center top 30px / 240px 39px,
    var(--chestnut-deep);
}
.band::after { z-index: 0; }

/* ---------- Phones: 5 leaves per section in the edge lanes, smaller garlands ---------- */
@media (max-width: 560px) {
  .leaves__fall--wide { display: none; }
  .leaves__fall { left: var(--xm, var(--x)); }
  /* phone lanes sit in the outer ~30px gutter so nothing drifts over text */
  .leaves__fall svg { width: calc(var(--s) * 0.75); height: calc(var(--s) * 0.75); margin-left: 0; }
  @keyframes leaf-sway {
    0%   { transform: translateX(-5px) rotate(-40deg); }
    50%  { transform: translateX(1px)  rotate(60deg); }
    100% { transform: translateX(5px)  rotate(170deg); }
  }
  .fallfoot { padding-bottom: 6rem; }
  .fallfoot__ornament { width: 230px; }
  .fallfoot__line { font-size: 1.2rem; padding-inline: 2.4rem; }
  .band { padding-bottom: 6.5rem; }
  .band__inner { padding-inline: 1.2rem; }
  .reviews .container, .fall .container { padding-inline: 2.2rem; }
}

/* ---------- Reduced motion: no falling leaves at all (garlands are static) ---------- */
@media (prefers-reduced-motion: reduce) {
  .leaves { display: none !important; }
}