/* =========================================================
   Foodlab N.V. — Aladey
   Palette taken straight off the Aladey packs:
   deep pillar-box red band, golden-yellow script wordmark,
   raw semolina cream. Theme locked light.
   ========================================================= */

:root {
  /* Neutrals — semolina / cassava cream */
  --cream:        #FBF4E4;
  --cream-deep:   #F3E5C8;
  --paper:        #FFFFFF;
  --ink:          #2A1A12;   /* warm near-black brown */
  --ink-soft:     #6B5747;
  --line:         #E9DCC1;
  --ink-faint:    #847460;   /* placeholder text, 4.52:1 on white */
  --ink-black:    #0B0A09;   /* footer ground */
  --error:        #B4341F;

  /* Brand — Aladey pack red (structural / primary) */
  --brand:        #B0141B;
  --brand-800:    #961016;
  --brand-700:    #7E0D12;
  --brand-400:    #CE2A24;   /* brighter highlight red */
  --brick:        #A0322A;   /* the Aladey Fries wordmark red */

  /* Accent — the golden-yellow wordmark (the single action accent) */
  --gold:         #EFB315;
  --gold-deep:    #C08A06;   /* FILL AND BORDER ONLY -- 3.05:1 on white */
  --gold-ink:     #8A5C14;   /* the same hue as text: 5.80:1 on white,
                                5.29:1 on cream, 4.74:1 on --gold-soft.
                                Shares its value with --foodlab-ink; kept
                                separate because they mean different things. */
  --gold-soft:    #F9E7BB;
  --amber:        #F8D040;   /* pack yellow, used on dark grounds. Lightened
                                from #F5C518, which read 4.35:1 on --brand --
                                just under AA for the announce bar and the
                                Big Will eyebrow. Now 4.76:1. */
  /* Brand-name text colours for the cassava intro. Power Crops has no locked
   brand colour on file, so this is a crop green darkened to 4.85:1 on cream;
   the Foodlab name uses --foodlab-ink, not the raw logo yellow (2:1). */
  --powercrops-green: #2F7A33;

  /* The Foodlab logo yellow, confirmed by Ashfar 2026-08-20. FILL ONLY --
     it is 2.03:1 on cream, so it must never carry small text on a light
     ground. As a ground with --ink on top it is 7.51:1. For yellow TEXT on
     cream use --foodlab-ink below. */
  --foodlab:      #e89f2d;
  --foodlab-ink:  #8A5C14;   /* same hue, darkened to 5.29:1 on cream */
  --on-gold:      #2A1A12;   /* dark text on gold for AA contrast */

  /* Tokens */
  --page-px: clamp(20px, 2.4vw, 32px);     /* THE uniform left/right padding — same as nav */
  --maxw: 1240px;
  --r-card: 22px;
  --r-panel: 30px;
  --r-input: 12px;
  --shadow-sm: 0 2px 8px rgba(42,26,18,.07);
  /* Warm neutral ink, not oxblood, and a wide soft falloff. The old tokens
     used a deep red at .40/.50 with a heavy negative spread, which pooled
     into a hard dark band directly under every card on the cream ground. */
  --shadow-md: 0 12px 28px -14px rgba(42,26,18,.16), 0 2px 6px rgba(42,26,18,.05);
  --shadow-lg: 0 26px 52px -22px rgba(42,26,18,.22), 0 4px 12px rgba(42,26,18,.06);
  --ease: cubic-bezier(.16,1,.3,1);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--brand-700); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--brand); color: var(--cream);
  padding: 10px 16px; border-radius: 0 0 12px 12px; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Keyboard focus. The UA default ring is thin and, on this warm palette,
   low-contrast. currentColor tracks the element text, which by definition
   contrasts with whatever ground it sits on -- cream on the black footer,
   ink on the gold button, red on the white header. :where() holds
   specificity at 0 so component-level rules still override it. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- THE container: uniform page padding everywhere ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; letter-spacing: -0.01em;
  white-space: nowrap; transition: transform .18s var(--ease), background .2s, box-shadow .2s, color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
/* No glow. The old rgba(192,138,6,.95) drop-shadow read as a halo bleeding
   into the cream rather than as depth. On hover the type goes brand red --
   the ground lifts to --amber rather than dropping to --gold-deep, because
   red on gold-deep is only 2.3:1. --brand-800 rather than --brand: at
   15.7px/600 this is normal-size text, so it needs 4.5:1, and plain
   --brand only reaches 4.35 on amber. --brand-800 gets 5.41. */
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--amber); color: var(--brand-800); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--cream); transform: translateY(-2px); }
.btn--full { width: 100%; justify-content: center; }

/* ---------- Eyebrows & titles ---------- */
.eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
}
/* The Foodlab logo hue, darkened to 5.29:1 on cream. The old --gold-deep
   was 2.79:1 here -- a WCAG AA failure repeated 8 times across the page. */
