/* ============================================================
   Magic Dough — magicdough.ca  ·  V3
   Saturated, cookie-led. Vanilla CSS, no framework.
   Order: tokens → reset → primitives → header → sections → responsive
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --ink:          #201829;
  --ink-muted:    #665C73;

  --cream:        #FFF7EC;
  --cream-deep:   #F7E8D6;
  --white:        #FFFFFF;

  /* Hero clay, carried over from the original Magic Dough red. */
  --clay-deep:    #59120F;
  --clay:         #8A241D;
  --clay-warm:    #9E3423;
  --clay-light:   #A8412C;

  /* Saturated grounds. Each is paired with a text colour that clears 4.5:1
     against its own base. */
  --berry:      #C0356E;   --berry-2:  #E15C90;
  --lilac:      #6355C4;   --lilac-2:  #8E82E0;
  --moss:       #4F7D3C;   --moss-2:   #77A65C;
  --amber:      #C07C10;   --amber-2:  #E7A93A;
  --clay-t:     #8E4A2A;   --clay-t2:  #B87049;
  --teal:       #1C7370;   --teal-2:   #35A09C;

  /* Text-safe pairs. The vivid pairs above sit behind product imagery only —
     nothing reads on them. Any surface that carries copy uses these, darkened
     until cream clears 4.5:1 on the *lighter* stop of the gradient, which is
     the worst case. Amber is the exception: yellow cannot carry light text at
     any usable saturation, so it keeps its vivid pair and takes ink copy. */
  --berry-s1: #922854;  --berry-s2: #AB466D;
  --lilac-s1: #473D8D;  --lilac-s2: #665EA1;
  --moss-s1:  #365529;  --moss-s2:  #51713F;
  --teal-s1:  #145351;  --teal-s2:  #267370;
  --clay-s1:  #723B22;  --clay-s2:  #935A3A;
  --amber-s1: #6E5110;  --amber-s2: #8F6924;
  --ink-s1:   #2C2338;  --ink-s2:   #453856;

  /* Small text on light grounds: holds 5:1 on white, cream and cream-deep,
     where --berry falls to 4.39:1 on cream-deep. */
  --berry-text:  #B02F63;
  /* Current-page mark on the mobile nav panel. */
  --amber-light: #F7D28A;

  /* Ingredient pills and callout notes. */
  --tint-pistachio: #EFF6E8;  --pistachio-deep: #41602B;
  --tint-butter:    #FDF3DF;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell:        1180px;
  --gutter:       clamp(1.25rem, 5vw, 3rem);
  --radius:       24px;
  --radius-lg:    34px;
  --radius-sm:    12px;
  --radius-pill:  999px;

  --shadow-sm:    0 2px 8px rgba(32, 24, 41, 0.06);
  --shadow-md:    0 14px 34px rgba(32, 24, 41, 0.12);
  --shadow-lg:    0 28px 64px rgba(32, 24, 41, 0.20);

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --header-h:     96px;

  /* Film grain, inlined so it costs no request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Clears the fixed header on anchor jumps. Set on the scroll container so
     it covers every target, including ones added later. */
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}

p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
  position: absolute;
  top: -100%; left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink); color: var(--cream);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------- Primitives ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berry-text);
  margin-bottom: 0.75rem;
}
.eyebrow--light { color: rgba(255, 247, 236, 0.88); }

.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.85rem;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--accent        { --btn-bg: var(--berry); --btn-fg: var(--white); --btn-border: var(--berry); }
.btn--cream         { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-border: var(--cream); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255,255,255,0.5); }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,0.16); }
.btn--sm            { padding: 0.65rem 1.35rem; font-size: 0.875rem; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  --nav-tint: rgba(192, 53, 110, 0.12);
  --nav-ink:  var(--berry);
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header[data-accent="berry"] { --nav-tint: rgba(192,53,110,0.12); --nav-ink: var(--berry);   --nav-surface: var(--berry-s1); }
.site-header[data-accent="amber"] { --nav-tint: rgba(192,124,16,0.14); --nav-ink: var(--amber);   --nav-surface: var(--amber-s1); }
.site-header[data-accent="lilac"] { --nav-tint: rgba(99,85,196,0.13);  --nav-ink: var(--lilac);   --nav-surface: var(--lilac-s1); }
.site-header[data-accent="moss"]  { --nav-tint: rgba(79,125,60,0.14);  --nav-ink: var(--moss);    --nav-surface: var(--moss-s1); }
.site-header[data-accent="clay"]  { --nav-tint: rgba(142,74,42,0.14);  --nav-ink: var(--clay-t);  --nav-surface: var(--clay); }
.site-header[data-accent="teal"]  { --nav-tint: rgba(28,115,112,0.14); --nav-ink: var(--teal);    --nav-surface: var(--teal-s1); }
.site-header[data-accent="ink"]   { --nav-tint: rgba(32,24,41,0.10);   --nav-ink: var(--ink);     --nav-surface: var(--ink-s1); }

.site-header.is-stuck { background: var(--cream); box-shadow: 0 1px 0 rgba(32, 24, 41, 0.07); }
.site-header.is-stuck::after {
  content: "";
  position: absolute; top: 100%; left: 0; right: 0; height: 9px;
  background: radial-gradient(circle at 50% 0, var(--cream) 68%, transparent 69%) repeat-x 0 0 / 18px 18px;
}

.scroll-progress {
  position: absolute; top: 0; left: 0; height: 3px; width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--berry), var(--amber), var(--moss), var(--lilac));
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.site-header.is-stuck .scroll-progress { opacity: 1; }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  height: var(--header-h);
  transition: height 0.35s var(--ease);
}
.site-header.is-stuck .site-header__inner { height: 74px; }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--cream);
  transition: color 0.35s var(--ease);
}
.site-header.is-stuck .brand { color: var(--ink); }
.brand__mark {
  height: 46px; width: auto;
  filter: brightness(0) invert(1);
  transition: height 0.35s var(--ease), filter 0.35s var(--ease);
}
.site-header.is-stuck .brand__mark { height: 38px; filter: none; }

