:root{
  --paper:#FBF8F2; --mist:#F7F4EC; --cream:#F3EEE2; --sand:#ECE2CF;
  --ink:#1C1C1C; --ink-soft:#5B4E42; --ink-faint:#9A8975;
  --sky:#7FD3EE; --sky-deep:#1E88C7; --lime:#8CC63F; --lime-deep:#5F9A1F; --yellow:#F2C94C; --yellow-deep:#C99A17; --cocoa:#3B2A20;
  --gold:#B7862E; --gold-deep:#8A6128; --gold-bright:#D9A64A;
  --line:rgba(58,33,20,.16); --line-soft:rgba(58,33,20,.09);
  --ambient:#FBF8F2; --maxw:1280px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%} html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.7}
::selection{background:var(--yellow);color:var(--ink)}
h1,h2,h3,h4,.display{font-family:"Fredoka",sans-serif;font-weight:600;line-height:1.05;color:var(--ink)}
.latin{font-family:"Cormorant Garamond",serif;letter-spacing:.34em;text-transform:uppercase}
a{color:inherit}
img{max-width:100%}

/* fixed layers */
#ambient{position:fixed;inset:0;z-index:-3;background:var(--ambient)}
#glow{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.85),rgba(244,239,229,0) 60%)}
#vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(135% 120% at 50% 42%,transparent 55%,rgba(120,90,50,.07) 100%)}
#grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sky-deep),var(--sky),var(--lime),var(--yellow))}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2vw,22px) clamp(18px,4vw,54px);will-change:transform;transition:transform .5s var(--ease),background .5s,backdrop-filter .5s,box-shadow .5s,padding .5s}
header.hidden{transform:translateY(-115%)}
header.solid{background:rgba(251,248,242,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-soft);padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:flex-end;gap:8px;text-decoration:none}
.brand img{width:clamp(64px,7vw,96px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15))}
.brand .wm-sub{font-family:"Fredoka",sans-serif;font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-deep);padding-bottom:6px}
header nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
header nav a{color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:700;transition:color .3s}
header nav a:hover{color:var(--sky-deep)}
.nav-cta{border:2px solid var(--ink);border-radius:999px;padding:8px 20px;color:var(--ink)!important;background:var(--yellow);transition:transform .3s,box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.lang select{appearance:none;background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font:700 12px "Nunito",sans-serif;color:var(--ink-soft);cursor:pointer}
@media(max-width:820px){header nav a:not(.nav-cta){display:none}}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px;border-radius:6px}

/* helpers */
section{position:relative}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,68px)}
.head{text-align:center;max-width:820px;margin-inline:auto;margin-bottom:clamp(36px,6vw,72px)}
.head .lead,.lead{font-size:clamp(16px,1.7vw,20px);color:var(--ink-soft);max-width:60ch;margin-inline:auto;margin-top:16px}
.idx{display:block;font-family:"Cormorant Garamond",serif;letter-spacing:.42em;text-transform:uppercase;font-size:13px;color:var(--gold-deep);font-weight:500;margin-bottom:12px}
.idx.light{color:#fff}
h2{font-size:clamp(34px,5.4vw,70px);letter-spacing:-.01em}
.hl{color:var(--sky-deep)}
.fallback-host{position:relative}
.fallback-host.is-missing{background-image:linear-gradient(135deg,var(--cream),var(--sand) 78%);background-size:cover}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.center{text-align:center;margin-top:40px}
.btn{border-radius:999px;padding:15px 36px;font-family:"Fredoka",sans-serif;font-size:17px;font-weight:600;text-decoration:none;display:inline-block;transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
.btn-primary:hover{transform:translateY(-3px);background:var(--sky-deep)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--yellow);transform:translateY(-3px)}

/* 1 · HERO */
#hero{height:150vh}
#hero .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10vh 18px 0;perspective:1300px;color:#fff;background:#F2811C}
#hero .hero-bg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.1s var(--ease);will-change:opacity}
#hero .hero-bg.on{opacity:1}
#hero .hero-tropic{position:absolute;inset:0;z-index:0;pointer-events:none;background:
    radial-gradient(55% 70% at 74% 38%,rgba(255,226,120,.75),rgba(255,226,120,0) 62%),
    radial-gradient(45% 55% at 12% 92%,rgba(140,198,63,.55),rgba(140,198,63,0) 60%),
    radial-gradient(35% 45% at 92% 92%,rgba(255,120,80,.45),rgba(255,120,80,0) 60%)}
