/* ============================================================
   Galiffa's Pizza & Fundraising — Global Styles
   ============================================================ */


/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:  #3D683A;
  --green-dark: #2e5028;
  --red:    #BA2D2A;
  --red-dark: #9a2421;
  --dark:   #222222;
  --gray-light: #f5f5f5;
  --white:  #ffffff;
  --text:   #333333;
  --shadow: 0 4px 20px rgba(0,0,0,0.12);

  /* ---- Type (design pass, Phase M) ----
     The marketing site and the app now share one pairing. app.css declares
     the same two tokens for portal pages; keep the values in step by hand. */
  --font-display: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --accent-on-dark: #7cc072;   /* basil — eyebrows and figures over a photo */

  /* ---- Button & control system (design pass, Phase 1) ----
     Shared by the marketing site and the fundraiser app, so one button
     redesign covers hero CTAs, the nav, contact forms and every portal.
     The app's app.css re-points --pri / --sec-* / --on-* for dark mode;
     everything else here is common to both properties. */
  --radius-sm: 7px;          /* buttons, inputs, small controls */
  --radius-md: 12px;         /* cards, panels */
  --radius-full: 9999px;     /* badges and the theme toggle ONLY */

  /* primary — the one main action on a page. Deep brand green: white on
     #3D683A is 6.5:1, which clears WCAG AA; a lighter green would not. */
  --pri: #3D683A;
  --pri-hover: #2e5028;
  --pri-edge: #274523;
  --on-pri: #ffffff;

  /* secondary — a soft green tint of the primary. Deep green primary and
     pale green secondary read as one family at two weights; a neutral
     secondary read as an unrelated brown object next to a green primary.
     The visible green border is what gives it presence — a tint alone
     looks washed out. It stays distinct from the "Active / Paid" status
     badges, which are paler, pill-shaped and never bordered. */
  --sec-bg: #dbebd5;
  --sec-bg-hover: #c9e1c1;
  --sec-bd: #a3c998;
  --sec-ink: #2c5527;

  --on-danger: #ffffff;
  --focus-ring: rgba(61, 104, 58, 0.24);
}

html { scroll-behavior: smooth; }

/* The header is fixed and ~118px tall, so an in-page jump (#start, #downloads,
   #contact, #products) would otherwise put the section heading underneath it. */
:target,
section[id] { scroll-margin-top: 130px; }

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  background-color: var(--white);
  background-image: radial-gradient(rgba(61,104,58,0.07) 0.8px, transparent 0.8px);
  background-size: 20px 20px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.25;
}

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

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

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding { padding: 80px 0; }

/* ---------- Legal / long-form prose ----------
   privacy.html repeated the same five declarations down the whole document. */
.legal-body { max-width: 820px; margin: 0 auto; }
.legal-body h2 { font-size: 1.4rem; color: var(--dark); margin-bottom: 12px; }
.legal-body h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 8px; }
.legal-body p, .legal-body li { color: #555; line-height: 1.8; }
.legal-body p { margin-bottom: 20px; }
.legal-body p.legal-gap { margin-bottom: 32px; }
.legal-body ul { margin-bottom: 20px; padding-left: 24px; }
.legal-body strong { color: var(--green); font-weight: 700; }
.legal-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Section band ----------
   Every page is stacked full-width bands. This is the band: one class that
   owns its own padding and ground, instead of .section-padding plus an
   inline background on each <section>. --alt is the recessed ground that
   alternates down a page; --tight is for a short lead band. */
.section-band { padding: 80px 0; background: var(--white); }
.section-band--alt { background: var(--gray-light); }
.section-band--tight { padding: 56px 0; }
.section-band--flush-bottom { padding-bottom: 0; }
.section-padding--tight { padding-top: 40px; padding-bottom: 40px; }

/* A short page that is one centred message: thanks.html and 404.html. */
/* ---------- Portal hub (/app) ----------
   A static page outside the app that wears the marketing chrome. The fixed
   header is ~118px, so the band needs its own top padding to clear it. */
.portal-band { padding-top: 185px; }
.portal-container { max-width: 900px; }
.portal-head { text-align: center; margin-bottom: 40px; }
.portal-head .section-subtitle { max-width: 560px; margin-left: auto; margin-right: auto; }
.portal-card-lede { margin-bottom: 10px; }
/* What you actually do in that portal. The lede answers "which one am I?";
   a tester picked the right card and still had no idea what was behind it. */
.portal-card-does { font-size: 0.9rem; color: #777; line-height: 1.6; margin-bottom: 22px; }
.portal-actions { flex-direction: column; gap: 10px; }
.portal-actions--push { margin-top: auto; }
.portal-card-note { font-size: 0.85rem; color: #888; margin-top: 14px; line-height: 1.6; }
.portal-help { text-align: center; margin-top: 36px; font-size: 0.95rem; color: #777; }
.portal-help a { color: var(--green); font-weight: 700; }

@media (max-width: 768px) {
  .portal-band { padding-top: 170px; }
}

.page-message {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-light);
  text-align: center;
  padding: 120px 24px 80px;
}

/* .faq-section sets its own white ground and is declared later in the file,
   so it wins over .section-band; that is fine and intended. */

/* The "Individual Product Kits" label above the per-product download row. */
.downloads-subhead {
  text-align: center;
  font-size: 1.2rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin-bottom: 28px;
}

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

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--dark);
}

/* The red rule under a section title. It used to be a --accent modifier
   applied to 12 of 20 titles with no pattern; every band now has the same
   anatomy: eyebrow, title, rule, subtitle. */
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Left-aligned heads (a column beside a photo) keep the rule under the text
   rather than centred in the column. */
.section-head--left { text-align: left; }
.section-head--left .section-label,
.section-head--left .section-subtitle { text-align: left; margin-left: 0; }
.section-head--left .section-title::after,
.downloads-header .section-title::after { margin-left: 0; }

.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 12px;
  text-align: center;
}

