/* ————————————————————————————————
   MITIPOT — homepage
   1 belief · 2 promise · 3 offer · 4 dinners · 5 inside · 6 the math
   7 the system · 8 compose · 9 clay · 10 story · 11 order
   ———————————————————————————————— */

@font-face{font-family:'Hurme';src:url('../fonts/hurme-100.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-900.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --clay:#FAF8F2;
  --beige:#EBEBE6;
  --terra:#EB5537;
  --char:#282828;
  --soil:#1E1813;
  --spiced:#FCE29A;
  --muted:#55504A;
  --c-tikka:#E3531F; --c-saag:#00693D; --c-house:#A62142; --c-yellow:#AD7C11; --c-black:#78442A;
  --ease:cubic-bezier(.23,1,.32,1);
  --gut:clamp(1.25rem,4vw,4rem);     /* the page margin — nothing sits outside it */
  --maxw:1680px;                     /* wide screens use the screen */
  --wrap:min(100vw,var(--maxw));
  --sp:clamp(4rem,9vh,7rem);         /* one vertical step, everywhere */

  /* three sizes. the hero is the largest thing on the page. */
  --t-hero:clamp(2.1rem,5vw,4.8rem);
  --t-display:clamp(2rem,4vw,4rem);
  --t-h2:clamp(1.5rem,2.8vw,2.4rem);
  --t-h3:clamp(1rem,1.45vw,1.3rem);
  --t-body:clamp(.95rem,1.25vw,1.1rem);
  --t-lead:clamp(1rem,1.35vw,1.2rem);
  --t-micro:.72rem;      /* labels, captions, fine print */
  --t-chrome:.82rem;     /* nav, buttons, the band */
  --t-stat:clamp(2.8rem,6vw,5.4rem);   /* big statement numbers + oversized headers */
  --t-giant:clamp(3.4rem,9vw,9rem);    /* theatre words behind the lanes, the dial */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{
  font-family:'Hurme',system-ui,sans-serif;
  background:var(--clay);color:var(--char);
  line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* full-bleed sections still align their content to the same rail */
.bleed-rail{padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
/* one section header, used everywhere, so every chapter opens the same way */
.sec-head{display:grid;gap:clamp(.7rem,1.6vh,1.1rem);margin-bottom:clamp(2.2rem,5vh,3.6rem)}
.sec-h{font-weight:300;letter-spacing:-.025em;line-height:1.02;font-size:var(--t-display);max-width:9em;text-wrap:balance}
.sec-h b{font-weight:600;display:block}
.micro{font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.micro-t{color:var(--terra);opacity:1}
.micro-s{color:var(--spiced);opacity:1}

[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
html.rm [data-reveal]{opacity:1;transform:none;transition:none}

[data-pin]{position:relative}
[data-pin] .stage{position:sticky;top:0;height:100svh;overflow:clip}
html.rm [data-pin]{height:auto!important}
html.rm [data-pin] .stage{position:relative;height:auto;overflow:visible}

.btn-order{
  display:inline-block;background:var(--terra);color:var(--clay);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:var(--t-chrome);
  padding:1.1em 2.6em;border-radius:999px;
  transition:transform .4s var(--ease),background .3s;
}
.btn-order:hover{background:#d64426;transform:translateY(-2px)}
.btn-order-sm{padding:.8em 1.8em;font-size:var(--t-micro)}
/* everything that isn't Order — same shape, no fill, so the orange keeps
   meaning one thing and one thing only */
.btn-quiet{
  display:inline-block;color:var(--char);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:var(--t-chrome);
  padding:1.1em 2.6em;border-radius:999px;border:1px solid rgba(40,40,40,.35);
  transition:transform .4s var(--ease),border-color .3s,color .3s;
}
.btn-quiet:hover{border-color:var(--char);transform:translateY(-2px)}
[data-theme="dark"] .btn-quiet{color:var(--clay);border-color:rgba(250,248,242,.4)}
[data-theme="dark"] .btn-quiet:hover{border-color:var(--clay)}
.price{display:flex;align-items:baseline;gap:.55em;font-size:var(--t-lead)}
.price s{font-weight:400;opacity:.45;text-decoration-thickness:1px}
.price b{font-weight:700}
.fine{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:.75}
[data-theme="dark"] .fine{color:rgba(250,248,242,.6);opacity:1}
.fine b{font-weight:700;color:var(--char)}
[data-theme="dark"] .fine b{color:var(--clay)}
.qlink{
  display:inline-block;font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--terra);padding-bottom:.4rem;transition:color .3s;
}
.qlink:hover{color:var(--terra)}
.qlink::after{content:" →"}

/* ═════════ NAV ═════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,3rem);transition:color .5s;
}
.plogo{width:52px;height:auto}
.plogo-light{display:none}
.nav.on-dark{color:var(--clay)}
.nav.on-dark .plogo-dark{display:none}
.nav.on-dark .plogo-light{display:block}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-size:var(--t-chrome);font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav.scrolled{backdrop-filter:blur(6px)}
.nav-cta{background:var(--terra);color:var(--clay);padding:.7em 1.5em;border-radius:999px;opacity:1;
  transition:background .3s,transform .35s var(--ease)}
.nav-cta:hover{background:#d64426;transform:translateY(-1px);opacity:1}
.nav.on-dark .nav-cta{color:var(--clay)}

/* ═════════ 1 · BRAND BELIEF ═════════ */
.belief{position:relative;height:100svh;overflow:clip;background:var(--soil);color:var(--clay)}
.belief video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.belief-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,15,10,.34),transparent 30%,transparent 46%,rgba(15,10,6,.84))}
.belief-foot{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-bottom:clamp(3.5rem,9vh,6rem);
}
/* no ch-based max-width here — ch resolves against the container's 16px, not the display size */
.belief-h{font-weight:600;font-size:var(--t-hero);line-height:1.05;letter-spacing:-.02em;max-width:15em}
.hl{display:block;overflow:hidden}
.hl-i{display:inline-block;transform:translateY(112%);animation:heroline 1.4s var(--ease) forwards}
.hl:nth-child(2) .hl-i{animation-delay:.22s}
@keyframes heroline{to{transform:none}}
html.rm .hl-i{animation:none;transform:none}
.belief-cue{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.7;
  animation:cueIn 1s var(--ease) 1s backwards;flex:0 0 auto;
}
.belief-cue::after{content:" ↓"}
@keyframes cueIn{from{opacity:0;transform:translateY(1rem)}}
html.rm .belief-cue{animation:none}

/* ═════════ 2 · THE PROMISE ═════════
   Exhibition register: hairline rules, generous air, film as the object,
   museum label beneath it. The captions live in the film. */
.promise{background:var(--soil);color:var(--clay);padding:clamp(4rem,9vh,7rem) 0 clamp(5rem,11vh,8rem)}
.promise-rule{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:clamp(1.6rem,4vh,2.4rem);
  border-bottom:1px solid rgba(250,248,242,.22);
}
.promise-rule .micro{opacity:.55}
.promise-rule .micro:first-child{color:var(--spiced);opacity:1}
.promise-in{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.6rem,6vh,4rem);
  padding-top:clamp(3rem,8vh,6rem);
}
.promise-copy{display:grid;gap:clamp(.9rem,2.4vh,1.5rem);align-content:center}
.promise-h{
  font-weight:300;letter-spacing:-.025em;line-height:1.02;
  font-size:var(--t-display);display:grid;gap:.02em;
}
.promise-h b{font-weight:600}
.promise-sub{
  margin-top:clamp(.5rem,1.4vh,.9rem);
  font-weight:400;font-size:var(--t-lead);line-height:1.5;
  color:var(--clay);opacity:.9;max-width:30ch;
}
.promise-film{position:relative;justify-self:center;width:100%;max-width:620px}
.promise-film video{
  width:100%;height:auto;aspect-ratio:1080/912;object-fit:cover;
  background:#141010;border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
/* the three steps as objects, sitting under the headline rather than taking a
   band of their own. Settled ratios: pouch 100%, tadka .30, bloomasala .50. */
.promise-legend{
  --pl-h:clamp(74px,8vw,116px);
  margin-top:clamp(1.6rem,4vh,2.4rem);
  padding-top:clamp(1.4rem,3.2vh,2rem);
  border-top:1px solid rgba(250,248,242,.2);
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:start;gap:clamp(1.6rem,4vw,3.4rem);
}
.pl-cell{display:grid;justify-items:center;gap:.7rem}
.pl-cell .micro{color:var(--spiced);opacity:1}
.pl-im{height:var(--pl-h);display:flex;align-items:flex-end;justify-content:center}
.pl-im-duo{gap:.4rem}
.pl-im img{width:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.45))}
.pl-a,.pl-b{height:100%}
.pl-c{height:30%}
.pl-d{height:50%}
.promise-film[data-reveal]{transform:translateY(34px) scale(.985)}
.promise-film[data-reveal].in{transform:none}
html.rm .promise-film[data-reveal]{transform:none}

/* ═════════ 3 · THE OFFER ═════════
   Type sits on the photograph. A soft scrim only where the copy lands, so the
   product stays untouched. */
/* The pot photograph's ground is #0D0B09, so the panel takes that exact value.
   Both food plates were levelled to one ground (#F5E7DC) and the panel behind
   them is set to it — one lit surface, not two mismatched crops. */
.offer{background:#0D0B09;color:var(--clay);padding:0}
.offer-in{display:grid;grid-template-columns:1fr;align-items:stretch}

.offer-stage{position:relative;display:grid;grid-template-columns:1fr;
  align-items:center;gap:clamp(1rem,3vw,2rem);
  padding:clamp(4.5rem,10vh,6.5rem) clamp(1.4rem,5vw,3.5rem) clamp(3rem,7vh,4.5rem);
  padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.offer-copy{display:grid;justify-items:start;gap:clamp(.7rem,1.8vh,1.15rem);min-width:0}
.offer-h{font-weight:300;letter-spacing:-.025em;line-height:1.04;
  font-size:var(--t-h2);display:grid;gap:.02em;max-width:9em}
.offer-h b{font-weight:600}

/* the object beside its label. The photo carries a soft glow that doesn't match
   the flat ground, so its edges are feathered back into it — no rectangle. */
.ff-potwrap{position:relative;min-width:0;aspect-ratio:1/1;overflow:clip}
.ff-potwrap img{position:absolute;display:block;width:152%;max-width:none;height:auto;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.ff-potwrap::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(to bottom,#0D0B09 0%,rgba(13,11,9,0) 20%,rgba(13,11,9,0) 84%,#0D0B09 100%),
    linear-gradient(to right,#0D0B09 0%,rgba(13,11,9,0) 16%,rgba(13,11,9,0) 84%,#0D0B09 100%)}

/* the counts are the value proof — numbers, not product names. Someone eleven
   seconds in doesn't know what a tadka is, but they can count. */
.ff-list{list-style:none;display:grid;width:100%;max-width:21rem;
  margin:clamp(.3rem,1vh,.7rem) 0;border-top:1px solid rgba(250,248,242,.2)}
.ff-list li{display:flex;align-items:baseline;gap:clamp(.8rem,2.2vw,1.3rem);
  padding:.58rem 0;border-bottom:1px solid rgba(250,248,242,.2)}
.ff-n{flex:0 0 1.5em;font-weight:300;font-size:var(--t-h3);
  letter-spacing:-.02em;color:var(--terra);line-height:1}
.ff-t{font-weight:500;font-size:var(--t-body);line-height:1.3;color:var(--clay)}

.offer-buy{display:flex;align-items:center;gap:.9rem clamp(1rem,2.6vw,1.6rem);flex-wrap:wrap;margin-top:.3rem}
.offer-price{display:inline-flex;align-items:baseline;gap:.5em;
  font-size:var(--t-lead);letter-spacing:-.01em}
.offer-price s{font-weight:400;opacity:.45;text-decoration-thickness:1px}
.offer-price b{font-weight:700}

.offer-plates{background:#F5E7DC;display:grid;align-content:center;gap:0;min-width:0;
  padding:clamp(1rem,3vh,2rem) 0}
.offer-plates img{display:block;width:100%;height:auto;
  aspect-ratio:1300/548;object-fit:cover;object-position:50% 54%}

@media (min-width:900px){
  .offer-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .offer-stage{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}

}
@media (max-width:899px){
  /* the photo's empty top third is dead height on a phone — anchor the pot to
     the floor of the frame and crop the sky, not the object */
  .offer-stage{padding:clamp(4.2rem,11vh,5.5rem) var(--gut) 0;gap:.4rem}
  .ff-potwrap{aspect-ratio:16/10;margin-inline:calc(-1 * var(--gut))}
  .ff-potwrap img{width:116%;top:auto;bottom:0;transform:translateX(-50%)}
  /* two plates abreast so the panel doesn't run to a full screen on its own */
  .offer-plates{grid-template-columns:1fr 1fr;align-items:center}
  .ff-potwrap::after{background:
    linear-gradient(to bottom,#0D0B09 0%,rgba(13,11,9,0) 26%),
    linear-gradient(to right,#0D0B09 0%,rgba(13,11,9,0) 14%,rgba(13,11,9,0) 86%,#0D0B09 100%)}
  .offer-plates{padding:0}
  .offer-h{font-size:var(--t-h2)}
}
@media (max-width:560px){
  /* abreast is unreadable on a phone and stacked costs a whole screen — swipe,
     the same gesture the dish row already teaches further up the page */
  .offer-plates{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .offer-plates::-webkit-scrollbar{display:none}
  .offer-plates img{flex:0 0 92%;scroll-snap-align:center}
}

/* — the band, light ground, as in the live build — */
.dietband{
  overflow:clip;white-space:nowrap;padding:1rem 0;
  background:var(--clay);color:var(--char);
  border-block:1px solid rgba(40,40,40,.28);
}
.dietband-track{display:inline-flex;animation:band 26s linear infinite;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:var(--t-chrome)}
@keyframes band{to{transform:translateX(-50%)}}
html.rm .dietband-track{animation:none}

/* ═════════ 4 · DINNERS ═════════ */
.dinners{background:var(--beige);padding:var(--sp) 0}
.dinners-head{
  display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,3.5rem);
  align-items:end;margin-bottom:clamp(3rem,7vh,5rem);
}
.dinners-l{display:grid;gap:clamp(.8rem,2vh,1.2rem)}
.dinners-h{font-weight:300;letter-spacing:-.025em;line-height:1.02;font-size:var(--t-display);max-width:13ch}
.dinners-h b{font-weight:600;display:block}
.dinners-p{font-weight:400;font-size:var(--t-lead);line-height:1.55;color:var(--muted);max-width:34ch;padding-bottom:.4em}

/* five across, one horizontal view — no vertical stagger */
.dishes{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.5rem,1vw,1rem);align-items:start;
}
.dish{display:grid;gap:clamp(.7rem,1.6vh,1rem);min-width:0}
/* the loops are shot square */
.dish-media{position:relative;width:100%;aspect-ratio:4/5;overflow:clip;border-radius:0;background:var(--dc,var(--char))}
.dish-media img,.dish-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-ph{position:absolute;inset:0;display:grid;place-items:center;padding:10%;background:var(--dc)}
.dish-ph span{
  font-weight:900;letter-spacing:-.02em;line-height:.98;text-align:center;text-transform:uppercase;
  font-size:var(--t-h3);color:var(--clay);opacity:.34;
}
.dish-cap{display:grid;gap:.25rem}
.dish-n{font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;line-height:1.25}
.dish-d{font-weight:400;font-size:var(--t-chrome);color:var(--muted);line-height:1.45}
.dish-nut{
  margin-top:.15rem;font-weight:600;font-size:var(--t-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.7;line-height:1.5;
}
.dish-byo{color:var(--terra);font-weight:600;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase}
.dinners-foot{
  margin-top:clamp(3.5rem,8vh,6rem);border-top:1px solid rgba(40,40,40,.22);
  padding-top:clamp(1.6rem,4vh,2.6rem);
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.6rem 3rem;
}
.dinners-byo{font-weight:400;font-size:var(--t-body);line-height:1.55;max-width:42ch;color:var(--muted)}
.dinners-byo b{font-weight:600;color:var(--char)}


/* ═════════ 5 · THE INGREDIENTS — three lanes in one viewport ═════════
   The rail sits beside the products rather than above them, so the whole lane
   height goes to the objects. Each lane takes the colour of its active piece. */
/* minmax(0,1fr) — plain 1fr rows grow to content, and then the images'
   height:100% resolves against the grown row and runs away */
/* lanes left, the live pot right */
.theatres{height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1.22fr 1fr 1fr;overflow:clip}
.lanes{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));min-height:0;min-width:0}
.lane{
  --thbg:var(--c-tikka);--thfg:var(--spiced);
  position:relative;overflow:clip;
  background:var(--thbg);color:var(--thfg);transition:background 1s var(--ease);
  /* the label sits on the page rail; the products run off the right edge, so
     the lane reads as a moving shelf rather than an object floating in colour */
  display:grid;grid-template-columns:minmax(0,clamp(9rem,15vw,15rem)) minmax(0,1fr);
  align-items:center;gap:clamp(1.2rem,3vw,3.2rem);
  padding-block:clamp(.7rem,1.6vh,1.3rem);
  padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-right:0;
  min-height:0;
}
.th--protein{--thfg:var(--clay)}
.lane-rail{display:grid;gap:.1rem;z-index:3;align-content:center;justify-items:start}
.th-num,.th-label,.th-range{color:var(--thfg)}
.th-num{font-weight:200;letter-spacing:-.04em;line-height:.86;
  font-size:var(--t-stat);opacity:.42;transition:opacity .8s}
.th-label{margin-top:.15rem;font-weight:700;letter-spacing:-.01em;line-height:1;
  font-size:var(--t-h3)}
.th-range{margin-top:.4rem;font-weight:400;font-size:var(--t-micro);line-height:1.45;
  letter-spacing:.02em;opacity:.72;max-width:18ch}
/* the money block's note — always visible, not hover-dependent */
.th-note{
  margin-top:.5rem;font-weight:400;font-size:var(--t-micro);line-height:1.6;
  opacity:.8;transition:color .8s;
}
/* bring your own — an empty pot, tagged */
/* the fourth protein is the one we don't supply — an empty outline in the same
   silhouette as the pouches, so the row reads three-and-yours without a sentence */
.th-item-byo img{display:none}
.th-item-byo{
  position:relative;aspect-ratio:.78;
  display:grid;place-items:center;padding:1rem;
  border:1.5px dashed rgba(255,255,255,.55);border-radius:10px;
  background:rgba(255,255,255,.05);
}
.byo-tag{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  line-height:2;text-align:center;opacity:.95;
}
.th-row{
  position:relative;z-index:2;height:100%;min-height:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.7rem,2vw,2.2rem);
  padding-right:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
}
.th-item{
  --prod:clamp(96px,18svh,214px);
  flex:0 0 auto;min-width:0;display:flex;align-items:center;justify-content:center;
  transform-origin:center bottom;
  transition:transform .55s var(--ease),opacity .45s;opacity:.62;
}
.th-item:hover,.th-item:focus-visible{transform:scale(1.12);opacity:1;z-index:4}
.th-item img{height:var(--prod);width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
/* no size change on select — the row keeps one rhythm, brightness does the work */
.th-item.is-active{opacity:1;z-index:3}
.th-item.is-active:hover{transform:scale(1.12)}
/* the finish lane mixes a small bottle with a taller one — keep their relationship */
.th--finish .th-item img{height:calc(var(--prod) * .86)}
.th--finish .th-item-bloom img{height:calc(var(--prod) * 1.02)}
.th-item-byo{height:var(--prod)}

/* ═════════ 6 · EVERYTHING INSIDE ═════════ */
.shelf{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(2rem,5vh,3rem) clamp(1rem,2.6vw,2.6rem);
  border-top:1px solid rgba(40,40,40,.22);border-bottom:1px solid rgba(40,40,40,.22);
  padding:clamp(2.5rem,7vh,5rem) 0 clamp(1.8rem,4.5vh,3rem);
}
/* settled proportions — derived, never eyeballed.
   bloomasala = half the pouch; tadka = .59 of the bloomasala */


/* ═════════ 6 · THE MATH ═════════
   A ledger, not a comparison table. Two figures, one fact underneath, and the
   reader does the arithmetic against whatever they last paid for dinner. */
.math{background:var(--beige);padding:var(--sp) 0}
.math-top{display:grid;gap:clamp(1.6rem,4vh,2.6rem);margin-bottom:clamp(1.6rem,4vh,2.6rem);align-items:center}
.math-copy{display:grid;gap:clamp(1rem,2.4vh,1.5rem)}
.math-fig{margin:0}
.math-fig img{display:block;width:100%;height:auto}
@media (min-width:900px){
  .math-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem)}
}
.math-h{font-weight:300;letter-spacing:-.025em;line-height:1.02;font-size:var(--t-display);max-width:11em}
.math-h b{font-weight:600;display:block}
.math-p{font-weight:400;font-size:var(--t-lead);line-height:1.6;color:var(--muted);max-width:44ch}

.math-rows{list-style:none;display:grid;border-top:1px solid rgba(40,40,40,.22)}
.math-row{
  display:grid;grid-template-columns:1fr;gap:.5rem;align-items:baseline;
  border-bottom:1px solid rgba(40,40,40,.22);
  padding:clamp(1.6rem,4vh,2.6rem) 0;
}
.math-row:nth-child(2){transition-delay:.12s}
.mr-k{font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mr-v{display:flex;align-items:baseline;gap:.5rem;line-height:1}
.mr-v b{font-weight:300;letter-spacing:-.03em;font-size:var(--t-stat)}
.mr-v i{font-style:normal;font-weight:600;font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.mr-v-on b{color:var(--terra);font-weight:400}
.mr-n{font-weight:400;font-size:var(--t-body);line-height:1.55;color:var(--muted);max-width:44ch}

/* not fine print — this is the argument, so it gets set like one */
.math-foot{margin-top:clamp(2rem,5vh,3.2rem);display:grid;gap:clamp(.6rem,1.6vh,1rem);
  align-items:end}
.mf-close{font-weight:600;letter-spacing:-.02em;line-height:1.05;
  font-size:var(--t-display);color:var(--char)}
.mf-sub{font-weight:400;font-size:var(--t-lead);line-height:1.5;color:var(--muted)}
.mf-anchor{font-weight:400;font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:46ch}
.mf-land{font-weight:600;font-size:var(--t-lead);line-height:1.35;letter-spacing:-.01em;
  color:var(--char);max-width:30ch;text-wrap:balance}

@media (min-width:900px){
  .math-row{grid-template-columns:minmax(0,13ch) minmax(0,auto) minmax(0,1fr);
    gap:clamp(1.4rem,3.4vw,3rem);align-items:center}
  .mr-k{align-self:center}
}

/* ═════════ 7 · THE SYSTEM ═════════ */
.system{background:var(--soil);color:var(--beige);padding:clamp(5rem,12vh,9rem) 0}
.system-head{display:grid;gap:1.1rem;justify-items:center;text-align:center;margin-bottom:clamp(2.5rem,6vh,4rem)}
.system-h{font-weight:300;letter-spacing:-.02em;line-height:1.06;font-size:var(--t-display);max-width:17ch;color:var(--clay)}
.system-fig{display:flex;align-items:center;justify-content:center;transition-delay:.1s}
.system-fig img{
  width:clamp(230px,32vw,500px);height:auto;
  -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 52%,transparent 100%);
  mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 52%,transparent 100%);
}
.system-claim{
  margin-top:clamp(2.4rem,6vh,4rem);display:grid;gap:clamp(1.6rem,4vh,2.4rem);
  grid-template-columns:1fr;
}
.sc{display:grid;gap:.5rem;max-width:34ch}
.sc b{font-weight:700;font-size:var(--t-h3);color:var(--clay)}
.sc span{font-weight:400;font-size:var(--t-body);line-height:1.6;color:rgba(235,235,230,.66)}
.sc::before{content:"—";color:var(--terra);font-weight:600}

/* ═════════ 8 · COMPOSE ═════════ */
.compose{background:var(--clay);padding:clamp(5rem,11vh,8rem) 0}
.compose-in{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.compose-copy{display:grid;gap:clamp(1rem,2.4vh,1.5rem);justify-items:start}
.compose-h{font-weight:300;letter-spacing:-.025em;line-height:1.04;font-size:var(--t-display);max-width:10ch}
.compose-p{font-weight:400;font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:34ch}
/* percentage heights need a sized parent, or they fall back to the image's
   natural size. Same settled ratios as the shelf: tadka .30, bloomasala .50. */
.compose-fig{
  display:flex;gap:clamp(.5rem,1.6vw,1.2rem);align-items:flex-end;justify-content:center;
  height:clamp(150px,20vw,260px);overflow:clip;
}
.compose-fig img{height:100%;width:auto;filter:drop-shadow(0 24px 32px rgba(30,24,19,.18))}
.compose-fig .cf-c{height:30%}
.compose-fig .cf-d{height:50%}

/* ═════════ FOOTER ═════════ */
.footer{background:var(--clay);padding:clamp(4.5rem,10vh,7rem) clamp(1rem,4vw,3rem) 2.4rem;text-align:center}
.foot-logo{width:min(27vw,300px);margin:0 auto clamp(1.6rem,4vh,2.6rem);height:auto}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem clamp(1.4rem,3vw,2.4rem);margin-bottom:1.8rem}
.foot-nav a{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.7;transition:opacity .3s}
.foot-nav a:hover{opacity:1}
.foot-contact{font-weight:600;font-size:var(--t-chrome)}
.foot-contact a:hover{color:var(--terra)}
.foot-legal{margin-top:1.6rem;font-size:var(--t-micro);opacity:.55;max-width:60ch;margin-inline:auto}

/* ═════════ sticky order bar ═════════ */
.mbar{display:none}
@media (max-width:1024px){
  .mbar{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;align-items:center;
    justify-content:space-between;gap:1rem;background:rgba(30,24,19,.94);color:var(--clay);
    padding:.65rem clamp(1rem,4vw,2rem) calc(.65rem + env(safe-area-inset-bottom,0px));backdrop-filter:blur(8px)}
  .mbar[hidden]{display:none}
  .mbar-t{display:grid;gap:.12rem;line-height:1.25}
  .mbar-p{display:flex;align-items:baseline;gap:.45em;font-size:var(--t-body);font-weight:300}
  .mbar-p b{font-weight:700}
  .mbar-p s{font-weight:400;opacity:.5;text-decoration-thickness:1px}
  .mbar-s{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}
  html:not(.rm) .mbar{animation:mbarup .45s var(--ease)}
}
@keyframes mbarup{from{transform:translateY(100%)}}

#promise,#dinners,#order{scroll-margin-top:clamp(3.5rem,7vh,5.5rem)}

/* ═════════ RESPONSIVE ═════════ */
@media (min-width:900px){
  .promise-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(3rem,7vw,7rem);align-items:center}
  .promise-film{justify-self:end;max-width:none}
  .dinners-head{grid-template-columns:1.15fr .85fr}
  .system-claim{grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
  .compose-in{grid-template-columns:1fr 1fr}
  .clayw-in{grid-template-columns:1fr 1fr}
  .story-in{grid-template-columns:.9fr 1.1fr}
}
@media (max-width:1024px){
  .nav-links a:not(.nav-cta){display:none}
}
@media (max-width:768px){
  /* lanes stay, rail above the row so the products keep their height */
  .theatres{height:100svh;grid-template-rows:1.18fr 1fr 1fr}
  .lane{grid-template-columns:1fr;gap:.5rem;padding:clamp(.9rem,2vh,1.4rem) var(--gut);min-height:0}
  .lane:first-child{padding-top:clamp(4.8rem,10.5vh,6.2rem)}
  .lane-rail{align-content:end}
  .th-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;height:clamp(120px,19svh,190px)}
  .th-row::-webkit-scrollbar{display:none}
  .th-item{scroll-snap-align:center}

  .belief-foot{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .belief-h{max-width:none}
  /* one horizontal view on phones too — swipe rather than scroll past five */
  .dishes{
    display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding-inline:4vw;
  }
  .dishes::-webkit-scrollbar{display:none}
  .dish{flex:0 0 62vw;scroll-snap-align:center}
  .shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 1.2rem;justify-content:stretch}
  .clayw-grid{grid-template-columns:1fr 1fr}
  .foot-logo{width:min(58vw,240px)}
  .foot-tag{width:min(35vw,150px)}
}

/* ═════════ THE LIVE POT ═════════
   Ported from the composer: the pot is a body and a lid, the pieces are placed
   around it, and the lid closes once all three parts are chosen. */
.potstack{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:56%;aspect-ratio:720/899;z-index:3}
.potstack img{position:absolute;left:0;width:100%;height:auto;display:block}
.p-shadow{position:absolute;left:50%;bottom:-5%;transform:translateX(-50%);width:86%;height:14%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%)}

/* the pieces, placed */
.pl{position:absolute;z-index:2;opacity:0;transform:translate(-16px,8px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.pl.in{opacity:1;transform:none}
.pl img{display:block;width:100%;height:auto}

/* steam */
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.9)}
  22%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.25)}}

