/* ═══════════════════════════════════════════════════════════
   ALIMENTS GLOBAL — style.css v2.0
   Grid-background, neo-editorial, GSAP-powered
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&family=DM+Mono:wght@400;500&family=Caveat:wght@400;700&family=Space+Grotesk:wght@400;500;700&family=Shantell+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Chewy&family=Permanent+Marker&family=Noto+Sans+Devanagari:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&family=Noto+Sans+Ethiopic:wght@400;600;700&display=swap');

/* ── 1. RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* #site-nav is position:fixed at 62px tall; without this, every
   in-page anchor jump (e.g. "Start a Conversation" -> #contact-form)
   lands with the target's top edge hidden behind the nav. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-body); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; border-radius: 0; -webkit-appearance: none; }

/* ── 2. TOKENS ────────────────────────────────────────── */
:root {
  --cream:   #FAF7F0;
  --cream-2: #F0E6D0;
  --smoke:   #E8DECE;
  --ink:     #1A2E1A;
  --ink-60:  rgba(26,46,26,0.6);
  --ink-40:  rgba(26,46,26,0.4);
  --ink-10:  rgba(26,46,26,0.1);
  --spice:   #E8A020;
  --spice-lt:#F5C842;
  --chili:   #C4341A;
  --leaf:    #2D5A27;
  --pink:    #D6356E;
  --yellow:  #C9920A;
  --white:   #FFFFFF;
  /* --ink-fixed: for blocks designed to always be the dark/inverted
     accent (section--dark, page-hero, .card--ink, etc.) regardless of
     site theme — unlike --ink, this never flips in dark mode.
     --surface: the "elevated white card" colour (product-card,
     cert-card, .card, ...) — distinct from --white because --white is
     also used as literal white TEXT on those --ink-fixed blocks, and
     that must stay white even when --surface goes dark. */
  --ink-fixed: #1A2E1A;
  --surface: #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-hand:    'Caveat', cursive;
  /* Two distinct, characterful fonts for long-form copy — different
     sections of the same page deliberately read in different
     typefaces (client's "out of pocket" note: headings were fine,
     body text felt bland). Kept to two, applied consistently per
     section rather than mixed mid-paragraph, so it reads as
     intentional variety rather than a broken stylesheet. */
  --font-prose:     'Space Grotesk', sans-serif;
  --font-prose-alt: 'Shantell Sans', cursive;
  /* Reserved exclusively for comical/playful bits (floating country
     labels, chaos-layer text) — kept separate from --font-hand
     (Caveat), which is reserved for serious hand-annotations. */
  --font-comic: 'Chewy', cursive;
  /* Bold marker headline font — reserved for the hero block only, to
     match the approved reference image's literal type weight. */
  --font-marker: 'Permanent Marker', cursive;

  --border:    2px solid var(--ink);
  --border-sm: 1px solid rgba(26,46,26,0.12);
  --shadow:    4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --shadow-sp: 4px 4px 0 var(--spice);

  --max-w:  1380px;
  --pad-x:  clamp(20px, 5vw, 72px);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  --grid-line: rgba(26,46,26,0.07);
}

/* Dark mode — toggled via the lamp-switch-styled control in the nav.
   Overriding the tokens here, rather than per-component, is what lets
   the whole site (borders, shadows, grid lines all already built on
   var(--ink)/var(--cream)) re-skin itself for free. Brand accents
   (--spice/--chili/--leaf) are left untouched on purpose. */
:root[data-theme="dark"] {
  --cream:   #16140F;
  --cream-2: #1E1B14;
  --smoke:   #242019;
  --ink:     #EDE9DE;
  --ink-60:  rgba(237,233,222,0.6);
  --ink-40:  rgba(237,233,222,0.4);
  --ink-10:  rgba(237,233,222,0.1);
  --surface: #221F18;
  --grid-line: rgba(255,255,255,0.06);
}

/* ── 3. BODY — GRID IS THE BACKGROUND ────────────────── */
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100dvh;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  animation: grain 8s steps(7) infinite;
}
@keyframes grain {
  0%  { transform: translate(0,0); }
  15% { transform: translate(-3%,-5%); }
  30% { transform: translate(4%,2%); }
  45% { transform: translate(-2%,6%); }
  60% { transform: translate(5%,-3%); }
  75% { transform: translate(-4%,1%); }
  90% { transform: translate(2%,-4%); }
  100%{ transform: translate(0,0); }
}

/* ── 4. CUSTOM CURSOR ─────────────────────────────────── */
.c-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  will-change: transform;
}
.c-cursor__dot {
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.2s, transform 0.15s;
}
.c-cursor__ring {
  position: fixed;
  top: 0; left: 0;
  width: 44px; height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.25s, opacity 0.2s;
  will-change: transform;
}
body.cursor--hover .c-cursor__ring { width: 72px; height: 72px; border-color: var(--spice); }
body.cursor--hover .c-cursor__dot  { transform: translate(-50%,-50%) scale(0); }
body.cursor--text  .c-cursor__ring { width: 4px; height: 44px; border-radius: 2px; border-color: var(--ink); }

/* cursor commentary — small doodled glyph swapped in per hover zone */
.c-cursor__glyph {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px; line-height: 1; opacity: 0;
  transition: opacity 0.15s ease;
}
body.cursor--chili .c-cursor__ring,
body.cursor--mag   .c-cursor__ring { width: 40px; height: 40px; border-color: var(--chili); border-style: dashed; }
body.cursor--chili .c-cursor__glyph,
body.cursor--mag   .c-cursor__glyph { opacity: 1; }
body.cursor--chili .c-cursor__dot,
body.cursor--mag   .c-cursor__dot { transform: translate(-50%,-50%) scale(0); }

/* ── 5. TYPOGRAPHY ────────────────────────────────────── */
.display-2xl {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, 120px);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.045em;
}
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.5vw, 136px);
  font-weight: 900; line-height: 0.92; letter-spacing: -0.04em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 88px);
  font-weight: 800; line-height: 0.97; letter-spacing: -0.03em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.025em;
}
h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
}
h2 { font-size: clamp(32px, 4vw, 56px); }
h3 { font-size: clamp(22px, 2.5vw, 36px); }
h4 { font-size: clamp(17px, 1.6vw, 22px); }

/* Long-form copy gets the new prose fonts; nav/buttons/mono labels/
   hand-notes keep their own explicit font-family and are unaffected
   since those rules win on specificity. */
p { font-family: var(--font-prose); }
.edit-card__excerpt, .faq-body-inner p {
  font-family: var(--font-prose-alt);
}

.t-italic    { font-style: italic; }
.t-spice     { color: var(--spice); }
.t-chili     { color: var(--chili); }
.t-white     { color: var(--white); }
.t-muted     { color: var(--ink-40); }
.t-hand      { font-family: var(--font-hand) !important; }
.t-alt       { font-family: var(--font-prose-alt) !important; }
.t-comic     { font-family: var(--font-comic) !important; }
.t-mono      { font-family: var(--font-mono) !important; }
.t-pink      { color: var(--pink); }
.t-upper     { text-transform: uppercase; letter-spacing: 0.09em; }
.t-rot-neg   { display: inline-block; transform: rotate(-3deg); }
.t-rot-pos   { display: inline-block; transform: rotate(3deg); }
.t-body-lg   { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }

.label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--ink-40);
}
.label--spice { color: var(--spice); }
.label--white { color: rgba(255,255,255,0.45); }

.hand-note {
  font-family: var(--font-hand);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink-40);
  display: inline-block;
}

/* ── 6. LAYOUT ────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--narrow { max-width: 820px; }
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section--dark  { background-color: var(--ink-fixed); color: var(--white); }
.section--spice { background-color: var(--spice); }
.section--smoke { background-color: var(--smoke); }
.section--bordered { border-top: var(--border); border-bottom: var(--border); }

/* ── 7. NAV ───────────────────────────────────────────── */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: var(--border);
  transition: transform 0.45s var(--ease);
}
#site-nav.is-hidden { transform: translateY(-100%); }
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 62px; gap: 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  flex-shrink: 0;
}
.nav-logo img { height: 44px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 14px;
  position: relative; transition: color 0.2s;
}
.nav-link::after {
  content: ''; position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.hamburger {
  display: none; flex-direction: column;
  gap: 5px; padding: 4px; width: 36px;
}
.hamburger span { display: block; height: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── DARK MODE TOGGLE — same switch-pill language as the
   gallows-lamp's switch, reused here as a recurring visual motif. ── */
.theme-toggle {
  position: relative; width: 42px; height: 23px; border-radius: 13px;
  background: rgba(26,46,26,0.1); border: 2px solid var(--ink-40);
  padding: 2px; flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.theme-toggle:hover { border-color: var(--spice); }
.theme-toggle__nub {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); color: var(--ink-40);
  transition: transform 0.3s cubic-bezier(.3,1.4,.5,1), background 0.3s ease, color 0.3s ease;
}
.theme-toggle__bulb { width: 10px; height: 10px; }
[data-theme="dark"] .theme-toggle { background: rgba(232,160,32,0.18); border-color: var(--spice); }
[data-theme="dark"] .theme-toggle__nub { transform: translateX(17px); background: var(--spice); color: var(--ink); }

/* ── LANGUAGE SWITCHER ────────────────────────────────── */
.lang-switch {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.02em;
  border: var(--border-sm); background: transparent; color: var(--ink);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A2E1A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
  width: 108px; flex-shrink: 0;
  padding: 6px 30px 6px 12px;
  overflow: hidden; text-overflow: ellipsis;
}
.lang-switch:hover { border-color: var(--ink); }
.mob-lang { padding: 16px 0; display: flex; justify-content: center; }
.mob-lang .lang-switch { width: 180px; text-align: center; padding: 8px 30px 8px 12px; }

/* ── SCRIPT-SPECIFIC FONTS ────────────────────────────────
   The site's display/body fonts (Fraunces, DM Sans, etc.) don't cover
   Devanagari, Arabic, or Ethiopic glyphs, so each language attribute
   gets a font that actually renders its script. The site stays LTR
   in every language, by design — no direction/layout mirroring. */
[lang="hi"] { font-family: 'Noto Sans Devanagari', var(--font-body); }
[lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] h4 { font-family: 'Noto Sans Devanagari', var(--font-display); }
[lang="am"] { font-family: 'Noto Sans Ethiopic', var(--font-body); }
[lang="am"] h1, [lang="am"] h2, [lang="am"] h3, [lang="am"] h4 { font-family: 'Noto Sans Ethiopic', var(--font-display); }
[lang="ar"] { font-family: 'Noto Sans Arabic', var(--font-body); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-family: 'Noto Sans Arabic', var(--font-display); }

/* Mobile nav */
#mobile-nav {
  position: fixed; inset: 62px 0 0 0;
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  border-top: var(--border); z-index: 999;
  padding: clamp(40px,6vw,64px) var(--pad-x);
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.3s;
  pointer-events: none;
}
#mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: all; }
.mob-link {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 8vw, 72px); line-height: 1.1;
  padding: 10px 0; border-bottom: var(--border);
  transition: color 0.2s, padding-left 0.2s;
}
.mob-link:first-child { border-top: var(--border); }
.mob-link:hover { color: var(--spice); padding-left: 16px; }
.mob-cta { margin-top: 32px; }

/* ── 8. BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  border: var(--border); background: var(--ink-fixed); color: var(--white);
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink-fixed); color: var(--white); }
.btn--spice { background: var(--spice); color: var(--ink); box-shadow: var(--shadow-sp); }
.btn--spice:hover { box-shadow: 7px 7px 0 rgba(26,46,26,0.25); }
/* Certificate "Request a Copy" buttons: orange at rest, red on hover,
   reverting to orange the instant the cursor leaves. */
.btn--cert-pdf:hover { background: var(--chili); color: var(--white); }
.btn--white { background: var(--surface); color: var(--ink); box-shadow: 4px 4px 0 rgba(255,255,255,0.25); }
.btn--lg { padding: 17px 34px; font-size: 12px; }
.btn--sm { padding: 9px 18px; font-size: 10px; }

/* ── 9. HERO — seed-to-table brand video montage (10 story shots, no
   title card), gradient color-graded per scene AND the brand icon
   baked directly into the video file during the ffmpeg compositing
   pass — matching pladisglobal.com's own gradient technique, not a
   CSS overlay. Text sits top-left, anchored where every scene's
   gradient is darkest/strongest, so it (and the icon) stay legible no
   matter which beat is currently playing. The video itself is framed
   — not full-bleed — sitting inset on the site's normal grid-paper
   page background, bordered like every other card on the site.
   Desktop autoplays the full video; mobile shows a static poster and
   a "Watch our video" button that opens the same montage in a modal,
   to avoid burning mobile data on an unrequested autoplay file. ──── */
.hero {
  padding: clamp(28px,5vw,56px) var(--pad-x) clamp(48px,7vw,88px);
}
.hero-frame {
  position: relative; overflow: hidden;
  min-height: clamp(460px, 78vh, 800px);
  display: flex; align-items: flex-end;
  border: var(--border); box-shadow: var(--shadow-lg);
  background-color: var(--ink-fixed); color: var(--white);
}
.hero-video,
.hero-poster-mobile {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* object-position anchored to the top-left, not centered: on narrow/
     tall mobile frames a center-crop of this 16:9 footage slices off
     the entire left third of the frame — exactly where the baked-in
     logo and (on desktop) the text both live. Anchoring the crop here
     keeps that corner in view at every aspect ratio. */
  object-fit: cover; object-position: left top; z-index: 0;
}
.hero-poster-mobile { display: none; }
.hero-logo-overlay {
  position: absolute; top: 50%; right: clamp(32px, 6vw, 80px);
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(120px, 18vw, 260px);
  height: auto; pointer-events: none;
  opacity: 0.92;
}
.hero__overlay-content {
  position: relative; z-index: 1; max-width: 620px;
  padding: clamp(24px,4vw,48px);
}
.hero-headline {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.hero-subline {
  display: block; margin-top: 16px; max-width: 480px;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55;
  color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* The base .btn--ghost is tuned for light page backgrounds (dark-ink
   text on transparent); over a video it needs to flip to light text
   and a visible light border to stay legible against any frame. */
.hero .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,0.18); color: var(--white); }
.hero-watch-btn { display: none; }

@media (max-width: 800px) {
  .hero-frame { min-height: clamp(420px, 74vh, 620px); }
  .hero-video { display: none; }
  .hero-poster-mobile { display: block; }
  .hero-watch-btn { display: inline-flex; }
  .hero__overlay-content { padding-top: 24px; }
  .hero-logo-overlay {
    top: 20px; right: 20px; transform: none;
    width: clamp(72px, 18vw, 110px);
    opacity: 0.8;
  }
}

/* ── HERO VIDEO MODAL — mobile "Watch our video" affordance, modeled
   structurally on pladis's own mobile pattern (poster + button +
   fullscreen modal), but plays our own complete montage rather than
   linking to a separate longer cut, since the hero IS the full story
   here. Lazy-loaded: the <source> only gets a real src once opened,
   so the file is never fetched until a visitor actually asks for it. */
.hero-video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.hero-video-modal.is-open { display: flex; }
.hero-video-modal__backdrop { position: absolute; inset: 0; background: rgba(10,12,8,0.88); }
.hero-video-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 720px;
  background: #000; border-radius: 4px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.hero-video-modal__video { display: block; width: 100%; height: auto; }
.hero-video-modal__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: var(--white);
  border: none; font-size: 22px; line-height: 1; cursor: pointer;
}
.hero-video-modal__close:hover { background: rgba(0,0,0,0.8); }

