/* Layout: cream pages with Yaza blue as the ink. Full-bleed photo hero, then swipeable
   rails and one-idea-per-screen sections. Illustrated ingredients pop in at the edges. */
@font-face {
  font-family: "TAY Benditos";
  src: url("fonts/TAYBenditos.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Brand colors (Yaza_Colors.pdf) */
  --blue: #1D57A5;        /* Pantone 2133C, core */
  --blue-light: #5F8DDA;  /* Pantone 2129C */
  --cream: #FFF3E4;       /* Pantone 9123C */
  --peach: #F3CFB3;       /* Pantone 475C */
  --ink: #12386B;         /* deep blue for running text */
  --paper: #FFFFFF;
  --line: rgba(29, 87, 165, .18);

  --f-title: "TAY Benditos", "Arial Narrow", Impact, sans-serif;
  --f-head: "beaufort-pro", "Fraunces", Georgia, serif;
  --f-body: "tiller", "Alegreya Sans", "Gill Sans", system-ui, sans-serif;

  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.8vw, 3.8rem);
  --step-4: clamp(2.8rem, 1.4rem + 6vw, 7rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 18px;
  --header-h: 68px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: clip; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--f-body); font-size: var(--step-0); line-height: 1.55;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--blue); color: var(--cream); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 6px; }
.center { text-align: center; }

/* Type roles */
.display {
  font-family: var(--f-title); font-size: var(--step-4); line-height: .9;
  letter-spacing: .01em; text-transform: uppercase; color: var(--blue);
}
/* Section titles: TAY Benditos (H1 style), all caps */
.title { font-family: var(--f-title); font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.8rem); line-height: .92; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); }
.title-xl { font-size: clamp(3rem, 1.8rem + 5vw, 6.2rem); }
.eyebrow { font-family: var(--f-title); font-size: var(--step-1); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-light); }
.sub, .lede { font-size: var(--step-1); line-height: 1.4; max-width: 40ch; }
.fine-print { font-size: .9rem; color: var(--blue-light); margin-top: 18px; }
.text-link {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--f-title); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.draft { display: block; margin-top: 10px; font-family: var(--f-body); font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; background: #FFE58A; color: #5A4500; padding: 2px 8px; border-radius: 4px; width: fit-content; }
.draft-block { background: #FFF6CC; border: 1px dashed #C9A400; color: #5A4500; padding: 10px 14px; border-radius: 10px; font-size: .95rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; cursor: pointer;
  background: var(--blue); color: var(--cream);
  font-family: var(--f-title); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 2px solid var(--blue); border-radius: 999px;
  transition: transform .25s var(--ease-pop), background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue); color: var(--cream); }
.btn-small { min-height: 42px; padding: 0 20px; font-size: 1.15rem; }
.btn-big { min-height: 60px; padding: 0 36px; font-size: 1.6rem; background: var(--cream); color: var(--blue); border-color: var(--cream); }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 243, 228, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.logo img { width: 96px; height: auto; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 34px); margin-left: auto; margin-right: clamp(8px, 2vw, 24px); }
.nav a {
  font-family: var(--f-title); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); text-decoration: none; padding-block: 6px; border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--blue-light); }
@media (max-width: 640px) {
  .header-row { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 4px; }
  .nav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .nav a { font-size: 1.1rem; }
  :root { --header-h: 108px; }
}

/* Floating illustrations */
.ico { position: absolute; pointer-events: none; }
.float { will-change: transform; }
.pop.in { animation: pop .8s var(--ease-pop) both; animation-delay: var(--d, 0s); }
@keyframes pop { 0% { scale: .3; } 70% { scale: 1.12; } 100% { scale: 1; } }

/* Sections */
.section { position: relative; padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 8vw, 112px); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.head-row { grid-template-columns: 1fr auto; align-items: end; gap: 16px 24px; }
@media (max-width: 600px) { .head-row { grid-template-columns: 1fr; justify-items: start; } }

/* Rails (horizontal swipe rows) */
.rail {
  display: grid; grid-auto-flow: column; gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 6px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 22px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-arrows { display: flex; gap: 10px; }
.arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--blue); background: transparent;
  color: var(--blue); font-size: 1.4rem; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.arrow:hover { background: var(--blue); color: var(--cream); }
.arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--blue); }
@media (hover: none) { .rail-arrows { display: none; } }

/* 1. Hero */
.hero {
  position: relative; overflow: hidden; color: var(--cream);
  min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  display: grid; align-items: end; background: var(--blue);
}
.hero-bg { position: absolute; inset: 0; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 6s linear; }
.hero-photo.is-active { opacity: 1; transform: scale(1); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 56, 107, .1) 0%, rgba(18, 56, 107, .3) 35%, rgba(18, 56, 107, .9) 100%);
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: clamp(12px, 2vw, 20px); justify-items: start; padding-block: clamp(48px, 10vh, 120px) clamp(36px, 7vh, 80px); }
.hero .display { color: var(--cream); }
.hero-sub { font-size: var(--step-1); max-width: 36ch; }
.slot-line {
  font-family: var(--f-head); font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem); line-height: 1.2;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .28em; row-gap: .12em; margin-top: 8px;
}
.reel {
  display: inline-block; position: relative; overflow: hidden;
  height: 1.3em; padding-inline: .22em; border-radius: .2em;
  background: var(--cream); color: var(--blue);
  transition: width .45s var(--ease-out);
}
.reel-dip { color: var(--reel-tone, var(--blue)); transition: width .45s var(--ease-out), color .3s; }
.slot-dot { margin-left: -.26em; }
.reel-strip { display: flex; flex-direction: column; will-change: transform; }
.reel-strip > span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; font-style: italic; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 10px; }
.hero-link { font-family: var(--f-title); font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); text-underline-offset: 5px; }
.hero-link::after { content: " →"; }
.hero-photo { transition: opacity .9s ease, transform 5s linear; }
.hero-dots { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(20px, 4vh, 40px); display: flex; gap: 8px; }
.hero-dot { width: 14px; height: 14px; padding: 0; border-radius: 999px; border: 2px solid var(--cream); background: transparent; cursor: pointer; transition: width .3s var(--ease-out), background .3s; }
.hero-dot[aria-pressed="true"] { width: 36px; background: var(--cream); }
@media (max-width: 640px) { .hero-dots { top: 16px; bottom: auto; } }
#shuffle.spinning { pointer-events: none; }
#shuffle::before { content: "↻"; font-family: var(--f-body); font-size: 1.3em; line-height: 1; transition: transform .6s var(--ease-out); }
#shuffle.spinning::before { transform: rotate(360deg); }

/* 2. Meet the dips: flip tiles */
.tile-rail { grid-auto-columns: clamp(250px, 26vw, 300px); }
.tile { perspective: 1200px; }
.tile-inner { position: relative; height: clamp(390px, 46vw, 440px); transition: transform .7s var(--ease-out); transform-style: preserve-3d; }
.tile.is-flipped .tile-inner { transform: rotateY(180deg); }
.tile-face {
  position: absolute; inset: 0; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; padding: 20px; text-align: left; border: 0;
}
.tile-front { background: var(--tint); cursor: pointer; align-content: center; justify-items: center; text-align: center; gap: 6px; overflow: hidden; }
.tile-cup { position: relative; width: 86%; margin-bottom: 4px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .16)); transition: transform .45s var(--ease-pop); }
.tile-front:hover .tile-cup { transform: translateY(-4%) rotate(-4deg); }
.tile-name { font-family: var(--f-title); font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--tone); position: relative; }
.tile-hook { font-family: var(--f-body); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); position: relative; }
.tile-back { background: var(--tone); color: var(--paper); transform: rotateY(180deg); align-content: start; gap: 10px; }
.tile-icons { height: 92px; position: relative; }
.tile-ico { position: absolute; width: 82px; height: 82px; object-fit: contain; left: calc(var(--i) * 30%); top: calc(var(--i) * 4px); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.tile.is-flipped .tile-ico { animation: pop .7s var(--ease-pop) both; animation-delay: calc(.25s + var(--i) * .1s); }
.tile-label { font-family: var(--f-title); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.tile-put { display: grid; gap: 10px; }
.tile-put li { display: grid; gap: 2px; font-size: .95rem; line-height: 1.35; }
.tile-put b { font-family: var(--f-head); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.tile-link { align-self: end; white-space: nowrap; font-family: var(--f-title); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); text-underline-offset: 5px; }
.tile-link::after { content: " →"; }
.tile-back-btn { display: none; position: absolute; right: 14px; top: 14px; background: rgba(255, 255, 255, .2); border: 0; color: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: .85rem; cursor: pointer; }
.dips .text-link { display: inline-block; margin-top: 8px; }

/* 3. Dip. Spread. Dollop. */
.verbs { position: relative; background: var(--blue); overflow: hidden; padding-block: clamp(40px, 6vw, 72px); display: grid; gap: clamp(18px, 3vw, 32px); }
.verb-carousel { overflow: hidden; }
.verb-track { display: flex; gap: 16px; width: max-content; animation: verb-loop 45s linear infinite; transition: opacity .35s; }
.verb-track img { height: clamp(240px, 34vw, 440px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.verb-track.swapping { opacity: 0; }
@keyframes verb-loop { to { transform: translateX(-50%); } }
.verb-buttons {
  position: absolute; inset: clamp(40px, 6vw, 72px) 0 auto 0; height: clamp(240px, 34vw, 440px);
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: clamp(8px, 3vw, 40px); padding-inline: var(--gutter);
  pointer-events: none;
}
.verb {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 0;
  background: url("img/paper/Colored-Rectangles-04.png") center / 100% 100% no-repeat; color: var(--blue);
  font-family: var(--f-title); font-size: clamp(2.3rem, 1rem + 6.5vw, 7rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  padding: .2em .45em .12em; rotate: -2deg; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
  transition: transform .3s var(--ease-pop), background .2s, color .2s;
}
.verb:nth-child(2) { rotate: 1.5deg; }
.verb:nth-child(3) { rotate: -1deg; }
.verb:hover { transform: scale(1.05); }
.verb { color: var(--cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .12); transition: transform .35s var(--ease-pop), filter .3s; }
.verb[data-verb="dip"] { background-image: url("img/paper/Colored-Rectangles-05.png"); }
.verb[data-verb="spread"] { background-image: url("img/paper/Colored-Rectangles-03.png"); }
.verb[data-verb="dollop"] { background-image: url("img/paper/Colored-Rectangles-07.png"); }
.verb:not(.is-active) { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .2)) saturate(.85); }
.verb.is-active { transform: scale(1.1) translateY(-4px); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35)); }
.verb-caption { text-align: center; color: var(--cream); font-size: var(--step-1); padding-inline: var(--gutter); }

/* 4. Quiz */
.quiz-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.quiz-intro { position: relative; display: grid; gap: 14px; }
.quiz-ico { position: relative; width: clamp(90px, 10vw, 140px); margin-top: 12px; rotate: -10deg; }
.quiz-card {
  background: var(--paper); border-radius: 24px; padding: clamp(22px, 3.5vw, 40px);
  min-height: 420px; display: grid; align-content: start; gap: 18px;
  box-shadow: 0 18px 40px rgba(18, 56, 107, .12); position: relative; overflow: hidden;
}
.quiz-dots { display: flex; gap: 8px; }
.quiz-dots li { width: 34px; height: 6px; border-radius: 6px; background: var(--line); transition: background .3s; }
.quiz-dots li.is-on { background: var(--blue); }
.quiz-step { display: none; gap: 18px; }
.quiz-step.is-active { display: grid; animation: slide-in .45s var(--ease-out); }
@keyframes slide-in { from { opacity: 0; translate: 30px 0; } to { opacity: 1; translate: 0 0; } }
.quiz-q { font-family: var(--f-head); font-size: var(--step-2); color: var(--blue); line-height: 1.1; }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-opts button {
  display: grid; justify-items: center; gap: 8px; text-align: center; cursor: pointer;
  background: var(--cream); border: 2px solid transparent; border-radius: 16px; padding: 16px 10px;
  font-size: 1.05rem; font-weight: 500; color: var(--ink); transition: border-color .2s, transform .25s var(--ease-pop);
}
.quiz-opts button:hover { border-color: var(--blue-light); transform: translateY(-3px); }
.quiz-opts img { width: 64px; height: 64px; object-fit: contain; }
.quiz-step[data-step="0"] .quiz-opts img { width: 96px; height: 80px; transition: transform .35s var(--ease-pop); }
.quiz-opts button:hover img { transform: rotate(-8deg) scale(1.08); }
.quiz-result { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: center; animation: slide-in .5s var(--ease-out); }
.quiz-result[hidden] { display: none; }
.result-stage { background: var(--result-tint, var(--cream)); border-radius: 18px; aspect-ratio: 1; display: grid; place-items: center; }
.result-stage img { width: 84%; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .16)); animation: pop .7s var(--ease-pop) both; }
.result-copy { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.result-name { font-family: var(--f-head); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); overflow-wrap: anywhere; line-height: 1; color: var(--result-tone, var(--blue)); }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 6px; }
@media (max-width: 860px) { .quiz-wrap { grid-template-columns: 1fr; } .quiz-intro { padding-right: 84px; } .quiz-ico { position: absolute; right: 0; top: -10px; margin: 0; width: 76px; } }
@media (max-width: 520px) { .quiz-result { grid-template-columns: 1fr; } .result-stage { max-width: 240px; } }