@media (max-width:900px){
  .theatres{grid-template-columns:1fr;grid-template-rows:1.18fr 1fr 1fr}
  .shelf{justify-content:center;gap:clamp(2rem,5vh,3rem) clamp(1.6rem,7vw,2.6rem)}
}


/* ═════════ PORTED FROM THE ORIGINAL BUILD ═════════
   The ingredient chapter, the Miti clay plate, the product shelf and the
   "Stir the pot" closing, lifted with their own rules so they look as they did. */
/* ═════════ 5 · PART A — POT ═════════ */
.part-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(40,40,40,.3);padding-top:1rem}
.part-title{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:var(--t-h2);line-height:1}
.pota{background:var(--clay);padding-top:clamp(4rem,8vh,6rem)}
.pota-h{font-weight:300;letter-spacing:-.02em;line-height:1;font-size:var(--t-stat)}
.pota-h2{padding:clamp(2rem,5vh,3.5rem) 0 0}
/* — etymology entry — */
.ety2{padding:clamp(2.4rem,6vh,4rem) 0 0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.ety2 .cc-kick{text-align:right;font-size:var(--t-h2)}
.ety{display:grid;gap:.35rem;justify-items:start;}
.ety-word{font-weight:300;letter-spacing:-.02em;line-height:1;
  font-size:var(--t-stat);}
.ety-dev{font-size:.5em;font-weight:400;opacity:.45;margin-left:.25em;letter-spacing:0}
.ety-meta{margin-top:.5rem;font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.55;}
.ety-def{font-weight:400;font-size:var(--t-h3);color:#3a362f}
.pota-now{font-weight:600;color:var(--terra);font-size:var(--t-h3)}
/* — clay diagram: pot annotated like an engineering plate — */
.claycomp2{padding:clamp(1.6rem,4vh,3rem) 0 clamp(1.8rem,4.5vh,3rem)}
.cc-kick{font-weight:600;letter-spacing:-.01em;
  font-size:var(--t-h2);color:var(--char);}
.cc-diagram{margin-top:clamp(2rem,5vh,3.5rem);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1.5rem,4vw,4.5rem);}
.cc-side{display:grid;gap:clamp(3rem,9vh,6rem)}
/* the pot's four properties — headers only until you ask for more */
.cca{position:relative;max-width:30ch}
.cca-h{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;color:inherit;text-align:inherit}
.cca b{display:block;font-weight:700;font-size:var(--t-h3);
  transition:color .35s var(--ease)}
.cca-h:hover b{color:var(--terra)}
.cca-x{position:relative;flex:0 0 auto;width:.72em;height:.72em;opacity:.5;
  transition:opacity .35s,transform .45s var(--ease)}
.cca-x::before,.cca-x::after{content:"";position:absolute;inset:0;margin:auto;
  background:currentColor}
.cca-x::before{width:100%;height:1px}
.cca-x::after{width:1px;height:100%;transition:transform .45s var(--ease)}
.cca-h:hover .cca-x{opacity:1}
.cca-h[aria-expanded="true"] .cca-x::after{transform:scaleY(0)}
.cca-d{display:grid;grid-template-rows:0fr;overflow:hidden;
  font-weight:400;font-size:var(--t-body);color:#55504a;line-height:1.5;
  transition:grid-template-rows .5s var(--ease),opacity .4s,margin-top .5s var(--ease);
  opacity:0;margin-top:0}
.cca-d > *{min-height:0}
.cca-d.open{grid-template-rows:1fr;opacity:1;margin-top:.4rem}
html.rm .cca-d{grid-template-rows:1fr;opacity:1;margin-top:.4rem}
.cc-side-l .cca-h{flex-direction:row-reverse}
.cc-side-l{justify-items:end;text-align:right}
.cc-side-l .cca::after{content:"";position:absolute;top:.8em;right:calc(-1 * clamp(1.2rem,3vw,3.4rem));
  width:clamp(.9rem,2.4vw,2.6rem);height:1px;background:rgba(40,40,40,.4);}
.cc-side-r .cca::before{content:"";position:absolute;top:.8em;left:calc(-1 * clamp(1.2rem,3vw,3.4rem));
  width:clamp(.9rem,2.4vw,2.6rem);height:1px;background:rgba(40,40,40,.4);}
.cc-side .cca:nth-child(2){transition-delay:.12s}
.cc-fig{display:flex;justify-content:center;transition-delay:.1s}
.cc-fig img{width:clamp(250px,25vw,400px);height:auto;
  filter:drop-shadow(0 34px 44px rgba(30,24,19,.22));}
/* ═════════ 6 · PART B — INGREDIENTS ═════════ */
.ingr{background:var(--clay);padding-top:clamp(5rem,10vh,8rem)}
.ingr-intro{padding:clamp(3rem,7vh,5rem) 0 clamp(1.5rem,4vh,2.5rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem clamp(2rem,5vw,5rem);flex-wrap:wrap;}
.ingr-h{font-weight:300;letter-spacing:-.02em;line-height:1.02;font-size:var(--t-stat)}
.ingr-h2{font-weight:700;color:var(--terra)}
.ingr-crafted{margin-top:1.1rem;font-size:var(--t-lead);line-height:1.55;max-width:44ch;
  color:#55504a;}
.ingr-kick{text-align:right;font-size:var(--t-h2)}
/* — groundwork: the raw work, then its compression — */
.ingr-right{display:grid;justify-items:end;gap:clamp(1.4rem,3.5vh,2.2rem)}
.gw-basket{width:clamp(200px,25vw,380px);transition-delay:.12s}
.gw-basket img{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(30,24,19,.20))}
.cc-fig-pouch img{width:clamp(160px,17vw,270px);height:auto;
  filter:drop-shadow(0 30px 40px rgba(30,24,19,.24));}
/* — ingredients close — */
.fire-shelf{border-top:1px solid rgba(250,248,242,.22);padding:clamp(2.5rem,6vh,4rem) 0}
.shelf-track{display:flex;align-items:flex-end;gap:clamp(1.2rem,2.6vw,2.6rem);width:max-content;
  padding-inline:0;will-change:transform;
  animation:shelfroll 46s linear infinite}
.shelf-track:hover{animation-play-state:paused}
html.rm .shelf-track{animation:none}
@keyframes shelfroll{to{transform:translateX(-50%)}}
.shelf-track img{height:clamp(120px,17vh,190px);width:auto;opacity:.95}
.shelf-track img.sh-b{height:clamp(80px,11vh,120px)}
/* ═════════ 12 · CLOSING ═════════ */
.closing{position:relative;height:92svh;display:grid;place-items:center;overflow:clip;color:var(--clay)}
.closing-bg{position:absolute;inset:0}
.closing-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.closing::after{content:"";position:absolute;inset:0;background:rgba(18,12,8,.45)}
.closing-in{position:relative;z-index:2;text-align:center;display:grid;gap:2.4rem;justify-items:center}
.closing-coda{display:grid;line-height:1.12;font-weight:600;letter-spacing:-.01em;font-size:var(--t-stat)}
.coda{display:block}
.coda-1{transition-delay:0s}
.coda-2{opacity:0;transition-delay:.14s;margin-left:1.2em}
.coda-3{opacity:0;transition-delay:.28s;margin-left:2.4em}
.coda-2.in{opacity:.5}
.coda-3.in{opacity:.22}
html.rm .coda-2{opacity:.5}
html.rm .coda-3{opacity:.22}
/* — mobile overrides for the ported chapters — */
@media (max-width:900px){
  .ingr-intro{grid-template-columns:1fr;align-items:start}
  .ety2 .cc-kick,.ingr-kick{text-align:left}
  .cc-diagram{grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem;align-items:start}
  .cc-fig{grid-column:1 / -1;order:-1}
  .cc-fig img{width:min(52vw,280px)}
  .ingr-intro{padding-bottom:0}
  .ingr-right{justify-items:center;gap:1.3rem;width:100%}
  .gw-basket{order:-1;width:min(68vw,300px)}
  /* photo first */
    .ingr-kick{order:1;text-align:center}
  /* then the line, under it */
    .ingr .claycomp2{padding-top:0}
  .ingr .cc-fig-pouch{position:relative;justify-content:center;padding-top:2.8rem}
  .ingr .cc-fig-pouch::before{content:"";position:absolute;left:50%;top:.4rem;
      width:1px;height:1.9rem;background:var(--terra);}
  .cc-fig-pouch img{width:min(36vw,160px)}
  .cc-side{gap:1.8rem}
  .cc-side-l{justify-items:start;text-align:left}
  .cc-side-l .cca::after,.cc-side-r .cca::before{display:none}
  .cca{max-width:none;border-top:1px solid rgba(40,40,40,.2);padding-top:.9rem}
  .cc-side-l .cca-h{flex-direction:row}
  .cca-h{width:100%;justify-content:space-between}
  .closing{height:78svh}
}
/* ═════════ 4 · SYSTEM CHAPTER (rebuilt) ═════════ */
/* ═════════ 4b · THE THREE STEPS — now inside the dark system chapter ═════════ */
.closing .price{justify-content:center}
.closing .promo{text-align:center;color:rgba(250,248,242,.72)}
.closing .promo b{color:var(--clay);font-weight:700}

/* — the ported sections need their section chrome — */
.pota{background:var(--clay);color:var(--char);padding:clamp(4.5rem,10vh,8rem) 0}
.ingr{background:var(--clay);color:var(--char)}
.shelfband{background:var(--soil);color:var(--clay);overflow:clip;padding:clamp(2rem,5vh,3.5rem) 0}
.closing{position:relative;min-height:92svh;display:grid;place-items:center;overflow:clip;color:var(--clay)}
.closing-bg{position:absolute;inset:0;overflow:clip}
.closing-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.closing::after{content:"";position:absolute;inset:0;background:rgba(18,12,8,.5)}
.closing-in{position:relative;z-index:2;text-align:center;display:grid;gap:clamp(1.6rem,4vh,2.6rem);justify-items:center}
.closing .price{justify-content:center}

/* ═════════ ONE SYSTEM ═════════ */
.onesys{background:var(--beige);padding:var(--sp) 0}
.onesys-in{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vh,3rem);align-items:center}
.onesys-copy{display:grid;gap:clamp(1rem,2.6vh,1.6rem)}
.onesys-h{font-weight:300;letter-spacing:-.025em;line-height:1.02;font-size:var(--t-display);max-width:9em}
.onesys-h b{font-weight:600;display:block}
.onesys-p{font-weight:400;font-size:var(--t-lead);line-height:1.6;color:var(--muted);max-width:40ch}
.onesys-fig{justify-self:stretch;width:100%}
.onesys-fig video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;background:#241c15;display:block}
.onesys-fig figcaption{margin-top:.9rem;font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);opacity:.75}