/* ── 10. MARQUEE ──────────────────────────────────────── */
.marquee-wrap {
  border-top: var(--border); border-bottom: var(--border);
  background-color: var(--ink); overflow: hidden; padding: 12px 0;
  position: relative; z-index: 1;
}
.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: scroll-marquee 32s linear infinite;
}
.marquee-item {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 700;
  color: var(--cream); padding: 0 40px; white-space: nowrap;
  display: flex; align-items: center; gap: 40px;
}
.marquee-item::after {
  content: '✦'; color: var(--spice); font-size: 0.7em;
}
@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 11. BENTO GRID ───────────────────────────────────── */
.bento-header {
  padding: clamp(32px,4vw,56px) 0 clamp(24px,3vw,40px);
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-left: var(--border); border-top: var(--border);
}
.bc { /* bento cell */
  border-right: var(--border); border-bottom: var(--border);
  position: relative; overflow: hidden;
  cursor: pointer; min-height: 240px;
}
/* All 10 product cards auto-fill the 5-col grid (span 1 each = 5×2 rectangle).
   Only the Private Label banner needs an explicit rule — full width at the bottom. */
.bc:nth-child(11) { grid-column: span 5; min-height: 200px; }

.bc__front, .bc__back {
  position: absolute; inset: 0;
  padding: clamp(18px,2.4vw,32px);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.5s var(--ease);
}
.bc__back {
  transform: translateY(102%);
  background-color: var(--ink-fixed); color: var(--white);
}
.bc:hover .bc__front { transform: translateY(-102%); }
.bc:hover .bc__back  { transform: translateY(0); }

.bc--ink    { background-color: var(--ink-fixed); color: var(--white); }
.bc--ink .bc__back    { background-color: var(--spice); color: var(--ink); }
.bc--spice  { background-color: var(--spice); }
.bc--spice .bc__back  { background-color: var(--ink-fixed); color: var(--white); }
.bc--chili  { background-color: var(--chili); color: var(--white); }
.bc--cream  { background-color: var(--surface); }

/* Back face becomes a real food photo on hover — no shade/gradient,
   just the photo, with a text halo standing in for legibility. */
.bc__back--photo { overflow: hidden; }
.bc__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.bc__back--photo > *:not(.bc__photo) { position: relative; z-index: 2; }
.bc__back--photo .bc__cta { margin-top: auto; }
.bc__back.bc__back--tint-ink   { color: var(--white); }
.bc__back.bc__back--tint-spice { color: var(--ink-fixed); }
.bc__back.bc__back--tint-none  { color: var(--ink); }
.bc__back--tint-ink .bc__cat,
.bc__back--tint-spice .bc__cat { opacity: 0.7; }
/* Halo so text stays legible over whatever's directly behind it. */
.bc__back--tint-ink .bc__cat, .bc__back--tint-ink .bc__desc {
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.6);
}
.bc__back--tint-spice .bc__cat, .bc__back--tint-spice .bc__desc,
.bc__back--tint-none .bc__cat, .bc__back--tint-none .bc__desc {
  text-shadow: 0 1px 8px rgba(255,255,255,0.8), 0 1px 2px rgba(255,255,255,0.85);
}

.bc__ghost-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(80px, 8vw, 130px); line-height: 1;
  opacity: 0.07; position: absolute; bottom: -12px; right: 12px;
  pointer-events: none; transition: opacity 0.3s;
  letter-spacing: -0.05em;
}
.bc:hover .bc__ghost-num { opacity: 0; }
.bc--ink .bc__ghost-num, .bc--spice .bc__ghost-num, .bc--chili .bc__ghost-num { opacity: 0.12; }

.bc__cat   { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; }
.bc__name  { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3vw,44px); line-height: 1.05; margin-top: auto; }
.bc__count { font-family: var(--font-mono); font-size: 10px; opacity: 0.45; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.bc__desc  { font-size: 14px; line-height: 1.6; opacity: 0.75; margin-top: 12px; flex: 1; }
.bc__cta   { margin-top: 20px; align-self: flex-start; }

/* Private label bento cell */
.bc--private .bc__front {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
}
.bc--private .bc__front-text { display: flex; flex-direction: column; gap: 12px; }

/* ── 12. NUMBERS ──────────────────────────────────────── */
.numbers-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--border); border-bottom: var(--border);
  background-color: var(--ink);
}
.num-block {
  padding: clamp(40px,5vw,64px) clamp(24px,3vw,44px);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.num-block:last-child { border-right: none; }
.num-block__val {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 7vw, 104px); line-height: 1;
  color: var(--spice); letter-spacing: -0.04em;
}
.num-block__suffix { font-size: 0.45em; color: var(--spice-lt); vertical-align: super; }
.num-block__label  {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4); margin-top: 8px;
}
.num-block__note {
  font-family: var(--font-hand); font-size: 18px;
  color: rgba(255,255,255,0.22); margin-top: 6px;
}

/* ── 13. PULLQUOTE ────────────────────────────────────── */
.pullquote { padding: clamp(56px,7vw,100px) 0; position: relative; }
.pullquote__open {
  font-family: var(--font-display); font-size: clamp(80px,10vw,140px);
  font-weight: 900; color: var(--spice); line-height: 0.7;
  margin-bottom: -16px; display: block;
}
.pullquote__text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(26px, 3.2vw, 50px); font-weight: 700;
  line-height: 1.22; max-width: 860px;
}
.pullquote__foot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--ink-10);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-40); display: inline-flex; align-items: center; gap: 12px;
}

/* ── 14. STORY GRID ───────────────────────────────────── */
.story-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border: var(--border);
}
.story-split__img {
  overflow: hidden; min-height: 480px; position: relative;
  border-right: var(--border);
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.story-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-split__img--scrim::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20,26,15,0.62) 0%, rgba(20,26,15,0.22) 42%, transparent 68%);
}
.story-split__img--scrim .ph-copy { z-index: 2; color: var(--white); }
.story-split__img--scrim .ph-copy__tag,
.story-split__img--scrim .ph-copy__body { color: rgba(255,255,255,0.75); }
.story-split__img--scrim .ph-copy__stat { color: var(--white); }
.story-split__img--scrim .ph-copy__ghost { color: var(--white); opacity: 0.1; }
.story-split__body {
  padding: clamp(40px,5vw,64px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.story-split__body--dark {
  background-color: var(--ink-fixed); color: var(--white);
}
.story-stat-row {
  display: flex; gap: 32px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 32px; flex-wrap: wrap;
}
.story-stat__val {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px,4vw,56px); color: var(--spice); letter-spacing: -0.03em;
}
.story-stat__lbl {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35); margin-top: 4px;
}

/* ── STORY SPLIT — MAP VARIANT — flex column: placeholder on top,
   dark text body in the middle, info bar at the bottom. ─────────── */
.story-split--map { display: flex; flex-direction: column; }

/* ── SHIPPING TEASER ────────────────────────────────────── */

.snp-teaser {
  position: relative;
  min-height: 460px;
  background: var(--ink-fixed);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: var(--border);
}

/* "Feature coming soon" — sits behind the orange overlay */
.snp-coming-soon {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center; padding: 48px 24px;
  position: relative; z-index: 1;
}
.snp-coming-soon__icon {
  width: 64px; height: 64px; flex-shrink: 0;
}
.snp-coming-soon__label {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--spice); letter-spacing: -0.02em; margin: 0;
}
.snp-coming-soon__sub {
  font-family: var(--font-mono); font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(255,255,255,0.35); letter-spacing: 0.04em;
  line-height: 1.7; margin: 0;
}

/* Orange overlay */
.snp-teaser .sonepat-ph-overlay {
  position: absolute; inset: 0; z-index: 2;
  background-color: var(--spice);
  background-image:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.65s ease;
}
.snp-teaser.is-revealed .sonepat-ph-overlay {
  opacity: 0; pointer-events: none;
}
.snp-teaser.is-revealed .snp-coming-soon { animation: snp-fadein 0.5s 0.45s both ease; }
@keyframes snp-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sonepat-ph-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 40px; text-align: center; padding: 56px 48px; max-width: 700px;
}
.sonepat-ph-text {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 3.6vw, 50px);
  color: var(--ink-fixed); line-height: 1.15; letter-spacing: -0.02em;
}
.sonepat-ph-text em {
  display: block; font-style: italic; font-weight: 600;
  font-size: 0.65em; color: rgba(26,46,26,0.6);
  margin-top: 12px; letter-spacing: 0;
}
.sonepat-ph-cta {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.sonepat-ph-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 260px; height: 96px; pointer-events: none;
}
.sonepat-ph-btn {
  font-family: 'Caveat', cursive; font-size: 32px; font-weight: 700;
  color: var(--ink-fixed); background: none; border: none;
  cursor: pointer; padding: 18px 64px; letter-spacing: 0.02em;
  transition: transform 0.2s ease, color 0.2s;
  position: relative; z-index: 1;
}
.sonepat-ph-btn:hover { transform: scale(1.06) rotate(-1.5deg); color: rgba(26,46,26,0.6); }
.sonepat-ph-cta:hover .sonepat-ph-ring ellipse { stroke: rgba(26,46,26,0.85); }
.sonepat-map__info {
  display: flex; align-items: center; justify-content: space-between;
  border-top: var(--border); padding: 18px 24px; gap: 16px;
  background: var(--cream);
}
.sonepat-map__badge {
  display: flex; flex-direction: column; gap: 1px; position: relative;
}
.sonepat-map__badge-ghost {
  position: absolute; top: -8px; left: -4px;
  font-family: var(--font-display); font-weight: 900; font-size: 46px;
  color: var(--ink-fixed); opacity: 0.07; letter-spacing: -0.04em; line-height: 1;
  pointer-events: none;
}
.sonepat-map__badge-tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-40); position: relative;
}
.sonepat-map__badge-stat {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: var(--ink-fixed); position: relative;
}
.sonepat-map__title {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-40); text-align: right;
}

/* ── 15. CERT STRIP ───────────────────────────────────── */
.cert-strip {
  display: flex; flex-wrap: nowrap;
  border-top: var(--border); border-bottom: var(--border);
  overflow-x: auto;
}
.cert-chip {
  flex-shrink: 0; flex: 1; min-width: 140px;
  padding: 28px 20px;
  border-right: var(--border);
  display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
  transition: background-color 0.25s; cursor: pointer;
}
.cert-chip:last-child { border-right: none; }
.cert-chip:hover { background-color: var(--spice); }
.cert-chip__badge {
  width: 52px; height: 52px; border: var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 10px; text-align: center; line-height: 1.15;
}
.cert-chip__name {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.cert-chip__status {
  font-family: var(--font-hand); font-size: 15px; color: #1A5C1A;
}

/* ── 16. STICKERS ─────────────────────────────────────── */
.sticker {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; border: var(--border);
  font-family: var(--font-hand); line-height: 1.25;
  box-shadow: var(--shadow); cursor: grab; user-select: none;
}
.sticker:active { cursor: grabbing; }
.sticker--round { border-radius: 50%; width: 108px; height: 108px; font-size: 14px; }
.sticker--badge { padding: 10px 18px; font-size: 19px; }
.sticker--ink   { background: var(--ink-fixed); color: var(--white); }
.sticker--spice { background: var(--spice); color: var(--ink); }
.sticker--white { background: var(--surface); color: var(--ink); }
.sticker--cream { background: var(--cream); color: var(--ink); }
.sticker:hover  { box-shadow: var(--shadow-lg); transform: scale(1.06) !important; transition: box-shadow 0.2s, transform 0.2s; }

/* ── 17. CTA SECTION ──────────────────────────────────── */
.cta-block {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 32px;
}
.cta-block h2 { max-width: 640px; }

/* ── 18. FOOTER (sticker cluster used by CTA section) ───── */
/* Footer sticker cluster */
.footer-stickers {
  position: absolute; top: clamp(32px,4vw,56px); right: var(--pad-x);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 14px; z-index: 2; pointer-events: none;
}

/* ── 19. PAGE HERO (inner pages) ──────────────────────── */
.page-hero {
  padding-top: calc(62px + clamp(56px,7vw,96px));
  padding-bottom: clamp(56px,7vw,96px);
  border-bottom: var(--border);
  position: relative; overflow: hidden;
  background-color: var(--ink-fixed); color: var(--white);
}
.page-hero__eyebrow { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.page-hero__eyebrow-line { width: 32px; height: 1px; background: rgba(255,255,255,0.3); }
.page-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 9vw, 140px);
  line-height: 0.92; letter-spacing: -0.04em;
}
.page-hero__title em { color: var(--spice); }
.page-hero__sub {
  margin-top: 24px; font-size: clamp(16px,1.4vw,19px);
  max-width: 540px; line-height: 1.65;
  color: rgba(255,255,255,0.6);
}
.page-hero__sticker { position: absolute; top: calc(62px + 40px); right: var(--pad-x); }
.page-hero__art {
  position: absolute; right: clamp(20px, 5vw, 90px); bottom: 0;
  height: 78%; max-width: 34vw; width: auto; object-fit: contain;
  object-position: bottom; z-index: 0; pointer-events: none;
}
.page-hero__art--tall { height: 88%; }
.page-hero__art--lift { bottom: clamp(40px, 7vw, 100px); }
.page-hero__art--scene {
  height: auto; width: clamp(320px, 40vw, 580px); max-width: 48vw; right: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 14%, black 32%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 14%, black 32%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 900px) {
  .page-hero__art { display: none; }
}
.page-hero__breadcrumb {
  position: absolute; bottom: 28px; left: var(--pad-x);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.28);
}
.page-hero__breadcrumb a { color: inherit; transition: color 0.2s; }
.page-hero__breadcrumb a:hover { color: var(--spice); }

/* ── 20. CARDS (generic) ──────────────────────────────── */
.card {
  border: var(--border); background: var(--surface);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); }
.card--ink   { background: var(--ink-fixed); color: var(--white); }
.card--spice { background: var(--spice); }
.card--smoke { background: var(--smoke); }
.card-pad    { padding: clamp(24px,3vw,36px); }

/* ── 21. PRODUCT CARDS ────────────────────────────────── */
.product-card {
  border: var(--border); background: var(--surface);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.product-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.product-image {
  aspect-ratio: 16/9; overflow: hidden;
  background: var(--smoke); border-bottom: var(--border);
  display: flex; align-items: center; justify-content: center;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .product-image img { transform: scale(1.07); }
.product-placeholder {
  font-family: var(--font-hand); font-size: 15px;
  color: var(--ink-40); text-align: center; padding: 16px;
  line-height: 1.4;
}
.product-body {
  padding: clamp(18px, 2vw, 26px);
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  position: relative;
  background-image: repeating-linear-gradient(
    transparent 0 27px, rgba(96,134,196,0.38) 27px 28px
  );
  background-position: 0 14px;
}
.product-body::before {
  content: ''; position: absolute; left: 28px; top: 0; bottom: 0;
  width: 1.5px; background: rgba(196,52,26,0.45); z-index: 0; pointer-events: none;
}
.product-body h4 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.02em;
  padding-left: 12px; position: relative; z-index: 1;
}
.product-body p  {
  font-size: 15px; color: var(--ink-60); line-height: 1.75;
  flex: 1; padding-left: 12px; position: relative; z-index: 1;
}
.product-body .btn { margin-top: 14px; align-self: flex-start; position: relative; z-index: 1; }

/* ── 22. CERT CARDS ───────────────────────────────────── */
.cert-card {
  border: var(--border); background: var(--surface);
  box-shadow: var(--shadow); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.cert-card:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); }
