/* ============================================================
   THE HOUSE OF BROWNIES & BLONDIES
   Stylesheet — css/style.css
   Greenhouse-inspired editorial design system.
   ============================================================ */

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── DESIGN TOKENS ──
   Editorial bakery palette — light surfaces with distinct section identities
   and three jewel-tone anchor moments (terracotta press, plum announce,
   navy newsletter card).

   Light section backgrounds:
     ivory       #FBF7EE  hero, products, promo, newsletter outer
     paper       #FDFBF5  testimonials (near-white canvas)
     apricot     #F6DDB9  trust strip, promo inner card, testi cards
     sage        #E8EDD9  (reserved — not currently used)
     vanilla     #EDD9B8  story, footer
     rose        #F0D8D2  process section

   Jewel-tone anchors:
     terracotta  #B05E2F  press marquee
     plum        #4A263E  announce bar
     navy        #2D3E50  newsletter inner card

   Accents:
     rust        #C97441  primary accent (buttons, hovers, prices, tags)
     rust-deep   #6E3A1F  headings & dark text — warm dark brown
     gold        #E0B247  stars, italic em on dark surfaces
*/
:root {
  /* === Light section surfaces === */
  --cream:        #FBF7EE;   /* PAGE BG — warm ivory */
  --paper:        #FDFBF5;   /* lightest, near-white canvas */
  --cream-soft:   #FDFBF5;   /* alias of paper for legacy rules */
  --cream-deep:   #DBC9A5;   /* warm tan — borders, image placeholders */

  /* === Section accents === */
  --apricot:      #F6DDB9;
  --sage:         #E8EDD9;
  --vanilla:      #EDD9B8;
  --rose:         #F0D8D2;

  /* === Jewel-tone anchors (used sparingly) === */
  --terracotta:   #B05E2F;
  --plum:         #4A263E;
  --navy:         #2D3E50;
  --cocoa:        #3D2417;   /* deep cocoa — footer background */

  /* === Flavor accent colors — one per product flavor.
         Used in the How We Bake section to make each step distinct. === */
  --flavor-pistachio:   #A8B66A;   /* Pistachio Blondie */
  --flavor-mango:       #E8A93B;   /* Mango Blondie */
  --flavor-orange:      #E97632;   /* Orange Blondie */
  --flavor-strawberry:  #DC4D63;   /* Strawberry Blondie */
  --flavor-coffee:      #9C6A40;   /* Coffee Blondie */
  --flavor-chocolate:   #5A2F1C;   /* American Chocolate Brownie */

  /* === Action accents === */
  --rust:         #C97441;   /* primary accent — buttons, prices, tags */
  --rust-deep:    #6E3A1F;   /* heading text, dark warm brown */
  --gold:         #E0B247;   /* stars, italic em on dark surfaces */
  --gold-soft:    #F0CC7A;
  --gold-deep:    #C99838;

  /* === Text === */
  --ink:          #2D1E14;   /* deepest body text */
  --ink-soft:     #5F4733;   /* secondary text */
  --ink-muted:    #9A8068;   /* muted text */

  /* === Legacy --green-* shims (kept so existing rules still resolve) === */
  --green-900:    #6E3A1F;   /* rust-deep — headings on light surfaces */
  --green-800:    #B05E2F;   /* terracotta — press marquee bg */
  --green-700:    #6E3A1F;   /* italic em on light backgrounds */
  --green-500:    #C99838;   /* announce-sep mid gold */
  --green-300:    #FDFBF5;   /* light text on dark surfaces */
  --green-100:    #FBF7EE;   /* ivory body text on dark surfaces */

  --clay:         #C97441;   /* primary accent */
  --clay-soft:    #E0B247;   /* gold accent on dark surfaces */

  /* === System === */
  --border:       rgba(45, 30, 20, 0.13);
  --border-soft:  rgba(45, 30, 20, 0.06);

  --font-display: 'Playfair Display', 'Lora', Georgia, serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;

  --nav-h:        81px;
  --section-py:   clamp(80px, 9vw, 130px);
  --section-px:   clamp(20px, 6vw, 88px);
  --radius:       2px;
  --radius-md:    6px;
  --radius-lg:    14px;

  --t-base:       0.3s cubic-bezier(.2,.7,.3,1);
  --t-slow:       0.7s cubic-bezier(.2,.7,.3,1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Skip-to-content link (accessibility + SEO) ── */
.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 9999;
  text-decoration: none;
}
.skip-to-content:focus {
  position: fixed;
  top: 12px;
  left: 16px;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--clay);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

/* ── Focus-visible (keyboard navigation) ── */
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Minimum touch target size for interactive elements ── */
.nav-order-btn,
.nav-employee-btn,
.btn-primary,
.btn-secondary,
.hamburger {
  min-height: 44px;
  min-width: 44px;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* SR-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── SHARED PRIMITIVES ── */
section {
  padding: var(--section-py) var(--section-px);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 600;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "✦";
  margin-right: 10px;
  color: var(--clay);
  font-size: 10px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--green-900);
  font-weight: 400;
  font-variation-settings: "opsz" 100, "wght" 420;
}

.section-title em {
  font-style: italic;
  font-variation-settings: "opsz" 100, "wght" 420;
  color: var(--green-700);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 72px;
}

/* ── BUTTONS ── */
.btn-primary {
  background: var(--green-900);
  color: var(--cream);
  border: 1px solid var(--green-900);
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 100px;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--cream-soft);
  transform: translateY(-1px);
}

.btn-primary--disabled,
.btn-primary--disabled:hover {
  background: var(--cream-deep);
  border-color: var(--cream-deep);
  color: var(--rust-deep);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.btn-ghost {
  background: transparent;
  color: var(--green-900);
  border: 1px solid var(--green-900);
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 100px;
  transition: background var(--t-base), color var(--t-base);
  text-decoration: none;
  display: inline-block;
}

.btn-ghost:hover {
  background: var(--green-900);
  color: var(--cream);
}

.link-arrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--green-900);
  text-decoration: none;
  border-bottom: 1px solid var(--green-900);
  padding-bottom: 3px;
  transition: color var(--t-base), border-color var(--t-base), letter-spacing var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.link-arrow:hover {
  color: var(--clay);
  border-color: var(--clay);
  letter-spacing: 0.08em;
}

.link-arrow span {
  transition: transform var(--t-base);
}

.link-arrow:hover span {
  transform: translateX(4px);
}