/* 5. Where it comes from */
.origin { background: var(--peach); }
.story-rail { grid-auto-columns: clamp(270px, 34vw, 420px); }
.story-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--blue); }
.story-card img { width: 100%; height: 100%; object-fit: cover; }
.story-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(18, 56, 107, .9)); }
.story-card p { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; color: var(--cream); font-family: var(--f-head); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; }
.story-card-cta { background: var(--blue); }
.story-card-cta::after { display: none; }
.story-card-cta a { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--cream); text-decoration: none; font-family: var(--f-title); font-size: 2rem; letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: 20px; }
.story-card-cta img { width: 120px; height: auto; transition: transform .4s var(--ease-pop); }
.story-card-cta a:hover img { transform: rotate(-12deg) scale(1.1); }
.story-card-cta span::after { content: " →"; }

/* 6. Made the right way */
.made .title { margin-bottom: clamp(24px, 3.5vw, 40px); }
.proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); }
.proof {
  display: grid; justify-items: center; gap: 12px; padding: 20px 10px; cursor: pointer; text-align: center;
  background: var(--paper); border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--f-title); font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); letter-spacing: .05em; text-transform: uppercase; color: var(--blue);
  transition: border-color .2s, transform .3s var(--ease-pop), background .2s;
}
.proof img { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); object-fit: contain; transition: transform .45s var(--ease-pop); }
.proof:hover img, .proof[aria-selected="true"] img { transform: scale(1.12) rotate(-8deg); }
.proof[aria-selected="true"] { border-color: var(--blue); background: var(--cream); }
.proof-detail { margin-top: 20px; font-family: var(--f-head); font-size: var(--step-2); line-height: 1.2; color: var(--blue); max-width: 34ch; min-height: 2.6em; }
.proof-detail.flash { animation: slide-in .4s var(--ease-out); }
@media (max-width: 700px) { .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 7. Find Yaza */
.find { background: var(--blue-light); color: var(--paper); padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); display: grid; gap: clamp(28px, 4vw, 44px); overflow: hidden; }
.find .title { color: var(--paper); max-width: 18ch; }
.find .lede { color: var(--paper); }
.find-inner { display: grid; gap: 22px; justify-items: start; }
.zip-form { display: flex; flex-wrap: wrap; gap: 10px; width: min(560px, 100%); }
.zip-form input {
  flex: 1 1 200px; min-width: 0; min-height: 56px; padding: 0 22px; font: inherit; font-size: 1.2rem; letter-spacing: .04em;
  color: var(--ink); background: var(--paper); border: 2px solid var(--paper); border-radius: 999px;
}
.zip-form .btn { min-height: 56px; }
.form-note { flex-basis: 100%; min-height: 1.4em; }
.locator {
  width: 100%; background: var(--cream); color: var(--ink); border-radius: var(--radius); position: relative;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease-out), opacity .3s;
}
.locator.is-open { max-height: min(720px, 80vh); overflow-y: auto; overscroll-behavior: contain; opacity: 1; }
.locator-fallback { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 40px 24px; }
.locator-fallback img { width: 90px; }
.locator.loaded .locator-fallback { display: none; }
.retailer-band { background: var(--blue); overflow: hidden; padding-block: 26px; }
.retailer-track { display: flex; align-items: center; gap: clamp(36px, 5vw, 64px); width: max-content; animation: verb-loop 50s linear infinite; }
.retailer-band:hover .retailer-track { animation-play-state: paused; }
.retailer-track img { width: var(--w); height: var(--h); max-width: none; object-fit: contain; }
@media (max-width: 640px) { .retailer-track img { width: calc(var(--w) * .78); height: calc(var(--h) * .78); } }
.find-social { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.find-social a { font-family: var(--f-title); font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); text-underline-offset: 6px; }
.find-page { padding-top: clamp(40px, 6vw, 80px); }

/* Recipes */
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.recipe-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recipe { display: grid; align-content: start; gap: 12px; text-decoration: none; color: var(--blue); }
.recipe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; transition: transform .35s var(--ease-pop); }
.recipe:hover img { transform: rotate(-1.5deg) scale(1.02); }
.recipe b { font-family: var(--f-head); font-weight: 400; font-size: var(--step-1); line-height: 1.2; }
.recipe[hidden] { display: none; }
@media (max-width: 960px) { .recipe-grid, .recipe-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { cursor: pointer; border: 2px solid var(--blue); background: transparent; color: var(--blue); border-radius: 999px; padding: 8px 18px; font-weight: 500; }
.chip.is-active { background: var(--blue); color: var(--cream); }

/* Page heroes (Products, Recipes) */
.page-hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(16px, 2vw, 24px); overflow: hidden; }
.page-hero .wrap { display: grid; gap: 16px; }
.page-hero-ico { width: clamp(90px, 13vw, 180px); right: 6%; top: 20%; rotate: 10deg; }
@media (max-width: 700px) { .page-hero-ico { opacity: .35; } }

/* Products overview */
.group-label { font-family: var(--f-title); font-size: var(--step-2); letter-spacing: .05em; text-transform: uppercase; color: var(--blue-light); margin: 28px 0 18px; display: flex; align-items: center; gap: 16px; }
.group-label::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.pcard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.pcard { display: grid; align-content: start; gap: 6px; text-decoration: none; color: var(--blue); }
.pcard-stage { position: relative; aspect-ratio: 1; background: var(--tint); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
.pcard-cup { width: 74%; position: relative; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .16)); transition: transform .45s var(--ease-pop); }
.pcard-ico { position: absolute; width: 28%; right: 6%; top: 6%; rotate: 10deg; transition: transform .5s var(--ease-pop); }
.pcard:hover .pcard-cup { transform: translateY(-5%) rotate(-4deg) scale(1.04); }
.pcard:hover .pcard-ico { transform: translate(-14%, 10%) scale(1.25) rotate(-18deg); }
.pcard b { font-family: var(--f-head); font-weight: 400; font-size: var(--step-2); line-height: 1.08; }
.pcard-hook { font-family: var(--f-title); font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tone); }
.pcard-more { font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .pcard-grid { grid-template-columns: 1fr; gap: 24px; }
  .pcard { grid-template-columns: 42% minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .pcard-stage { grid-row: 1 / span 3; margin: 0; }
  .pcard b { font-size: var(--step-1); }
  .pcard-more { display: none; }
}

/* Product page */
.pp-hero { background: var(--tint); padding-block: clamp(32px, 5vw, 72px); overflow: hidden; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.pp-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.pp-cup { width: 86%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .2)); position: relative; z-index: 1; }
.pp-ico { position: absolute; width: 24%; z-index: 2; }
.pp-ico:nth-of-type(2) { left: 0; top: 4%; rotate: -10deg; }
.pp-ico:nth-of-type(3) { right: 2%; top: 10%; rotate: 12deg; }
.pp-ico:nth-of-type(4) { right: 10%; bottom: 4%; rotate: -6deg; }
.pp-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.crumb { font-size: .95rem; color: var(--blue); text-underline-offset: 4px; }
.crumb::before { content: "← "; }
.pp-hook { font-family: var(--f-title); font-size: var(--step-2); letter-spacing: .04em; text-transform: uppercase; color: var(--tone); line-height: 1; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 8px; }
.badges li { background: var(--paper); color: var(--blue); border-radius: 999px; padding: 6px 14px; font-size: .95rem; font-weight: 500; }
@media (max-width: 800px) { .pp-grid { grid-template-columns: 1fr; } .pp-stage { width: min(420px, 100%); margin-inline: auto; } }
.put-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(20px, 3vw, 32px); }
.put-list li { background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 6px; border-top: 6px solid var(--tone); }
.put-list b { font-family: var(--f-head); font-weight: 400; font-size: var(--step-2); color: var(--blue); }
@media (max-width: 640px) { .put-list { grid-template-columns: 1fr; } }
.pp-facts { background: var(--paper); }
.facts-grid { display: grid; grid-template-columns: 1.2fr minmax(0, 360px); gap: clamp(24px, 5vw, 72px); align-items: start; }
.ingredients { display: grid; gap: 16px; min-width: 0; }
.ing-list { font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 800px) { .facts-grid { grid-template-columns: 1fr; } }