.site-nav { position: relative; display: flex; align-items: center; gap: 0.25rem; }

.site-nav a:not(.btn) {
  position: relative; z-index: 1;
  padding: 0.5rem 0.8rem; border-radius: var(--radius-pill);
  font-size: 0.9063rem; text-decoration: none; color: var(--cream); white-space: nowrap;
  transition: color 0.25s var(--ease);
}
/* Bar only: below the breakpoint these links live in the dark nav panel. */
@media (min-width: 1241px) {
  .site-header.is-stuck .site-nav > a:not(.btn) { color: var(--ink); }
  .site-header.is-stuck .site-nav > a:not(.btn).is-current { color: var(--nav-ink); }
}

.nav-indicator {
  position: absolute; z-index: 0;
  top: var(--indicator-top, 0); left: var(--indicator-left, 0);
  width: var(--indicator-width, 0); height: var(--indicator-height, 0);
  border-radius: var(--radius-pill);
  background: rgba(255, 247, 236, 0.24);
  opacity: 0;
  transition: left 0.4s var(--ease), width 0.4s var(--ease),
              opacity 0.25s var(--ease), background-color 0.35s var(--ease);
}
.site-header.is-stuck .nav-indicator { background: var(--nav-tint); }
.nav-indicator.is-visible { opacity: 1; }

.site-header:not(.is-stuck) .site-header__cta {
  --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-border: var(--cream);
}

.nav-toggle {
  position: relative;
  display: none; width: 44px; height: 44px; padding: 0;
  border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  color: var(--cream);
  transition: color 0.35s var(--ease);
}
.site-header.is-stuck .nav-toggle { color: var(--ink); }

/* All three strokes share one centre line, so closing is rotation only. */
.nav-toggle__bars {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: background-color 0.2s linear;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ============================================================
   Hero — cookies, not packaging
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(120% 90% at 80% 15%, var(--clay-light) 0%, transparent 55%),
    linear-gradient(150deg, var(--clay-deep) 0%, var(--clay) 55%, var(--clay-warm) 100%);
  color: var(--cream);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__watermark,
.section__watermark {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(5rem, 19vw, 17rem);
  line-height: 0.8; letter-spacing: -0.04em; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.hero__watermark { bottom: -0.26em; color: rgba(255, 247, 236, 0.06); }
.section__watermark { top: 42%; color: rgba(32, 24, 41, 0.035); }

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
}

.hero__title { font-size: clamp(2.75rem, 5.4vw, 4.5rem); margin-bottom: 1.25rem; }
.hero__title em { font-style: normal; color: var(--amber-2); }

.hero__lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: rgba(255, 247, 236, 0.88);
  max-width: 34ch; margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* Cookie cluster. Every crumb is held at or under its 600px source width so
   nothing is upscaled on a retina screen. */
.hero__stage { position: relative; aspect-ratio: 1 / 1; }
.crumb {
  position: absolute;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.45));
}
.crumb--1 { width: 57%; left: 21%; top: 20%; z-index: 5; }
.crumb--2 { width: 38%; left: -6%; top: -2%; z-index: 4; rotate: -14deg; }
.crumb--3 { width: 34%; right: -5%; top: 1%; z-index: 3; rotate: 12deg; }
.crumb--4 { width: 36%; left: -2%; bottom: 6%; z-index: 4; rotate: 8deg; }
.crumb--5 { width: 32%; right: -3%; bottom: 10%; z-index: 3; rotate: -10deg; }

/* Slapped across the gap between the two lower cookies, so the overlap reads
   as a sticker rather than a collision. */
.hero__badge {
  position: absolute; z-index: 6;
  width: 36%; left: 32%; bottom: -3%;
  rotate: -8deg;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

@media (prefers-reduced-motion: no-preference) {
  .crumb--1 { animation: float 7s ease-in-out infinite; }
  .crumb--2 { animation: float 9s ease-in-out infinite 0.5s; }
  .crumb--3 { animation: float 8s ease-in-out infinite 1.1s; }
  .crumb--4 { animation: float 10s ease-in-out infinite 0.8s; }
  .crumb--5 { animation: float 8.5s ease-in-out infinite 1.6s; }
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* ---------- Trust marquee ---------- */
.marquee { padding: 1.1rem 0; background: var(--ink); color: var(--cream); overflow: hidden; }
.marquee__track { display: flex; width: max-content; }
.marquee__list {
  display: flex; align-items: center; gap: 3rem; padding-right: 3rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap;
}
.marquee__list li { display: flex; align-items: center; gap: 3rem; }
.marquee__list li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-2); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 34s linear infinite; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Section shells
   ============================================================ */
.section { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0; overflow: hidden; }
.section--cream { background: var(--cream-deep); }

.section__head { position: relative; z-index: 1; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1rem; }
.section__lede { color: var(--ink-muted); font-size: 1.0625rem; margin: 0; }

/* ---------- Capabilities — saturated colour blocks ---------- */
.capability-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem;
}
.capability {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--on, var(--cream));
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.capability:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.capability::after {
  content: ""; position: absolute; right: -40px; bottom: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: scale 0.5s var(--ease);
}
.capability:hover::after { scale: 1.5; }
.capability__index {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--badge-bg, rgba(255, 255, 255, 0.22));
  color: var(--on, var(--cream));
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
}
.capability h3 { font-size: 1.5rem; margin: 0.85rem 0 0.75rem; }
.capability p  { color: var(--on-muted, rgba(255, 255, 255, 0.86)); font-size: 0.9375rem; margin: 0; }