/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.visible        { opacity: 1; transform: translateY(0); }
.reveal-delay-1        { transition-delay: 0.08s; }
.reveal-delay-2        { transition-delay: 0.16s; }
.reveal-delay-3        { transition-delay: 0.24s; }
.reveal-delay-4        { transition-delay: 0.32s; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  background: var(--plum);
  color: var(--cream);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 11px 20px;
  font-weight: 400;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.announce-item { color: var(--cream); }
.announce-sep { color: var(--gold); }

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Scoped to #mainNav specifically — other <nav> elements on the page
   (e.g. the breadcrumb <nav> inside .product-detail) must NOT inherit
   sticky positioning and z-index 100, or they'd stack above the mega menu. */
#mainNav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  transition: background var(--t-base), box-shadow var(--t-base), border-bottom-color var(--t-base);
  border-bottom: 1px solid transparent;
  /* Promote to its own GPU compositing layer — prevents repaint flicker on scroll */
  will-change: transform;
  transform: translateZ(0);
  /* Always-on backdrop-filter: invisible when background is opaque, but avoids
     the flicker caused by the browser toggling this property on/off mid-scroll. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#mainNav.scrolled {
  background: rgba(251, 247, 240, 0.92);
  border-bottom-color: var(--border);
}

.nav-inner {
  height: var(--nav-h);
  padding: 0 var(--section-px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--green-900);
  justify-self: start;
}

.logo-img {
  display: block;
  height: 68px;
  width: auto;
  object-fit: contain;
}

.logo-img--footer {
  height: 92px;
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .logo-img { height: 52px; }
  .logo-img--footer { height: 72px; }
}

.logo-main {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--green-900);
}

.logo-sub {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
  font-weight: 400;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 44px;
  justify-self: center;
  align-items: center;
}

.nav-item {
  /* "static" makes the dropdown's absolute position resolve against the nav,
     not against the <li>, so the mega menu can be full-width. */
  position: static;
  display: flex;
  align-items: center;
}

.nav-link,
.nav-toggle {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--green-900);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
  transition: color var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-link::after,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.nav-link:hover,
.nav-toggle:hover,
.nav-item--has-dropdown.is-open .nav-toggle {
  color: var(--clay);
}

.nav-link:hover::after,
.nav-toggle:hover::after,
.nav-item--has-dropdown.is-open .nav-toggle::after {
  transform: scaleX(1);
}

.nav-chevron {
  transition: transform var(--t-base);
  display: inline-block;
}

.nav-item--has-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   MEGA MENU (Shop dropdown)
   Modelled on Whisk Greenhouse: full-width panel below the
   header, opens with a 0.2s opacity + 16px translateY transition
   triggered by toggling .is-open on the parent .nav-item.
   ============================================================ */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--cream);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 18px 36px rgba(45, 30, 20, 0.06);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.nav-item--has-dropdown.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 44px var(--section-px);
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.mega-menu__promo {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.mega-menu__promo-img {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream-deep);
  margin-bottom: 18px;
  /* Arched-top shape — Greenhouse signature element. */
  border-top-left-radius: 50% 24%;
  border-top-right-radius: 50% 24%;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.mega-menu__promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mega-menu__promo:hover .mega-menu__promo-img img {
  transform: scale(1.05);
}

.mega-menu__promo-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--green-900);
  font-weight: 400;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 100, "wght" 440;
}

.mega-menu__promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--clay);
  font-weight: 500;
}

.mega-menu__promo-cta svg {
  transition: transform var(--t-base);
}

.mega-menu__promo:hover .mega-menu__promo-cta svg {
  transform: translateX(4px);
}

.mega-menu__column {
  display: flex;
  flex-direction: column;
}

.mega-menu__heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--green-900);
  text-decoration: none;
  margin-bottom: 18px;
  display: inline-block;
  font-variation-settings: "opsz" 100, "wght" 440;
  transition: color var(--t-base);
}

.mega-menu__heading:hover {
  color: var(--clay);
}

.mega-menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.mega-menu__list a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0;
  transition: color var(--t-base);
  display: inline-block;
  line-height: 1.45;
}

.mega-menu__list a:hover {
  color: var(--clay);
}

/* Subtle secondary note used inside Combo Packs sub-items (e.g. "— Pack of 12"). */
.mega-menu__sub-note {
  display: inline;
  color: var(--ink-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.nav-employee-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  color: var(--ink-soft);
  background: transparent;
  transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
  flex-shrink: 0;
}

.nav-employee-btn:hover {
  border-color: var(--clay);
  color: var(--clay);
  background: rgba(201,116,65,0.06);
}

.nav-order-btn {
  display: inline-block;
  padding: 9px 20px;
  background: var(--clay);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-order-btn:hover {
  background: var(--rust-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 116, 65, 0.4);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 22px;
  height: 1.5px;
  background: var(--green-900);
  transition: transform var(--t-base), opacity var(--t-base);
  border-radius: 1px;
}

/* ============================================================
   HERO — image is full-bleed, content overlaid on the left.
   A cream gradient scrim fades from opaque on the left to fully
   transparent on the right, giving the left-side text a readable
   backdrop while letting the image be fully visible to the right.
   ============================================================ */
.hero {
  padding: 0;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  /* --top-h is set by JS (initHeroHeight in main.js) to the actual measured
     height of the nav. The hero is capped at ~88vh so the trust strip below
     is always visible on first load without scrolling.
     vh first as fallback; dvh below overrides on capable browsers (dvh is
     "dynamic viewport height" — excludes mobile browser chrome). */
  min-height: calc(91vh - var(--top-h, 81px));
  min-height: calc(91dvh - var(--top-h, 81px));
  display: flex;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: clamp(36px, 4vw, 60px) clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

/* ── Hero text stack ── All 5 text sets occupy the same CSS Grid cell
   (grid-area 1 / 1) so they overlap. Only the .is-active one is at
   opacity 1; the others sit invisible at opacity 0. JS toggles the
   .is-active class in sync with the image rotation, using the same
   1.2s ease crossfade for a perfectly aligned transition. */
.hero-text-stack {
  display: grid;
  position: relative;
}

.hero-text-set {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  will-change: opacity;
}

.hero-text-set.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Inside the stack the description's bottom margin is unnecessary because
   the stack itself sits above the CTAs with its own spacing rhythm. */
.hero-text-set .hero-desc {
  margin-bottom: 0;
}

.hero-text-stack {
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--green-900);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" 380;
  margin-bottom: 22px;
}

.hero-title em {
  font-style: italic;
  color: var(--green-700);
  font-variation-settings: "opsz" 144, "wght" 380;
}

.hero-desc {
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-meta {
  list-style: none;
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
  padding-top: 22px;
  max-width: 540px;
}

.hero-meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-num {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--green-900);
  line-height: 1;
  font-variation-settings: "opsz" 100, "wght" 420;
}

.meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--cream-deep);
}