/* Nutrition Facts panel, styled after the FDA label (always black on white, like the package) */
.nf { border: 2px solid #111; padding: 8px 10px; background: #fff; color: #111; font-family: "Helvetica Neue", Arial, sans-serif; font-size: .92rem; line-height: 1.25; max-width: 360px; width: 100%; }
.nf h3 { font-family: inherit; font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: -.01em; }
.nf-serv { margin-top: 4px; }
.nf-size { display: flex; justify-content: space-between; font-size: 1.05rem; border-bottom: 10px solid #111; padding-bottom: 4px; }
.nf-cal { display: flex; justify-content: space-between; align-items: end; border-bottom: 5px solid #111; padding: 4px 0; }
.nf-cal b:first-child { font-size: 1.4rem; font-weight: 900; }
.nf-cal small { display: block; font-size: .8rem; font-weight: 700; }
.nf-cal b:last-child { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.nf table { width: 100%; border-collapse: collapse; }
.nf thead th { font-size: .78rem; font-weight: 700; text-align: left; padding: 3px 0; border-bottom: 1px solid #111; }
.nf thead th:last-child { text-align: right; }
.nf td, .nf tbody th { padding: 3px 0; border-bottom: 1px solid #111; font-weight: 400; text-align: left; }
.nf td { text-align: right; font-weight: 700; }
.nf-row.nf-in1 th { padding-left: 14px; }
.nf-row.nf-in2 th { padding-left: 28px; }
.nf tbody tr:last-child th, .nf tbody tr:last-child td { border-bottom: 10px solid #111; }
.nf-micros { font-size: .8rem; padding-top: 4px; }

.others-wrap .title { margin-bottom: 22px; }
.others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.other { display: grid; align-content: start; gap: 8px; text-decoration: none; color: var(--blue); font-family: var(--f-head); font-size: 1.1rem; line-height: 1.15; }
.other img { background: var(--tint); border-radius: 14px; aspect-ratio: 1; object-fit: contain; padding: 12%; transition: transform .35s var(--ease-pop); }
.other:hover img { transform: rotate(-4deg) scale(1.03); }
@media (max-width: 800px) { .others { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* Our Story */
.story-hero { position: relative; min-height: min(78vh, 720px); display: grid; align-items: end; overflow: hidden; color: var(--cream); }
.story-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(18, 56, 107, .9)); }
.story-hero-copy { position: relative; z-index: 1; padding-block: 48px; display: grid; gap: 12px; }
.story-hero .title { color: var(--cream); max-width: 16ch; }
.story-hero .eyebrow { color: var(--peach); }
.story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.story-block { display: grid; gap: 16px; align-content: start; }
.story-block p { font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 760px) { .story-cols { grid-template-columns: 1fr; } }
.quote-band { position: relative; background: var(--blue); padding-block: clamp(56px, 8vw, 104px); overflow: hidden; }
.quote { color: var(--cream); font-size: clamp(2.4rem, 1.2rem + 5vw, 6rem); max-width: 16ch; }
.quote-ico { width: clamp(90px, 12vw, 170px); right: 6%; bottom: 12%; }
.story-photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-photo-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.story-photo-row img:nth-child(2) { translate: 0 28px; }
@media (max-width: 640px) { .story-photo-row { grid-template-columns: 1fr 1fr; } .story-photo-row img:nth-child(3) { display: none; } }
.team { background: var(--paper); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.team-grid li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--cream); border-radius: 16px; padding: 16px; }
.team-grid img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: contain; }
.team-grid b { font-family: var(--f-head); font-weight: 400; font-size: 1.35rem; color: var(--blue); align-self: end; }
.team-grid span { font-size: .95rem; color: var(--blue-light); align-self: start; }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.cta-band-inner { display: grid; justify-items: center; text-align: center; gap: 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Footer */
.site-footer { background: var(--blue); color: var(--cream); padding-block: 48px calc(36px + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.footer-logo img { width: 120px; height: auto; }
.footer-tabs { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: end; }
.footer-tabs a { font-family: var(--f-title); font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.footer-tabs a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255, 243, 228, .25); }
.footer-social span { font-family: var(--f-title); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--peach); }
.footer-social a { text-underline-offset: 4px; }
.fine { grid-column: 1 / -1; font-size: .9rem; opacity: .75; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } .footer-tabs { justify-content: start; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .float { transform: none !important; }
}

@media (hover: none), (pointer: coarse) { .tile-back-btn { display: block; } }
.tile-front { transition: box-shadow .3s; }

/* Product names: TAY Benditos. Product subheads: Tiller at 600 = Demi once it's in the Adobe kit; browsers fall back to Bold until then. */
.pcard b, .other span, .result-name, .pp-copy h1.title {
  font-family: var(--f-title); text-transform: uppercase; letter-spacing: .02em; line-height: .95; font-weight: 400;
}
.pcard b { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); }
.pp-copy h1.title { font-size: clamp(2.8rem, 1.8rem + 4vw, 5.2rem); }
.other span { font-size: 1.35rem; }
.pcard-hook, .pp-hook {
  font-family: var(--f-body); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.25;
}
.pcard-hook { font-size: 1.05rem; }
.pp-hook { font-size: var(--step-1); }

/* H3 standard (brand): Tiller Demi, all caps. Used for subheads; running paragraphs stay sentence case. */
.sub, .hero-sub, .tile-hook, .pcard-hook, .pp-hook {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; line-height: 1.35;
}
.sub { font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); max-width: 46ch; }
.hero-sub { font-size: clamp(1rem, .92rem + .35vw, 1.2rem); max-width: 40ch; }
.tile-hook, .pcard-hook { font-size: .9rem; }
.pp-hook { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }

/* Dip descriptors (what it is) under the product name */
.tile-desc, .pcard-desc { font-family: var(--f-head); font-size: 1.15rem; line-height: 1.1; color: var(--blue); position: relative; }

/* Hero split: text in the left 60%, studio slideshow in the right 40% */
.hero { align-items: center; }
.hero-bg { left: 60%; }
.hero-bg::after { background: linear-gradient(90deg, rgba(29, 87, 165, .35) 0%, rgba(29, 87, 165, 0) 18%); }
.hero-inner { max-width: 60%; margin: 0; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) clamp(24px, 4vw, 56px); }
.hero .display { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6rem); }
.slot-line { font-size: clamp(1.8rem, 1rem + 2.6vw, 3.4rem); }
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-bg { position: relative; left: auto; inset: auto; height: 46svh; min-height: 280px; order: -1; }
  .hero-bg::after { background: none; }
  .hero-inner { max-width: 100%; padding: 28px var(--gutter) 40px; }
  .hero-dots { top: 16px; bottom: auto; }
}
.reel { flex-shrink: 0; }

/* Hero takes 80% of the screen height on desktop (it can grow if the text needs more room) */
@media (min-width: 761px) {
  .hero { min-height: 80svh; }
  .hero-inner { padding-block: clamp(32px, 6vh, 72px); }
}

/* Torn-paper edge where the slideshow meets the text, like the colored rectangles */
.hero-bg { clip-path: polygon(1.46% 0.00%, 2.93% 1.90%, 2.41% 3.65%, 0.26% 5.98%, 0.17% 8.59%, 0.31% 11.06%, 1.91% 12.84%, 0.56% 16.10%, 2.82% 18.14%, 2.60% 21.64%, 4.39% 24.03%, 3.86% 25.72%, 0.65% 27.90%, 1.39% 29.74%, 0.81% 32.97%, 2.88% 35.73%, 2.46% 38.08%, 0.27% 39.80%, 3.06% 41.82%, 1.41% 44.27%, 2.04% 47.04%, 3.57% 49.24%, 1.10% 52.24%, 2.36% 54.99%, 3.28% 58.34%, 4.41% 60.52%, 1.88% 62.35%, 0.68% 65.47%, 0.18% 68.04%, 3.44% 70.98%, 3.94% 73.73%, 3.13% 75.95%, 2.61% 78.74%, 3.78% 81.25%, 2.13% 84.74%, 0.27% 87.67%, 2.91% 90.68%, 3.70% 94.26%, 1.74% 96.43%, 0.10% 99.37%, 0.76% 100%, 100% 100%, 100% 0%); }
.hero-bg::after { background: none; }
@media (max-width: 760px) { .hero-bg { clip-path: polygon(0% 0%, 100% 0%, 100.00% 95.14%, 98.28% 98.73%, 96.42% 95.86%, 94.04% 99.29%, 92.28% 96.97%, 89.58% 99.36%, 86.34% 99.25%, 84.19% 96.78%, 81.87% 99.36%, 78.35% 95.33%, 76.40% 95.78%, 74.33% 97.17%, 71.56% 95.95%, 69.95% 96.80%, 67.61% 97.61%, 64.10% 98.30%, 61.47% 97.90%, 58.52% 94.80%, 55.12% 98.79%, 51.77% 98.89%, 49.39% 96.69%, 47.58% 97.99%, 45.86% 94.87%, 43.84% 95.39%, 41.56% 94.79%, 39.96% 95.33%, 38.15% 96.50%, 36.50% 99.31%, 33.67% 95.32%, 31.57% 96.41%, 29.24% 95.18%, 25.94% 99.96%, 23.41% 97.16%, 21.64% 95.06%, 19.36% 95.96%, 16.10% 95.39%, 14.45% 99.73%, 11.79% 95.31%, 9.11% 94.65%, 6.45% 99.88%, 3.13% 98.33%, 1.00% 96.52%, 0% 98.75%); } }

/* Descriptor (H2 on tiles and cards) matches the product name color */
.tile-desc, .pcard-desc, .pp-copy .eyebrow { color: var(--tone); }

/* Softer tear: about 12 angles down the edge */
.hero-bg { clip-path: polygon(1.72% 0.00%, 0.38% 8.18%, 1.14% 17.61%, 0.42% 26.00%, 2.36% 31.19%, 0.15% 38.73%, 2.13% 49.25%, 0.19% 56.98%, 1.79% 68.53%, 0.88% 76.14%, 1.05% 83.94%, 2.19% 92.02%, 0.05% 100.00%, 100% 100%, 100% 0%); }
@media (max-width: 760px) { .hero-bg { clip-path: polygon(0% 0%, 100% 0%, 100.00% 97.07%, 92.40% 98.94%, 82.21% 96.68%, 72.81% 97.10%, 66.21% 99.35%, 56.01% 97.90%, 52.68% 97.97%, 44.59% 98.59%, 30.88% 98.17%, 25.05% 97.85%, 19.16% 96.61%, 5.70% 99.04%, 0.00% 99.89%); } }
/* Keep the open tub in frame on the close-up slides */
.hero-photo[data-dip="roasted-garlic-labneh"] { object-position: 50% 75%; }
.hero-photo[data-dip="zaatar-labneh"] { object-position: 50% 60%; }
.hero-photo[data-dip="baba-ghanouj"] { object-position: 50% 70%; }
.hero-photo[data-dip="tzatziki"] { object-position: 45% 70%; }
.hero-photo[data-dip="muhammara"] { object-position: 40% 65%; }

/* Tiles v3: shorter, icons scattered behind the tub on the front, flavor callout on the back */
.tile-inner { height: clamp(330px, 32vw, 360px); }
.tile-front { align-content: center; gap: 4px; padding: 18px 18px 22px; }
.tile-front .tile-icons { position: absolute; inset: 0; height: auto; pointer-events: none; }
.tile-front .tile-ico { position: absolute; height: auto; object-fit: contain; opacity: .95; filter: none; z-index: 0; }
.tile-front:hover .tile-ico { animation: pop .6s var(--ease-pop) both; animation-delay: calc(var(--i) * .07s); }
.tile-cup { z-index: 1; width: 78%; margin-bottom: 6px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .18)); }
.tile-name, .tile-desc { z-index: 1; }
.tile-back { align-content: start; gap: 8px; padding: 22px 20px; }
.tile-back .tile-hook { color: var(--paper); font-size: 1rem; padding-right: 64px; }
.tile-back .tile-label { margin-top: 4px; }
.tile.is-flipped .tile-ico { animation: none; }

/* Tile backs: three use cases, names only */
.tile-back .tile-put { gap: 6px; }
.tile-back .tile-put li { display: block; font-family: var(--f-head); font-size: 1.45rem; line-height: 1.15; padding-left: 22px; position: relative; }
.tile-back .tile-put li::before { content: "→"; position: absolute; left: 0; font-family: var(--f-body); font-size: 1rem; top: .3em; opacity: .8; }
.put-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .put-list { grid-template-columns: 1fr; } }

/* Tiles v4: torn-edge colored squares (matching today's yazafoods.com homepage) */
.tile-rail { grid-auto-columns: clamp(230px, 24vw, 290px); padding-top: 26px; padding-bottom: 30px; }
.tile { perspective: 1200px; display: grid; justify-items: center; text-align: center; gap: 4px; }
.tile-card { position: relative; width: 100%; margin-bottom: 10px; }
.tile-inner { height: auto; aspect-ratio: 1 / 1; }
.tile-face { padding: 0; border-radius: 0; background: none; }
.tile-front { display: block; cursor: pointer; overflow: visible; }
.tile-front img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(18, 56, 107, .16)); transition: transform .45s var(--ease-pop); }
.tile-front:hover img { transform: rotate(-2deg) scale(1.02); }
.tile-back {
  background: var(--tone);
  -webkit-mask: var(--tile) center / 100% 100% no-repeat; mask: var(--tile) center / 100% 100% no-repeat;
  padding: 13% 13% 12%; align-content: center; gap: 6px; text-align: left; color: var(--paper);
}
.tile-back .tile-hook { padding-right: 0; font-size: .9rem; }
.tile-back .tile-put li { font-size: 1.3rem; }
.tile-back .tile-link { font-size: 1rem; margin-top: 4px; }
.tile-back-btn { right: 13%; top: 11%; }
.tile-icons { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tile-peek { position: absolute; width: 24%; height: auto; transition: transform .5s var(--ease-pop); }
.tile:hover .tile-peek { transform: scale(1.12); }
.tile:hover .tile-peek[style*="left:"] { translate: -6% -6%; }
.tile:hover .tile-peek[style*="right:"] { translate: 6% -6%; }
.tile .tile-name { position: static; color: var(--tone); font-size: clamp(1.7rem, 1.4rem + .8vw, 2.2rem); }
.tile .tile-desc { position: static; }

/* Our Story v2 */
.story-lead { padding-bottom: clamp(32px, 5vw, 64px); }
.lead-quote { margin: 0; max-width: 860px; display: grid; gap: 20px; }
.lead-quote p { font-family: var(--f-head); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.3; color: var(--blue); }
.lead-quote .lead-kicker, .beat-kicker { font-family: var(--f-title); text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1; color: var(--blue-light); }
.lead-quote footer { display: flex; align-items: center; gap: 14px; }
.lead-quote footer img { width: 56px; height: 56px; object-fit: contain; }
.lead-quote footer span { display: grid; font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--blue-light); }
.lead-quote footer b { font-family: var(--f-title); font-weight: 400; font-size: 1.4rem; color: var(--blue); letter-spacing: .04em; }
.story-beats { padding-block: clamp(32px, 5vw, 64px); display: grid; gap: clamp(40px, 6vw, 80px); }
.beat { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.beat-flip .beat-photo { order: 2; }
.beat-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); max-height: 560px; }
.beat-copy { display: grid; gap: 14px; min-width: 0; }
.beat-step { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--blue-light); }
.beat-text { font-family: var(--f-head); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.2; color: var(--blue); }
@media (max-width: 760px) { .beat { grid-template-columns: 1fr; } .beat-flip .beat-photo { order: 0; } .beat-photo { max-height: 420px; } }
.suitcase .quote { max-width: 20ch; }
.short-version { background: var(--paper); }
.short-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px 56px; align-items: start; }
.short-card { background: var(--cream); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; justify-items: start; }
.short-card p { font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 760px) { .short-inner { grid-template-columns: 1fr; } }

/* Descriptors ("Thick Yogurt Dip" etc.) use the H3 standard: Tiller Demi, all caps */
.tile .tile-desc, .pcard-desc, .pp-copy .eyebrow {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .88rem; line-height: 1.3;
}
.pp-copy .eyebrow { font-size: 1rem; }