.eyebrow--accent { color: var(--foodlab-ink); }
.eyebrow--light { color: rgba(251,244,228,.75); }
.eyebrow--bigwill { color: var(--amber); }
.section__title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.section__title--light { color: var(--cream); }
.section { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- Announcement bar ---------- */
.announce { background: var(--brand); color: var(--cream); font-size: .85rem; }
.announce__inner { display: flex; align-items: center; justify-content: center; padding-block: 9px; text-align: center; }
.announce strong { color: var(--amber); font-weight: 700; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: box-shadow .25s, background .25s;
}
.site-header.is-stuck { box-shadow: 0 6px 24px -16px rgba(126,13,18,.5); background: rgba(255,255,255,.96); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* Header carries the horizontal wordmark (602x166, trimmed to the ink), so it
   sits shorter than a square badge would at the same optical weight. */
.brand__logo { height: 40px; width: auto; }
.brand--footer .brand__logo { height: 48px; }

.nav__links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav__links a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; transition: color .2s; }
/* Underline wipes in with scaleX rather than width — same look, but it
   stays on the compositor instead of relaying out on every frame. */
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s var(--ease);
}
.nav__links a:hover { color: var(--brand); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--brand); font-weight: 600; }
.nav__links a.is-active::after { transform: scaleX(1); background: var(--brand); }

/* Visible at every width again (2026-08-21): it now holds the EN/NL language
   switcher, which is real navigation and must be reachable on desktop.
   It was display:none above 980px for a while -- with the header CTA removed
   its only child was the desktop-hidden hamburger, so an empty flex item sat
   there holding the nav gap open and the links stopped 59px from the edge
   while the logo sat on the 31px gutter. With .lang inside, the last child
   again ends exactly on the --page-px gutter, so the header is symmetrical. */
.nav__actions { display: flex; align-items: center; gap: 10px; }

/* "Part of Big Will Group" floating badge — quiet attribution chip. */
.bwg-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-radius: 999px;
  box-shadow:
    0 1px 1px rgba(42,26,18,.04),
    0 6px 16px -8px rgba(42,26,18,.18),
    inset 0 0 0 1px rgba(42,26,18,.08);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.bwg-float:hover,
.bwg-float:focus-visible {
  transform: translateY(-3px) scale(1.05);
  background: var(--paper);
  box-shadow:
    0 0 0 2px var(--amber),
    0 2px 2px rgba(42,26,18,.05),
    0 18px 36px -12px rgba(42,26,18,.28),
    inset 0 0 0 1px rgba(42,26,18,.1);
  outline: none;
}
.bwg-float__mark {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--ink);
  border-radius: 50%;
}
.bwg-float__mark img { height: 22px; width: auto; display: block; }
.bwg-float__body {
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.15;
  padding-right: 4px;
}
.bwg-float__lead {
  font-size: .62rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1px;
}
.bwg-float__name {
  font-family: var(--font-body); font-weight: 600;
  font-size: .86rem; color: var(--ink);
  letter-spacing: -0.005em;
}

@media (max-width: 620px) {
  .bwg-float { right: 12px; bottom: 12px; padding: 6px 12px 6px 6px; gap: 8px; }
  .bwg-float__mark { width: 30px; height: 30px; }
  .bwg-float__mark img { height: 19px; }
  .bwg-float__name { font-size: .82rem; }
  .bwg-float__lead { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bwg-float { transition: none; }
}

/* EN <-> NL switcher. It is an <a>, not a <button>: it navigates to a real
   second page (/ and /nl/). inline-flex, because vertical padding on an inline
   box does not grow the hit box -- this needs to clear 24x24 (WCAG 2.2 AA
   2.5.8); as set it measures ~44x37. */
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 8px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--brand); box-shadow: inset 0 0 0 1.4px var(--line); transition: background .2s, box-shadow .2s; }
.lang:hover { background: var(--cream); box-shadow: inset 0 0 0 1.4px var(--gold); }

.cart-btn { display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 14px; border-radius: 999px; background: var(--brand); color: var(--cream); font-weight: 600; font-size: .9rem; transition: transform .18s var(--ease), background .2s; }
.cart-btn:hover { background: var(--brand-800); transform: translateY(-1px); }
.cart-btn__label { letter-spacing: -0.01em; }
.cart-count { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: .76rem; font-weight: 700; transition: transform .25s var(--ease); }
.cart-count[data-empty="true"] { background: rgba(251,244,228,.22); color: var(--cream); }
.cart-count.pop { transform: scale(1.35); }

/* Stands in for the cart button while the cart is disabled — without it the
   header's right side is just a lone "EN" pill. */
.nav-cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px; min-height: 44px; border-radius: 999px;
  background: var(--brand); color: var(--cream);
  font-weight: 600; font-size: .9rem; letter-spacing: -0.01em;
  transition: transform .18s var(--ease), background .2s;
}
.nav-cta:hover { background: var(--brand-800); transform: translateY(-1px); }

/* 44x44: it is the only route to navigation on a phone. The bars stay 22px;
   the box around them grew. */