/* Cream gradient scrim — gives the left-side text a soft backdrop while
   keeping the right side of the image crisp. Stops are in absolute pixels
   (not %) so the fade is confined to the leftmost ~760px regardless of
   viewport width — past that point the image is fully unobscured. */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(251, 247, 238, 0.96) 0,
    rgba(251, 247, 238, 0.93) 440px,
    rgba(251, 247, 238, 0.45) 620px,
    rgba(251, 247, 238, 0) 760px
  );
  z-index: 3;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 1;
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.hero-stamp {
  position: absolute;
  bottom: 48px;
  right: 48px;
  background: #000;
  color: #fff;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  z-index: 4;
  border: 1px solid #fff;
  box-shadow: 0 6px 22px rgba(45, 30, 20, 0.18);
  animation: stamp-float 6s ease-in-out infinite;
}

@keyframes stamp-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.3s ease; }
  .hero-stamp { animation: none; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
  background: var(--apricot);
  padding: 22px var(--section-px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--rust-deep);
}

.trust-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--rust-deep);
  color: var(--rust-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust-deep);
  line-height: 1.3;
  white-space: nowrap;
}

.trust-divider {
  width: 1px;
  height: 40px;
  background: rgba(110, 58, 31, 0.25);
  flex-shrink: 0;
}

.trust-icon {
  color: var(--clay);
  font-size: 11px;
}

@media (max-width: 860px) {
  .trust-divider { display: none; }
  .trust-label { max-width: none; }
}

/* ============================================================
   PERFORMANCE — content-visibility
   Sections below the first viewport are skipped by the browser's
   paint engine until they near the viewport. This is the single
   biggest lever for Speed Index on image-heavy pages.
   contain-intrinsic-size gives the browser a size estimate so
   the scrollbar doesn't jump when sections render.
   ============================================================ */
.press-section,
.products-section,
.story-section,
.process-section,
.promo-section,
.testimonials-section,
.faq-section,
.newsletter-section {
  content-visibility: auto;
}
.press-section       { contain-intrinsic-size: 0 420px; }
.products-section    { contain-intrinsic-size: 0 960px; }
.story-section       { contain-intrinsic-size: 0 720px; }
.process-section     { contain-intrinsic-size: 0 840px; }
.promo-section       { contain-intrinsic-size: 0 640px; }
.testimonials-section{ contain-intrinsic-size: 0 720px; }
.faq-section         { contain-intrinsic-size: 0 820px; }
.newsletter-section  { contain-intrinsic-size: 0 420px; }

/* ============================================================
   PRESS MARQUEE ("As seen in")
   ============================================================ */
.press-section {
  background: var(--green-800);
  position: relative;
  padding: 130px 0 110px;
  text-align: center;
  overflow: hidden;
}

.press-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 70px;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* Top wave dips down into the press section from the trust-strip (apricot).
   The bottom edge of the press section is intentionally a straight line — no
   wave on the bottom — so the rust band ends cleanly into the products section. */
.press-wave--top path {
  fill: var(--apricot);
}

.press-wave--top {
  top: -1px;
}

.press-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 70px;
  font-variation-settings: "opsz" 144, "wght" 420;
  position: relative;
  z-index: 1;
}

.press-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.press-track {
  display: inline-flex;
  align-items: center;
  animation: press-scroll 38s linear infinite;
}

.press-track > .press-logo {
  margin-right: clamp(56px, 7vw, 110px);
}

.press-marquee:hover .press-track {
  animation-play-state: paused;
}

@keyframes press-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each logo sits on a soft cream pill so the partner brand colors are isolated
   from the terracotta marquee background and read cleanly regardless of hue. */
.press-logo {
  background: var(--cream);
  padding: 14px 24px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(45, 30, 20, 0.06);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.press-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(45, 30, 20, 0.14);
}

/* Partner logo images — sized to a consistent visual height so the four
   brands line up nicely in the scrolling marquee. Each logo has different
   intrinsic proportions, so per-brand heights are nudged for visual balance. */
.press-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.press-logo--bigbasket img { height: 40px; }
.press-logo--blinkit   img { height: 36px; }
.press-logo--instamart img { height: 44px; }
.press-logo--zepto     img { height: 38px; }

@media (max-width: 860px) {
  .press-section { padding: 90px 0 80px; }
  .press-wave { height: 50px; }
  .press-title { margin-bottom: 48px; }
  .press-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .press-track { animation-duration: 28s; }
  .press-track > .press-logo { margin-right: 56px; }

  .press-logo               { padding: 10px 18px; }
  .press-logo img            { height: 28px; }
  .press-logo--bigbasket img { height: 30px; }
  .press-logo--blinkit   img { height: 26px; }
  .press-logo--instamart img { height: 32px; }
  .press-logo--zepto     img { height: 28px; }
}

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.products-section .eyebrow { font-size: 16px; font-weight: 600; }

.products-section {
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}

/* Carousel viewport — masks overflow so cards beyond the visible window
   are hidden until the track is translated to reveal them. */
.products-viewport {
  overflow: hidden;
  width: 100%;
}

.products-grid {
  display: flex;
  gap: 28px;
  transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}

/* Each card takes 1/4 of viewport minus 3 gaps — 4 cards visible on desktop. */
.products-grid > .product-card {
  flex: 0 0 calc((100% - (28px * 3)) / 4);
  min-width: 0;
}

/* Section header right side: link + carousel arrows */
.products-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.products-arrows {
  display: inline-flex;
  gap: 10px;
}

.products-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--green-900);
  background: transparent;
  color: var(--green-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), opacity var(--t-base);
}

.products-arrow:hover:not(:disabled) {
  background: var(--green-900);
  color: var(--cream);
}

.products-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.products-arrow svg { display: block; }

.product-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.product-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1.15;
  background: var(--cream-deep);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.7,.3,1);
}

.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.product-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--cream);
  color: var(--green-900);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  font-weight: 500;
  z-index: 2;
  border: 1px solid var(--border);
}

.product-tag--alt {
  background: var(--green-900);
  color: var(--cream);
  border-color: var(--green-900);
}

.product-quick {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 13px 16px;
  background: var(--cream);
  color: var(--green-900);
  border: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 100px;
  text-decoration: none;
  /* Centre the "View Product" text horizontally + vertically inside the pill. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), background var(--t-base), color var(--t-base);
  z-index: 2;
}

.product-card:hover .product-quick {
  opacity: 1;
  transform: translateY(0);
}

.product-quick:hover {
  background: var(--green-900);
  color: var(--cream);
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}

.product-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--green-900);
  line-height: 1.25;
  font-variation-settings: "opsz" 100, "wght" 440;
}

/* Small supplementary note inside a product-name (e.g. "— Pack of 12"). */
.product-name-note {
  color: var(--ink-muted);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}

.product-sub {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.product-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--clay);
  margin-top: 6px;
  font-variation-settings: "opsz" 100, "wght" 420;
}

/* ============================================================
   PRODUCT DETAIL PAGE (product.html)
   ============================================================ */
.product-detail {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) var(--section-px) clamp(80px, 9vw, 130px);
}