#hero .stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 100%,transparent 60%,rgba(60,20,0,.28) 100%)}
#hero .stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:7vh;z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(251,248,242,0),var(--paper))}
#hero .hero-product{display:flex;flex-direction:column;align-items:center;gap:10px;justify-self:center}
#hero .hero-label{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:"Fredoka",sans-serif;font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
#hero .hero-label.show{opacity:1;transform:none}
#hero .hero-label b{font-weight:600;font-size:18px}
#hero .hero-label i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--lime);color:#fff}
#hero .hero-label i.soon{background:var(--yellow);color:var(--ink)}
#hero .hero-label span{color:rgba(255,255,255,.85);font-family:"Nunito",sans-serif;font-size:13px;font-weight:700}
#hero .hero-label:hover span{color:var(--ink)}
#hero .hero-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:420px;opacity:0;transition:opacity .6s}
#hero .hero-thumbs.show{opacity:1}
#hero .hero-thumbs button{width:44px;height:52px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);padding:4px;cursor:pointer;transition:transform .3s,border-color .3s,background .3s;display:grid;place-items:center}
#hero .hero-thumbs button img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
#hero .hero-thumbs button:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.5)}
#hero .hero-thumbs button.active{border-color:#fff;background:rgba(255,255,255,.45);transform:translateY(-3px)}
#hero .stage.hovering{cursor:pointer}
#hero h1,#hero .hero-copy h1{color:#fff;text-shadow:0 4px 30px rgba(80,30,0,.35)}
#hero .latin{color:#FFF3C4!important}
#hero .sub{color:rgba(255,255,255,.92)!important;text-shadow:0 2px 14px rgba(80,30,0,.3)}
#hero .btn-primary{background:var(--ink);color:#fff;box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
#hero .btn-primary:hover{background:#fff;color:var(--ink)}
#hero .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff} #hero .btn-ghost:hover{background:#fff;color:var(--ink)}
#hero .scrollcue{color:rgba(255,255,255,.75)} #hero .scrollcue .bar{background:linear-gradient(#fff,transparent)}
#hero .hl{color:#FFF3C4}
header:not(.solid) nav a{color:rgba(255,255,255,.95)} header:not(.solid) nav a:hover{color:var(--ink)}
header:not(.solid) .wm-sub{color:#fff}
header:not(.solid) .lang select{color:#fff;border-color:rgba(255,255,255,.35)} header:not(.solid) .lang select option{color:var(--ink)}
header:not(.solid) .brand img{filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 6px 14px rgba(0,0,0,.5))}
header:not(.solid) .nav-cta{border-color:var(--ink)}
#heroGL{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
#hero .aura{position:absolute;top:50%;left:66%;width:84vmin;height:84vmin;border-radius:50%;z-index:1;pointer-events:none;transform:translate3d(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)),0);background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,240,200,.22) 40%,transparent 66%);filter:blur(22px);opacity:0;will-change:transform,opacity;animation:auraIn 1.6s ease-out .15s forwards,auraPulse 8s ease-in-out 1.8s infinite}
@keyframes auraIn{to{opacity:.75}} @keyframes auraPulse{0%,100%{opacity:.6}50%{opacity:.9}}
#hero .motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#hero .motes span{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;filter:blur(.4px);background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%);animation:mote linear infinite}
@keyframes mote{0%{opacity:0;transform:translateY(40px) scale(.5)}12%{opacity:.85}55%{opacity:.6}100%{opacity:0;transform:translateY(-140px) scale(1.1)}}
#hero .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(20px,4vw,60px);max-width:var(--maxw);width:100%;will-change:transform,opacity}
#hero .hero-copy{text-align:left;position:relative}
#hero .latin{display:block;font-size:13px;color:var(--gold-deep);margin-bottom:2.2vh;opacity:0}
#hero h1{font-size:clamp(40px,6.4vw,92px);font-weight:700;line-height:.98;opacity:0;clip-path:inset(0 0 100% 0)}
#hero .sub{margin-top:2.2vh;font-size:clamp(15px,1.5vw,20px);color:var(--ink-soft);max-width:48ch;opacity:0}
#hero .hero-btns{margin-top:3vh;display:flex;gap:14px;flex-wrap:wrap;opacity:0}
#hero .media-float{animation:floaty 6.5s var(--ease) infinite;justify-self:center}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
#hero .media-tilt{position:relative;transform-style:preserve-3d;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .3s ease-out}
#hero .hero-media{display:block;height:min(66vh,760px);width:auto;max-width:82vw;object-fit:contain;opacity:0;filter:drop-shadow(0 40px 50px rgba(60,20,0,.45))}
#hero .specular{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:280% 280%;animation:sheen 7.5s ease-in-out 2.2s infinite}
@keyframes sheen{0%,16%{background-position:150% 0;opacity:0}24%{opacity:.95}46%,100%{background-position:-50% 0;opacity:0}}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-faint);font-size:11px;letter-spacing:.32em;font-family:"Cormorant Garamond",serif;text-transform:uppercase}
.scrollcue .bar{width:1px;height:44px;background:linear-gradient(var(--sky-deep),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);opacity:.2;transform-origin:top}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:.2;transform-origin:bottom}}
@media(max-width:900px){#hero .hero-inner{grid-template-columns:1fr;text-align:center;gap:10px}#hero .hero-copy{text-align:center;order:2}#hero .hero-product{order:1}#hero .hero-media{height:min(38vh,380px)}#hero .hero-thumbs{display:none}#hero .sub{margin-inline:auto}#hero .hero-btns{justify-content:center}#hero .aura{left:50%;top:38%}}

/* 2 · FILM */
.film{height:640vh}
.film .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper)}
.film canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film .film-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.film .caps{position:absolute;left:clamp(20px,6vw,98px);bottom:clamp(74px,13vh,140px);z-index:4;width:min(82vw,520px);text-align:left;pointer-events:none}
.film .cap{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(14px);font-family:"Fredoka",sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,44px);line-height:1.2;color:var(--ink);text-shadow:0 2px 24px rgba(251,248,242,.9)}
.film .cap em{display:block;font:500 13px "Cormorant Garamond",serif;letter-spacing:.42em;color:var(--gold-deep);margin-bottom:10px}
.film .loader{position:absolute;right:clamp(18px,5vw,42px);bottom:clamp(24px,5vh,40px);z-index:5;font-family:"Cormorant Garamond",serif;letter-spacing:.28em;font-size:12px;color:var(--ink-faint);transition:opacity .6s}