.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin-right: -10px; }
.hamburger span { width: 22px; height: 2px; background: var(--brand); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }

/* =========================================================
   HERO — Cassava Fries launch
   Light on purpose: the pack photography is shot on solid white,
   so a white stage plus `mix-blend-mode: multiply` drops the
   background cleanly with no cut-out and no keying artefacts.
   ========================================================= */
.hero {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 55% at 4% 2%, rgba(176,20,27,.09), transparent 62%),
    radial-gradient(52% 52% at 98% 96%, rgba(239,179,21,.16), transparent 66%);
}
/* Rings sit behind the pack — a quiet echo of the sliced root */
.hero__rings {
  position: absolute; z-index: 0;
  top: 50%; right: 4%;
  transform: translateY(-52%);
  width: min(64vw, 720px); aspect-ratio: 1;
  color: var(--brand);
  opacity: .09;
  pointer-events: none;
}
.hero__rings svg { width: 100%; height: 100%; }

.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: clamp(22px, 3vw, 40px);
  /* Extra bottom room keeps the cook strip clear of the fixed
     "Part of Big Will Group" badge parked in the corner. */
  padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px);
  padding-bottom: clamp(88px, 9vw, 104px);
  /* Announce bar ~35px + sticky header 76px = ~111px. */
  min-height: calc(100svh - 111px);
}

.hero__cols {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Left: the launch pitch ---- */
.hero__left { max-width: 560px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--cream);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245,197,24,.7);
  animation: badge-pulse 2.4s var(--ease) infinite;
}
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.65); }
  70%  { box-shadow: 0 0 0 8px rgba(245,197,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}

.hero__logo {
  height: clamp(50px, 5.6vw, 76px);
  width: auto;
  margin-top: clamp(18px, 2.2vw, 28px);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 800; line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--brand-700);
  margin-top: clamp(12px, 1.6vw, 18px);
  max-width: 15ch;
}
.hero__body {
  margin-top: 16px;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.6;
}

.hero__specs {
  list-style: none; padding: 0;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hero__specs li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.4px var(--line);
  font-size: .84rem; font-weight: 600;
  color: var(--brand-700);
}
.hero__specs li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(22px, 2.6vw, 30px);
}

/* ---- Right: the pack ---- */
.hero__stage {
  display: grid; place-items: center;
  min-width: 0;
}
/* Let the image itself be the grid item so the sizing below applies unchanged. */
.hero__stage picture { display: contents; }
.hero__pack {
  width: 100%;
  max-width: min(100%, 560px);
  height: auto;
  max-height: min(62vh, 580px);
  object-fit: contain;
  /* The pack is a true cut-out, so drop-shadow follows the alpha edge and
     lifts it off the stage. (No blend mode — that would darken it here.) */
  filter: drop-shadow(0 26px 30px rgba(42,26,18,.20));
}

/* ---------- Cassava range ---------- */
.cassava { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.cassava__head {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 54px);
}
.cassava__head h2 { max-width: 16ch; }
.cassava__intro { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.6; max-width: 46ch; }
.cassava__intro strong { color: var(--brand-700); font-weight: 700; }

.cassava__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); }

.ccard {
  background: var(--paper);
  border-radius: var(--r-panel);
  border: 1px solid rgba(233,220,193,.9);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ccard__art {
  position: relative;
  height: clamp(240px, 26vw, 320px);
  background: var(--paper);
  display: grid; place-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
/* <picture> must not become the layout box -- .ccard__art is a grid and the
   img sizes against it, exactly as in .hero__stage. */
.ccard__art picture { display: contents; }
.ccard__art img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.ccard__flag {
  position: absolute; top: 16px; left: 16px;
  background: var(--brand); color: var(--cream);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.ccard__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ccard__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ccard__title h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--brand-700); }
.ccard__weight {
  flex: none;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-ink);
  background: var(--gold-soft);
  padding: 4px 10px; border-radius: 999px;
}
.ccard__tag {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: var(--brick);
  letter-spacing: -0.01em;
}
.ccard__desc { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.ccard__list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 7px; flex: 1; }
.ccard__list li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem; color: var(--ink-soft); line-height: 1.45;
}
.ccard__list li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 13px; height: 8px;
  border-left: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(-45deg);
}
.ccard__cook {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ccard__cook span {
  font-size: .8rem; color: var(--ink-soft);
  background: var(--cream);
  padding: 6px 12px; border-radius: 999px;
}
.ccard__cook strong { color: var(--brand-700); font-weight: 700; }

/* ---------- Why the new range ----------
   Kept light on purpose: the plate cut-out is the colour in this section,
   and the dark photo band follows straight after.

   The plate IS the diagram. Third design of this section: the icon-tile
   list was generic, the two-column comparison was cluttered; now the three
   claims annotate the food itself with pointer lines. The geometry below is
   tuned to a FIXED 1000x560 stage (plate 500px, centred), which is why the
   diagram only exists at >=1101px -- percentages would drift the line ends
   off the plate. Below that, the list stacks under the plate. */
.whynew { background: var(--cream); overflow: hidden; }
.whynew__head { text-align: center; max-width: 62ch; margin-inline: auto; }
.whynew__intro {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 4px auto 0;
}

.anno { margin-top: clamp(28px, 4vw, 40px); }
.anno__plate {
  position: relative;
  display: grid; justify-items: center;
  isolation: isolate;
}
/* Warm glow behind the plate so the cut-out has something to sit on. */
.anno__plate::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92%, 560px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,179,21,.30) 0%, rgba(239,179,21,.10) 45%, transparent 70%);
}
.anno__plate picture { display: grid; justify-items: center; width: 100%; }
.anno__plate img {
  width: 100%; max-width: 280px; height: auto;
  filter: drop-shadow(0 30px 34px rgba(42,26,18,.26));
}