/* ===== Our Story v3 (Maazah-style) ===== */
.story-intro { background: var(--blue); color: var(--cream); padding-block: clamp(40px, 6vw, 88px) 0; overflow: hidden; }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: end; }
.intro-copy { display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(40px, 6vw, 88px); min-width: 0; }
.story-intro .eyebrow { color: var(--peach); }
.story-intro .title { color: var(--cream); }
.intro-text { font-family: var(--f-head); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1.4; max-width: 34ch; }
.intro-kicker { font-family: var(--f-title); text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; color: var(--peach); }
.intro-sign { display: grid; font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .85rem; color: var(--peach); }
.intro-sign b { font-family: var(--f-title); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em; color: var(--cream); }
.intro-photo { position: relative; margin: 0; align-self: end; }
.intro-paper { position: absolute; left: 4%; right: 4%; top: 14%; width: 92%; height: 70%; object-fit: fill; rotate: -4deg; }
.intro-karim { position: relative; width: 100%; max-width: 440px; margin-inline: auto; display: block; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .25)); }
@media (max-width: 760px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-copy { padding-bottom: 8px; }
  .intro-karim { max-width: 320px; }
}

/* How it started: staggered polaroids */
.started .title { margin-bottom: clamp(28px, 4vw, 48px); }
.polaroids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: start; }
.polaroid { background: var(--paper); padding: 12px 12px 18px; border-radius: 6px; box-shadow: 0 14px 30px rgba(18, 56, 107, .14); rotate: var(--r); display: grid; gap: 14px; transition: rotate .4s var(--ease-pop), translate .4s var(--ease-pop); }
.polaroid:nth-child(2) { margin-top: 56px; } .polaroid:nth-child(3) { margin-top: 112px; } .polaroid:nth-child(4) { margin-top: 168px; }
.polaroid:hover { rotate: 0deg; translate: 0 -6px; }
.polaroid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.polaroid p { font-size: 1.05rem; line-height: 1.45; color: var(--ink); padding-inline: 4px; }
.pop-in.in { animation: drop-in .8s var(--ease-pop) both; animation-delay: var(--d, 0s); }
@keyframes drop-in { from { translate: 0 -24px; opacity: .2; } to { translate: 0 0; opacity: 1; } }
@media (max-width: 860px) {
  .polaroids { grid-template-columns: 1fr 1fr; }
  .polaroid:nth-child(n) { margin-top: 0; }
  .polaroid:nth-child(even) { margin-top: 40px; }
}