.capability--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.capability--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.capability--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.capability--amber {
  --c1: var(--amber); --c2: var(--amber-2);
  --on: var(--ink); --on-muted: rgba(32, 24, 41, 0.82); --badge-bg: rgba(32, 24, 41, 0.16);
}
.capability--amber::after { background: rgba(32, 24, 41, 0.10); }

/* ---------- Filter ---------- */
.filter { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 2.25rem; }
.filter__btn {
  padding: 0.6rem 1.25rem;
  border: 1.5px solid rgba(32, 24, 41, 0.16);
  border-radius: var(--radius-pill);
  background: var(--white); font-size: 0.9375rem; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.filter__btn span { margin-left: 0.4rem; font-size: 0.75rem; color: var(--ink-muted); }
.filter__btn:hover { border-color: var(--berry); }
.filter__btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.filter__btn.is-active span { color: rgba(255, 247, 236, 0.6); }

/* ---------- Product grid — saturated tiles, staggered ---------- */
.product-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1.5rem;
  align-items: start;
}

.product {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.product:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.product[hidden] { display: none; }

/* Offsets are applied by the filter to every second *visible* card, so the
   stagger survives filtering — nth-child would count hidden cards too. */
.product.is-offset { margin-top: 2.75rem; }

.product__media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(155deg, var(--c1), var(--c2));
  overflow: hidden;
}
.product__media img {
  width: auto; max-height: 100%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.28));
  transition: transform 0.45s var(--ease);
}
.product:hover .product__media img { transform: scale(1.08) rotate(-3deg); }

/* Overlay badge, sitting on the image the way the reference sites do. */
.product__flag {
  position: absolute; top: 0.875rem; left: 0.875rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

.product__body { padding: 1.25rem 1.375rem 1.5rem; }
.product__name { font-size: 1.25rem; margin-bottom: 0.5rem; }
.product__desc { font-size: 0.9063rem; color: var(--ink-muted); margin-bottom: 1rem; line-height: 1.55; }
.product__specs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.product__specs li {
  padding: 0.25rem 0.625rem; border-radius: var(--radius-pill);
  background: var(--cream-deep);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-muted);
}

.product--berry { --c1: var(--berry);  --c2: var(--berry-2); }
.product--lilac { --c1: var(--lilac);  --c2: var(--lilac-2); }
.product--moss  { --c1: var(--moss);   --c2: var(--moss-2); }
.product--amber { --c1: var(--amber);  --c2: var(--amber-2); }
.product--clay  { --c1: var(--clay-t); --c2: var(--clay-t2); }
.product--teal  { --c1: var(--teal);   --c2: var(--teal-2); }

.range__note { position: relative; z-index: 1; margin-top: 2.5rem; font-size: 0.9375rem; color: var(--ink-muted); }
.range__note a { color: var(--berry); text-underline-offset: 3px; }

/* ---------- Private label band ---------- */
.band { background: var(--ink); color: var(--cream); }
.band__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.band__copy p { color: rgba(255, 247, 236, 0.74); max-width: 44ch; }
.band__copy .section__title { color: var(--cream); margin-bottom: 1.25rem; }
.band__list { display: grid; gap: 0.625rem; margin: 1.75rem 0 2rem; }
.band__list li { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: rgba(255, 247, 236, 0.88); }
.band__list li::before { content: "—"; color: var(--amber-2); }


/* Labelled variant: each row is one sentence with a bold lead-in, so it runs
   as a single text flow with the dash hanging in the margin. --ink is the same
   list on a cream section. */
.band__list--labelled li { display: block; padding-left: 1.4rem; text-indent: -1.4rem; }
.band__list--labelled li::before { margin-right: 0.45rem; }
.band__list--ink li { color: var(--ink-muted); }
.band__list--ink strong { color: var(--ink); }

.band__media { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1rem; align-items: start; }
.band__figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.band__figure img { width: 100%; height: 100%; object-fit: cover; }
.band__figure--tall img { object-position: 72% center; }
.band__figure:not(.band__figure--tall) { margin-top: 2.5rem; }

/* A cookie breaking out of the photo block — the overlap the reference sites
   use to stop everything sitting politely inside its own box. */