.section-subtitle {
  font-size: 1.15rem;
  color: #666;
  max-width: 640px;
  margin: 0 auto 48px;
}

/* ---------- Buttons ----------
   Four treatments — primary, secondary, danger, red CTA — plus an on-dark
   context for hero CTAs over a photo. The legacy class names are kept as
   the selectors so no markup changes; each name maps to one treatment.

   No pill, and no hover lift: hover shifts colour, a press scales to .98.
   Base height lands at 44px so a button is a comfortable tap target. */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* PRIMARY — the single main action on a page. */
.btn-green {
  background: var(--pri);
  color: var(--on-pri);
  border-color: var(--pri-edge);
}
.btn-green:hover { background: var(--pri-hover); border-color: var(--pri-hover); color: var(--on-pri); }

/* RED CTA — marketing only. External-link calls to action that sit beside a
   green primary ("Download Our Kit", "Order Online via Square") and are
   meant to break the rhythm and stand out. Never used in the app. */
.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red-dark);
}
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }

/* SECONDARY — Cancel / Edit / View / "Full calendar". There are more of these
   on screen than primaries (79 vs 98 across both properties), so it carries
   less weight than the primary — but it is still filled and bordered, because
   a transparent or neutral version reads as washed out on a card. */
.btn-outline-green {
  background: var(--sec-bg);
  color: var(--sec-ink);
  border-color: var(--sec-bd);
}
.btn-outline-green:hover { background: var(--sec-bg-hover); border-color: var(--sec-bd); color: var(--sec-ink); }

/* ON-DARK — the same primary/secondary pair rendered over a photo scrim. */
.btn-white {
  background: var(--white);
  color: var(--pri);
  border-color: var(--white);
}
.btn-white:hover { background: #ece7dc; border-color: #ece7dc; }

/* Alpha is deliberately high: this sits over a dark photo scrim next to a
   solid green primary, and at 12% it read as a murky hole rather than a
   button. */
.btn-outline-white {
  background: rgba(255,255,255,0.2);
  color: var(--white);
  border-color: rgba(255,255,255,0.75);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.32); border-color: var(--white); color: var(--white); }

/* Large — marketing heroes and section CTAs, where a button sits under a
   clamp(2.4rem+) headline and has to hold its own. Sized to sit alongside
   the hero's .saturday-hours-panel rather than looking like a chip next to
   it. Used 30 times on the marketing site, never in the app. */
.btn-lg { padding: 20px 38px; font-size: 1.1rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: padding 0.3s;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
  transition: padding 0.3s;
}

.header-logo img {
  height: 90px;
  width: auto;
  transition: height 0.3s;
}

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

.nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-link:hover, .nav-link.active { color: var(--green); }

/* The nav CTA is the primary treatment at a nav-sized scale. */
.nav-fundraiser-btn {
  background: var(--pri);
  color: var(--on-pri) !important;
  padding: 9px 18px;
  border: 1px solid var(--pri-edge);
  border-radius: var(--radius-sm);
}
.nav-fundraiser-btn:hover { background: var(--pri-hover) !important; border-color: var(--pri-hover); color: var(--on-pri) !important; }

/* Shrink header on scroll */
.site-header.scrolled .header-inner { padding: 8px 24px; }
.site-header.scrolled .header-logo img { height: 64px; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-close { display: none; }
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: #ccc;
  padding: 56px 0 24px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand img { height: 100px; margin-bottom: 14px; filter: brightness(1.1); }

.footer-brand p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #bbb;
}

.footer-fb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  font-size: 0.9rem;
  font-weight: 700;
  transition: color 0.2s;
}
.footer-fb-link:hover { color: var(--white); }

.footer-col h2,
.footer-col h3,
.footer-col h4 {
  font-family: var(--font-display);
  color: var(--white);
  margin-bottom: 18px;
  font-size: 1.05rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #3a3a3a;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; font-size: 0.97rem; }
.footer-col ul li a { color: #ccc; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--white); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.97rem;
  line-height: 1.5;
}

.footer-contact-item > span:first-child {
  display: inline-block;
  min-width: 28px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.footer-contact-item a { color: #ccc; transition: color 0.2s; }
.footer-contact-item a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid #3a3a3a;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #aaa;
}

.footer-bottom a { color: #ccc !important; text-decoration: underline; }
.footer-bottom a:hover { color: var(--white) !important; }

/* ---------- Hero phone ---------- */
.hero-phone {
  margin-top: 20px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
.hero-phone a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Steps reassurance ---------- */
.steps-reassurance {
  margin-top: 48px;
  background: var(--gray-light);
  border-radius: 8px;
  padding: 36px 40px;
  text-align: center;
  border-left: 4px solid var(--green);
}
.steps-reassurance h3 {
  font-size: 1.4rem;
  color: var(--dark);
  margin-bottom: 12px;
}
.steps-reassurance p {
  font-size: 1.05rem;
  color: #555;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Hero (shared) ---------- */

/* Home hero. The photo has a dark gutter down the middle by design — subs on
   the left, pizza on the right — so the scrim is a centre-weighted vignette
   that darkens only the gutter behind the headline and lets the food keep
   its colour. (A flat 60% scrim used to sit over the whole thing.) The phone
   photo fills its frame, so there it is a top-heavy gradient instead: the
   text sits over the subs and the pizza shows through under the buttons.
   Height is capped so the page under the hero is visible on a big monitor. */
.hero {
  position: relative;
  min-height: min(100vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--dark) center/cover no-repeat;
  background-image: url('../images/hero.jpg');
  text-align: center;
  color: var(--white);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 70% at 50% 46%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.08) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 28%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 120px 24px 60px;
  max-width: 860px;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 36px;
  opacity: 0.92;
}

.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* The copy is centred in the space above the trust strip, so the gap sits
   evenly above and below it instead of piling up under the phone line. */
.hero .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 140px 24px 44px;
}

.hero .hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

/* The home page's small line above the headline. It sits INSIDE the h1 so the
   page's main heading says what we sell and where, for search, while the big
   line stays the slogan. Same eyebrow anatomy as .section-label. */
.hero-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--accent-on-dark);
  text-shadow: 0 1px 5px rgba(0,0,0,0.95);
  margin-bottom: 14px;
}
.hero-kicker > span { white-space: nowrap; }
/* Phones: one phrase per line rather than letting the dot wrap to the start
   of the second line. */
@media (max-width: 600px) {
  .hero-kicker > span { display: block; }
  .hero-kicker > .hero-kicker-sep { display: none; }
}

.hero .hero-content p { max-width: 640px; }
.hero .hero-content .hero-phone { margin-bottom: 0; opacity: 1; }

/* Trust strip — the fundraising page's four facts, inside the hero so the
   first screen answers them before anyone scrolls. */
.hero-trust {
  position: relative;
  z-index: 1;
  background: rgba(8,8,8,0.40);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 18px 0;
}

.hero-trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hero-trust strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--accent-on-dark);
  text-shadow: 0 1px 5px rgba(0,0,0,0.95);
  margin-bottom: 3px;
}

