/* Arummi Milk, "Goodness in Motion". Concept: every section is a pour (movement), a pack (product) or a cashew (shape). Loud in the hero and closer, structured where the visitor reads or chooses. Contrast table: build-plan.md. */
/* ===== Tokens ===== */
:root{
  --paper:#FFFBF3; --cream:#F6EBD9; --ink:#1E1A17; --muted:#5C534B;
  --leaf:#2F7D4F; --leaf-deep:#1F5C38; --leaf-text:#25623F;
  --sunny:#F2C230; --tan:#C98F4E; --cocoa:#5A3325; --coral:#E86A4A;
  /* loud set colours: image fills only, never text */
  --pink:#F7A8C4; --tomato:#E8432E; --mint:#A9D9B8; --sky:#8FC7F0; --peach:#F6C7A6;
  --on-leaf:#FFFBF3;
  /* real carton colours, sampled from the client photos */
  --pk-classic:#E3D8BE; --pk-classic-ink:#A5622F; --pk-barista:#7E716D; --pk-choc:#7A432F; --pk-pill:#2F7D4F;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --sec:clamp(72px,10vw,128px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .3  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --tex-cashew:radial-gradient(40% 50% at 30% 25%,rgb(255 240 210/.7),transparent 70%),radial-gradient(50% 60% at 75% 80%,rgb(201 143 78/.55),transparent 70%),linear-gradient(160deg,#E8C99B,#B98245);
  --tex-milk:radial-gradient(60% 50% at 30% 30%,#fff,transparent 70%),radial-gradient(50% 50% at 75% 70%,rgb(246 235 217/.9),transparent 70%),conic-gradient(from 40deg at 55% 50%,#FFFBF3,#F6EBD9,#fff,#EFDDC0,#FFFBF3);
  --tex-pour:radial-gradient(45% 55% at 50% 20%,rgb(255 255 255/.8),transparent 70%),linear-gradient(180deg,#F6EBD9,#D9BE92 60%,#7a4a2c);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-variation-settings:"INFM" 100,"BNCE" 25;background:var(--paper);color:var(--ink);font:400 clamp(1rem,1.1vw,1.125rem)/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #1E1A17;outline-offset:3px;box-shadow:0 0 0 6px #F2C230;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sunny);color:var(--ink);padding:12px 18px;font-weight:700;border-radius:999px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Placeholder marker: dashed outline plus TBC. Real content replaces it. */
.ph{outline:1.5px dashed currentColor;outline-offset:3px;border-radius:3px}
.ph::after{content:" TBC";font:700 .6em/1 var(--body);letter-spacing:.08em;opacity:.8;vertical-align:super}

/* Type */
.h2{font:800 clamp(2.5rem,7.2vw,6.75rem)/.95 var(--display);text-transform:uppercase}
.h2 .thin{font-weight:500}
.h2 em{font-style:normal;color:var(--leaf-text)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.375rem);max-width:34ch}
.wrap{padding:var(--sec) var(--gut);max-width:1480px;margin:0 auto}
section{position:relative}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:56px;padding:0 28px;border-radius:999px;font:700 1.0625rem/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn--sun{background:var(--sunny);color:var(--ink)}
.btn--leaf{background:var(--leaf);color:var(--on-leaf)}
.btn--line{border-color:currentColor;background:transparent}
.btn--ink{background:var(--ink);color:var(--paper)}
.link{font-weight:700;text-underline-offset:.3em;text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transition:none;transform:none}}

/* ===== Header ===== */
.hdr{position:absolute;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);color:var(--on-leaf)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 1.75rem/1 var(--display);}
.logo img{width:56px;height:56px;border-radius:50%;display:block}
.nav{display:flex;gap:28px;font-weight:700}
.nav a{text-decoration:none;padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--sunny)}
@media (max-width:520px){.logo img{width:44px;height:44px}.hdr .btn{min-height:42px;padding:0 14px;font-size:.8125rem}}
@media (max-width:860px){.nav{display:none}.hdr .btn{min-height:46px;padding:0 18px;font-size:.9375rem}}