.cert-card__watermark {
  position: absolute; bottom: -12px; right: 8px;
  font-family: var(--font-display); font-size: 84px; font-weight: 900;
  color: rgba(26,46,26,0.04); line-height: 1; pointer-events: none;
}
.cert-top { display: flex; align-items: center; justify-content: space-between; }
.cert-badge-sm {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--ink-fixed); color: var(--white); padding: 4px 10px;
}
.cert-active-badge {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  background: #D4F5D4; color: #1A5C1A; padding: 4px 10px; border: 1px solid #1A5C1A;
}
.cert-details { display: flex; flex-direction: column; gap: 0; }
.cert-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-10);
  font-size: 13px;
}
.cert-row:last-child { border-bottom: none; }
.cert-row__lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-40); flex-shrink: 0; }
.cert-row__val { font-weight: 600; text-align: right; }
.cert-issuer { font-size: 12px; color: var(--ink-40); }
.cert-caption { font-size: 15px; color: var(--ink-60); margin-top: -4px; }

.cert-top-right { display: flex; align-items: center; gap: 8px; }
.cert-stamp {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid var(--chili); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 7px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--chili); text-align: center; line-height: 1.1;
  pointer-events: none;
}
.cert-stamp__splat {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,52,26,0.22) 0%, rgba(196,52,26,0.06) 55%, transparent 75%);
  opacity: 0;
}

/* ── 23. FAQ ──────────────────────────────────────────── */
.faq-list { border-top: var(--border); }
.faq-item { border-bottom: var(--border); }
.faq-btn {
  width: 100%; text-align: left; padding: 20px 0;
  font-family: var(--font-display); font-size: clamp(15px,1.4vw,19px);
  font-weight: 700; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; background: none; border: none;
  color: var(--ink); cursor: pointer; transition: color 0.2s;
}
.faq-btn:hover { color: var(--spice); }
.faq-icon {
  font-family: var(--font-mono); font-size: 22px; font-weight: 300;
  color: var(--spice); flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner { overflow: hidden; }
.faq-body-inner p {
  padding-bottom: 22px; font-size: 15px;
  color: var(--ink-60); line-height: 1.7;
}
.faq-cat-head {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px,2.5vw,36px);
  margin: 56px 0 0; padding: 20px 0;
  border-bottom: var(--border);
  display: flex; align-items: baseline; gap: 14px;
}
.faq-cat-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-40); letter-spacing: 0.1em;
}

/* ── 24. ABOUT VALUES GRID ────────────────────────────── */
.values-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: var(--border); border-left: var(--border);
}
.value-cell {
  border-right: var(--border); border-bottom: var(--border);
  padding: clamp(28px,3vw,44px); position: relative; overflow: hidden;
  transition: background-color 0.3s;
}
.value-cell:hover { background-color: var(--spice); }
.value-num {
  font-family: var(--font-display); font-size: 72px; font-weight: 900;
  color: rgba(26,46,26,0.06); position: absolute;
  top: -8px; right: 8px; line-height: 1; pointer-events: none;
}
.value-cell h4 { font-size: 19px; position: relative; z-index: 1; margin-top: 16px; }
.value-cell p  { font-size: 14px; color: var(--ink-60); margin-top: 8px; line-height: 1.6; position: relative; z-index: 1; }
.value-cell:hover p { color: var(--ink); }

/* ── 25. CONTACT LAYOUT ───────────────────────────────── */
.contact-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border: var(--border);
}
.contact-info-col { padding: clamp(40px,5vw,64px); border-right: var(--border); }
.contact-form-col { padding: clamp(40px,5vw,64px); }
.contact-detail {
  display: flex; gap: 16px; padding: 14px 0;
  border-bottom: var(--border-sm);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail__icon { font-size: 18px; flex-shrink: 0; width: 28px; margin-top: 2px; }
.contact-detail__lbl  {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-40); margin-bottom: 4px;
}
.contact-detail__val  { font-size: 15px; line-height: 1.5; }

/* Form */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-40);
}
.form-field input, .form-field textarea, .form-field select {
  padding: 12px 14px; border: var(--border); background: var(--cream);
  font-size: 15px; outline: none; transition: box-shadow 0.2s;
  background-color: var(--cream);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { box-shadow: var(--shadow); background-color: var(--surface); }
.form-field textarea { resize: vertical; min-height: 120px; }
.phone-row { display: flex; gap: 0; }
.phone-row .phone-country-select {
  flex: 0 0 auto; width: 120px;
  padding: 12px 10px; border: var(--border); border-right: none;
  background: var(--cream); font-size: 14px; outline: none;
  cursor: pointer; transition: box-shadow 0.2s;
}
.phone-row .phone-country-select:focus { box-shadow: var(--shadow); background-color: var(--surface); }
.phone-row input[type="tel"] {
  flex: 1 1 auto; border: var(--border);
  padding: 12px 14px; background: var(--cream);
  font-size: 15px; outline: none; transition: box-shadow 0.2s;
}
.phone-row input[type="tel"]:focus { box-shadow: var(--shadow); background-color: var(--surface); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-stack  { display: flex; flex-direction: column; gap: 18px; }

/* ── 26. WORLD MAP ────────────────────────────────────── */
.map-wrap { width: 100%; }
.map-wrap svg { width: 100%; height: auto; }
#dot-matrix-map circle { fill: rgba(255,255,255,0.12); transition: fill 0.2s; }
#dot-matrix-map .supply-country { fill: var(--spice); }
.continent-group { cursor: pointer; }
.continent-group:hover circle { fill: rgba(255,255,255,0.28); }
.continent-group:hover .supply-country { fill: var(--spice-lt); }

/* ── 27. PRODUCTS PAGE ────────────────────────────────── */
.products-wrap {
  display: grid; grid-template-columns: 220px 1fr;
  border-top: var(--border); min-height: 60vh;
}
.products-sidebar {
  border-right: var(--border); position: sticky;
  top: 62px; height: calc(100vh - 62px); overflow-y: auto;
}
.sidebar-nav-head {
  padding: 16px 20px; background-color: var(--ink);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--cream);
  border-bottom: var(--border);
}
.s-link {
  display: block; padding: 14px 20px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(26,46,26,0.08);
  transition: background-color 0.2s, color 0.2s, padding-left 0.2s;
}
.s-link:hover, .s-link.is-active {
  background-color: var(--ink); color: var(--spice); padding-left: 28px;
}
.products-content { padding: clamp(32px,4vw,56px); }
.prod-category { margin-bottom: clamp(56px,7vw,96px); border-bottom: var(--border); padding-bottom: clamp(40px,5vw,64px); }
.prod-category:last-child { border-bottom: none; }
.prod-cat-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px; margin-bottom: 28px;
}
.prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.prod-count {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-40); flex-shrink: 0;
}

/* ── 28. PROCESS / TIMELINE ───────────────────────────── */
.process-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: var(--border); border-left: var(--border);
}
.process-step {
  border-right: var(--border); border-bottom: var(--border);
  padding: clamp(28px,3vw,44px); position: relative; overflow: hidden;
  transition: background-color 0.3s;
}
.process-step:hover { background-color: var(--spice); }
.process-num {
  font-family: var(--font-display); font-weight: 900; font-size: 64px;
  color: rgba(26,46,26,0.07); line-height: 1; margin-bottom: 12px;
}
.process-step h3 { font-size: 18px; }
.process-step p  { font-size: 13px; color: var(--ink-60); margin-top: 8px; line-height: 1.6; }
.process-step:hover p { color: var(--ink); }

/* ── 29. REVEAL ANIMATIONS ────────────────────────────── */
[data-reveal] { will-change: transform, opacity; }

/* ── 30. RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bc:nth-child(11) { grid-column: span 2; }
  .numbers-strip   { grid-template-columns: repeat(2,1fr); }
  .footer-inner    { grid-template-columns: 1fr 1fr; }
  .story-split     { grid-template-columns: 1fr; }
  .story-split__img { border-right: none; border-bottom: var(--border); min-height: 360px; }
  .values-grid     { grid-template-columns: 1fr 1fr; }
  .process-grid    { grid-template-columns: 1fr 1fr; }
  /* Sidebar stays vertical (just narrower) down through tablet widths —
     it only collapses to a horizontal bar at the same breakpoint the
     rest of the nav goes mobile (800px, below). */
  .products-wrap   { grid-template-columns: 160px 1fr; }
  .s-link          { padding: 12px 14px; font-size: 10px; }
  .prod-grid       { grid-template-columns: repeat(2,1fr); }
  .contact-split   { grid-template-columns: 1fr; }
  .contact-info-col { border-right: none; border-bottom: var(--border); }
}
@media (max-width: 800px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger  { display: flex; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .cert-strip  { flex-wrap: wrap; }
  .cert-chip   { min-width: 50%; }
  .footer-stickers { display: none; }
  /* True mobile widths — no room for any vertical column alongside
     content, so the category nav becomes a horizontal scroll bar. */
  .products-wrap   { grid-template-columns: 1fr; }
  .products-sidebar { position: static; height: auto; border-right: none; border-bottom: var(--border); display: flex; flex-wrap: wrap; }
  .s-link { padding: 14px 20px; font-size: 11px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bc:nth-child(n) { grid-column: span 1; min-height: 200px; }
  .footer-inner { grid-template-columns: 1fr; }
  .values-grid  { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .prod-grid    { grid-template-columns: 1fr; }
}

/* ── MANIFESTO ────────────────────────────────────────────── */
.manifesto-section {
  border-top: var(--border); border-bottom: var(--border);
  padding: clamp(56px, 8vw, 120px) 0; position: relative; overflow: hidden;
}
.manifesto-inner {
  display: grid; grid-template-columns: 1fr clamp(340px, 38vw, 480px);
  gap: clamp(40px, 6vw, 96px); align-items: start;
  position: relative;
}
.manifesto-label-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.manifesto-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-40);
}
.manifesto-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 1; color: rgba(26,46,26,0.12); letter-spacing: -0.06em;
}
.manifesto-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.5; letter-spacing: -0.015em;
}
.manifesto-text em     { color: var(--spice); font-style: italic; }
.manifesto-text strong { font-weight: 900; }
.manifesto-foot { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.manifesto-aside { font-family: var(--font-hand); font-size: 22px; color: var(--ink-40); display: inline-block; transform: rotate(-2deg); }

/* ── EDITORIAL CARDS ──────────────────────────────────────── */
.edit-section-head {
  padding-top: clamp(40px, 5vw, 64px);
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.edit-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-left: var(--border); border-top: var(--border);
  margin-top: clamp(24px, 3vw, 40px);
}
.edit-row--3 { grid-template-columns: repeat(3, 1fr); }

/* ── INDUSTRY STAMPS — passport-stamp badges for "Industries we
   serve." Circular, perforated-edge, rotated, alternating ink/chili
   rings, scattered like stamps on a passport page. ─────────────── */
.industry-stamps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  justify-content: center; justify-items: center; align-items: start;
  gap: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
  margin: clamp(32px, 4vw, 56px) auto 0;
  max-width: 800px;
}
.industry-stamp {
  width: clamp(160px, 19vw, 220px); aspect-ratio: 1 / 1;
  border-radius: 50%; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px;
  background: var(--cream);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1.3), box-shadow 0.3s ease;
  cursor: default;
}
.industry-stamp::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed currentColor; opacity: 0.55;
}
.industry-stamp::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.35;
}
.industry-stamp--ink   { color: var(--ink-fixed); }
.industry-stamp--chili { color: var(--chili); }
.industry-stamp__icon {
  width: 46%; max-height: 38%; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}
.industry-stamp__label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3;
  text-align: center; color: var(--ink); opacity: 0.85;
}
.industry-stamp:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 700px) {
  .industry-stamps { grid-template-columns: repeat(2, 1fr); max-width: 420px; gap: 24px; }
  .industry-stamp { width: clamp(130px, 36vw, 165px); }
}
.edit-card {
  border-right: var(--border); border-bottom: var(--border);
  display: flex; flex-direction: column;
  transition: background-color 0.3s var(--ease); cursor: pointer;
}
.edit-card:hover { background-color: var(--spice); }
.edit-card__face {
  aspect-ratio: 16/9; border-bottom: var(--border);
  position: relative; overflow: hidden;
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.edit-card__face-tag {
  position: absolute; bottom: 10px; left: 14px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-40);
}

/* ── Color-drain reveal: card opens on a solid color + the word in
   white; the real photo is already underneath, just hidden. Hovering
   fades the color tint away, "draining" it to reveal the photo. ──── */
.edit-card__face-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.edit-card__face-tint {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease);
}
.edit-card:hover .edit-card__face-tint { opacity: 0; pointer-events: none; }
.edit-card__face-word {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--white);
}
.edit-card__face-tint--chili { background-color: var(--chili); }
.edit-card__face-tint--leaf  { background-color: var(--leaf); }
.edit-card__face-tint--ink   { background-color: var(--ink-fixed); }
.edit-card__face-tint--brown { background-color: #6B4226; }
.edit-card__face-img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
  width: 72%; height: 72%; object-fit: contain; z-index: 1;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.3), filter 0.3s ease;
}
.edit-card:hover .edit-card__face-img {
  transform: translate(-50%, -50%) scale(1.16) rotate(-2deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
}
.edit-card__face-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1.3);
}
.edit-card:hover .edit-card__face-video {
  transform: scale(1.06);
}
.edit-card__face-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1.3);
}
.edit-card:hover .edit-card__face-photo { transform: scale(1.06); }
.edit-card__face--logo {
  display: flex; align-items: center; justify-content: center; padding: 4%;
  background-color: #fff; background-image: none;
}
.edit-card__face-logos {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 100%;
}
.edit-card__face-logo {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; transition: transform 0.4s cubic-bezier(.2,.8,.2,1.3);
}
.edit-card__face-logos .edit-card__face-logo { max-width: 48%; max-height: 100%; }
.edit-card:hover .edit-card__face-logo { transform: scale(1.08); }

/* ── DINO-GAME SCENE — hand-built CSS animation instead of AI video.
   Sun, mountain, cacti, drifting clouds, a scrolling dashed ground,
   a field of scrolling wind-streak lines, and a small bobbing paper
   airplane. Pure CSS keyframes loop exactly, no AI unpredictability. */