.hero-trust span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 5px rgba(0,0,0,0.95);
}

@media (max-width: 768px) {
  .hero {
    min-height: 640px;
    background-image: url('../images/hero-mobile.jpg');
    background-position: center top;
  }
  .hero::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.18) 100%);
  }
  .hero .hero-content { padding: 150px 20px 30px; justify-content: flex-start; }  /* header is ~118px on phones */
  .hero .hero-content .hero-phone { font-size: 0.88rem; margin-top: 14px; }
  .hero-trust { padding: 12px 0 14px; }
  .hero-trust-inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Reserve two lines so a heading that wraps ("You Set the Price") does not
     push its own description below the one beside it. */
  .hero-trust strong { font-size: 1.05rem; min-height: 2.4em; margin-bottom: 1px; }
  .hero-trust span { font-size: 0.78rem; line-height: 1.35; }
}

/* Page banner (shorter hero for inner pages) */
.page-banner {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark) center/cover no-repeat;
  text-align: center;
  color: var(--white);
}

/* A flat 62% wash over the whole photo was costing more than it bought: it
   darkened the subject (the oven and pizza on wholesale, the shop photo on
   about) without adding contrast where the text actually sits. Each banner
   now gets a gradient shaped to its own composition — dark under the text
   column, clearing toward the side the subject is on. Same approach as the
   home hero. Phones centre the text over the photo, so they keep an even
   wash. */
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* Text left: darken the left, let the food on the right come up. */
.page-banner--fundraising::after,
.page-banner--saturday::after {
  background: linear-gradient(to right, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.66) 40%, rgba(0,0,0,0.26) 72%, rgba(0,0,0,0.08) 100%);
}

/* Text right: darken the right, let the oven / the shop photo come up. */
.page-banner--wholesale::after,
.page-banner--about::after {
  background: linear-gradient(to left, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0.3) 68%, rgba(0,0,0,0.1) 100%);
}

.page-banner .hero-content { padding: 100px 24px 40px; }
.page-banner .hero-content h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }

/* Hero background images — desktop */
.page-banner--fundraising { min-height: 600px; background-image: url('../images/fundraising-hero.jpg'); text-align: center; justify-content: flex-start; }
.page-banner--fundraising .hero-content { max-width: 620px; margin-left: 150px; text-align: center; padding-top: 150px; }
.page-banner--wholesale   { min-height: 600px; background-image: url('../images/wholesale-hero.jpg'); text-align: center; justify-content: flex-end; }
.page-banner--about       { min-height: 600px; background-image: url('../images/about-hero.jpg'); text-align: center; justify-content: flex-end; }
.page-banner--saturday    { min-height: 600px; background-image: url('../images/saturday-hero.jpg'); }

/* Hero background images — mobile */
@media (max-width: 768px) {
  .page-banner--fundraising { min-height: 360px; background-image: url('../images/fundraising-hero-mobile.jpg'); }
  .page-banner--wholesale   { min-height: 360px; background-image: url('../images/wholesale-hero-mobile.jpg'); }
  .page-banner--about       { min-height: 450px; background-image: url('../images/about-hero-mobile.jpg'); }
  .page-banner--saturday    { min-height: 360px; background-image: url('../images/saturday-hero-mobile.jpg'); }
  .page-banner .hero-content { padding: 170px 20px 40px; }
  .page-banner--saturday .hero-content { padding: 170px 20px 40px; }
  .page-banner--fundraising, .page-banner--wholesale, .page-banner--about { text-align: center !important; justify-content: center !important; }
  /* Centred text over the photo needs an even wash, not a side gradient. */
  .page-banner--fundraising::after,
  .page-banner--saturday::after,
  .page-banner--wholesale::after,
  .page-banner--about::after { background: rgba(0,0,0,0.62); }
  .page-banner--wholesale .hero-content { padding-top: 170px !important; }
  .page-banner--fundraising .hero-content,
  .page-banner--wholesale .hero-content,
  .page-banner--about .hero-content { margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; max-width: 100% !important; }
}