/* Stacked list (mobile / tablet): dot markers stand in for pointer lines. */
.anno__list {
  list-style: none; padding: 0;
  margin: 26px auto 0; max-width: 560px;
  display: grid; gap: 18px;
}
.anno__item { position: relative; padding-left: 19px; }
.anno__item::before {
  content: ""; position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
}
.anno__claim {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.18rem, 1.6vw, 1.3rem);
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--brand-700);
}
.anno__counter {
  margin: 5px 0 0;
  font-size: .92rem; line-height: 1.5;
  color: var(--ink-soft);
}

/* The annotated-plate diagram. Fixed stage so the pointer-line endpoints stay
   on the plate: circle centre (500,280), radius 250. Each line's reach was
   solved against that circle at its own row height -- do not eyeball-edit one
   number without the others. */
@media (min-width: 1101px) {
  .anno {
    position: relative;
    width: 1000px; height: 560px;
    margin-inline: auto;
  }
  .anno__plate {
    position: absolute; left: 250px; top: 30px;
    width: 500px;
  }
  /* Rotated so annotation 2's dot lands on fries, not the ketchup pot. The
     pot sits at roughly 1:40 on the shot; the right dot lands at ~2:40.
     -30deg (counter-clockwise) swings the pot up to ~12:40, clear of all
     three landing points. The plate rim is circular, so the rotation itself
     is invisible -- only the food moves. */
  .anno__plate img { max-width: none; transform: rotate(-30deg); }
  /* display:contents so the absolutely-placed items position against .anno.
     role="list" is on the ul, so list semantics survive it. */
  .anno__list { display: contents; }
  .anno__item { position: absolute; margin: 0; padding: 0; }
  .anno__item--1 { left: 0;    top: 60px;  width: 230px; text-align: right; }
  .anno__item--2 { right: 0;   top: 230px; width: 230px; text-align: left; }
  .anno__item--3 { left: 10px; top: 430px; width: 250px; text-align: right; }

  /* Pointer line + the dot it lands on. The line hangs off the claim's first
     text line; the dot sits ON the fries, inside the pile. */
  .anno__item::before {
    /* repurposed as the landing dot */
    top: 10px; width: 8px; height: 8px;
  }
  .anno__item::after {
    content: ""; position: absolute; top: 13px;
    height: 1.5px; background: var(--brand); opacity: .5;
  }
  /* Reaches derived by pixel-marching each row inward until fry-coloured
     pixels start (139/58/58px past the labels, with the -30deg rotation),
     then landing 45px INSIDE the pile. The plate has a wide bare ceramic
     rim, so circle-radius math is not enough -- the dot must clear the rim
     AND the pile's ragged edge. */
  .anno__item--1::after { left: calc(100% + 10px);  width: 170px; }
  .anno__item--1::before { left: calc(100% + 180px); }
  /* Reach re-derived 2026-08-21 after this slot took over the six-minutes
     claim: at 99px the dot sat on a shadowed fry (rgb 138,71,0, only 2 of 4
     neighbours bright). 130px lands on rgb(157,82,10) with 4/4. */
  .anno__item--2::after { right: calc(100% + 10px); width: 120px; }
  .anno__item--2::before { right: calc(100% + 130px); left: auto; }
  .anno__item--3::after { left: calc(100% + 10px);  width: 89px; }
  .anno__item--3::before { left: calc(100% + 99px); }

  /* Entrance: the plate rolls in (travelling right while turning one
     clockwise revolution; .whynew's overflow:hidden clips the run-up), then
     the three annotations pop on in reading order as it settles. */
  html.js .anno.reveal { opacity: 1; transform: none; }
  html.js .anno.reveal picture {
    opacity: 0;
    transform: translateX(-75%) rotate(-360deg);
    transition: transform 2s var(--ease), opacity .8s var(--ease);
  }
  html.js .anno.reveal.in picture { opacity: 1; transform: translateX(0) rotate(0deg); }
  html.js .anno.reveal .anno__item {
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  html.js .anno.reveal.in .anno__item { opacity: 1; transform: none; }
  html.js .anno.reveal.in .anno__item--1 { transition-delay: 1.1s; }
  html.js .anno.reveal.in .anno__item--2 { transition-delay: 1.35s; }
  html.js .anno.reveal.in .anno__item--3 { transition-delay: 1.6s; }
}

/* ---------- Products / slider ---------- */


.products { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); }
.products__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: end; margin-bottom: 40px; }
.products__intro { color: var(--ink-soft); font-size: 1.02rem; max-width: 42ch; }