/* the band's order call */
.storycta{background:var(--clay);display:grid;justify-items:center;
  padding:clamp(3rem,8vh,5rem) clamp(1rem,4vw,3rem)}
.story-link{font-weight:600;font-size:var(--t-chrome);letter-spacing:.16em;
  text-transform:uppercase;color:var(--char);padding-bottom:.4rem;
  border-bottom:1px solid rgba(40,40,40,.35);transition:border-color .4s,color .4s}
.story-link:hover{color:var(--terra);border-bottom-color:var(--terra)}

@media (min-width:900px){
  .onesys-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,5rem)}
}
.foot-tag{width:min(26vw,190px);margin:0 auto clamp(1.6rem,4vh,2.6rem);height:auto}

/* ═════════ SHIPPED TONIGHT — clarity pass ═════════ */

/* hero category line — the affirmative noun. */
.belief-copy{display:grid;gap:clamp(.9rem,2.2vh,1.4rem)}
.belief-sub{font-weight:400;font-size:var(--t-lead);line-height:1.5;
  color:rgba(250,248,242,.88);max-width:36ch}

/* the twenty-minute rule — time made visible, no convenience words */
.cookline{margin-top:clamp(1.6rem,4vh,2.4rem);padding-top:clamp(1.4rem,3.2vh,2rem);
  border-top:1px solid rgba(250,248,242,.2);display:grid;gap:.9rem;max-width:34rem}