.dino-scene {
  background-color: #f2f2ef; background-image: none;
}
.dino-scene__sun {
  position: absolute; top: 10%; left: 8%; width: 9%; aspect-ratio: 1 / 1;
  border-radius: 50%; border: 2px dashed #404040; opacity: 0.8;
}
.dino-scene__mountain {
  position: absolute; left: 28%; bottom: 16%; width: 28%; height: 15%;
  background: #2b2b2b;
  clip-path: polygon(0% 100%, 8% 55%, 22% 78%, 38% 25%, 52% 68%, 68% 35%, 84% 72%, 100% 100%);
}
.dino-scene__ground {
  position: absolute; left: 0; right: 0; bottom: 16%; height: 3px;
  background-image: repeating-linear-gradient(90deg, #404040 0 14px, transparent 14px 26px);
  background-repeat: repeat-x;
  animation: dino-ground-scroll 0.9s linear infinite;
}
.dino-scene__ground::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px;
  background-image: repeating-linear-gradient(90deg, #404040 0 5px, transparent 5px 22px);
  background-repeat: repeat-x; opacity: 0.5;
  animation: dino-ground-scroll 1.3s linear infinite reverse;
}
@keyframes dino-ground-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: -26px; }
}
.dino-scene__cactus {
  position: absolute; bottom: 16%;
}
.dino-scene__cactus--1 { width: 4.5%; left: 4%; }
.dino-scene__cactus--2 { width: 6%;   left: 60%; }
.dino-scene__cactus--3 { width: 3.5%; left: 84%; }
.dino-scene__cloud {
  position: absolute; opacity: 0.8;
  animation: dino-cloud-drift ease-in-out infinite;
}
.dino-scene__cloud--1 { width: 16%; top: 12%; left: 30%; animation-duration: 7s; }
.dino-scene__cloud--2 { width: 12%; top: 16%; left: 76%; animation-duration: 6s;   animation-delay: -2s; }
.dino-scene__cloud--3 { width: 10%; top: 8%;  left: 62%; animation-duration: 7.5s; animation-delay: -4s; }
.dino-scene__wind {
  position: absolute; height: 2px;
  background-image: repeating-linear-gradient(90deg, #404040 0 8px, transparent 8px 18px);
  background-repeat: repeat-x; opacity: 0.5;
  animation: dino-wind-scroll linear infinite;
}
.dino-scene__wind--1 { top: 28%; left: 4%;  width: 32%; animation-duration: 0.8s; }
.dino-scene__wind--2 { top: 35%; left: 42%; width: 24%; animation-duration: 1.05s; }
.dino-scene__wind--3 { top: 42%; left: 8%;  width: 36%; animation-duration: 0.75s; }
.dino-scene__wind--4 { top: 49%; left: 36%; width: 28%; animation-duration: 0.95s; }
.dino-scene__wind--5 { top: 56%; left: 6%;  width: 22%; animation-duration: 1.15s; }
.dino-scene__wind--6 { top: 22%; left: 48%; width: 18%; animation-duration: 0.9s; }
@keyframes dino-wind-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: -18px; }
}
.dino-scene__plane {
  position: absolute; width: 8%; top: 36%; left: 46%; z-index: 2;
  animation: dino-plane-bob 3.2s ease-in-out infinite;
}
@keyframes dino-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@keyframes dino-plane-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}

/* ── BOLD STATEMENT CARDS — Oatly-style: the type itself is the
   graphic. Big, blunt, witty one-liners on a solid color block
   instead of an illustration. Real text (not baked into an
   image) so it stays sharp, accessible, and translatable. ───── */
.edit-card__face--statement {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3vw, 32px); background-image: none;
}
.edit-card__face--statement[data-word]::before { content: none; }
.edit-card__face--chili { background-color: var(--chili); }
.edit-card__face--ink   { background-color: var(--ink-fixed); }
.edit-card__face--spice { background-color: var(--spice); }
.edit-card__statement {
  font-family: var(--font-prose); font-weight: 700;
  font-size: clamp(21px, 2.7vw, 31px); line-height: 1.16;
  text-transform: uppercase; letter-spacing: -0.01em; text-align: center;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.3);
}
.edit-card__face--chili .edit-card__statement { color: var(--cream); transform: rotate(-2deg); }
.edit-card__face--ink   .edit-card__statement { color: var(--spice); transform: rotate(1.5deg); }
.edit-card__face--spice .edit-card__statement { color: var(--ink-fixed); transform: rotate(-1deg); }
.edit-card:hover .edit-card__face--chili .edit-card__statement { transform: rotate(-2deg) scale(1.08); }
.edit-card:hover .edit-card__face--ink   .edit-card__statement { transform: rotate(1.5deg) scale(1.08); }
.edit-card:hover .edit-card__face--spice .edit-card__statement { transform: rotate(-1deg) scale(1.08); }
/* Ruled-notebook paper is the baseline look for every card body now,
   not just the --notebook variant — classic pale rule lines, like an
   actual lined notepad page, behind every headline/excerpt. */
.edit-card__body {
  padding: clamp(18px, 2vw, 26px); flex: 1; display: flex; flex-direction: column; gap: 10px;
  position: relative;
  background-image: repeating-linear-gradient(
    transparent 0 27px, rgba(96,134,196,0.38) 27px 28px
  );
  background-position: 0 14px;
}
.edit-card__tag { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-40); position: relative; z-index: 1; }
.edit-card:hover .edit-card__tag { color: rgba(26,46,26,0.55); }
.edit-card__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -0.02em; flex: 1;
  position: relative; z-index: 1;
}
.edit-card__excerpt { font-size: 13px; line-height: 1.75; color: var(--ink-60); position: relative; z-index: 1; }
.edit-card:hover .edit-card__excerpt { color: var(--ink); }
/* Word-level font swaps dropped in by initEditCardFlair() — a few
   words per headline/excerpt break from the card's base font, so no
   two cards (or even two lines) read in one monotonous typeface. */
.mix-font--serif { font-family: var(--font-display); }
.mix-font--hand  { font-family: var(--font-hand); font-size: 1.08em; }
.mix-font--mono  { font-family: var(--font-mono); letter-spacing: -0.01em; }
.mix-font--prose { font-family: var(--font-prose-alt); }
/* Quoted phrases pop in a accent colour instead of reading as plain
   body text — cycled per occurrence by initEditCardFlair(). */
.quote-pop { font-weight: 700; }
.edit-card__read {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: 14px; margin-top: auto; border-top: 1px solid var(--ink-10); color: var(--ink);
  transition: gap 0.2s;
}
.edit-card:hover .edit-card__read { gap: 14px; }

/* ── GRID FRAME ───────────────────────────────────────────── */
.grid-frame {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  border: var(--border); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.grid-frame--3-4  { aspect-ratio: 3/4; }
.grid-frame--4-3  { aspect-ratio: 4/3; }
.grid-frame--16-9 { aspect-ratio: 16/9; }
.grid-frame--free { min-height: 400px; }
.grid-frame__label {
  position: absolute; bottom: 14px; right: 16px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-40);
}

/* update product image to show grid */
.product-image {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
}
/* big graphic type via data-word attr */
.product-image::before {
  content: attr(data-word);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 7vw, 72px); letter-spacing: -0.05em;
  line-height: 0.9; text-transform: uppercase; text-align: center;
  color: var(--ink); opacity: 0.09; pointer-events: none;
}
.product-image--spice::before { color: rgba(26,46,26,0.16); }
.product-image--dark::before  { color: rgba(255,255,255,0.13); }
/* edit-card face ghost word */
.edit-card__face[data-word]::before {
  content: attr(data-word);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(20px, 3.5vw, 44px); letter-spacing: -0.04em;
  text-transform: uppercase; color: var(--ink); opacity: 0.07;
  pointer-events: none; white-space: nowrap;
}
.dino-scene[data-word]::before { content: none; }
.edit-card__face--logo[data-word]::before { content: none; }
.product-placeholder, .product-placeholder-inner { display: none; }

/* ── ILLUSTRATED SPLIT ────────────────────────────────────── */
.illus-split { display: grid; grid-template-columns: 1fr 1fr; border: var(--border); }
.illus-split--rev { direction: rtl; }
.illus-split--rev > * { direction: ltr; }
.illus-split__art {
  position: relative; overflow: hidden; border-right: var(--border); min-height: 480px;
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.illus-split--rev .illus-split__art { border-right: none; border-left: var(--border); }
.illus-split__art-label {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-40);
}
.illus-split__art-sticker { position: absolute; top: 20px; left: 20px; }
.illus-split__art-img {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  width: 62%; max-height: 76%; object-fit: contain; z-index: 0;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.12));
}
.illus-split__art-img--cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; transform: none; max-height: none;
  filter: none;
}
.illus-split__art--scrim::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20,26,15,0.68) 0%, rgba(20,26,15,0.24) 42%, transparent 68%);
}
.illus-split__art--scrim .ph-copy { z-index: 2; color: var(--white); }
.illus-split__art--scrim .ph-copy__tag,
.illus-split__art--scrim .ph-copy__body,
.illus-split__art--scrim .ph-copy__hand { color: rgba(255,255,255,0.78); }
.illus-split__art--scrim .ph-copy__stat { color: var(--white); }
.illus-split__art--scrim .ph-copy__ghost { color: var(--white); opacity: 0.12; }
.illus-split__body { padding: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; }
.illus-split__body--dark  { background-color: var(--ink-fixed);   color: var(--white); }
.illus-split__body--spice { background-color: var(--spice); }
.illus-split__body--smoke { background-color: var(--smoke); }

@media (max-width: 1100px) {
  .manifesto-inner { grid-template-columns: 1fr; gap: 24px; }
  .edit-row { grid-template-columns: repeat(2, 1fr); }
  .edit-row--3 { grid-template-columns: repeat(2, 1fr); }
  .illus-split { grid-template-columns: 1fr; }
  .illus-split__art { border-right: none; border-bottom: var(--border); min-height: 320px; }
  .illus-split--rev .illus-split__art { border-left: none; border-bottom: var(--border); }
}
@media (max-width: 560px) {
  .edit-row, .edit-row--3 { grid-template-columns: 1fr; }
  .manifesto-num { font-size: 48px; }
}

/* ── PLACEHOLDER COLOUR VARIANTS ────────────────────────────── */
.grid-frame--spice {
  background-color: var(--spice);
  background-image:
    linear-gradient(rgba(26,46,26,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,46,26,0.1) 1px, transparent 1px);
}
.grid-frame--dark {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}
.grid-frame--smoke {
  background-color: var(--smoke);
}
.grid-frame--inverted {
  background-color: rgba(255,255,255,0.04);
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.illus-split__art--spice {
  background-color: var(--spice);
  background-image:
    linear-gradient(rgba(26,46,26,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,46,26,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}
.illus-split__art--dark {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── PH-COPY: editorial copy inside large placeholders ──────── */
.ph-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 3vw, 36px); overflow: hidden;
}
.ph-copy--center { justify-content: center; }
.ph-copy__ghost {
  position: absolute; top: -10px; left: -8px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(80px, 15vw, 200px); line-height: 0.85;
  letter-spacing: -0.06em; color: var(--ink); opacity: 0.05;
  pointer-events: none; user-select: none;
}
.ph-copy--dark .ph-copy__ghost  { color: var(--white); opacity: 0.07; }
.ph-copy--spice .ph-copy__ghost { color: var(--ink); opacity: 0.08; }
.ph-copy__tag {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-40); margin-bottom: 10px; position: relative;
}
.ph-copy--dark .ph-copy__tag  { color: rgba(255,255,255,0.35); }
.ph-copy--spice .ph-copy__tag { color: rgba(26,46,26,0.45); }
.ph-copy__stat {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6vw, 88px); line-height: 1;
  letter-spacing: -0.04em; color: var(--ink); position: relative;
}
.ph-copy--dark .ph-copy__stat  { color: var(--white); }
.ph-copy--spice .ph-copy__stat { color: var(--ink); }
.ph-copy__body {
  font-size: clamp(11px, 1.1vw, 14px); line-height: 1.65;
  max-width: 280px; margin-top: 10px; color: var(--ink-60); position: relative;
}
.ph-copy--dark .ph-copy__body  { color: rgba(255,255,255,0.55); }
.ph-copy--spice .ph-copy__body { color: var(--ink-60); }
.ph-copy__hand {
  font-family: var(--font-hand); font-size: 16px;
  margin-top: 8px; display: inline-block; transform: rotate(-2deg);
  color: var(--ink-40); position: relative;
}
.ph-copy--dark .ph-copy__hand  { color: rgba(255,255,255,0.25); }
.ph-copy--spice .ph-copy__hand { color: rgba(26,46,26,0.35); }

/* ── PRIVATE LABEL CAROUSEL — a scratch-to-reveal carousel of
   private-label packaging mockups. The whole carousel (art +
   arrows) sits under one big ink-blob scratch layer; scratching
   it open is a one-time reveal — once cleared, the canvas is
   gone for good and the arrows just cycle the art underneath. */
.pl-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 22px); padding: clamp(28px, 4vw, 44px);
}
.pl-carousel {
  position: relative; width: 100%; max-width: 340px;
}
.pl-carousel__viewport {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 6px;
  background: var(--smoke);
  box-shadow: var(--shadow-lg);
}
.pl-carousel__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.5s ease;
}
.pl-carousel__slide.is-active { opacity: 1; }
.pl-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Per-slide nameplate geometry differs (pouch vs. box vs. cup), so
   each slide carries its own --np-* custom properties (set inline
   in the markup) instead of one position trying to fit all four. */
.pl-carousel__brand {
  position: absolute;
  top: var(--np-top, 63%); left: 50%; width: var(--np-w, 56%);
  transform: translate(-50%, -50%) rotate(var(--np-rot, -1.5deg));
  pointer-events: none; z-index: 2; text-align: center;
}
.pl-carousel__brand-text {
  display: inline-block; font-family: var(--font-prose); font-weight: 700;
  font-size: var(--np-size, 15px); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: #3a2a14; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.pl-carousel__brand-text small {
  display: block; font-size: 0.82em; font-weight: 600; letter-spacing: 0.1em;
  opacity: 0.7; margin-top: 2px;
}
.pl-carousel__brand-text::after {
  content: ''; display: block; height: 2px; margin: 5px auto 0;
  width: 46%; background: currentColor; opacity: 0.35;
}
.pl-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; z-index: 4;
  background: var(--cream); border: var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-fixed);
  box-shadow: var(--shadow);
  transition: transform 0.2s cubic-bezier(.3,1.4,.5,1), box-shadow 0.2s ease, background-color 0.2s ease;
}
.pl-carousel__arrow svg { width: 20px; height: 20px; }
.pl-carousel__arrow--prev { left: -18px; }
.pl-carousel__arrow--next { right: -18px; }
.pl-carousel__arrow:hover {
  background-color: var(--pink); color: var(--white);
  transform: translateY(-50%) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink-fixed);
}
.pl-carousel__arrow:active { transform: translateY(-50%) translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink-fixed); }
.pl-carousel__scratch {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4 / 5;
  z-index: 5; cursor: pointer; touch-action: none;
  border-radius: 6px; transition: opacity 0.5s ease;
}
#plCarousel.is-revealed .pl-carousel__scratch { opacity: 0; pointer-events: none; }
.pl-carousel__foot {
  margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pl-carousel__name {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-60);
}
.pl-carousel__dots { display: inline-flex; gap: 6px; }
.pl-carousel__dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-10);
  transition: background-color 0.2s ease;
}
.pl-carousel__dots span.is-active { background: var(--spice); }
.pl-carousel__hint {
  font-size: 17px; color: var(--ink-40); display: inline-flex; align-items: center; gap: 6px;
  transition: opacity 0.4s ease;
}
#plCarousel.is-revealed ~ .pl-carousel__hint { opacity: 0; pointer-events: none; }
.pl-carousel__hint-arrow { transform: rotate(2deg); }