/* Text sits right of centre on both, so the box is inset from the right
   rather than padded on the right — an 80px padding inside a 560px box left
   only 456px of text, which forced "Sell Galiffa's at Your Location" onto
   two lines and, being taller, pushed the block up under the fixed header
   (it cleared it by 1px). The banner is 600px tall and the content is
   vertically centred, so a taller block rises into the nav; padding-top
   holds it clear. */
.page-banner--wholesale .hero-content,
.page-banner--about .hero-content { padding-right: 24px; max-width: 660px; margin-right: 160px; padding-top: 150px; }

/* Caps the headline just under the width of its box so it stays on one line. */
.page-banner--wholesale .hero-content h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }

/* Saturday hero — left-aligned for badge + hours panel layout */
.page-banner--saturday {
  justify-content: flex-start;
  text-align: left;
}
.page-banner--saturday .hero-content {
  padding: 140px 0 60px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.page-banner--saturday .hero-content h1 { font-size: clamp(2rem, 4vw, 3rem); }

.saturday-hero-badge {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  padding: 6px 20px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.saturday-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Sits beside the hero's .btn-lg — keep the padding in step with it so the
   info panel never out-sizes the actual call to action. */
.saturday-hours-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 13px 20px;
}

.saturday-hours-panel svg {
  width: 20px;
  height: 20px;
  fill: var(--white);
  opacity: 0.85;
  flex-shrink: 0;
}

.saturday-hours-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.saturday-hours-text span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
}

/* Two-panel location card */
.order-location-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border: 1px solid #e8e8e8;
}

.order-location-info {
  background: var(--white);
  padding: 56px 48px;
}

.order-location-info h2 {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--dark);
  margin-bottom: 36px;
}

.order-location-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.order-location-icon {
  width: 44px;
  height: 44px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.order-location-icon svg { width: 20px; height: 20px; fill: var(--white); }

.order-location-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b6b6b;
  margin-bottom: 4px;
}

.order-location-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

.order-location-sub {
  font-size: 0.88rem;
  color: #6b6b6b;
  margin-top: 4px;
}

.order-location-map {
  position: relative;
  min-height: 420px;
}

.order-location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 900px) {
  .order-location-card { grid-template-columns: 1fr; }
  .order-location-map { min-height: 320px; position: relative; }
  .saturday-hero-actions { flex-direction: column; align-items: flex-start; }
  .page-banner--saturday { text-align: left; }
}

@media (max-width: 540px) {
  .order-location-info { padding: 36px 24px; }
}

/* ---------- Why Choose Section ---------- */
.why-section { background: var(--white); }

.why-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 56px;
  align-items: center;
}

.why-box-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: block;
}

.cards-grid--2col {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}

/* Compact cards scoped to the Why Choose section */
.why-content-col .feature-card { padding: 18px 16px; }
.why-content-col .feature-icon { width: 44px; height: 44px; margin-bottom: 12px; }
.why-content-col .feature-icon svg { width: 20px; height: 20px; }
.why-content-col .feature-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
.why-content-col .feature-card p { font-size: 0.82rem; line-height: 1.5; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.feature-card:hover { border-color: var(--sec-bd); box-shadow: var(--shadow); }

.feature-icon {
  width: 64px;
  height: 64px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.feature-icon svg { width: 30px; height: 30px; fill: var(--white); }

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: var(--dark);
}

.feature-card p { font-size: 1rem; color: #666; }

/* ---------- Products Section ---------- */
.products-section { background: var(--dark); }
.products-section .section-title { color: var(--white); }
.products-section .section-subtitle { color: #aaa; }
.products-section .section-label { color: var(--white); }

.product-card {
  background: #2e2e2e;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.product-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }

.product-img {
  width: 100%;
  height: 260px;
  background: #3a3a3a;
  overflow: hidden;
}

.product-img { position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
@media (hover: hover) {
  .product-card:hover .product-img img { transform: scale(1.08); }
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 9999px;
  z-index: 1;
}

.product-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3a3a3a, #4a4a4a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.product-info { padding: 22px 20px 24px; }

.product-info h3 {
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 8px;
}

.product-info p { font-size: 0.97rem; color: #aaa; line-height: 1.6; }

/* ---------- CTA Band ---------- */
.cta-band {
  background: var(--green);
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size: 20px 20px;
  color: var(--white);
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-deco {
  position: absolute;
  top: -20px;
  right: -20px;
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}
.cta-deco svg { width: 280px; height: 280px; fill: var(--white); }

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 16px;
  color: var(--white);
}

.cta-band p { font-size: 1.1rem; margin-bottom: 36px; opacity: 0.92; }
.cta-band .hero-btns { justify-content: center; }

/* Same on-dark secondary as .btn-outline-white — kept as a separate name
   because two hero templates already use it. */
.btn-outline-white-solid {
  background: rgba(255,255,255,0.2);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.75);
}
.btn-outline-white-solid:hover { background: rgba(255,255,255,0.32); border-color: var(--white); }

/* ---------- How It Works ---------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  counter-reset: step;
}

.step-card {
  text-align: center;
  padding: 40px 24px;
  position: relative;
  background: var(--white);
  border-radius: 12px;
  border-top: 4px solid var(--green);
}
.step-card--red { border-top-color: var(--red); }

.step-number {
  width: 60px;
  height: 60px;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 20px;
}

.step-gif {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

.step-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.step-card p { color: #666; font-size: 1rem; }


/* ---------- Product Showcase Header ---------- */
.product-showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
}
.product-showcase-stat { text-align: right; flex-shrink: 0; }
.product-showcase-stat strong {
  display: block;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.3;
}
.product-showcase-stat span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
}

/* ---------- Downloads Header ---------- */
.downloads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
}
.downloads-call-card {
  background: var(--gray-light);
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  border-top: 3px solid var(--green);
  flex-shrink: 0;
  min-width: 230px;
}
.downloads-call-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b6b6b;
  margin-bottom: 8px;
}
.downloads-call-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 6px;
  transition: color 0.2s;
}
.downloads-call-number:hover { color: var(--green-dark); }
.downloads-call-sub {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.45;
}