.product-detail__breadcrumb {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-detail__breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-base);
}

.product-detail__breadcrumb a:hover {
  color: var(--clay);
}

.product-detail__breadcrumb-current {
  color: var(--green-900);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* ── Gallery ── */
.product-detail__gallery {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.product-detail__main {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--cream-deep);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.product-detail__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.product-detail__thumb {
  background: var(--cream-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1/1;
  transition: border-color var(--t-base), transform var(--t-base);
}

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

.product-detail__thumb:hover {
  transform: translateY(-2px);
}

.product-detail__thumb.is-active {
  border-color: var(--green-900);
}

/* ── Info column ── */
.product-detail__info {
  padding-top: 8px;
}

.product-detail__info .eyebrow {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.product-detail__tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--green-900);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.14em;
}

.product-detail__name {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--green-900);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" 420;
  margin-bottom: 14px;
}

.product-detail__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 26px;
  font-variation-settings: "opsz" 100, "wght" 420;
}

.product-detail__price {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--clay);
  font-style: normal;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.product-detail__description {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-bottom: 32px;
}

.product-detail__description p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

.product-detail__description p:last-child { margin-bottom: 0; }

/* ── Quantity ── */
.product-detail__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 24px;
}

.product-detail__qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--green-900);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50%;
  transition: background var(--t-base);
}

.product-detail__qty-btn:hover {
  background: var(--cream-deep);
}

.product-detail__qty-input {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--green-900);
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
}

.product-detail__qty-input::-webkit-outer-spin-button,
.product-detail__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Actions ── */
.product-detail__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* ── Meta list (ingredients, shelf life, etc.) ── */
.product-detail__meta {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px 20px;
}

.product-detail__meta dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  align-self: start;
  padding-top: 2px;
}

.product-detail__meta dd {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

/* ── 404 / Not found fallback ── */
.product-detail__not-found {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0;
}

.product-detail__not-found .eyebrow { margin-bottom: 14px; }

.product-detail__not-found .product-detail__name {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 14px;
}

.product-detail__not-found p {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 28px;
  line-height: 1.7;
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .product-detail__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .product-detail__gallery {
    position: static;
  }
  .product-detail__breadcrumb { margin-bottom: 24px; }
  .product-detail__thumbs { gap: 8px; }
  .product-detail__name { font-size: clamp(30px, 8vw, 40px); }
  .product-detail__meta {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .product-detail__meta dt { padding-top: 14px; }
  .product-detail__meta dt:first-child { padding-top: 0; }
}

/* ============================================================
   STORY / ABOUT
   ============================================================ */
.story-section .eyebrow { font-size: 16px; font-weight: 600; }

#about-heading em { color: var(--clay); }

.story-section {
  background: var(--vanilla);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.story-images {
  position: relative;
  aspect-ratio: 4/5;
}

.story-img-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.story-img-accent {
  position: absolute;
  bottom: -36px;
  right: -36px;
  width: 46%;
  aspect-ratio: 1/1.2;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 8px solid var(--cream);
  box-shadow: 0 12px 40px rgba(74, 44, 29, 0.12);
}

.story-content {
  padding-right: clamp(0px, 3vw, 40px);
}

.story-lead {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--green-800);
  line-height: 1.65;
  margin: 32px 0 24px;
}

.story-content > p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-bottom: 18px;
  max-width: 520px;
}

/* Short bulleted highlights inside the landing-page Our Story section.
   Uses the ✦ accent character (same as the eyebrows) for the bullet. */
.story-highlights {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}

.story-highlights li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.story-highlights li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clay);
  font-size: 11px;
  line-height: 1.7;
}

.story-signature {
  margin: 32px 0 36px;
  padding-left: 18px;
  border-left: 2px solid var(--clay);
}

.signature-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--green-900);
  font-variation-settings: "opsz" 100, "wght" 420;
}

.signature-role {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ============================================================
   DEDICATED OUR STORY PAGE (story.html)
   ============================================================ */

/* ── Intro ── */
.story-page-intro {
  background: var(--green-800);
  position: relative;
  overflow: hidden;
  padding: 0 0 110px;
}

.story-intro-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(52px, 6vw, 96px) var(--section-px) clamp(60px, 6vw, 88px);
}

.story-intro-breadcrumb a,
.story-intro-breadcrumb span {
  color: rgba(255,255,255,0.55) !important;
}

.story-intro-breadcrumb .product-detail__breadcrumb-current {
  color: rgba(255,255,255,0.85) !important;
}

.story-page-intro .eyebrow {
  color: var(--gold) !important;
}

.story-page-intro .eyebrow::before {
  color: var(--gold);
}

/* Decorative sparkles */
.story-intro-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.story-intro-spark {
  position: absolute;
  display: inline-block;
  animation: process-spark-float 7s ease-in-out infinite;
}

.story-intro-spark--1 { top: 12%; left:  5%; font-size: 28px; color: var(--gold);             opacity: 0.45; animation-delay: 0s;   }
.story-intro-spark--2 { top: 18%; right: 8%; font-size: 40px; color: var(--clay-soft);        opacity: 0.35; animation-delay: 1.2s; }
.story-intro-spark--3 { bottom: 28%; left: 22%; font-size: 20px; color: var(--flavor-mango);  opacity: 0.4;  animation-delay: 2.5s; }
.story-intro-spark--4 { bottom: 20%; right: 16%; font-size: 32px; color: var(--gold);         opacity: 0.3;  animation-delay: 3.8s; }
.story-intro-spark--5 { top: 50%; left: 50%; font-size: 18px; color: var(--flavor-strawberry); opacity: 0.3; animation-delay: 1.8s; }

/* Bottom wave */
.story-intro-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 110px;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.story-intro-wave path {
  fill: var(--cream-soft);
}

.story-page-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" 420;
  margin-bottom: 28px;
  max-width: 900px;
}

.story-page-title em {
  font-style: italic;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "wght" 420;
}

.story-page-lead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.75;
  color: rgba(255,255,255,0.8);
  max-width: 760px;
  font-variation-settings: "opsz" 100, "wght" 420;
}

/* ── Pillars (Who we serve / What we offer) ── */
.story-page-pillars {
  background: var(--cream-soft);
  margin-top: 0;
  padding: clamp(60px, 6vw, 96px) var(--section-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1400px;
  margin: 0 auto;
}

.story-page-pillar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 20px rgba(45, 30, 20, 0.05);
}

.story-page-pillar .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clay);
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--apricot);
  display: block;
  width: 100%;
}

.story-page-pillar .eyebrow::before {
  color: var(--clay);
}

.story-page-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story-page-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.story-page-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clay);
  font-size: 12px;
  line-height: 1.65;
}