/* ── PH-TYPE: big graphic type inside product cards ─────────── */
.ph-type {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.ph-type__word {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 6vw, 64px); letter-spacing: -0.05em;
  line-height: 0.9; text-transform: uppercase; text-align: center;
  color: var(--ink); opacity: 0.1; transform: rotate(-8deg);
  word-break: break-word; padding: 4px;
}
/* category colour tints for product cards */
.product-image--spice .ph-type__word { color: var(--spice); opacity: 0.35; }
.product-image--smoke  .ph-type__word { color: var(--ink);   opacity: 0.12; }
.product-image--dark   .ph-type__word { color: var(--white); opacity: 0.15; }
.product-image--spice {
  background-color: var(--spice);
  background-image:
    linear-gradient(rgba(26,46,26,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,46,26,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}
.product-image--smoke {
  background-color: var(--smoke);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.product-image--dark {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* edit-card face ghost word */
.edit-card__face-ghost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.edit-card__face-ghost span {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 5vw, 60px); letter-spacing: -0.04em;
  text-transform: uppercase; color: var(--ink); opacity: 0.07;
  transform: rotate(-6deg); line-height: 1;
}

/* ── FOOTER v3 — confession crate, full Oatly-energy ──────────── */
/* Always dark regardless of site theme — hence --ink-fixed (which
   never flips) rather than --ink. The footer's own text colours
   below are hardcoded white/rgba(255,255,255,X), so using the
   flipping --ink here made the background turn near-white in dark
   mode while the text stayed white — invisible on invisible. */
#site-footer {
  background-color: var(--ink-fixed);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.footer-bigtype {
  position: absolute; bottom: -0.1em; left: 0; right: 0;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(90px, 16vw, 260px); line-height: 0.8;
  letter-spacing: -0.05em; text-align: center;
  color: rgba(255,255,255,0.035);
  pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
}
.footer-zone { position: relative; z-index: 1; }

/* Big AG mark bleeding off the right edge of the footer — same
   absolute-positioned, clipped-by-overflow treatment as .footer-bigtype
   above (it starts level with the marquee and runs down to roughly the
   "Write to us" line), but here it keeps real colour: the A lightened,
   the G left as the site's usual green, so it reads as the mark rather
   than a ghost watermark. */
.footer-confess-icon {
  position: absolute; top: 0; right: -6%;
  height: clamp(380px, 46vw, 640px); width: auto;
  pointer-events: none; user-select: none; z-index: 0;
}
@media (max-width: 860px) { .footer-confess-icon { display: none; } }
.footer-confess {
  position: relative; z-index: 1;
  max-width: 760px;
  padding: clamp(56px, 8vw, 100px) 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-confess__label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--spice); display: block; margin-bottom: 20px;
}
.footer-confess__line {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 5vw, 64px); line-height: 1.1;
  letter-spacing: -0.03em; color: var(--white); margin: 0 0 20px;
}
.footer-confess__line em { color: var(--spice); font-style: italic; }
.footer-confess__ps {
  font-family: var(--font-hand); font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255,255,255,0.4); display: block; margin: 0 0 26px;
  transform: rotate(-1deg);
}
.footer-confess__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px; transition: color 0.2s, border-color 0.2s;
}
.footer-confess__cta:hover { color: var(--spice); border-color: var(--spice); }

/* Departments grid */
.footer-depts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-dept { display: flex; flex-direction: column; }
.footer-dept__head {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85); display: inline-block; margin-bottom: 16px;
  padding: 3px 8px; background: rgba(255,255,255,0.06);
  transform: rotate(-1deg); align-self: flex-start;
}
.footer-dept__link {
  font-size: 14px; color: rgba(255,255,255,0.55);
  margin-bottom: 9px; transition: color 0.2s;
}
.footer-dept__link:hover { color: var(--spice); }
.footer-dept__aside {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.22); margin-top: 4px; display: block;
}
.footer-dept__address {
  font-size: 13px; line-height: 1.75; font-style: normal;
  color: rgba(255,255,255,0.45); margin: 0 0 12px;
}
/* Permanently highlighted, not just on hover — a spice-coloured
   tag rather than the plain mono link the other footer text uses,
   so it reads as the one thing on this page you're meant to act on. */
.footer-dept__email {
  font-family: var(--font-prose); font-weight: 700; font-size: 13px;
  color: var(--ink-fixed); background-color: var(--spice);
  border-bottom: none; border-radius: 3px;
  padding: 4px 9px; display: inline-block; margin-bottom: 16px;
  transition: background-color 0.2s, color 0.2s;
}
.footer-dept__email:hover { background-color: var(--chili); color: var(--white); }
.footer-social-row { display: flex; gap: 8px; }
.footer-social-row .f-social {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
  transition: border-color 0.2s, background-color 0.2s;
}
.footer-social-row .f-social:hover { border-color: var(--spice); background-color: var(--spice); }
.footer-social-row .f-social svg { width: 13px; height: 13px; fill: rgba(255,255,255,0.38); }
.footer-social-row .f-social:hover svg { fill: var(--white); }

/* Stamp cluster — reuses .sticker (draggable via app.js) */
.footer-stamps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: clamp(32px, 4vw, 48px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Brand line */
.footer-brandline {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(24px, 3vw, 36px) 0;
}
.footer-brandline__logo {
  width: 32px; height: 32px; object-fit: contain;
}
.footer-brandline__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; color: var(--white);
}

/* Bottom bar */
.footer-bottom-bar {
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.footer-legal-sm { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.16); }
.footer-back-top-btn {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2); cursor: pointer;
  background: none; border: none; padding: 0; transition: color 0.2s;
}
.footer-back-top-btn:hover { color: var(--spice); }

@media (max-width: 900px) {
  .footer-depts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-depts { grid-template-columns: 1fr; }
  .footer-bottom-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bigtype { font-size: clamp(70px, 22vw, 140px); }
}

/* ── 20. STAT ROTATOR — replaces hard numbers with a cycling word ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.stat-rotator {
  position: relative; display: inline-block;
  height: 1.2em; min-width: 9ch; vertical-align: bottom;
  overflow: hidden;
}
.stat-rotator__item {
  position: absolute; left: 0; top: 0; bottom: 0; white-space: nowrap;
  display: flex; align-items: center;
  font: inherit; color: inherit; opacity: 0;
  animation: stat-rotate 10s infinite;
}
.stat-rotator__item:nth-child(1) { animation-delay: -0s; }
.stat-rotator__item:nth-child(2) { animation-delay: -2s; }
.stat-rotator__item:nth-child(3) { animation-delay: -4s; }
.stat-rotator__item:nth-child(4) { animation-delay: -6s; }
.stat-rotator__item:nth-child(5) { animation-delay: -8s; }
/* 8-item variant (country lists). Two fixes over the 5-item base:
   1. Longer cycle (16s, 2s/item slot — same spacing as the 5-item
      version) so items 6-8 get their own delay instead of defaulting
      to 0s and flashing in sync with item 1.
   2. A dedicated keyframe scaled to that same 2s slot — reusing the
      base keyframe's percentages against a 16s duration stretched
      each item's visible window to 3.2s, wider than its 2s slot, so
      consecutive items overlapped and rendered on top of each other
      (looked like names were missing/garbled). stat-rotate-8 keeps
      the visible window inside its own slot. */
.stat-rotator--8 { min-width: 10ch; }
.stat-rotator--8 .stat-rotator__item { animation: stat-rotate-8 16s infinite; }
.stat-rotator--8 .stat-rotator__item:nth-child(1) { animation-delay: -0s; }
.stat-rotator--8 .stat-rotator__item:nth-child(2) { animation-delay: -2s; }
.stat-rotator--8 .stat-rotator__item:nth-child(3) { animation-delay: -4s; }
.stat-rotator--8 .stat-rotator__item:nth-child(4) { animation-delay: -6s; }
.stat-rotator--8 .stat-rotator__item:nth-child(5) { animation-delay: -8s; }
.stat-rotator--8 .stat-rotator__item:nth-child(6) { animation-delay: -10s; }
.stat-rotator--8 .stat-rotator__item:nth-child(7) { animation-delay: -12s; }
.stat-rotator--8 .stat-rotator__item:nth-child(8) { animation-delay: -14s; }
/* 9-item variant — same 2s/item slot, one more delay step, an 18s
   cycle instead of 16s, and a keyframe rescaled to match. */
.stat-rotator--9 { min-width: 10ch; }
.stat-rotator--9 .stat-rotator__item { animation: stat-rotate-9 18s infinite; }
.stat-rotator--9 .stat-rotator__item:nth-child(1) { animation-delay: -0s; }
.stat-rotator--9 .stat-rotator__item:nth-child(2) { animation-delay: -2s; }
.stat-rotator--9 .stat-rotator__item:nth-child(3) { animation-delay: -4s; }
.stat-rotator--9 .stat-rotator__item:nth-child(4) { animation-delay: -6s; }
.stat-rotator--9 .stat-rotator__item:nth-child(5) { animation-delay: -8s; }
.stat-rotator--9 .stat-rotator__item:nth-child(6) { animation-delay: -10s; }
.stat-rotator--9 .stat-rotator__item:nth-child(7) { animation-delay: -12s; }
.stat-rotator--9 .stat-rotator__item:nth-child(8) { animation-delay: -14s; }
.stat-rotator--9 .stat-rotator__item:nth-child(9) { animation-delay: -16s; }
/* Long country names shrink slightly so they read cleanly inside the
   box rather than forcing the whole rotator wider for every item. */
.stat-rotator__item--sm { font-size: 0.74em; }

/* 6-item variant — 9s cycle (6 items × 1.5s slot).
   Slot = 16.67%. Delays count DOWN so items appear in DOM order 1→6.
   Keyframe window fits exactly in one slot — no overlap. */
.stat-rotator--6 { min-width: 7ch; }
.stat-rotator--6 .stat-rotator__item { animation: stat-rotate-6 9s infinite; }
.stat-rotator--6 .stat-rotator__item:nth-child(1) { animation-delay: -0s; }
.stat-rotator--6 .stat-rotator__item:nth-child(2) { animation-delay: -7.5s; }
.stat-rotator--6 .stat-rotator__item:nth-child(3) { animation-delay: -6s; }
.stat-rotator--6 .stat-rotator__item:nth-child(4) { animation-delay: -4.5s; }
.stat-rotator--6 .stat-rotator__item:nth-child(5) { animation-delay: -3s; }
.stat-rotator--6 .stat-rotator__item:nth-child(6) { animation-delay: -1.5s; }
/* Per-item font scaling: fewer chars → bigger size */
.stat-rotator--6 .stat-rotator__item:nth-child(1) { font-size: 1em;    } /* Gravies  7 */
.stat-rotator--6 .stat-rotator__item:nth-child(2) { font-size: 1em;    } /* Biryani  7 */
.stat-rotator--6 .stat-rotator__item:nth-child(3) { font-size: 1.18em; } /* Meals    5 */
.stat-rotator--6 .stat-rotator__item:nth-child(4) { font-size: 1.38em; } /* Rice     4 */
.stat-rotator--6 .stat-rotator__item:nth-child(5) { font-size: 1.12em; } /* Pasta    5 */
.stat-rotator--6 .stat-rotator__item:nth-child(6) { font-size: 0.9em;  } /* Chutneys 8 */
@keyframes stat-rotate-6 {
  0%      { opacity: 0; transform: translateY(8px); }
  3.33%   { opacity: 1; transform: translateY(0); }
  13.33%  { opacity: 1; transform: translateY(0); }
  16.67%  { opacity: 0; transform: translateY(-8px); }
  100%    { opacity: 0; }
}

@keyframes stat-rotate-8 {
  0%     { opacity: 0; transform: translateY(10px); }
  2.5%   { opacity: 1; transform: translateY(0); }
  10%    { opacity: 1; transform: translateY(0); }
  12.5%  { opacity: 0; transform: translateY(-10px); }
  100%   { opacity: 0; }
}
@keyframes stat-rotate-9 {
  0%      { opacity: 0; transform: translateY(10px); }
  2.22%   { opacity: 1; transform: translateY(0); }
  8.89%   { opacity: 1; transform: translateY(0); }
  11.11%  { opacity: 0; transform: translateY(-10px); }
  100%    { opacity: 0; }
}
@keyframes stat-rotate {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}
/* ── LANDMARK ROTATOR — a pencil-sketch landmark per export
   destination, cross-fading in the dead space above the country
   stat card. Reuses the stat-rotator's exact 18s/2s-slot timing
   (same keyframe shape, same nth-child delays) so each landmark
   appears in sync with its matching country name. ────────────── */