/* ---------- Downloads ---------- */
.download-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.download-btn-large {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--green);
  color: var(--white);
  padding: 28px 32px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
  font-weight: 700;
}

.download-btn-large:hover { background: var(--green-dark); }

.download-btn-large svg { width: 36px; height: 36px; flex-shrink: 0; }

.download-btn-large .dl-text .dl-title { font-size: 1.15rem; }
.download-btn-large .dl-text .dl-sub { font-size: 0.85rem; opacity: 0.8; font-weight: 400; }

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.download-card {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.download-card:hover { border-color: var(--sec-bd); box-shadow: var(--shadow); }

.download-card svg { width: 40px; height: 40px; color: var(--red); }
.download-card h4 { font-size: 1rem; color: var(--dark); }
.download-card .btn { width: 100%; text-align: center; padding: 12px 16px; font-size: 0.95rem; min-height: 44px; }

/* ---------- Order Online ---------- */
.order-info {
  text-align: center;
  padding: 80px 24px;
  max-width: 640px;
  margin: 0 auto;
}

.order-info h2 { font-size: 2rem; margin-bottom: 8px; }
.order-info .order-address { font-size: 1.1rem; color: #555; margin-bottom: 8px; }
.order-info .order-note { font-size: 1rem; color: #888; margin-bottom: 36px; }
.order-info .order-sub-note { font-size: 1rem; color: #666; margin-top: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }

.map-section { background: #f0f0f0; }
.map-wrapper { position: relative; }
.map-wrapper iframe { display: block; }
.map-caption {
  text-align: center;
  padding: 16px 24px;
  font-size: 0.97rem;
  color: #666;
  background: var(--white);
}

/* ---------- About Family Section ---------- */
.family-section { background: var(--white); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.family-text p {
  margin-bottom: 20px;
  font-size: 1.05rem;
  color: #444;
  line-height: 1.8;
}

.slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide img { width: 100%; height: 100%; object-fit: cover; }

.slide-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d0d0d0, #e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* Group photo — show full width so no one gets clipped */
.slide:nth-child(1) img { object-fit: contain; background: #111; }

/* Parents photo — balanced to show both faces and the 50 Years sign */
.slide:nth-child(3) img { object-position: center 30%; }

/* JS-controlled cross-fade — active class set by slideshow script */
.slide.active { opacity: 1; }

/* Pause / play (added by the about.html script when the slideshow moves). */
.slideshow-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.85rem; line-height: 1; letter-spacing: -2px; cursor: pointer;
}
.slideshow-toggle:hover { background: rgba(0, 0, 0, 0.75); }
.slideshow-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* ---------- Contact Form Section ---------- */
.contact-section { background: var(--gray-light); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

.contact-info h3 { font-size: 1.4rem; margin-bottom: 24px; }

.contact-item {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.contact-item-icon {
  width: 44px;
  height: 44px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-icon svg { width: 20px; height: 20px; fill: var(--white); }

.contact-item-text strong { display: block; font-weight: 700; margin-bottom: 2px; }
.contact-item-text a { color: var(--green); }
.contact-item-text a:hover { text-decoration: underline; }

/* Form */
.contact-form {
  background: var(--white);
  border-radius: 8px;
  padding: 28px 28px;
  box-shadow: var(--shadow);
}

.contact-form h3 { font-size: 1.4rem; margin-bottom: 16px; }
.contact-form .form-group { margin-bottom: 14px; }
.contact-form .form-row { --field-gap: 14px; }
.contact-form .form-row > .form-group { margin-bottom: 0; }

/* --field-gap is the one vertical rhythm for a form. The row uses it for its
   grid gap AND its own bottom margin, and the fields inside the row zero their
   margin, so a paired field can never sit further from its neighbour than a
   standalone one. Forms with a tighter rhythm (the contact form, the lead-form
   card in landing.css) re-point the variable rather than re-declaring margins,
   which is what broke this the first time round. */
.form-row {
  --field-gap: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--field-gap);
  margin-bottom: var(--field-gap);
}

.form-group { margin-bottom: 20px; }
.form-row > .form-group { margin-bottom: 0; }

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #444;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d4cfc5;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-submit { width: 100%; padding: 16px; font-size: 1rem; }

.checkbox-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text);
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- Mix & Match Section ---------- */
.mix-section { background: var(--gray-light); }
.mix-section p { font-size: 1.05rem; color: #555; max-width: 700px; margin: 0 auto; text-align: center; }

/* ---------- Profit Callout ---------- */
.profit-callout {
  background: #f0f7ee;
  border-left: 5px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 28px 32px;
  max-width: 700px;
  margin: 32px auto 0;
  text-align: left;
}
.profit-callout h3 { font-size: 1.2rem; color: var(--green); margin-bottom: 10px; }
.profit-callout p { color: #444; font-size: 0.97rem; line-height: 1.7; margin: 0; }

.profit-callout--dark {
  background: rgba(255,255,255,0.1);
  border-left-color: rgba(255,255,255,0.4);
}
.profit-callout--dark h3 { color: #fff; }
.profit-callout--dark p { color: rgba(255,255,255,0.85); }
.profit-callout--dark strong { color: #fff; }

.profit-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.profit-list li {
  color: rgba(255,255,255,0.85);
  font-size: 0.97rem;
  line-height: 1.7;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.profit-list li:last-child { border-bottom: none; }
.profit-list strong { color: #fff; }

/* ---------- Why We Cost More ---------- */
.why-cost-top {
  background: var(--green-dark);
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.07) 1px, transparent 0);
  background-size: 20px 20px;
  color: var(--white);
  padding-bottom: 52px;
}

.why-cost-lower {
  background: var(--white);
  text-align: center;
  padding-top: 52px;
}

.why-cost-label { color: rgba(255,255,255,0.6) !important; }

.why-cost-header { margin-bottom: 40px; }

.why-cost-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Grid and flex items default to min-width:auto, which refuses to shrink below
   their content — on a 320px phone that ran these tracks 323px wide inside a
   272px container and side-scrolled the whole page. */
.why-cost-main > *,
.why-cost-pillar,
.why-cost-pillar-text { min-width: 0; }

.why-cost-photo-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: sticky;
  top: 100px;
}

.why-cost-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-cost-pillars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.why-cost-pillar {
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 24px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: border-color 0.15s ease, box-shadow 0.25s ease;
  text-align: left;
}
.why-cost-pillar:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

.why-cost-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-cost-icon svg { width: 24px; height: 24px; fill: var(--green); }

.why-cost-pillar-text { flex: 1; }
.why-cost-pillar h3 { color: #fff; font-size: 1.05rem; margin-bottom: 4px; white-space: nowrap; }
.why-cost-pillar p { color: rgba(255,255,255,0.8); font-size: 0.93rem; line-height: 1.6; margin: 0; }

.why-cost-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 36px;
  padding: 0 24px;
}

.why-cost-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.why-cost-stat {
  text-align: center;
  border-top: 3px solid var(--green);
  padding-top: 20px;
}

.wcs-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.8rem);
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
  margin-bottom: 8px;
}

.wcs-label {
  display: block;
  font-size: 0.88rem;
  color: #666;
  line-height: 1.5;
}

.why-cost-cta-box {
  background: #f0f7ee;
  border-radius: 12px;
  padding: 36px 48px;
  max-width: 520px;
  margin: 0 auto;
}

.why-cost-cta-intro {
  margin-bottom: 20px;
  color: var(--green-dark);
  font-size: 1.05rem;
  font-weight: 700;
}

.why-cost-cta-btn {
  box-shadow: 0 4px 20px rgba(61,104,58,0.3);
}

/* ---------- Who We Help ---------- */
.who-section { background: var(--gray-light); }

.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.who-card {
  background: var(--white);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
/* .who-card is the one card in this family with no resting border, so its
   hover is shadow-only. Giving it a border is Phase M's call, not this one's. */
.who-card:hover { box-shadow: var(--shadow); }

.who-icon {
  width: 56px;
  height: 56px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.who-icon svg { width: 26px; height: 26px; fill: var(--white); }

.who-card h3 {
  font-size: 1rem;
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 700;
}

.who-tagline {
  text-align: center;
  font-size: 1.15rem;
  color: #555;
  font-style: italic;
  margin-bottom: 32px;
}

/* Compact variant for index.html */
.who-compact .who-card { padding: 20px 16px; }
.who-compact .who-icon { width: 46px; height: 46px; }
.who-compact .who-icon svg { width: 20px; height: 20px; }
.who-compact .who-card h3 { font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--white); }

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.2s;
}
.faq-question:hover { color: var(--green); }

.faq-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: var(--green);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }

.faq-answer p {
  color: #555;
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0;
  padding: 0 24px 22px;
}
.faq-answer a { color: var(--green); font-weight: 700; }

/* ---------- Scroll to Top ---------- */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 46px;
  height: 46px;
  background: var(--green);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  z-index: 998;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--green-dark); }
.scroll-top-btn svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- Sticky contact bar ---------- */
.sticky-contact-bar {
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 16px 24px;
  font-size: 0.97rem;
  line-height: 1.6;
}
.sticky-contact-bar a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- Footer prominent contact links ---------- */
.footer-big-link {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white) !important;
  transition: opacity 0.2s;
}
.footer-big-link:hover { opacity: 0.8; }

/* ---------- Fundraising Product Showcase ---------- */
.fundraising-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fundraising-product-card {
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.fundraising-product-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
.fundraising-product-img {
  height: 260px;
  overflow: hidden;
}
.fundraising-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
@media (hover: hover) {
  .fundraising-product-card:hover .fundraising-product-img img { transform: scale(1.08); }
}
.fundraising-product-info {
  padding: 16px 20px 20px;
}
.fundraising-product-info h3 {
  font-size: 1.05rem;
  color: var(--dark);
  margin-bottom: 5px;
}
.fundraising-product-info p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

/* ---------- Drop Cap (raised inline initial) ---------- */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: 700;
  color: var(--green);
  margin-right: 3px;
  line-height: 0.75;
  vertical-align: -0.1em;
}

/* .section-title--accent was removed in Phase M — the rule it added now
   belongs to .section-title itself. Kept as a no-op so any stray class in
   old markup renders identically rather than double-drawing the bar. */

/* ---------- Wholesale Page ---------- */
.wholesale-img-figure { margin: 0; }

.wholesale-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #d0d0d0, #e8e8e8);
}

.wholesale-img-wrap .wholesale-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wholesale-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem;
  letter-spacing: 1px;
  pointer-events: none;
}

.wholesale-img-caption {
  text-align: center;
  font-size: 0.9rem;
  color: #6b6b6b;
  margin-top: 12px;
  font-style: italic;
}

.wholesale-oven-note {
  background: #f0f7ee;
  border-left: 5px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 18px 24px;
  max-width: 780px;
  margin: 36px auto 0;
  text-align: left;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
}

.wholesale-oven-note a { color: var(--green); font-weight: 700; }
.wholesale-oven-note a:hover { text-decoration: underline; }

/* Photo strip */
.wholesale-photo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  gap: 8px;
  background: var(--green);
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.wholesale-photo-item {
  overflow: hidden;
  border-radius: 8px;
  height: 280px;
}
.wholesale-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.85);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.wholesale-photo-item img:hover { transform: scale(1.05); filter: grayscale(0); }
.wholesale-photo-item.is-active img { filter: grayscale(0); transform: scale(1.03); }


.wholesale-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.wholesale-products-featured {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px;
  margin-bottom: 28px;
}

.wholesale-products-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.wholesale-category-card {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 24px 22px;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.wholesale-category-card:hover { border-color: var(--sec-bd); box-shadow: var(--shadow); }

.wholesale-category-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.wholesale-category-header h3 {
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 4px;
}

.wholesale-category-note {
  font-size: 0.85rem;
  color: #888;
  margin: 0;
}

.wholesale-sub-group { margin-bottom: 18px; }
.wholesale-sub-group:last-child { margin-bottom: 0; }

.wholesale-sub-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 8px;
}

.wholesale-cat-header {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.wholesale-cat-title {
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 4px;
}

.wholesale-cat-sizes {
  font-size: 0.9rem;
  color: #6b6b6b;
  margin: 0;
}

.wholesale-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wholesale-cat-list li {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.6;
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px solid #f5f5f5;
}

.wholesale-cat-list li:last-child { border-bottom: none; }

.wholesale-cat-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
}

/* ---------- About Page Timeline ---------- */
.about-timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto 48px;
}