/* ── Two-column blocks (Why We Started / What Makes Us Different) ── */
.story-page-block {
  background: var(--cream);
  padding: clamp(60px, 6vw, 96px) var(--section-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.story-page-block--reverse .story-page-block__text { order: 2; }
.story-page-block--reverse .story-page-block__image { order: 1; }

.story-page-block__text .eyebrow {
  margin-bottom: 16px;
}

.story-page-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--green-900);
  font-weight: 400;
  font-variation-settings: "opsz" 100, "wght" 440;
  margin-bottom: 22px;
}

.story-page-block__text p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.story-page-block__text p:last-child {
  margin-bottom: 0;
}

.story-page-block__image {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--cream-deep);
}

.story-page-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── "Our Goal" callout inside the Why We Started block ── */
.story-page-goal {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--apricot);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--clay);
}

.story-page-goal__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: 6px;
}

.story-page-goal__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--green-900);
  line-height: 1.55;
  font-variation-settings: "opsz" 100, "wght" 420;
  margin: 0 !important;
}

/* ── Bottom CTA ── */
.story-page-cta {
  background: var(--vanilla);
  padding: clamp(72px, 7vw, 112px) var(--section-px);
  text-align: center;
}

.story-page-cta .eyebrow {
  margin-bottom: 14px;
}

.story-page-cta .section-title {
  margin: 0 auto 32px;
  max-width: 820px;
}

.story-page-cta__actions {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .story-intro-content { padding-left: 22px; padding-right: 22px; }
  .story-intro-wave { height: 60px; }
  .story-page-intro { padding-bottom: 60px; }
  .story-page-pillars,
  .story-page-block,
  .story-page-cta { padding-left: 22px; padding-right: 22px; }

  .story-page-pillars { grid-template-columns: 1fr; gap: 40px; }

  .story-page-block { grid-template-columns: 1fr; gap: 32px; }
  .story-page-block--reverse .story-page-block__text { order: 2; }
  .story-page-block--reverse .story-page-block__image { order: 1; }
  .story-page-block__image { aspect-ratio: 4/3; }

  .story-page-cta__actions { flex-direction: column; gap: 16px; }
}

/* ============================================================
   PROCESS — light variant (warm beige bg with dark text)
   ============================================================ */
.process-section {
  background: var(--green-800);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--section-py) + 60px);
  padding-bottom: calc(var(--section-py) + 60px);
}

.process-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.process-wave--top {
  top: -1px;
}

.process-wave--top path {
  fill: var(--vanilla);
}

.process-wave--bottom {
  bottom: -1px;
}

.process-wave--bottom path {
  fill: var(--vanilla);
}

.process-section .eyebrow { color: var(--gold); letter-spacing: 0.18em; font-size: 16px; font-weight: 600; }
.process-section .eyebrow::before { color: var(--gold); }

.process-section .section-title { color: #fff; font-size: clamp(32px, 4vw, 52px); }
.process-section .section-title em { color: var(--gold); }

/* ── Ambient floating sparkles ── */
.process-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.process-spark {
  position: absolute;
  line-height: 1;
  display: inline-block;
  animation: process-spark-float 7s ease-in-out infinite;
}

.process-spark--1 { top:  9%; left:  6%; font-size: 30px; animation-delay: 0s;   color: var(--flavor-pistachio); opacity: 0.55; }
.process-spark--2 { top: 20%; right: 7%; font-size: 38px; animation-delay: 1.4s; color: var(--flavor-mango);     opacity: 0.55; }
.process-spark--3 { bottom: 14%; left: 16%; font-size: 24px; animation-delay: 2.8s; color: var(--flavor-strawberry); opacity: 0.5; }
.process-spark--4 { bottom: 22%; right: 12%; font-size: 32px; animation-delay: 4.2s; color: var(--flavor-orange); opacity: 0.5; }
.process-spark--5 { top: 48%; left: 47%; font-size: 20px; animation-delay: 1.8s; color: var(--gold); opacity: 0.4; }

@keyframes process-spark-float {
  0%, 100% { transform: translateY(0)     rotate(0deg);  }
  50%       { transform: translateY(-16px) rotate(30deg); }
}

@media (prefers-reduced-motion: reduce) {
  .process-spark { animation: none; }
}

/* Keep grid above the deco layer */
.section-head--center,
.process-grid {
  position: relative;
  z-index: 1;
}

/* ── Grid ── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 24px;
}

/* ── Dark glass cards ── */
.process-step {
  position: relative;
  padding: 40px 30px 36px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transition:
    background  0.35s ease,
    border-color 0.35s ease,
    transform   0.45s cubic-bezier(.2,.7,.3,1),
    box-shadow  0.45s cubic-bezier(.2,.7,.3,1);
  --step-color: #FFD166;
}

/* Bright top accent bar */
.process-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: var(--step-color);
  transition: height 0.3s ease;
}

/* Bright vivid step colors — override muted brand tokens for dark bg */
.process-step:nth-child(1) { --step-color: #B8E05A; } /* bright lime — pistachio  */
.process-step:nth-child(2) { --step-color: #FFD166; } /* bright amber — mango     */
.process-step:nth-child(3) { --step-color: #FF7096; } /* bright coral — strawberry */
.process-step:nth-child(4) { --step-color: #FFB060; } /* bright orange — coffee   */

/* Dashed connector between cards */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 62px;
  right: -20px;
  width: 24px;
  height: 2px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.5) 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  z-index: 2;
}

/* Hover: lift + coloured glow */
.process-step:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: var(--step-color);
  transform: translateY(-10px);
  box-shadow:
    0 28px 52px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px var(--step-color),
    0 0 40px -6px var(--step-color);
}

.process-step:hover::before {
  height: 6px;
}

/* ── Step head ── */
.process-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

/* Icon circle */
.process-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(.2,.7,.3,1);
}

.process-step:hover .process-icon-wrap {
  background: var(--step-color);
  border-color: var(--step-color);
  transform: rotate(12deg) scale(1.15);
}

/* Number */
.process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 68px;
  color: var(--step-color);
  line-height: 1;
  font-variation-settings: "opsz" 100, "wght" 380;
  display: inline-block;
  margin: 0;
  filter: drop-shadow(0 0 10px var(--step-color));
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}

.process-step:hover .process-num {
  transform: scale(1.14) rotate(-5deg);
}

/* Icon */
.process-icon {
  width: 26px;
  height: 26px;
  color: #fff;
  opacity: 1;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.process-step:hover .process-icon {
  color: #1a1a1a;
}

/* Title */
.process-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 100, "wght" 500;
  position: relative;
  display: inline-block;
  letter-spacing: 0.01em;
}

.process-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--step-color);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(.2,.7,.3,1);
}

.process-step:hover .process-title::after {
  width: 100%;
}

/* Body text */
.process-step p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

/* ============================================================
   SIGNATURE PROMO
   ============================================================ */
.promo-section {
  background: var(--cream);
  padding: var(--section-py) var(--section-px);
}