.slider { overflow: hidden; margin-inline: -4px; }
.slider__track {
  display: flex; gap: 22px;
  padding: 10px 4px 28px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.dragging { cursor: grabbing; scroll-snap-type: none; }
/* Belt and braces with the dragstart handler in script.js: stops the browser
   picking up a pack shot (or a run of text) as a native drag payload when the
   user is trying to swipe the slider. */
.slider__track img { -webkit-user-drag: none; user-drag: none; }
.slider__track { -webkit-user-select: none; user-select: none; }

.pcard {
  scroll-snap-align: start; flex: 0 0 300px;
  background: var(--paper); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(233,220,193,.8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pcard__art { position: relative; height: 250px; display: grid; place-items: center; background: var(--paper); overflow: hidden; }
.pcard__art picture { display: contents; }
/* min-height/max-height: height:100% does not resolve on a centred grid item
   (content-sized row -> indefinite percentage -> intrinsic square), so the
   900px pack shot ran past its box: 91px in the cassava cards, 48px here
   where overflow:hidden was cropping it. max-height resolves against the
   definite container height and clamps it. */
.pcard__art img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: cover; }
/* Frozen packs are wide and label-centred — show the whole bag, don't crop it. */
.pcard--contain .pcard__art img { object-fit: contain; padding: 14px; }
.pcard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--brand); color: var(--cream); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }

.pcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard__name { font-size: 1.28rem; color: var(--brand-700); }
.pcard__desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }

.weights { display: flex; gap: 8px; flex-wrap: wrap; }
.weight {
  padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--brand); background: var(--cream); box-shadow: inset 0 0 0 1.4px var(--line);
  transition: all .18s var(--ease);
}
.weight[aria-pressed="true"] { background: var(--brand); color: var(--cream); box-shadow: inset 0 0 0 1.4px var(--brand); }
/* CART DISABLED — pack size is now a read-only chip, not a control. */
.weight--static { cursor: default; background: var(--brand); color: var(--cream); box-shadow: inset 0 0 0 1.4px var(--brand); }

/* No prices anywhere, so the Add button carries the row on its own. */
.pcard__buy { display: flex; margin-top: 4px; }
.add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; gap: 7px;
  padding: 12px 16px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: .88rem;
  transition: transform .18s var(--ease), background .2s, color .2s;
}
.add-btn:hover { background: var(--gold-deep); color: var(--paper); transform: translateY(-2px); }
.add-btn:active { transform: scale(.96); }
.add-btn.added { background: var(--brand); color: var(--cream); }