.cl-track{height:1px;background:rgba(250,248,242,.22);position:relative}
.cl-fill{position:absolute;inset:0;background:var(--spiced);transform:scaleX(0);
  transform-origin:left;transition:transform 2.6s var(--ease) .4s}
.cookline.in .cl-fill{transform:none}
html.rm .cl-fill{transform:none;transition:none}
.cl-ticks{list-style:none;display:flex;justify-content:space-between;gap:1rem}
.cl-ticks li{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(250,248,242,.66)}
.cl-ticks li:last-child{color:var(--spiced)}
.cl-total{font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay);justify-self:end}

/* offer — the fire shot and the two quiet lines at the buy moment */
.fine-2{margin-top:.2rem;line-height:1.9;text-transform:none;letter-spacing:.06em;
  font-weight:500;color:rgba(250,248,242,.55)}
.ff-firewrap{aspect-ratio:auto;align-self:stretch;min-height:clamp(520px,64vh,760px)}
.ff-firewrap img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;
  max-width:none;transform:none;object-fit:cover;object-position:50% 38%}
@media (max-width:899px){.ff-firewrap{aspect-ratio:4/5;min-height:0;align-self:auto}}
.ff-pot-cap{position:absolute;left:50%;bottom:clamp(.6rem,2vh,1.4rem);transform:translateX(-50%);
  z-index:2;white-space:nowrap;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(250,248,242,.6)}