.promo-inner {
  background: var(--apricot);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--border-soft);
}

.promo-image {
  aspect-ratio: 4/3.5;
  overflow: hidden;
  background: var(--cream-deep);
}

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

.promo-content {
  padding: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.promo-content p {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 18px 0 32px;
  max-width: 460px;
}

.promo-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   TESTIMONIALS — Google Reviews carousel
   ============================================================ */
.testimonials-section {
  background: var(--vanilla);
  padding: var(--section-py) var(--section-px);
}

/* ── Centred header ── */
.testi-header {
  text-align: center;
  margin-bottom: 40px;
}

.testi-header .eyebrow { justify-content: center; }
.testi-header .section-title { margin-top: 10px; }

/* ── Google Reviews bar — flat single-level flex ──
   All items are direct children. No nested gbar-left/gbar-score
   so there's no way for inner flex containers to silently fail. */
.testi-gbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: #ffffff;
  border: 1.5px solid rgba(45,30,20,0.12);
  border-radius: 16px;
  padding: 16px 24px;
  max-width: 880px;
  margin: 0 auto 48px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* "Google Reviews" text label */
.testi-gbar-label {
  font-size: 15px;
  font-weight: 600;
  color: #3c4043;
  white-space: nowrap;
  margin-right: 4px;
}

/* Visual separator between label and rating */
.testi-gbar-sep {
  width: 1px;
  height: 22px;
  background: var(--border-soft);
  flex-shrink: 0;
  align-self: center;
}

/* Large rating number */
.testi-rating-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--green-900);
  line-height: 1;
}

/* Star glyphs */
.testi-rating-stars {
  color: #fbbc04;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

/* Review count */
.testi-rating-count {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Pushes the button to the far right */
.testi-gbar-spacer {
  flex: 1;
  min-width: 16px;
}

/* "Review us on Google" blue pill button */
.testi-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a73e8;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-base), box-shadow var(--t-base);
  box-shadow: 0 2px 10px rgba(26,115,232,0.25);
}

.testi-review-btn:hover {
  background: #1557b0;
  box-shadow: 0 4px 16px rgba(26,115,232,0.35);
}

/* ── Carousel outer wrapper (arrows + scroller) ── */
.testi-carousel-outer {
  display: flex;
  flex-direction: row;          /* explicit — never rely on browser default */
  align-items: center;
  gap: 12px;
  max-width: 1140px;
  margin: 0 auto;
}

/* ── Scroller: the flex container AND the overflow container.
   Cards are direct children, so their % flex-basis resolves
   against this element's computed width (set by flex: 1 above).
   We use CSS scroll-snap so the carousel works without JS too. ── */
.testi-scroller {
  display: flex;
  flex-direction: row;          /* explicit — cards must be horizontal */
  flex-wrap: nowrap;            /* explicit — cards must NOT wrap to next line */
  flex: 1;
  min-width: 0;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;           /* prevent vertical growth if cards mis-stack */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
  position: relative;          /* makes offsetLeft on child cards resolve to scroller */
}
.testi-scroller::-webkit-scrollbar { display: none; }

/* ── Individual card ──
   % flex-basis resolves against .testi-scroller (which has
   explicit width via flex: 1) → correct 1/3, 1/2, or 100% width. ── */
.testi-card {
  flex: 0 0 calc(33.333% - 14px);   /* desktop: 3 per view, 2 gaps ÷ 3 */
  scroll-snap-align: start;
  min-width: 260px;
  max-width: 420px;                  /* safety cap so cards never bloat */
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1.5px solid rgba(45,30,20,0.10);
  box-shadow: 0 4px 20px rgba(45,30,20,0.09);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin: 0;                         /* override any browser blockquote margin */
}

/* ── Card top: avatar + name/time meta ── */
.testi-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.testi-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--clay), var(--gold));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(201,116,65,0.3);
}

.testi-card-meta {
  flex: 1;
  min-width: 0;
}

/* Row: name + verified ✓ + Google G */
.testi-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.testi-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-900);
  line-height: 1.3;
}

/* Icon SVGs — CSS size as belt-and-suspenders alongside HTML width/height attrs */
.testi-verified-icon,
.testi-g-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

.testi-time {
  font-size: 12px;
  color: #9aa0a6;
  margin-top: 2px;
  display: block;
}

/* ── Stars ── */
.testi-stars {
  color: #fbbc04;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
}

/* ── Review text ── */
.testi-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  flex: 1;
  /* 5-line clamp so cards stay equal height */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Nav arrow buttons ── */
.testi-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  background: #fff;
  color: var(--green-900);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.testi-nav:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}

.testi-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Dot indicators ── */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-soft);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}

.testi-dot.is-active {
  background: var(--clay);
  transform: scale(1.35);
}

/* ============================================================
   FAQ ACCORDION
   Sits between Testimonials (vanilla) and Contact (cream).
   Uses apricot background with white cards — mirrors the
   testimonials card pattern for visual consistency.
   ============================================================ */

.faq-section {
  background: var(--apricot);
  padding: var(--section-py) var(--section-px);
}

.faq-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Section header — mirrors .testi-header ── */
.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-header .eyebrow {
  display: inline-flex;
  justify-content: center;
}

.faq-header .section-title { margin-top: 10px; }

.faq-subhead {
  margin-top: 16px;
  font-size: 15px;
  color: var(--rust-deep);
  opacity: 0.7;
}

.faq-subhead a {
  color: var(--clay);
  font-weight: 600;
  opacity: 1;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 116, 65, 0.45);
  transition: opacity var(--t-base), border-color var(--t-base);
}

.faq-subhead a:hover { border-bottom-color: var(--clay); opacity: 0.8; }

/* ── Two-column card grid ── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Individual card — same spec as .testi-card-main ── */
.faq-item {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 20px rgba(45, 30, 20, 0.06);
  overflow: hidden;
  position: relative;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

/* Clay-gold gradient top bar — identical to .testi-card-main::before,
   hidden by default and revealed when the card is open (.is-open class
   toggled by JS) or on hover. */
.faq-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--clay), var(--gold), var(--clay));
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity var(--t-base);
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(45, 30, 20, 0.11);
}

.faq-item:hover::before,
.faq-item.is-open::before {
  opacity: 1;
}

.faq-item.is-open {
  border-color: rgba(201, 116, 65, 0.22);
  box-shadow: 0 8px 32px rgba(201, 116, 65, 0.13);
}

/* ── Question button ── */
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--green-900);
  text-align: left;
  line-height: 1.5;
  transition: color var(--t-base);
  -webkit-tap-highlight-color: transparent;
}

.faq-q:hover               { color: var(--clay); }
.faq-item.is-open .faq-q  { color: var(--clay); }

/* ── Plus / close icon — rotates 45° (+ → ×) when open ── */
.faq-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-900);
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