/* Labneh history: horizontal timeline driven by vertical scroll */
.history { position: relative; background: var(--peach); height: 340vh; }
.history-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding-block: clamp(28px, 4vw, 48px) 0; }
.history-head { display: grid; gap: 16px; }
.history-progress { height: 6px; border-radius: 6px; background: rgba(29, 87, 165, .15); overflow: hidden; max-width: 420px; }
.history-progress span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 6px; }
.history-window { overflow: hidden; display: grid; align-items: center; }
.history-track {
  display: flex; gap: clamp(28px, 5vw, 80px); width: max-content; will-change: transform;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  position: relative;
}
.history-track::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(150px, 15vw, 190px); height: 3px; background: repeating-linear-gradient(90deg, var(--blue) 0 14px, transparent 14px 24px); opacity: .5; }
.stop { width: clamp(240px, 26vw, 320px); display: grid; gap: 10px; align-content: start; position: relative; }
.stop img { width: clamp(140px, 14vw, 180px); height: auto; aspect-ratio: 1; transition: transform .5s var(--ease-pop); }
.stop.is-on img { transform: scale(1.08) rotate(-4deg); }
.stop-when { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--blue-light); padding-top: 18px; position: relative; }
.stop-when::before { content: ""; position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--peach); border: 3px solid var(--blue); transition: background .3s; }
.stop.is-on .stop-when::before { background: var(--blue); }
.stop p { font-family: var(--f-head); font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); line-height: 1.25; color: var(--blue); }
/* Phones and reduced motion: a plain vertical timeline */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .history { height: auto; padding-bottom: 48px; }
  .history-sticky { position: static; height: auto; overflow: visible; }
  .history-progress { display: none; }
  .history-track { flex-direction: column; width: auto; transform: none !important; gap: 36px; padding-top: 28px; }
  .history-track::before { left: calc(var(--gutter) + 7px); right: auto; top: 28px; bottom: 0; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 14px, transparent 14px 24px); }
  .stop { width: auto; grid-template-columns: 110px 1fr; column-gap: 16px; padding-left: 28px; }
  .stop img { width: 110px; grid-row: 1 / span 2; }
  .stop-when { padding-top: 0; }
  .stop-when::before { left: -28px; top: 2px; }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .stop { position: relative; }
  .stop-when { position: static; }
  .stop-when::before { left: 0; top: 4px; }
}
/* Products page: cucumber and eggplant read small at the default icon size */
.pcard[href="tzatziki.html"] .pcard-ico, .pcard[href="baba-ghanouj.html"] .pcard-ico { width: 40%; right: 3%; top: 3%; }
.stop img.stop-photo { object-fit: contain; filter: drop-shadow(0 10px 12px rgba(18, 56, 107, .18)); }
/* Timeline tub: bouncy zoom + wiggle on hover */
.stop:has(.stop-photo) { z-index: 1; }
.stop:has(.stop-photo):hover { z-index: 3; }
.stop img.stop-photo { cursor: zoom-in; transition: transform .5s var(--ease-pop), filter .3s; transform-origin: 50% 70%; }
.stop:hover img.stop-photo { transform: scale(1.45) rotate(-6deg) translateY(-6%); filter: drop-shadow(0 22px 22px rgba(18, 56, 107, .28)); animation: tub-wiggle .9s .45s ease-in-out; }
@keyframes tub-wiggle {
  0%, 100% { rotate: 0deg; } 20% { rotate: 4deg; } 40% { rotate: -3deg; } 60% { rotate: 2deg; } 80% { rotate: -1deg; }
}
/* Timeline bottle: the cork floats above, then drops into the bottle on hover */
.stop svg.stop-svg { width: clamp(140px, 14vw, 180px); height: auto; aspect-ratio: 1; overflow: visible; transition: transform .5s var(--ease-pop); }
.stop.is-on svg.stop-svg { transform: scale(1.08) rotate(-4deg); }
.stop-cork .cork { transform-box: fill-box; transform-origin: 50% 100%; transform: translate(14px, -34px) rotate(24deg); transition: transform .7s cubic-bezier(.34, 1.7, .5, 1); }
.stop-cork:hover .cork { transform: translate(0, 0) rotate(0deg); }
@media (max-width: 760px) { .stop svg.stop-svg { width: 110px; grid-row: 1 / span 2; } }
@media (hover: none) { .stop-cork.is-on .cork { transform: none; } }
/* Timeline "at scale": tubs fill the board one by one on hover */
.stop-scale .cup { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: translateY(-18px) scale(.5); transition: opacity .3s, transform .45s var(--ease-pop); transition-delay: calc((5 - var(--n)) * .05s); }
.stop-scale:hover .cup { opacity: 1; transform: none; transition-delay: calc(var(--n) * .14s); }
@media (hover: none) { .stop-scale .cup { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stop-scale .cup { opacity: 1; transform: none; } }

.history-sticky { grid-template-columns: minmax(0, 1fr); }
.history-head-copy { display: grid; gap: 16px; }
.history-sticky > *, .history-window, .history-track { min-width: 0; max-width: 100%; }
/* Timeline cow: speech bubble on hover */
.cow-wrap { position: relative; display: inline-block; width: fit-content; }
.stop-cow .moo {
  position: absolute; right: -18%; top: -8%; z-index: 2;
  font-family: var(--f-title); font-size: 1.6rem; letter-spacing: .03em; line-height: 1; color: var(--blue);
  background: var(--paper); padding: .35em .55em .25em; border-radius: 18px; box-shadow: 0 8px 18px rgba(18, 56, 107, .18);
  opacity: 0; transform: translate(-10px, 10px) scale(.4) rotate(-8deg); transform-origin: 0% 100%;
  transition: opacity .2s, transform .45s var(--ease-pop); pointer-events: none;
}
.stop-cow .moo::after { content: ""; position: absolute; left: 14px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
.stop-cow:hover .moo { opacity: 1; transform: none; }
.stop-cow:hover .cow-wrap img { animation: cow-bob .5s ease-in-out 2; }
@keyframes cow-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 760px) { .cow-wrap { grid-row: 1 / span 2; } .cow-wrap img { width: 110px; } .stop-cow .moo { font-size: 1.2rem; right: -30%; } }
.stop-cow .moo { font-size: 2.1rem; right: -46%; top: -26%; }
.history-track { padding-top: 28px; }
.stop-cow .moo { right: auto; left: 92%; top: -6%; font-size: 1.9rem; white-space: nowrap; }
.stop-cow .moo::after { left: -8px; bottom: 10px; border: 9px solid transparent; border-right-color: var(--paper); border-left: 0; }
/* Timeline strainer: slow drips from the cloth into the bowl on hover */
.stop-strain .drip { opacity: 0; transform-box: fill-box; transform-origin: 50% 0%; }
.stop-strain:hover .drop-still { opacity: 0; transition: opacity .2s; }
.stop-strain:hover .drip { animation: drip 2.7s ease-in infinite; animation-delay: calc(var(--k) * .9s); }
@keyframes drip {
  0%   { opacity: 0; transform: translateY(-4px) scale(.3, .2); }
  18%  { opacity: 1; transform: translateY(0) scale(.85, .7); }
  38%  { opacity: 1; transform: translateY(1px) scale(1, 1.15); }
  82%  { opacity: 1; transform: translateY(30px) scale(.9, 1.1); }
  100% { opacity: 0; transform: translateY(35px) scale(.6, .3); }
}
@media (prefers-reduced-motion: reduce) { .stop-strain:hover .drop-still { opacity: 1; } .stop-strain .drip { animation: none !important; } }
/* Timeline "Every tub": cluster of Plain Labneh icons */
.icon-cluster { position: relative; display: block; width: clamp(140px, 14vw, 180px); aspect-ratio: 1; }
.icon-cluster img { position: absolute; width: 52% !important; height: auto; aspect-ratio: auto !important; transition: transform .5s var(--ease-pop); }
.icon-cluster img:nth-child(1) { left: 4%; top: 18%; rotate: -10deg; }
.icon-cluster img:nth-child(2) { right: 0; top: 0; width: 46% !important; rotate: 12deg; }
.icon-cluster img:nth-child(3) { right: 8%; bottom: 0; width: 44% !important; rotate: -4deg; }
.stop-cluster:hover .icon-cluster img:nth-child(1) { transform: translate(-6%, -6%) rotate(-8deg) scale(1.08); }
.stop-cluster:hover .icon-cluster img:nth-child(2) { transform: translate(6%, -8%) rotate(10deg) scale(1.12); }
.stop-cluster:hover .icon-cluster img:nth-child(3) { transform: translate(6%, 6%) rotate(-10deg) scale(1.1); }
@media (max-width: 760px) { .icon-cluster { width: 110px; grid-row: 1 / span 2; } }
.icon-cluster img:nth-child(1) { left: 0; top: 8%; width: 40% !important; }
.icon-cluster img:nth-child(2) { right: -4%; top: -6%; width: 38% !important; }
.icon-cluster img:nth-child(3) { right: -2%; bottom: -2%; width: 38% !important; }
/* "The catch": one tub (front, center) is always there; the rest join it on hover */
.stop-scale .cup[style*="--n:4"] { opacity: 1; transform: none; transition: none; }
/* Timeline "Every tub": knife spreads Plain Labneh across the plate on hover */
.stop-spread .dollop { transform-box: fill-box; transform-origin: 30% 100%; transition: transform .9s ease, opacity .6s .2s; }
.stop-spread .knife { transition: transform 1.3s cubic-bezier(.45, .05, .3, 1); }
.stop-spread:hover .dollop { transform: scale(.4, .25); opacity: 0; }
.stop-spread:hover .knife { transform: translate(70px, 8px); }
@media (hover: none) { .stop-spread .spread { transform: none; opacity: 1; } .stop-spread .dollop { opacity: 0; } .stop-spread .knife { transform: translate(70px, 8px); } }
/* How it started: three cards */
.polaroids { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
.polaroid:nth-child(2) { margin-top: 64px; } .polaroid:nth-child(3) { margin-top: 128px; }
@media (max-width: 860px) { .polaroids { grid-template-columns: 1fr 1fr; } .polaroid:nth-child(3) { margin-top: 0; } }

/* Spread stop: spoon swipes an S of labneh */
.stop-spread .spread path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.stop-spread:hover .spread path { opacity: 1; }
.stop-spread .spoon { transform: translate(40px, 114px); }
.stop-spread:hover .spread path { animation: spread-s 2.8s linear forwards; }
.stop-spread:hover .spoon { animation: spoon-s 2.8s linear forwards; }
.stop-spread:hover .dollop { transform: scale(.4, .25); opacity: 0; }
@keyframes spread-s { to { stroke-dashoffset: 0; } }
@keyframes spoon-s { 0% { transform: translate(58.0px, 116.0px); } 2.5% { transform: translate(68.1px, 115.5px); } 5% { transform: translate(78.2px, 115.4px); } 7.5% { transform: translate(88.2px, 115.6px); } 10% { transform: translate(98.3px, 115.9px); } 12.5% { transform: translate(109.0px, 116.3px); } 15% { transform: translate(119.0px, 116.6px); } 17.5% { transform: translate(129.1px, 116.6px); } 20% { transform: translate(139.2px, 116.2px); } 22.5% { transform: translate(148.7px, 118.3px); } 25% { transform: translate(147.8px, 125.8px); } 27.5% { transform: translate(137.4px, 125.5px); } 30% { transform: translate(127.6px, 125.4px); } 32.5% { transform: translate(117.2px, 125.5px); } 35% { transform: translate(107.4px, 125.7px); } 37.5% { transform: translate(96.9px, 126.1px); } 40% { transform: translate(87.1px, 126.4px); } 42.5% { transform: translate(76.7px, 126.6px); } 45% { transform: translate(66.9px, 126.6px); } 47.5% { transform: translate(56.5px, 126.2px); } 50% { transform: translate(47.6px, 129.3px); } 52.5% { transform: translate(53.0px, 136.0px); } 55% { transform: translate(63.2px, 135.5px); } 57.5% { transform: translate(73.0px, 135.4px); } 60% { transform: translate(83.4px, 135.5px); } 62.5% { transform: translate(93.9px, 135.8px); } 65% { transform: translate(103.7px, 136.1px); } 67.5% { transform: translate(114.1px, 136.5px); } 70% { transform: translate(123.9px, 136.6px); } 72.5% { transform: translate(134.3px, 136.5px); } 75% { transform: translate(144.2px, 136.1px); } 77.5% { transform: translate(149.6px, 141.2px); } 80% { transform: translate(141.1px, 146.0px); } 82.5% { transform: translate(130.9px, 145.5px); } 85% { transform: translate(120.8px, 145.4px); } 87.5% { transform: translate(110.7px, 145.6px); } 90% { transform: translate(100.5px, 146.0px); } 92.5% { transform: translate(90.4px, 146.4px); } 95% { transform: translate(80.3px, 146.6px); } 97.5% { transform: translate(70.1px, 146.5px); } 100% { transform: translate(60.0px, 146.0px); } }
@media (hover: none) { .stop-spread .spread path { stroke-dashoffset: 0; opacity: 1; } .stop-spread .dollop { opacity: 0; } .stop-spread .spoon { transform: translate(40px, 150px); } }
/* How it started: cards on the standard colored torn rectangles */
.polaroid { background: url("img/paper/Colored-Rectangles-05.png") center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; padding: 22px 22px 28px; filter: drop-shadow(0 12px 20px rgba(18, 56, 107, .18)); }
.polaroid:nth-child(2) { background-image: url("img/paper/Colored-Rectangles-03.png"); }
.polaroid:nth-child(3) { background-image: url("img/paper/Colored-Rectangles-07.png"); }
.polaroid p { color: var(--cream); }
/* Dip/Spread/Dollop: smaller blocks so more photo shows */
.verb { font-size: clamp(1.8rem, .8rem + 4.8vw, 5.2rem); }
/* Diagonal "In grocery stores nationwide" transition strip */
.nation-strip { position: relative; z-index: 3; margin-block: clamp(-34px, -2.6vw, -18px); overflow: hidden; padding-block: clamp(18px, 2.4vw, 30px); pointer-events: none; }
.ns-link { display: block; pointer-events: auto; background: var(--blue); rotate: -2.5deg; width: 110%; margin-left: -5%; box-shadow: 0 10px 22px rgba(18, 56, 107, .22); text-decoration: none; }
.ns-track { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); width: max-content; padding-block: clamp(10px, 1.2vw, 16px); animation: verb-loop 40s linear infinite; }
.ns-text { font-family: var(--f-title); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); white-space: nowrap; padding-top: .12em; }
.ns-icon { height: clamp(30px, 3.4vw, 48px); width: auto; flex-shrink: 0; }
.nation-strip:hover .ns-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ns-track { animation: none; } }
/* How it started: solid rounded rectangles in the brand pop colors */
.polaroid { background: #DE8929; border-radius: var(--radius); }
.polaroid:nth-child(2) { background: #CB333B; }
.polaroid:nth-child(3) { background: #94338F; }
.polaroid img { border-radius: 10px; }
/* How it started: Yaza icons filling the open space */
.started { overflow: hidden; }
.started .wrap { position: relative; z-index: 1; }
.started-ico { position: absolute; z-index: 0; width: clamp(56px, 6vw, 92px); height: auto; pointer-events: none; }
.si-1 { right: 7%; top: 9%; rotate: 14deg; width: clamp(70px, 7.5vw, 112px); }
.si-2 { right: 27%; top: 16%; rotate: -10deg; }
.si-3 { right: 45%; top: 7%; rotate: 20deg; width: clamp(48px, 5vw, 76px); }
.si-4 { left: 5%; bottom: 7%; rotate: -12deg; }
.si-5 { left: 19%; bottom: 3%; rotate: 8deg; width: clamp(48px, 5vw, 74px); }
.si-6 { left: 31%; bottom: 9%; rotate: -6deg; width: clamp(50px, 5.2vw, 80px); }
@media (max-width: 860px) { .si-2, .si-3, .si-6 { display: none; } .si-1 { top: 3%; right: 5%; } .si-4 { bottom: 2%; } .si-5 { left: auto; right: 8%; bottom: 2%; } }
@media (min-width: 861px) { .si-1 { width: clamp(90px, 9vw, 136px); } .si-2 { width: clamp(72px, 7vw, 108px); } .si-3 { width: clamp(64px, 6vw, 92px); } }
/* Homepage: Our Story teaser */
.origin-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.origin-photo { position: relative; margin: 0; max-width: 380px; width: 100%; justify-self: center; }
.origin-paper { position: absolute; left: 6%; right: 6%; top: 14%; width: 88%; height: 74%; rotate: -4deg; }
.origin-karim { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(18, 56, 107, .22)); }
.origin-copy { display: grid; gap: clamp(14px, 2vw, 22px); justify-items: start; min-width: 0; }
.origin-copy .title { margin: 0; }
.origin-quote { font-family: var(--f-head); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); line-height: 1.3; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.origin-sign { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--blue); }
@media (max-width: 760px) { .origin-teaser { grid-template-columns: 1fr; } .origin-photo { max-width: 260px; } }
/* Strip: clip sideways only so its shadow isn't cut off */
.nation-strip { overflow: visible; overflow-x: clip; }
/* Teaser: Karim's photo sits on the section's bottom edge */
.origin { padding-bottom: 0; }
.origin-photo { align-self: end; }
.origin-copy { padding-bottom: clamp(56px, 8vw, 112px); }
@media (max-width: 760px) { .origin-teaser { display: flex; flex-direction: column-reverse; align-items: stretch; } .origin-copy { padding-bottom: 0; } .origin-photo { align-self: center; } }
/* Retailer logos: faster loop */
.retailer-track { animation-duration: 30s; }
/* Made the right way: more playful icon buttons */
.proof { position: relative; overflow: visible; box-shadow: 0 6px 0 rgba(18, 56, 107, .08); transition: border-color .2s, transform .35s var(--ease-pop), background .25s, color .25s, box-shadow .25s; }
.proof:nth-child(1) { --pc: #1D57A5; } .proof:nth-child(2) { --pc: #DE8929; } .proof:nth-child(3) { --pc: #CB333B; } .proof:nth-child(4) { --pc: #94338F; }
.proof img { animation: proof-bob 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.proof:nth-child(2) img { --i: 1; } .proof:nth-child(3) img { --i: 2; } .proof:nth-child(4) img { --i: 3; }
@keyframes proof-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.proof:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 14px 0 rgba(18, 56, 107, .1); }
.proof:hover img { animation: proof-jiggle .5s ease-in-out infinite; }
@keyframes proof-jiggle { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.proof:active { transform: scale(.94); }
.proof[aria-selected="true"] { background: var(--pc); border-color: var(--pc); color: var(--cream); transform: translateY(-8px) rotate(1.5deg); box-shadow: 0 16px 28px rgba(18, 56, 107, .25); }
.proof[aria-selected="true"] img { animation: proof-boing .7s var(--ease-pop) both; transform: scale(1.18); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15)); }
@keyframes proof-boing { 0% { scale: .6; rotate: -30deg; } 60% { scale: 1.2; rotate: 12deg; } 100% { scale: 1; rotate: 0deg; } }
.proof-burst { position: absolute; left: 50%; top: 40%; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 2; }
.proof-detail { position: relative; padding: 18px 24px; border-radius: var(--radius); background: var(--paper); border-left: 8px solid var(--dc, var(--blue)); max-width: 40ch; transition: border-color .3s; }
.proof-detail.flash { animation: detail-pop .5s var(--ease-pop); }
@keyframes detail-pop { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .proof img, .proof:hover img, .proof[aria-selected="true"] img { animation: none; } }
/* Recipe pages */
.rp-hero { background: var(--blue); color: var(--cream); padding-block: clamp(28px, 5vw, 64px); }
.rp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.rp-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 36px rgba(0, 0, 0, .25); rotate: -1.5deg; }
.rp-copy { display: grid; gap: 16px; min-width: 0; justify-items: start; }
.rp-copy .crumb { color: var(--cream); }
.rp-copy .title { color: var(--cream); font-size: var(--step-3); text-wrap: balance; margin: 0; }
.rp-copy .lede { color: var(--cream); opacity: .92; max-width: 46ch; }
.rp-meta { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 4px 0 0; }
.rp-meta li { background: rgba(255, 243, 228, .14); border-radius: 999px; padding: 8px 14px; font-size: .95rem; }
.rp-meta b { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin-right: 4px; opacity: .85; }
.rp-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rp-side { display: grid; gap: 24px; position: sticky; top: calc(var(--header-h) + 16px); min-width: 0; }
.rp-ingredients { background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: 0 10px 24px rgba(18, 56, 107, .08); }
.rp-ingredients .title, .rp-steps .title { font-size: var(--step-2); margin: 0 0 14px; }
.rp-ingredients ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.rp-ingredients label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; line-height: 1.4; color: var(--ink); }
.rp-ingredients input { accent-color: var(--blue); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.rp-ingredients input:checked + span { text-decoration: line-through; opacity: .5; }
.rp-made { background: var(--peach); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; justify-items: start; }
.rp-made h2 { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--blue); margin: 0; }
.rp-dip { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blue); font-family: var(--f-title); font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase; }
.rp-dip img { width: 64px; height: 64px; object-fit: contain; background: var(--tint, var(--cream)); border-radius: 12px; padding: 4px; transition: transform .35s var(--ease-pop); }
.rp-dip:hover img { transform: rotate(-8deg) scale(1.08); }
.rp-steps { min-width: 0; }
.step-group { margin-bottom: clamp(18px, 3vw, 28px); }
.step-group h3 { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--blue); margin: 0 0 10px; }
.step-group ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.step-group li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--cream); display: grid; place-items: center; font-family: var(--f-title); font-size: 1.3rem; padding-top: 3px; }
.step-group:nth-child(4n+2) .step-n { background: #DE8929; } .step-group:nth-child(4n+3) .step-n { background: #CB333B; } .step-group:nth-child(4n+4) .step-n { background: #94338F; }
.step-group p { margin: 0; padding-top: 8px; font-size: var(--step-0); line-height: 1.55; color: var(--ink); }
@media (max-width: 860px) { .rp-grid, .rp-cols { grid-template-columns: 1fr; } .rp-side { position: static; } }
.proof:nth-child(3) { --pc: #69903D; }
@media (max-width: 760px) { .verb { font-size: clamp(2.3rem, 1.2rem + 4.8vw, 3rem); } }
/* How it started on phones: one card per row, staggered left/right */
@media (max-width: 640px) {
  .polaroids { grid-template-columns: 1fr; gap: 22px; }
  .polaroid:nth-child(n) { margin-top: 0; width: 88%; }
  .polaroid:nth-child(odd) { justify-self: start; }
  .polaroid:nth-child(even) { justify-self: end; }
  .polaroid p { font-size: 1.1rem; }
}
/* Spread stop v3: thick labneh ridges, oil pooling in the grooves, za'atar on top */
.stop-spread .ridge path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.stop-spread:hover .ridge path { opacity: 1; animation: ridge-draw var(--t) linear var(--d) both; }
.stop-spread .ridge { --d: 0s; --t: 1s; }
@keyframes ridge-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 1% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.stop-spread .finish { opacity: 0; transition: opacity .2s; }
.stop-spread:hover .finish { opacity: 1; transition: opacity .7s 2.8s; }
.stop-spread .spoon { transform: translate(58px, 116px); }
.stop-spread .dollop { transform-box: fill-box; transform-origin: 50% 100%; }
@media (hover: none) { .stop-spread .ridge path { stroke-dashoffset: 0; opacity: 1; animation: none; } .stop-spread .finish { opacity: 1; } .stop-spread .spoon { transform: translate(60px, 146px); } }
.stop-spread .finish path, .stop-spread:hover .finish path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .9; animation: none; }
/* Page hero icon: keep clear of the headline and intro text */
.page-hero .wrap > * { max-width: min(100%, calc(100% - clamp(100px, 16vw, 230px))); }
.page-hero-ico { top: clamp(24px, 4vw, 56px); }
@media (max-width: 700px) {
  .page-hero-ico { opacity: 1; width: 64px; top: 18px; right: 16px; }
  .page-hero .wrap > * { max-width: calc(100% - 88px); }
  .page-hero .wrap > .chips { max-width: 100%; }
}
/* Product cards: descriptor reads bigger than the flavor callout */
.pcard .pcard-desc { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); letter-spacing: .06em; }
.pcard .pcard-hook { font-size: .8rem; letter-spacing: .07em; }
/* Product pages: icons sit behind the tub */
.pp-stage .pp-cup { z-index: 2; }
.pp-stage .pp-ico { z-index: 0; }
.pp-stage .pp-ico:nth-of-type(2) { left: -4%; top: 6%; }
.pp-stage .pp-ico:nth-of-type(3) { right: -4%; top: 8%; }
.pp-stage .pp-ico:nth-of-type(4) { right: 2%; bottom: 8%; }
/* Let aspect-ratio win over the width/height attributes on recipe photos */
.recipe img, .rp-photo img { height: auto; }
/* Homepage story teaser: full-color treatment */
.origin { background: #DE8929; overflow: hidden; }
.origin .title { color: var(--cream); }
.origin-quote { color: var(--cream); }
.origin-quote mark { background: var(--cream); color: #DE8929; padding: 0 .25em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.origin-sign { color: var(--blue); }
.origin-copy { position: relative; }
.origin-paper { z-index: 0; }
.origin-paper-back { rotate: 5deg; left: 10%; right: 2%; top: 10%; width: 88%; }
.origin-karim { z-index: 1; }
.origin-ico { position: absolute; z-index: 2; width: clamp(48px, 6vw, 84px); pointer-events: none; }
.oi-1 { left: -4%; top: 22%; rotate: -14deg; }
.oi-2 { right: -2%; top: 8%; rotate: 12deg; }
.oi-3 { right: 2%; bottom: 26%; rotate: 18deg; width: clamp(40px, 5vw, 70px); }
.oi-4 { right: 0; top: -10px; rotate: 10deg; width: clamp(56px, 7vw, 96px); }
@media (max-width: 760px) { .oi-4 { top: -6px; right: 4px; width: 56px; } .origin-copy .title { padding-right: 64px; } }
/* Meet the dips: the first tile (Plain Labneh) starts at the left edge of the screen on every device */
.tile-rail { padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-inline: var(--gutter); }
/* Quiz: lemon sits above the "Which dip are you?" title */
.quiz-ico, .quiz-intro .quiz-ico { position: static; width: clamp(64px, 7vw, 96px); margin: 0 0 -4px; rotate: -10deg; justify-self: start; }
@media (max-width: 860px) { .quiz-intro { padding-right: 0; } }
/* Teaser: less empty space above Karim (bigger photo, tighter top padding) */
.origin { padding-top: clamp(40px, 5vw, 72px); }
.origin-photo { max-width: 440px; }
.origin-copy { padding-bottom: clamp(40px, 5vw, 72px); }
@media (max-width: 760px) { .origin-photo { max-width: 280px; } .origin-copy { padding-bottom: 0; } }
/* Our Story intro: less empty space above Karim, more breathing room in the copy */
.intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.intro-copy { gap: 0; align-self: center; padding-block: clamp(8px, 2vw, 24px) clamp(40px, 6vw, 88px); }
.story-intro .title-xl { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem); line-height: .98; text-wrap: balance; }
.intro-copy .eyebrow { margin: 0 0 14px; }
.intro-copy .title { margin: 0 0 clamp(22px, 3vw, 34px); }
.intro-text { margin: 0 0 clamp(26px, 3.5vw, 40px); line-height: 1.5; }
.intro-kicker { margin: 0 0 clamp(16px, 2vw, 22px); }
.intro-sign { gap: 4px; margin: 0; }
.intro-karim { max-width: 500px; }
@media (max-width: 760px) { .intro-copy { padding-block: 0 8px; } .intro-karim { max-width: 320px; } }
@media (max-width: 760px) { .intro-grid { grid-template-columns: 1fr; } }
.intro-text { font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem); max-width: 40ch; }
.intro-karim { max-width: 580px; }
@media (max-width: 760px) { .intro-karim { max-width: 320px; } }
.story-intro { padding-top: clamp(32px, 4vw, 56px); }
.intro-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.intro-karim { max-width: 600px; }
@media (max-width: 760px) { .intro-grid { grid-template-columns: 1fr; } .intro-karim { max-width: 320px; } }
.intro-text { margin-bottom: clamp(22px, 3vw, 32px); }
/* Our Story intro: layered color papers, icons and a highlight */
.intro-paper-back { rotate: 6deg; left: 10%; right: 0; top: 10%; width: 86%; height: 72%; }
.intro-ico { position: absolute; z-index: 2; width: clamp(52px, 6.5vw, 96px); pointer-events: none; }
.ii-1 { left: 0; top: 18%; rotate: -12deg; }
.ii-2 { right: 0; top: 6%; rotate: 14deg; width: clamp(44px, 5vw, 76px); }
.ii-3 { right: -2%; bottom: 30%; rotate: 20deg; }
.story-intro .title mark { background: #DE8929; color: var(--cream); padding: 0 .12em; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.intro-sign b { color: var(--peach); }

/* ===== For buyers & brokers ===== */
.footer-buyers { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-title); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--peach); text-decoration: none; border: 2px solid currentColor; border-radius: 999px; padding: 6px 16px; }
.footer-buyers::after { content: "→"; }
.footer-buyers:hover { background: var(--peach); color: var(--blue); }