.band__cookie {
  position: absolute; z-index: 2;
  width: 42%; left: -12%; bottom: -8%;
  rotate: -12deg;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

/* ---------- Certifications ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.cert {
  padding: 1.75rem 1.5rem;
  border: 1.5px solid rgba(32, 24, 41, 0.09);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cert:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-md); }
.cert::before {
  content: ""; display: block;
  width: 32px; height: 6px; margin-bottom: 1rem;
  border-radius: var(--radius-pill);
  background: var(--marker, var(--berry));
}
.cert:nth-child(1) { --marker: var(--berry); }
.cert:nth-child(2) { --marker: var(--moss); }
.cert:nth-child(3) { --marker: var(--teal); }
.cert:nth-child(4) { --marker: var(--amber); }
.cert:nth-child(5) { --marker: var(--lilac); }
.cert:nth-child(6) { --marker: var(--clay-t); }
.cert h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.cert p  { font-size: 0.9063rem; color: var(--ink-muted); margin: 0; }

/* ---------- Facility ---------- */
.facility {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.facility__photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.facility__photo img { width: 100%; height: 100%; object-fit: cover; }
.facility__copy p { color: var(--ink-muted); max-width: 46ch; }
.facility__copy .btn { margin-top: 0.75rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  padding: 1.9rem 1.5rem; border-radius: var(--radius);
  background: linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--on, var(--cream));
}
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 2.75rem); line-height: 1; color: var(--on, var(--cream));
}
.stat span { display: block; margin-top: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--on-muted, rgba(255,255,255,0.86)); }
.stat--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.stat--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.stat--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.stat--amber { --c1: var(--amber); --c2: var(--amber-2); --on: var(--ink); --on-muted: rgba(32, 24, 41, 0.82); }

/* ---------- Retail strip ---------- */
.retail-strip { padding: clamp(2.5rem, 6vw, 4rem) 0; background: var(--berry); color: var(--white); }
.retail-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.retail-strip h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 0.375rem; }
.retail-strip p  { margin: 0; color: rgba(255, 255, 255, 0.92); }
.retail-strip__links { display: flex; gap: 0.75rem; }

/* ---------- Quote ---------- */
.quote { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote__intro p { color: var(--ink-muted); }
.quote__contact { margin-top: 2rem; display: grid; gap: 1.25rem; }
.quote__contact li { display: grid; gap: 0.25rem; }
.quote__contact span {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--berry);
}
.quote__contact a { text-decoration: none; }
.quote__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.quote-form {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-md);
}
.field { display: grid; gap: 0.375rem; }
.field--full { grid-column: 1 / -1; }
.field label, .field__label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink); }
.field abbr { color: var(--berry); text-decoration: none; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.875rem;
  border: 1.5px solid rgba(32, 24, 41, 0.16); border-radius: var(--radius-sm);
  background: var(--cream); font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); }
.field.has-error input, .field.has-error select { border-color: var(--berry); }
.field__error { margin: 0; font-size: 0.8125rem; color: var(--berry); min-height: 0; }

.chip-set { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 0.5rem 1rem;
  border: 1.5px solid rgba(32, 24, 41, 0.16); border-radius: var(--radius-pill);
  font-size: 0.875rem; cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.chip span:hover { border-color: var(--berry); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--berry); outline-offset: 3px; }

.quote-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-status { margin: 0; font-size: 0.875rem; }
.form-status.is-error   { color: var(--berry); }
.form-status.is-success { color: var(--moss); }