/* the giant word behind each lane — first-build theatre, kept quiet */
.th-word{position:absolute;z-index:1;left:56%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;font-weight:100;letter-spacing:-.03em;line-height:1;white-space:nowrap;
  font-size:var(--t-giant);color:var(--thfg);opacity:.11;
  transition:opacity .26s var(--ease)}
.th-word.swap{opacity:0}
@media (max-width:768px){.th-word{display:none}}

/* provenance headline steps back into the scale */
.ingr-h{font-size:var(--t-display)}
.ingr-h br{display:none}
.ingr-h .ingr-h2{display:block}

/* menu — the nutrition numbers earn their size */
.dish-nut{font-size:var(--t-micro);opacity:.95;letter-spacing:.09em}

/* compose — full-bleed still life, type on the empty plinth, never the objects */
.compose{position:relative;min-height:88svh;display:grid;align-items:end;
  overflow:clip;background:var(--soil);color:var(--clay);padding:0}
.compose-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 24%}
.compose-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,15,10,.2),transparent 34%,rgba(15,10,6,.82))}
.compose-foot{position:relative;z-index:2;width:100%;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-block:clamp(3rem,8vh,5rem) clamp(3.5rem,9vh,6rem)}
.compose-copy{display:grid;gap:clamp(.9rem,2.2vh,1.4rem);justify-items:start;max-width:44ch}
.compose-h{max-width:none}
.compose .compose-p{color:rgba(250,248,242,.85);max-width:38ch}

/* the family line above the story link */
.storycta{gap:1.1rem}
.story-fam{font-weight:400;font-size:var(--t-body);color:var(--muted);text-align:center}

/* ═════════ THE COMPLETE SYSTEM — definitive reveal ═════════ */
.reveal{position:relative;min-height:100svh;display:grid;align-items:end;
  overflow:clip;background:var(--soil);color:var(--clay)}
.reveal-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.reveal-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,15,10,.25),transparent 30%,transparent 46%,rgba(15,10,6,.92))}
.reveal-foot{position:relative;z-index:2;width:100%;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-block:0 clamp(3rem,8vh,5rem);display:grid;gap:clamp(.7rem,1.8vh,1.1rem);justify-items:start}
.reveal-h{font-weight:300;letter-spacing:-.025em;line-height:1.05;font-size:var(--t-display);max-width:14em}
.reveal-h b{font-weight:600;display:block}
.reveal-p{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.75)}
.reveal-cur{font-weight:400;font-size:var(--t-lead);line-height:1.55;color:rgba(250,248,242,.88);max-width:46ch}
.reveal-price{display:flex;align-items:baseline;gap:.6em;margin-top:.2rem}
.reveal-price b{font-weight:700;font-size:var(--t-lead);color:var(--clay)}
.reveal-price span{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--spiced)}
@media (max-width:768px){.reveal-bg{object-position:62% 38%}}

/* ═════════ THREE ACTS ═════════
   One subject per screen. Each act takes the colour of the active piece. */
.act{
  --thbg:var(--c-tikka);--thfg:var(--spiced);
  position:relative;overflow:clip;min-height:74svh;
  background:var(--thbg);color:var(--thfg);transition:background 1s var(--ease);
  display:grid;grid-template-columns:minmax(0,clamp(10rem,17vw,17rem)) minmax(0,1fr);
  align-items:center;gap:clamp(1.2rem,3vw,3.2rem);
  padding-block:clamp(2rem,5vh,3.2rem);
  padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-right:0;
}
.act .th-row{height:auto;min-height:clamp(280px,44svh,470px)}
.act .th-item{--prod:clamp(150px,34svh,340px)}
.act.th--finish .th-item img{height:calc(var(--prod) * .89)}
.act.th--finish .th-item-bloom img{height:calc(var(--prod) * 1.05)}
.act .th-item-byo{height:calc(var(--prod) * .9)}
.act-rail{display:grid;gap:.5rem;z-index:3;align-content:center;justify-items:start}
.act .th-label{font-weight:700;letter-spacing:-.015em;line-height:1;
  font-size:var(--t-display)}
.act .th-range{font-weight:400;font-size:var(--t-body);line-height:1.5;
  letter-spacing:.01em;opacity:.8;max-width:16ch}
@media (max-width:768px){
  .act{min-height:72svh;grid-template-columns:1fr;gap:1rem;
    padding:clamp(2.4rem,6vh,3.4rem) var(--gut)}
  .act:first-of-type{padding-top:clamp(4.6rem,10vh,6rem)}
  .act .th-row{min-height:clamp(180px,30svh,300px);justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .act .th-row::-webkit-scrollbar{display:none}
  .act .th-item{--prod:clamp(150px,24svh,240px);scroll-snap-align:center}
}

/* the static claims rule — said once, calmly */
.claimsrule{margin-top:clamp(2.5rem,6vh,4rem);padding-block:clamp(1.1rem,2.6vh,1.6rem);
  border-block:1px solid rgba(40,40,40,.25)}
.claimsrule p{font-size:var(--t-chrome);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--char);text-align:center;line-height:2}

/* buy moment — single stage */
.offer-solo .offer-in{grid-template-columns:1fr}
/* light buy slide: the two boxes on clay ground */
.offer-light{background:var(--clay);color:var(--char)}
.offer-light .ff-list{border-top-color:rgba(40,40,40,.22)}
.offer-light .ff-list li{border-bottom-color:rgba(40,40,40,.22)}
.offer-light .ff-t{color:var(--char)}
.ff-boxwrap{display:flex;align-items:center;justify-content:center;min-width:0}
.ff-boxwrap img{width:min(100%,760px);height:auto;
  filter:drop-shadow(0 44px 60px rgba(30,24,19,.22))}
@media (max-width:899px){.ff-boxwrap{padding-bottom:clamp(2rem,5vh,3rem)}}
.promise-time{opacity:.55}
.pot-cap{margin-top:clamp(1rem,2.4vh,1.5rem);text-align:center;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
.cc-fig-pot{flex-direction:column;align-items:center;gap:0}
.cc-fig-pot img{width:clamp(300px,30vw,520px);height:auto;
  filter:drop-shadow(0 40px 60px rgba(30,24,19,.22))}


/* ═════════ THREE STEPS — full-bleed film ═════════ */
/* ═════════ STEP DIVIDER — orientation before the film ═════════ */
.stepdiv{display:grid;justify-items:center;text-align:center;
  gap:clamp(.9rem,2.4vw,1.5rem);
  padding:clamp(3.2rem,10vw,6rem) var(--gut)}
.stepdiv-h{font-weight:300;letter-spacing:-.025em;line-height:1.06;
  font-size:var(--t-display)}
.stepdiv-h b{font-weight:600}
.stepdiv-row{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:center;
  gap:clamp(.55rem,2.2vw,1.3rem);
  font-weight:300;letter-spacing:-.02em;line-height:1.1;
  font-size:var(--t-h2)}
.stepdiv-row span{white-space:nowrap}
.stepdiv-row i{font-style:normal;font-weight:100;opacity:.35;font-size:.75em;
  transform:translateY(-.06em)}
.stepdiv-fine{font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;opacity:.5;margin-top:.3rem}

.filmfull{position:relative;min-height:100svh;display:grid;align-items:end;
  overflow:clip;background:var(--soil);color:var(--clay)}
.filmfull video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmfull-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,15,10,.3),transparent 32%,transparent 55%,rgba(15,10,6,.82))}
.filmfull-foot{position:relative;z-index:2;width:100%;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-block:0 clamp(3.5rem,9vh,6rem);display:grid;gap:clamp(.8rem,2vh,1.2rem);justify-items:start}
.filmfull-h{font-weight:300;letter-spacing:-.025em;line-height:1.05;font-size:var(--t-display)}
.filmfull-h b{font-weight:600;display:block}
.filmfull-time{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.7)}

/* ═════════ THE BELIEF — mission statement ═════════ */
.mission{position:relative;min-height:78svh;display:grid;place-items:center;
  overflow:clip;background:var(--soil);color:var(--clay)}
.mission-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.mission-veil{position:absolute;inset:0;background:rgba(18,12,8,.52)}
.mission-h{position:relative;z-index:2;text-align:center;
  font-weight:300;letter-spacing:-.025em;line-height:1.08;font-size:var(--t-display);
  padding-inline:var(--gut);max-width:16em}
.mission-h b{font-weight:600;display:block}