.slider__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.slider__hint { font-size: .85rem; color: var(--ink-soft); }
.slider__buttons { display: flex; gap: 10px; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--brand); box-shadow: var(--shadow-sm), inset 0 0 0 1.4px var(--line); display: grid; place-items: center; transition: all .2s var(--ease); }
.round-btn:hover { background: var(--brand); color: var(--cream); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.round-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- Photo transition band ----------
   Full-bleed photo strip. The photo is a real image element, not a CSS
   background, so it can lazy-load below the fold. */
.pastaband {
  position: relative;
  min-height: clamp(280px, 38vw, 440px);
  display: grid; place-items: center;
  color: var(--cream);
  background: var(--brand-700);
  isolation: isolate;
  overflow: hidden;
}
.pastaband__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pastaband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(160deg, rgba(30,12,8,.74) 0%, rgba(126,13,18,.6) 60%, rgba(30,12,8,.7) 100%);
}
.pastaband__inner {
  text-align: center;
  padding: clamp(48px, 7vw, 100px) var(--page-px);
  max-width: 800px;
}
.pastaband__eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.pastaband__line {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pastaband__sub {
  margin-top: 18px;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  color: rgba(251,244,228,.88);
  max-width: 44ch;
  margin-inline: auto;
}

/* ---------- Story ---------- */
.story { padding-block: clamp(60px, 8vw, 110px); }

.story__hero { margin-bottom: clamp(36px, 4.5vw, 60px); }
.story__heroGrid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.story__title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: var(--brand-700);
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.story__lede p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 42ch;
}
.story__quick {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.story__quick li {
  display: flex; flex-direction: column;
  line-height: 1.2;
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}
.story__quick strong {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--brand-700);
  letter-spacing: -0.02em;
}
.story__quick span {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.story__chapters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.schap {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(233,220,193,.8);
  display: flex; flex-direction: column;
  gap: 10px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.schap:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.schap__num {
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.schap h3 { font-size: clamp(1.18rem, 1.6vw, 1.4rem); color: var(--brand-700); margin-top: 2px; }
.schap p { font-size: .94rem; color: var(--ink-soft); line-height: 1.62; }
.schap strong { color: var(--brand-700); font-weight: 700; }
.schap em { font-style: italic; color: var(--brand); }

/* Chain band — vertical integration in four steps */
.story__chainBand {
  background: linear-gradient(150deg, var(--brand-800), var(--brand-700));
  color: var(--cream);
  border-radius: var(--r-panel);
  padding: clamp(28px, 3.6vw, 48px);
}
.story__chainBand-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.story__chainBand-title { color: var(--cream); font-size: clamp(1.3rem, 1.9vw, 1.7rem); max-width: 28ch; }
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chain__item {
  position: relative;
  background: rgba(251,244,228,.08);
  border: 1px solid rgba(251,244,228,.16);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
}
/* Connector arrow between steps */
.chain__item:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -11px;
  width: 8px; height: 8px;
  border-top: 2px solid rgba(245,197,24,.7);
  border-right: 2px solid rgba(245,197,24,.7);
  transform: translateY(-50%) rotate(45deg);
}
.chain__num { font-family: var(--font-display); font-weight: 800; color: var(--amber); font-size: 1.05rem; letter-spacing: .04em; }
.chain__title { font-weight: 700; font-size: .96rem; color: var(--cream); line-height: 1.25; }
.chain__txt { font-size: .82rem; color: rgba(251,244,228,.78); line-height: 1.45; }

/* ---------- Quality ---------- */
.quality { background: var(--cream); }
.quality__head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.quality__head h2 { max-width: 18ch; }
.quality__intro { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.6; max-width: 42ch; }
.quality__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
.qcard {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(233,220,193,.8);
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.qcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.qcard__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--brand-400), var(--brand));
  color: var(--cream);
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -10px rgba(176,20,27,.85);
}
.qcard__icon svg { width: 22px; height: 22px; }
.qcard h3 { font-size: clamp(1.1rem, 1.4vw, 1.24rem); color: var(--brand-700); letter-spacing: -0.01em; }
.qcard p { font-size: .93rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Kitchen / recipes ---------- */
.recipes { background: var(--cream-deep); }
.recipes__head { margin-bottom: 36px; }
.recipes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.recipe {
  background: var(--paper); border-radius: var(--r-panel); overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(233,220,193,.8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.recipe:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.recipe__art { height: clamp(240px, 28vw, 340px); position: relative; overflow: hidden; }
.recipe__art picture { display: contents; }
.recipe__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.recipe:hover .recipe__art img { transform: scale(1.05); }
.recipe__body { padding: clamp(22px, 2.4vw, 30px); }
.recipe__meta { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-ink); font-weight: 600; }
.recipe__body h3 { font-size: clamp(1.28rem, 1.8vw, 1.55rem); margin: 8px 0 10px; color: var(--brand-700); }
.recipe__body p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Trade / distributors ---------- */
/* Cream, not white: the section now sits between the deep-red family band and
   the black footer, and a pure-white panel strobed between the two. The fact
   card flips to white so it still lifts off the section. */
.trade { background: var(--cream); }
.trade__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.trade__lead { color: var(--ink-soft); margin-top: 18px; font-size: 1.04rem; line-height: 1.6; max-width: 46ch; }
.trade__lead strong { color: var(--brand-700); font-weight: 700; }
.trade__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.trade__facts {
  list-style: none; padding: clamp(24px, 3vw, 34px); margin: 0;
  background: var(--paper);
  border-radius: var(--r-panel);
  border: 1px solid rgba(233,220,193,.9);
  box-shadow: var(--shadow-md);
  display: grid; gap: 2px;
}
/* Each row is icon + text column. The icon is decorative only -- the visible
   label above the value carries the meaning -- so the SVGs are aria-hidden. */
.trade__facts li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.trade__facts li:last-child { border-bottom: none; padding-bottom: 0; }
.trade__facts li:first-child { padding-top: 0; }
.trade__icon {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(239,179,21,.16);
  color: var(--brand-700);
  margin-top: 1px;
}
.trade__rowtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trade__k { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 600; }
.trade__v { font-weight: 600; color: var(--brand-700); font-size: 1rem; line-height: 1.45; }
/* WCAG 2.5.8 wants 24x24; at 12px/1.45 these links were 21px tall and sat
   on one line separated by a middot, so the three numbers were easy to
   mis-tap. Padding grows the hit box; the negative margin cancels it in
   layout, because an inline-block line box measures the margin box. */
.trade__v a {
  color: inherit; text-decoration: none;
  display: inline-block;
  padding: 7px 5px; margin: -7px -5px;
}
.trade__v a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Big Will family ---------- */
.family { background: linear-gradient(160deg, var(--brand), var(--brand-700)); }
.family__head { max-width: 52ch; margin-bottom: 40px; }
.family__intro { color: rgba(251,244,228,.82); margin-top: 16px; font-size: 1.02rem; }
.family__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.fcard {
  display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center;
  min-height: 170px; padding: 26px 18px;
  border-radius: var(--r-card);
  background: var(--paper);
  transition: transform .25s var(--ease), box-shadow .25s;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.fcard img { height: 44px; width: auto; max-width: 85%; object-fit: contain; margin-bottom: 4px; }
.fcard__role { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.fcard__visit {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 700;
  color: var(--brand);
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line);
  width: 100%; justify-content: center;
  transition: color .2s, gap .2s var(--ease);
}
.fcard:hover .fcard__visit { gap: 9px; color: var(--gold-ink); }
/* TOK has no site of its own — show it, but don't pretend it's clickable. */
.fcard--static { cursor: default; }
.fcard--static:hover { transform: none; box-shadow: var(--shadow-md); }
.fcard--static .fcard__visit { color: var(--ink-soft); font-weight: 500; }
.fcard--static:hover .fcard__visit { gap: 5px; color: var(--ink-soft); }
.fcard--active { background: var(--gold); }
/* The white wordmark needs less optical size than the square badges, and it
   stands alone now (no role line under it). */
.fcard--active img { height: 34px; }
.fcard--active .fcard__role { color: rgba(42,26,18,.85); }
.fcard--active .fcard__visit { color: var(--on-gold); border-top-color: rgba(42,26,18,.16); }
.fcard--active:hover .fcard__visit { color: var(--brand-700); }

/* ---------- Contact ---------- */
.contact { background: var(--cream); }
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.contact__lead { color: var(--ink-soft); margin-top: 18px; max-width: 42ch; }
.contact__list { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 2px; }
.contact__list li { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact__k { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 600; }
.contact__v { color: var(--ink); font-weight: 500; }
.contact__v a { color: var(--brand); }
.contact__v a:hover { color: var(--gold-ink); }

.contact__card { background: var(--paper); border-radius: var(--r-panel); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow-md); border: 1px solid rgba(233,220,193,.8); }
.contact__card h3 { font-size: 1.4rem; color: var(--brand-700); }
.contact__cardsub { color: var(--ink-soft); font-size: .92rem; margin: 8px 0 22px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea { padding: 13px 15px; border-radius: var(--r-input); background: var(--cream); border: 1.5px solid var(--line); color: var(--ink); transition: border-color .2s, box-shadow .2s; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(239,179,21,.2); }
.field__error { color: var(--error); font-size: .85rem; margin-bottom: 14px; }

/* ---------- Footer ---------- */
/* Black at Ashfar's request (was --brand-700 red). The white Aladey wordmark
   is a true cut-out, so it sits directly on the ground with no chip. */
.footer { background: var(--ink-black); color: var(--cream); padding-top: clamp(48px, 6vw, 72px); }
/* Third column carries the full company details now, so it gets more room. */
.footer__grid { display: grid; grid-template-columns: 1.4fr .9fr 1.25fr; gap: 40px; padding-bottom: 40px; }
.footer__logo { display: inline-flex; }
.footer__logo img { height: 40px; width: auto; }
.footer__tag { color: rgba(251,244,228,.75); margin-top: 16px; max-width: 34ch; }
.footer__col h3 { color: var(--cream); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; font-family: var(--font-body); font-weight: 700; }
.footer__col a, .footer__col p { display: block; color: rgba(251,244,228,.75); font-size: .94rem; margin-bottom: 10px; transition: color .2s; }
.footer__col a:hover { color: var(--amber); }
/* Company details, mirroring the #contact fact card on the black ground. */
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 11px; font-size: .94rem; line-height: 1.5; color: rgba(251,244,228,.75); }
.footer__icon {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(251,244,228,.09);
  color: var(--amber);
  margin-top: 1px;
}
.footer__contact a {
  display: inline-block; color: inherit;
  padding: 7px 5px; margin: -7px -5px;
}
.footer__contact a:hover { color: var(--amber); }
.footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid rgba(251,244,228,.16); font-size: .84rem; color: rgba(251,244,228,.65); }

/* ---------- Cart drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(42,18,12,.5); backdrop-filter: blur(2px); z-index: 150; opacity: 0; transition: opacity .3s; }
.drawer-overlay.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw); z-index: 160;
  background: var(--cream); box-shadow: -30px 0 80px -40px rgba(0,0,0,.6);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.3rem; color: var(--brand-700); }
.drawer__close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); transition: background .2s; }
.drawer__close:hover { background: var(--cream-deep); }
.drawer__items { flex: 1; overflow-y: auto; padding: 12px 24px; }

.citem { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.citem__art { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--paper); display: grid; place-items: center; border: 1px solid var(--line); }
.citem__art img { width: 100%; height: 100%; object-fit: cover; }
.citem__info { display: flex; flex-direction: column; gap: 3px; }
.citem__name { font-weight: 700; font-size: .96rem; color: var(--brand-700); }
.citem__meta { font-size: .8rem; color: var(--ink-soft); }
.citem__right { display: flex; align-items: center; }
.qty { display: flex; align-items: center; gap: 2px; background: var(--paper); border-radius: 999px; box-shadow: inset 0 0 0 1.4px var(--line); }
.qty button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); font-weight: 700; }
.qty button:hover { color: var(--gold-ink); }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: .88rem; }
.citem__remove { font-size: .76rem; color: var(--ink-soft); text-decoration: underline; }
.citem__remove:hover { color: var(--error); }

.drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--ink-soft); }
.drawer__empty-art { width: 70px; height: 70px; border-radius: 50%; background: var(--cream-deep); display: grid; place-items: center; color: var(--brand); }
.drawer__foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream); }
.drawer__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--brand-700); }
.drawer__note { font-size: .8rem; color: var(--ink-soft); margin: 8px 0 16px; }

/* ---------- Reveal animation (progressive enhancement) ----------
   Content is visible by default. Only when JS is active (html.js) do we
   hide-then-reveal, so the page is never stuck invisible without JS. */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .family__grid { grid-template-columns: repeat(3, 1fr); }
  .quality__grid { grid-template-columns: repeat(2, 1fr); }
  /* Plate first, then the reasons. */
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .hamburger { display: flex; }
  /* nav__links had `margin-left: auto` for the desktop push-right.
     When it's hidden, nothing pushes the actions right — fix that. */
  .nav__actions { display: flex; margin-left: auto; }

  /* Hero stacks on one column. */
  .hero__inner { min-height: 0; padding-block: 36px 28px; gap: 26px; }
  .hero__cols { grid-template-columns: 1fr; gap: 26px; }
  .hero__left { max-width: 100%; }
  /* One column at this width means the whole 900px is the headline's to use.
     The base clamp is 4.4vw, tuned for the two-column desktop hero, so at
     960px it was rendering at only 42px and leaving the right half of the
     hero empty. The body copy is NOT widened to match -- it is already at
     63ch, and stretching a measure past ~70ch to fill space costs
     readability. Fill it with hierarchy instead. */
  .hero__headline { font-size: clamp(2.4rem, 6vw, 3.4rem); max-width: 16ch; }
  /* Pitch first, pack under it. The stage used to be pulled above the copy
     with order:-1; Ashfar flipped it 2026-08-21 so the reader gets the
     headline and the CTA before the product shot. DOM order is already
     copy-then-stage, so this just stops overriding it. */
  .hero__stage { order: 0; }
  .hero__pack { max-height: min(60vh, 560px); max-width: min(100%, 620px); }
  .hero__rings { right: -12%; width: min(90vw, 560px); }

  .cassava__head { grid-template-columns: 1fr; align-items: start; }
  .products__head { grid-template-columns: 1fr; }
  .story__heroGrid { grid-template-columns: 1fr; align-items: start; }
  .story__chapters { grid-template-columns: 1fr; }
  .chain { grid-template-columns: repeat(2, 1fr); }
  /* Connectors only make sense along a row — drop the one that wraps. */
  .chain__item:nth-child(2)::after { display: none; }
  .story__chainBand-head { align-items: flex-start; }
  .quality__head { grid-template-columns: 1fr; align-items: start; }
  .recipes__grid { grid-template-columns: 1fr; }
  .trade__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  .nav__links.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); padding: 8px var(--page-px) 18px; box-shadow: var(--shadow-md); margin-left: 0; }
  .nav__links.open a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 620px) {
  .quality__grid { grid-template-columns: 1fr; }
  .family__grid { grid-template-columns: 1fr 1fr; }
  .chain { grid-template-columns: 1fr; }
  .chain__item::after { display: none !important; }
  .hero__pack { max-height: 46vh; }
  .cassava__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__base { flex-direction: column; gap: 8px; }
  .cart-btn__label { display: none; }
  .contact__list li { grid-template-columns: 1fr; gap: 4px; }
  .trade__actions .btn, .hero__actions .btn { width: 100%; justify-content: center; }
  .ccard__title { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Slimmer, balanced mobile header */
  .nav { gap: 10px; height: 64px; }
  .nav__actions { gap: 8px; }
  /* .lang used to be display:none here, back when it shared the row with the
     cart button. It is the only way to reach the other language, so it stays
     visible on a phone; only the padding tightens. */
  .lang { padding: 8px 10px; min-width: 38px; }
  .brand__logo { height: 32px; }
  .cart-btn { padding: 9px 13px; gap: 6px; }
  .cart-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: .7rem; }
  .hamburger { padding: 10px 6px; }
  .nav__links.open { top: 64px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
  /* No rolling plate and no staggered annotations — spinning a large image
     is exactly what this setting is asking us not to do. Show everything. */
  html.js .anno.reveal picture,
  html.js .anno.reveal .anno__item { opacity: 1; transform: none; transition: none; }
  .hero__badge-dot { animation: none; }
}
/* Doubled class beats .cassava__intro strong (0,1,1) without !important --
   these are (0,2,0). */
.txt-powercrops.txt-powercrops { color: var(--powercrops-green); }
.txt-foodlab.txt-foodlab { color: var(--foodlab-ink); }