/* 3 · LINES (3D tilt cards) */
#lines{padding:18vh 0 12vh}
.tilt-grid{display:grid;grid-template-columns:1fr;gap:28px;perspective:1400px}
@media(min-width:860px){.tilt-grid{grid-template-columns:repeat(3,1fr)}}
.tilt-card{display:block;text-decoration:none;color:inherit;transform-style:preserve-3d}
.tilt-inner{position:relative;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -40px rgba(60,40,20,.5);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .25s ease-out,box-shadow .4s;transform-style:preserve-3d;border-top:6px solid var(--c)}
.tilt-card:hover .tilt-inner{box-shadow:0 50px 90px -40px rgba(60,40,20,.6)}
.tilt-inner .pic{aspect-ratio:4/3;overflow:hidden}
.tilt-inner .pic img{width:100%;height:100%;object-fit:cover;transform:translateZ(30px) scale(1.04);transition:transform .9s var(--ease)}
.tilt-card:hover .pic img{transform:translateZ(30px) scale(1.1)}
.tilt-inner .body{padding:22px 24px 28px;transform:translateZ(40px)}
.tilt-inner .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--c);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.tilt-inner h3{font-size:26px;margin-bottom:8px} .tilt-inner p{font-size:15px;color:var(--ink-soft)}
.tilt-inner .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s}
.tilt-card:hover .shine{opacity:1}