/* ---------- Footer ---------- */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--ink); color: rgba(255, 247, 236, 0.78); font-size: 0.9375rem;
}
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer h2 {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 1rem;
}
.site-footer__brand img { width: 120px; filter: brightness(0) invert(1); opacity: 0.9; }
.site-footer__brand p { margin-top: 1rem; max-width: 28ch; }
.site-footer__nav, .site-footer__contact { display: grid; gap: 0.5rem; align-content: start; }
.site-footer__nav a, .site-footer__contact a { text-decoration: none; width: fit-content; }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--amber-2); }
.site-footer address { font-style: normal; margin-top: 0.5rem; }
.site-footer__social { display: flex; gap: 1rem; margin-top: 0.75rem; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.75rem; border-top: 1px solid rgba(255, 247, 236, 0.14);
  font-size: 0.8125rem; color: rgba(255, 247, 236, 0.52);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal nav { display: flex; gap: 1.25rem; }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { color: var(--amber-2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .site-header__cta { display: none; }

  /* Flex, not grid: as a grid item the fixed panel would be sized by its
     column, and the toggle would land in the middle track. */
  .site-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Full-screen overlay. A translucent sheet rather than an opaque one: the
     section underneath shows through the blur, so the panel always belongs to
     the page it dropped from instead of covering it. The header is its own
     stacking context, so the panel's z-index competes with its siblings, not
     with the page: the brand and the toggle are lifted above it below. */
  .site-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-h) + 0.5rem) var(--gutter)
             max(2rem, env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    border: none; border-radius: 0; box-shadow: none;

    /* Fallback first for anything without color-mix; the layered version wins
       where it is supported. Top to bottom: three blobs of the site's own
       accents — the pops of colour, painted as background layers so they need
       no pseudo-element and never sit over the links — then the header's
       accent, then an ink floor that keeps cream copy legible over light pages. */
    --nav-veil: color-mix(in srgb, var(--nav-surface, var(--clay)) 88%, transparent);
    background: var(--nav-surface, var(--clay));
    background:
      radial-gradient(42vw 42vw at 10% 16%, rgba(225, 92, 144, 0.30), transparent 70%),
      radial-gradient(46vw 46vw at 92% 6%,  rgba(231, 169, 58, 0.20), transparent 70%),
      radial-gradient(52vw 52vw at 76% 92%, rgba(53, 160, 156, 0.30), transparent 72%),
      linear-gradient(var(--nav-veil), var(--nav-veil)),
      rgba(32, 24, 41, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);

    /* Out is quicker than in, so closing never reads as lag. */
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s;
  }
  .site-nav.is-open {
    opacity: 1; visibility: visible;
    transition: opacity 0.34s ease-out, visibility 0s;
  }

  /* The panel is always a dark ground, so its copy is always cream. */
  .site-nav > a:not(.btn) {
    display: flex; align-items: center;
    padding: 1.05rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 247, 236, 0.16);
    font-family: var(--font-display);
    font-weight: 700; font-size: clamp(1.5rem, 7vw, 2rem); letter-spacing: -0.02em;
    color: var(--cream);
  }
  /* --amber-2 falls to 2:1 where a blob peaks; --amber-light holds 3.5:1. */
  .site-nav > a:not(.btn).is-current { color: var(--amber-light); }

  /* Staggered entrance. An animation, not a transition: rows inside a
     visibility:hidden panel have no rendered "from" style to transition out
     of, so the visible state stays the default and the animation is layered
     on. Closing needs nothing; the rows snap back behind the fading panel. */
  @keyframes nav-row { from { opacity: 0; transform: translateY(18px); } }

  .site-nav.is-open > a:not(.btn),
  .site-nav.is-open .site-nav__meta,
  .site-nav.is-open .site-nav__cta { animation: nav-row 0.42s var(--ease) backwards; }

  /* The last row settles at ~0.65s. */
  .site-nav.is-open > a:nth-of-type(1) { animation-delay: 0.04s; }
  .site-nav.is-open > a:nth-of-type(2) { animation-delay: 0.08s; }
  .site-nav.is-open > a:nth-of-type(3) { animation-delay: 0.12s; }
  .site-nav.is-open > a:nth-of-type(4) { animation-delay: 0.16s; }
  .site-nav.is-open .site-nav__meta   { animation-delay: 0.21s; }
  .site-nav.is-open .site-nav__cta    { animation-delay: 0.25s; }

  /* Contact block, pushed to the foot of the panel. */
  .site-nav__meta {
    margin-top: auto;
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 1.5rem;
    padding-top: 1.75rem;
    font-size: 0.9375rem; line-height: 1.5;
  }
  .site-nav__meta h2 {
    margin: 0 0 0.6rem;
    font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 247, 236, 0.55);
  }
  .site-nav__meta a:not(.btn) {
    display: block; padding: 0.15rem 0;
    font-family: var(--font-body); font-size: inherit; font-weight: 400;
    color: var(--cream); text-decoration: none;
  }
  /* Underline rather than a colour shift: these are 15px, and no accent tint
     clears 4.5:1 on every ground the panel can sit over. */
  .site-nav__meta a:not(.btn):hover { text-decoration: underline; }
  .site-nav__meta address {
    margin-top: 0.6rem;
    font-style: normal; color: rgba(255, 247, 236, 0.72);
  }

  /* Cream button: the panel ground is always dark. */
  .site-nav__cta {
    margin-top: 1.5rem; width: 100%;
    --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-border: var(--cream);
  }

  /* While the panel is up the header hands its surface over to it: no cream
     bar, no piped edge, no progress rule cutting across the overlay. Declared
     after the .is-stuck rules so it wins the specificity tie on source order. */
  .site-header.is-nav-open { background: transparent; box-shadow: none; }
  .site-header.is-nav-open::after { display: none; }
  .site-header.is-nav-open .scroll-progress { opacity: 0; }
  .site-header.is-nav-open .brand__mark { filter: brightness(0) invert(1); }
  .site-header.is-nav-open .nav-toggle { color: var(--cream); }

  /* Lifted over the panel so the logo and the close button stay put and stay
     clickable while it is open. */
  .site-header__inner > .brand,
  .site-header__actions { position: relative; z-index: 2; }

  .nav-indicator { display: none; }
  .site-header.is-stuck .site-header__inner { height: var(--header-h); }
  .site-header.is-stuck .brand__mark { height: 40px; }
}

/* Short phones: the whole panel, button included, fits one screen. */
@media (max-width: 1240px) and (max-height: 720px) {
  .site-nav { padding-top: calc(var(--header-h) - 0.5rem); }
  .site-nav > a:not(.btn) { padding: 0.8rem 0; font-size: 1.4rem; }
  .site-nav__meta { padding-top: 1.1rem; }
  .site-nav__cta { margin-top: 1rem; }
}

@media (min-width: 1241px) {
  /* Desktop only. Applied unscoped this also hit the fixed mobile panel: an
     out-of-flow box with both offsets set and a non-default alignment
     shrink-to-fits and centres itself rather than stretching, which left the
     panel floating mid-screen at its content width. */
  .site-header__inner > .site-nav { justify-self: center; }

  /* Panel-only affordances; the bar and the page footer carry these. */
  .site-nav__cta,
  .site-nav__meta { display: none; }
}