.about-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
  transform: translateX(-50%);
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  column-gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}
.timeline-item:last-child { margin-bottom: 0; }

.timeline-node {
  width: 56px;
  height: 56px;
  background: var(--white);
  border: 3px solid var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  position: relative;
  z-index: 1;
  justify-self: center;
  text-align: center;
  line-height: 1.2;
  flex-shrink: 0;
}

.timeline-item--right .timeline-node {
  border-color: var(--red);
  color: var(--red);
}

.timeline-item--left .timeline-node { grid-column: 2; }
.timeline-item--left .timeline-content {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 4px;
}

.timeline-item--right .timeline-node { grid-column: 2; }
.timeline-item--right .timeline-content {
  grid-column: 3;
  grid-row: 1;
  padding-left: 4px;
}

.timeline-content h3 {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 6px;
}
.timeline-content p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

.timeline-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.timeline-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
}

.timeline-stat span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6b6b;
}

.wholesale-how-section { background: var(--green-dark); }

.wholesale-step-number {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.6);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 20px;
}

/* ---------- Service area ----------
   Where-we-deliver block on fundraising.html. Purpose-built rather than
   borrowing .wholesale-category-card, so restyling wholesale can never
   silently restyle the delivery map. */
.service-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
  text-align: left;
}

.service-area-card {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: var(--radius-md);
  padding: 20px 22px;
}