.landmark-rotator {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 36px 150px;
}
.landmark-rotator::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96%; height: 84%; z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(232,160,32,0.65) 0%, rgba(232,160,32,0.42) 38%,
    rgba(232,160,32,0.16) 62%, transparent 82%);
  filter: blur(4px);
}
.landmark-rotator__item {
  position: absolute; max-width: 76%; max-height: 76%;
  object-fit: contain; opacity: 0; mix-blend-mode: multiply;
  animation: landmark-rotate-9 18s infinite;
}
.landmark-rotator__item:nth-child(1) { animation-delay: -0s; }
.landmark-rotator__item:nth-child(2) { animation-delay: -2s; }
.landmark-rotator__item:nth-child(3) { animation-delay: -4s; }
.landmark-rotator__item:nth-child(4) { animation-delay: -6s; }
.landmark-rotator__item:nth-child(5) { animation-delay: -8s; }
.landmark-rotator__item:nth-child(6) { animation-delay: -10s; }
.landmark-rotator__item:nth-child(7) { animation-delay: -12s; }
.landmark-rotator__item:nth-child(8) { animation-delay: -14s; }
.landmark-rotator__item:nth-child(9) { animation-delay: -16s; }
@keyframes landmark-rotate-8 {
  0%     { opacity: 0; transform: scale(0.97); }
  2.5%   { opacity: 1; transform: scale(1); }
  10%    { opacity: 1; transform: scale(1); }
  12.5%  { opacity: 0; transform: scale(0.97); }
  100%   { opacity: 0; }
}
@keyframes landmark-rotate-9 {
  0%      { opacity: 0; transform: scale(0.97); }
  2.22%   { opacity: 1; transform: scale(1); }
  8.89%   { opacity: 1; transform: scale(1); }
  11.11%  { opacity: 0; transform: scale(0.97); }
  100%    { opacity: 0; }
}
@media (max-width: 1100px) {
  .landmark-rotator { padding: 28px 28px 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .landmark-rotator__item { animation: none; opacity: 0; }
  .landmark-rotator__item:first-child { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-rotator__item { animation: none; opacity: 0; }
  .stat-rotator__item:first-child { opacity: 1; position: static; }
}

/* ── 21. WORLD GLOBE — doodle-textured, draggable, glowing dots ─── */
.world-map-teaser {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.world-globe-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden; cursor: grab;
  background-color: var(--cream);
  border: var(--border); box-shadow: var(--shadow-lg);
  margin: 0 auto;
}
.world-globe-wrap:active { cursor: grabbing; }
.world-globe-wrap--mini { max-width: 340px; }
.world-globe-wrap--full { max-width: 560px; }
.world-globe-canvas-host {
  position: absolute; inset: 0; z-index: 1;
  touch-action: none;
}
.world-globe-canvas-host canvas {
  display: block; opacity: 0; transition: opacity 0.7s ease;
}
.world-globe-wrap.is-ready .world-globe-canvas-host canvas { opacity: 1; }
.world-globe-placeholder {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background-image: url('../images/world-doodle-2k.jpg');
  background-size: cover; background-position: center;
  transition: opacity 0.6s ease;
}
.world-globe-wrap.is-ready .world-globe-placeholder { opacity: 0; pointer-events: none; }
.world-globe-placeholder__hint {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink);
  background: rgba(250,247,240,0.88);
  border: 1px solid rgba(26,46,26,0.15);
  padding: 6px 14px;
  transition: opacity 0.3s ease;
}
/* On failure, keep the static doodle map visible — never reveal a
   blank/textureless canvas — and just drop the loading hint. */
.world-globe-wrap.is-error .world-globe-placeholder__hint { opacity: 0; }
@media (max-width: 900px) {
  .world-map-teaser { grid-template-columns: 1fr; text-align: center; }
  .world-map-teaser .btn { margin-left: auto; margin-right: auto; }
}

/* ── GLOBE "SURPRISE ME" — spin to a random destination + fact card ─ */
.world-globe-block { display: flex; flex-direction: column; align-items: center; }
.globe-surprise-btn {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--cream); border: 2px dashed var(--ink-60); border-radius: 999px;
  padding: 8px 18px; color: var(--ink); cursor: pointer; transform: rotate(-1deg);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.globe-surprise-btn:hover { transform: rotate(1deg) scale(1.04); background-color: var(--spice); }
.globe-fact-card {
  margin-top: 0; max-width: 300px; width: 100%; text-align: center;
  background-color: var(--cream); border: var(--border);
  max-height: 0; overflow: hidden; opacity: 0; padding: 0 16px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin-top 0.4s ease;
}
.globe-fact-card.is-active {
  max-height: 180px; opacity: 1; padding: 14px 16px; margin-top: 14px;
  box-shadow: var(--shadow); animation: globe-fact-pop 0.4s ease;
}
@keyframes globe-fact-pop {
  0%   { transform: scale(0.9) rotate(-2deg); }
  60%  { transform: scale(1.03) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.globe-fact-card__country {
  font-family: var(--font-display); font-weight: 800; font-size: 15px; display: block;
}
.globe-fact-card__text {
  font-family: var(--font-hand); font-size: 17px; margin-top: 6px;
  color: var(--ink-60); display: block; transform: rotate(-0.5deg);
}

/* ── 20. GALLOWS LAMP RIG + IN-SECTION REVEAL ──────────
   Lives on the right of the manifesto section, sitting directly on the
   page — no border, no box, no panel. A simple doodle post+beam+hook
   hangs a red crayon-coloured lamp on a chain. A soft dark glow with
   no hard edges sits behind it, fading to nothing toward the page; it
   blooms warm when the (separate) switch is thrown, revealing a loose
   row of plain clickable images — no card chrome, no takeover. */
.gallows-stage {
  position: relative; min-height: clamp(420px, 44vw, 540px);
}
/* Not a CSS gradient (every gradient read as a deliberate shape — a
   rectangle, wedge or circle — because its iso-opacity contours are
   perfectly regular). Instead, two hand-painted organic smoke-cloud
   textures with irregular, feathered, ragged alpha edges: a deep dark
   haze that blankets the whole artwork area at rest, crossfading to a
   soft warm bloom when the switch is thrown. No box, no border, no
   radius — the irregular alpha IS the edge, so there's no geometry to
   pick out. Oversized + overflowing the stage so the dense core sits
   over the lamp and the clump while the wisps dissolve into the page. */
.gallows-stage__hatch {
  position: absolute; z-index: 0; pointer-events: none;
  width: 150%; height: 135%;
  top: 48%; left: 52%; transform: translate(-50%, -50%);
}
.gallows-stage__hatch::before,
.gallows-stage__hatch::after {
  content: ''; position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: opacity 1.1s ease;
}
/* Dark haze — present from the start, eased back (not fully gone) when lit
   so the warm bloom can take over without a hard cut to bare page. */
.gallows-stage__hatch::before {
  background-image: url("../images/glow-dark.png");
  opacity: 1;
}
.gallows-stage.is-lit .gallows-stage__hatch::before { opacity: 0.12; }
/* Warm bloom — hidden at rest, fades up gently (kept low so it stays a
   warm wash, not a solid orange mass). */
.gallows-stage__hatch::after {
  background-image: url("../images/glow-warm.png");
  opacity: 0;
}
.gallows-stage.is-lit .gallows-stage__hatch::after { opacity: 0.5; }

/* A goofy oversized "PRESS!" button doodle — its own silly fixture,
   sitting well apart from the post, not painted onto the stand. */
.gallows-switch {
  position: absolute; top: 0%; left: 0%; z-index: 4;
  width: clamp(56px, 6vw, 76px); background: none; border: none;
  padding: 0; cursor: pointer;
  transition: transform 0.2s cubic-bezier(.3,1.4,.5,1);
}
.gallows-switch__img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.gallows-switch:hover { transform: scale(1.06) rotate(-3deg); }
.gallows-switch:active, .gallows-stage.is-lit .gallows-switch { transform: scale(0.92) rotate(2deg); }

/* A nagging little callout pointing back at the switch — gives up
   once you've actually flipped it. */
.gallows-switch__nag {
  position: absolute; top: 9%; left: 13%; z-index: 4; width: 15ch;
  font-size: clamp(15px,1.6vw,18px); color: rgba(250,247,240,0.8);
  transform: rotate(-2deg); pointer-events: none;
  transition: opacity 0.4s ease;
}
.gallows-stage.is-lit .gallows-switch__nag { opacity: 0; }
.gallows-switch__nag-arrow {
  display: block; margin-top: -6px; margin-left: -6px;
  color: rgba(250,247,240,0.6);
}

.gallows-rig {
  position: absolute; top: 4%; right: 8%; z-index: 2;
  width: clamp(120px, 14vw, 175px); aspect-ratio: 672 / 1204;
}
.gallows-rig__post {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top;
  transform: scaleX(-1); /* post anchors right, beam+hook reach inward/left */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
  pointer-events: none; user-select: none;
}

/* The chain anchor — pinned at the hook, zero-size, everything inside
   hangs from it in normal flow exactly like a real fixture would. */
.gallows-rig__chain {
  position: absolute; left: 28%; top: 31%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 1;
}
.hanging-lamp__wire {
  width: 30px; height: clamp(90px, 13vw, 150px);
  overflow: visible; display: block; margin-bottom: -3px;
}
.hanging-lamp__pivot {
  position: relative; transform-origin: top center;
  pointer-events: all; cursor: grab;
}
.hanging-lamp__pivot:active { cursor: grabbing; }
.hanging-lamp__bulb {
  width: clamp(96px, 13vw, 160px); height: auto; overflow: visible;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.45));
}

/* No fade-hide on the wrapper itself — the clump is visible from the
   start, just dark; only the caption (which literally refers to
   "finding the light") and the artwork's colour wait for is-lit. */
.gallows-stage__reveal {
  position: absolute; inset: 0; z-index: 1;
}

.gallows-stage__caption {
  position: absolute; top: 18%; left: 6%; right: 50%; text-align: left;
  font-family: var(--font-hand); font-size: clamp(17px,1.8vw,21px); color: var(--ink-60);
  opacity: 0; transform: rotate(-1deg) translateY(8px); max-width: 26ch; pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
  transition-delay: 0.45s;
}
.gallows-stage.is-lit .gallows-stage__caption { opacity: 1; transform: rotate(-1deg) translateY(0); }

/* A scattered clump, not a tidy row — each piece pinned at its own
   offset/rotation/depth within a loose pile, anchored bottom-left and
   clear of the rig's bounding box above it. Visible (as dark shapes)
   from the start; clickable always. */
.gallows-stage__cards {
  position: absolute; left: 4%; bottom: 4%; width: min(58%, 320px); height: 62%;
}

/* Bare images, no card chrome — no border, no background, no padding box.
   Faint and washed-out by default, sitting quietly in the dark — then
   pops into full saturated colour with a little bounce once the
   switch is thrown. */
.mascot-card {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s ease;
}
.mascot-card:hover { transform: scale(1.06) !important; }
.mascot-card__img {
  width: 100%; height: auto; object-fit: contain;
  filter: opacity(0.4) saturate(0.25) brightness(1.6);
  transform: scale(0.92);
  transition: filter 0.5s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.gallows-stage.is-lit .mascot-card__img { filter: none; transform: scale(1); }
/* Dark mode: grain's mix-blend-mode:multiply composites against the stage's
   warm-amber output as a whole rather than pixel-punching through the mascot's
   dark face values. isolation:isolate is the root fix; drop-shadow warms the
   PNG edges to match the lamp glow. */
[data-theme="dark"] .gallows-stage {
  isolation: isolate;
}
[data-theme="dark"] .gallows-stage.is-lit .mascot-card--1 .mascot-card__img {
  filter: brightness(3.0) contrast(0.6) saturate(1.3) drop-shadow(0 0 14px rgba(200,115,15,0.55));
}
.mascot-card__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(250,247,240,0.65);
  text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 9px rgba(0,0,0,0.6);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.gallows-stage.is-lit .mascot-card__label {
  color: rgba(20,18,15,0.75);
  text-shadow: 0 1px 4px rgba(255,255,255,0.9), 0 0 7px rgba(255,255,255,0.7);
}

.mascot-card--1 { width: 30%; left: 6%; bottom: 0; transform: rotate(-3deg); z-index: 4; }
.mascot-card--2 { width: 24%; left: 0%; bottom: 46%; transform: rotate(7deg); z-index: 2; }
.mascot-card--3 { width: 23%; left: 44%; bottom: 52%; transform: rotate(-9deg); z-index: 3; }
.mascot-card--4 { width: 26%; left: 52%; bottom: 4%; transform: rotate(5deg); z-index: 1; }

@media (max-width: 1100px) {
  .gallows-stage { min-height: 500px; }
}
@media (max-width: 560px) {
  .gallows-rig { width: clamp(110px, 30vw, 160px); }
  .gallows-stage__caption { right: 8%; max-width: none; }
  .gallows-stage__cards { left: 8%; right: 8%; }
  .mascot-card { width: clamp(56px, 20vw, 76px); }
  .mascot-card--2 { left: 8%; }
  .mascot-card--3 { left: 38%; }
  .mascot-card__label { font-size: 9px; white-space: nowrap; }
}

/* ── MAKING-OF / CREDITS REVEAL — unlocks after finding everything ── */
.credits-reveal {
  position: fixed; inset: 0; z-index: 4100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease;
}
.credits-reveal.is-active { opacity: 1; visibility: visible; pointer-events: all; }
.credits-reveal__veil { position: absolute; inset: 0; background: rgba(10,12,8,0.78); }
.credits-reveal__card {
  position: relative; z-index: 1; max-width: 420px; text-align: center;
  background-color: var(--cream); border: var(--border); box-shadow: var(--shadow-lg);
  padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: translateY(14px) scale(0.94); opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
}
.credits-reveal.is-active .credits-reveal__card { transform: translateY(0) scale(1); opacity: 1; }
.credits-reveal__label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--spice);
}
.credits-reveal__card h3 { font-size: clamp(22px,2.6vw,30px); line-height: 1.2; }
.credits-reveal__card .hand-note { font-size: 18px; color: var(--ink-60); transform: rotate(-1deg); }
.credits-reveal__close { margin-top: 8px; }

/* ── 22. KONAMI RAVE MODE ─────────────────────────────── */
@keyframes rave-glitch {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  20%      { filter: hue-rotate(80deg) saturate(2.2); }
  40%      { filter: hue-rotate(200deg) saturate(2.5) invert(0.05); }
  60%      { filter: hue-rotate(300deg) saturate(2); }
  80%      { filter: hue-rotate(50deg) saturate(2.4); }
}
body.rave-mode { animation: rave-glitch 0.6s steps(2) infinite; }

/* ── 23. CRAYON MARKS — sparing use on standout phrases ── */
.crayon-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 20 2, 35 7 T 70 6 T 98 8' stroke='%23E8A020' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 0.45em; padding-bottom: 0.15em;
}
.crayon-circle {
  position: relative; display: inline-block;
}
.crayon-circle::after {
  content: ''; position: absolute;
  left: -0.35em; right: -0.35em; top: -0.3em; bottom: -0.25em;
  border: 2.5px solid var(--chili);
  border-radius: 50% 48% 52% 49% / 60% 55% 58% 52%;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

/* ── 23b. MARGIN ANNOTATIONS — handwritten asides scribbled
   beside a few standout claims, reacting to the copy next to
   them. Anchor wraps the target phrase; note pops in once
   scrolled near, then sits still. ─────────────────────── */
.margin-note-anchor { position: relative; display: inline-block; }
.margin-note {
  position: absolute; top: -6px; left: calc(100% + 16px);
  width: clamp(108px, 13vw, 148px);
  font-family: var(--font-hand); font-size: 16px; line-height: 1.22;
  color: var(--ink-40);
  pointer-events: none; z-index: 2;
}
.margin-note--flip { left: auto; right: calc(100% + 16px); text-align: right; }
.margin-note__arrow {
  display: block; width: 34px; height: 16px; margin-bottom: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M2 4 Q 28 2, 38 16 T 36 24' stroke='%238A8275' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 19 L36 24 L41 17' stroke='%238A8275' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.margin-note--flip .margin-note__arrow { transform: scaleX(-1); margin-left: auto; }
@media (max-width: 900px) {
  .margin-note { display: none; }
}

/* ── 24. ROTARY PHONE — contact page gag ─────────────── */
.rotary-phone {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.5,0,.75,0);
}
.rotary-phone.is-gone {
  opacity: 0; transform: scale(0.85) rotate(-6deg) translateY(-30px);
  pointer-events: none;
}
.rotary-phone__body { text-align: center; padding: 32px; }
.rotary-phone__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-60); margin-bottom: 18px;
}
.rotary-phone__rig {
  position: relative; width: clamp(220px, 28vw, 300px);
  margin: 0 auto;
}
.rotary-phone__base-img { display: block; width: 100%; height: auto; pointer-events: none; }
.rotary-phone__handset {
  position: absolute; left: 54.5%; top: -1%; z-index: 3;
  width: 62%; padding: 0; border: none; background: none;
  cursor: default; transform: translate(-50%, 0) rotate(-5deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.16));
}
.rotary-phone__handset-img { display: block; width: 100%; pointer-events: none; }
.rotary-phone__rings {
  position: absolute; left: 12%; top: 18%; width: 14px; height: 14px;
  border-radius: 50%; pointer-events: none;
}
.rotary-phone__handset.is-ringing .rotary-phone__rings::before,
.rotary-phone__handset.is-ringing .rotary-phone__rings::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--chili); opacity: 0;
  animation: rotary-ring-pulse 0.9s ease-out 2;
}
.rotary-phone__handset.is-ringing .rotary-phone__rings::after { animation-delay: 0.3s; }
@keyframes rotary-ring-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.rotary-phone__handset.is-ringing { animation: rotary-handset-wiggle 0.5s ease-in-out 2; }
@keyframes rotary-handset-wiggle {
  0%, 100% { rotate: -5deg; }
  25%      { rotate: -11deg; }
  75%      { rotate: 1deg; }
}
.rotary-phone__dial-clip {
  position: absolute; left: 54.5%; top: 61%; transform: translate(-50%, -50%);
  width: 77.2%; aspect-ratio: 1/1; z-index: 2;
  border-radius: 50%; overflow: hidden;
}
/* Static faceplate digits — fixed to the body. Never rotate, same
   as a real dial: only the perforated wheel on top of them moves. */
.rotary-phone__digits { position: absolute; inset: 0; pointer-events: none; }
.rotary-phone__digit {
  position: absolute; left: var(--hx); top: var(--hy);
  transform: translate(-50%, -50%);
  font-family: var(--font-hand); font-size: 19px; font-weight: 700; color: var(--ink);
  user-select: none;
}
/* The perforated wheel — the only thing that actually rotates.
   Its cut-out holes line up over the static digits only at rest;
   mid-pull, the solid disc material slides over whichever digits
   the moving holes have left behind, hiding them naturally
   (no opacity hacks needed — it's real occlusion, like the real
   mechanism). */
.rotary-phone__wheel {
  position: absolute; inset: 0;
  transform-origin: 50% 50%; touch-action: none; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(26,46,26,0.18));
}
.rotary-phone__wheel-rim { fill: none; stroke: var(--ink); stroke-width: 0.6; opacity: 0.4; }
.rotary-phone__wheel-ticks line { stroke: var(--ink); stroke-width: 0.7; opacity: 0.32; stroke-linecap: round; }
.rotary-phone__wheel-hub { fill: var(--smoke); stroke: var(--ink); stroke-width: 1; }
.rotary-phone__wheel-hub-dot { fill: var(--spice); }
/* Finger stop — bolted to the body, not the wheel; stays fixed
   regardless of dial rotation. */