.faq-q:hover .faq-icon {
  background: var(--apricot);
  border-color: var(--clay);
  color: var(--clay);
}

.faq-item.is-open .faq-icon {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
  transform: rotate(45deg);  /* + becomes × */
}

/* Both SVG lines stay put — the whole icon rotates */
.faq-icon-h { display: block; }

/* ── Answer panel — animated with JS-set max-height ── */
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s cubic-bezier(.2, .7, .3, 1);
}

.faq-a[aria-hidden="false"] { max-height: 600px; }

/* Warm answer area */
.faq-a-inner {
  padding: 0 26px 24px;
  border-top: 1px solid var(--border-soft);
}

.faq-a p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  padding-top: 18px;
  margin: 0;
}

.faq-a a {
  color: var(--clay);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 116, 65, 0.35);
  transition: border-color var(--t-base);
}

.faq-a a:hover { border-bottom-color: var(--clay); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .faq-section  { padding: var(--section-py) 20px; }
  .faq-header   { margin-bottom: 40px; }
  .faq-col      { gap: 12px; }
  .faq-q        { font-size: 14.5px; padding: 20px 20px; }
  .faq-a-inner  { padding: 0 20px 20px; }
  .faq-item     { border-radius: 16px; }
  .faq-item::before { border-radius: 16px 16px 0 0; }
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-section {
  background: var(--cream);
  padding: var(--section-py) var(--section-px);
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  background: var(--navy);
  color: var(--cream);
  padding: clamp(48px, 6vw, 80px);
  border-radius: var(--radius-lg);
}

.newsletter-inner .eyebrow { color: var(--green-300); }

#contact-heading {
  font-size: clamp(26px, 3vw, 44px);
  white-space: nowrap;
}
.newsletter-inner .eyebrow::before { color: var(--clay-soft); }
.newsletter-inner .section-title { color: var(--cream); }
.newsletter-inner .section-title em { color: var(--clay-soft); }

.newsletter-inner > div > p {
  color: var(--green-100);
  font-size: 15.5px;
  max-width: 560px;
  margin-top: 18px;
}

.contact-details {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  font-size: 14px;
  color: var(--cream);
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(253, 251, 246, 0.16);
}

.contact-key {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  min-width: 60px;
  font-weight: 500;
}

.contact-item a {
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-base);
}

.contact-item a:hover { color: var(--clay-soft); }

.newsletter-form {
  display: flex;
  gap: 10px;
  background: var(--cream);
  border-radius: 100px;
  padding: 6px 6px 6px 22px;
  align-items: center;
}

.newsletter-input {
  flex: 1;
  padding: 14px 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--green-900);
  outline: none;
}

.newsletter-input::placeholder { color: var(--ink-muted); }

.newsletter-form .btn-primary {
  padding: 13px 26px;
  font-size: 12px;
  border-radius: 100px;
}

.newsletter-note {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--green-300);
  margin-top: 14px;
  text-align: center;
}

/* ── QR CODES (Google Review) ── */
.qr-codes-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 420px;
}

.qr-code-img {
  width: 220px;
  height: 220px;
  border-radius: 20px;
  border: 5px solid var(--clay-soft);
  background: #fff;
  padding: 10px;
  object-fit: contain;
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qr-code-img:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(0,0,0,0.2);
}