/* value — the pot beside the argument */
.math-fig-pot{display:flex;justify-content:center}
.math-fig-pot img{width:clamp(240px,24vw,400px);height:auto;
  filter:drop-shadow(0 34px 50px rgba(30,24,19,.2))}

/* ═════════ FIRST KITCHENS — placeholder testimonials ═════════ */
.voices{background:var(--beige);padding:var(--sp) 0}
.voices-row{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.6vw,1.6rem)}
@media (min-width:900px){.voices-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voice{position:relative;overflow:clip;min-height:clamp(320px,46vh,480px)}
.voice video,.voice-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voice-quote{display:grid;align-content:center;justify-items:start;gap:clamp(.6rem,1.6vh,1rem);
  background:var(--clay);padding:clamp(1.8rem,3vw,2.8rem)}
.vq-mark{font-weight:600;font-size:var(--t-display);line-height:.6;color:var(--terra)}
.vq-text{font-weight:400;font-size:var(--t-h3);line-height:1.5;color:var(--char);max-width:24ch}
.vq-who{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}

/* ═════════ COMPOSE — simple CTA ═════════ */
.composecta{background:var(--clay);padding:clamp(4.5rem,10vh,7rem) var(--gut)}
.cc-in{display:grid;justify-items:center;text-align:center;gap:clamp(.8rem,2vh,1.2rem)}
.ccta-h{font-weight:600;letter-spacing:-.02em;line-height:1.05;font-size:var(--t-h2)}
.ccta-p{font-weight:400;font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:38ch}

/* ═════════ REVEAL 2 — contained scene, nothing cropped ═════════
   The type used to sit bottom-left, which is exactly where the four finishing
   oils and Bloomasala stand — the slide was hiding the things it was selling.
   It now sits in the empty wall across the top, and the veil is weighted to the
   top and the left so the whole bottom shelf of product reads clean. */
.reveal2{position:relative;min-height:100svh;display:grid;align-items:start;
  overflow:clip;background:var(--soil);color:var(--clay);padding:0}
.reveal2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.reveal2-veil{position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(12,8,4,.72) 0%,rgba(12,8,4,.52) 26%,rgba(15,10,6,.12) 46%,rgba(15,10,6,0) 58%),
    linear-gradient(to bottom,rgba(12,8,4,.80) 0%,rgba(12,8,4,.46) 24%,
      rgba(15,10,6,.10) 46%,rgba(15,10,6,.02) 68%,rgba(15,10,6,.26) 100%)}
.reveal2-foot{position:relative;z-index:2;width:100%;max-width:min(70rem,62%);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-block:clamp(5.5rem,13vh,8rem) 0;display:grid;gap:clamp(.7rem,1.7vh,1rem);justify-items:start}
/* one size down from --t-display: the block has to clear the front row of
   bottles, so it lives in the upper-left and stays two lines */
.reveal2-h{line-height:1.1}
@media (max-width:768px){.reveal2-bg{object-position:60% 42%}}
.reveal2-in{width:100%;display:grid;gap:clamp(2rem,5vh,3rem);align-items:center;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
@media (min-width:900px){.reveal2-in{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2.5rem,5vw,5rem)}}
.reveal2-copy{display:grid;gap:clamp(.9rem,2.2vh,1.4rem);justify-items:start}
.reveal2-h{font-weight:300;letter-spacing:-.025em;line-height:1.08;font-size:var(--t-display)}
.reveal2-h b{font-weight:600;display:block}
.reveal2-sub{font-size:var(--t-body);opacity:.62;margin-top:-.35rem}
.reveal2-fig{margin:0;min-width:0}
.reveal2-fig img{width:100%;height:auto;display:block;
  box-shadow:0 40px 90px rgba(0,0,0,.45)}

/* ═════════ ACTS — the OG name treatment ═════════ */
@media (max-width:768px){.act .th-word{font-size:clamp(2.8rem,15vw,5rem)}
  .act .th-name{bottom:.9rem}}

/* menu — nutrition promoted */
.dish-nut{font-size:var(--t-chrome);font-weight:700;letter-spacing:.1em;opacity:1;
  color:var(--char);margin-top:.3rem}

/* ═════════ EMAIL CAPTURE — corner card ═════════ */
.cap-veil{position:fixed;inset:0;z-index:69;background:rgba(18,12,8,.55);
  opacity:0;transition:opacity .5s var(--ease)}
.cap-veil.on{opacity:1}
.cap-veil[hidden]{display:none}
.cap-pop{position:fixed;z-index:70;left:50%;top:50%;
  width:min(430px,calc(100vw - 2rem));background:var(--soil);color:var(--clay);
  padding:clamp(1.8rem,3vw,2.6rem);display:grid;gap:.8rem;
  box-shadow:0 40px 90px rgba(15,10,6,.5);
  opacity:0;transform:translate(-50%,-50%) translateY(16px);
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.cap-pop.on{opacity:1;transform:translate(-50%,-50%)}
.cap-pop[hidden]{display:none}
html.rm .cap-pop{transition:none}
.cap-x{position:absolute;top:.5rem;right:.7rem;font-size:var(--t-h3);line-height:1;
  color:rgba(250,248,242,.55);padding:.3rem;transition:color .3s}
.cap-x:hover{color:var(--clay)}
.cap-h{font-weight:300;letter-spacing:-.02em;font-size:var(--t-h2);line-height:1.15}
.cap-h b{font-weight:600;display:block}
.cap-p{font-weight:400;font-size:var(--t-chrome);letter-spacing:.01em;line-height:1.6;
  color:rgba(250,248,242,.75);max-width:38ch}
.cap-fine{font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(250,248,242,.5)}
.cap-fine b{color:var(--spiced)}
.cap-form{display:flex;gap:.6rem;margin-top:.3rem}
.cap-in{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid rgba(250,248,242,.35);
  color:var(--clay);font:inherit;font-size:1rem;padding:.5em 0;outline:none;
  transition:border-color .3s}
/* 16px floor stops iOS Safari zooming the page when the field is focused */
.cap-in::placeholder{color:rgba(250,248,242,.4)}
.cap-in:focus{border-color:var(--spiced)}
.cap-btn{flex:0 0 auto;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--t-micro);color:var(--soil);background:var(--clay);border-radius:999px;
  padding:.8em 1.5em;transition:transform .35s var(--ease),background .3s}
.cap-btn:hover{background:#fff;transform:translateY(-1px)}
.cap-done{display:grid;gap:1rem;justify-items:start}
.cap-done[hidden],.cap-form[hidden],.cap-fine[hidden],.cap-p[hidden],.cap-err[hidden]{display:none}
.cap-err{font-size:var(--t-chrome);line-height:1.55;color:var(--spiced)}
.cap-err a{text-decoration:underline;text-underline-offset:2px}
.cap-btn:disabled{opacity:.6;cursor:default;transform:none}
.cap-done-act{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.cap-copy{font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--t-micro);color:var(--clay);padding:.95em 1.7em;border-radius:999px;
  border:1px solid rgba(250,248,242,.45);transition:border-color .3s,background .3s}
.cap-copy:hover{border-color:var(--clay);background:rgba(250,248,242,.08)}
.cap-done p{font-weight:600;font-size:var(--t-body);line-height:1.55;color:var(--clay)}
.cap-done b{color:var(--spiced)}

/* ═════════ THE EQUATION — from the OG build ═════════ */
.syseq{background:var(--soil);color:var(--clay);padding:clamp(4.5rem,10vh,7rem) 0 clamp(4rem,9vh,6rem);
  display:grid;justify-items:center;gap:clamp(2.2rem,5vh,3.4rem);overflow:clip}
.syseq-logo{width:clamp(110px,10vw,150px);height:auto;opacity:.95}
.syseq-h{display:grid;justify-items:center;gap:clamp(.4rem,1.2vh,.8rem);text-align:center;
  font-weight:300;letter-spacing:-.02em;line-height:1.08;font-size:var(--t-display);
  padding-inline:var(--gut)}
.syseq-h i{font-style:normal;font-weight:400;color:var(--terra);font-size:.55em;line-height:1}
.syseq-stage{width:100%;max-width:var(--maxw);padding-inline:var(--gut);
  display:flex;justify-content:center;align-items:center;
  gap:clamp(1.4rem,3.5vw,4rem);flex-wrap:wrap}
.syseq-pot img{width:clamp(240px,22vw,360px);height:auto;
  filter:drop-shadow(0 34px 50px rgba(0,0,0,.5))}
.syseq-plus{font-style:normal;font-weight:400;color:var(--terra);
  font-size:var(--t-h2);line-height:1}
.syseq-ing{display:flex;align-items:flex-end;gap:clamp(.5rem,1vw,1rem)}
.syseq-ing img{height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
.syseq-ing .si-a{width:clamp(90px,8.5vw,140px)}
.syseq-ing .si-b{width:clamp(84px,8vw,130px)}
.syseq-ing .si-c{width:clamp(26px,2.4vw,38px)}
.syseq-ing .si-d{width:clamp(40px,3.6vw,56px)}
/* the stage was a wrapping flex row: between ~1024 and ~1600 the right-hand
   descriptors dropped under the pot. Grid, so the equation can never break. */
@media (min-width:1024px){
  .syseq-stage{display:grid;flex-wrap:nowrap;align-items:center;justify-items:center;
    grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);
    gap:clamp(1.2rem,2.6vw,4rem)}
  .syseq-r{justify-self:start}
}
.syseq-facts{display:grid;gap:clamp(1.6rem,4vh,2.6rem);align-content:center;min-width:0}
.sf{position:relative;max-width:26ch}
.sf b{display:block;font-weight:700;font-size:var(--t-h3);letter-spacing:-.01em;line-height:1.3}
.sf p{margin-top:.35rem;font-weight:400;font-size:var(--t-body);line-height:1.55;
  color:rgba(250,248,242,.66)}
.syseq-l{justify-items:end;text-align:right;justify-self:end}
.syseq-l .sf::after{content:"";position:absolute;top:.7em;right:calc(-1 * clamp(1.2rem,2.4vw,2.6rem));
  width:clamp(.9rem,1.8vw,2rem);height:1px;background:rgba(250,248,242,.35)}
.syseq-r .sf::before{content:"";position:absolute;top:.7em;left:calc(-1 * clamp(1.2rem,2.4vw,2.6rem));
  width:clamp(.9rem,1.8vw,2rem);height:1px;background:rgba(250,248,242,.35)}
.syseq-cap{font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,242,.55)}