@media (max-width: 960px) {
  .hero__inner, .band__inner, .facility, .quote { grid-template-columns: 1fr; }
  .facility__photo { order: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* An explicit width is required: auto margins drop the grid item out of
     `stretch`, and every child here is absolutely positioned, so the stage
     would otherwise resolve to zero and the cookies would vanish. */
  .hero__stage { width: 100%; max-width: 440px; margin-inline: auto; }

  .product.is-offset { margin-top: 0; }
  .band__cookie { width: 32%; left: -6%; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 2.5rem; }
  .hero__inner { gap: 1.5rem; }
  .hero__title { font-size: clamp(2.5rem, 10vw, 3.25rem); margin-bottom: 0.875rem; }
  .hero__lede { max-width: none; font-size: 1rem; margin-bottom: 1.5rem; }
  .hero__actions { gap: 0.625rem; }
  .hero__actions .btn { flex: 1 1 45%; padding-inline: 1rem; }
  .hero__stage { max-width: 330px; }

  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .marquee__list { gap: 1.75rem; padding-right: 1.75rem; }
  .marquee__list li { gap: 1.75rem; }
  .band__media { grid-template-columns: 1fr 1fr; }
  .quote-form { grid-template-columns: 1fr; }
  .retail-strip__inner { flex-direction: column; align-items: flex-start; }
  .section__watermark { display: none; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .site-nav.is-open > a, .site-nav.is-open .site-nav__meta,
  .site-nav.is-open .site-nav__cta { animation: none !important; }
}


/* ============================================================
   Section decoration — cookies, ribbons and dots drifting behind
   the content. Entirely presentational and aria-hidden.
   ============================================================ */
.decorated { position: relative; }
.decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.decor__cookie { position: absolute; opacity: 0.5; filter: drop-shadow(0 12px 20px rgba(32,24,41,0.14)); }
.decor__cookie--a { width: 120px; top: 6%;  left: -30px; rotate: -16deg; }
.decor__cookie--b { width: 92px;  top: 44%; right: -24px; rotate: 14deg; }
.decor__cookie--c { width: 76px;  bottom: 4%; left: 14%; rotate: 8deg; }

.decor__ribbon { position: absolute; width: 190px; opacity: 0.5; }
.decor__ribbon--a { top: 12%; right: 12%; color: var(--amber-2); rotate: -8deg; }
.decor__ribbon--b { bottom: 8%; right: 26%; color: var(--berry-2); rotate: 6deg; }

.decor__dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; opacity: 0.55; }
.decor__dot--a { top: 22%; left: 22%; background: var(--lilac-2); }
.decor__dot--b { top: 70%; left: 6%;  background: var(--moss-2); }
.decor__dot--c { top: 34%; right: 6%; background: var(--berry-2); }

@media (prefers-reduced-motion: no-preference) {
  .decor__cookie--a { animation: drift 11s ease-in-out infinite; }
  .decor__cookie--b { animation: drift 13s ease-in-out infinite 1.2s; }
  .decor__cookie--c { animation: drift 9s  ease-in-out infinite 0.6s; }
  .decor__ribbon--a { animation: drift 14s ease-in-out infinite 0.4s; }
  .decor__ribbon--b { animation: drift 12s ease-in-out infinite 1.6s; }
  .decor__dot       { animation: drift 10s ease-in-out infinite; }
}
/* Decor holds still while the nav panel is open: every moving frame under a
   backdrop blur forces it to resample, and behind the blur nothing shows. */
.nav-is-open .decor__cookie,
.nav-is-open .decor__ribbon,
.nav-is-open .decor__dot,
.nav-is-open .crumb,
.nav-is-open .marquee__track { animation-play-state: paused; }

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -18px; }
}

/* ============================================================
   Festivals & occasions
   ============================================================ */
.occasion-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem;
}
.occasion {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--c1), var(--c2));
  color: var(--cream);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.occasion:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.occasion > img {
  position: absolute; top: -6%; right: -14%;
  width: 78%;
  rotate: -10deg;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.32));
  transition: transform 0.45s var(--ease);
}
.occasion:hover > img { transform: scale(1.08) rotate(4deg); }
.occasion__body { position: relative; z-index: 1; }
.occasion h3 { font-size: 1.4375rem; margin-bottom: 0.5rem; }
.occasion p  { margin: 0; font-size: 0.9063rem; color: rgba(255,255,255,0.88); }

.occasion--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.occasion--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.occasion--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.occasion--amber { --c1: var(--clay-s1);  --c2: var(--clay-s2); }

@media (max-width: 1240px) {
  .decor__cookie--a, .decor__ribbon--a { display: none; }
}

.range__empty {
  position: relative; z-index: 1;
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  border: 1.5px dashed rgba(32, 24, 41, 0.2);
  border-radius: var(--radius);
  color: var(--ink-muted);
}
.range__empty a { color: var(--berry); }


.hero__stockists {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 1.75rem 0 0;
  font-size: 0.875rem; letter-spacing: 0.04em;
  color: rgba(255, 247, 236, 0.88);
}
.hero__stockists span {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 247, 236, 0.16);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}


/* ============================================================
   Inner-page masthead
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.75rem, 6vw, 4.5rem);
  background: linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%);
  color: var(--cream);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
}
.page-hero--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.page-hero--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.page-hero--teal  { --c1: var(--teal-s1);  --c2: var(--teal-s2); }
.page-hero--clay  { --c1: var(--clay-s1);  --c2: var(--clay-s2); }
.page-hero--ink   { --c1: var(--ink-s1);   --c2: var(--ink-s2); }  /* legal pages: the quietest masthead */