.rotary-phone__stop {
  position: absolute; inset: 0; pointer-events: none;
}
.rotary-phone__stop path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
/* Invisible, fixed tap targets, one per digit. */
.rotary-phone__hits { position: absolute; inset: 0; }
.rotary-phone__hit {
  position: absolute; left: var(--hx); top: var(--hy);
  width: 14%; height: 14%; transform: translate(-50%, -50%);
  border: none; border-radius: 50%; background: none; cursor: pointer; padding: 0;
}
.rotary-phone__caption {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; font-size: 18px; transform: rotate(-1deg);
}
.rotary-phone__caption-arrow { flex-shrink: 0; transform: rotate(4deg); }
@media (max-width: 700px) {
  .rotary-phone__rig { width: 72vw; }
}

/* ── ROTARY SKIP CTA — sits beside "Send Message", above the
   rotary-phone overlay (z-index 50) so it's reachable even while
   the dial gag is still covering the form. Reuses the same big
   red "PRESS!" button doodle as the hanging-lamp switch. ── */
.rotary-skip-cta {
  position: relative; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
}
.rotary-skip-cta__btn {
  width: clamp(50px, 6vw, 66px); background: none; border: none; padding: 0; cursor: pointer;
  transition: transform 0.2s cubic-bezier(.3,1.4,.5,1);
}
.rotary-skip-cta__img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 7px rgba(0,0,0,0.2)); }
.rotary-skip-cta__btn:hover { transform: scale(1.06) rotate(-3deg); }
.rotary-skip-cta__btn:active { transform: scale(0.92) rotate(2deg); }
.rotary-skip-cta__label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-hand); font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-60);
  transform: rotate(-1.5deg);
}
.rotary-skip-cta__arrow { flex-shrink: 0; color: var(--ink-40); }
.rotary-phone.is-gone ~ form .rotary-skip-cta {
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}

/* ── 25. 404 — LOST IN TRANSIT ────────────────────────── */
.section--404 { min-height: calc(100vh - 62px); display: flex; align-items: center; padding-top: clamp(56px,8vw,96px); }
.lost-404 {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr;
  gap: clamp(32px,6vw,80px); align-items: center;
}
@media (max-width: 800px) {
  .lost-404 { grid-template-columns: 1fr; text-align: center; }
  .lost-404__sack { margin: 0 auto; }
  .hero__actions { justify-content: center; }
}

.lost-404__sack {
  position: relative; width: 220px; margin: 0 auto;
  animation: sack-wobble 3.2s ease-in-out infinite;
}
@keyframes sack-wobble {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-6px); }
}
.lost-404__sack-body {
  position: relative; width: 100%; aspect-ratio: 4/5;
  background: var(--cream-2);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}
.lost-404__sack-tie {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 56px; height: 16px; border: 3px solid var(--ink); border-radius: 8px;
  background: var(--spice);
}
.lost-404__sack-face { display: flex; gap: 18px; align-items: center; position: relative; }
.lost-404__eye {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink);
  animation: sack-blink 4.5s infinite;
}
@keyframes sack-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.lost-404__mouth {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 13px; border-bottom: 3px solid var(--ink); border-radius: 0 0 50% 50%;
}
.lost-404__sack-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--chili); text-align: center; margin-top: 18px;
  border: 1.5px dashed var(--chili); padding: 4px 8px; transform: rotate(-3deg);
}
.lost-404__sack-legs { display: flex; justify-content: center; gap: 26px; margin-top: -4px; }
.lost-404__sack-legs span {
  width: 4px; height: 22px; background: var(--ink); border-radius: 2px;
  animation: sack-step 1s ease-in-out infinite;
}
.lost-404__sack-legs span:nth-child(2) { animation-delay: 0.5s; }
@keyframes sack-step { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.lost-404__sack-dust {
  position: absolute; bottom: -6px; left: -10px; width: 50px; height: 14px;
  border-radius: 50%; background: var(--ink-10);
  animation: sack-dust 1s ease-in-out infinite;
}
@keyframes sack-dust { 0%, 100% { opacity: 0.4; transform: scaleX(1); } 50% { opacity: 0.7; transform: scaleX(1.3); } }
.lost-404__title { line-height: 0.95; }

/* ── 26. HATCH PATCH — spice-clump dead zones ─────────── */
.hatch-zone { position: relative; }
.hatch-patch {
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  cursor: pointer; padding: 10px;
}
.hatch-patch--right { float: right; }
.hatch-patch__clump { position: relative; width: 70px; height: 56px; flex-shrink: 0; }

.hp-pod {
  position: absolute; width: 14px; height: 38px; background: var(--chili);
  border-radius: 50% 50% 50% 8% / 60% 60% 40% 40%; border: 2px solid var(--ink);
}
.hp-pod::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 8px; background: var(--leaf); border-radius: 2px;
}
.hp-pod--1 { left: 4px;  top: 10px; transform: rotate(-18deg); }
.hp-pod--2 { left: 26px; top: 0;    transform: rotate(6deg); }
.hp-pod--3 { left: 46px; top: 14px; transform: rotate(22deg); }

.hp-seed {
  position: absolute; width: 22px; height: 9px; background: var(--ink-60);
  border-radius: 50%;
}
.hp-seed--1 { left: 2px;  top: 8px;  transform: rotate(-10deg); }
.hp-seed--2 { left: 24px; top: 0;    transform: rotate(14deg); }
.hp-seed--3 { left: 14px; top: 22px; transform: rotate(-22deg); }
.hp-seed--4 { left: 38px; top: 16px; transform: rotate(8deg); }

.hatch-patch__pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
  width: 220px; text-align: center;
  background: var(--cream); border: 2px dashed var(--chili); border-radius: 4px;
  padding: 14px 16px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}
.hatch-patch:hover .hatch-patch__pop,
.hatch-patch:focus-visible .hatch-patch__pop,
.hatch-patch.is-open .hatch-patch__pop {
  opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0);
}
.hatch-patch--right .hatch-patch__pop {
  left: auto; right: 0; transform: translateY(6px);
}
.hatch-patch--right:hover .hatch-patch__pop,
.hatch-patch--right:focus-visible .hatch-patch__pop,
.hatch-patch--right.is-open .hatch-patch__pop {
  transform: translateY(0);
}
.hatch-patch__text {
  font-family: var(--font-hand); font-size: 19px; color: var(--ink);
  transform: rotate(-1.5deg); margin-bottom: 8px;
}
.hatch-patch__btn {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid var(--ink); border-radius: 14px; padding: 6px 14px;
  background: var(--surface);
}
@media (max-width: 700px) {
  .hatch-patch--right { float: none; margin-left: auto; display: flex; justify-content: flex-end; }
}

/* ── 27. FORTUNE COOKIE ───────────────────────────────── */
.fortune-cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  display: flex; align-items: flex-end; gap: 10px;
}
.fortune-cookie__btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--cream);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.fortune-cookie__btn:hover { transform: scale(1.1) rotate(-6deg); }
.fortune-cookie__btn.is-cracked { animation: cookie-crack 0.4s ease; }
@keyframes cookie-crack {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.3) rotate(-12deg); }
  60%  { transform: scale(0.9) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.fortune-cookie__slip {
  max-width: 240px; font-family: var(--font-hand); font-size: 17px;
  color: var(--ink); background: var(--cream); border: 2px dashed var(--chili);
  border-radius: 4px; padding: 10px 14px; box-shadow: var(--shadow);
  transform: translateX(-12px) scale(0.9); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.fortune-cookie.is-open .fortune-cookie__slip {
  opacity: 1; visibility: visible; transform: translateX(0) scale(1); pointer-events: all;
}
@media (max-width: 700px) {
  .fortune-cookie__slip { max-width: 60vw; }
}

/* ── 28. CARGO SHIP DOODLE ────────────────────────────── */
.ship-zone { overflow: hidden; }
.ship-sea {
  position: relative; height: 150px;
  border-top: 2px solid rgba(26,46,26,0.15);
  border-bottom: 2px solid rgba(26,46,26,0.15);
  background-color: rgba(26,46,26,0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='46'%3E%3Cpath d='M6,13 Q20,7 34,13 Q48,19 62,13 Q76,7 90,13' stroke='%231A2E1A' stroke-width='1.4' fill='none' opacity='0.32' stroke-linecap='round'/%3E%3Cpath d='M-4,34 Q10,28 24,34 Q38,40 52,34 Q66,28 80,34 Q94,40 100,34' stroke='%231A2E1A' stroke-width='1.4' fill='none' opacity='0.32' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 92px 46px;
  background-repeat: repeat;
  display: flex; align-items: center;
}
.ship-doodle {
  position: absolute; left: 8%; top: 16px;
  animation: ship-bob 3.4s ease-in-out infinite;
}
@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-7px) rotate(1.5deg); }
}
.ship-doodle__img { width: clamp(130px, 12vw, 190px); height: auto; display: block; }
.ship-doodle__wake {
  position: absolute; right: 100%; bottom: 8%; width: 60px; height: 6px;
  background: linear-gradient(to left, rgba(26,46,26,0.18), transparent);
  border-radius: 50%;
}
.ship-caption {
  position: absolute; left: calc(8% + 200px); top: 50%; transform: translateY(-50%);
  max-width: 60%;
}
.ship-caption__line {
  display: inline-block; font-family: var(--font-hand); font-size: 20px;
  color: var(--ink); transform: rotate(-1deg);
}
.ship-caption__line.is-scribbling { animation: ship-scribble 0.5s ease; }
@keyframes ship-scribble {
  0%   { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-1deg); }
}
@media (max-width: 700px) {
  .ship-doodle { left: 6%; }
  .ship-caption { left: calc(6% + 130px); max-width: 50%; font-size: 14px; }
  .ship-caption__line { font-size: 16px; }
}

/* ── AUTO-ASSEMBLE CRATE — scattered pieces sit still until you
   press the button; then they fly into place on their own and the
   finished crate becomes a CTA. ─────────────────────────────── */
.puzzle-zone { border-top: var(--border); border-bottom: var(--border); padding-top: clamp(40px,5vw,64px); }
.puzzle-board {
  position: relative; width: 280px; height: 280px; margin: 0 auto;
}
.puzzle-board__slots {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: repeat(2, 140px); grid-template-rows: repeat(2, 140px);
}
.puzzle-slot { border: 2px dashed rgba(26,46,26,0.22); }
.puzzle-piece {
  position: absolute; width: 140px; height: 140px;
  background-image: url('../images/crate-doodle.png');
  background-size: 280px 280px;
  background-position: var(--bg-x) var(--bg-y);
  filter: drop-shadow(2px 3px 0 rgba(26,46,26,0.12));
  transition: left 0.7s cubic-bezier(.2,.8,.2,1.3), top 0.7s cubic-bezier(.2,.8,.2,1.3), transform 0.7s cubic-bezier(.2,.8,.2,1.3);
}
.puzzle-board.is-complete .puzzle-piece { filter: drop-shadow(2px 3px 0 rgba(232,160,32,0.25)); }
.puzzle-board__cta { margin-top: 32px; text-align: center; }
.puzzle-board__btn {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  background-color: var(--cream); border: 2px dashed var(--ink-60); border-radius: 999px;
  padding: 14px 22px; color: var(--ink); cursor: pointer; line-height: 1.5; text-align: center;
  transform: rotate(-1deg); transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.4s ease;
}
.puzzle-board__btn:hover { transform: rotate(1deg) scale(1.04); background-color: var(--spice); }
.puzzle-board.is-complete + .puzzle-board__cta .puzzle-board__btn {
  background-color: var(--ink-fixed); color: var(--white); border-style: solid; border-color: var(--ink-fixed);
  text-transform: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: normal;
}
.puzzle-board.is-complete + .puzzle-board__cta .puzzle-board__btn:hover { background-color: var(--spice); color: var(--ink); }
.puzzle-board__caption {
  margin-top: 14px; display: block; transform: rotate(-1deg);
  font-size: 18px; color: var(--ink-40); white-space: nowrap;
}
@media (max-width: 560px) {
  .puzzle-board { width: 220px; height: 220px; }
  .puzzle-board__slots { grid-template-columns: repeat(2, 110px); grid-template-rows: repeat(2, 110px); }
  .puzzle-piece { width: 110px; height: 110px; background-size: 220px 220px; }
}

/* ── 29. CARD TREATMENT VARIETY ───────────────────────── */
/* Ruled-notebook: hand-written copy on lined paper. The rule lines
   themselves now come from the shared .edit-card__body baseline —
   this variant just adds the red margin line and the hand-written
   feel on top of it. */
.edit-card--notebook .edit-card__body::before {
  content: ''; position: absolute; left: 32px; top: 0; bottom: 0;
  width: 1.5px; background: rgba(196,52,26,0.45); z-index: 1;
}
.edit-card--notebook .edit-card__headline,
.edit-card--notebook .edit-card__excerpt {
  font-family: var(--font-hand); padding-left: 16px;
}
.edit-card--notebook .edit-card__headline { font-size: clamp(21px,2.1vw,27px); transform: rotate(-0.8deg); }
.edit-card--notebook .edit-card__excerpt { font-size: 19px; transform: rotate(0.6deg); color: var(--ink-60); }