/* 4 · COVERFLOW */
#flavors{padding:12vh 0 16vh;overflow:hidden}
.coverflow{position:relative;height:clamp(420px,62vh,640px);perspective:1500px;outline:none}
.cf-stage{position:absolute;inset:0;transform-style:preserve-3d}
.cf-item{position:absolute;left:50%;top:50%;width:clamp(180px,22vw,300px);margin-left:calc(clamp(180px,22vw,300px)/-2);transform:translate(-50%,-50%);text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:14px;will-change:transform,opacity;transition:opacity .4s;cursor:grab;transform-style:preserve-3d}
.cf-item img{width:100%;height:auto;filter:drop-shadow(0 30px 34px rgba(30,30,30,.35));backface-visibility:hidden}
.cf-item img.flat{border-radius:16px;box-shadow:0 30px 34px rgba(30,30,30,.25);filter:none}
.cf-label{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transition:opacity .5s;text-align:center}
.cf-item.active .cf-label{opacity:1}
.cf-label b{font-family:"Fredoka",sans-serif;font-size:20px;font-weight:600}
.cf-label i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--lime);color:#fff}
.cf-label i.soon{background:var(--yellow);color:var(--ink)}
.cf-btn{position:absolute;top:44%;z-index:5;width:54px;height:54px;border-radius:50%;border:2px solid var(--ink);background:rgba(251,248,242,.9);font-size:30px;line-height:1;cursor:pointer;transition:transform .3s,background .3s;display:grid;place-items:center;color:var(--ink)}
.cf-btn:hover{background:var(--yellow);transform:scale(1.08)}
.cf-btn.prev{left:clamp(8px,4vw,60px)} .cf-btn.next{right:clamp(8px,4vw,60px)}

/* 5 · ORIGIN pinned */
#origin{height:220vh}
#origin .pin{position:sticky;top:0;height:100svh;overflow:hidden}
#origin .bg{position:absolute;inset:0} #origin .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
#origin .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,38,22,.9) 0%,rgba(18,38,22,.72) 38%,rgba(18,38,22,.2) 68%,transparent),linear-gradient(0deg,rgba(18,38,22,.75),transparent 55%)}
#origin .copy{position:absolute;left:clamp(24px,7vw,120px);bottom:clamp(40px,10vh,120px);max-width:min(88vw,640px);color:#fff}
#origin h2{color:#fff;font-size:clamp(40px,6.4vw,88px);line-height:1}
#origin h2 span{display:block;overflow:hidden}
#origin h2 span>*{display:block}
#origin p{margin-top:20px;font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.88);max-width:52ch}
.nature-points{list-style:none;margin-top:22px;display:grid;gap:10px}
.nature-points li{display:flex;gap:12px;align-items:baseline;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 14px;font-size:14px;color:rgba(255,255,255,.92)}
.nature-points b{font-family:"Fredoka",sans-serif;font-weight:600;color:var(--yellow);white-space:nowrap}
@media(max-width:700px){.nature-points li{flex-direction:column;gap:4px}}

/* 6 · PROCESS */
#process{padding:16vh 0 10vh}
.steps-wrap{position:relative;max-width:1400px;margin-inline:auto}
.steps{display:flex;gap:22px;padding:6px clamp(20px,5vw,68px) 30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;scroll-behavior:smooth}
.steps.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:start;position:relative;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -32px rgba(60,40,20,.45)}
.step b{position:absolute;top:14px;left:14px;z-index:2;width:38px;height:38px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-family:"Fredoka",sans-serif;font-size:18px}
.step img{width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none}
.step h4{font-size:20px;padding:16px 18px 0} .step p{font-size:14px;color:var(--ink-soft);padding:6px 18px 20px}
.st-btn{position:absolute;top:38%;z-index:5;width:50px;height:50px;border-radius:50%;border:2px solid var(--ink);background:rgba(251,248,242,.92);font-size:28px;line-height:1;cursor:pointer;transition:transform .3s,background .3s,opacity .3s;display:grid;place-items:center;color:var(--ink)}
.st-btn:hover{background:var(--yellow);transform:scale(1.08)} .st-btn.prev{left:clamp(6px,2vw,20px)} .st-btn.next{right:clamp(6px,2vw,20px)}
.st-btn.off{opacity:.25;pointer-events:none}
@media(max-width:700px){.st-btn{display:none}}