@media (max-width:1023px){
  .syseq-stage{grid-template-columns:1fr;justify-items:center;gap:clamp(1.6rem,4vh,2.4rem)}
  .syseq-l,.syseq-r{justify-items:start;text-align:left;justify-self:stretch;
    grid-template-columns:1fr 1fr;gap:1.4rem}
  .syseq-l .sf::after,.syseq-r .sf::before{display:none}
  .sf{max-width:none}
  .syseq-plus{display:none}
}

/* ═════════ NAV — mobile menu ═════════ */
.nav-burger{display:none;position:relative;z-index:80;width:34px;height:26px;
  flex-direction:column;justify-content:center;gap:6px;padding:0}
.nav-burger span{display:block;width:26px;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.navpanel{position:fixed;inset:0;z-index:75;background:var(--soil);color:var(--clay);
  display:grid;align-content:center;justify-items:center;gap:clamp(1.4rem,4vh,2.2rem);
  opacity:0;transition:opacity .4s var(--ease)}
.navpanel.on{opacity:1}
.navpanel[hidden]{display:none}
.navpanel a{font-size:var(--t-h3);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.navpanel .np-cta{margin-top:.8rem;background:var(--terra);color:var(--clay);
  padding:.9em 2em;border-radius:999px;font-size:var(--t-chrome);letter-spacing:.16em}
@media (max-width:1024px){
  .nav-burger{display:flex}
  .nav-links a:not(.nav-cta){display:none}
  .nav{gap:1rem}
  .nav-links{order:3}
}
html.nav-open{overflow:hidden}
/* the nav sits in its own stacking context — lift it above the open panel
   so the burger stays tappable as the close control */
html.nav-open .nav{z-index:80}

/* reveal2 — order button + fine print */
.reveal2-buy{display:flex;align-items:center;gap:.7rem .9rem;flex-wrap:wrap;margin-top:.5rem}
.reveal2-buy .btn-order,.reveal2-buy .btn-quiet{padding:.95em 2em}
.reveal2-buy .btn-quiet{border-color:rgba(250,248,242,.45);backdrop-filter:blur(2px)}
.reveal2-buy .btn-quiet:hover{border-color:var(--clay);background:rgba(250,248,242,.08)}
.reveal2-was{font-weight:400;font-size:var(--t-lead);opacity:.45;text-decoration-thickness:1px}
.reveal2-fine{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(250,248,242,.62)}

/* ── VOICES — the quiet band along the bottom of the First Fire frame ──
   Stacked in one grid cell so the block never changes height as lines swap. */
/* Phones first: the type sits under the photograph, so the quote is simply the
   last block in that stack. */
.vox{display:grid;width:100%;max-width:38ch;
  margin-top:clamp(1.9rem,5vh,2.8rem);
  padding-left:clamp(.9rem,1.6vw,1.3rem);border-left:1px solid rgba(250,248,242,.3);
  padding-inline-start:clamp(.9rem,1.6vw,1.3rem)}
/* On the full-bleed frame it lives IN the picture, top-right, mirroring the
   headline across the diagonal. Absolute, so the column never grows and the
   front row of bottles is never pushed into. */
@media (min-width:769px){
  .vox{position:absolute;z-index:2;margin-top:0;text-align:right;isolation:isolate;
    right:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
    top:clamp(7.5rem,19vh,11rem);width:min(30ch,32vw);
    padding-inline-start:0;padding-inline-end:clamp(.9rem,1.6vw,1.3rem);
    border-left:0;border-right:1px solid rgba(250,248,242,.32)}
  /* a local pool of shade so the line reads over the protein bags without a
     visible plate behind it — falls off to nothing well before the edges */
  .vox::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-2.4rem -2rem -2.2rem -6rem;
    background:radial-gradient(115% 105% at 92% 45%,
      rgba(10,6,3,.80) 0%,rgba(10,6,3,.62) 34%,rgba(10,6,3,.24) 62%,rgba(10,6,3,0) 82%)}
}
.vox-q{grid-area:1/1;margin:0;opacity:0;transform:translateY(7px);
  transition:opacity .72s var(--ease),transform .72s var(--ease);pointer-events:none}
.vox-q.on{opacity:1;transform:none}
.vox-q p{font-weight:400;font-size:var(--t-body);line-height:1.5;color:rgba(250,248,242,.9)}
.vox-q cite{display:block;margin-top:.5rem;font-style:normal;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,242,.55)}


/* equation — collapsible facts */
.sf-h{display:flex;align-items:baseline;gap:.6rem;cursor:pointer;padding:0;
  background:none;border:0;font:inherit;color:inherit;text-align:inherit}
.syseq-l .sf-h{flex-direction:row-reverse}
.sf-x{position:relative;flex:0 0 auto;width:.62em;height:.62em;opacity:.5;
  transition:opacity .3s,transform .45s var(--ease)}
.sf-x::before,.sf-x::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor}
.sf-x::before{width:100%;height:1px}
.sf-x::after{width:1px;height:100%;transition:transform .45s var(--ease)}
.sf-h:hover .sf-x{opacity:1}
.sf-h[aria-expanded="true"] .sf-x::after{transform:scaleY(0)}
.sf-d{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;margin-top:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s,margin-top .5s var(--ease)}
.sf-d > p{min-height:0}
.sf-d.open{grid-template-rows:1fr;opacity:1;margin-top:.35rem}
html.rm .sf-d{grid-template-rows:1fr;opacity:1;margin-top:.35rem}

/* ═════════ ACTS — the first build's theatre ═════════ */
.act{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:0;
  position:relative;overflow:clip;min-height:100svh;
  padding:clamp(4.5rem,10vh,6.5rem) 0 clamp(4rem,9vh,6rem);padding-inline:0;
  background:var(--thbg);color:var(--thfg);transition:background 1s var(--ease)}
.th-step{position:absolute;top:clamp(4.6rem,9vh,6rem);z-index:4;
  left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  color:var(--thfg);opacity:.85}
.act .th-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;white-space:nowrap;user-select:none;
  font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:var(--t-giant);color:var(--thfg);opacity:.3;
  transition:opacity .5s}
.act .th-word.swap{opacity:0}
.act .th-row{position:relative;z-index:2;height:auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,3vw,3.4rem);padding:clamp(3rem,9vh,6rem) var(--gut)}
.act .th-item{--prod:clamp(220px,36vh,380px);opacity:.74;
  transform:scale(.92) translateY(1.2vh);
  transition:transform .8s var(--ease),opacity .6s}
.act .th-item:hover{opacity:.85}
.act .th-item.is-active{opacity:1;transform:scale(1.08) translateY(-1vh);z-index:3}
.act .th-item:hover{opacity:1}
.th-rail{position:absolute;z-index:4;bottom:clamp(2.4rem,6vh,3.6rem);
  right:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  text-align:right;display:grid;gap:.25rem;max-width:min(46ch,64vw)}
.th-name{font-weight:700;letter-spacing:-.01em;line-height:1.1;
  font-size:var(--t-h2);color:var(--thfg)}
.th-ing{font-weight:400;font-size:var(--t-body);color:var(--thfg);opacity:.85}
.th-nut{margin-top:.3rem;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--thfg)}
.th-net{font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--thfg);opacity:.6}
.th-count{position:absolute;z-index:4;bottom:clamp(2.4rem,6vh,3.6rem);
  left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;color:var(--thfg);opacity:.6}
.th-count .th-n{font-size:var(--t-h3);font-weight:700;opacity:1}
@media (max-width:768px){
  .act{min-height:0;padding:clamp(3.4rem,8vh,4.6rem) 0 clamp(7rem,16vh,9rem)}
  .act .th-word{top:30%;font-size:clamp(2.8rem,15vw,5rem);white-space:normal;text-align:center;width:92vw}
  .act .th-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;padding:clamp(2rem,6vh,3rem) var(--gut)}
  .act .th-row::-webkit-scrollbar{display:none}
  .act .th-item{--prod:clamp(120px,22svh,190px);scroll-snap-align:center}
  .act .th-item.is-active{transform:scale(1.14)}
  .th-rail{left:var(--gut);right:var(--gut);text-align:left;max-width:none;
    bottom:clamp(2rem,5vh,3rem)}
  .th-count{display:none}
}

/* product band — runs straight into the buy slide */
.shelfband + .offer,.shelfband + section{margin-top:0}
.shelfband .fire-shelf{border-top:0;padding:clamp(2rem,5vh,3.2rem) 0}

/* the capture card lives bottom-left; the act counter steps aside while it's up */
html.cap-on .th-count{opacity:0;transition:opacity .4s}
html.cap-on{overflow:hidden}

/* beat 02 — the line leads, no headline above it */
.cb-label-sub{font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,242,.55);margin-top:-.2rem}
.cb-keep-d{color:var(--clay)}
.cb-prov{margin-top:clamp(.8rem,2vh,1.2rem);text-align:center;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.5)}


/* ═════════ THE BUY MOMENT ═════════ */
.buy{background:var(--soil);color:var(--clay);padding:clamp(4.5rem,10vh,7rem) 0}
.buy-in{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,6vh,4rem);align-items:center;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
@media (min-width:900px){
  .buy-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,6vw,6rem)}
}
.buy-copy{display:grid;gap:clamp(.8rem,2vh,1.2rem);justify-items:start}
.buy-h{font-weight:300;letter-spacing:-.025em;line-height:1.05;font-size:var(--t-display)}
.buy-h b{font-weight:600;display:block}
.buy .ff-list{max-width:24rem;border-top-color:rgba(250,248,242,.2)}
.buy .ff-list li{border-bottom-color:rgba(250,248,242,.2)}
.buy-act{display:flex;align-items:center;gap:1rem clamp(1rem,2.6vw,1.6rem);flex-wrap:wrap;margin-top:.4rem}
.buy-price{display:inline-flex;align-items:baseline;gap:.5em;font-size:var(--t-lead)}
.buy-price s{font-weight:400;opacity:.45;text-decoration-thickness:1px}
.buy-price b{font-weight:700}
.buy-facts{list-style:none;display:grid;gap:.4rem;margin-top:.6rem}
.buy-facts li{font-size:var(--t-micro);font-weight:500;letter-spacing:.05em;line-height:1.6;
  color:rgba(250,248,242,.6);padding-left:1.1em;position:relative}