/* ===== 01 Hero (accent / Leaf) ===== */
.hero{background:var(--leaf);color:var(--on-leaf);height:100svh;min-height:640px}
.hero.is-scrub{height:240vh}
.hero__sticky{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 70% at 72% 55%,rgb(255 255 255/.16),transparent 70%),radial-gradient(40% 50% at 8% 100%,rgb(0 0 0/.18),transparent 70%)}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.22;mix-blend-mode:overlay}
.hero__blob{position:absolute;fill:var(--leaf-deep);opacity:.55}
.hero__blob--a{width:min(46vw,640px);left:-8vw;bottom:-6vw;transform:rotate(-14deg)}
.hero__blob--b{width:min(30vw,420px);right:6vw;top:10vh;transform:rotate(28deg);fill:var(--sunny);opacity:.9}
.hero__type{position:absolute;inset:0;z-index:3;padding:clamp(96px,17vh,150px) var(--gut) 120px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.hero__h1,.hero__beat{font:800 clamp(3rem,min(11.2vw,18.5vh),11.5rem)/.92 var(--display);text-transform:uppercase;display:block}
.hero__h1 .a{display:block;font-weight:500;font-size:.66em}
.hero__h1 .b{display:block}
.hero__h1 .c{display:block;color:var(--sunny)}
.hero__h1,.hero__beat{will-change:transform,opacity}
.hero__beat{position:absolute;left:var(--gut);top:clamp(130px,22vh,200px);opacity:0;font-size:clamp(2.8rem,min(7vw,10.5vh),10rem)}   /* four lines must clear the hero buttons below */
.hero__beat span{display:block}
.hero__beat .t{font-weight:500}
.hero__beat .s{color:var(--sunny)}
.hero__lower{position:relative;z-index:4;pointer-events:auto;max-width:min(560px,92vw);display:grid;gap:22px}
.hero__sub{font-size:clamp(1.125rem,1.6vw,1.5rem);max-width:30ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.stage{position:absolute;inset:0;z-index:2;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.stage:active{cursor:grabbing}
.stage__fallback{position:absolute;z-index:2;right:12vw;bottom:96px;display:grid;place-items:end center;pointer-events:none}
.hero.is-live .stage__fallback,.closer.is-live .stage__fallback,.is-rig .stage__fallback{display:none}
.stage__hint{font:700 .8125rem/1.3 var(--body);letter-spacing:.04em;background:rgb(0 0 0/.28);padding:8px 12px;border-radius:999px;color:var(--on-leaf)}
.marq{position:absolute;z-index:5;left:0;right:0;bottom:0;height:56px;overflow:hidden;background:var(--sunny);color:var(--ink);display:flex;align-items:center}
.marq__t{display:flex;flex:none;gap:36px;padding-right:36px;font:800 1.25rem/1 var(--display);text-transform:uppercase;white-space:nowrap;animation:marq 30s linear infinite}
.marq__t span{display:inline-flex;align-items:center;gap:36px}
.marq__t svg{width:26px;height:26px;fill:var(--leaf-deep)}
@keyframes marq{to{transform:translateX(-100%)}}
.marq.is-off .marq__t{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}
@media (max-width:700px){
  .hero{min-height:760px}.hero__sticky{min-height:760px}
  .hero__type{padding-top:92px}
  .hero__h1,.hero__beat{font-size:clamp(2.6rem,14.5vw,6rem)}
  .hero__lower{max-width:100%;gap:16px}
}

/* ===== CSS 3D pack (showcase, finder, fallbacks). Colours follow the real cartons: Classic cream, Barista grey-taupe, Chocolate brown ===== */
.pack{--w:104px;--h:calc(var(--w) * 2);--d:calc(var(--w) * .73);--base:var(--pk-classic);--ink-p:var(--pk-classic-ink);--mark:var(--ink);
  width:var(--w);height:var(--h);perspective:900px;font-size:calc(var(--w) * .1);flex:none}
.pack__box{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(-3deg);transition:transform .7s var(--ease)}
.f{position:absolute;display:block;margin:0;overflow:hidden;backface-visibility:hidden}
.pack .front{inset:0;transform:translateZ(calc(var(--d) / 2));background:var(--base);color:var(--ink-p);display:grid;grid-template-rows:auto auto 1fr auto;justify-items:center;text-align:center;padding:1.7em 0 1.5em;box-shadow:inset 0 0 0 .1em rgb(0 0 0/.06)}
.pack .front .pk-mark{font:700 1.55em/1 var(--body);letter-spacing:-.03em;color:var(--mark)}
.pack .front .pk-title{font:800 2.15em/.9 var(--pack);letter-spacing:-.025em;text-transform:uppercase;margin-top:.55em}
.pack .front svg{width:66%;align-self:center;fill:#D9A35E;transform:rotate(-18deg);filter:drop-shadow(0 .15em .15em rgb(60 30 10/.3))}
.pack .front em{font-style:normal;font:800 .86em/1 var(--body);background:var(--pk-pill);color:#fff;padding:.55em 1.1em;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}
.pack .side{left:calc(50% - var(--d) / 2);top:0;width:var(--d);height:100%;transform:rotateY(90deg) translateZ(calc(var(--w) / 2));background:linear-gradient(90deg,color-mix(in srgb,var(--base),#000 18%),color-mix(in srgb,var(--base),#000 8%))}
.pack .side::after{content:"Arummi";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);font:700 2.2em/1 var(--body);color:var(--mark);letter-spacing:-.03em}
.pack .top{left:0;top:calc(50% - var(--d) / 2);width:100%;height:var(--d);transform:rotateX(90deg) translateZ(calc(var(--h) / 2));background:color-mix(in srgb,var(--base),#fff 30%)}
.pack__shadow{position:absolute;left:8%;right:-30%;bottom:-6%;height:10%;background:radial-gradient(closest-side,rgb(0 0 0/.35),transparent);filter:blur(2px);transform:translateZ(-1px)}
.pack--barista{--base:var(--pk-barista);--ink-p:#fff;--mark:#fff}
.pack--choc{--base:var(--pk-choc);--ink-p:var(--cream);--mark:#fff}
@media (prefers-reduced-motion:reduce){.pack__box{transition:none}}

/* ===== 02 Find your Arummi (paper) ===== */
.find{background:var(--paper)}
.find__top{display:block}
.find__top .lead{margin-top:20px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;font:700 .9375rem/1 var(--body);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.note-ex{margin-top:18px;font-size:.875rem;color:var(--muted)}
@media (max-width:900px){.find__top{grid-template-columns:1fr}}

/* ===== 03 Meet Arummi (dark / Cocoa) ===== */
.story{background:var(--cocoa);color:var(--paper);overflow:hidden}
.story__ghost{position:absolute;left:-2vw;top:4%;font:800 clamp(8rem,32vw,34rem)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgb(246 235 217/.18);text-transform:uppercase;pointer-events:none;user-select:none;white-space:nowrap}
.story .wrap{position:relative}
.story .h2{max-width:11ch;margin-top:16px}
.story .h2 em{color:var(--sunny)}
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,6vw,80px);align-items:center}
.story__chapters{display:grid;gap:4px;margin:28px 0 0}
/* Chapters pick the photo in the deck. The whole row is the button (stretched ::after). */
.chap{position:relative;padding:20px 56px 20px 18px;margin-inline:-18px;border-radius:22px;border-top:1.5px solid rgb(246 235 217/.3);transition:background .3s,color .3s,border-color .3s,translate .35s var(--ease)}
.chap h3{font:800 1.625rem/1.05 var(--display);}
.chap button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.chap button::after{content:"";position:absolute;inset:0;border-radius:inherit}
.chap button:focus-visible{outline:none;box-shadow:none}
.chap:has(button:focus-visible){outline:3px solid var(--paper);outline-offset:2px}
.chap p{margin-top:6px;max-width:32ch;opacity:.75;transition:opacity .3s}
.chap::after{content:"→";position:absolute;right:20px;top:20px;font:800 1.5rem/1 var(--display);opacity:.5;transition:translate .3s var(--ease),opacity .3s}
.chap:hover{background:rgb(246 235 217/.09)}
.chap:hover::after{translate:5px 0;opacity:1}
.chap.is-on{background:var(--sunny);color:var(--ink);border-top-color:transparent;translate:10px 0}
.chap.is-on p{opacity:1}
.chap.is-on::after{opacity:1;translate:6px 0}
.chap.is-on + .chap{border-top-color:transparent}
/* Photo deck: three cards stacked; data-pos 0 is the front */
.deck{position:relative;container-type:inline-size;width:100%;max-width:680px;aspect-ratio:1/1;justify-self:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.deck .card{position:absolute;left:50%;top:50%;margin:0;z-index:var(--z,1);cursor:pointer;box-shadow:0 0 0 3px var(--ink),12px 14px 0 rgb(0 0 0/.35);
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1));filter:brightness(var(--b,1));
  transition:transform .75s var(--ease),filter .5s,box-shadow .4s}
.card--origin{width:58%;aspect-ratio:4/5}
.card--product{width:84%;aspect-ratio:16/10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--cream);border:8px solid var(--cream)}
.card--life{width:66%;aspect-ratio:4/3}
.card[data-pos="0"]{--x:0cqw;--y:6cqw;--r:-2deg;--s:1;--z:3;--b:1}
.card[data-pos="1"]{--x:-15cqw;--y:-14cqw;--r:-9deg;--s:.8;--z:2;--b:.72}
.card[data-pos="2"]{--x:16cqw;--y:-20cqw;--r:8deg;--s:.68;--z:1;--b:.55}
.card:not([data-pos="0"]):hover{--b:.95}
.card.is-pull{animation:pull .75s var(--ease)}
@keyframes pull{40%{translate:0 -7cqw}}
.slot{position:relative;margin:0;overflow:hidden;border-radius:24px;background-color:var(--ink);background-image:var(--fallback,var(--tex-cashew));background-size:cover;background-position:var(--pos,50% 50%)}
.slot::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.28;mix-blend-mode:overlay;pointer-events:none}
.slot svg.deco{position:absolute;fill:var(--tan);filter:drop-shadow(0 18px 18px rgb(60 30 10/.35))}
.tile{position:relative;margin:0;overflow:hidden;background:var(--cream);border-left:3px solid var(--cocoa)}
.tile:first-child{border-left:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 70%);transform:scale(var(--z,1.5));transform-origin:var(--o,50% 80%)}
.slot--photo{background-image:none}
.slot--photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.slot__ph{position:absolute;right:12px;top:12px;z-index:2;background:var(--sunny);color:var(--ink);font:700 .6875rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-radius:999px}
@media (max-width:900px){.story__grid{grid-template-columns:1fr}.chap{margin-inline:-10px;padding-left:10px}.chap.is-on{translate:none}}

/* ===== 04 Meet your new favourite (tint / Cream) ===== */
.panels{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,6fr);gap:20px;margin-top:clamp(36px,5vw,64px);align-items:start}
.panel{position:relative;border-radius:32px;padding:28px;overflow:hidden;display:grid;gap:14px;align-content:end;isolation:isolate}
.panel__ghost{position:absolute;left:12px;top:6px;z-index:-1;font:800 clamp(4rem,9vw,9rem)/.85 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.28}
.panel h3{font:800 clamp(1.75rem,2.6vw,2.5rem)/1 var(--display);}
.panel p{max-width:30ch}
.panel .link{justify-self:start}
.panel--classic{background:var(--leaf);color:var(--on-leaf)}
.panel--classic .panel__ghost{color:var(--on-leaf)}
.panel--barista{background:var(--tan);color:var(--ink);margin-top:72px}
.panel--choc{background:var(--cocoa);color:var(--paper);margin-top:28px}
.panel .btn{justify-self:start}
@media (max-width:900px){.panels{grid-template-columns:1fr}.panel--barista,.panel--choc{margin-top:0}}

/* ===== 05 Goodness in every detail (paper) ===== */
.detail{background:var(--paper)}
.detail__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,56px);align-items:center}
.insp{position:relative;background:var(--leaf-deep);color:var(--paper);border-radius:36px;min-height:min(62vw,640px);overflow:hidden;border:1.5px solid var(--ink)}
.insp canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.insp__hint{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;margin:0;pointer-events:none}
.insp__hint .stage__hint{display:inline-block}
.insp__fb{position:absolute;inset:0;display:grid;place-items:center}
.insp__fb svg{fill:#C98F4E;transition:transform .8s var(--ease),fill .5s}
.insp[data-mode="blend"] .insp__fb svg{transform:rotate(200deg) scale(.8);fill:#E8C99B}
.insp[data-mode="milk"] .insp__fb svg{transform:rotate(360deg) scale(1.1);fill:var(--paper)}
.insp.is-live .insp__fb{display:none}
/* Steps: one open at a time; the open step sets the 3D scene */
.steps{display:grid;gap:12px}
.step{position:relative;border:1.5px solid var(--ink);border-radius:26px;background:#fff;transition:background .35s,color .35s,border-color .35s,box-shadow .35s var(--ease),translate .35s var(--ease)}
.step h3{font:800 clamp(1.375rem,2vw,1.875rem)/1.05 var(--display);}
.step button{position:relative;width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;background:none;border:0;border-radius:24px;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.step button svg{width:34px;height:34px;flex:none;fill:currentColor;color:var(--leaf-text);transition:rotate .6s var(--ease),scale .4s var(--ease),color .3s}
.step button::after{content:"→";margin-left:auto;font:800 1.5rem/1 var(--display);transition:translate .3s var(--ease),opacity .3s}
.step__bar{position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px;background:var(--sunny);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.step__p{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease)}
.step__p > div{overflow:hidden}
.step__p p{padding:14px 24px 24px 74px;max-width:44ch}
.js .step:not(.is-on) .step__p{grid-template-rows:0fr}
.js .step:not(.is-on) .step__p > div{visibility:hidden;transition:visibility 0s .5s}
.step:not(.is-on):hover{background:var(--sunny);translate:0 -3px;box-shadow:4px 5px 0 var(--ink)}
.step:not(.is-on):hover button::after{translate:5px 0}
.step.is-on{background:var(--leaf);color:var(--on-leaf);border-color:var(--leaf);box-shadow:6px 8px 0 var(--ink)}
.step.is-on button{cursor:default}
.step.is-on button::after{opacity:0}
.step.is-on button svg{color:var(--sunny);rotate:-20deg;scale:1.15}
.step.is-run .step__bar{animation:stepbar 1.5s var(--ease) forwards}
@keyframes stepbar{0%{opacity:1;transform:scaleX(0)}80%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.detail__note{margin-top:28px;color:var(--muted);font-size:.9375rem}
@media (max-width:900px){.detail__grid{grid-template-columns:1fr}.insp{min-height:min(88vw,420px)}}

/* ===== 06 Make it your own (Sunny) ===== */
.recipes{background:var(--sunny);color:var(--ink)}
.recipes .h2 em{color:var(--ink);background:var(--paper);padding:0 .12em;border-radius:12px}
.recipes__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 40px;align-items:end}
.rgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,56px);align-items:start}
.rcard{background:var(--paper);border-radius:28px;overflow:hidden;display:grid;border:1.5px solid var(--ink)}
.rcard:nth-child(1){grid-column:1/6}
.rcard:nth-child(2){grid-column:6/10;margin-top:56px}
.rcard:nth-child(3){grid-column:10/13}
.rcard:nth-child(4){grid-column:2/8;grid-template-columns:1fr 1fr}
.rcard__img{aspect-ratio:4/3;position:relative;display:grid;place-items:end center;overflow:hidden;background:var(--bg)}
.rcard:nth-child(3) .rcard__img{aspect-ratio:3/4}
.rcard:nth-child(4) .rcard__img{aspect-ratio:auto;min-height:260px}
.rcard__img::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.25;mix-blend-mode:overlay}
.cup{width:34%;aspect-ratio:3/4;border-radius:10px 10px 26px 26px;position:relative;margin-bottom:12%;background:var(--layers);box-shadow:inset -10px 0 0 rgb(255 255 255/.18),0 16px 0 -6px rgb(0 0 0/.12)}
.cup::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;border-radius:10px 10px 0 0;background:rgb(255 255 255/.35)}
.rcard__img .straw{position:absolute;width:5%;height:46%;background:var(--ink);transform:rotate(14deg);left:56%;bottom:46%;border-radius:4px}
.rcard__body{padding:20px;display:grid;gap:6px;align-content:center}
.rcard h3{font:800 1.5rem/1.05 var(--display);}
.rcard p{font-size:.9375rem}
@media (max-width:900px){.recipes__head{grid-template-columns:1fr}.rcard:nth-child(n){grid-column:1/-1;margin-top:0}.rcard:nth-child(4){grid-template-columns:1fr}}

/* ===== 07 Where to buy (tint / Cream) ===== */
.buy{background:var(--cream);overflow:hidden}
.buy__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.buy .h2 em{color:var(--leaf-text)}
.buy .lead{margin:22px 0 28px}
.buy__vis{position:relative;aspect-ratio:1;display:grid;place-items:center}
@media (max-width:900px){.buy__grid{grid-template-columns:1fr}}

/* ===== 08 Final CTA (accent / Leaf) ===== */
.closer{background:var(--leaf);color:var(--on-leaf);overflow:hidden;isolation:isolate}
.closer__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 78% 60%,rgb(255 255 255/.16),transparent 70%)}
.closer__bg::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.2;mix-blend-mode:overlay}
.closer .wrap{min-height:min(92vh,820px);display:flex;flex-direction:column;justify-content:center;gap:34px;position:relative;z-index:3;pointer-events:none}
.closer .wrap > *{pointer-events:auto}
.closer .h2{font-size:clamp(3rem,9.4vw,9.4rem);max-width:8.5ch}
.closer .h2 .thin{color:var(--paper)}
.closer .h2 em{color:var(--sunny)}
.closer__cta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.closer .stage{z-index:2}
.closer .stage__fallback{right:10vw;bottom:10%}
@media (max-width:900px){.closer .wrap{min-height:860px;justify-content:flex-start;padding-top:72px}}