/* 7 · B2B */
#b2b{padding:16vh 0}
.how{list-style:none;display:grid;grid-template-columns:1fr;gap:22px;counter-reset:s}
@media(min-width:800px){.how{grid-template-columns:repeat(3,1fr)}}
.how li{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 24px 50px -36px rgba(30,60,80,.5);position:relative;overflow:hidden}
.how li::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:var(--sky);opacity:.25}
.how .n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--yellow);font-family:"Fredoka",sans-serif;font-size:22px;margin-bottom:14px}
.how h3{font-size:24px;margin-bottom:8px} .how p{color:var(--ink-soft);font-size:15px}
.perks{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:800px){.perks{grid-template-columns:repeat(4,1fr)}}
.perks div{border:1px solid var(--line);border-radius:16px;padding:18px}
.perks b{display:block;font-family:"Fredoka",sans-serif;font-size:18px;margin-bottom:6px;color:var(--sky-deep)} .perks span{font-size:14px;color:var(--ink-soft)}

/* 8 · GALLERY */
#moments{padding:10vh 0 14vh}
.gallery{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);padding-inline:clamp(20px,5vw,68px);max-width:1400px;margin-inline:auto}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:300px}.g1{grid-row:span 2}.g2{grid-column:span 2}.g3{grid-column:span 1}.g4{grid-column:span 2}.g5{grid-column:span 1}.g6{grid-column:span 2}.g7{grid-column:span 1}.g8{grid-column:span 1}}
.gallery figure{position:relative;border-radius:18px;overflow:hidden;min-height:220px}
.gallery img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.14)}
.gallery figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-family:"Fredoka",sans-serif;font-weight:500;font-size:16px;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* 9 · CTA */
#cta{height:260vh}
#cta .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--paper)}
#cta video,#cta .cta-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cta .cta-poster{transition:opacity .8s ease}
#cta .dim{position:absolute;inset:0;opacity:0;backdrop-filter:blur(3px);background:radial-gradient(120% 100% at 50% 50%,rgba(251,248,242,.7),rgba(244,238,226,.94))}
#cta .content{position:relative;z-index:3;text-align:center;opacity:0;transform:translateY(28px);padding-inline:20px}
#cta .content .latin{display:block;font-size:12px;color:var(--gold-deep);margin-bottom:18px}
#cta h2{font-size:clamp(40px,7.6vw,104px);line-height:.96}
#cta .content p{margin:18px auto 0;color:var(--ink-soft);font-size:clamp(15px,1.8vw,20px);max-width:44ch}
#cta .btns{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