.buy-facts li::before{content:"—";position:absolute;left:0;color:rgba(250,248,242,.38)}
/* the same provenance claim, restated where the customer is actually deciding */
.buy-prov{margin-top:clamp(.9rem,2.2vh,1.4rem);max-width:28ch;
  padding-top:clamp(.8rem,1.8vh,1.1rem);border-top:1px solid rgba(250,248,242,.2);
  font-weight:400;font-size:var(--t-body);line-height:1.6;color:rgba(250,248,242,.66)}
/* Both photographs are composited onto #1E1813 — the section ground — so they
   carry no plate edge and need no cutout, no vignette and no drop shadow.
   The open flat-lay leads: it is the only image that shows every single thing
   in the box. The closed pair follows, smaller, as the arrival shot. */
.buy-figs{display:grid;gap:clamp(1.6rem,4vh,2.6rem);min-width:0;justify-items:center}
.buy-ext,.buy-int{width:100%;margin:0}
.buy-int img{width:100%;max-width:900px;height:auto;display:block;margin-inline:auto}
.buy-ext img{width:100%;max-width:520px;height:auto;display:block;margin-inline:auto}
.buy-cap{margin-top:clamp(.7rem,1.8vh,1.1rem);text-align:center;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.55)}
@media (min-width:900px){
  .buy-figs{gap:clamp(1.2rem,3vh,2rem)}
  .buy-ext img{max-width:440px}
}
/* on a phone the flat-lay is the argument — let it use the whole screen,
   otherwise the pouch labels are too small to read as five distinct dishes */
@media (max-width:640px){
  .buy-int{width:100vw;margin-inline:calc(50% - 50vw)}
  .buy-int img{max-width:none}
  .buy-cap{padding-inline:var(--gut)}
}

/* beat 02 — the line leads, no headline above it */
.cb-label-sub{font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,242,.55);margin-top:-.2rem}
.cb-keep-d{color:var(--clay)}
.cb-prov{margin-top:clamp(.8rem,2vh,1.2rem);text-align:center;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.5)}

/* ═════════ FIRST FIRE on phones ═════════
   The scene is 1.88:1. Covering a 0.46:1 viewport shows only ~25% of its width —
   the pot falls off the edge and the "whole system" reads as two random pouches.
   Until a portrait crop exists, show the photograph whole and set the type beneath it. */
@media (max-width:768px){
  /* Two rows: the photograph, then the type. No top padding — the black band
     above the picture was dead space. The quote rides the bottom of the
     photograph rather than adding a block underneath the fine print. */
  .reveal2{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);
    padding-block:0 clamp(2.6rem,7vh,3.6rem)}
  .reveal2-bg{grid-area:1/1;position:relative;inset:auto;
    width:100%;height:auto;object-fit:contain}
  .reveal2-veil{grid-area:1/1;display:block;pointer-events:none;
    background:linear-gradient(to bottom,rgba(12,8,4,0) 30%,rgba(12,8,4,.30) 46%,
      rgba(12,8,4,.72) 66%,rgba(12,8,4,.93) 84%,var(--soil) 100%)}
  .reveal2-foot{grid-area:2/1;padding-block:clamp(1.6rem,4vh,2.4rem) 0;max-width:none}
  .reveal2-buy{gap:.9rem}
  .reveal2-buy .btn-order,.reveal2-buy .btn-quiet{padding:1em 1.9em}
  .vox{grid-area:1/1;align-self:end;z-index:2;position:relative;
    margin:0 0 clamp(.7rem,2.4vw,1.1rem);max-width:none;
    padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
    padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
    border-left:0}
  .vox-q p{font-size:var(--t-body);line-height:1.38;
    text-shadow:0 1px 14px rgba(0,0,0,.6)}
  .vox-q cite{margin-top:.3rem;color:rgba(250,248,242,.7)}
}

/* ═════════ WHY IT WORKS — the value proposition, one screen ═════════
   Numerals do the persuading; the food does the wanting. Terracotta stays
   reserved for Order, so the numbers take spiced on soil. */
.why{background:var(--soil);color:var(--clay);padding:clamp(4.5rem,11vh,7.5rem) 0}
.why-in{display:grid;gap:clamp(2rem,5vh,3.2rem);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.why-head{display:grid;gap:clamp(.7rem,1.8vh,1.1rem);justify-items:start}
.why-h{font-weight:300;letter-spacing:-.025em;line-height:1.05;font-size:var(--t-display);max-width:16em}
.why-h b{font-weight:600;display:block}

.why-fig{margin:0;min-width:0;overflow:clip;background:#241c15}
.why-fig video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}

.why-grid{list-style:none;display:grid;grid-template-columns:1fr;min-width:0}
.wc{position:relative;display:grid;gap:.3rem;align-content:start;
  padding:clamp(1.4rem,3.4vh,2.1rem) 0;border-top:1px solid rgba(250,248,242,.2)}
.wc-n{font-weight:300;letter-spacing:-.035em;line-height:.92;
  font-size:var(--t-stat);color:var(--spiced)}
.wc-k{font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-top:.35rem}
.wc-p{margin-top:.5rem;font-weight:400;font-size:var(--t-body);line-height:1.6;
  color:rgba(250,248,242,.66);max-width:34ch}

.why-foot{padding-top:clamp(1.4rem,3.4vh,2.2rem);border-top:1px solid rgba(250,248,242,.2)}
.why-close{font-weight:400;font-size:var(--t-lead);line-height:1.6;
  color:rgba(250,248,242,.85);max-width:62ch;margin:0}

@media (min-width:900px){
  .why-in{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-areas:"head head" "fig grid" "close close";
    column-gap:clamp(2.5rem,5.5vw,5.5rem)}
  .why-head{grid-area:head;max-width:none}
  .why-fig{grid-area:fig;align-self:stretch}
  .why-fig video{height:100%;aspect-ratio:auto}
  .why-grid{grid-area:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(1.8rem,3.5vw,3.4rem)}
  .wc:nth-child(-n+2){border-top:0;padding-top:0}
  .why-foot{grid-area:close}
}
@media (max-width:899px){
  .why-fig video{aspect-ratio:16/10}
  .wc:first-child{border-top:0;padding-top:0}
}

/* ═════════ RUN YOUR WEEK — the value proposition as an instrument ═════════
   One control drives everything: three live figures and a mosaic of the year,
   one dot per dinner, coloured by the five bases. Spiced does the talking so
   terracotta stays reserved for Order. */
.week{background:var(--soil);color:var(--clay);padding:clamp(4.5rem,11vh,7.5rem) 0}
.week-in{display:grid;gap:clamp(2rem,5vh,3.2rem);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.week-head{display:grid;gap:clamp(.7rem,1.8vh,1.1rem);justify-items:start}
.week-h{font-weight:300;letter-spacing:-.025em;line-height:1.04;font-size:var(--t-display);max-width:14em}
.week-h b{font-weight:600;display:block}

/* — the dial — */
.week-dial{display:grid;gap:clamp(.9rem,2.2vh,1.4rem);max-width:44rem;width:100%}
.wd-read{display:flex;align-items:baseline;gap:.7rem}
.wd-n{font-weight:300;letter-spacing:-.04em;line-height:.85;
  font-size:var(--t-giant);color:var(--spiced);
  font-variant-numeric:tabular-nums}
.wd-l{font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,242,.7)}
.wd-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;
  cursor:pointer;display:block}
.wd-range:focus{outline:none}
.wd-range::-webkit-slider-runnable-track{height:2px;background:rgba(250,248,242,.25)}
.wd-range::-moz-range-track{height:2px;background:rgba(250,248,242,.25)}
.wd-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-12px;border-radius:50%;background:var(--terra);
  border:0;box-shadow:0 6px 18px rgba(235,85,55,.45);
  transition:transform .3s var(--ease)}
.wd-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--terra);
  border:0;box-shadow:0 6px 18px rgba(235,85,55,.45)}
.wd-range:hover::-webkit-slider-thumb,.wd-range:focus-visible::-webkit-slider-thumb{transform:scale(1.14)}
.wd-ticks{list-style:none;display:flex;justify-content:space-between;margin-top:-.4rem}
.wd-ticks li{font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
  color:rgba(250,248,242,.4)}

/* — the three live figures — */
.week-out{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3.4vh,2.2rem);
  border-top:1px solid rgba(250,248,242,.2);padding-top:clamp(1.6rem,4vh,2.4rem)}
@media (min-width:820px){.week-out{grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.8rem,3.5vw,3.4rem)}}
.wo{display:grid;gap:.2rem;align-content:start}
.wo-n{font-weight:300;letter-spacing:-.035em;line-height:.95;
  font-size:var(--t-stat);color:var(--clay);
  font-variant-numeric:tabular-nums}
.wo:first-child .wo-n{color:var(--spiced)}
.wo-k{font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-top:.4rem}
/* the label is the toggle now; the reasoning waits behind it */
.wo-h{margin-top:.15rem}
.wo-h .sf-x{opacity:.42}
.wo .sf-d,.week-how .sf-d{max-width:34ch}
.week-how{border-top:1px solid rgba(250,248,242,.18);padding-top:clamp(1.1rem,2.8vh,1.6rem)}
.week-how .sf-d{max-width:52ch}
.week-how .wo-p{margin-top:0;max-width:none}
.wo-p{font-weight:400;font-size:var(--t-body);line-height:1.6;
  color:rgba(250,248,242,.6);max-width:32ch}

/* — the year, drawn — */
.week-year{margin:0;display:grid;gap:clamp(.9rem,2.2vh,1.3rem);
  border-top:1px solid rgba(250,248,242,.2);padding-top:clamp(1.6rem,4vh,2.4rem)}
.wy-grid{display:grid;grid-template-columns:repeat(52,1fr);
  gap:clamp(2px,.32vw,6px);width:100%}
.wy-d{aspect-ratio:1;border-radius:50%;background:rgba(250,248,242,.09);
  transform:scale(.55);transition:transform .45s var(--ease),background-color .45s var(--ease)}
.wy-d.on{transform:scale(1);background:var(--dc)}
html.rm .wy-d{transition:none}
.wy-cap{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,242,.5)}
@media (max-width:820px){.wy-grid{grid-template-columns:repeat(26,1fr)}}

/* — close — */