.page-hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.page-hero__title { font-size: clamp(2.5rem, 5.6vw, 4.25rem); margin-bottom: 1rem; }
.page-hero__lede {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: rgba(255, 247, 236, 0.88);
  max-width: 46ch; margin: 0;
}
.page-hero .hero__watermark { bottom: -0.3em; color: rgba(255, 247, 236, 0.06); }
.page-hero .decor__cookie--a { width: 96px; top: 22%; right: 6%; left: auto; }
.page-hero .decor__cookie--b { width: 74px; bottom: 8%; right: 22%; top: auto; }
.page-hero .decor__ribbon--a { top: 30%; right: 30%; color: rgba(255, 247, 236, 0.5); }
.page-hero .decor__dot--a { top: 30%; left: auto; right: 18%; background: rgba(255, 247, 236, 0.5); }
.page-hero .decor__dot--c { top: 68%; right: 10%; background: rgba(255, 247, 236, 0.4); }

/* ---------- Split section heading ---------- */
.section__head--split {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; max-width: none;
}
.section__head--split .section__title { margin-bottom: 0; }

/* A grid with no filter behind it never gets the staggered offsets. */
.product-grid--static { align-items: stretch; }

/* ---------- CTA band ---------- */
/* Clay rather than ink: the band sits directly above the ink footer, and two
   dark blocks in a row read as one. */
.cta-band {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  background: linear-gradient(150deg, var(--clay-deep), var(--clay-warm));
  color: var(--cream);
}
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem;
}
.cta-band h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 0.5rem; }
.cta-band p { margin: 0; max-width: 52ch; color: rgba(255, 247, 236, 0.78); }

/* ---------- Stockists ---------- */
.stockists {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.stockists__copy p { color: var(--ink-muted); max-width: 44ch; }
.stockists__copy .btn { margin-top: 0.75rem; }
.stockists__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stockist {
  padding: 1.75rem 1.5rem; border-radius: var(--radius);
  background: linear-gradient(155deg, var(--moss-s1), var(--moss-s2));
  color: var(--cream);
}
.stockist strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.stockist span { display: block; margin-top: 0.35rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.86); }
.stockist--muted { background: var(--cream-deep); color: var(--ink); }
.stockist--muted span { color: var(--ink-muted); }

/* ---------- Services ---------- */
.service-list { display: grid; gap: 1.5rem; }
.service {
  display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--cream);
}
.service__body { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.service__index {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill); background: rgba(255,255,255,0.22);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
}
.service h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0.85rem 0 0.75rem; }
.service p { color: rgba(255,255,255,0.86); max-width: 52ch; }
.service__points { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.service__points li { display: flex; gap: 0.75rem; font-size: 0.9063rem; color: rgba(255,255,255,0.9); }
.service__points li::before { content: "—"; opacity: 0.7; }
.service__figure {
  position: relative; margin: 0; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); padding: 1.5rem;
}
.service__figure img {
  width: 78%; height: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.34));
  transition: transform 0.45s var(--ease);
}
.service:hover .service__figure img { transform: scale(1.06) rotate(-3deg); }

.service--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.service--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.service--amber { --c1: var(--amber-s1); --c2: var(--amber-s2); }
.service--clay  { --c1: var(--clay-s1);  --c2: var(--clay-s2); }

/* ---------- Process ---------- */
.process {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem;
  counter-reset: none;
}
.process__step {
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--cream);
}
.process__number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: 1rem;
  border-radius: 50%; background: rgba(255,255,255,0.2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
}
.process__step h3 { font-size: 1.3125rem; margin-bottom: 0.5rem; }
.process__step p { margin: 0; font-size: 0.9063rem; color: rgba(255,255,255,0.86); }
.process__step--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.process__step--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.process__step--amber { --c1: var(--amber-s1); --c2: var(--amber-s2); }
.process__step--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story__copy p { color: var(--ink-muted); max-width: 50ch; }
.story__photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-md);
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Long-form prose ---------- */
.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin: 2.5rem 0 0.75rem;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { color: var(--ink-muted); }
.prose a { color: var(--berry); }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; color: var(--ink-muted); }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--berry); }
.prose strong { color: var(--ink); }
.prose__updated {
  display: inline-block; margin-bottom: 2rem; padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill); background: var(--cream-deep);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.prose__note {
  margin-top: 3rem; padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--tint-butter);
  font-size: 0.9063rem; color: var(--ink);
}

@media (max-width: 960px) {
  .stockists, .story, .service { grid-template-columns: 1fr; }
  .service__figure { order: -1; aspect-ratio: 16 / 9; }
  .service__figure img { width: 38%; }
  .story__photo { order: -1; aspect-ratio: 3 / 2; }
}