/* Stamped/stained: slightly yellowed paper + coffee ring */
.edit-card--stamped { background-color: #F3EBD8; position: relative; }
.edit-card--stamped::after {
  content: ''; position: absolute; bottom: 14px; right: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(120,72,30,0.22);
  box-shadow: inset 0 0 0 6px rgba(120,72,30,0.07);
  pointer-events: none;
}

/* Torn-paper / sticky-note card variant. edit-card has no background
   of its own, so the clipped corner needs one to actually read as a
   torn edge instead of vanishing into the page. */
.product-card--torn,
.edit-card--torn {
  position: relative;
  clip-path: polygon(0 0, 91% 0, 100% 7%, 100% 100%, 0 100%);
  box-shadow: var(--shadow-sp);
}
.product-card--torn { transform: rotate(-1.3deg); }
.edit-card--torn { background-color: var(--cream-2); }
.edit-card--torn:hover { background-color: var(--spice); }
.product-card--torn:hover { transform: rotate(-1.3deg) translate(-2px,-2px); }

/* Subtle paper-grain noise, reusing the same turbulence technique as
   body::after but scoped locally and much fainter — only on cards that
   are already "off" (notebook/stamped), never on the plain baseline. */
.edit-card--notebook, .edit-card--stamped,
.product-card--notebook, .product-card--stamped,
.cert-card--stamped, .value-cell--notebook, .process-step--torn {
  position: relative;
}
.edit-card--notebook::before, .edit-card--stamped::before,
.product-card--notebook::before, .product-card--stamped::before,
.cert-card--stamped::before, .value-cell--notebook::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Ruled-notebook treatment extended to product cards and the about
   page's value cells — same recipe as edit-card--notebook. */
.product-card--notebook .product-body {
  position: relative;
  background-image: repeating-linear-gradient(
    transparent 0 24px, rgba(26,46,26,0.13) 24px 25px
  );
  background-position: 0 6px;
}
.product-card--notebook .product-body::before {
  content: ''; position: absolute; left: 26px; top: 0; bottom: 0;
  width: 1.5px; background: rgba(196,52,26,0.45);
}
.product-card--notebook .product-body h4,
.product-card--notebook .product-body p {
  font-family: var(--font-hand); padding-left: 14px; position: relative; z-index: 1;
}
.product-card--notebook .product-body h4 { font-size: 18px; transform: rotate(-0.8deg); }
.product-card--notebook .product-body p { font-size: 15px; transform: rotate(0.5deg); }

.value-cell--notebook {
  background-image: repeating-linear-gradient(
    transparent 0 26px, rgba(26,46,26,0.1) 26px 27px
  );
  background-position: 0 12px;
}
.value-cell--notebook::after {
  content: ''; position: absolute; left: 30px; top: 0; bottom: 0; z-index: 0;
  width: 1.5px; background: rgba(196,52,26,0.4); pointer-events: none;
}
.value-cell--notebook h4, .value-cell--notebook p { font-family: var(--font-hand); }
.value-cell--notebook h4 { transform: rotate(-0.6deg); }
.value-cell--notebook p { font-size: 15px; transform: rotate(0.5deg); }

/* Stamped/stained extended to product cards and cert cards */
.product-card--stamped .product-body, .cert-card--stamped { background-color: #F3EBD8; }
.product-card--stamped::after, .cert-card--stamped::after {
  content: ''; position: absolute; bottom: 12px; right: 16px; z-index: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(120,72,30,0.22);
  box-shadow: inset 0 0 0 6px rgba(120,72,30,0.07);
  pointer-events: none;
}

/* Torn-paper extended to about page's process steps — needs its own
   background (process-step has none by default) for the clipped
   corner to actually read as a torn edge rather than disappear. */
.process-step--torn {
  background-color: var(--cream-2);
  clip-path: polygon(0 0, 92% 0, 100% 6%, 100% 100%, 0 100%);
}
.process-step--torn h3, .process-step--torn p { position: relative; z-index: 1; }

/* ── 30. MINI SACK — recurring cameo character ────────── */
.mini-sack { position: fixed; right: 18px; bottom: 18px; z-index: 850; width: 44px; cursor: pointer; }
.mini-sack__body {
  position: relative; width: 100%; aspect-ratio: 4/5;
  background: var(--cream-2); border: 2px solid var(--ink);
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  animation: mini-sack-peek 4s ease-in-out infinite;
}
@keyframes mini-sack-peek {
  0%, 80%, 100% { transform: translateY(0) rotate(0deg); }
  90% { transform: translateY(-4px) rotate(-4deg); }
}
.mini-sack__face { display: flex; gap: 7px; position: relative; }
.mini-sack__face span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.mini-sack__bubble {
  position: absolute; bottom: calc(100% + 10px); right: 0; width: 180px;
  font-family: var(--font-hand); font-size: 16px; text-align: center;
  background: var(--cream); border: 2px dashed var(--chili); border-radius: 4px;
  padding: 10px 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
.mini-sack.is-open .mini-sack__bubble { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: all; }
@media (max-width: 700px) { .mini-sack { width: 36px; right: 12px; } }

/* ── 31. MESH CONNECTIVITY — secret supply-chain web ────
   A handful of curated jump-pairs between playful elements,
   each "following the spice" to a related section on another
   page via a red-string snake + portal whoosh, instead of a
   normal page load. A persistent thread-back affordance lets
   you snap back to exactly where you started. Opt-in only —
   never wired into primary nav or CTA links. ─────────────── */
#meshPortal {
  position: fixed; inset: 0; z-index: 6000; pointer-events: none;
  background: var(--ink-fixed); opacity: 0;
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
}
#meshPortal.is-covering { opacity: 1; animation: mesh-portal-cover 0.5s ease forwards; }
#meshPortal.is-revealing { opacity: 1; animation: mesh-portal-reveal 0.55s ease forwards; }
@keyframes mesh-portal-cover {
  0%   { clip-path: circle(0% at var(--mx) var(--my)); }
  100% { clip-path: circle(150% at var(--mx) var(--my)); }
}
@keyframes mesh-portal-reveal {
  0%   { clip-path: circle(150% at var(--mx) var(--my)); }
  100% { clip-path: circle(0% at var(--mx) var(--my)); }
}

.mesh-string {
  position: fixed; height: 3px; width: 0; background: var(--chili);
  border-radius: 2px; transform-origin: left center;
  transform: scaleX(0) rotate(var(--ang, 0deg));
  opacity: 0; z-index: 6001; pointer-events: none;
}
.mesh-string.is-active { animation: mesh-string-snake 0.5s ease-out forwards; }
@keyframes mesh-string-snake {
  0%   { opacity: 1; transform: scaleX(0) rotate(var(--ang)); }
  65%  { opacity: 1; transform: scaleX(1) rotate(var(--ang)); }
  100% { opacity: 0; transform: scaleX(1) rotate(var(--ang)); }
}

.thread-back {
  position: fixed; left: 50%; bottom: 22px; z-index: 3500;
  display: flex; align-items: center; gap: 8px;
  background: var(--cream); border: var(--border); border-radius: 999px;
  padding: 10px 16px 10px 14px; cursor: pointer;
  font-family: var(--font-hand); font-size: 16px; color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 70px); opacity: 0;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
}
.thread-back.is-visible { transform: translate(-50%, 0); opacity: 1; }
.thread-back:hover { transform: translate(-50%, -2px); }
@media (max-width: 700px) {
  .thread-back { bottom: 70px; font-size: 14px; padding: 8px 14px 8px 12px; }
}

/* ── 32. GRID-BREAKING HATCH PATCHES — irregular hand-scribbled
   patches that interrupt the checkered background itself (distinct
   from the chili/cumin clumps above, which just sit on top of the
   grid). Three flavors, scattered at different scroll depths so
   each reads as its own discovery rather than a repeated motif. */
.grid-scratch { position: relative; }
.grid-scratch__text {
  position: relative; z-index: 1; display: block;
  font-family: var(--font-hand); color: var(--ink);
}
.grid-scratch__btn {
  position: relative; z-index: 1; display: inline-block; margin-top: 10px;
  font-family: var(--font-hand); font-size: 15px; color: var(--ink);
  padding: 6px 18px; border: 2px solid var(--chili);
  border-radius: 60% 14% 56% 18% / 16% 54% 14% 60%;
  background: var(--surface); cursor: pointer; appearance: none;
  transform: rotate(-1deg);
}
.grid-scratch__btn:hover { transform: rotate(1deg) scale(1.04); }
/* The reveal sits to the right of the button, hidden until
   pressed. Once shown, it stays (no toggling back). */
.grid-scratch__reveal {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--font-hand); font-size: 18px; color: var(--spice);
  opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap;
  transition: opacity 0.4s ease, max-width 0.4s ease;
}
.grid-scratch__reveal.is-shown { opacity: 1; max-width: 280px; }
/* Give the note room to grow once the reveal is showing, instead
   of wrapping awkwardly inside the original compact width. Pin the
   scribble background to its original size so it doesn't stretch
   and distort across the wider box. */
.grid-scratch--scribbled.has-reveal { max-width: 500px; }
.grid-scratch--scribbled.has-reveal::before { background-size: 220px 140px; background-position: 0 50%; }
@media (max-width: 560px) {
  .grid-scratch__reveal { white-space: normal; }
  .grid-scratch--scribbled.has-reveal { max-width: 320px; }
}

/* Flavor 1 — torn corner / sticky-note overlapping the grid */
.grid-scratch--torn {
  display: inline-block; max-width: 270px;
  background: var(--cream-2); padding: 18px 20px 16px;
  transform: rotate(-2.5deg);
  clip-path: polygon(3% 8%, 20% 0%, 42% 4%, 66% 0%, 90% 5%, 100% 14%,
                      96% 40%, 100% 66%, 94% 90%, 100% 100%, 70% 95%,
                      46% 100%, 20% 94%, 2% 100%, 0% 74%, 6% 48%, 0% 22%);
  box-shadow: var(--shadow-lg);
}
.grid-scratch--torn::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.grid-scratch--torn .grid-scratch__text { font-size: 18px; }

/* Flavor 2 — scratched-out window: grid looks crossed out, text
   drawn directly on the page with no card container. */
.grid-scratch--scribbled { display: inline-block; max-width: 320px; padding: 28px 8px; }
.grid-scratch--scribbled::before {
  content: ''; position: absolute; inset: -10px -16px; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Cg stroke='%238A8275' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M8 14 Q120 6 212 18'/%3E%3Cpath d='M14 40 Q110 60 206 36'/%3E%3Cpath d='M10 70 Q120 54 210 76'/%3E%3Cpath d='M16 102 Q116 118 204 94'/%3E%3Cpath d='M20 18 Q70 90 18 122'/%3E%3Cpath d='M198 22 Q150 86 200 118'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}
.grid-scratch--scribbled .grid-scratch__text { font-size: 19px; color: var(--chili); }

/* Flavor 3 — connect the hatch: a small hand-drawn arrow points
   from a grid cell toward the crayon text. Most playful, least
   disruptive to layout. */
.grid-scratch--arrow { display: inline-flex; align-items: center; gap: 10px; max-width: 360px; }
.grid-scratch__squiggle {
  flex-shrink: 0; width: 56px; height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 40'%3E%3Cpath d='M2 6 Q 30 2, 40 22 T 56 30' stroke='%23E8A020' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M48 24 L56 30 L62 21' stroke='%23E8A020' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.grid-scratch--arrow .grid-scratch__text { font-size: 17px; }

@media (max-width: 700px) {
  .grid-scratch--torn, .grid-scratch--scribbled { max-width: 220px; }
  .grid-scratch--arrow { max-width: 260px; }
}

/* ── ARTICLE BODY — "From the archives" long-form pages ───── */
.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-40);
}
.article-meta__tag { color: var(--spice); }
.article-body { font-size: 16px; line-height: 1.85; color: var(--ink-60); }
.article-body p { margin-bottom: 18px; }
.article-body h2 {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25;
  margin: 40px 0 16px;
}
.article-body strong { color: var(--ink); }
.article-body em { font-style: italic; color: var(--spice); }
.article-body .hand-note { display: block; margin: 22px 0; font-size: 19px; transform: rotate(-1deg); }
.article-body blockquote {
  margin: 32px 0; padding-left: 22px; border-left: 3px solid var(--chili);
  font-family: var(--font-prose-alt); font-size: 19px; line-height: 1.6; color: var(--ink);
}
.article-foot {
  margin-top: 48px; padding-top: 28px; border-top: var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE COMPLIANCE — full audit pass
   Applied after all existing rules to avoid breaking
   any existing desktop layout.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Global overflow-wrap — prevents long words/headings
   from escaping their containers on narrow viewports. ─────── */
h1, h2, h3, h4,
.hero-headline, .page-hero__title,
.bc__name, .pullquote__text, .manifesto-text,
.edit-card__headline, .footer-confess__line,
.display-xl, .display-2xl, .display-lg, .display-md {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 2. Prefers-reduced-motion — pause continuous CSS
   animations site-wide while preserving static states.
   GSAP animations are gated separately in app.js. ─────────── */
@media (prefers-reduced-motion: reduce) {
  /* Grain overlay */
  body::after { animation: none; }
  /* Marquee banners — freeze in place */
  .marquee-track { animation-play-state: paused; }
  /* 404 sack character */
  .lost-404__sack,
  .lost-404__eye,
  .lost-404__sack-dust,
  .lost-404__sack-legs span { animation: none; }
  /* Cargo ship and caption */
  .ship-doodle { animation: none; }
  .ship-caption__line { animation: none !important; }
  /* Mini sack peek */
  .mini-sack__body { animation: none; }
  /* Dino scene (edit-card face) */
  .dino-scene__ground,
  .dino-scene__wind,
  .dino-scene__cloud,
  .dino-scene__plane { animation: none; }
  /* Bento/card flip transitions */
  .bc__front, .bc__back { transition: none; }
  /* Sticker hover transform */
  .sticker { transition: none; }
}

/* ── 3. Bento cards — touch-device tap-to-flip ─────────────
   On pointer:coarse / hover:none devices (touch), :hover is
   "sticky" and the flip never resets cleanly. We disable the
   CSS :hover flip and instead rely on the .is-tapped class
   toggled by JS (initBentoTouch in app.js). ──────────────── */
.bc.is-tapped .bc__front { transform: translateY(-102%); }
.bc.is-tapped .bc__back  { transform: translateY(0); }
.bc.is-tapped .bc__ghost-num { opacity: 0; }

@media (hover: none) {
  /* Cancel sticky-hover flip on touch screens */
  .bc:hover .bc__front { transform: none; }
  .bc:hover .bc__back  { transform: translateY(102%); }
}

/* ── 4. Buttons — 44 px minimum touch target on mobile ─────── */
@media (max-width: 800px) {
  .btn {
    min-height: 44px;
  }
}

/* ── 5. Hamburger — 44 px minimum touch target height ──────── */
.hamburger {
  min-height: 44px;
  align-items: center;
}

/* ── 6. Hero video modal close button — 44 × 44 tap target ─── */
.hero-video-modal__close {
  width: 44px;
  height: 44px;
  top: 8px;
  right: 8px;
  font-size: 24px;
}

/* ── 7. Form inputs — 16 px floor to prevent iOS auto-zoom
   (iOS zooms into any focusable input with font-size < 16px) */
@media (max-width: 800px) {
  .form-field input,
  .form-field textarea,
  .form-field select,
  .phone-row .phone-country-select,
  .phone-row input[type="tel"] {
    font-size: 16px;
  }
  /* Submit button: full-width and centred on mobile */
  #enquiry-form [type="submit"] {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ── 8. Language switcher in top nav — hide on mobile
   (accessible via the mobile overlay's .mob-lang row) ──────── */
@media (max-width: 800px) {
  .nav-inner .lang-switch {
    display: none;
  }
}

/* ── 10. CTA billboard section — reduce top padding on mobile
   The inline padding-top:clamp(240px,26vw,340px) creates room
   for the absolutely-positioned sticker cluster; on mobile the
   cluster is hidden, so the gap is wasted. Class added to the
   section element in index.html. ────────────────────────────── */
@media (max-width: 800px) {
  .hero-cta-section {
    padding-top: clamp(64px, 10vw, 96px) !important;
  }
}

/* ── 11. Private-label bento back — stack vertically on mobile
   The back face uses inline flex-direction:row which squeezes
   the list + button on narrow viewports. ────────────────────── */
@media (max-width: 560px) {
  .bc--private .bc__back {
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow-y: auto;
    gap: 16px !important;
  }
}

/* ── 12. ph-copy__body — lift font-size floor on mobile
   clamp(11px, 1.1vw, 14px) resolves to 11px on 375px screens.
   11px is too small; raise the floor to 13px on mobile. ─────── */
@media (max-width: 800px) {
  .ph-copy__body {
    font-size: 13px;
  }
}

/* ── 13. Edit-card tag and bento category label — small labels
   currently sit at 9px / 10px; raise on mobile for legibility. */
@media (max-width: 800px) {
  .edit-card__tag { font-size: 11px; }
  .bc__cat        { font-size: 11px; }
}

/* ── 14. Mobile nav links — ensure tappable height ──────────── */
.mob-link {
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* ── 15. Nav logo — scale down on very small screens ─────────
   At 320px the logo (190px) + theme-toggle (42px) + hamburger
   (36px) + gaps already approaches the available width. ──── */
@media (max-width: 400px) {
  .nav-logo img {
    max-width: 140px;
    height: auto;
  }
}

/* ── 16. Globe block — centred when stacked in single column ── */
@media (max-width: 900px) {
  .world-globe-block {
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
  }
}

/* ── 17. Article body — pre / code blocks must not
   cause horizontal scroll on narrow screens. ─────────────────── */
.article-body pre,
.article-body code {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── 18. Mobile nav aria-hidden toggle (visual partner rule) ──
   When .is-open is applied by JS the nav is interactable;
   the aria-hidden attribute is toggled in app.js. ────────────── */