footer{padding:9vh 0 5vh;text-align:center;border-top:1px solid var(--line)}
footer .flogo{width:120px;height:auto}
footer .links{margin:24px 0;display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
footer .links a{color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:700;transition:color .3s} footer .links a:hover{color:var(--sky-deep)}
footer .cr{color:var(--ink-faint);font-size:12px;line-height:1.8}

@media(prefers-reduced-motion:reduce){
  #hero .aura,#hero .motes span,#hero .specular,#hero .media-float,.scrollcue .bar{animation:none}
  #hero .aura{opacity:.6} #hero .latin,#hero .hero-media,#hero h1,#hero .sub,#hero .hero-btns{opacity:1;clip-path:none}
  *{scroll-behavior:auto}
}

/* language flags */
.lang-flags{display:flex;gap:6px;align-items:center}
.lang-flags button{border:2px solid transparent;background:transparent;padding:0;width:30px;height:22px;border-radius:5px;overflow:hidden;cursor:pointer;opacity:.55;transition:opacity .25s,transform .25s,border-color .25s;display:grid;place-items:center}
.lang-flags button img{width:100%;height:100%;object-fit:cover;display:block;border-radius:3px}
.lang-flags button:hover{opacity:1;transform:translateY(-1px)}
.lang-flags button.on{opacity:1;border-color:var(--yellow);box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* ───────────────────────── MOBILE (landing) ───────────────────────── */
html{-webkit-text-size-adjust:100%}
header{padding-top:max(clamp(12px,2vw,22px),env(safe-area-inset-top))}
@media(max-width:900px){
  header{padding-inline:16px}
  header nav{gap:10px}
  .lang-flags button{width:34px;height:26px}
  .nav-cta{padding:10px 16px;font-size:13px}
  #hero{height:130vh}
  #hero .stage{padding:calc(70px + env(safe-area-inset-top)) 16px 0;align-items:flex-start}
  #hero .hero-inner{gap:6px;grid-template-rows:auto auto}
  #hero .hero-product{width:100%}
  #hero .hero-media{height:min(36vh,340px)}
  #hero .hero-label{font-size:13px;flex-wrap:wrap;justify-content:center}
  #hero .hero-label b{font-size:16px}
  #hero .hero-thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding:4px 2px 8px;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  #hero .hero-thumbs::-webkit-scrollbar{display:none}
  #hero .hero-thumbs button{flex:0 0 46px;height:54px;scroll-snap-align:center}
  #hero h1{font-size:clamp(34px,10vw,52px)}
  #hero .sub{font-size:15px;max-width:none}
  #hero .hero-btns{gap:10px}
  #hero .hero-btns .btn{flex:1 1 auto;text-align:center;padding:14px 18px;font-size:15px}
  #hero .scrollcue{display:none}
  .film{height:420vh}
  .film .caps{left:16px;right:16px;width:auto;bottom:max(64px,env(safe-area-inset-bottom) + 56px)}
  .film .cap{font-size:clamp(20px,6vw,28px)}
  #lines,#b2b,#process,#moments,#flavors{padding-block:9vh}
  .tilt-inner .pic img,.tilt-card:hover .pic img{transform:none}
  .coverflow{height:clamp(360px,68vw,460px)}
  .cf-item{width:min(52vw,220px);margin-left:calc(min(52vw,220px)/-2)}
  .cf-btn{width:44px;height:44px;font-size:24px;top:auto;bottom:-6px;background:var(--paper)}
  .cf-btn.prev{left:calc(50% - 60px)} .cf-btn.next{right:calc(50% - 60px)}
  #origin{height:170vh}
  #origin .copy{left:16px;right:16px;max-width:none;bottom:max(28px,env(safe-area-inset-bottom) + 20px)}
  #origin h2{font-size:clamp(34px,10vw,52px)}
  #origin p{font-size:15px}
  .steps{gap:14px;padding:6px 16px 24px;scroll-snap-type:x mandatory}
  .step{flex:0 0 78vw;scroll-snap-align:center}
  .how li{padding:22px 20px} .how h3{font-size:21px}
  .perks{grid-template-columns:1fr 1fr;gap:10px} .perks div{padding:14px} .perks b{font-size:16px} .perks span{font-size:13px}
  .gallery{gap:10px;padding-inline:16px;grid-template-columns:1fr 1fr}
  .gallery figure{min-height:180px;aspect-ratio:1}
  .gallery .g1,.gallery .g2,.gallery .g4{grid-column:span 2;aspect-ratio:16/10}
  .gallery figcaption{font-size:14px;left:12px;bottom:10px}
  #cta{height:200vh}
  #cta h2{font-size:clamp(34px,10vw,56px)}
  #cta .btns .btn{flex:1 1 auto;text-align:center}
  footer .cr{font-size:11px;padding-inline:8px}
  footer .links{gap:14px 18px}
  .btn{min-height:44px}
}
@media(max-width:480px){
  .brand img{width:58px} .brand .wm-sub{font-size:11px}
  header nav a:not(.nav-cta){display:none}
  .perks{grid-template-columns:1fr}
  .tilt-grid{gap:16px}
}
/* touch devices: no hover-only effects, larger targets */
@media(hover:none){
  .tilt-inner{transform:none!important}
  .cf-item{filter:none!important}
  .st-btn{display:none}
}
@media(max-width:900px){
  #hero .hero-inner>*{min-width:0}
  #hero .hero-product{width:100%;min-width:0}
  #hero .hero-thumbs{width:100%}
  #hero .hero-copy{padding-inline:4px}
}
@media(max-width:560px){.brand .wm-sub{display:none}}
/* gallery: shop image is panoramic (21:9); keep it complete */
@media(min-width:900px){.gallery .g2 img{object-position:center}}
@media(max-width:900px){.gallery .g2{aspect-ratio:21/9}}

@media(max-width:900px){.gallery .g6{grid-column:span 2;aspect-ratio:21/9}.gallery .g7,.gallery .g8{grid-column:span 1;aspect-ratio:1/1}}

/* 2b · CHOCOLATE */
#choco{height:190vh}
#choco .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#2A1A12}
#choco .choco-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#choco .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,14,8,.82) 0%,rgba(30,14,8,.5) 42%,rgba(30,14,8,.05) 70%,transparent),linear-gradient(0deg,rgba(30,14,8,.7),transparent 50%)}
#choco .copy{position:absolute;left:clamp(24px,7vw,120px);bottom:clamp(40px,10vh,120px);max-width:min(88vw,620px);color:#fff}
#choco h2{color:#fff;font-size:clamp(38px,6vw,84px);line-height:1}
#choco h2 span{display:block;overflow:hidden} #choco h2 span>*{display:block}
#choco p{margin-top:18px;font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.88);max-width:50ch}
#choco .btn{margin-top:26px;background:var(--yellow);color:var(--ink);box-shadow:0 16px 40px -14px rgba(242,201,76,.6)}
#choco .btn:hover{background:#fff}
@media(max-width:900px){#choco{height:150vh}#choco .copy{left:16px;right:16px;max-width:none;bottom:max(28px,env(safe-area-inset-bottom) + 20px)}#choco h2{font-size:clamp(32px,9.5vw,48px)}#choco p{font-size:15px}}

/* 8 · CHANNELS — 3D flip cards */
.flips{display:grid;grid-template-columns:1fr;gap:22px;perspective:1600px}
@media(min-width:640px){.flips{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.flips{grid-template-columns:repeat(3,1fr)}}
.flip{position:relative;aspect-ratio:4/3;cursor:pointer;outline:none}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1);border-radius:20px}
.flip:hover .flip-inner,.flip.on .flip-inner,.flip:focus-visible .flip-inner{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 28px 60px -34px rgba(60,40,20,.5)}
.flip .front img{width:100%;height:100%;object-fit:cover;display:block}
.flip .front::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,12,8,.78) 0%,rgba(20,12,8,.25) 45%,transparent 70%)}
.flip .front h3{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;font-size:clamp(18px,1.5vw,22px);text-shadow:0 2px 12px rgba(0,0,0,.5);z-index:2}
.flip .badge{position:absolute;top:14px;left:14px;z-index:2;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.flip .badge svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flip .back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,var(--mist));padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line-soft)}
.flip .back .badge{position:static;width:52px;height:52px;background:var(--yellow);box-shadow:none;margin-bottom:6px}
.flip .back h3{font-size:22px}
.flip .back .lead-s{font-family:"Fredoka",sans-serif;font-weight:500;color:var(--sky-deep);font-size:15px;line-height:1.35}
.flip .back p{font-size:14px;color:var(--ink-soft);line-height:1.5}
.flip .back a{margin-top:auto;font-weight:800;font-size:14px;color:var(--ink);text-decoration:none}
.flip .back a:hover{color:var(--sky-deep)}
@media(max-width:640px){.flip .back{padding:16px}.flip .back h3{font-size:19px}.flip .back p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* ───────────────────────── MOBILE v2: linear layout, video films, sticky CTA ───────────────────────── */
.nav-cta .short{display:none}
.mobile-cta{display:none}
@media(max-width:900px){
  .nav-cta .full{display:none} .nav-cta .short{display:inline}
  header{padding:10px 12px}
  header nav{gap:8px}
  .nav-cta{padding:9px 14px;font-size:13px;white-space:nowrap;border-width:2px}
  .lang-flags{gap:4px} .lang-flags button{width:28px;height:20px}
  .brand img{width:56px}
  /* hero: normal flow, text + CTA first */
  #hero{height:auto}
  #hero .stage{position:relative;height:auto;min-height:0;display:block;padding:calc(72px + env(safe-area-inset-top)) 16px 28px;perspective:none}
  #heroGL,#hero .aura,#hero .motes,#hero .stage::before,#hero .stage::after,#hero .specular{display:none}
  #hero .hero-inner{display:flex;flex-direction:column;gap:12px;transform:none!important;opacity:1!important;width:100%}
  #hero .hero-copy{order:1;text-align:left;padding:0}
  #hero .hero-product{order:2;align-items:center;gap:8px}
  #hero .latin{font-size:11px;margin-bottom:8px;opacity:1!important}
  #hero h1{font-size:clamp(30px,8.4vw,42px);line-height:1;opacity:1!important;clip-path:none!important;transform:none!important}
  #hero .sub{font-size:15px;margin-top:10px;opacity:1!important;transform:none!important}
  #hero .hero-btns{margin-top:14px;flex-direction:column;opacity:1!important;transform:none!important}
  #hero .hero-btns .btn{width:100%;text-align:center;padding:15px 18px;font-size:16px}
  #hero .hero-btns .btn-primary{background:var(--yellow);color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
  #hero .hero-btns .btn-ghost{border-color:rgba(255,255,255,.8);color:#fff}
  #hero .media-float{animation:none}
  #hero .hero-media{height:min(38vh,320px);opacity:1!important;transform:none!important;filter:drop-shadow(0 20px 26px rgba(60,20,0,.4))}
  #hero .hero-label{opacity:1;transform:none;font-size:13px;flex-wrap:wrap;justify-content:center;text-align:center}
  #hero .hero-thumbs{opacity:1;display:flex;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 10px;gap:8px;justify-content:flex-start}
  #hero .hero-thumbs button{flex:0 0 46px;height:54px}
  /* films: real video + caption list */
  .film{height:auto;padding-bottom:10px}
  .film .stage{position:relative;height:auto;aspect-ratio:16/9;background:#FBF8F2;overflow:hidden}
  .film .film-canvas,.film .loader,.film .film-fallback{display:none!important}
  .film .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .film .caps{position:static;width:auto;padding:16px 16px 4px;text-align:left;pointer-events:auto}
  .film .cap{position:static;opacity:1!important;transform:none!important;font-size:17px;line-height:1.3;margin-bottom:10px;padding-left:12px;border-left:3px solid var(--yellow);text-shadow:none}
  .film .cap em{display:inline;margin-right:8px;font-size:11px}
  /* pinned sections become normal blocks */
  #choco,#origin{height:auto}
  #choco .pin,#origin .pin{position:relative;height:auto;min-height:0}
  #choco .choco-video,#origin .bg{position:relative;inset:auto;height:auto;aspect-ratio:16/10;width:100%}
  #origin .bg img{transform:none!important;height:100%}
  #choco .veil,#origin .veil{background:linear-gradient(0deg,rgba(20,12,8,.92) 40%,rgba(20,12,8,.3) 70%,transparent)}
  #choco .copy,#origin .copy{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:0 16px 28px;margin-top:-18vh}
  #choco h2 span>*,#origin h2 span>*{transform:none!important}
  #choco .copy p,#choco .copy .btn,#origin .copy p{opacity:1!important;transform:none!important}
  /* sticky register bar */
  .mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;padding:15px 18px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:16px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);border:2px solid var(--yellow)}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(5vh + 70px)}
  /* lighter sections */
  #lines,#flavors,#process,#b2b,#moments{padding-block:7vh}
  .head{margin-bottom:24px} .head h2{font-size:clamp(28px,8vw,38px)} .head .lead{font-size:15px}
  #cta{height:auto} #cta .stage{position:relative;height:auto;min-height:0;padding:56px 16px}
  #cta video,#cta .cta-poster{display:none} #cta .dim{opacity:1!important;position:absolute;inset:0;background:linear-gradient(160deg,#FBF8F2,#F3EEE2)}
  #cta .content{opacity:1!important;transform:none!important}
}