@media (max-width: 560px) {
  .stockists__list { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* The occasions decor uses its own placement so the two decorated sections on
   the home page don't read as the same layer repeated. */
.decor--occasions .decor__cookie--a { width: 104px; top: 10%; right: -26px; left: auto; rotate: 18deg; }
.decor--occasions .decor__cookie--b { width: 86px;  top: 52%; left: -28px; right: auto; rotate: -12deg; }
.decor--occasions .decor__cookie--c { width: 68px;  bottom: 6%; left: auto; right: 18%; rotate: -6deg; }
.decor--occasions .decor__ribbon--a { top: 8%; left: 10%; right: auto; color: var(--teal-2); rotate: 6deg; }
.decor--occasions .decor__ribbon--b { bottom: 4%; left: 34%; right: auto; color: var(--amber-2); rotate: -4deg; }
.decor--occasions .decor__dot--a { top: 16%; left: 38%; background: var(--berry-2); }
.decor--occasions .decor__dot--b { top: 78%; left: 12%; background: var(--amber-2); }
.decor--occasions .decor__dot--c { top: 44%; right: 4%; background: var(--moss-2); }

/* ============================================================
   Product pages
   ============================================================ */

/* Whole-card click target. The link sits on the name so the accessible name is
   the product, and a stretched pseudo-element makes the rest of the card
   clickable without nesting interactive elements. */
.product { position: relative; }
.product__name a { text-decoration: none; }
.product__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.product:focus-within { box-shadow: var(--shadow-lg); }
.product__name a:focus-visible::after { outline: 3px solid var(--berry); outline-offset: -3px; }

/* The breadcrumb rides on the product hero's colour. Keeping it there means
   the header always sits on a dark ground, exactly as on every other page —
   on a light bar the cream logo and links would disappear. */
.crumbs {
  position: relative; z-index: 1;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: rgba(255, 247, 236, 0.75);
}
.crumbs a { color: var(--cream); text-underline-offset: 3px; }
.crumbs span[aria-hidden] { margin: 0 0.4rem; opacity: 0.5; }

.product-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(150deg, var(--c1), var(--c2));
  color: var(--cream);
  overflow: hidden;
}
.product-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
}
.product-hero--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.product-hero--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.product-hero--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.product-hero--teal  { --c1: var(--teal-s1);  --c2: var(--teal-s2); }
.product-hero--clay  { --c1: var(--clay-s1);  --c2: var(--clay-s2); }
.product-hero--amber { --c1: var(--amber-s1); --c2: var(--amber-s2); }

.product-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
}
.product-hero__media { margin: 0; display: grid; place-items: center; }
.product-hero__media img {
  width: 84%; height: auto;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.42));
}
.product-hero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1rem; }
.product-hero__lede { font-size: clamp(1rem, 1.5vw, 1.1875rem); color: rgba(255, 247, 236, 0.9); max-width: 42ch; }
.product-hero__specs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.product-hero__specs li {
  padding: 0.35rem 0.85rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
}
.product-hero__specs .is-flag { background: var(--cream); color: var(--ink); font-weight: 700; }

/* ---------- Detail + spec panel ---------- */
.product-detail { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.product-detail__main p { color: var(--ink-muted); max-width: 56ch; }
.product-detail__main h3 { font-size: 1.375rem; margin: 2rem 0 0.875rem; }

.ingredients { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ingredients li {
  padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  background: var(--tint-pistachio); color: var(--pistachio-deep);
  font-size: 0.875rem; font-weight: 500;
}

.product-detail__note {
  margin-top: 2rem; padding: 1.125rem 1.375rem;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--tint-butter);
  font-size: 0.875rem; color: var(--ink);
}

.product-detail__panel {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.product-detail__panel h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.product-detail__panel .btn { margin-top: 1.5rem; width: 100%; }

.spec-table { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1.25rem; margin: 0; }
.spec-table dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); padding-top: 0.15rem;
}
.spec-table dd { margin: 0; font-size: 0.9063rem; }

/* ---------- Related ---------- */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.related__card {
  display: grid; gap: 0.875rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--cream);
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.related__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.related__card img { width: 62%; margin-inline: auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.3)); }
.related__card span { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.related__card--berry { --c1: var(--berry-s1); --c2: var(--berry-s2); }
.related__card--lilac { --c1: var(--lilac-s1); --c2: var(--lilac-s2); }
.related__card--moss  { --c1: var(--moss-s1);  --c2: var(--moss-s2); }
.related__card--teal  { --c1: var(--teal-s1);  --c2: var(--teal-s2); }
.related__card--clay  { --c1: var(--clay-s1);  --c2: var(--clay-s2); }
.related__card--amber { --c1: var(--amber-s1); --c2: var(--amber-s2); }

@media (max-width: 960px) {
  .product-hero__inner, .product-detail { grid-template-columns: 1fr; }
  .product-hero__media { max-width: 320px; margin-inline: auto; }
}


/* ---------- Range search (Products page) ---------- */
.range-controls {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.25rem;
}
.range-controls .filter { margin-bottom: 0; }
.range-search {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1.5px solid rgba(32, 24, 41, 0.16);
  border-radius: var(--radius-pill);
  background: var(--white);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.range-search:focus-within { border-color: var(--berry); box-shadow: var(--shadow-sm); }
.range-search__icon {
  width: 17px; height: 17px; flex: none;
  stroke: var(--ink-muted); stroke-width: 2; fill: none; stroke-linecap: round;
}
.range-search input {
  width: 13rem; border: none; background: none; outline: none;
  font-size: 0.9375rem; color: var(--ink);
}
.range-search input::placeholder { color: var(--ink-muted); }

@media (max-width: 560px) {
  .range-controls { justify-content: stretch; }
  .range-search { width: 100%; }
  .range-search input { width: 100%; }
}