.service-area-card h3 {
  font-size: 1.05rem;
  color: var(--green);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.service-area-towns {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.75;
  margin: 0;
}

.service-area-note {
  margin: 32px auto 0;
  max-width: 720px;
  background: var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 0.98rem;
  color: #444;
}

.service-area-note a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .wholesale-products-grid { grid-template-columns: 1fr; }
  .wholesale-products-featured { grid-template-columns: 1fr; }
  .wholesale-products-secondary { grid-template-columns: 1fr; }
  .fundraising-product-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .service-area-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { grid-template-columns: 1fr; gap: 20px; }
  .steps-row .step-card::after { display: none; }
  .download-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cost-main { grid-template-columns: 1fr; }
  .why-cost-photo-wrap { position: static; }
  /* The dot-pattern tile leaves a sub-pixel remainder at odd viewport widths
     (2px at 320px). clip, not hidden, so no scroll container is created. */
  .why-cost-top { overflow-x: clip; }
  .why-cost-pillars { gap: 16px; }
  .why-cost-stats { grid-template-columns: 1fr; gap: 0; }
  .why-cost-stat { border-top: none; border-bottom: 1px solid #e8e8e8; padding: 20px 0; }
  .why-cost-stat:first-child { border-top: 3px solid var(--green); }
  .wcs-number { font-size: 2.4rem; }
  .why-cost-cta-box { padding: 28px 24px; }
  .why-layout { grid-template-columns: 1fr; }
  .why-box-img { height: 420px; max-height: none; object-fit: cover; }
  .cards-grid--2col { grid-template-columns: repeat(2, 1fr) !important; }
  .product-showcase-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .product-showcase-stat { text-align: left; }
  .downloads-header { flex-direction: column; align-items: flex-start; }
  .downloads-call-card { width: 100%; }
}

@media (max-width: 768px) {
  .section-padding { padding: 56px 0; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  /* Stacked, these sized to their own copy — "Download Brochure" has a short
     title and a long subtitle, the Kit has the reverse, so whichever wrapped
     came out taller. Equal rows keeps the pair matched at any width. */
  .download-featured { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  /* 28px/32px is generous on a phone, and once the pair is height-matched the
     shorter one carries that padding twice over as slack. */
  .download-btn-large { padding: 20px 22px; gap: 16px; }
  .download-btn-large svg { width: 30px; height: 30px; }
  .download-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .site-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    justify-content: center;
    align-items: center;
    gap: 16px;
    z-index: 999;
  }

  .site-nav.open { display: flex; z-index: 1002; }
  .nav-link { font-size: 1.2rem; }

  .nav-toggle { display: flex; z-index: 1001; }

  .nav-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--dark);
  }

  .site-nav.open .nav-close { display: block; }
}