/* desktop section indicator */
#secbar{position:fixed;top:calc(74px + env(safe-area-inset-top));left:clamp(18px,4vw,54px);z-index:49;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 12px 6px 7px;font-size:12px;font-weight:700;box-shadow:0 8px 20px -10px rgba(0,0,0,.6);transition:transform .35s,opacity .35s;opacity:0;transform:translateY(-6px);pointer-events:none;font-family:"Nunito",sans-serif}
#secbar.show{opacity:1;transform:none}
#secbar #secnum{background:var(--yellow);color:var(--ink);border-radius:999px;padding:2px 8px;font-family:"Fredoka",sans-serif}
#secbar #seccount{opacity:.6;font-weight:600}
header.hidden ~ main #secbar{top:16px}
.nature-points{grid-template-columns:1fr 1fr}
@media(max-width:700px){.nature-points{grid-template-columns:1fr}}

.nature-points li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:0;overflow:hidden;background:rgba(255,255,255,.14)}
.nature-points li img{width:96px;height:96px;object-fit:cover;display:block}
.nature-points li div{padding:10px 12px 10px 0}
.nature-points li b{display:block;white-space:normal;margin-bottom:2px}
@media(max-width:700px){.nature-points li{flex-direction:row}}

.nature-points li img{transition:transform 6s ease-out}
.nature-points li.in img{transform:scale(1.12)}
.nature-points li{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.nature-points li.in{opacity:1;transform:none}