.buyer-hero { background: var(--blue); color: var(--cream); padding-block: clamp(40px, 6vw, 88px); overflow: hidden; }
.buyer-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.buyer-hero-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.buyer-hero .eyebrow { color: var(--peach); margin: 0; }
.buyer-hero .title { color: var(--cream); margin: 0; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1; text-wrap: balance; }
.buyer-hero .title mark { background: #DE8929; color: var(--cream); padding: 0 .12em; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.buyer-hero .lede { color: var(--cream); opacity: .92; max-width: 46ch; margin: 0; }
.buyer-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost-light:hover { background: var(--cream); color: var(--blue); }
.buyer-file-note { font-size: .9rem; opacity: .75; margin: 0; }
.buyer-hero-tubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 0; }
.bh-tub { width: 100%; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .25)); transition: transform .4s var(--ease-pop); }
.bh-tub:nth-child(odd) { rotate: -5deg; } .bh-tub:nth-child(even) { rotate: 4deg; translate: 0 14px; }
.bh-tub:hover { transform: scale(1.08) rotate(-4deg); }

.buyer-facts { background: #DE8929; color: var(--cream); }
.fact-strip { list-style: none; margin: 0; padding-block: 22px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.fact-strip li { display: grid; gap: 2px; }
.fact-strip b { font-family: var(--f-title); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1; letter-spacing: .02em; }
.fact-strip span { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; line-height: 1.3; }

.sheet-view { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.spec-pick { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 12px; cursor: pointer; background: var(--paper); border: 2px solid transparent; border-radius: var(--radius); font-family: var(--f-body); font-weight: 600; font-size: .85rem; line-height: 1.2; color: var(--blue); text-align: center; transition: transform .3s var(--ease-pop), border-color .2s, background .2s; }
.spec-pick img { width: 80%; max-width: 110px; transition: transform .4s var(--ease-pop); }
.spec-pick:hover { transform: translateY(-4px); }
.spec-pick:hover img { transform: rotate(-6deg) scale(1.06); }
.spec-pick[aria-selected="true"] { background: var(--tint); border-color: var(--tone); color: var(--tone); }
.spec-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 48px); align-items: start; background: var(--paper); border-radius: var(--radius); padding: clamp(18px, 3vw, 36px); box-shadow: 0 12px 30px rgba(18, 56, 107, .08); border-top: 8px solid var(--tone); }
.spec-card.flash { animation: detail-pop .45s var(--ease-pop); }
.spec-stage { background: var(--tint); border-radius: var(--radius); display: grid; place-items: center; aspect-ratio: 1; }
.spec-stage img { width: 86%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .18)); }
.spec-body { display: grid; gap: 14px; min-width: 0; }
.spec-body .eyebrow { color: var(--tone); font-family: var(--f-body); font-weight: 600; font-size: .85rem; letter-spacing: .08em; margin: 0; }
.spec-body h3 { font-family: var(--f-head); font-weight: 400; font-size: var(--step-3); line-height: 1.05; color: var(--blue); margin: 0; }
.spec-protein { justify-self: start; margin: 0; background: var(--tone); color: var(--cream); font-family: var(--f-title); letter-spacing: .05em; text-transform: uppercase; font-size: 1.05rem; padding: 6px 14px 4px; border-radius: 999px; }
.upc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.upc-label { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--blue); }
.upc-row code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.25rem; letter-spacing: .08em; color: var(--ink); background: var(--cream); border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.upc-copy { cursor: pointer; border: 2px solid var(--blue); background: transparent; color: var(--blue); border-radius: 999px; padding: 4px 14px; font-weight: 600; font-size: .85rem; }
.upc-copy:hover { background: var(--blue); color: var(--cream); }
.spec-list { width: 100%; border-collapse: collapse; }
.spec-list th, .spec-list td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-list th { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--blue); width: 40%; }
.spec-list td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-attrs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spec-attrs li { background: var(--tint); color: var(--tone); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: .85rem; }
.spec-ing { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.spec-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.spec-table-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(18, 56, 107, .08); }
.spec-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .95rem; }
.spec-table th, .spec-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.spec-table thead th { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--cream); background: var(--blue); }
.spec-table tbody th { font-family: var(--f-head); font-weight: 400; font-size: 1.1rem; color: var(--tone); white-space: nowrap; border-left: 6px solid var(--tone); }
.spec-table tbody tr:nth-child(even) { background: rgba(29, 87, 165, .04); }

.buyer-why { background: var(--cream); }
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.why-grid li { display: grid; gap: 10px; align-content: start; background: var(--paper); border-radius: var(--radius); padding: 22px; border-bottom: 6px solid var(--c); }
.why-grid img { width: 64px; height: 64px; object-fit: contain; }
.why-grid b { font-family: var(--f-title); font-weight: 400; font-size: 1.45rem; letter-spacing: .03em; text-transform: uppercase; color: var(--c); line-height: 1.05; }
.why-grid span { color: var(--ink); line-height: 1.5; }