@media print {
  .site-header, .site-nav, .nav-toggle, .page-banner, .cta-band,
  .site-footer, .btn, .hero-btns, .map-section, .sticky-contact-bar,
  .download-featured, .download-grid { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  h1, h2, h3, h4 { color: #000; page-break-after: avoid; }
  p, li { line-height: 1.5; color: #000; }
  a { color: #000; text-decoration: none; }
  .container { max-width: 100%; padding: 0; }
  .section-padding { padding: 24pt 0; }
  .cards-grid, .steps-row, .who-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card, .who-card { border: 1px solid #ccc; break-inside: avoid; }
  .feature-icon, .who-icon { background: #fff; border: 1px solid #ccc; }
  .feature-icon svg, .who-icon svg { fill: #000; }
}

@media (max-width: 540px) {
  /* ---- Density on phones ----
     Tiles that are mostly a photo or an icon stay two-up: at one-up the same
     six products that take 875px on the home page took 2,233px here, and the
     page read as a scroll rather than a menu. Anything whose value is a line
     of prose (the county lists, the three steps) stays one-up, where the
     measure matters more than the height. */
  .cards-grid,
  .download-grid,
  .fundraising-product-grid { grid-template-columns: 1fr; }
  .service-area-grid { grid-template-columns: 1fr; }

  /* Two-up tiles need less internal padding and a smaller title to stay
     readable at ~170px wide. */
  .product-card .product-info,
  .fundraising-product-info { padding: 12px 10px; }
  .fundraising-product-info h3,
  .product-info h3 { font-size: 0.92rem; margin-bottom: 3px; }
  .fundraising-product-info p,
  .product-info p { font-size: 0.78rem; line-height: 1.45; }
  .download-card { padding: 16px 10px; }
  .download-card h4 { font-size: 0.88rem; }
  .feature-card { padding: 16px 12px; }
  .feature-icon { width: 46px; height: 46px; margin-bottom: 12px; }
  .feature-icon svg { width: 22px; height: 22px; }

  /* Band rhythm: 80px top and bottom on a 390px screen is a third of a
     viewport of nothing between every section. */
  .section-band, .section-padding { padding: 52px 0; }
  .section-band--tight { padding: 40px 0; }
  .section-padding--tight { padding-top: 32px; padding-bottom: 32px; }
  .section-subtitle { margin-bottom: 28px; font-size: 1.02rem; }
  .section-title { margin-bottom: 12px; }
  .section-title::after { margin-top: 10px; }

  /* The step GIFs are decorative and were taking 100px of a 349px card. */
  .step-gif { width: 68px; height: 68px; margin-bottom: 12px; }
  .steps-row { gap: 14px; }
  .step-card { padding: 22px 18px; }

  .service-area-card { padding: 16px 18px; }
  .service-area-grid { gap: 12px; margin-top: 24px; }
  /* Brand full width, then Quick Links and Contact Us side by side — stacking
     all three made the phone footer roughly a screen and a half of scrolling. */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h2, .footer-col h3, .footer-col h4 { font-size: 1rem; }
  .footer-col ul li { font-size: 0.92rem; margin-bottom: 8px; }
  .footer-contact-item { font-size: 0.9rem; gap: 7px; margin-bottom: 12px; }
  .footer-contact-item > span:first-child { min-width: 19px; width: 19px; }
  .footer-contact-item a, .footer-big-link { overflow-wrap: anywhere; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .hero-btns { flex-direction: column; align-items: center; }
  .wholesale-photo-strip {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 6px;
    scroll-snap-type: x mandatory;
    }
  .wholesale-photo-strip::-webkit-scrollbar { display: none; }
  .wholesale-photo-strip .wholesale-photo-item {
    flex: 0 0 72vw;
    max-width: 320px;
    height: 220px;
    scroll-snap-align: start;
  }
  .wholesale-photo-item img:hover { transform: none; filter: grayscale(0.85); }
  .wholesale-photo-item.is-active img { filter: grayscale(0); transform: scale(1.03); }
}

/* Two-up needs about 160px a tile to stay readable and keep a 44px tap target;
   below 360px (older small phones) the grids stay one-up. */
@media (min-width: 360px) and (max-width: 540px) {
  .cards-grid,
  .download-grid,
  .fundraising-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* A three-card section (wholesale's "We Bring the Oven") would leave the
     third one alone in its own row. Three full-width cards read better than
     two-and-an-orphan, and three is short enough that the height is no
     problem. Grids with an even count are unaffected. */
  .cards-grid:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* 48px circles so the year can be 11.5px (it was 9.6px at 40px). The
     2px line sits on the circles' centre (24px). */
  .about-timeline::before { left: 23px; transform: none; }
  .timeline-item { grid-template-columns: 48px 1fr; column-gap: 14px; }
  .timeline-item--left .timeline-node,
  .timeline-item--right .timeline-node { grid-column: 1; width: 48px; height: 48px; font-size: 0.72rem; }
  .timeline-item--left .timeline-content,
  .timeline-item--right .timeline-content { grid-column: 2; grid-row: 1; text-align: left !important; padding: 0 !important; }
}

/* ---------- Footer Review Bar ---------- */
.footer-review {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #3a3a3a;
}
.footer-review a {
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.footer-review a:hover { color: var(--red); }

/* ---------- Scroll Animations ---------- */
.anim-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}