/* ===== Footer (dark / Ink) ===== */
.foot{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,96px) var(--gut) 40px}
.foot__in{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.foot .logo img{width:96px;height:96px}
.foot h2{font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sunny);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__legal{max-width:1480px;margin:48px auto 0;padding-top:20px;border-top:1px solid rgb(255 251 243/.3);font-size:.875rem;color:#d8d0c4}
@media (max-width:760px){.foot__in{grid-template-columns:1fr 1fr}.foot__in > :first-child{grid-column:1/-1}}


/* Reveal on scroll (CSS only, class added by JS when allowed) */
.js-reveal [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal [data-rv]{opacity:1;transform:none;transition:none}}

/* ===== First-load loader: a carton pours, the glass fills with real load progress, a green flood hands over to the hero ===== */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;background:var(--sunny);color:var(--ink);overflow:hidden;--p:0;transition:opacity .45s var(--ease),visibility 0s .45s}
.js:not(.is-loading) .loader{opacity:0;visibility:hidden;pointer-events:none}
html.is-loading{overflow:hidden}
.loader__scene{position:relative;width:280px;height:320px}
.loader__carton{position:absolute;left:100px;top:120px;transform-origin:100% 0;rotate:100deg;animation:ld-tip .7s var(--ease) both,ld-tilt 1.8s ease-in-out .7s infinite}
.loader__carton .pack{--w:70px}
@keyframes ld-tip{from{rotate:0deg;translate:0 24px;opacity:0}to{rotate:100deg}}
@keyframes ld-tilt{0%,100%{rotate:100deg}50%{rotate:110deg}}
.loader__stream{position:absolute;left:168px;top:118px;width:9px;height:190px;border-radius:9px;background:#fffaf0;transform-origin:50% 0;animation:ld-pour .35s var(--ease) .55s both,ld-wob .5s ease-in-out .9s infinite}
@keyframes ld-pour{from{transform:scaleY(0)}}
@keyframes ld-wob{50%{translate:2px 0}}
.loader__glass{position:absolute;z-index:2;left:150px;top:216px;width:84px;height:104px;border:3px solid var(--ink);border-top:0;border-radius:4px 4px 20px 20px;background:rgb(255 255 255/.35);overflow:hidden}
.loader__milk{position:absolute;inset:0;background:#fffaf0;transform-origin:50% 100%;transform:scaleY(calc(.06 + var(--p) * .9))}
.loader__splash{position:absolute;z-index:3;left:150px;top:216px;width:84px;height:104px;pointer-events:none}
.loader__splash i{position:absolute;left:30%;bottom:calc(6% + var(--p) * 88%);width:8px;height:8px;border-radius:50%;background:#fffaf0;box-shadow:0 0 0 2px var(--ink);opacity:0;--dx:-14px;animation:ld-drop .9s ease-out infinite}
.loader__splash i:nth-child(2){left:46%;width:6px;height:6px;--dx:3px;animation-delay:.3s}
.loader__splash i:nth-child(3){left:58%;--dx:16px;animation-delay:.6s}
@keyframes ld-drop{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--dx) -28px}}
.loader__nut{position:absolute;bottom:0;animation:ld-hop .45s cubic-bezier(.3,0,.7,1) infinite alternate}
.loader__nut:nth-of-type(1){left:4px;width:48px;fill:var(--cream)}
.loader__nut:nth-of-type(2){left:62px;width:22px;fill:#d9b98a;animation-delay:.15s}
.loader__nut:nth-of-type(3){left:94px;width:36px;fill:var(--tan);animation-delay:.3s}
@keyframes ld-hop{from{translate:0 0;rotate:-10deg}to{translate:0 -30px;rotate:14deg}}
.loader__pct{margin-top:18px;font:800 clamp(3rem,9vw,5.5rem)/1 var(--display);font-variant-numeric:tabular-nums;transition:opacity .2s}
.loader__flood{position:absolute;z-index:5;left:192px;top:268px;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;border-radius:50%;background:var(--leaf);transform:scale(0);pointer-events:none}
.loader.is-full .loader__stream{transform-origin:50% 100%;animation:ld-stop .3s var(--ease) forwards}
@keyframes ld-stop{to{transform:scaleY(0)}}
.loader.is-full .loader__carton{animation:ld-lift .45s var(--ease) forwards}
@keyframes ld-lift{from{rotate:100deg}to{rotate:40deg;translate:-40px -40px;opacity:0}}
.loader.is-out .loader__flood{transform:scale(1);transition:transform .8s cubic-bezier(.7,0,.3,1)}
.loader.is-out .loader__pct{opacity:0}
@media (max-width:520px){.loader__scene{scale:.8;margin:-32px 0 -40px}}
/* Hero lines rise in once the loader hands over */
.hero__h1 > span,.hero__lower{transition:opacity .6s var(--ease),translate .8s var(--ease)}
.hero__h1 > .b{transition-delay:.08s}.hero__h1 > .c{transition-delay:.16s}.hero__lower{transition-delay:.3s}
.js:not(.is-ready) .hero__h1 > span,.js:not(.is-ready) .hero__lower{opacity:0;translate:0 40px}
@media (prefers-reduced-motion:reduce){
  .loader__carton,.loader__stream,.loader__nut,.loader.is-full .loader__carton,.loader.is-full .loader__stream{animation:none}
  .loader__splash{display:none}
  .loader.is-out .loader__flood{transition:none}
  .js .loader{transition:opacity .2s}
  .hero__h1 > span,.hero__lower{transition:none}
}


/* ===== Bridges (one line between chapters) ===== */
.bridge{display:flex;align-items:center;gap:10px;font:700 clamp(1rem,1.5vw,1.25rem)/1.3 var(--display);color:var(--muted);margin:0 0 clamp(24px,3vw,40px)}
.bridge svg{width:22px;height:22px;flex:none;fill:var(--leaf)}

/* ===== Header menu (small screens) ===== */
.menu-btn{display:none;min-height:46px;padding:0 18px;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;font:700 .9375rem/1 var(--body);cursor:pointer}
.hdr__r{display:flex;align-items:center;gap:10px}
@media (max-width:860px){
  .menu-btn{display:inline-flex;align-items:center}
  .hdr.menu-open .nav{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% - 6px);left:var(--gut);right:var(--gut);background:var(--paper);color:var(--ink);padding:14px 20px;border-radius:24px;box-shadow:0 18px 40px rgb(0 0 0/.25);z-index:40}
  .hdr.menu-open .nav a{padding:12px 2px;font-size:1.125rem;border-bottom:1.5px solid var(--cream)}
}

/* ===== Motion pause (2.2.2): freezes marquee and idle float ===== */

/* ===== No-WebGL fallback: CSS pour rig (moved with GSAP transforms) ===== */
.rig{--s:min(46vw,66vh);position:absolute;z-index:2;right:max(3vw,24px);bottom:76px;width:var(--s);height:var(--s);pointer-events:none}
.rig .pack{--w:calc(var(--s) * .235)}
.rig__carton{position:absolute;pointer-events:auto;cursor:pointer;left:14%;bottom:4%;transform-origin:100% 0;will-change:transform;filter:drop-shadow(0 18px 14px rgb(0 0 0/.22))}
.rig__glass{position:absolute;right:7%;bottom:4%;width:calc(var(--s) * .26);height:calc(var(--s) * .34);border:3px solid rgb(255 255 255/.6);border-top:0;border-radius:4px 4px 18px 18px;background:rgb(255 255 255/.14);overflow:hidden;pointer-events:auto;cursor:pointer;box-shadow:inset 8px 0 0 rgb(255 255 255/.18)}
.rig__milk{position:absolute;left:0;right:0;bottom:0;height:100%;background:#fffaf0;transform-origin:50% 100%;transform:scaleY(.12);will-change:transform}
.rig__stream{position:absolute;left:0;top:0;width:calc(var(--s) * .024);margin-left:calc(var(--s) * -.012);background:#fffaf0;border-radius:99px;transform-origin:50% 0;transform:scaleY(0);opacity:0;will-change:transform}
.nut{position:absolute;aspect-ratio:1;height:auto;pointer-events:auto;cursor:pointer;rotate:var(--r,0deg);animation:nut-bob 5.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.nut--c{fill:var(--cream)}.nut--t{fill:var(--tan)}.nut--p{fill:#d9b98a;aspect-ratio:3/5}
@keyframes nut-bob{50%{translate:0 -12px}}
@media (prefers-reduced-motion:reduce){.nut{animation:none}}
.closer .rig{--s:min(44vw,62vh);right:6vw;bottom:8%}
@media (max-width:700px){.rig{--s:min(64vw,28vh);right:3vw;bottom:auto;top:29.5vh}.closer .rig{--s:min(72vw,42vh);right:4vw;top:auto;bottom:70px}}

/* No JavaScript: show the static pack, hide controls that need scripting */
html:not(.js) .menu-btn{display:none}
main:focus{outline:none}
/* Recipe chips outline the matching cards; the layout stays put and no text is dimmed */

/* ===== Interactions and loudness ===== */
/* Range panels: the pack turns, the panel floods with colour, the ghost word slides */
.panel{--flood:var(--sunny);--flood-ink:var(--ink);cursor:default;transition:color .3s,translate .35s var(--ease),rotate .35s var(--ease),box-shadow .35s var(--ease)}
.js-reveal .panel[data-rv],.js-reveal .rcard[data-rv]{transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s,translate .35s var(--ease),rotate .35s var(--ease),box-shadow .35s var(--ease)}
.panel--classic{--flood:var(--sunny);--flood-ink:var(--ink)}
.panel--barista{--flood:var(--pink);--flood-ink:var(--ink)}
.panel--choc{--flood:var(--coral);--flood-ink:var(--ink)}
.panel::before{content:"";position:absolute;z-index:-2;left:50%;top:60%;width:240%;aspect-ratio:1;border-radius:50%;background:var(--flood);transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--ease)}
.panel:hover::before,.panel:focus-within::before{transform:translate(-50%,-50%) scale(1)}
.panel:hover,.panel:focus-within{color:var(--flood-ink);translate:0 -12px;rotate:var(--tr,-.8deg);box-shadow:10px 14px 0 var(--ink)}
.panel .pack__box{transition:transform .7s var(--ease)}
.panel:hover .pack__box,.panel:focus-within .pack__box{transform:rotateY(-58deg) rotateX(-6deg) translateY(-10px)}
.panel__ghost{transition:translate .6s var(--ease),scale .6s var(--ease),color .3s}
.panel:hover .panel__ghost,.panel:focus-within .panel__ghost{translate:28px 0;scale:1.08;color:var(--flood-ink)}
.panel[hidden]{display:none}

/* Story */
.stk{position:absolute;z-index:4;font:800 .9375rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:12px 16px;border-radius:999px;background:var(--sunny);color:var(--ink);box-shadow:0 5px 0 rgb(0 0 0/.25);cursor:pointer;rotate:-8deg;transition:rotate .3s var(--ease),scale .3s var(--ease)}
.stk--a{right:-1%;top:20%}
.stk--b{left:-2%;top:7%;background:var(--paper);rotate:7deg}
.stk:hover{rotate:6deg;scale:1.12}
.stk.spin{animation:spin .7s var(--ease)}
@keyframes spin{from{rotate:-8deg}to{rotate:352deg}}

/* Big outlined words behind sections, drifting with scroll */
.ghost{position:absolute;left:-1vw;top:1%;z-index:0;font:800 clamp(7rem,28vw,30rem)/.8 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgb(30 26 23/.09);white-space:nowrap;pointer-events:none}
.ghost--ink{-webkit-text-stroke-color:rgb(30 26 23/.16)}
.detail,.recipes{overflow:hidden}
.detail .wrap,.recipes .wrap,.buy .wrap{position:relative;z-index:1}

/* Loud divider strip */
.band{background:var(--ink);color:var(--sunny);overflow:hidden;display:flex;align-items:center;padding:16px 0}
.band .marq__t{font-size:clamp(1.75rem,5vw,4.25rem);gap:.6em;padding-right:.6em}
.band .marq__t span{gap:.6em}
.band .marq__t svg{fill:var(--sunny);width:.8em;height:.8em}
.band.is-off .marq__t{animation-play-state:paused}

/* Recipes */
.rcard{transition:translate .35s var(--ease),rotate .35s var(--ease),box-shadow .35s var(--ease)}
.rcard:hover{translate:0 -12px;rotate:var(--tr,1deg);box-shadow:8px 12px 0 var(--ink)}
.cup{transition:translate .4s var(--ease),rotate .4s var(--ease)}
.rcard:hover .cup{translate:0 -10px;rotate:-6deg}
.rcard__img img{transition:scale .5s var(--ease)}
.rcard:hover .rcard__img img{scale:1.07}
.chip{transition:scale .2s var(--ease),background .2s,color .2s}
.chip:hover{scale:1.05}
/* The whole card opens the recipe (stretched button) */
.rcard{position:relative;cursor:pointer}
.rcard__more{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:700 .9375rem/1 var(--body);cursor:pointer;transition:background .2s,color .2s}
.rcard__more::before{content:"";position:absolute;inset:0;border-radius:28px}
.rcard__more::after{content:"+";font:800 1.25rem/1 var(--display);transition:rotate .3s var(--ease)}
.rcard:hover .rcard__more{background:var(--sunny)}
.rcard__more[aria-expanded="true"],.rcard:hover .rcard__more[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.rcard__more[aria-expanded="true"]::after{rotate:45deg}
.rcard__steps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease)}
.rcard__steps > div{overflow:hidden}
.js .rcard__steps:not(.is-open){grid-template-rows:0fr}
.js .rcard__steps:not(.is-open) > div{visibility:hidden;transition:visibility 0s .5s}
.rcard__need{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rcard__need li{background:var(--cream);border-radius:999px;padding:7px 12px;font:700 .8125rem/1.2 var(--body)}
.rcard__steps ol{margin:14px 0 4px;padding-left:1.4em;display:grid;gap:6px;font-size:.9375rem}
.rcard__steps ol li::marker{font-weight:800;color:var(--leaf-text)}
/* Arriving from a range panel: that product's recipes step forward */
.rcard.is-pick{translate:0 -12px;border-color:var(--leaf);box-shadow:0 0 0 4px var(--leaf),10px 14px 0 var(--ink);animation:wiggle .8s var(--ease) .35s}
@keyframes wiggle{25%{rotate:-2deg}50%{rotate:1.5deg}75%{rotate:-.8deg}}

/* Range panels: the whole panel is the link */
.panel{cursor:pointer}
.panel .link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:32px}

/* ===== Studio sets (Oatside-style colour blocks) =====
   Two-tone wall and floor built from our own pack art, never an invented carton photo. When the manifest marks the
   slot "supplied", main.js §7 puts the photo behind the cartons and the set gets .has-photo. Sizes follow the set width (cqw). */
.set{--sw:17cqw;--wall:var(--sunny);--floor:var(--mint);--puddle:#fffaf0;position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;aspect-ratio:4/5;border-radius:24px;border:2px solid var(--ink);color:var(--ink);
  background:linear-gradient(180deg,transparent 57%,rgb(0 0 0/.16) 60%,transparent 66%),linear-gradient(180deg,var(--wall) 0 60%,var(--floor) 60%)}
.set .slot__photo{z-index:-2}
.set.has-photo .panel__ghost{display:none}
.set .panel__ghost{color:var(--ink);opacity:.18;left:14px;top:12px;font-size:min(15cqw,6rem)}
.set .pack{--w:var(--sw)}
.set__pk{position:absolute;filter:drop-shadow(14px 6px 0 rgb(0 0 0/.22))}
.set__pk--lie{width:calc(var(--sw) * 2);height:var(--sw)}
.set__pk--lie .pack{position:absolute;left:50%;top:50%;translate:-50% -50%}
.set__pk--lie .pack{rotate:-90deg}
.set__pk--fallen .pack{rotate:90deg}
.set__pk--tip{left:14%;top:40%;transform-origin:100% 0;rotate:108deg;filter:drop-shadow(0 14px 0 rgb(0 0 0/.16))}
.set__stream{position:absolute;left:calc(14% + var(--sw) - 6px);top:40%;bottom:11%;width:11px;border-radius:11px;background:var(--puddle);animation:set-wob 1.2s ease-in-out infinite}
@keyframes set-wob{50%{translate:2px 0}}
.set__puddle{position:absolute;bottom:6%;fill:var(--puddle);filter:drop-shadow(0 3px 0 rgb(0 0 0/.12))}
.set__puddle ellipse{fill:#fff;opacity:.4}
.set--choc .set__puddle{left:10%;width:58%}
.set--barista .set__puddle{right:-4%;width:50%}
.set__nut{position:absolute;fill:var(--tan);rotate:var(--r,0deg);filter:drop-shadow(6px 4px 0 rgb(0 0 0/.18))}
.set--barista{--wall:var(--tomato);--floor:var(--peach);--puddle:#6B3F26;--sw:19cqw;aspect-ratio:1/1}
.set--choc{--wall:var(--pink);--floor:var(--coral);--puddle:#5A3325}
.panel .set{margin-bottom:8px}
/* the set's cartons hop a little when the panel is hovered (the panel itself is the link) */
.set__pk{transition:translate .45s var(--ease)}
.panel:hover .set__pk:not(.set__pk--tip),.panel:focus-within .set__pk:not(.set__pk--tip){translate:0 -6px}
/* Where to buy: a carton tower; hover wobbles the top carton, tap knocks the tower over */
.set--buy{--wall:var(--sky);--floor:var(--sunny);aspect-ratio:1/1;width:min(100%,520px);justify-self:center}
.tw{transition:translate .7s cubic-bezier(.5,0,.3,1.2),rotate .7s cubic-bezier(.5,0,.3,1.2)}
.tw--1{left:calc(50% - var(--sw));bottom:12%}
.tw--2{left:calc(50% - var(--sw) + 6px);bottom:calc(12% + var(--sw));rotate:-3deg}
.tw--3{left:calc(50% - var(--sw) / 2);bottom:calc(12% + var(--sw) * 2);rotate:2deg;transform-origin:50% 100%}
.set--buy:not(.is-fall):hover .tw--3{animation:tw-wob .5s ease-in-out infinite alternate}
@keyframes tw-wob{from{rotate:-4deg}to{rotate:5deg}}
.set--buy.is-fall .tw--3{translate:calc(var(--sw) * 1.7) calc(var(--sw) * 1.9);rotate:96deg}
.set--buy.is-fall .tw--2{translate:calc(var(--sw) * -.8) calc(var(--sw) * .96);rotate:-12deg;transition-delay:.12s}
.card[data-pos="0"]{box-shadow:0 0 0 3px var(--ink),12px 14px 0 var(--sunny)}

/* Where to buy: channels are plain facts (no hover); the packs fan on hover or tap */
.chan{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.chan li{display:inline-flex;align-items:center;gap:10px;font:700 1.0625rem/1.2 var(--body)}
.chan li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--leaf)}
.buy__vis{cursor:pointer}

@media (max-width:900px){.stk--a{right:2%}.stk--b{left:2%}}
@media (prefers-reduced-motion:reduce){
  .panel,.rcard,.chap,.chap::after,.chap p,.card,.step,.step button svg,.step__p,.rcard__steps,.stk,.chip,.cup,.panel__ghost,.tw,.set__stream,.rcard__img img,.insp__fb svg{transition:none}
  .panel::before{transition:none}
  .panel:hover,.rcard:hover,.rcard.is-pick,.chap.is-on,.step:hover,.stk:hover{translate:none;rotate:none;scale:none}
  .stk.spin,.card.is-pull,.rcard.is-pick,.step.is-run .step__bar,.set__stream,.set--buy:not(.is-fall):hover .tw--3{animation:none}
}