.dl-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.dl-card { display: grid; gap: 8px; height: 100%; text-decoration: none; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform .3s var(--ease-pop), border-color .2s, box-shadow .2s; }
.dl-card:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--blue); box-shadow: 0 14px 28px rgba(18, 56, 107, .12); }
.dl-type { justify-self: start; background: var(--blue); color: var(--cream); font-family: var(--f-title); letter-spacing: .08em; font-size: 1rem; padding: 4px 12px 2px; border-radius: 8px; }
.dl-grid li:nth-child(2) .dl-type { background: #DE8929; } .dl-grid li:nth-child(3) .dl-type { background: #94338F; }
.dl-card b { font-family: var(--f-head); font-weight: 400; font-size: var(--step-2); color: var(--blue); line-height: 1.1; }
.dl-size { font-weight: 600; color: var(--blue); }
.dl-size::before { content: "↓ "; }
.buyer-retail .retailer-band { margin-top: 12px; }

.buyer-contact { background: #94338F; color: var(--cream); padding-block: clamp(48px, 7vw, 96px); text-align: center; }
.buyer-contact-inner { display: grid; justify-items: center; gap: 16px; }
.buyer-contact .title { color: var(--cream); margin: 0; }
.buyer-contact .lede { color: var(--cream); max-width: 44ch; margin: 0; }
.email-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.email-big { font-family: var(--f-head); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); color: var(--cream); text-underline-offset: 8px; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .buyer-hero-grid, .spec-card { grid-template-columns: 1fr; }
  .buyer-hero-tubs { max-width: 360px; }
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-stage { max-width: 260px; }
  .dl-grid, .why-grid { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .site-footer, .buyer-hero-tubs, .buyer-ctas, .sheet-view, .spec-picker, .buyer-downloads, .buyer-retail, .email-row button { display: none !important; }
  .sheet-panel[hidden] { display: block !important; }
  .sheet-panel[data-panel="cards"] { display: none !important; }
  .buyer-hero, .buyer-facts, .buyer-contact { background: none !important; color: #12386B !important; }
}
.spec-card[hidden], .sheet-panel[hidden] { display: none; }
/* Quiz lemon: as wide as "Which dip" (≈4em of the section title size) */
.quiz-ico, .quiz-intro .quiz-ico { width: calc(3.95 * clamp(2.5rem, 1.5rem + 3.8vw, 4.8rem)); max-width: 100%; margin-bottom: 6px; }

/* Jagged torn edges wherever a color block meets the beige page */
:root { --edge-top: polygon(0% 9px, 14% 4px, 31% 12px, 49% 3px, 66% 10px, 83% 1px, 100% 8px, 100% 100%, 0% 100%); --edge-bottom: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), 86% calc(100% - 4px), 70% calc(100% - 13px), 52% calc(100% - 9px), 35% calc(100% - 2px), 17% calc(100% - 12px), 0% calc(100% - 5px)); --edge-both: polygon(0% 9px, 14% 4px, 31% 12px, 49% 3px, 66% 10px, 83% 1px, 100% 8px, 100% calc(100% - 10px), 86% calc(100% - 4px), 70% calc(100% - 13px), 52% calc(100% - 9px), 35% calc(100% - 2px), 17% calc(100% - 12px), 0% calc(100% - 5px)); }
.verbs, .origin, .history, .rp-hero, .pp-hero { clip-path: var(--edge-both); }
.story-intro, .buyer-facts { clip-path: var(--edge-bottom); }
.find, .buyer-contact, .buyer-hero { clip-path: var(--edge-top); }
.site-footer { clip-path: var(--edge-top); }
body.page-index .site-footer, body.page-where-to-buy .site-footer, body.page-buyers .site-footer { clip-path: none; }
/* Our Story intro: garlic + cucumber tucked between the red (back) and orange (front) papers */
.intro-paper-back { z-index: 0; }
.intro-ico { z-index: 1; }
.intro-paper:not(.intro-paper-back) { z-index: 2; }
.intro-karim { z-index: 3; }
.ii-1 { width: clamp(90px, 11vw, 160px); left: -6%; top: 6%; rotate: -16deg; }
.ii-2 { width: clamp(80px, 9.5vw, 140px); right: -6%; top: 2%; rotate: 14deg; }
@media (min-width: 761px) { .ii-2 { right: -12%; top: 8%; width: clamp(100px, 10.5vw, 150px); } .ii-1 { left: -10%; } }
@media (min-width: 761px) { .ii-2 { width: clamp(130px, 13vw, 190px); right: -14%; top: 4%; } }
@media (min-width: 761px) { .ii-2 { right: 6%; top: 0; width: clamp(110px, 11vw, 160px); } }
.quiz-ico, .quiz-intro .quiz-ico { width: calc(3 * clamp(2.5rem, 1.5rem + 3.8vw, 4.8rem)); }
/* Quiz lemon: as tall as the title + subline beneath it (height set in main.js) */
.quiz-ico, .quiz-intro .quiz-ico { width: auto; height: var(--lemon-h, 180px); max-width: 100%; }
/* Buyers: "Your plan" steps */
.buyer-plan .wrap { display: grid; gap: 18px; justify-items: start; }
.buyer-plan .title, .buyer-plan .sub { margin: 0; }
.plan-steps { list-style: none; padding: 0; margin: 8px 0 6px; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); counter-reset: none; }
.plan-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px; background: var(--blue); color: var(--cream); border-radius: var(--radius); }
.plan-steps li:nth-child(2) { background: #DE8929; } .plan-steps li:nth-child(3) { background: #69903D; } .plan-steps li:nth-child(4) { background: #94338F; }
.plan-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; translate: 0 -50%; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--blue); font-weight: 700; }
.plan-n { font-family: var(--f-title); font-size: 2.4rem; line-height: 1; opacity: .9; }
.plan-steps b { font-family: var(--f-title); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.plan-steps span:not(.plan-n) { line-height: 1.45; }
@media (max-width: 960px) { .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-steps li::after { display: none; } }
@media (max-width: 560px) { .plan-steps { grid-template-columns: 1fr; } }
.fact-strip li { justify-items: center; text-align: center; }
/* Our Story team: colorful band */
.team { background: #94338F; clip-path: var(--edge-bottom); }
.history { clip-path: var(--edge-top); }
.team .title { color: var(--cream); }
.team-grid li { background: var(--cream); border-left: 6px solid var(--c, #DE8929); transition: transform .3s var(--ease-pop); }
.team-grid li:hover { transform: translateY(-4px) rotate(-1deg); }
.team-grid li:nth-child(6n+1) { --c: #DE8929; } .team-grid li:nth-child(6n+2) { --c: #1D57A5; } .team-grid li:nth-child(6n+3) { --c: #00733A; }
.team-grid li:nth-child(6n+4) { --c: #CB333B; } .team-grid li:nth-child(6n+5) { --c: #5F8DDA; } .team-grid li:nth-child(6n+6) { --c: #69903D; }
.ns-link { background: #00733A; }
.retailer-track { animation-duration: 48s; }
/* Hero v3 (Oct 12 review): softer, smaller headline lockup; lighter sentence-case support; slimmer pairing pills */
.hero .display { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.8rem); line-height: .95; letter-spacing: -.005em; text-shadow: 0 2px 18px rgba(18, 56, 107, .18); max-width: 11ch; }
.hero .hero-sub { font-family: var(--f-body); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.45; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); max-width: 34ch; opacity: .95; margin-top: clamp(4px, 1vw, 10px); }
.hero-inner { gap: 0; }
.hero .slot-line { margin-top: clamp(22px, 3.2vw, 40px); font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); line-height: 1.15; column-gap: .3em; row-gap: .18em; }
.hero-actions { margin-top: clamp(22px, 3vw, 36px); }
.slot-group { display: inline-flex; align-items: center; gap: .26em; white-space: nowrap; }
.reel { padding-inline: .14em; height: 1.22em; border-radius: .16em; }
.reel-strip > span { height: 1.22em; line-height: 1.22em; }
/* Sensory taste lines under dip names (tiles + product cards): sentence case, appetizing */
.tile .tile-taste, .pcard .pcard-taste { font-family: var(--f-head); font-weight: 400; text-transform: none; letter-spacing: 0; font-style: italic; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.3; color: var(--tone); }
/* Made the right way v3: default selection, clearer icons, "who it's for" line */
.made-intro { margin: 10px 0 clamp(20px, 3vw, 32px); }
.proof-svg { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); animation: proof-bob 2.8s ease-in-out infinite; transition: transform .45s var(--ease-pop); }
.proof:nth-child(3) .proof-svg { animation-delay: -1.4s; } .proof:nth-child(4) .proof-svg { animation-delay: -2.1s; }
.proof:hover .proof-svg { animation: proof-jiggle .5s ease-in-out infinite; }
.proof[aria-selected="true"] .proof-svg { animation: proof-boing .7s var(--ease-pop) both; }
.proof-label { display: block; }
.proof-for { display: block; font-family: var(--f-body); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-top: -4px; }
.proof[aria-selected="true"] .proof-for { opacity: .95; }
.proof[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -12px; translate: -50% 0; border: 10px solid transparent; border-top-color: var(--pc); border-bottom: 0; }
.proof[aria-selected="true"] img, .proof[aria-selected="true"] .proof-svg { background: var(--cream); border-radius: 50%; padding: 8px; box-sizing: border-box; }
/* Highlight boxes on TAY Benditos caps: the font has no room above caps and descender room below, so pad the top to center the word */
.story-intro .title mark, .buyer-hero .title mark { padding: .22em .14em .04em; }

/* ===== Creator program page ===== */
.footer-trade { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-trade .footer-buyers { grid-column: auto; }
.creator-hero { background: #94338F; color: var(--cream); padding-block: clamp(40px, 6vw, 88px); overflow: hidden; clip-path: var(--edge-bottom); }
.creator-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.creator-hero-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.creator-hero .eyebrow { color: var(--peach); margin: 0; }
.creator-hero .title { color: var(--cream); margin: 0; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1; text-wrap: balance; }
.creator-hero .title mark { background: #DE8929; color: var(--cream); padding: .22em .14em .04em; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.creator-hero .lede { color: var(--cream); max-width: 40ch; margin: 0; }
.creator-textlink { color: var(--cream); font-weight: 600; text-underline-offset: 5px; }
.creator-textlink::after { content: " →"; }
.creator-hero-photo { position: relative; margin: 0; justify-self: center; width: min(400px, 100%); }
.creator-paper { position: absolute; inset: 6% -8% -6% 8%; width: 100%; height: 100%; rotate: 5deg; }
.creator-shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; rotate: -3deg; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); border: 6px solid var(--cream); }
.creator-tag { position: absolute; left: -14px; bottom: 28px; background: var(--cream); color: #94338F; font-family: var(--f-title); font-size: 1.4rem; letter-spacing: .04em; padding: 6px 14px 3px; border-radius: 999px; rotate: -6deg; box-shadow: 0 8px 16px rgba(0, 0, 0, .2); }
.creator-steps .title, .creator-perks .title { margin-bottom: clamp(18px, 3vw, 28px); }
.perk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perk-fine { margin-top: 14px; font-size: .9rem; color: var(--blue); opacity: .75; }
.receipt-band { background: #DE8929; color: var(--cream); padding-block: clamp(28px, 4vw, 44px); clip-path: var(--edge-both); }
.receipt-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.receipt-inner img { width: 72px; height: 72px; object-fit: contain; rotate: -12deg; }
.receipt-inner p { flex: 1 1 320px; margin: 0; font-family: var(--f-head); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.2; }
.receipt-inner b { font-family: var(--f-title); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; display: block; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.who-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.who-list li { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 14px; padding: 14px 18px; font-family: var(--f-head); font-size: 1.25rem; color: var(--blue); }
.who-list li::before { content: "✓"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #00733A; color: var(--cream); font-weight: 700; font-family: var(--f-body); }
.creator-form .sub { margin: 8px 0 20px; }
.tally-slot iframe { width: 100%; border: 0; min-height: 560px; display: block; }
.tally-placeholder { display: grid; gap: 6px; place-items: center; text-align: center; min-height: 220px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--blue); padding: 24px; }
.creator-submit { background: var(--blue); color: var(--cream); clip-path: var(--edge-both); }
.submit-inner { display: grid; justify-items: center; text-align: center; gap: 14px; }
.creator-submit .title, .creator-submit .lede { color: var(--cream); margin: 0; }
.faq-wrap { max-width: 820px; }
.faq-wrap .title { margin-bottom: 20px; }
.creator-faq details { border-bottom: 2px solid var(--line); }
.creator-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--f-head); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: var(--blue); }
.creator-faq summary::-webkit-details-marker { display: none; }
.creator-faq summary::after { content: "+"; font-family: var(--f-body); font-size: 1.6rem; color: #DE8929; transition: rotate .3s var(--ease-pop); }
.creator-faq details[open] summary::after { rotate: 45deg; }
.creator-faq details p { margin: 0 0 18px; color: var(--ink); line-height: 1.55; max-width: 62ch; }
.faq-contact { margin-top: 24px; color: var(--blue); }
@media (max-width: 860px) { .creator-hero-grid, .who-grid { grid-template-columns: 1fr; } .perk-grid { grid-template-columns: 1fr; } .creator-hero-photo { width: min(300px, 80%); } }
/* Creator hero: tzatziki green + light blue (instead of purple + orange) */
.creator-hero { background: #00733A; }
.creator-hero .title mark { background: #5F8DDA; }
.creator-tag { color: #00733A; }
/* Creator brief form: orange outlined panel */
.tally-slot { border: 3px solid #DE8929; border-radius: var(--radius); padding: clamp(14px, 3vw, 32px); background: var(--paper); }
.tally-slot .tally-placeholder { border: 0; }
/* Hero pairing: the dip name is set in TAY Benditos (product-name font) */
.reel-dip .reel-strip > span { font-family: var(--f-title); font-style: normal; text-transform: uppercase; letter-spacing: .03em; font-size: 1.04em; padding-top: .12em; box-sizing: border-box; }

/* ===== Loyalty punchcard pop-up ===== */
.loyalty-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(18, 56, 107, .45); opacity: 0; transition: opacity .3s ease; }
.loyalty-backdrop.is-open { opacity: 1; }
.loyalty-card { position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--cream); color: var(--ink); border-radius: 22px; padding: clamp(24px, 5vw, 36px); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); border-top: 10px solid #DE8929; translate: 0 24px; scale: .96; transition: translate .45s var(--ease-pop), scale .45s var(--ease-pop); text-align: center; }
.loyalty-backdrop.is-open .loyalty-card { translate: 0 0; scale: 1; }
.loyalty-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--blue); cursor: pointer; border-radius: 50%; }
.loyalty-close:hover { background: rgba(29, 87, 165, .08); }
.loyalty-eyebrow { margin: 0 0 6px; font-family: var(--f-body); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #DE8929; }
.loyalty-title { margin: 0 0 18px; font-family: var(--f-title); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); }
.punch-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 18px; padding: 14px; background: var(--paper); border: 2px dashed rgba(29, 87, 165, .35); border-radius: 16px; }
.punch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--blue); background: transparent; }
.punch.is-on { background: var(--blue) url("img/icons/14.png") center / 70% no-repeat; border-color: var(--blue); animation: punch-in .5s var(--ease-pop) both; }
.punch.is-on:nth-child(2) { animation-delay: .15s; }
.punch-free { width: auto; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; border-color: #DE8929; color: #DE8929; font-family: var(--f-title); font-size: 1rem; letter-spacing: .06em; }
@keyframes punch-in { 0% { scale: .3; } 70% { scale: 1.15; } 100% { scale: 1; } }
.loyalty-copy { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.5; }
.loyalty-fine { margin: 0 0 20px; font-size: .9rem; color: var(--blue); opacity: .8; }
.loyalty-actions { display: grid; justify-items: center; gap: 10px; }
.loyalty-later { border: 0; background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .loyalty-backdrop, .loyalty-card { transition: none; } .punch.is-on { animation: none; } }
.loyalty-card .loyalty-go { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.loyalty-card .loyalty-go:hover { background: #12386B; }
.punch.is-on { background: #F3CFB3 url("img/icons/14.png") center / 62% no-repeat; border-color: #DE8929; }
/* Footer newsletter */
.footer-news { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid rgba(255, 243, 228, .25); max-width: 520px; }
.footer-news-title { margin: 0; font-family: var(--f-title); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
.footer-news-sub { margin: 0 0 4px; font-size: .95rem; color: var(--peach); }
.footer-news-slot iframe { width: 100%; border: 0; display: block; min-height: 110px; }
/* Retailer logos link to Where to Buy */
.retailer-track a { display: block; transition: transform .3s var(--ease-pop), opacity .2s; }
.retailer-track a:hover { transform: scale(1.08); }
.retailer-band:hover .retailer-track { animation-play-state: paused; }
/* Punchcard v2: 4 punches + FREE, lemon stamps */
.punch { width: 44px; height: 44px; position: relative; }
.punch.is-on { background: #FFF3E4 url("img/icons/4.png") center / 70% no-repeat; border-color: #DE8929; animation: none; }
.punch.stamp { animation: punch-stamp .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.punch.stamp::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #DE8929; animation: punch-ring .7s ease-out .15s both; pointer-events: none; }
@keyframes punch-stamp { 0% { scale: 2.2; rotate: -25deg; opacity: 0; } 55% { scale: .85; rotate: 6deg; opacity: 1; } 100% { scale: 1; rotate: 0deg; } }
@keyframes punch-ring { 0% { scale: .6; opacity: .9; } 100% { scale: 1.8; opacity: 0; } }
.punch-free { height: 44px; padding: 0 14px; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .punch.stamp, .punch.stamp::after { animation: none; } }
/* Product cards: give the tub image breathing room inside its own box so the drop shadow never gets clipped
   (some browsers clip a filter shadow to the image's box while it's transformed on hover) */
.pcard-cup { width: 86%; box-sizing: border-box; padding: 4% 6% 12%; margin-bottom: -6%; }
/* Instagram feed section (embed-ready) */
.insta { background: #CFE8B8; clip-path: none; }
.insta-inner { display: grid; gap: clamp(20px, 3vw, 32px); }
.insta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px; }
.insta .title { margin: 0; color: #00733A; }
.insta .sub { margin: 8px 0 0; color: #1D57A5; }
.insta .sub a { color: #00733A; }
.insta .btn { background: #00733A; border-color: #00733A; color: var(--cream); }
.ig-embed { display: none; }
.ig-embed.has-feed { display: block; }
.ig-embed.has-feed + .ig-fallback { display: none; }
.ig-fallback { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.ig-tile { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #E6EDD8; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-pop); }
.ig-tile:hover img { transform: scale(1.06) rotate(-1.5deg); }
@media (max-width: 860px) { .ig-fallback { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* blue footer sits straight under the green band on the homepage */
/* Instagram band v2: za'atar labneh green, no photo grid */
.insta { background: #55762A; clip-path: var(--edge-top); }
.insta .title { color: var(--cream); }
.insta .sub { color: var(--cream); }
.insta .sub a { color: var(--peach); }
.insta .btn { background: var(--cream); border-color: var(--cream); color: #55762A; }
.insta { clip-path: none; }
.insta-head { align-items: center; }
/* Instagram band: playful heading with highlight + popping icons */
.insta-head > div { position: relative; }
.insta .title mark { background: var(--cream); color: #55762A; padding: .22em .14em .04em; border-radius: 10px; display: inline-block; rotate: -2deg; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.insta-ico { position: absolute; width: clamp(48px, 5vw, 72px); pointer-events: none; }
.ii-a { right: -70px; top: -26px; rotate: 14deg; }
.ii-b { right: -120px; top: 18px; rotate: -10deg; width: clamp(40px, 4vw, 58px); }
@media (max-width: 760px) { .ii-a { right: 0; top: -40px; } .ii-b { display: none; } }
@media (max-width: 760px) { .insta-head > div { padding-top: 30px; } .ii-a { right: 4px; top: -18px; width: 42px; } }
/* FREE spot: a pill wide enough for the word (overrides the fixed punch width) */
.punch.punch-free { width: auto; min-width: 72px; padding: 0 14px; border-radius: 999px; display: grid; place-items: center; line-height: 1; padding-top: 3px; box-sizing: border-box; }
/* Privacy policy + footer legal link */
.fine-link { color: inherit; font-size: .85em; text-underline-offset: 3px; }
.legal-wrap { max-width: 760px; }
.legal .title { margin: 6px 0 10px; }
.legal-lede { font-family: var(--f-head); font-size: var(--step-1); color: var(--blue); }
.legal h2 { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--blue); margin: 32px 0 8px; }
.legal p { line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
/* Meet the dips: flat torn-paper squares (the soft shadow traced the ragged edges and looked uneven) */
.tile-front img { filter: none; }
.tile-front { box-shadow: none !important; }
/* No torn edge directly under the header: first section on a page keeps a straight top */
main > .find:first-child, main > .buyer-hero:first-child { clip-path: none; }
main > .rp-hero:first-child, main > .pp-hero:first-child { clip-path: var(--edge-bottom); }

/* ===== Footer v2: more color and hierarchy ===== */
.footer-v2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "hero hero" "news cols" "bottom bottom"; gap: clamp(24px, 4vw, 44px) clamp(24px, 5vw, 64px); }
.footer-hero { grid-area: hero; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 2px dashed rgba(255, 243, 228, .3); }
.footer-tag { margin: 0; font-family: var(--f-title); font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.footer-tag mark { background: #DE8929; color: var(--cream); padding: .2em .14em .04em; border-radius: 10px; display: inline-block; rotate: -2deg; }
.footer-ico { position: absolute; width: clamp(44px, 5vw, 76px); pointer-events: none; }
.fi-1 { right: 2%; top: -8px; rotate: 12deg; }
.fi-2 { right: 11%; top: 34px; rotate: -10deg; }
.fi-3 { right: 20%; top: -4px; rotate: 18deg; width: clamp(38px, 4vw, 60px); }
.site-footer .footer-news { grid-area: news; grid-column: auto; max-width: none; border-top: 0; padding: clamp(18px, 3vw, 28px); background: #DE8929; border-radius: var(--radius); rotate: -.6deg; box-shadow: 0 14px 26px rgba(0, 0, 0, .18); }
.site-footer .footer-news-sub { color: var(--cream); opacity: .92; }
.footer-cols { grid-area: cols; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; }
.footer-h { margin: 0 0 10px; font-family: var(--f-body); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.site-footer .footer-tabs { display: grid; justify-content: start; gap: 8px; }
.site-footer .footer-tabs a { font-size: 1.5rem; }
.site-footer .footer-tabs a:hover { color: var(--peach); }
.site-footer .footer-social { grid-column: auto; display: block; padding: 0; border: 0; }
.soc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.soc { display: inline-block; padding: 8px 16px 6px; border-radius: 999px; background: var(--cream); color: var(--blue); font-family: var(--f-title); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; font-size: 1.05rem; transition: transform .25s var(--ease-pop), background .2s; }
.soc:nth-child(2) { background: #CFE8B8; } .soc:nth-child(3) { background: #F3CFB3; }
.soc:hover { transform: translateY(-3px) rotate(-3deg); }
.footer-bottom { grid-area: bottom; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 243, 228, .25); }
.footer-bottom .footer-trade { grid-column: auto; }
.footer-bottom .fine { margin: 0; }
@media (max-width: 860px) {
  .footer-v2 { grid-template-columns: 1fr; grid-template-areas: "hero" "news" "cols" "bottom"; }
  .fi-2, .fi-3 { display: none; }
  .fi-1 { top: -14px; right: 0; }
}
.fi-1 { right: 0; top: -6px; } .fi-2 { right: 6%; top: 30px; } .fi-3 { right: 12%; top: -2px; }
@media (max-width: 1200px) { .fi-3 { display: none; } }

/* Footer newsletter card: purple so the orange Tally button stands out */
.site-footer .footer-news { background: #94338F; }

/* Buyers fact strip: on tablets/phones wrap as centered rows so a short last row sits in the middle */
@media (max-width: 960px) {
  .fact-strip { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 18px; column-gap: 16px; }
  .fact-strip li { flex: 0 1 calc((100% - 32px) / 3); }
}
@media (max-width: 760px) {
  .fact-strip li { flex-basis: calc((100% - 16px) / 2); }
}

/* Where to Buy: compact two-line heading so the locator is visible on landing */
.find-page { padding-top: clamp(28px, 4vw, 48px); }
.find-title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; text-wrap: balance; margin-bottom: .3em; }
.find-title { max-width: none; text-wrap: wrap; }
@media (min-width: 560px) { .find-title { white-space: nowrap; } }

/* Where to Buy: playful produce cluster in the empty space beside the heading */
.find-page .find-inner { position: relative; }
.find-icons { position: absolute; right: 2%; top: -8px; width: clamp(200px, 26vw, 340px); aspect-ratio: 1.3; pointer-events: none; }
.find-icons img { position: absolute; height: auto; filter: drop-shadow(0 8px 12px rgba(18, 56, 107, .18)); }
.find-icons .fi-pepper { width: 42%; left: 4%; top: 6%; rotate: -12deg; animation: find-bob 4.5s ease-in-out infinite; }
.find-icons .fi-lemon { width: 40%; right: 2%; top: 0; rotate: 10deg; animation: find-bob 5s ease-in-out -1.5s infinite; }
.find-icons .fi-cuke { width: 46%; left: 32%; bottom: 0; rotate: -6deg; animation: find-bob 5.5s ease-in-out -3s infinite; }
@keyframes find-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 820px) { .find-icons { display: none; } }
@media (prefers-reduced-motion: reduce) { .find-icons img { animation: none; } }