.qr-code-note {
  font-size: 16px;
  font-weight: 500;
  color: var(--green-100);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ============================================================
   FOOTER — deep cocoa with a wavy cream edge at the top
   (matches the press marquee's wave pattern).
   ============================================================ */
footer {
  background: var(--cocoa);
  color: var(--cream);
  padding: 140px var(--section-px) 36px;
  border-top: none;
  position: relative;
  overflow: hidden;
}

/* The wave SVG sits at the very top of the footer. Its path is filled with
   the cream color of the section above, so visually the cream area "dips
   down" into the cocoa footer in a wavy edge — identical pattern to the
   press marquee's wave dividers. */
.footer-wave {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.footer-wave path {
  fill: var(--cream);
}

/* Story page — wave fills with vanilla to match the CTA section above */
.page-story .footer-wave path {
  fill: var(--vanilla);
}

.footer-top {
  display: grid;
  /* Brand block on the left + two curated menu columns on the right
     (Shop / Company). Support column was removed since its items were
     all placeholder links. */
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(251, 247, 238, 0.10);
}

.footer-brand .logo-main {
  font-size: 26px;
  color: var(--cream);
}

.footer-brand .logo-sub {
  color: rgba(251, 247, 238, 0.55);
  margin-bottom: 18px;
  display: inline-block;
}

.footer-blurb {
  font-size: 14.5px;
  color: rgba(251, 247, 238, 0.72);
  max-width: 320px;
  line-height: 1.65;
  margin-top: 10px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(251, 247, 238, 0.22);
  color: var(--cream);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.footer-social a:hover {
  background: var(--cream);
  color: var(--cocoa);
  border-color: var(--cream);
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
  font-variation-settings: "opsz" 100, "wght" 500;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(251, 247, 238, 0.70);
  text-decoration: none;
  transition: color var(--t-base);
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(251, 247, 238, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-legal {
  display: flex;
  gap: 22px;
}

.footer-legal a {
  color: rgba(251, 247, 238, 0.5);
  text-decoration: none;
  transition: color var(--t-base);
}

.footer-legal a:hover { color: var(--cream); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav-links { gap: 26px; }
  /* Tablet: show 2 cards at a time in the carousel viewport. */
  .products-grid { gap: 24px; }
  .products-grid > .product-card { flex: 0 0 calc((100% - 24px) / 2); }
  .process-grid { grid-template-columns: 1fr 1fr; }
  /* On a 2-column wrap, the dashed connector after the 2nd card would
     point into empty space — hide all of them at this breakpoint. */
  .process-step:not(:last-child)::after { display: none; }
  /* Carousel: 2 cards per view on tablets */
  .testi-card { flex: 0 0 calc(50% - 10px); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .announce { font-size: 11px; gap: 12px; padding: 9px 16px; }
  .announce-sep { display: none; }

  #mainNav { background: var(--cream); }
  .nav-inner { padding: 0 22px; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    padding: 8px 22px 20px;
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links .nav-item { border-bottom: 1px solid var(--border-soft); display: block; }
  .nav-links .nav-item:last-child { border-bottom: none; }
  .nav-link,
  .nav-toggle { display: flex; padding: 16px 0; font-size: 14px; width: 100%; justify-content: space-between; }
  .nav-link::after,
  .nav-toggle::after { display: none; }
  .hamburger { display: inline-flex; }

  /* Mobile mega menu — collapses inline within the drawer instead of opening
     as a full-width absolutely-positioned panel. */
  .mega-menu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    pointer-events: auto;
    z-index: auto;
  }
  .nav-item--has-dropdown.is-open .mega-menu { max-height: 800px; }
  .mega-menu__container {
    grid-template-columns: 1fr;
    padding: 4px 0 16px;
    gap: 20px;
    max-width: 100%;
  }
  .mega-menu__promo { display: none; }
  .mega-menu__heading { font-size: 18px; margin-bottom: 10px; }
  .mega-menu__list a { font-size: 14px; padding: 4px 0; display: block; }

  /* Mobile hero: revert to stacked layout for legibility — image card on top,
     content below in cream — instead of overlaying text on the image. */
  .hero { overflow: visible; }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero-content {
    order: 2;
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 48px 22px 56px;
    background: var(--cream);
  }
  .hero-image {
    order: 1;
    position: relative;
    inset: auto;
    z-index: 0;
    min-height: 0;
    /* Match source images (3:2) so most slides fit without letterbox bars. */
    aspect-ratio: 3/2;
    background: var(--cream);
  }
  /* Show the full image on mobile — no cropping. Letterbox bars (if any)
     use the cream background of .hero-image so they blend with the page. */
  .hero-slide {
    object-fit: contain;
    object-position: center;
  }
  .hero-image::after { display: none; }
  .hero-title { font-size: clamp(40px, 11vw, 60px); }
  .hero-meta { gap: 24px; padding-top: 24px; }
  .hero-stamp { width: 90px; height: 90px; font-size: 13px; bottom: 24px; right: 24px; left: auto; }

  .trust-strip { gap: 14px; padding: 18px 22px; }
  .trust-item { font-size: 11.5px; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .reviews-badge { align-items: flex-start; }

  .products-grid { gap: 18px; }
  .products-grid > .product-card { flex: 0 0 calc((100% - 18px) / 2); }
  .products-arrow { width: 38px; height: 38px; }

  .story-section { grid-template-columns: 1fr; gap: 40px; padding: var(--section-py) 22px; }
  .story-img-accent { display: none; }

  .process-section { padding: calc(var(--section-py) + 50px) 22px; }
  .process-wave { height: 50px; }
  .process-grid { grid-template-columns: 1fr; gap: 18px; }
  .process-step { padding: 28px 22px; }
  .process-num { font-size: 44px; }
  .process-icon { width: 26px; height: 26px; margin-top: 8px; }
  /* Slightly less dramatic hover lift on mobile (no tilt — feels off on
     small screens where cards are full-width). */
  .process-step:hover { transform: translateY(-4px); }
  /* Fewer ambient sparkles on small screens to keep the section uncluttered. */
  .process-spark--4,
  .process-spark--5 { display: none; }

  .promo-inner { grid-template-columns: 1fr; }
  .promo-image { aspect-ratio: 16/10; }
  .promo-content { padding: 36px 28px; }

  .testi-gbar { padding: 14px 18px; gap: 8px 10px; }
  .testi-gbar-spacer { display: none; }
  .testi-review-btn { width: 100%; justify-content: center; }
  /* Carousel: 1 card per view on mobile */
  .testi-card { flex: 0 0 100%; min-width: 0; }
  .testi-nav { width: 36px; height: 36px; font-size: 15px; }

  .newsletter-inner { grid-template-columns: 1fr; padding: 40px 28px; }
  .newsletter-form { flex-direction: column; padding: 14px; border-radius: var(--radius-md); align-items: stretch; }
  .newsletter-input { padding: 12px 14px; }
  .newsletter-form .btn-primary { padding: 14px 20px; }
  .newsletter-note { text-align: left; }

  footer { padding: 100px 22px 28px; }
  .footer-wave { height: 50px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Very small screens (≤480px) ── */
@media (max-width: 480px) {
  :root {
    --section-py: clamp(56px, 12vw, 80px);
    --section-px: 18px;
  }

  /* Nav */
  .nav-inner { padding: 0 16px; }
  .nav-order-btn { padding: 9px 16px; font-size: 13px; }
  .logo-img { height: 52px; }

  /* Trust strip — single column on tiny screens */
  .trust-strip { flex-wrap: wrap; gap: 12px 20px; justify-content: center; padding: 18px 16px; }
  .trust-divider { display: none; }
  .trust-item { font-size: 11px; }

  /* Hero */
  .hero-title { font-size: clamp(34px, 10vw, 48px); }
  .hero-lead { font-size: 15px; }
  .hero-content { padding: 36px 16px 48px; }

  /* Products */
  .products-grid > .product-card { flex: 0 0 100%; }

  /* Story */
  .story-section { padding: var(--section-py) 16px; }
  .story-lead { font-size: 16px; }

  /* Testimonials */
  .testi-gbar { padding: 16px; }
  .testi-rating-num { font-size: 22px; }
  .testi-rating-stars { font-size: 15px; }
  .testi-card { padding: 20px 16px; }
  .testi-text { font-size: 14px; }

  /* Contact / newsletter */
  .newsletter-inner { padding: 32px 20px; }
  #contact-heading { font-size: clamp(22px, 7vw, 32px); white-space: normal; }

  /* Footer */
  .footer-bottom { gap: 16px; }
  .footer-legal { flex-direction: column; gap: 10px; }

  /* WhatsApp button — smaller on very small screens */
  .whatsapp-float { width: 52px; height: 52px; right: 16px; }
  .whatsapp-float::before { display: none; }
}

/* ── Landscape phone — prevent overflow on rotated view ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero-grid { min-height: 0; }
  .hero-content { padding: 32px 22px; }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   Fixed to bottom-right. Hidden at page-top (opacity 0 +
   translateY); slides in once .is-visible is added by JS
   after the first scroll event fires.
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  /* Respect iOS home-bar / Android nav bar */
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  /* Hidden state — JS adds .is-visible on first scroll */
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}

.whatsapp-float.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.whatsapp-float:hover {
  background: #1aad54;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.65);
  transform: translateY(-4px) scale(1.08);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #fff;
  display: block;
  flex-shrink: 0;
}

/* "Chat with us" tooltip — appears on hover, left of the button */
.whatsapp-float::before {
  content: "Chat with us";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.whatsapp-float.is-visible:hover::before {
  opacity: 1;
}

/* Pulse ring — draws attention after the button appears */
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: wa-pulse 2.4s ease-out infinite;
  opacity: 0;
}

.whatsapp-float.is-visible::after {
  opacity: 1;
}

@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0);   }
}

/* Hide tooltip on touch devices (no hover state) */
@media (hover: none) {
  .whatsapp-float::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::after { animation: none; }
}

@media (max-width: 480px) {
  .whatsapp-float { width: 52px; height: 52px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 20px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}

@media (max-width: 480px) {
  .hero-meta { flex-wrap: wrap; gap: 16px 28px; }
  .products-grid > .product-card { flex: 0 0 100%; }
}