/* ============================================================
NATURALICA FOODS — shared design system
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Caveat:wght@500;600&display=swap');
:root{
--ink:#16281A;
--ink-soft:#2E4432;
--muted:#5F7263;
--muted-2:#8C9B8D;
--line:#E3E6DA;
--line-soft:#EDEFE4;
--paper:#F7F5EC;
--paper-2:#EFEDE0;
--white:#FFFFFF;
--lime:#A2D45E;
--lime-deep:#6FA33A;
--green:#2E5B3C;
--cocoa:#241812;
--cocoa-2:#2E2019;
--r-sm:8px;
--r-md:14px;
--r-lg:22px;
--r-xl:32px;
--maxw:1240px;
--pad:clamp(20px,5vw,64px);
--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
color:var(--ink);
background:var(--paper);
line-height:1.65;
font-size:17px;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.06;letter-spacing:-.02em;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.gr{color:var(--lime-deep)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.55em;
font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
padding:14px 26px;border-radius:100px;border:1.5px solid transparent;
cursor:pointer;transition:all .35s var(--ease);white-space:nowrap;
}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-primary:hover{background:#B5E272;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#0B160D;transform:translateY(-2px)}
/* ---------- eyebrow ---------- */
.eyebrow{
font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--lime-deep);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;display:inline-block}
/* ============================================================
NAV
============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s var(--ease)}
.nav-row{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.nav-top .nav-row{height:62px}
.nav-logo{position:relative;display:grid;align-items:center;height:30px}
.nav-logo img{grid-area:1/1;height:30px;width:auto;transition:opacity .3s}
.nav-logo .logo-dark{opacity:0}
.nav.scrolled .nav-logo .logo-light{opacity:0}
.nav.scrolled .nav-logo .logo-dark{opacity:1}
.nav-company{display:flex;align-items:center;gap:30px;list-style:none}
.nav-company a{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;transition:color .25s}
.nav-company a:hover{color:var(--lime)}
.nav.scrolled .nav-company a{color:var(--ink-soft)}
.nav.scrolled .nav-company a:hover{color:var(--lime-deep)}
.lang-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:6px 12px;border-radius:8px;cursor:pointer;transition:.25s}
.lang-pill:hover{background:rgba(255,255,255,.15)}
.lang-pill svg{border-radius:2px;display:block}
.nav.scrolled .lang-pill{color:var(--ink-soft);border-color:var(--line)}
.nav.scrolled .lang-pill:hover{background:var(--paper)}
.nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:101}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}
.nav.scrolled .burger span{background:var(--ink)}
/* ---------- mobile menu ---------- */
.mmenu{position:fixed;inset:0;z-index:98;background:var(--cocoa);display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
body.menu-open .mmenu{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mmenu a{font-family:'Outfit';font-weight:700;font-size:clamp(24px,6.5vw,32px);color:#fff;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mmenu a.sm{font-family:'Inter';font-weight:500;font-size:16px;color:rgba(255,255,255,.65);padding:8px 0;border-bottom:none}
.mmenu .mtag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);font-weight:700;margin:24px 0 6px}
body.menu-open .nav{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-open .burger span{background:#fff}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open .nav-logo .logo-light{opacity:1!important}
body.menu-open .nav-logo .logo-dark{opacity:0!important}
.nav-pillars{background:var(--lime);width:100%}
.nav-pills{display:flex;align-items:stretch;list-style:none;justify-content:center;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.nav-pills a{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;transition:background .25s;white-space:nowrap}
.nav-pills a:hover,.nav-pills a.active{background:rgba(255,255,255,.35)}
/* ============================================================
HERO
============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--cocoa)}
.hero-video,.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(16,24,14,.82) 0%,rgba(16,24,14,.48) 45%,rgba(16,24,14,.22) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,9vh,110px);padding-top:130px}
.hero h1{color:#fff;font-weight:700;font-size:clamp(40px,6.4vw,86px);max-width:15ch;letter-spacing:-.03em}
.hero h1 .dot{color:var(--lime)}
.hero .sub{color:rgba(255,255,255,.88);font-size:clamp(16px,1.6vw,20px);max-width:52ch;margin-top:24px;font-weight:400;line-height:1.55}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(28px,5vw,72px);margin-top:54px;flex-wrap:wrap;padding-top:34px;border-top:1px solid rgba(255,255,255,.22);max-width:760px}
.stat .num{font-family:'Outfit';font-size:clamp(34px,4.2vw,52px);font-weight:700;color:#fff;line-height:1}
.stat .num span{color:var(--lime)}
.stat .lbl{color:rgba(255,255,255,.78);font-size:14px;margin-top:8px;max-width:18ch}
/* short page hero (subpages) */
.hero.short{min-height:72vh}
/* ============================================================
SECTIONS
============================================================ */
section{position:relative}
.sec-pad{padding:clamp(72px,11vh,140px) 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4vw,52px);margin-top:18px;color:var(--ink)}
.sec-head p{color:var(--muted);margin-top:20px;font-size:18px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
/* ---------- under-hero strip ---------- */
.certstrip{background:var(--white);border-bottom:1px solid var(--line);padding:34px 0 30px}
.certstrip .ptitle{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);text-align:center;margin-bottom:26px}
/* ---------- logo marquee ---------- */
.lmq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);padding:6px 0}
.lmq-track{display:flex;width:max-content;animation:lmq 34s linear infinite}
.lmq.rev .lmq-track{animation-direction:reverse}
.lmq:hover .lmq-track{animation-play-state:paused}
.lmq-set{display:flex;align-items:center;gap:clamp(44px,6vw,84px);padding-right:clamp(44px,6vw,84px)}
.lmq-set img{height:32px;width:auto;filter:grayscale(100%);opacity:.55;transition:.3s}
.lmq-set img:hover{filter:none;opacity:1}
.lmq.awards .lmq-set img{height:56px}
@keyframes lmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- dark brands band ---------- */
.brandband{position:relative;overflow:hidden;background:var(--cocoa);color:#fff;text-align:center}
.brandband .bb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.brandband .bb-tint{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,16,10,.55),rgba(26,16,10,.88))}
.brandband .wrap{position:relative;z-index:2;padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(70px,10vh,120px)}
.bb-logos{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;margin-bottom:44px}
.bb-item{display:flex;align-items:center;justify-content:center;padding:14px 24px}
.bb-item + .bb-item{border-left:1px solid rgba(255,255,255,.22)}
.bb-logos img{height:clamp(44px,4.6vw,60px);width:auto}
.bb-logos .myfrida{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(23px,2.4vw,31px);line-height:.94;letter-spacing:-.01em;color:#fff;text-align:left;text-transform:uppercase}
.brandband h2{font-size:clamp(28px,3.6vw,46px);color:#fff}
.brandband p{color:rgba(255,255,255,.78);max-width:62ch;margin:16px auto 0;font-size:17px}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,90px);align-items:center}
.split-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.1}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img .tag{position:absolute;left:22px;bottom:22px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:12px 18px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--ink)}
.split-img.cut{background:var(--white);border:1px solid var(--line)}
.split-img.cut img{object-fit:contain;padding:clamp(16px,3vw,36px)}
.split-img.dark{background:#000;border:none;aspect-ratio:16/10}
.split-img.dark img{object-fit:contain}
/* ---------- why icon grid ---------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.whygrid.c2{grid-template-columns:repeat(2,1fr)}
.why{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;transition:.4s var(--ease)}
.why:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(22,40,26,.35);border-color:transparent}
.why .wic{width:52px;height:52px;border-radius:14px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px}
.why h3{font-size:19px;font-weight:600}
.why p{font-size:14.5px;color:var(--muted);margin-top:8px}
/* ---------- category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 22px;color:#fff;background:var(--cocoa)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s var(--ease)}
.cat:hover img{transform:scale(1.06)}
.cat::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,10,6,.85) 0%,rgba(14,10,6,.25) 45%,rgba(14,10,6,.05) 70%,transparent)}
.cat h3{font-size:20px;position:relative;z-index:2;font-weight:600}
.cat p{font-size:13.5px;color:rgba(255,255,255,.8);position:relative;z-index:2;margin-top:6px;line-height:1.45}
.cat .cidx{position:absolute;top:20px;left:20px;z-index:2;background:var(--lime);color:var(--ink);font-family:'Outfit';font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:100px}
.cat.wide{grid-column:span 2}
/* ---------- ChoBiotics band ---------- */
.chob{background:var(--cocoa);color:#fff;overflow:hidden}
.chob .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:center}
.chob h2{color:#fff;font-size:clamp(28px,3.6vw,46px)}
.chob p{color:rgba(255,255,255,.78)}
.chob .chip-img{border-radius:var(--r-lg);overflow:hidden}
.chob .chip-img img{width:100%;height:100%;object-fit:cover}
.chob ul{list-style:none;margin-top:26px}
.chob li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-size:15.5px}
.chob li::before{content:"✓";color:var(--lime);font-weight:700;flex:0 0 auto}
/* ---------- ticks ---------- */
.ticks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tick{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;transition:.35s var(--ease)}
.tick:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(22,40,26,.35)}
.tick .tk{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
/* ---------- partner & award logos ---------- */
.partners{padding:clamp(56px,8vh,90px) 0;border-top:1px solid var(--line);text-align:center;background:var(--white)}
.partners .ptitle{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:30px}
/* ---------- founder quote ---------- */
.vision{background:var(--paper)}
.vision .wrap{display:grid;grid-template-columns:1fr 1.3fr auto;gap:clamp(36px,5vw,70px);align-items:start}
.vision h2{font-size:clamp(28px,3.4vw,42px)}
.vision .vtxt p{color:var(--muted);margin-top:18px;font-size:16.5px}
.vision .vtxt p strong{color:var(--ink)}
.vsig .vn{font-family:'Outfit';font-weight:700;font-size:19px}
.vsig .vr{font-size:14px;color:var(--muted)}
.vsig .sig{font-family:'Outfit';font-style:italic;color:var(--lime-deep);font-size:34px;margin-top:18px;transform:rotate(-4deg)}
/* ---------- CTA banner ---------- */
.cta{background:var(--green);color:#fff;position:relative;overflow:hidden}
.cta .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta .cta-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(14,22,12,.8) 0%,rgba(14,22,12,.55) 50%,rgba(14,22,12,.7) 100%)}
.cta::after{content:"";position:absolute;right:-120px;bottom:-180px;width:520px;height:520px;border-radius:50%;border:60px solid rgba(162,212,94,.12)}
.cta .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{font-size:clamp(28px,3.6vw,46px);color:#fff;max-width:17ch}
.cta .cbtns{display:flex;gap:14px;flex-wrap:wrap}
.cta .btn-white{background:var(--lime);color:var(--ink)}
.cta .btn-white:hover{transform:translateY(-2px);background:#B5E272}
.cta .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta .btn-outline:hover{background:rgba(255,255,255,.12)}
.cta .cmeta{color:rgba(255,255,255,.72);font-size:14px;margin-top:20px;line-height:1.8}
/* ============================================================
SUBPAGE HELPERS
============================================================ */
.crumb{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);border-radius:100px;padding:9px 18px;font-size:13.5px;font-weight:600;color:#fff;margin-bottom:26px}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--lime)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block}
/* product category blocks */
.pcat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(44px,7vh,80px) 0;border-top:1px solid var(--line)}
.pcat:first-of-type{border-top:none}
.pcat .pimg{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.4;background:var(--cocoa)}
.pcat .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcat:hover .pimg img{transform:scale(1.04)}
.pcat.flip .pimg{order:2}
.pcat h3{font-size:clamp(24px,2.8vw,34px)}
.pcat .pnum{font-family:'Outfit';font-weight:700;color:var(--lime-deep);font-size:14px;letter-spacing:.14em}
.pcat .pdesc{color:var(--muted);margin-top:14px;font-size:16px}
.taglists{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.taglists h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:500}
.tags.dark span{background:var(--paper-2);border-color:transparent}
.tags .duo{background:var(--ink);color:#fff;border-color:transparent}
/* packaging */
.packgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pack{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:28px}
.pack h3{font-size:18px;font-weight:600;display:flex;align-items:center;gap:12px}
.pack h3 .ic{width:40px;height:40px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:19px}
.pack ul{list-style:none;margin-top:16px}
.pack li{padding:9px 0;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.pack li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:0 0 auto}
/* cert grid */
.certgrid{display:flex;flex-wrap:wrap;gap:clamp(26px,3.6vw,54px);align-items:center;justify-content:center}
.certgrid img{height:74px;width:auto}
/* stats band (dark) */
.statband{background:var(--ink);color:#fff}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:clamp(48px,7vh,72px);padding-bottom:clamp(48px,7vh,72px)}
.statband .num{font-family:'Outfit';font-size:clamp(32px,3.6vw,50px);font-weight:700}
.statband .num span{color:var(--lime)}
.statband .lbl{color:rgba(255,255,255,.7);font-size:14px;margin-top:6px}
/* country pills */
.countries{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.countries span{background:var(--white);border:1px solid var(--line);padding:8px 16px;border-radius:100px;font-size:13.5px;font-weight:500}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);aspect-ratio:4/3}
.gal .tall{grid-row:span 2;aspect-ratio:auto}
/* ============================================================
STICKY CONTACT + CONTACT FORM
============================================================ */
.sticky-contact{
position:fixed;right:22px;bottom:22px;z-index:97;
display:inline-flex;align-items:center;gap:10px;
background:var(--lime);color:var(--ink);font-weight:700;font-size:15px;
padding:15px 24px;border-radius:100px;
box-shadow:0 14px 34px -10px rgba(22,40,26,.5);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
animation:scpulse 2.6s ease-out infinite;
}
.sticky-contact:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(22,40,26,.55)}
.sticky-contact .ic{font-size:18px;line-height:1}
@keyframes scpulse{
0%{outline:0 solid rgba(162,212,94,.5)}
55%{outline:14px solid rgba(162,212,94,0)}
100%{outline:0 solid rgba(162,212,94,0)}
}
@media(max-width:680px){
.sticky-contact{right:14px;bottom:14px;padding:13px 20px;font-size:14px}
}
.cgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.cform{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3.8vw,48px)}
.cform label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 9px}
.cform .frow label,.cform label:first-of-type{margin-top:0}
.cform .frow{margin-top:26px}
.cform .frow:first-of-type{margin-top:0}
.cform input,.cform textarea{
width:100%;background:var(--paper);border:1.5px solid transparent;border-radius:12px;
padding:14px 18px;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
transition:all .25s;outline:none;
}
.cform input:hover,.cform textarea:hover{border-color:var(--line)}
.cform input:focus,.cform textarea:focus{border-color:var(--lime-deep);background:#fff}
.cform textarea{min-height:130px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fpills{display:flex;flex-wrap:wrap;gap:9px}
.fpills span{
background:var(--paper);border:1.5px solid transparent;border-radius:100px;
padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;user-select:none;
transition:all .25s var(--ease);
}
.fpills span:hover{border-color:var(--lime-deep)}
.fpills span.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.cform .btn{margin-top:32px;border:none;font-size:15.5px;padding:15px 34px}
@media(max-width:680px){.cform .btn{width:100%;justify-content:center}}
.cthanks{text-align:center;padding:40px 10px}
.cthanks .big{font-size:44px;margin-bottom:14px}
.cthanks h3{font-size:24px;margin-bottom:8px}
.cthanks p{color:var(--muted)}
.cinfo{display:flex;flex-direction:column;gap:16px}
.cinfo .ci{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px}
.cinfo .ci h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep);margin-bottom:8px}
.cinfo .ci a{font-weight:600;display:block;padding:3px 0}
.cinfo .ci a:hover{color:var(--lime-deep)}
.cinfo .ci p{font-size:14.5px;color:var(--muted);line-height:1.7}
@media(max-width:980px){.cgrid{grid-template-columns:1fr}}
@media(max-width:680px){.frow{grid-template-columns:1fr}}
/* ============================================================
FOOTER
============================================================ */
.footer{background:var(--cocoa);color:#fff;padding:clamp(56px,8vh,84px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo img{height:30px;margin-bottom:20px}
.foot-brand p{color:rgba(255,255,255,.6);font-size:14.5px;max-width:30ch}
.foot-col h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);font-weight:700;margin-bottom:18px;font-family:'Inter'}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{color:rgba(255,255,255,.7);font-size:14.5px;transition:.25s}
.foot-col a:hover{color:#fff;padding-left:4px}
.foot-col .addr{color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.7}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:16px}
.foot-bottom p{color:rgba(255,255,255,.45);font-size:13.5px}
.foot-social{display:flex;gap:14px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:15px;transition:.3s}
.foot-social a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
/* ============================================================
REVEAL
============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:1080px){
.cats{grid-template-columns:repeat(2,1fr)}
.ticks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.whygrid,.whygrid.c2{grid-template-columns:1fr 1fr}
.split,.chob .wrap,.pcat{grid-template-columns:1fr}
.pcat.flip .pimg{order:0}
.vision .wrap{grid-template-columns:1fr}
.packgrid{grid-template-columns:1fr}
.statband .wrap{grid-template-columns:1fr 1fr}
.foot-top{grid-template-columns:1fr 1fr}
.gal{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
body{font-size:16px}
.nav-company,.nav-pills,.lang-pill,.nav-pillars{display:none}
.burger{display:flex}
.cats{grid-template-columns:1fr}
.cat.wide{grid-column:span 1}
.whygrid,.whygrid.c2,.ticks{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr;gap:32px}
.cta .wrap{flex-direction:column;align-items:flex-start}
.taglists{grid-template-columns:1fr}
.gal{grid-template-columns:1fr}
.bb-logos{grid-template-columns:1fr;gap:28px}
.bb-item{padding:0}
.bb-item + .bb-item{border-left:none}
.bb-logos img{height:52px}
.bb-logos .myfrida{font-size:27px;text-align:center}
.hero-stats{flex-wrap:nowrap;gap:12px;justify-content:space-between;padding-top:22px;margin-top:40px}
.stat .num{font-size:24px}
.stat .lbl{font-size:10.5px;margin-top:4px;line-height:1.3;max-width:none}
.certstrip .wrap{justify-content:flex-start}
.clogos{overflow-x:auto;width:100%;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.clogos::-webkit-scrollbar{display:none}
.clogos img{height:36px}
.certgrid{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px}
.certgrid::-webkit-scrollbar{display:none}
.certgrid img{height:56px;flex:0 0 auto}
}
/* ============================================================
V2 — premium restyle (2026-08)
============================================================ */
:root{--serif:'Fraunces',Georgia,serif}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.wic{font-size:0;color:var(--green)}
.wic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* hero v2 — montage, video-ready */
.hero2{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#151310;color:#fff}
.hero2 .wrap{position:relative;z-index:3;width:100%;padding-top:120px;padding-bottom:90px}
.hero2 h1{font-family:var(--serif);font-weight:500;font-size:clamp(42px,5.6vw,82px);line-height:1.04;max-width:13ch;letter-spacing:-.015em}
.hero2 h1 em{font-style:italic;color:var(--lime)}
.hero2 .sub{font-size:clamp(18px,1.8vw,23px);color:rgba(255,255,255,.92);margin-top:26px;max-width:34ch;font-weight:500;line-height:1.45}
.hero2 .subsm{font-size:15px;color:rgba(255,255,255,.62);margin-top:16px;max-width:46ch;line-height:1.7}
.hero2-media{position:absolute;inset:0;z-index:1;display:flex;justify-content:flex-end}
.hero2-media video{width:100%;height:100%;object-fit:cover}
.strips{display:flex;height:100%;width:62%;transform:skewX(-8deg) translateX(6%);gap:6px}
.strips .strip{flex:1;overflow:hidden;position:relative}
.strips .strip img{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;transform:skewX(8deg) scale(1.15);animation:kenb 18s ease-in-out infinite alternate}
.strips .strip:nth-child(2) img{animation-delay:-6s}
.strips .strip:nth-child(3) img{animation-delay:-12s}
.strips .strip:nth-child(4) img{animation-delay:-3s}
.strips .strip:nth-child(5) img{animation-delay:-9s}
@keyframes kenb{from{transform:skewX(8deg) scale(1.12) translateY(-1.5%)}to{transform:skewX(8deg) scale(1.22) translateY(1.5%)}}
.hero2-tint{position:absolute;inset:0;z-index:2;background:linear-gradient(95deg,#151310 34%,rgba(21,19,16,.72) 52%,rgba(21,19,16,.15) 78%,rgba(21,19,16,.35) 100%)}
.hero2 .play{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hero2 .play .pc{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center}
.hero2 .play .pc svg{width:14px;height:14px;fill:#fff;stroke:none}
/* stat bar v2 */
.statbar{background:var(--white);border-bottom:1px solid var(--line)}
.statbar .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-top:38px;padding-bottom:38px}
.sb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 6px;border-left:1px solid var(--line)}
.sb:first-child{border-left:none}
.sb .num{font-family:'Outfit';font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--ink)}
.sb .num em{font-style:normal;color:var(--lime-deep)}
.sb .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
/* three brands v2 */
.brands2{background:#121110;color:#fff}
.brands2 .wrap{display:grid;grid-template-columns:.85fr 2fr;gap:clamp(30px,4vw,60px);align-items:center}
.brands2 h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,52px);line-height:1.1;color:#fff}
.brands2 h2 em{font-style:italic;color:var(--lime)}
.brands2 .bl p{color:rgba(255,255,255,.68);margin-top:18px;font-size:16.5px;max-width:30ch}
.brands2 .bl a{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:var(--lime);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bcard{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:420px;display:flex;flex-direction:column;padding:26px 22px;transition:transform .4s var(--ease)}
.bcard:hover{transform:translateY(-6px)}
.bcard .blogo{height:54px;display:flex;align-items:flex-start;margin-bottom:14px}
.bcard .blogo img{max-height:100%;width:auto;max-width:80%;object-fit:contain}
.bcard p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.75);max-width:24ch}
.bcard .bimg{position:absolute;left:0;right:0;bottom:0;top:38%;overflow:hidden}
.bcard .bimg img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease)}
.bcard:hover .bimg img{transform:scale(1.05)}
.bcard .ar2{position:absolute;bottom:18px;left:22px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;z-index:2;background:rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.bcard.myfrida{background:#173224}
.bcard.teta{background:#241812}
.bcard.tante{background:#231428}
.bcard .bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 40%)}
.bcard.myfrida .bimg::after{background:linear-gradient(to bottom,#173224,transparent 45%)}
.bcard.teta .bimg::after{background:linear-gradient(to bottom,#241812,transparent 45%)}
.bcard.tante .bimg::after{background:linear-gradient(to bottom,#231428,transparent 45%)}
/* concept-to-consumer steps */
.steps{background:var(--paper)}
.steps .shead{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:52px}
.steps h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.08}
.steps h2 em{font-style:italic;color:var(--lime-deep)}
.steps .shead p{color:var(--muted);font-size:16.5px;max-width:44ch}
.srow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.sstep{position:relative;padding:0 14px 0 0;text-align:center}
.sstep .sic{width:56px;height:56px;margin:0 auto;border-radius:50%;border:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.sstep .sarr{position:absolute;top:28px;right:-9px;color:var(--muted-2);z-index:3;font-size:14px}
.sstep::before{content:"";position:absolute;top:28px;left:calc(50% + 32px);right:calc(-50% + 32px);height:1px;background:var(--line)}
.sstep:last-child::before{display:none}
.sstep h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;margin-top:16px;line-height:1.35}
.sstep .simg{margin-top:18px;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/.95}
.sstep .simg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sstep:hover .simg img{transform:scale(1.06)}
/* manufactured with purpose */
.mfg{background:#151310;color:#fff}
.mfg .wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(30px,5vw,70px);align-items:center}
.mfg h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,52px);line-height:1.08;color:#fff}
.mfg h2 em{font-style:italic;color:var(--lime)}
.mfg p{color:rgba(255,255,255,.7);margin-top:20px;font-size:16px;max-width:40ch}
.mfg .mlinks{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.mfg .mlinks a{color:var(--lime);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.mimgs{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.mimgs img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.mimgs .tall{grid-row:span 2}
.mcerts{display:flex;gap:clamp(20px,3vw,40px);align-items:center;margin-top:26px;flex-wrap:wrap}
.mcerts img{height:52px;width:auto;opacity:.9}
.mfact{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:26px;flex-wrap:wrap}
.mfact span{font-size:13px;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:8px}
.mfact span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
/* science meets indulgence */
.science{background:#0F0D0B;color:#fff;overflow:hidden}
.science .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.science .eyebrow{color:var(--lime)}
.science h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.8vw,56px);line-height:1.06;color:#fff;margin-top:18px}
.science h2 em{font-style:italic;color:var(--lime)}
.science .sp{color:rgba(255,255,255,.72);margin-top:20px;font-size:16.5px;max-width:46ch}
.fx{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.fx span{border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:9px 18px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);transition:.3s}
.fx span:hover{border-color:var(--lime);color:var(--lime)}
.sci-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.05;background:#000}
.sci-img img{width:100%;height:100%;object-fit:cover}
.sci-note{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(15,13,11,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:16px 18px;font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.5}
.sci-note b{color:var(--lime)}
.sci-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.sci-facts .f h4{font-family:'Outfit';font-size:17px;color:#fff;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.sci-facts .f h4 .wic{color:var(--lime)}
.sci-facts .f h4 .wic svg{width:22px;height:22px}
.sci-facts .f p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.55}
/* globe */
.globe-sec{background:var(--paper)}
.globe-sec .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,60px);align-items:center}
.globe-sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.08}
.globe-sec h2 em{font-style:italic;color:var(--lime-deep)}
.globe-sec .gp{color:var(--muted);margin-top:18px;font-size:16px;max-width:42ch}
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.gchips button{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:8px 15px;font-family:'Inter';font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:.25s}
.gchips button:hover,.gchips button.on{background:var(--green);border-color:var(--green);color:#fff}
.gwrap{position:relative;aspect-ratio:1;max-width:640px;margin:0 auto;width:100%}
.gwrap canvas{width:100%;height:100%}
.gtip{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:100px;padding:8px 18px;font-size:13.5px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.gtip.show{opacity:1}
.gtip small{color:var(--lime);font-weight:500;margin-left:8px}
/* founder editorial */
.founder{background:var(--paper-2)}
.founder .wrap{display:grid;grid-template-columns:1.25fr .8fr;gap:clamp(36px,6vw,90px);align-items:center}
.founder blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.9vw,42px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.founder blockquote em{font-style:italic;color:var(--lime-deep)}
.founder .fby{margin-top:30px;display:flex;align-items:center;gap:16px}
.founder .fby .fn{font-weight:700;font-family:'Outfit';font-size:17px}
.founder .fby .fr{font-size:14px;color:var(--muted)}
.founder .fimg{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/3.7}
.founder .fimg img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.founder .fp{color:var(--muted);font-size:15.5px;margin-top:22px;max-width:52ch}
/* audiences CTA */
.aud{background:#151310;color:#fff}
.aud h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.8vw,54px);text-align:center;color:#fff;line-height:1.1}
.aud h2 em{font-style:italic;color:var(--lime)}
.aud .asub{text-align:center;color:rgba(255,255,255,.65);margin:16px auto 0;max-width:56ch;font-size:16px}
.acards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
.acard{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:28px 24px;display:flex;flex-direction:column;transition:.35s var(--ease);min-height:220px}
.acard:hover{border-color:var(--lime);transform:translateY(-4px)}
.acard .wic{color:var(--lime);margin-bottom:16px}
.acard h3{font-size:17px;font-weight:600;color:#fff;line-height:1.35}
.acard p{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.55;flex:1}
.acard a{color:var(--lime);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:18px;display:inline-flex;gap:6px}
/* v2 responsive */
@media(max-width:1080px){
.statbar .wrap{grid-template-columns:repeat(3,1fr);row-gap:26px}
.sb:nth-child(4){border-left:none}
.srow{grid-template-columns:repeat(3,1fr);row-gap:34px}
.sstep::before{display:none}
.sstep .sarr{display:none}
.acards{grid-template-columns:1fr 1fr}
.bcards{grid-template-columns:1fr 1fr}
.brands2 .wrap{grid-template-columns:1fr}
.sci-facts{grid-template-columns:1fr}
}
@media(max-width:900px){
.hero2-media{opacity:.35}
.strips{width:100%;transform:skewX(-8deg) translateX(10%)}
.mfg .wrap,.science .wrap,.globe-sec .wrap,.founder .wrap{grid-template-columns:1fr}
.founder .fimg{max-width:420px}
.steps .shead{grid-template-columns:1fr}
}
@media(max-width:640px){
.statbar .wrap{grid-template-columns:repeat(2,1fr)}
.sb{border-left:none}
.srow{grid-template-columns:1fr 1fr}
.bcards{grid-template-columns:1fr}
.acards{grid-template-columns:1fr}
.bcard{min-height:360px}
}
.sticky-contact .wic{color:var(--ink);display:flex}
.sticky-contact .wic svg{width:20px;height:20px}
.sb .wic svg{width:22px;height:22px}
.sstep .sic svg{width:24px;height:24px}
/* ============================================================
V3 — back-to-v1 typography + premium components (2026-08-28)
============================================================ */
/* v2 classes reused on v3 page → force Outfit, kill serif italics */
.science h2,.globe-sec h2,.founder blockquote,.mfg h2{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.02em}
.science h2 em,.globe-sec h2 em,.mfg h2 em,.founder blockquote em{font-style:normal}
/* ---------- premium pill buttons ---------- */
.btn{padding:15px 30px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.01em}
.btn .arx{display:inline-block;font-size:15px;transition:transform .35s var(--ease)}
.btn:hover .arx{transform:translate(3px,-3px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 18px 38px -18px rgba(0,0,0,.55)}
.btn-glass{background:rgba(84,98,88,.38);color:#fff;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(84,98,88,.58);transform:translateY(-2px)}
/* ---------- liquid glass panel ---------- */
.glass{
background:rgba(18,24,16,.34);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(20px) saturate(150%);
-webkit-backdrop-filter:blur(20px) saturate(150%);
border-radius:var(--r-xl);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 34px 70px -34px rgba(0,0,0,.6);
}
/* ---------- premium pills (chips) ---------- */
.pillrow{display:flex;flex-wrap:wrap;gap:10px}
.pill{
border-radius:999px;padding:11px 22px;font-size:12.5px;font-weight:600;
letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.92);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:.3s var(--ease);white-space:nowrap;
}
.pill:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.pill.lt{color:var(--ink-soft);background:#fff;border-color:var(--line);box-shadow:0 12px 26px -20px rgba(22,40,26,.45)}
.pill.lt:hover{border-color:var(--lime-deep);color:var(--lime-deep)}
/* ---------- laurels ---------- */
.laurel{display:inline-flex;align-items:center;gap:5px}
.laurel img{height:56px;width:auto;opacity:.9}
.laurel .lt{text-align:center;line-height:1.3;padding:0 3px;color:#fff}
.laurel .l1{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px}
.laurel .l2{display:block;font-family:'Outfit';font-weight:600;font-size:13.5px;color:rgba(255,255,255,.94)}
.hero-laurels{display:flex;gap:clamp(20px,3.4vw,48px);margin-top:46px;flex-wrap:wrap;align-items:center}
/* ---------- hero glass panel ---------- */
.hero-glass{padding:clamp(30px,4.4vw,54px);max-width:820px;background:rgba(14,20,12,.3)}
/* ---------- science v3 — melting chocolate bg ---------- */
.sci3{position:relative;background:#12100D;color:#fff;overflow:hidden}
.sci3-bg{position:absolute;inset:0;overflow:hidden}
.sci3-bg img,.sci3-bg video{width:100%;height:100%;object-fit:cover;opacity:.55;animation:melt 24s ease-in-out infinite alternate}
@keyframes melt{from{transform:scale(1.14) translateY(2.5%)}to{transform:scale(1.3) translateY(-2.5%)}}
.sci3-tint{position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,16,13,.86) 0%,rgba(18,16,13,.5) 55%,rgba(18,16,13,.72) 100%)}
.sci3>.wrap{position:relative;z-index:2}
.sci3 .sgrid{display:grid;grid-template-columns:1.05fr .9fr;gap:clamp(28px,4.6vw,72px);align-items:center}
.sci3 .glass{padding:clamp(28px,3.8vw,50px)}
.sci3 .eyebrow{color:var(--lime)}
.sci3 h2{font-size:clamp(30px,3.8vw,54px);color:#fff;margin-top:16px}
.sci3 .sp{color:rgba(255,255,255,.8);margin-top:18px;font-size:16.5px;max-width:48ch}
.chob-logo{height:40px;width:auto;margin-top:26px;margin-bottom:4px}
.sci3 .pillrow{margin-top:26px}
.sci3 .sfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,6vh,64px)}
.sci3 .sfacts .glass{padding:24px 26px;border-radius:var(--r-lg)}
.sci3 .sfacts h4{font-family:'Outfit';font-size:16.5px;color:#fff;margin-bottom:6px}
.sci3 .sfacts p{font-size:13.5px;color:rgba(255,255,255,.68);line-height:1.55}
/* ---------- manufactured v3 (dark, chocolatey) ---------- */
.mfg3{background:var(--cocoa);color:#fff;overflow:hidden}
.sensory{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:clamp(48px,7vh,84px)}
.sensory .sn{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3}
.sensory .sn img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sensory .sn:hover img{transform:scale(1.06)}
.mfg3 .mgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,72px);align-items:center}
.mfg3 h2{font-family:'Outfit';font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.06;color:#fff;letter-spacing:-.02em}
.mfg3 h2 .dot{color:var(--lime)}
.mfg3 .mp{color:rgba(255,255,255,.72);margin-top:20px;font-size:16px;max-width:42ch}
.mfg3 .mcerts{display:flex;gap:clamp(20px,3vw,40px);align-items:center;margin-top:30px;flex-wrap:wrap}
.mfg3 .mcerts img{height:50px;width:auto;opacity:.9}
.mfactory{position:relative}
.mfactory .fbuild{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.mfactory .fcap{margin-top:14px;font-size:13px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px}
.mfactory .fcap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.mshots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mshots img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);aspect-ratio:16/9.5}
/* stats row inside dark section */
.mstats{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(50px,8vh,90px);padding-top:clamp(38px,5vh,56px)}
.mstat{text-align:center}
.mstat .num{font-family:'Outfit';font-weight:700;font-size:clamp(26px,2.8vw,42px);color:#fff;line-height:1}
.mstat .num em{font-style:normal;color:var(--lime)}
.mstat .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:9px;line-height:1.4}
/* ---------- founder signature ---------- */
.sig2{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(38px,4vw,52px);color:var(--ink);line-height:1;transform:rotate(-3deg);transform-origin:left;margin-bottom:14px}
/* ---------- footer v3 (Website Gorillas style) ---------- */
.footer2{background:var(--cocoa);color:#fff;padding:clamp(70px,10vh,110px) 0 0;overflow:hidden}
.f2-top{display:grid;grid-template-columns:1.25fr auto 1fr 1fr;gap:clamp(34px,4.4vw,70px);padding-bottom:clamp(44px,6vh,64px)}
.f2-cta h2{font-size:clamp(30px,3.2vw,44px);color:#fff;max-width:13ch}
.f2-cta h2 em{font-style:normal;color:var(--lime)}
.f2-cta .btn{margin-top:30px}
.f2-laurels{display:flex;flex-direction:column;gap:24px;justify-content:flex-start}
.f2-col h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:20px;font-family:'Inter'}
.f2-col ul{list-style:none}
.f2-col li{margin-bottom:13px}
.f2-col a{color:rgba(255,255,255,.85);font-size:15px;transition:.25s}
.f2-col a:hover{color:var(--lime)}
.f2-certs{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);align-items:center;padding:36px 0;border-top:1px solid rgba(255,255,255,.1)}
.f2-certs img{height:42px;width:auto;opacity:.8;transition:.3s}
.f2-certs img:hover{opacity:1}
.f2-legal{border-top:1px solid rgba(255,255,255,.1);padding:40px 0;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,4vw,60px)}
.f2-legal p{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.85}
.f2-legal b{color:rgba(255,255,255,.78);font-weight:600}
.f2-legal a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
.f2-legal a:hover{color:var(--lime)}
.f2-eu{display:flex;gap:22px;align-items:center;margin-top:26px;flex-wrap:wrap}
.f2-eu img{height:42px;width:auto}
.f2-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 0;border-top:1px solid rgba(255,255,255,.1)}
.f2-bottom p{font-size:13px;color:rgba(255,255,255,.4)}
.f2-mega{padding:clamp(30px,5vh,60px) var(--pad) clamp(24px,4vh,48px)}
.f2-mega img{width:100%;max-width:1400px;margin:0 auto;height:auto;display:block}
/* ---------- globe v3 extras ---------- */
.gwrap canvas{cursor:grab;touch-action:none}
.gwrap canvas.dragging{cursor:grabbing}
.ghint{margin-top:18px;font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.ghint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
/* ---------- v3 responsive ---------- */
@media(max-width:1080px){
.sci3 .sfacts{grid-template-columns:1fr}
.mstats{grid-template-columns:repeat(3,1fr);row-gap:30px}
.f2-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.sci3 .sgrid,.mfg3 .mgrid{grid-template-columns:1fr}
.sensory{grid-template-columns:repeat(3,1fr);gap:8px}
.f2-legal{grid-template-columns:1fr}
}
@media(max-width:680px){
.sensory{grid-template-columns:1fr 1fr}
.sensory .sn:first-child{grid-column:span 2;aspect-ratio:16/8}
.mstats{grid-template-columns:1fr 1fr}
.f2-top{grid-template-columns:1fr;gap:40px}
.f2-laurels{flex-direction:row;flex-wrap:wrap;gap:18px}
.hero-laurels{gap:14px}
.laurel img{height:46px}
.laurel .l2{font-size:12px}
.hero-glass{padding:26px 22px}
.f2-certs img{height:34px}
.f2-eu img{height:34px}
}
/* tablet nav → burger (links wrap between 680 and ~1024) */
@media(max-width:1024px){
.nav-company,.lang-pill{display:none}
.burger{display:flex}
}
/* ============================================================
V3.1 — feedback round (2026-08-28)
============================================================ */
/* premium nav */
.nav-top .nav-row{height:72px}
.nav-company{gap:34px}
.nav-company a{text-transform:none;font-size:15px;font-weight:500;letter-spacing:.01em}
.lang-pill{border:none;padding:6px 4px;font-weight:500;font-size:14px}
.lang-pill:hover{background:transparent;opacity:.75}
.nav.scrolled .lang-pill{border:none}
.nav.scrolled .lang-pill:hover{background:transparent}
.nav-cta{
display:inline-flex;align-items:center;padding:11px 24px;border-radius:999px;
font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
transition:all .3s var(--ease);
}
.nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav.scrolled .nav-cta{background:var(--ink);border-color:var(--ink);color:#fff}
.nav.scrolled .nav-cta:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
@media(max-width:680px){.nav-cta{display:none}}
/* sticky contact — Website Gorillas card style */
.sticky-contact{
background:#fff;color:var(--ink);gap:12px;
padding:8px 22px 8px 9px;border-radius:999px;font-weight:600;
box-shadow:0 18px 44px -14px rgba(0,0,0,.4);
animation:none;
}
.sticky-contact:hover{transform:translateY(-3px);box-shadow:0 24px 54px -16px rgba(0,0,0,.45)}
.sticky-contact .sc-av{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.sticky-contact .sc-tx{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.sticky-contact .sc-tx b{font-size:14.5px;font-weight:700}
.sticky-contact .sc-tx small{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:680px){.sticky-contact{padding:6px 18px 6px 7px}.sticky-contact .sc-av{width:38px;height:38px}}
/* awards inside brand band (color, like their site) */
.bb-awards{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,38px);justify-content:center;align-items:center;margin-top:56px;padding-top:44px;border-top:1px solid rgba(255,255,255,.16)}
.bb-awards img{height:60px;width:auto}
@media(max-width:680px){.bb-awards img{height:46px}.bb-awards{gap:16px}}
/* science v3.1 — frameless, video right w/ ChoBiotics overlay */
.sci3-tint{background:linear-gradient(100deg,rgba(18,16,13,.94) 0%,rgba(18,16,13,.62) 58%,rgba(18,16,13,.78) 100%)}
.sci3 .sgrid{grid-template-columns:1fr .92fr;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px}
.pill svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sci3 .sfacts{display:flex;flex-direction:column;gap:0;margin-top:42px}
.sci3 .sf{padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
.sci3 .sf h4{font-family:'Outfit';font-size:16.5px;color:#fff;margin-bottom:5px}
.sci3 .sf p{font-size:13.5px;color:rgba(255,255,255,.68);line-height:1.55;max-width:52ch}
.sci-stack{display:flex;flex-direction:column;gap:14px}
.sci-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/0.92;background:#000}
.sci-media img,.sci-media video{width:100%;height:100%;object-fit:cover}
.chob-badge{position:absolute;top:16px;left:16px;background:rgba(15,13,11,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 14px}
.chob-badge img{height:30px;width:auto}
.sci-side{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.4}
.sci-side img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* manufacturing v3.1 — bigger factory */
.mfg3 .mgrid{grid-template-columns:1fr 1.55fr;align-items:center}
.mfactory .fbuild{margin-top:-2%}
.mshots{margin-top:22px}
.mshots img{aspect-ratio:16/9}
@media(max-width:900px){
.sci-side{aspect-ratio:16/9}
}
/* ============================================================
V3.2 — brand-band facts, moving chocolate, no separator lines
============================================================ */
/* brand band: more visible photo */
.brandband .bb-bg{opacity:.5}
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42),rgba(26,16,10,.82))}
/* leaf fact list */
.bb-facts{max-width:880px;margin:44px auto 0}
.bb-facts ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;text-align:left}
.bb-facts li{display:flex;gap:13px;align-items:flex-start;color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.5}
.bb-facts li img{width:19px;height:auto;flex:0 0 auto;margin-top:4px}
.bb-facts li b{color:#fff;font-weight:700}
@media(max-width:680px){.bb-facts ul{grid-template-columns:1fr;gap:13px}}
/* moving chocolate in the science media card */
.sci-media img.pourmove{animation:pour 12s ease-in-out infinite alternate;will-change:transform}
@keyframes pour{from{transform:scale(1.14) translateY(-3.5%)}to{transform:scale(1.26) translateY(3.5%)}}
/* remove separator lines everywhere */
.sci3 .sf{border-top:none;padding:11px 0}
.bb-awards{border-top:none;padding-top:8px}
.mfact{border-top:none;padding-top:0;margin-top:26px}
.mstats{border-top:none;padding-top:0}
.f2-certs{border-top:none}
.f2-legal{border-top:none;padding-top:10px}
.f2-bottom{border-top:none}
/* footer social: real icons, no circles */
.f2-social a{width:auto;height:auto;border:none;border-radius:0;color:rgba(255,255,255,.65)}
.f2-social a:hover{background:transparent;color:var(--lime)}
.f2-social svg{width:22px;height:22px;display:block}
.f2-social{gap:20px}
/* ============================================================
V3.3 — dark logo strip, light intro, science comp, mobile pass
============================================================ */
/* dark retailer strip: video → dark → light intro → dark brands */
.partners.dk{background:var(--cocoa);border-top:none}
.partners.dk .ptitle{color:rgba(255,255,255,.5)}
.partners.dk .lmq-set{gap:clamp(18px,2.6vw,30px);padding-right:clamp(18px,2.6vw,30px)}
.partners.dk .lmq-set img{filter:none;opacity:1;background:#fff;height:60px;padding:14px 22px;border-radius:12px;object-fit:contain;transition:transform .3s var(--ease)}
.partners.dk .lmq-set img:hover{filter:none;transform:translateY(-3px)}
@media(max-width:680px){.partners.dk .lmq-set img{height:48px;padding:11px 16px;border-radius:10px}}
/* light intro section */
.intro{background:var(--paper)}
.intro .sec-head{margin-left:auto;margin-right:auto;margin-bottom:52px}
.sensory.intro-s{margin-bottom:0}
/* brand band logos */
.bb-logos .mf{height:clamp(50px,5.2vw,68px)}
/* science: two aligned rows */
.sgrid2{margin-top:14px;align-items:center}
.sci-side{aspect-ratio:auto;border-radius:var(--r-lg);overflow:hidden}
.sci-side img{aspect-ratio:16/9.6;object-position:center 30%}
.sgrid2 .sfacts{margin-top:0}
/* manufacturing: certs + facts strip in one line */
.mline{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;margin-top:clamp(44px,6vh,68px)}
.mline .mcerts{margin-top:0;flex-wrap:nowrap}
.mline .mfact{margin-top:0;flex-wrap:nowrap}
/* sticky button: icon + pulse + dotted arrow */
.sticky-contact{padding:8px 18px 8px 8px}
.sc-ic{width:44px;height:44px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto}
.sc-ic svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-ic::after{content:"";position:absolute;inset:0;border-radius:50%;animation:scping 2.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes scping{
0%{box-shadow:0 0 0 0 rgba(162,212,94,.55)}
70%{box-shadow:0 0 0 13px rgba(162,212,94,0)}
100%{box-shadow:0 0 0 0 rgba(162,212,94,0)}
}
.sc-arr{display:flex;align-items:center;gap:4px;margin-left:8px;color:var(--muted-2)}
.sc-arr i{width:3.5px;height:3.5px;border-radius:50%;background:currentColor;animation:dotw 1.6s ease-in-out infinite}
.sc-arr i:nth-child(2){animation-delay:.2s}
.sc-arr i:nth-child(3){animation-delay:.4s}
@keyframes dotw{0%,100%{opacity:.3}50%{opacity:1}}
.sc-arr svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- mobile pass ---------- */
@media(max-width:680px){
/* hero: buttons one line, laurels one line */
.hero-cta{flex-wrap:nowrap;gap:10px}
.hero-cta .btn{flex:1;justify-content:center;padding:13px 12px;font-size:13.5px}
.hero-laurels{flex-wrap:nowrap;gap:8px;justify-content:space-between;margin-top:36px}
.laurel{gap:2px}
.laurel img{height:36px}
.laurel .l1{font-size:7.5px;letter-spacing:.14em;margin-bottom:2px}
.laurel .l2{font-size:10.5px;line-height:1.25}
/* three brands */
.bb-logos{gap:24px}
.bb-logos img{height:34px}
.bb-logos .mf{height:40px}
.brandband p{font-size:15px}
.bb-awards img{height:42px}
/* manufacturing: everything one line, clean */
.mline{flex-direction:column;align-items:center;gap:26px}
.mline .mcerts{gap:22px;justify-content:center}
.mline .mcerts img{height:34px}
.mline .mfact{gap:12px;justify-content:center}
.mline .mfact span{font-size:10.5px;white-space:nowrap;letter-spacing:.02em}
.mfactory .fbuild{margin-top:6px}
/* science rows stack: text → video → belly → facts */
.sgrid2{margin-top:0}
.sci-side img{aspect-ratio:16/10}
.sci3 .sgrid{gap:26px}
.sticky-contact .sc-tx small{display:none}
.sticky-contact .sc-tx b{font-size:14px}
}
/* v3.3 fixes: mgrid must stack on mobile (later desktop rule was winning) */
@media(max-width:900px){
.mfg3 .mgrid{grid-template-columns:1fr}
.sci3 .sgrid{grid-template-columns:1fr}
}
@media(max-width:680px){
.mline .mfact{gap:8px}
.mline .mfact span{font-size:10px;gap:5px}
.mfactory .fbuild{max-width:88%;margin:6px auto 0}
}
/* ============================================================
V3.5 — centered hero, beige strip, story row, equal media,
bigger factory, footer polish, unified type scale
============================================================ */
/* hero: vertically + horizontally centered, clean on any screen */
.hero.centered{align-items:center}
.hero.centered .wrap{padding-top:110px;padding-bottom:70px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero.centered h1{max-width:16ch}
.hero.centered .sub{margin-left:auto;margin-right:auto}
.hero.centered .hero-cta{justify-content:center}
.hero.centered .hero-laurels{justify-content:center}
/* retailer strip: same beige as the intro section */
.partners.dk{background:var(--paper)}
.partners.dk .ptitle{color:var(--muted-2)}
.partners.dk .lmq-set img{border:1px solid var(--line);box-shadow:0 14px 30px -22px rgba(22,40,26,.3)}
/* who-we-are story row */
.story{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.story .st{border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;background:var(--white);border:1px solid var(--line)}
.story .st img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.story .st:hover img{transform:scale(1.05)}
.story .st.card img{object-fit:contain;padding:14px}
/* science: video and belly image identical size (4:3) */
.sci3 .sgrid{grid-template-columns:1fr 1fr}
.sci-media{aspect-ratio:4/3}
.sci-side{aspect-ratio:4/3}
.sci-side img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 30%}
/* ChoBiotics badge without the frame */
.chob-badge{background:none;border:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;top:18px;left:18px}
.chob-badge img{height:36px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
/* manufacturing: bigger factory + bigger shots */
.mfg3 .mgrid{grid-template-columns:.8fr 1.35fr}
.mfactory .fbuild{margin-top:0}
.mshots-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(30px,4.5vh,50px)}
.mshots-row img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);aspect-ratio:16/8}
.mcap{font-size:13.5px;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:9px}
.mcap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:0 0 auto}
/* footer cert logos: uniform 1:1 tiles, wrap cleanly */
.f2-certs img{width:62px;height:62px;object-fit:contain}
/* ---------- unified type scale ---------- */
.sec-head h2,.intro h2,.brandband h2,.sci3 h2,.globe-sec h2,.mfg3 h2,.f2-cta h2{font-size:clamp(30px,3.6vw,48px)}
.founder blockquote{font-size:clamp(26px,3vw,40px)}
.sec-head p,.brandband p,.sci3 .sp,.globe-sec .gp,.mfg3 .mp,.founder .fp{font-size:16.5px}
.sci3 .sf p{font-size:14px}
/* ---------- responsive ---------- */
@media(max-width:900px){
.story{grid-template-columns:repeat(3,1fr)}
.story .st:nth-child(4),.story .st:nth-child(5){aspect-ratio:4/3}
.story .st:nth-child(4){grid-column:span 2}
.sgrid2{display:flex;flex-direction:column-reverse;gap:26px}
}
@media(max-width:680px){
.hero.centered .wrap{padding-top:90px}
.story{grid-template-columns:1fr 1fr;gap:10px}
.story .st:nth-child(4){grid-column:auto;aspect-ratio:3/4}
.story .st:nth-child(5){grid-column:span 2;aspect-ratio:16/9}
.mline{gap:20px}
.mcap{font-size:12px;text-align:center}
.f2-top{display:grid;grid-template-columns:1fr 1fr;gap:36px 18px}
.f2-cta{grid-column:1/-1}
.f2-laurels{grid-column:1/-1}
.f2-certs{justify-content:center;gap:18px}
.f2-certs img{width:54px;height:54px}
}
/* who-we-are: video tile spans two columns */
.story .st.wide{grid-column:span 2;aspect-ratio:auto;background:#1a1512;border:none}
.story .st.wide video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
.story .st.wide{grid-column:span 3;aspect-ratio:16/9}
.story .st:nth-child(4){grid-column:auto;aspect-ratio:3/4}
}
@media(max-width:680px){
.story .st.wide{grid-column:span 2;aspect-ratio:16/10}
.story .st:nth-child(4){grid-column:span 2;aspect-ratio:16/9}
}
/* ============================================================
V3.6 — solid gradient backgrounds instead of photo bg
============================================================ */
.sci3-bg,.sci3-tint{display:none}
.sci3{background:radial-gradient(130% 100% at 82% 8%,#33221A 0%,#241812 50%,#190F0A 100%)}
.mfg3{background:linear-gradient(168deg,#2E2019 0%,#241812 52%,#180F09 100%)}
.partners.dk{background:linear-gradient(180deg,#FBF9F2 0%,#F7F5EC 100%)}
.intro{background:linear-gradient(180deg,#F7F5EC 0%,#F3F0E4 100%)}
.globe-sec{background:linear-gradient(180deg,#F7F5EC 0%,#F2EFE2 100%)}
.founder{background:linear-gradient(180deg,#F2EFE2 0%,#EFEDE0 100%)}
/* ============================================================
V3.7 — svg arrows, left hero on desktop, smaller body text,
frameless retailer logos, 3-img story + big video,
full-width factory, science spacing
============================================================ */
/* minimal svg arrow everywhere */
.arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.btn .arx{display:inline-flex}
/* hero: left-center on desktop, centered on mobile */
@media(min-width:681px){
.hero.centered .wrap{align-items:flex-start;text-align:left}
.hero.centered .sub{margin-left:0;margin-right:0}
.hero.centered .hero-cta{justify-content:flex-start}
.hero.centered .hero-laurels{justify-content:flex-start}
}
/* body text smaller, laurel-adjacent scale */
.sec-head p,.brandband p,.sci3 .sp,.globe-sec .gp,.mfg3 .mp,.founder .fp{font-size:15px}
.hero .sub{font-size:clamp(15px,1.4vw,16.5px)}
.bb-facts li{font-size:14.5px}
.sci3 .sf p{font-size:13.5px}
/* retailer logos: frameless, no shadow, lift on hover */
.partners.dk .lmq-set img{background:transparent;border:none;box-shadow:none;padding:0;height:42px;border-radius:0}
.partners.dk .lmq-set img:hover{transform:translateY(-6px)}
.partners.dk .lmq-set{gap:clamp(40px,5.4vw,76px);padding-right:clamp(40px,5.4vw,76px)}
/* who we are: 3 images + big video below */
.story{grid-template-columns:repeat(3,1fr)}
.story .st{aspect-ratio:4/3.3}
.story .st.wide{grid-column:1/-1;aspect-ratio:16/6.6;margin-top:2px;border:none}
/* science: more air between video row and image row */
.sgrid2{margin-top:clamp(34px,5vh,60px)}
/* manufacturing: text, then full-width factory */
.mfg3 .mgrid{display:block}
.mfg3 .mgrid > div:first-child{max-width:640px}
.mfactory{margin-top:clamp(34px,5.5vh,60px)}
.mfactory .fbuild{width:100%;max-width:none}
@media(max-width:900px){
.story .st.wide{grid-column:1/-1;aspect-ratio:16/8}
.sgrid2{gap:34px}
}
@media(max-width:680px){
.partners.dk .lmq-set img{height:32px;padding:0;border:none;box-shadow:none}
.story{grid-template-columns:1fr 1fr}
.story .st:first-child{grid-column:span 2;aspect-ratio:16/10}
.story .st.wide{grid-column:span 2;aspect-ratio:16/9}
.hero.centered .wrap{align-items:center;text-align:center}
}
/* seamless transition: Our Brands photo → solid cocoa → Science gradient */
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42) 0%,rgba(26,16,10,.78) 62%,#190F0A 100%)}
.sci3{background:linear-gradient(180deg,#190F0A 0%,rgba(25,15,10,0) 26%),radial-gradient(130% 100% at 82% 8%,#33221A 0%,#241812 50%,#190F0A 100%)}
/* v3.7 fixes: mobile science order (text→video→facts→belly) — the .sci3 .sgrid
grid rule was out-specifying .sgrid2's flex column-reverse */
@media(max-width:900px){
.sci3 .sgrid.sgrid2{display:flex;flex-direction:column-reverse;gap:30px}
}
@media(max-width:680px){
.sci3 .eyebrow{font-size:10.5px;letter-spacing:.13em;white-space:nowrap}
}
/* FINAL mobile stacking for science grids — must stay last in file */
@media(max-width:900px){
.sci3 .sgrid{grid-template-columns:1fr;gap:28px}
.sci3 .sgrid.sgrid2{display:flex;flex-direction:column-reverse;gap:30px}
}
/* ============================================================
V3.9 — smaller sticky, bigger laurels, tighter strip→intro,
6 pills 2-up mobile, 3:4 media, glass note, fact icons
============================================================ */
/* sticky button smaller */
.sticky-contact{padding:6px 16px 6px 6px;gap:10px;font-size:14px}
.sc-ic{width:38px;height:38px}
.sc-ic svg{width:16px;height:16px}
.sticky-contact .sc-tx b{font-size:13.5px}
.sticky-contact .sc-tx small{font-size:11px}
.sc-arr{margin-left:5px}
.sc-arr svg{width:11px;height:11px}
/* laurels bigger, matching intro pill scale */
.laurel img{height:64px}
.laurel .l1{font-size:10.5px}
.laurel .l2{font-size:15px}
/* less space between logo strip and Who we are */
.partners.dk{padding-bottom:clamp(26px,3.5vh,40px)}
.intro{padding-top:clamp(40px,6vh,72px)}
/* science media both 3:4, bigger */
.sci-media{aspect-ratio:3/4}
.sci-side{aspect-ratio:3/4}
.sci-side img{object-position:center 40%}
/* 96% note: smaller, liquid glass */
.sci-note{
left:14px;right:14px;bottom:14px;border-radius:12px;padding:12px 15px;
font-size:12.5px;line-height:1.5;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
color:rgba(255,255,255,.88);
}
/* fact icons */
.sci3 .sf h4{display:flex;align-items:center;gap:9px}
.sci3 .sf h4 svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sci3 .sf p{padding-left:26px}
@media(max-width:680px){
/* six pills, two per row */
.sci3 .pillrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sci3 .pill{justify-content:center;padding:11px 8px;font-size:10.5px;letter-spacing:.05em;white-space:nowrap;gap:7px}
.sci3 .pill svg{width:13px;height:13px}
.laurel img{height:42px}
.laurel .l1{font-size:8px}
.laurel .l2{font-size:11px}
.sticky-contact{padding:5px 14px 5px 5px}
}
/* stacked view: cap 3:4 media height, keep centered */
@media(max-width:900px){
.sci-media,.sci-side{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
}
/* green-bold highlights: .hl on light sections, .hld on dark */
.hl{color:var(--lime-deep);font-weight:600}
.hld{color:var(--lime);font-weight:600}
/* science facts: more breathing room, fills the 3:4 column */
.sci3 .sf{padding:15px 0}
.sci3 .sp{line-height:1.75}
@media(max-width:680px){.sci3 .sf{padding:11px 0}}
/* ============================================================
V3.10 — Our Brands: simpler desktop composition
============================================================ */
/* wider intro text, then six bullets in ONE column */
.brandband p{max-width:74ch}
.bb-facts{max-width:460px;margin-top:38px}
.bb-facts ul{grid-template-columns:1fr;gap:15px}
/* mobile: award badges 4 per row */
@media(max-width:680px){
.bb-awards{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;align-items:center;gap:16px 10px}
.bb-awards img{height:44px}
.bb-facts ul{gap:13px}
}
/* sticky button sized like a standard pill button (Explore Private Label) */
.sticky-contact{padding:8px 20px 8px 9px;gap:10px;font-size:15px}
.sticky-contact .sc-tx small{display:none}
.sticky-contact .sc-tx b{font-size:15px;font-weight:600}
.sc-ic{width:34px;height:34px}
.sc-ic svg{width:15px;height:15px}
.sc-ic::after{animation:none;box-shadow:0 0 0 0 transparent}
.sc-ic{animation:scping2 2.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes scping2{
0%{box-shadow:0 0 0 0 rgba(162,212,94,.5)}
70%{box-shadow:0 0 0 10px rgba(162,212,94,0)}
100%{box-shadow:0 0 0 0 rgba(162,212,94,0)}
}
@media(max-width:680px){
.sticky-contact{padding:8px 20px 8px 9px}
.sticky-contact .sc-tx b{font-size:14.5px}
}
/* retailer marquee never pauses on hover */
.partners.dk .lmq:hover .lmq-track{animation-play-state:running}
/* ============================================================
V4 — subpage restyle: canonical footer w/ 5 link columns,
professional icons in packaging cards
============================================================ */
.f2-top2{grid-template-columns:1.4fr auto;align-items:start}
.f2-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;padding-bottom:clamp(40px,6vh,56px)}
@media(max-width:1080px){.f2-cols{grid-template-columns:repeat(3,1fr);row-gap:38px}}
@media(max-width:680px){
.f2-top2{grid-template-columns:1fr}
.f2-cols{grid-template-columns:1fr 1fr;gap:32px 18px}
}
/* packaging / generic .ic icon boxes: swapped to line icons by site.js */
.ic{font-size:0;color:var(--green)}
.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* subpage light sections pick up the cream gradient feel */
.hero.short .sub{font-size:clamp(15px,1.4vw,16.5px)}
.hero.short .hero-laurels{margin-top:38px}
/* ============================================================
V4.1 — announcement bar, no eyebrow dash, green strip title,
unified body text, footer laurels row, About Us pass
============================================================ */
/* announcement bar above nav */
.topbar{
position:fixed;top:0;left:0;right:0;z-index:102;
display:flex;align-items:center;justify-content:center;gap:12px;
background:var(--cocoa);height:42px;padding:0 14px;
transition:transform .4s var(--ease);
}
.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:0 0 auto;animation:tbp 2.2s ease-in-out infinite}
@keyframes tbp{0%,100%{opacity:1}50%{opacity:.35}}
.tb-tx{color:rgba(255,255,255,.85);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:6px 16px;font-size:13px;font-weight:600;white-space:nowrap;transition:.3s var(--ease)}
.tb-btn:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.nav{top:42px}
body.scrolled-top .topbar{transform:translateY(-100%)}
body.scrolled-top .nav{top:0}
body.menu-open .topbar{display:none}
@media(max-width:680px){
.topbar{height:40px;gap:9px}
.tb-tx{font-size:11.5px}
.tb-btn{padding:5px 12px;font-size:11.5px}
.nav{top:40px}
}
/* eyebrows without the dash */
.eyebrow::before{display:none}
/* green retailer strip title */
.partners .ptitle{color:var(--lime-deep)}
.partners.dk .ptitle{color:var(--lime-deep)}
/* one body-text size and rhythm everywhere */
p{font-size:15px;line-height:1.7}
.brandband p{line-height:1.7}
.sci3 .sp{line-height:1.7}
/* footer laurels: horizontal row under the CTA */
.f2-top2{display:block}
.f2-top2 .f2-laurels{flex-direction:row;flex-wrap:wrap;gap:clamp(26px,4.5vw,60px);margin-top:44px}
/* About Us: light stat row */
.statlight{background:var(--white);border-bottom:1px solid var(--line)}
.statlight .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:clamp(36px,5vh,54px);padding-bottom:clamp(36px,5vh,54px);text-align:center}
.statlight .num{font-family:'Outfit';font-weight:700;font-size:clamp(26px,2.8vw,40px);color:var(--ink);line-height:1}
.statlight .num span{color:var(--lime-deep)}
.statlight .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:9px}
@media(max-width:680px){.statlight .wrap{grid-template-columns:1fr 1fr;row-gap:28px}}
/* natural-ingredients list: no horizontal lines, cleaner rhythm */
.chob li{border-top:none;padding:8px 0;font-size:15px}
@media(max-width:680px){.chob li{padding:7px 0}}
/* ============================================================
V4.2 — concept-to-consumer journey (pinned cards + dashed path)
============================================================ */
.journey{background:linear-gradient(180deg,#F7F5EC 0%,#F2EFE2 100%);overflow:hidden}
.jwrap{position:relative;max-width:1000px;margin:0 auto;height:1290px}
.jpath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.jpath path{stroke:#B9C2AE;stroke-width:2;stroke-dasharray:8 6;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:jdash 3.2s linear infinite}
@keyframes jdash{to{stroke-dashoffset:-140}}
.jcard{
position:absolute;width:320px;z-index:1;
background:#fff;border:1px solid var(--line);border-radius:22px;padding:9px;
box-shadow:0 28px 55px -34px rgba(22,40,26,.4);
transform:rotate(var(--r,0deg));
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.jcard:hover{transform:rotate(0deg) scale(1.04);z-index:5;box-shadow:0 36px 70px -34px rgba(22,40,26,.5)}
.jpin{position:absolute;top:-15px;left:50%;transform:translateX(-50%);color:var(--lime-deep);z-index:2}
.jpin svg{width:30px;height:30px;filter:drop-shadow(0 3px 5px rgba(22,40,26,.25))}
.jinner{background:var(--paper);border:1px solid var(--line-soft);border-radius:15px;padding:20px 18px 14px}
.jnum{font-family:'Outfit';font-weight:800;font-size:26px;color:var(--lime-deep);display:block;line-height:1;margin-bottom:12px}
.jinner h3{font-size:18px;font-weight:700;line-height:1.25}
.jinner p{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.55}
.jinner img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px;margin-top:14px}
.j1{top:0;left:5%;--r:2.2deg}
.j2{top:150px;right:5%;--r:-2.2deg}
.j3{top:390px;left:9%;--r:-1.8deg}
.j4{top:560px;right:9%;--r:1.8deg}
.j5{top:800px;left:5%;--r:2deg}
.j6{top:950px;right:5%;--r:-2.2deg}
@media(max-width:900px){
.jwrap{height:auto;display:flex;flex-direction:column;gap:30px;align-items:center;max-width:440px}
.jpath{display:none}
.jcard{position:static;width:100%;--r:0deg}
.jcard:hover{transform:scale(1.02)}
}
/* ============================================================
V4.3 — Let's Build Something Together (color-change cards)
============================================================ */
.aud2{background:linear-gradient(180deg,#190F0A 0%,#241812 100%)}
.agrid2{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.acard2{position:relative;overflow:hidden;border-radius:var(--r-md);min-height:360px;display:flex;flex-direction:column}
.acard2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.02);transition:filter .55s var(--ease),transform .7s var(--ease)}
.acard2:hover img{filter:grayscale(0);transform:scale(1.09)}
.acard2::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,4,.94) 0%,rgba(10,7,4,.45) 45%,rgba(10,7,4,.12) 75%,rgba(10,7,4,.25) 100%);z-index:1;transition:opacity .5s}
.a2-arrow{position:absolute;top:16px;right:16px;z-index:2;color:rgba(255,255,255,.8);transition:transform .5s var(--ease),color .5s}
.a2-arrow svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.acard2:hover .a2-arrow{transform:rotate(-45deg);color:var(--lime)}
.a2-body{position:relative;z-index:2;margin-top:auto;padding:20px 18px}
.a2-body h3{font-size:17px;color:#fff;font-weight:700;line-height:1.3}
.a2-body p{font-size:13px;color:rgba(255,255,255,.75);margin-top:7px;line-height:1.55}
.a2-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--lime);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.a2-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.acard2:hover .a2-more svg{transform:translateX(4px)}
@media(max-width:1080px){.agrid2{grid-template-columns:1fr 1fr}.acard2{min-height:300px}}
@media(max-width:680px){.agrid2{grid-template-columns:1fr}.acard2{min-height:230px}.acard2 img{filter:grayscale(0)}}
/* footer after CTA removal: laurels lead the footer */
.f2-top2 .f2-laurels{margin-top:0;padding-bottom:44px}
/* footer: CTA left, laurels right; mobile = CTA only */
.f2-top3{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;padding-bottom:clamp(44px,6vh,60px)}
.f2-cta2 h2{font-size:clamp(26px,2.7vw,38px);color:#fff;max-width:16ch}
.f2-cta2 h2 em{font-style:normal;color:var(--lime)}
.f2-cta2 .btn{margin-top:24px}
.f2-top3 .f2-laurels{margin-top:0;padding-bottom:0;gap:clamp(22px,3vw,44px);flex-wrap:nowrap}
@media(max-width:900px){.f2-top3 .f2-laurels{flex-wrap:wrap}}
@media(max-width:680px){
.f2-top3{justify-content:center;text-align:center}
.f2-cta2 h2{max-width:none}
.f2-top3 .f2-laurels{display:none}
}
/* footer reverted: Got a sweet idea + laurels row below (previous composition) */
.f2-top2{display:block}
.f2-top2 .f2-laurels{margin-top:44px;padding-bottom:0;flex-wrap:wrap;justify-content:flex-start}
@media(max-width:680px){.f2-top2 .f2-laurels{display:flex}}
/* ============================================================
V4.7 — catalog ornaments, bigger + cross-section bleed
============================================================ */
.globe-sec,.journey,.founder{overflow:hidden}
.intro{overflow:visible;z-index:2}
.brandband{z-index:1}
.intro .wrap,.globe-sec .wrap,.journey .wrap,.founder .wrap{position:relative;z-index:1}
.intro::after,.journey::before,.globe-sec::before,.founder::after{
content:"";position:absolute;z-index:0;pointer-events:none;
background-repeat:no-repeat;
animation:ofloat 9s ease-in-out infinite;
}
@keyframes ofloat{0%,100%{background-position-y:var(--by,0px)}50%{background-position-y:calc(var(--by,0px) - 7px)}}
/* who we are: big bottom-right cluster, slides behind the video and
bleeds across into Our Brands */
.intro::after{
background-image:url("assets/ornaments/orn-br-big.webp");
right:-60px;bottom:-130px;width:380px;height:420px;
background-size:380px auto;background-position:0 8px;--by:8px;
}
/* our process: raspberry cluster, bigger on desktop */
.journey::before{
background-image:url("assets/ornaments/orn-raspberry.webp");
top:34%;right:0;width:215px;height:410px;
background-size:290px auto;background-position:0 8px;--by:8px;animation-delay:-5s;
}
/* 25+ markets: tall left chain, bigger */
.globe-sec::before{
background-image:url("assets/ornaments/orn-left-big.webp");
bottom:4%;left:0;width:185px;height:550px;
background-size:240px auto;background-position:-55px 8px;--by:8px;animation-delay:-7s;
}
/* founder: strawberry + chocolate, bottom-left */
.founder::after{
background-image:url("assets/ornaments/orn-bl.webp");
bottom:0;left:0;width:215px;height:262px;
background-size:270px auto;background-position:-55px 8px;--by:8px;animation-delay:-2s;
}
@media(max-width:680px){
.intro::after{width:180px;height:205px;background-size:185px auto;right:-24px;bottom:-60px;background-position:0 6px;--by:6px}
.journey::before{width:104px;height:200px;background-size:140px auto;top:30%}
.globe-sec::before{width:82px;height:250px;background-size:110px auto;background-position:-28px 6px;--by:6px}
.founder::after{width:120px;height:150px;background-size:155px auto;background-position:-35px 6px;--by:6px}
}
/* story tiles: video tiles fill like images */
.story .st video{width:100%;height:100%;object-fit:cover;display:block}
/* ============================================================
V4.8 — ornament sizing per feedback (founder untouched)
============================================================ */
/* who we are: smaller, contained in its own section again */
.intro{overflow:hidden;z-index:auto}
.intro::after{
right:0;bottom:0;width:200px;height:262px;
background-size:240px auto;background-position:0 8px;
}
/* our process: back to a size the source stays crisp at */
.journey::before{
width:152px;height:285px;
background-size:205px auto;
}
/* 25+ markets: the earlier small cluster, just a touch bigger */
.globe-sec::before{
background-image:url("assets/ornaments/orn-blueberry.webp");
bottom:7%;left:0;width:118px;height:210px;
background-size:150px auto;background-position:-32px 8px;
}
@media(max-width:680px){
.intro::after{width:110px;height:145px;background-size:132px auto;right:0;bottom:0;background-position:0 6px}
.journey::before{width:96px;height:180px;background-size:130px auto}
.globe-sec::before{width:74px;height:132px;background-size:94px auto;background-position:-20px 6px}
}
/* who-we-are ornament: still (no drift), re-cropped without sliced raspberry */
.intro::after{
animation:none;
width:180px;height:250px;
background-size:182px auto;background-position:0 0;
}
@media(max-width:680px){
.intro::after{width:104px;height:145px;background-size:106px auto;background-position:0 0}
}
/* who-we-are ornament: final proportions for the re-cropped art (397x425) */
.intro::after{width:170px;height:200px;background-size:184px auto}
@media(max-width:680px){.intro::after{width:98px;height:116px;background-size:106px auto}}
/* ============================================================
V5-A — catalog p.2: engineered-bite manufacturing block
============================================================ */
:root{--amber:#F5B301}
/* green marker underline (catalog style) */
.ulg{background:linear-gradient(transparent 62%,rgba(162,212,94,.55) 62%,rgba(162,212,94,.55) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 3px}
.amb{color:var(--amber);font-weight:600}
.mfg3 h2{max-width:22ch;font-size:clamp(28px,3.2vw,44px)}
/* yellow catalog stats, 4 across */
.mstats-a{grid-template-columns:repeat(4,1fr)}
.mstats-a .num{color:var(--amber)}
.mstats-a .num em{color:var(--amber)}
.mstats-a .lbl{line-height:1.5;text-transform:none;letter-spacing:.02em;font-size:13px;color:rgba(255,255,255,.65)}
@media(max-width:680px){.mstats-a{grid-template-columns:1fr 1fr;row-gap:30px}}
/* branded truck rolls off to infinity at the end of Our Process */
.journey::after{
content:"";position:absolute;z-index:0;pointer-events:none;
left:0;bottom:0;width:300px;height:428px;
background:url("assets/ornaments/orn-truck.webp") no-repeat;
background-size:305px auto;background-position:0 bottom;
}
.journey{padding-bottom:clamp(120px,16vh,180px)}
@media(max-width:900px){.journey::after{width:210px;height:300px;background-size:214px auto}}
@media(max-width:680px){.journey::after{width:150px;height:214px;background-size:153px auto}.journey{padding-bottom:110px}}
/* Phase A reverted per user: manufacturing back to previous look */
.mfg3 h2{max-width:none;font-size:clamp(30px,3.6vw,48px)}
/* hero without laurels: balanced spacing */
.hero.centered .hero-cta{margin-top:34px}
.hero.centered .sub{margin-top:20px}
/* topbar: full question visible on mobile */
@media(max-width:680px){
.tb-tx{font-size:12px;overflow:visible;text-overflow:clip}
.topbar{gap:10px;padding:0 12px}
.tb-btn{padding:5px 13px;font-size:12px}
}
/* ============================================================
V5.2 — Who we are: editorial split + bento + process strip
============================================================ */
.i2grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.i2sticky{position:sticky;top:120px}
.intro2 h2{font-size:clamp(30px,3.4vw,44px);margin-top:16px;max-width:15ch}
.intro2 .i2text p{margin-top:20px;max-width:46ch}
.i2counters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.i2c .num{font-family:'Outfit';font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--ink)}
.i2c .num em{font-style:normal;color:var(--lime-deep)}
.i2c .lbl{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.i2link{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:600;font-size:14.5px;color:var(--lime-deep)}
.i2link .arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i2link:hover .arx{transform:translate(3px,-3px)}
.i2link .arx{transition:transform .3s var(--ease)}
/* bento */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.bc{border-radius:var(--r-md);overflow:hidden;background:#1a1512;aspect-ratio:1/1}
.bc img,.bc video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.bc:hover img{transform:scale(1.04)}
.bc-tall{grid-row:1/3;aspect-ratio:auto}
.bc-wide{grid-column:2;aspect-ratio:16/10}
/* process strip */
.pstrip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;margin-top:clamp(48px,7vh,80px)}
.ps{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ps img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.pst{padding:16px 18px 18px}
.psn{font-family:'Outfit';font-weight:800;font-size:13px;color:var(--lime-deep);letter-spacing:.1em}
.pst h4{font-size:16.5px;margin-top:6px;line-height:1.3}
.pst p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.psarr{color:var(--muted-2)}
.psarr svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1080px){
.bento{grid-template-columns:1fr 1fr}
.bc-tall{grid-row:1/3}
}
@media(max-width:900px){
.i2grid{grid-template-columns:1fr}
.i2sticky{position:static}
.intro2 h2{max-width:none}
.bento{grid-template-columns:1fr 1fr}
.bc-tall{grid-row:auto;grid-column:1/-1;aspect-ratio:16/10}
.bc-wide{grid-column:1/-1;aspect-ratio:16/9}
.pstrip{grid-template-columns:1fr;gap:10px}
.psarr{justify-self:center;transform:rotate(90deg)}
.ps{display:grid;grid-template-columns:120px 1fr;align-items:center}
.ps img{aspect-ratio:1;height:100%}
}
@media(max-width:680px){
.i2counters{gap:12px}
.i2c .num{font-size:26px}
.i2c .lbl{font-size:11.5px}
.bento{gap:8px}
}
/* bento: tall | wide over two squares */
.bento{grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto}
.bc-tall{grid-row:1/3;grid-column:1}
.bc-wide{grid-column:2/4;aspect-ratio:16/8.6}
@media(max-width:900px){
.bento{grid-template-columns:1fr 1fr}
.bc-tall{grid-row:auto;grid-column:1/-1;aspect-ratio:16/10}
.bc-wide{grid-column:1/-1;aspect-ratio:16/9}
}
/* ============================================================
V5.4 — "Excellence, frozen in time" full-bleed what-we-do
============================================================ */
.frozen{position:relative;min-height:92vh;background:#2B1418;color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.fz-media{position:absolute;inset:0;z-index:0}
.fz-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%;animation:fzkb 26s ease-in-out infinite alternate}
@keyframes fzkb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.fz-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(30,10,14,.15) 0%,rgba(30,10,14,0) 35%,rgba(30,10,14,.55) 70%,rgba(30,10,14,.85) 100%)}
.fz-wrap{position:relative;z-index:3;width:100%;display:flex;justify-content:center;padding-top:clamp(120px,22vh,220px);padding-bottom:clamp(60px,9vh,110px)}
.fz-text{text-align:center;max-width:620px}
.fz-text h2{font-size:clamp(36px,5vw,64px);color:#fff;line-height:1.04}
.fz-line{display:block;width:180px;height:1px;background:rgba(255,255,255,.55);margin:26px auto 22px}
.fz-text p{color:rgba(255,255,255,.9);font-size:15px;line-height:1.7;max-width:54ch;margin:0 auto}
/* desktop annotations pinned on the raspberry */
.fz-note{position:absolute;z-index:3;display:flex;align-items:center;gap:10px}
.fz-n1{left:6%;top:41%}
.fz-n2{right:6%;top:54%}
.fz-lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(20,8,10,.38);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:9px 15px;border-radius:999px;white-space:nowrap}
.fz-ln{width:clamp(50px,9vw,130px);height:1px;background:rgba(255,255,255,.55)}
.fz-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(162,212,94,.28);flex:0 0 auto;animation:fzp 2.6s ease-in-out infinite}
@keyframes fzp{0%,100%{box-shadow:0 0 0 6px rgba(162,212,94,.28)}50%{box-shadow:0 0 0 12px rgba(162,212,94,0)}}
/* mobile: annotations as two lines under the copy */
.fz-mnotes{display:none}
@media(max-width:900px){
.fz-note{display:none}
.fz-mnotes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px}
.fz-mnotes span{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9)}
.fz-mnotes i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(162,212,94,.28)}
.frozen{min-height:100vh}
.fz-media img{object-position:center 40%}
.fz-text h2{font-size:clamp(34px,9vw,48px)}
.fz-line{width:120px}
}
.fz-media img{object-position:center 36%}
.fz-wrap{padding-top:clamp(160px,30vh,300px)}
/* ============================================================
V5.5 — frozen section v2: crisp centred stage + blurred
letterbox fill, annotations pinned on all screens
============================================================ */
.fz-media{overflow:hidden}
.fz-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;object-position:center 36%;filter:blur(30px) brightness(.62) saturate(1.15);animation:none}
.fz-stage{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(1000px,100%)}
.fz-img{width:100%;height:100%;object-fit:cover;object-position:center 36%;display:block;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
animation:fzkb 26s ease-in-out infinite alternate}
/* type: same scale as every other section */
.fz-text h2{font-size:clamp(30px,3.6vw,48px)}
.fz-lbl{font-size:12.5px;letter-spacing:.07em;font-weight:600;padding:11px 20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22)}
.fz-lbl .fs{display:none}
/* notes live inside the stage → stable across desktop widths */
.fz-n1{left:4%;top:44%}
.fz-n2{left:54%;top:47%;right:auto}
.fz-ln{width:clamp(40px,6vw,70px)}
@media(max-width:900px){
.fz-bg{display:none}
.fz-stage{width:100%}
.fz-img{-webkit-mask-image:none;mask-image:none;object-position:center 40%}
.fz-note{display:flex}
.fz-lbl{font-size:11px;padding:8px 13px;letter-spacing:.06em}
.fz-lbl .fl{display:none}
.fz-lbl .fs{display:inline}
/* chocolate: label above the fruit, line dropping to the shell's upper-left */
.fz-n1{left:16%;top:22%;flex-direction:column;align-items:flex-start;gap:0}
.fz-n1 .fz-ln{width:1px;height:46px;margin-left:12px}
.fz-n1 .fz-dot{margin-left:7px}
/* freeze-dried: dot on the core, short line, label to the right */
.fz-n2{left:60%;top:46%}
.fz-n2 .fz-ln{width:14px}
.fz-mnotes{display:none}
.fz-wrap{padding-top:clamp(120px,24vh,220px)}
}
/* ============================================================
V5.6 — "What we make" comparison section (from user's zip)
============================================================ */
.wwm{background:linear-gradient(180deg,#F7F5EC 0%,#F3F0E4 100%)}
.wwm-head{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.wwm-title{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.wwm-title .dot{color:var(--lime-deep)}
.wwm-lede{max-width:46ch;color:var(--muted)}
.wwm-lede strong{color:var(--ink);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0}
.step-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:#EDE9DA}
.step-media img{width:100%;height:100%;object-fit:cover;display:block}
.step-cap{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:18px 4px 0;border-top:1px solid var(--line);margin-top:18px}
.step-num{font-family:'Outfit';font-weight:600;font-size:14px;color:var(--lime-deep);line-height:1.5}
.step-cap h3{font-size:18px;font-weight:700;margin:0;line-height:1.5}
.step-cap p{grid-column:2;margin:0;font-size:14px;color:var(--muted);max-width:32ch}
@media (prefers-reduced-motion:no-preference){
.step-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.step:nth-child(2) .step-media{transition-delay:.18s}
.step:nth-child(3) .step-media{transition-delay:.36s}
.steps.is-in .step-media{clip-path:inset(0 0 0 0)}
}
@media(max-width:900px){.wwm-head{grid-template-columns:1fr;align-items:start}}
@media(max-width:640px){
.steps{grid-template-columns:1fr;gap:34px}
.step-media{aspect-ratio:4/3;border-radius:14px}
.step-cap{padding-top:14px;margin-top:14px}
}
/* frozen mobile annotation nudges */
@media(max-width:900px){
.fz-n1{left:15%;top:27%}
.fz-n1 .fz-ln{height:40px}
.fz-n2{left:49%;top:44%}
.fz-n2 .fz-ln{width:10px}
.fz-lbl .fs.fs2{display:inline}
}
/* what-we-make: user-supplied berry photos */
.step:nth-child(2) .step-media img{object-position:center 62%}
.step:nth-child(1) .step-media img{object-position:center 45%}
/* ============================================================
V6 — homepage flow rebuild (Miro feedback 2026-09-02)
============================================================ */
/* more breathing room everywhere */
.sec-pad{padding:clamp(96px,13vh,170px) 0}
.partners{padding:clamp(64px,9vh,100px) 0 clamp(40px,6vh,64px)}
.intro{padding-top:clamp(80px,11vh,140px)}
/* light / dark rhythm: who-we-are white, what-we-make beige */
.intro{background:#fff}
.wwm-head1{grid-template-columns:1fr;justify-items:center;text-align:center}
.wwm-head1 .wwm-title{max-width:20ch}
/* blue science section */
:root{--sky:#6FD3FF;--navy:#071A2E}
.scilab{position:relative;min-height:92vh;background:var(--navy);color:#fff;overflow:hidden;display:flex;align-items:center}
.sl-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sl-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(30px) brightness(.5) saturate(.6)}
.sl-stage{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(1100px,100%)}
.sl-img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;filter:saturate(.55) brightness(.85);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.sl-wash{position:absolute;inset:0;background:#1E5AA0;mix-blend-mode:color;opacity:.75}
.sl-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(7,26,46,.55) 0%,rgba(7,26,46,.35) 40%,rgba(7,26,46,.86) 82%,var(--navy) 100%)}
.sl-wrap{position:relative;z-index:3;width:100%;display:flex;justify-content:center;padding-top:clamp(120px,18vh,200px);padding-bottom:clamp(70px,10vh,120px)}
.sl-text{text-align:center;max-width:720px}
.sl-text .chob-logo{height:44px;margin:0 auto 26px;display:block}
.scilab .eyebrow{color:var(--sky)}
.scilab h2{color:#fff;margin-top:14px}
.scilab .dot{color:var(--sky)}
.scilab .fz-line{background:rgba(255,255,255,.4)}
.sl-text p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto}
.scilab .pillrow{justify-content:center;margin-top:28px}
.scilab .pill svg{stroke:var(--sky)}
.scilab .pill:hover{border-color:var(--sky);color:var(--sky)}
.sl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.sl-facts div{border-top:1px solid rgba(255,255,255,.18);padding-top:14px;text-align:left}
.sl-facts b{display:block;font-family:'Outfit';font-size:15px;color:#fff}
.sl-facts span{display:block;font-size:12.5px;color:rgba(255,255,255,.65);margin-top:4px;line-height:1.45}
@media(max-width:900px){.sl-bg{display:none}.sl-stage{width:100%}.sl-img{-webkit-mask-image:none;mask-image:none}.sl-facts{grid-template-columns:1fr 1fr}.scilab{min-height:auto}}
@media(max-width:680px){.scilab .pillrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}.scilab .pill{justify-content:center;padding:11px 8px;font-size:10.5px;white-space:nowrap}}
/* Europe map */
.map-sec{background:#fff}
.mapwrap{aspect-ratio:auto;max-width:720px}
.mapwrap canvas{cursor:default;display:block;width:100%}
.gbeyond{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.gb-lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-right:4px}
.gb-chip{background:var(--paper-2);border-radius:100px;padding:7px 14px;font-size:13px;color:var(--ink-soft)}
.map-sec .ghint{display:none}
/* moved sections on the manufacturing page: no truck */
.journey.nt::after{display:none}
.journey.nt{padding-bottom:clamp(72px,11vh,140px)}
/* footer without laurels: CTA aligned */
.f2-top2{padding-bottom:clamp(36px,5vh,52px)}
.f2-cta h2{max-width:none}
@media(max-width:680px){.f2-top2{text-align:center}.f2-cta h2{margin-left:auto;margin-right:auto}}
/* indulgence: text + floating masked video on #1E1510 */
.indul{background:#1E1510;color:#fff}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.indul .eyebrow{color:var(--lime)}
.indul h2{color:#fff}
.indul .sp{color:rgba(255,255,255,.82);margin-top:18px;max-width:48ch}
.indul .chob-logo{height:40px;margin:26px 0 4px}
.indul .pillrow{margin-top:24px}
.ivid{background:#1E1510}
.ivid video{display:block;width:100%;
-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 40%,transparent 100%);
mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 40%,transparent 100%)}
@media(max-width:900px){.igrid{grid-template-columns:1fr}.ivid{max-width:520px;margin:0 auto}}
@media(max-width:680px){.indul .pillrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}.indul .pill{justify-content:center;padding:11px 8px;font-size:10.5px;white-space:nowrap}}
/* blue R&D: a little more image presence */
.sl-tint{background:linear-gradient(to bottom,rgba(7,26,46,.4) 0%,rgba(7,26,46,.25) 40%,rgba(7,26,46,.84) 82%,var(--navy) 100%)}
.sl-wash{opacity:.62}
.sl-img{filter:saturate(.6) brightness(.95)}
.sl-facts{text-align:left}
/* indulgence pills on small screens: wrap inside the chip, never overflow */
@media(max-width:680px){
.indul .pillrow{grid-template-columns:1fr 1fr;gap:8px}
.indul .pill{white-space:normal;text-align:center;line-height:1.25;font-size:10.5px;padding:10px 8px;min-width:0}
}
/* ============================================================
V6.1 — white logo strip, seamless indulgence video, unified
headings, filled-country map, moving R&D background
============================================================ */
/* logos on pure white */
.partners.dk{background:#fff}
/* indulgence: section = video's true edge colour, wide fade */
.indul,.ivid{background:#0A0202}
.ivid video{
-webkit-mask-image:radial-gradient(ellipse 64% 60% at 50% 50%,#000 22%,rgba(0,0,0,.6) 55%,transparent 100%);
mask-image:radial-gradient(ellipse 64% 60% at 50% 50%,#000 22%,rgba(0,0,0,.6) 55%,transparent 100%)}
/* ONE heading size across every section */
.sec-head h2,.intro h2,.wwm-title,.brandband h2,.indul h2,.scilab h2,.fz-text h2,.globe-sec h2,.mfg3 h2,.founder blockquote,.f2-cta h2,.aud2 h2,.journey h2{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.wwm-title{letter-spacing:-.02em}
/* R&D: moving production footage, blue-washed */
.sl-vid{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:saturate(.5) brightness(.8) blur(2px)}
/* map: filled countries */
.mapwrap canvas{cursor:default}
/* ============================================================
V6.2 — merged who-we-are, robust annotations, transitions,
lens overlay, blended map, footer/sticky CTA
============================================================ */
/* who we are: three images then the three steps, on white */
.intro .steps{margin-top:14px}
.intro .step-cap{border-top:1px solid var(--line)}
/* ornament flush with the section edge */
.intro::after{background-position:0 bottom;bottom:0}
/* brands → indulgence seamless */
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42) 0%,rgba(26,16,10,.78) 62%,#0A0202 100%)}
/* frozen annotations are placed by script now */
.fz-note{transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* map: blends into the white section, pulsing markers */
.map-sec{background:linear-gradient(180deg,#FFFFFF 0%,#FAF9F3 100%)}
/* R&D: certs row + ChoBiotics magnifier lens */
.sl-certs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,40px);margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.sl-certs img{height:40px;width:auto;opacity:.85}
.sl-lens{border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.34),rgba(255,255,255,.08) 55%,rgba(255,255,255,.03) 100%);
border:2px solid rgba(255,255,255,.6);
box-shadow:0 30px 60px -22px rgba(0,0,0,.7),inset 0 0 44px rgba(111,211,255,.28),0 0 0 8px rgba(111,211,255,.08);
backdrop-filter:blur(2px) saturate(1.3);-webkit-backdrop-filter:blur(2px) saturate(1.3)}
.sl-lens img{width:62%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.sl-lens::after{content:"";position:absolute;width:14px;height:34%;background:linear-gradient(#fff,rgba(255,255,255,.7));border-radius:8px;right:-6%;bottom:-24%;transform:rotate(-45deg);transform-origin:top center}
.sl-lens-float{position:absolute;z-index:3;right:7%;top:50%;width:240px;height:240px;transform:translateY(-50%);animation:lensfloat 6s ease-in-out infinite}
@keyframes lensfloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 12px))}}
.sl-lens-inline{display:none;width:150px;height:150px;margin:0 auto 26px}
@media(max-width:1180px){.sl-lens-float{display:none}.sl-lens-inline{display:flex}}
@media(max-width:680px){.sl-certs img{height:30px}.sl-certs{gap:18px}}
/* footer: button to the right of the headline */
.f2-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.f2-cta .btn{margin-top:0}
@media(max-width:680px){.f2-cta{flex-direction:column;align-items:center;gap:20px}}
/* sticky: same look as the footer CTA */
.sticky-contact{background:var(--lime);color:var(--ink);padding:15px 26px;gap:.55em;font-size:15px;font-weight:600;box-shadow:0 14px 34px -10px rgba(22,40,26,.5)}
.sticky-contact .arx{display:inline-flex;transition:transform .35s var(--ease)}
.sticky-contact .arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sticky-contact:hover{background:#B5E272;transform:translateY(-3px)}
.sticky-contact:hover .arx{transform:translate(3px,-3px)}
@media(max-width:680px){.sticky-contact{padding:13px 22px;font-size:14px}}
/* footer cert logos on mobile: rows of 4 + 3, last row centred */
@media(max-width:680px){
.f2-certs{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 14px}
.f2-certs img{width:calc((100% - 42px)/4);height:54px;object-fit:contain}
}
/* indulgence: pills row under the video, full width */
.ipills{margin-top:clamp(28px,4vh,44px)}
.ipills .pillrow{justify-content:center;margin-top:0}
.indul .igrid{align-items:center}
/* hero: certification row under the buttons (replaces the old laurels) */
.hero-certs{margin-top:42px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hc-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap}
.hc-row{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px)}
.hc-row img{height:34px;width:auto;opacity:.82;transition:opacity .3s}
.hc-row img:hover{opacity:1}
@media(max-width:680px){
.hero-certs{justify-content:center;flex-direction:column;gap:12px;margin-top:32px}
.hc-row{gap:18px}
.hc-row img{height:26px}
}
/* ============================================================
V6.4 — cleanup round: logos up, frozen header on top, indulgence
pills back in column, slimmer map, R&D without lines
============================================================ */
/* logo strip: just the logos, tighter */
.partners.dk{padding:clamp(34px,5vh,56px) 0 clamp(34px,5vh,56px)}
/* frozen: header above, image block below, no overlay text */
.frozen2{display:block;min-height:0;padding-top:clamp(96px,13vh,170px)}
.frozen2 .fz-head .sec-head{margin-bottom:clamp(40px,6vh,64px)}
.frozen2 .fz-head .eyebrow{color:var(--lime)}
.frozen2 .fz-head h2{color:#fff}
.frozen2 .fz-head p{color:rgba(255,255,255,.85)}
.frozen2 .fz-media{position:relative;height:clamp(420px,72vh,760px)}
.frozen2 .fz-stage{width:min(1100px,100%)}
.frozen2 .fz-tint{background:linear-gradient(to bottom,rgba(42,20,22,.35) 0%,rgba(42,20,22,0) 30%,rgba(42,20,22,0) 70%,#2A1416 100%)}
@media(max-width:680px){.frozen2 .fz-media{height:70vh}}
/* indulgence: three-cell grid — text | video, pills under text on desktop */
.igrid{grid-template-rows:auto auto;align-items:start}
.igrid > .reveal:first-child{grid-column:1;grid-row:1}
.igrid .ivid{grid-column:2;grid-row:1/3;align-self:center}
.igrid .ipills{grid-column:1;grid-row:2;margin-top:24px}
.ipills .pillrow{justify-content:flex-start}
@media(max-width:900px){
.igrid{display:flex;flex-direction:column}
.igrid .ipills{order:3;margin-top:22px}
.ipills .pillrow{justify-content:center}
}
/* map: premium + slim on mobile */
.map-sec{background:#fff}
.mapwrap{max-width:680px}
@media(max-width:680px){
.map-sec .gchips{display:none}
.map-sec .gp{font-size:14px}
.mapwrap{margin-top:6px}
}
/* R&D: no lines, site width, plain logo */
.sl-facts div{border-top:none;padding-top:0}
.sl-certs{border-top:none;padding-top:0;margin-top:34px}
.sl-text{max-width:760px}
.sl-text .chob-logo{height:38px;margin-bottom:22px}
.scilab .fz-line{display:none}
/* sticky button: clean pulse */
.sticky-contact{animation:scpulse2 2.8s ease-out infinite}
@keyframes scpulse2{
0%{box-shadow:0 14px 34px -10px rgba(22,40,26,.5),0 0 0 0 rgba(162,212,94,.55)}
60%{box-shadow:0 14px 34px -10px rgba(22,40,26,.5),0 0 0 14px rgba(162,212,94,0)}
100%{box-shadow:0 14px 34px -10px rgba(22,40,26,.5),0 0 0 0 rgba(162,212,94,0)}
}
.sticky-contact:hover{animation:none}
/* indulgence: pills directly under the text, video defines the height */
.igrid{grid-template-rows:auto 1fr}
.igrid .ipills{align-self:start;margin-top:26px}
/* frozen v3: headline on the image above the fruit, body below the fruit */
.frozen3{display:block;min-height:92vh;padding-top:0}
.frozen3 .fz-media{position:absolute;inset:0;height:auto}
.frozen3 .fz-tint{background:linear-gradient(to bottom,rgba(42,20,22,.72) 0%,rgba(42,20,22,.15) 26%,rgba(42,20,22,0) 45%,rgba(42,20,22,.55) 72%,rgba(42,20,22,.9) 100%)}
.fz-over{position:absolute;left:0;right:0;z-index:3;text-align:center;pointer-events:none}
.fz-over-top{top:clamp(76px,11vh,124px)}
.fz-over-bot{bottom:clamp(56px,9vh,96px)}
.fz-over .eyebrow{color:var(--lime);justify-content:center}
.fz-over h2{color:#fff;margin:14px auto 0;max-width:16ch}
.fz-over p{color:rgba(255,255,255,.9);max-width:54ch;margin:0 auto}
@media(max-width:680px){
.frozen3{min-height:100vh}
.fz-over-top{top:64px}
.fz-over-bot{bottom:40px}
.fz-over h2{max-width:12ch}
}
.fz-over h2{max-width:none}
@media(max-width:680px){.fz-over h2{max-width:12ch}}
/* map: 1:1 canvas, smaller chips, Beyond-Europe under the map on mobile */
.map-sec .wrap{grid-template-rows:auto 1fr;align-items:start}
.map-sec .wrap > .reveal:first-child{grid-column:1;grid-row:1}
.map-sec .wrap > .reveal.d1{grid-column:2;grid-row:1/3;align-self:center}
.map-sec .gbeyond{grid-column:1;grid-row:2;align-self:start;margin-top:0}
.mapwrap{aspect-ratio:1/1;max-width:620px}
.mapwrap canvas{height:100%}
.map-sec .gchips button{padding:6px 12px;font-size:12px}
.map-sec .gchips{gap:6px;margin-top:22px}
@media(max-width:900px){
.map-sec .wrap{display:flex;flex-direction:column}
.map-sec .gbeyond{order:3;justify-content:center;margin-top:20px}
.mapwrap{max-width:100%}
}
.fz-over h2{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
/* logo strip: more air above, stable hover (wrapper is the hit area) */
.partners.dk{padding-top:clamp(64px,9vh,100px)}
.partners .lmq-set .lg{display:flex;align-items:center;padding:10px 0;flex:0 0 auto}
.partners .lmq-set .lg img{transition:transform .35s var(--ease)}
.partners .lmq-set .lg:hover img{transform:translateY(-6px)}
.partners.dk .lmq-set img:hover{transform:none}
.partners .lmq-set .lg:hover img{transform:translateY(-6px)}
/* brand band: one digestible paragraph instead of the leaf list */
.brandband .bb-lead{max-width:62ch;margin:0 auto;text-align:center;font-size:15px;line-height:1.8}
/* R&D: shorter copy, four stacked icon facts, more air */
.sl-text h2{margin-bottom:22px}
.sl-text p{max-width:54ch}
.sl-list{display:flex;flex-direction:column;gap:14px;max-width:440px;margin:clamp(44px,6vh,64px) auto 0;text-align:left}
.sl-list>div{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sl-list .wic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(143,208,255,.14);color:#8FD0FF;font-size:0}
.sl-list .wic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sl-list b{display:block;font-family:'Outfit';font-weight:700;font-size:16px;color:#fff;line-height:1.25}
.sl-list b+span{display:block;font-size:13px;color:rgba(255,255,255,.65);margin-top:3px;line-height:1.45}
.sl-certs{margin-top:clamp(44px,6vh,60px)}
@media(max-width:680px){.sl-list{max-width:none}.sl-list>div{padding:12px 14px}}
/* flow v7: what-we-make -> indulgence (fade into #0A0202), brands -> R&D (fade into navy) */
.frozen3 .fz-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,rgba(10,2,2,0) 0%,rgba(10,2,2,.72) 60%,#0A0202 100%);pointer-events:none}
.indul{padding-top:clamp(40px,6vh,72px)}
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42) 0%,rgba(26,16,10,.78) 58%,rgba(7,26,46,.9) 86%,var(--navy) 100%)}
.sl-tint{background:linear-gradient(to bottom,var(--navy) 0%,rgba(7,26,46,.35) 28%,rgba(7,26,46,.84) 82%,var(--navy) 100%)}
.frozen3 .fz-media::after{z-index:4}
.brandband{background:var(--navy)}
.brandband .bb-bg{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.frozen3 .fz-media::after{top:auto;inset:auto 0 0 0;height:40%;background:linear-gradient(to bottom,rgba(10,2,2,0) 0%,rgba(10,2,2,.75) 62%,#0A0202 100%)}
.sl-tint{background:linear-gradient(to bottom,var(--navy) 0%,var(--navy) 6%,rgba(7,26,46,.35) 42%,rgba(7,26,46,.84) 82%,var(--navy) 100%)}
.frozen3{background:#0A0202}
.frozen3 .fz-media{-webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.35) 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.35) 84%,transparent 100%)}
.frozen3 .fz-media::after{display:none}
.frozen3 .fz-tint{background:linear-gradient(to bottom,rgba(42,20,22,.72) 0%,rgba(42,20,22,.15) 26%,rgba(42,20,22,0) 45%,rgba(10,2,2,.6) 74%,#0A0202 100%)}
.frozen3 .fz-tint{background:linear-gradient(to bottom,rgba(42,20,22,.72) 0%,rgba(42,20,22,.15) 26%,rgba(42,20,22,0) 45%,rgba(10,2,2,.6) 74%,#0A0202 94%,#0A0202 100%)}
/* V7.1: no media mask (tint does the fade), cream instead of pure white, map fades into the section */
.frozen3 .fz-media{-webkit-mask-image:none;mask-image:none}
:root{--cream2:#FBF9F4}
.partners.dk{background:var(--cream2)}
.intro{background:var(--cream2)}
.map-sec{background:var(--cream2)}
.mapwrap canvas{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 52%,#000 42%,rgba(0,0,0,.55) 70%,transparent 97%);mask-image:radial-gradient(ellipse 60% 60% at 50% 52%,#000 42%,rgba(0,0,0,.55) 70%,transparent 97%)}
/* V7.2: what-we-make + indulgence merged; R&D as a rounded panel over Three Brands; square Europe on mobile */
.fz-over p{max-width:62ch}
.indul2{padding:0 0 clamp(56px,8vh,96px);background:#0A0202}
.ivid2{width:100%;background:#0A0202}
.ivid2 video{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 58% 70% at 50% 50%,#000 30%,rgba(0,0,0,.6) 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 70% at 50% 50%,#000 30%,rgba(0,0,0,.6) 62%,transparent 100%)}
.indul2 .ipills{margin-top:clamp(8px,2vh,20px);display:flex;flex-direction:column;align-items:center;gap:18px}
.indul2 .ipills .eyebrow{color:var(--lime);justify-content:center}
.indul2 .pillrow{justify-content:center;margin-top:0}
@media(max-width:680px){
.ivid2 video{aspect-ratio:4/3;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 34%,rgba(0,0,0,.6) 66%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 34%,rgba(0,0,0,.6) 66%,transparent 100%)}
.indul2 .pillrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
}
.brandband{background:#190F0A}
.brandband .bb-bg{-webkit-mask-image:none;mask-image:none}
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42) 0%,rgba(26,16,10,.78) 62%,#190F0A 100%)}
.brandband .wrap{padding-bottom:44px}
.scilab{position:relative;z-index:3;margin-top:-44px;border-radius:44px 44px 0 0;overflow:hidden}
.sl-tint{background:linear-gradient(to bottom,rgba(7,26,46,.5) 0%,rgba(7,26,46,.35) 30%,rgba(7,26,46,.84) 82%,var(--navy) 100%)}
@media(max-width:680px){.scilab{margin-top:-28px;border-radius:28px 28px 0 0}.brandband .wrap{padding-bottom:28px}}
.brandband .wrap{padding-bottom:76px}
.mapwrap{max-width:700px}
.hero .sub-s{display:none}
@media(max-width:680px){
.brandband .wrap{padding-bottom:52px}
.partners.dk{padding-top:36px;padding-bottom:36px}
.hero .sub-l{display:none}.hero .sub-s{display:inline}
.hero.centered h1{font-size:48px;line-height:1.02}
.hero.centered p.sub{font-size:15px;line-height:1.55;max-width:34ch;margin-left:auto;margin-right:auto}
}
@media(max-width:680px){.partners.dk{padding-top:34px;padding-bottom:22px}.intro{padding-top:28px}}
.brandband .wrap{padding-bottom:104px}
@media(max-width:680px){.brandband .wrap{padding-bottom:64px}}
/* V7.3: sections back as before; mobile centring; black bands around the R&D panel; globe restored */
.hero .sub-s{display:none}
@media(max-width:680px){
.hero.centered h1{font-size:clamp(40px,6.4vw,86px)}
.hero .sub-l{display:none}.hero .sub-s{display:inline}
.indul .igrid>.reveal:first-child{text-align:center}
.indul .eyebrow{display:none}
.indul h2{margin-top:0}
.indul .sp{margin-left:auto;margin-right:auto}
.ivid{max-width:100%;width:100%}
.ivid video{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.indul .pillrow{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px;align-items:stretch}
.indul .pill{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.25;padding:10px 8px}
.fz-over{text-align:center}
}
.brandband{background:#0A0202}
.brandband .bb-tint{background:linear-gradient(to bottom,rgba(26,16,10,.42) 0%,rgba(26,16,10,.78) 55%,rgba(10,2,2,.96) 82%,#0A0202 100%)}
.brandband .wrap{padding-bottom:clamp(120px,16vh,170px)}
.sl-panel{background:#0A0202;padding-bottom:clamp(56px,8vh,96px)}
.scilab{border-radius:44px}
@media(max-width:680px){.scilab{border-radius:28px}.brandband .wrap{padding-bottom:96px}.sl-panel{padding-bottom:40px}}
/* V7.3b: living annotations on the frozen image — expanding ring + slow shimmer along the line */
.fz-dot{position:relative}
.fz-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--lime);opacity:0;animation:fzring 2.8s ease-out infinite}
.fz-n2 .fz-dot::after{animation-delay:1.4s}
@keyframes fzring{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.fz-ln{position:relative;overflow:hidden}
.fz-ln::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translateX(-100%);animation:fzsweep 3.2s ease-in-out infinite}
.fz-n2 .fz-ln::after{animation-delay:1.6s}
@keyframes fzsweep{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@media(max-width:680px){.fz-n1 .fz-ln::after{background:linear-gradient(180deg,transparent,#fff,transparent);animation-name:fzsweepv}}
@keyframes fzsweepv{0%{transform:translateY(-100%)}60%{transform:translateY(100%)}100%{transform:translateY(100%)}}
/* V7.4: mobile only — one merged text on the frozen image, indulgence text hidden, video follows directly */
.fz-mob{display:none}
@media(max-width:680px){
.fz-desk{display:none}.fz-mob{display:inline}
.indul .igrid>.reveal:first-child{display:none}
.indul{padding-top:8px}
.indul .igrid{gap:22px}
.fz-over-bot{bottom:32px}
}
/* V7.5: cream under the R&D panel so it lands straight on the founder section */
.sl-panel{background:#F2EFE2}
.founder .fimg img{object-position:right 20%;transform:scale(1.16);transform-origin:100% 18%}
.aud2.sec-pad{padding-bottom:clamp(56px,8vh,92px)}
.footer2{padding-top:clamp(44px,6vh,72px)}
.f2-top2{padding-bottom:clamp(30px,4vh,44px)}
.founder .fimg img{transform:none;object-position:center 20%}
/* V7.6: indulgence desktop — text + pills as one block, vertically centred with the video */
@media(min-width:901px){
.indul .igrid{grid-template-rows:auto auto;row-gap:28px;align-items:stretch}
.indul .igrid>.reveal:first-child{grid-column:1;grid-row:1;align-self:end}
.indul .igrid .ipills{grid-column:1;grid-row:2;align-self:start;margin-top:0}
.indul .igrid .ivid{grid-column:2;grid-row:1/3;align-self:center}
}
/* V7.7: R&D ends dark with a straight edge into the cream section (no rounded bottom) */
.scilab{border-radius:44px 44px 0 0;background:#070B12}
.sl-panel{padding-bottom:0;background:#0A0202}
.sl-tint{background:linear-gradient(to bottom,rgba(7,26,46,.5) 0%,rgba(7,26,46,.35) 30%,rgba(7,11,18,.86) 80%,#070B12 100%)}
@media(max-width:680px){.scilab{border-radius:28px 28px 0 0}.sl-panel{padding-bottom:0}}
/* V7.8: snappier reveals */
.reveal{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.d1{transition-delay:.05s}.reveal.d2{transition-delay:.1s}.reveal.d3{transition-delay:.15s}.reveal.d4{transition-delay:.2s}.reveal.d5{transition-delay:.25s}
/* V8: Europe relief plate (replaces the globe on the homepage) */
.relief-sec .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center}
.relief-sec .gp{margin-top:18px}
.relief-sec .gchips{gap:6px;margin-top:22px}
.relief-sec .gchips button{padding:6px 12px;font-size:12px}
.relief-sec .gbeyond{margin-top:18px}
.rcol{perspective:1400px}
.rwrap{position:relative;width:100%;max-width:640px;margin:0 auto;transform-style:preserve-3d}
.rwrap picture,.rwrap img.relief{display:block;width:100%;height:auto}
.rwrap img.relief{filter:drop-shadow(0 1px 0 #C7C4B4) drop-shadow(0 1px 0 #BDBAAA) drop-shadow(0 1px 0 #B3B0A0) drop-shadow(0 2px 0 #A8A596) drop-shadow(0 26px 30px rgba(30,40,30,.28))}
.rmarks{position:absolute;inset:0;pointer-events:none}
.rm{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:auto;cursor:default}
.rm i{position:absolute;inset:2px;border-radius:50%;background:#6FA33A;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s}
.rm::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #6FA33A;opacity:0;animation:rmring 3s ease-out infinite;animation-delay:calc(var(--i) * .18s)}
.rm.home i{background:var(--lime);inset:0}
.rm.on i{transform:scale(1.5)}
@keyframes rmring{0%{transform:scale(.7);opacity:.8}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.rwrap .gtip{top:auto;left:0;transform:translate(-50%,calc(-100% - 16px));white-space:nowrap}
/* rise from the ground */
.rcol.reveal{transform:none}
.rcol .rwrap{opacity:0;transform:translateY(70px) rotateX(18deg) scale(.94);transform-origin:50% 100%;transition:opacity .9s var(--ease),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.rcol.in .rwrap{opacity:1;transform:none}
.rcol .rwrap img.relief{transition:filter 1.3s ease}
@media(max-width:900px){
.relief-sec .wrap{display:flex;flex-direction:column;gap:22px}
.relief-sec .gchips{display:none}
.rwrap{max-width:100%}
.relief-sec .gbeyond{order:3;justify-content:center;margin-top:8px}
}
/* V8.1: minimal light Europe map (homepage) */
.min-sec .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center}
.min-sec .gp{margin-top:18px}
.min-sec .gchips{gap:6px;margin-top:22px}
.min-sec .gchips button{padding:6px 12px;font-size:12px}
.min-sec .gbeyond{margin-top:18px}
.mwrap{position:relative;width:100%;max-width:640px;margin:0 auto}
.mwrap svg{display:block;width:100%;height:auto;overflow:visible;-webkit-mask-image:linear-gradient(to right,#000 84%,transparent 99.5%),linear-gradient(to bottom,#000 88%,transparent 99.5%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 84%,transparent 99.5%),linear-gradient(to bottom,#000 88%,transparent 99.5%);mask-composite:intersect}
.m-land{fill:url(#mlandGrad);stroke:rgba(111,163,58,.35);stroke-width:.7;stroke-linejoin:round}
.m-dot{fill:#6FA33A;stroke:#fff;stroke-width:1.6;transition:r .25s}
.m-dot.home{fill:var(--lime);stroke:#3F6D1F}
.m-dot.on{r:7.5;fill:#3F6D1F}
.m-ring{fill:none;stroke:#6FA33A;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:mring 3.4s ease-out infinite}
@keyframes mring{0%{transform:scale(.5);opacity:.7}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}
.mwrap .gtip{top:auto;left:0;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap}
.mcol .mwrap{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform 1s cubic-bezier(.2,.7,.2,1)}
.mcol.in .mwrap{opacity:1;transform:none}
@media(max-width:900px){
.min-sec .wrap{display:flex;flex-direction:column;gap:22px}
.min-sec .gchips{display:none}
.mwrap{max-width:100%}
.min-sec .gbeyond{margin-top:12px}
}
.m-dot{stroke-width:1.8}
.m-dot.on{r:8.5}
/* V8.2: one brand green everywhere. Logo lime #A2D45E; deep shade = same hue, darker (#7DB530) */
:root{--lime:#A2D45E;--lime-deep:#7DB530;--lime-dark:#5E8F22}
.gr,.founder blockquote em,.globe-sec h2 em,.intro .hl,.sec-head h2 em,.f2-cta h2 em,.aud2 h2 em{color:var(--lime-deep);background:linear-gradient(90deg,#8FC63A 0%,#A2D45E 55%,#7DB530 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gr .dot,.founder blockquote em .dot{-webkit-text-fill-color:var(--lime)}
.hl{color:var(--lime-deep)}
.m-dot{fill:var(--lime-deep)}
.m-dot.home{fill:var(--lime);stroke:var(--lime-dark)}
.m-dot.on{fill:var(--lime-dark)}
.m-ring{stroke:var(--lime-deep)}
.m-land{stroke:rgba(125,181,48,.35)}
.min-sec .gchips button:hover,.min-sec .gchips button.on{background:var(--lime-deep);border-color:var(--lime-deep);color:#fff}
.min-sec::before,.min-sec::after{display:none}
/* V8.3: routes from Maribor on the light map; bigger map; screen-constant strokes */
.m-arc{fill:none;stroke:var(--lime-deep);stroke-width:1.3px;stroke-linecap:round;stroke-dasharray:5 9;opacity:.5;vector-effect:non-scaling-stroke;animation:marcflow 3.2s linear infinite;transition:opacity .3s}
@keyframes marcflow{to{stroke-dashoffset:-56}}
#marcs.dim .m-arc{opacity:.14}
#marcs.dim .m-arc.on{opacity:1;stroke-width:2.2px;stroke:var(--lime-dark)}
.m-dot,.m-ring{vector-effect:non-scaling-stroke}
.m-dot{stroke-width:1.8px}
.m-dot.on{r:var(--rr,8.5)}
.min-sec .wrap{grid-template-columns:1fr 1.35fr}
.mwrap{max-width:780px}
@media(max-width:900px){
.mwrap{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}
.m-arc{stroke-width:1.1px;opacity:.55}
}
.min-sec .wrap{grid-template-columns:1fr 1.25fr}
/* V8.4: headings use the plain logo green, no gradient */
.gr,.founder blockquote em,.globe-sec h2 em,.sec-head h2 em,.f2-cta h2 em,.aud2 h2 em,.intro .hl{background:none;-webkit-text-fill-color:initial;color:var(--lime)}
.intro .hl,.hl{color:var(--lime-deep)}
/* V8.5: no routes; chips as their own block (desktop under the text, mobile under the map, tappable) */
.min-sec .wrap{grid-template-columns:1fr 1.25fr;grid-template-rows:auto 1fr;align-items:start}
.min-sec .wrap>.reveal:first-child{grid-column:1;grid-row:1;align-self:end}
.min-sec .gside{grid-column:1;grid-row:2;align-self:start}
.min-sec .mcol{grid-column:2;grid-row:1/3;align-self:center}
.min-sec .gchips{margin-top:0}
.m-dot{cursor:pointer}
@media(max-width:900px){
.min-sec .wrap{display:flex;flex-direction:column}
.min-sec .gside{order:3;display:block}
.min-sec .gchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.min-sec .gchips button{padding:6px 11px;font-size:11.5px}
.min-sec .gbeyond{justify-content:center;margin-top:14px}
}
.m-hit{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
.m-dot{pointer-events:none}
.mwrap .gtip{z-index:5;pointer-events:none}
@media(max-width:900px){.mwrap .gtip{font-size:13px;padding:8px 14px}}
.m-dot.on{fill:var(--lime-dark);stroke:#fff;stroke-width:2.5px;filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 2px 6px rgba(94,143,34,.55))}
.m-ring.sel{opacity:1;animation:none;transform:scale(2.2);stroke:var(--lime-dark);stroke-width:1.5px}
/* V8.8: dark map section, seamless with indulgence above and brand band below */
.min-dark{background:#0A0202 radial-gradient(ellipse 60% 55% at 64% 45%,rgba(30,64,38,.55) 0%,rgba(10,2,2,0) 70%);color:#fff}
.min-dark .eyebrow{color:var(--lime)}
.min-dark h2{color:#fff}
.min-dark .gp{color:rgba(255,255,255,.72)}
.min-dark .gchips button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.min-dark .gchips button:hover,.min-dark .gchips button.on{background:var(--lime);border-color:var(--lime);color:#0A0202}
.min-dark .gb-lbl{color:rgba(255,255,255,.5)}
.min-dark .gb-chip{background:rgba(255,255,255,.08);color:#fff}
.min-dark .m-land{stroke:rgba(162,212,94,.32);filter:drop-shadow(0 0 14px rgba(162,212,94,.14))}
.min-dark .m-dot{fill:var(--lime);stroke:#0A0202;stroke-width:1.6px}
.min-dark .m-dot.home{fill:#fff;stroke:var(--lime)}
.min-dark .m-dot.on{fill:#fff;stroke:var(--lime);stroke-width:2.5px;filter:drop-shadow(0 0 8px rgba(162,212,94,.8))}
.min-dark .m-ring{stroke:var(--lime)}
.min-dark .m-ring.sel{stroke:var(--lime)}
.min-dark .gtip{background:var(--lime);color:#0A0202}
.min-dark .gtip small{color:#0A0202;opacity:.7}
.brandband .bb-tint{background:linear-gradient(to bottom,#0A0202 0%,rgba(10,2,2,.6) 16%,rgba(26,16,10,.42) 38%,rgba(26,16,10,.78) 70%,#0A0202 100%)}
.min-dark::before,.min-dark::after{display:none}
.brandband .bb-tint{background:linear-gradient(to bottom,#0A0202 0%,rgba(10,2,2,.94) 9%,rgba(10,2,2,.72) 22%,rgba(26,16,10,.45) 40%,rgba(26,16,10,.78) 70%,#0A0202 100%)}
.indul,.indul2{border:none;box-shadow:none}
.min-dark{border:none}
/* V8.9: lighter green land, much less glow */
.min-dark{background:#0A0202 radial-gradient(ellipse 50% 45% at 64% 45%,rgba(30,64,38,.22) 0%,rgba(10,2,2,0) 70%)}
.min-dark .m-land{stroke:rgba(162,212,94,.45);filter:none}
.min-dark .m-dot{fill:#fff;stroke:var(--lime-dark);stroke-width:1.6px}
.min-dark .m-dot.home{fill:var(--lime);stroke:#fff;stroke-width:2px}
.min-dark .m-dot.on{fill:var(--lime);stroke:#fff;stroke-width:2.5px;filter:drop-shadow(0 0 6px rgba(162,212,94,.7))}
.min-dark .m-ring{stroke:#fff;opacity:0}
.min-dark .m-ring.sel{stroke:#fff}
/* V8.10: no edge mask on the map (user: black fade on the right was too much) */
.mwrap svg{-webkit-mask-image:none;mask-image:none}
/* V8.11: super-minimal hairline transitions above and below the markets section */
.min-dark{position:relative}
.min-dark::before,.min-dark::after{content:"";display:block;position:absolute;left:8%;right:8%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(162,212,94,0) 0%,rgba(162,212,94,.32) 50%,rgba(162,212,94,0) 100%);background-size:auto;transform:none;opacity:1;animation:none;pointer-events:none;z-index:1;border-radius:0}
.min-dark::after{top:auto;bottom:0}
/* V9: no hairlines; brand band breathes on desktop */
.min-dark::before,.min-dark::after{display:none}
@media(min-width:901px){
.brandband .wrap{padding-top:clamp(40px,6vh,80px)}
.brandband h2{margin-bottom:clamp(56px,7vh,84px)!important}
.bb-logos{gap:clamp(48px,7vw,120px);margin-bottom:clamp(44px,6vh,72px)}
.brandband .bb-lead{max-width:64ch;line-height:1.85}
.brandband .btn{margin-top:clamp(40px,5vh,56px)!important}
.bb-awards{margin-top:clamp(56px,8vh,96px);gap:clamp(24px,3vw,48px)}
.brandband .wrap{padding-bottom:clamp(140px,18vh,190px)}
}
/* ================= PRODUCT DEVELOPMENT v2 (catalog realm) ================= */
.pd-hero{position:relative;background:#14100C;color:#fff;padding:calc(var(--nav-h,84px) + clamp(56px,9vh,110px)) 0 0}
.pd-hero .crumb{margin-bottom:22px}
.pd-hero h1{color:#fff;font-weight:700;font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:-.03em;max-width:14ch}
.pd-hero h1 .dot{color:var(--lime)}
.pd-hero .sub{color:rgba(255,255,255,.78);max-width:52ch;margin-top:22px;font-size:16px}
.pd-spectrum{display:flex;height:clamp(300px,46vh,460px);margin-top:clamp(36px,6vh,64px);width:100%}
.pd-slat{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--c);color:var(--ink);text-decoration:none;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1);display:block}
.pd-slat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity;transition:opacity .5s,transform .8s}
.pd-slat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--c) 0%,rgba(0,0,0,0) 60%);opacity:.9}
.pd-slat-n,.pd-slat-t{position:absolute;left:18px;z-index:2;font-family:'Outfit';font-weight:700;letter-spacing:-.01em}
.pd-slat-n{top:18px;font-size:13px;letter-spacing:.14em;opacity:.85}
.pd-slat-t{bottom:20px;font-size:clamp(16px,1.5vw,22px);line-height:1.1;max-width:calc(100% - 36px)}
.pd-slat:hover{flex-grow:2.4}
.pd-slat:hover img{opacity:.85;mix-blend-mode:normal;transform:scale(1.04)}
/* bands */
.pd-band{position:relative;background:var(--c);color:var(--ink);overflow:hidden}
.pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(72px,11vh,130px) 0}
.pd-band.flip .pd-text{order:2}
.pd-num{display:inline-block;font-family:'Outfit';font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.pd-band h2{color:var(--ink);margin-top:14px;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.03em;max-width:12ch}
.pd-band p{color:var(--ink);opacity:.86;margin-top:20px;max-width:50ch;font-size:15px;line-height:1.7}
.pd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pd-badges span{font-size:12px;font-weight:600;letter-spacing:.02em;padding:7px 12px;border-radius:100px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink)}
.pd-more-btn{margin-top:26px;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--c);border:none;border-radius:100px;padding:13px 20px;font:600 14px 'Inter';cursor:pointer;transition:transform .25s}
.pd-more-btn:hover{transform:translateY(-2px)}
.pd-more-btn .arx svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.pd-band.open .pd-more-btn .arx svg{transform:rotate(180deg)}
.pd-media{position:relative}
.pd-photo{display:block;width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.pd-cut{position:absolute;right:-6%;bottom:-6%;width:44%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));transform:rotate(-8deg)}
.pd-cut.pd-logo{width:38%;right:6%;bottom:-4%;transform:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));background:#fff;padding:10px 14px;border-radius:14px}
.pd-more{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.7,.2,1)}
.pd-band.open .pd-more{max-height:1200px}
.pd-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);padding:0 0 clamp(64px,9vh,100px);border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.pd-list{padding-top:26px}
.pd-list h4{font-family:'Outfit';font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.pd-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.pd-list li{font-size:14px;color:var(--ink);opacity:.9;padding-left:16px;position:relative}
.pd-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.7}
/* closing */
.pd-close{position:relative;min-height:78vh;display:flex;align-items:center;color:#fff;overflow:hidden;padding:clamp(80px,12vh,140px) 0}
.pd-close>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pd-close-tint{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,16,12,.88) 0%,rgba(20,16,12,.7) 45%,rgba(20,16,12,.3) 100%)}
.pd-close .wrap{position:relative;z-index:2}
.pd-close .eyebrow{color:var(--lime)}
.pd-close h2{color:#fff;margin-top:14px;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.03em}
.pd-close p{color:rgba(255,255,255,.82);max-width:56ch;margin-top:20px}
.pd-formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:640px}
.pd-formats span{font-size:12px;font-weight:600;padding:7px 12px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.pd-close .hero-cta{margin-top:30px}
@media(max-width:900px){
.pd-hero{padding-top:calc(var(--nav-h,72px) + 40px)}
.pd-spectrum{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:6px;padding:0 var(--gutter,20px)}
.pd-slat{aspect-ratio:1/1;border-radius:14px}
.pd-slat:last-child{grid-column:span 2;aspect-ratio:2.2/1}
.pd-slat-t{font-size:16px}
.pd-grid{grid-template-columns:1fr;gap:28px;padding:clamp(56px,9vh,80px) 0}
.pd-band.flip .pd-text{order:0}
.pd-band h2{max-width:none}
.pd-photo{aspect-ratio:4/3.6;border-radius:20px}
.pd-cut{width:40%;right:-2%;bottom:-8%}
.pd-lists{grid-template-columns:1fr;gap:6px;padding-bottom:56px}
.pd-close{min-height:auto}
}
.pd-grid{padding:0;padding-top:clamp(72px,11vh,130px);padding-bottom:clamp(72px,11vh,130px)}
@media(max-width:900px){.pd-grid{padding-top:clamp(56px,9vh,80px);padding-bottom:clamp(56px,9vh,80px)}}
.pd-grid{padding-left:var(--pad);padding-right:var(--pad)}
video.fz-img{object-fit:cover;object-position:center 36%;width:100%;height:100%;display:block}
@media(max-width:680px){video.fz-img{object-position:center 40%}}
/* V10.2: map light again, placed between R&D and the founder; both on one cream */
.min-sec{background:#F2EFE2}
.founder{background:#F2EFE2}
.min-sec .m-land{stroke:rgba(111,163,58,.35)}
.min-sec .gtip{background:var(--ink);color:#fff}
.min-sec .gtip small{color:var(--lime)}
.min-sec.sec-pad{padding-bottom:clamp(40px,6vh,72px)}
.founder.sec-pad{padding-top:clamp(48px,7vh,84px)}
/* V10.3: CEO section — image left, text right on desktop */
@media(min-width:901px){
.founder .wrap>.reveal:first-child{order:2}
.founder .fimg{order:1}
}
@media(min-width:901px){.founder .wrap{grid-template-columns:.8fr 1.25fr}}
/* V10.4: MiniMax frozen loops — landscape on desktop (stage full width), portrait on mobile */
.frozen3 .fz-stage{width:100%}
video.fz-img{object-position:center 50%}
@media(max-width:680px){video.fz-img{object-position:center 50%}}
.fz-bg{object-position:center 50%}
/* V11: hero social proof + lime CTA; minimal Who-we-are cards; frozen copy desktop-hidden */
.hero-proof{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:22px;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12.5px/1 'Inter';letter-spacing:.02em;color:rgba(255,255,255,.9)}
.hero-proof .hp-stars{color:var(--lime);letter-spacing:.12em;font-size:12px}
.hero-proof i{width:1px;height:12px;background:rgba(255,255,255,.28)}
.hero.centered .btn-primary{background:var(--lime);color:var(--ink)}
.hero.centered .btn-primary:hover{background:#B5E272}
@media(max-width:680px){.hero-proof{gap:10px;padding:8px 14px;font-size:11.5px}.hero-proof span:nth-child(4),.hero-proof i:nth-of-type(2){display:none}}
/* who we are */
.who.sec-pad{padding-top:clamp(64px,9vh,100px);padding-bottom:clamp(64px,9vh,100px)}
.who .sec-head h2{font-size:clamp(26px,3vw,40px)!important;line-height:1.12;letter-spacing:-.02em;max-width:24ch;margin-left:auto;margin-right:auto}
.who .sec-head p{margin-top:16px}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(36px,5vh,56px)}
.who-card{background:#fff;border:1px solid rgba(22,40,26,.08);border-top:3px solid var(--lime);border-radius:18px;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px;transition:transform .3s,box-shadow .3s}
.who-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(22,40,26,.08)}
.who-card .wic{width:44px;height:44px;border-radius:12px;background:rgba(162,212,94,.18);color:var(--lime-deep);display:flex;align-items:center;justify-content:center}
.who-card .wic svg{width:22px;height:22px}
.who-card h3{font-family:'Outfit';font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0}
.who-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
@media(max-width:900px){.who-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.who-grid{grid-template-columns:1fr}.who-card{flex-direction:row;align-items:flex-start;gap:14px}.who-card .wic{flex:0 0 40px;width:40px;height:40px}.who-card h3{font-size:16px}}
/* frozen paragraph: mobile only */
@media(min-width:681px){.fz-over-bot{display:none}}
/* V11.1: one spacious rhythm across the homepage */
.who.sec-pad{padding-top:clamp(96px,13vh,170px);padding-bottom:clamp(96px,13vh,170px)}
.partners.dk{padding-top:clamp(72px,10vh,120px);padding-bottom:clamp(56px,8vh,96px)}
.brandband .wrap{padding-bottom:clamp(200px,24vh,260px)}
.min-sec.sec-pad{padding-top:clamp(96px,13vh,170px);padding-bottom:clamp(72px,10vh,120px)}
.founder.sec-pad{padding-top:clamp(72px,10vh,120px);padding-bottom:clamp(96px,13vh,170px)}
.indul.sec-pad{padding-top:clamp(96px,13vh,170px);padding-bottom:clamp(96px,13vh,170px)}
.brandband .wrap{padding-top:clamp(96px,13vh,170px)}
.sl-wrap{padding-bottom:clamp(96px,13vh,170px)}
@media(max-width:680px){
.who.sec-pad,.indul.sec-pad,.min-sec.sec-pad,.founder.sec-pad{padding-top:72px;padding-bottom:72px}
.partners.dk{padding-top:40px;padding-bottom:28px}
.brandband .wrap{padding-top:72px;padding-bottom:132px}
.sl-wrap{padding-bottom:72px}
}
.brandband .wrap{padding-top:clamp(64px,8vh,110px);padding-bottom:clamp(260px,30vh,320px)}
.who.sec-pad{padding-bottom:clamp(120px,15vh,190px)}
.min-sec.sec-pad{padding-bottom:clamp(64px,8vh,110px)}
.founder.sec-pad{padding-top:clamp(48px,6vh,84px)}
@media(max-width:680px){.brandband .wrap{padding-top:64px;padding-bottom:150px}.who.sec-pad{padding-bottom:80px}}
@media(max-width:680px){
.hero-proof{flex-wrap:nowrap;white-space:nowrap;gap:10px;padding:8px 14px}
.hero-proof span:nth-of-type(3),.hero-proof span:nth-of-type(4),.hero-proof i{display:none}
}
@media(max-width:520px){
.who-card{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:4px;align-items:start}
.who-card .wic{grid-row:1/3;width:40px;height:40px}
.who-card h3{grid-column:2;margin:0;font-size:16px}
.who-card p{grid-column:2;margin:0}
}
.hero-proof{background:none;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin-bottom:20px;color:rgba(255,255,255,.88)}
.hero-proof .hp-ico{display:inline-flex;width:20px;height:20px;color:var(--lime)}
.hero-proof .hp-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-proof i{background:rgba(255,255,255,.32)}
@media(max-width:680px){.hero-proof{padding:0}}
/* V11.3: glass pill back on hero proof; pills left-aligned inside so icons line up */
.hero-proof{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 16px 8px 12px}
@media(max-width:680px){.hero-proof{padding:8px 14px 8px 12px}}
.indul .pill{justify-content:flex-start;padding-left:18px;gap:12px}
@media(max-width:680px){.indul .pill{justify-content:flex-start;text-align:left;padding-left:16px}}
/* alignment: map text centred on mobile like the chips below it */
@media(max-width:900px){.min-sec .wrap>.reveal:first-child{text-align:center}.min-sec .eyebrow{justify-content:center}.min-sec .gp{margin-left:auto;margin-right:auto}}
/* V11.4: catalog-style who-we-are cards */
.who-card{align-items:center;text-align:center;gap:0;padding:clamp(28px,2.6vw,40px) clamp(18px,1.8vw,26px);border-top:1px solid rgba(22,40,26,.08);border-radius:22px;box-shadow:0 10px 30px rgba(22,40,26,.05)}
.who-card .who-ico{height:64px;width:auto;max-width:96px;object-fit:contain;display:block}
.who-card .who-div{height:14px;width:auto;margin:18px 0 14px;display:block;opacity:.95}
.who-card h3{color:var(--lime-deep);font-size:17px;line-height:1.25}
.who-card p{margin-top:8px;font-size:14px;color:var(--ink);opacity:.72}
.who-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(22,40,26,.09)}
@media(max-width:900px){.who-grid{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:520px){
.who-grid{grid-template-columns:1fr 1fr;gap:10px}
.who-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;aspect-ratio:1/1;padding:16px 12px;gap:0}
.who-card .who-ico{height:44px;max-width:64px}
.who-card .who-div{height:11px;margin:10px 0 8px}
.who-card h3{font-size:14px;grid-column:auto}
.who-card p{font-size:12px;line-height:1.45;margin-top:6px;grid-column:auto}
}
@media(max-width:520px){
.who-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.who-card{min-width:0;aspect-ratio:auto;min-height:176px;padding:18px 10px}
.who-card h3{font-size:13.5px;overflow-wrap:anywhere}
.who-card p{font-size:12px}
}
/* V11.6: brand logos back to the original spacing */
@media(min-width:901px){.bb-logos{gap:clamp(28px,4vw,64px);margin-bottom:clamp(32px,4vh,48px)}}
@media(min-width:901px){.bb-logos{gap:0;margin-bottom:44px}}
/* V12: footer on the same near-black as the indulgence section; Let's-build fades into it */
.footer2{background:#0A0202}
.aud2{background:linear-gradient(180deg,#140C09 0%,#0A0202 100%)}
/* ================= PRODUCT DEVELOPMENT v3: bold hero, hover cards + popup, snacking, packaging ================= */
.pd2-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(ellipse 70% 90% at 78% 40%,#F04E6C 0%,#D42A4C 45%,#A5183A 100%);padding:calc(var(--nav-h,84px) + clamp(56px,9vh,110px)) 0 clamp(56px,8vh,96px)}
.pd2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.pd2-hero .crumb{margin-bottom:22px}
.pd2-hero h1{color:#fff;font-weight:700;font-size:clamp(42px,6.2vw,84px);line-height:.98;letter-spacing:-.03em}
.pd2-hero h1 .dot{color:var(--lime)}
.pd2-hero .sub{color:rgba(255,255,255,.86);max-width:50ch;margin-top:22px;font-size:16px}
.pd2-hero .hero-cta{margin-top:30px}
.pd2-hero .btn-light{background:#fff;color:#A5183A}
.pd2-art{position:relative;aspect-ratio:1/1;max-width:560px;margin-left:auto}
.pd2-main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;box-shadow:0 40px 80px rgba(60,0,20,.45)}
.pd2-float{position:absolute;width:38%;height:auto;filter:drop-shadow(0 24px 30px rgba(60,0,20,.5));animation:pdfloat 6s ease-in-out infinite}
.pd2-float.f1{left:-12%;bottom:6%;transform:rotate(-12deg)}
.pd2-float.f2{right:-10%;top:4%;width:34%;animation-delay:-3s;transform:rotate(10deg)}
@keyframes pdfloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
/* cards */
.pd2-products{background:var(--cream2,#FBF9F4)}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(36px,5vh,56px)}
.pc{position:relative;aspect-ratio:4/5;border:none;border-radius:22px;overflow:hidden;padding:0;cursor:pointer;background:var(--c);color:var(--ink);text-align:left;font-family:'Outfit';transition:transform .35s var(--ease),box-shadow .35s}
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity;transition:opacity .5s,transform .8s,filter .5s}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--c) 0%,color-mix(in srgb,var(--c) 40%,transparent) 55%,transparent 100%);transition:opacity .5s}
.pc-n,.pc-t,.pc-more{position:absolute;left:20px;z-index:2}
.pc-n{top:18px;font-weight:700;font-size:12.5px;letter-spacing:.16em;opacity:.85}
.pc-t{bottom:52px;right:20px;font-weight:700;font-size:clamp(17px,1.5vw,22px);line-height:1.1;letter-spacing:-.01em}
.pc-more{bottom:20px;font:600 12px 'Inter';letter-spacing:.08em;text-transform:uppercase;opacity:.8;display:flex;align-items:center;gap:8px}
.pc-more i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.pc:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(22,40,26,.18)}
.pc:hover img{opacity:1;mix-blend-mode:normal;transform:scale(1.05)}
.pc:hover::after{opacity:.55}
.pc:hover .pc-n,.pc:hover .pc-t,.pc:hover .pc-more{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
@media(hover:none){.pc img{opacity:.55}}
@media(max-width:900px){.pc-grid{grid-template-columns:repeat(2,1fr)}.pc-grid .pc:last-child{grid-column:span 2;aspect-ratio:2/1}}
/* popup */
.pmodal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.pmodal.open{display:flex}
.pmodal-bg{position:absolute;inset:0;background:rgba(10,2,2,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pmodal-card{position:relative;width:min(1060px,100%);max-height:min(88vh,900px);overflow:auto;border-radius:28px;background:#fff;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:pmin .35s var(--ease)}
@keyframes pmin{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.pmodal-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.pm{display:grid;grid-template-columns:.9fr 1.1fr;min-height:520px}
.pm-media{position:relative;background:var(--c);min-height:320px}
.pm-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-n{position:absolute;left:22px;top:20px;padding:7px 12px;border-radius:100px;background:var(--c);color:var(--ink);font:700 12px 'Outfit';letter-spacing:.14em;text-transform:uppercase}
.pm-body{padding:clamp(28px,4vw,48px)}
.pm-body h3{font-family:'Outfit';font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.02;letter-spacing:-.025em;color:var(--ink)}
.pm-body p{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.7}
.pm-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pm-badges span{font-size:12px;font-weight:600;padding:6px 11px;border-radius:100px;background:color-mix(in srgb,var(--c) 14%,white);color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.pm-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pm-list h4{font-family:'Outfit';font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.pm-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.pm-list li{font-size:13.5px;color:var(--muted);padding-left:14px;position:relative}
.pm-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--c)}
.pm-cta{margin-top:28px}
@media(max-width:800px){.pm{grid-template-columns:1fr}.pm-media{min-height:240px;aspect-ratio:16/9}.pm-media img{position:absolute}.pmodal{padding:12px}.pmodal-card{max-height:92vh;border-radius:22px}}
/* snacking full-bleed */
.pd2-snack{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:clamp(80px,12vh,140px) 0 clamp(64px,9vh,110px)}
.pd2-snack>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.pd2-snack-tint{position:absolute;inset:0;background:linear-gradient(to top,rgba(90,35,0,.86) 0%,rgba(90,35,0,.35) 45%,rgba(0,0,0,0) 75%)}
.pd2-snack .wrap{position:relative;z-index:2;text-align:center}
.pd2-snack h2{color:#fff;font-size:clamp(34px,4.6vw,66px);line-height:1;letter-spacing:-.03em}
.pd2-snack h2 .dot{color:var(--lime)}
.pd2-snack p{color:rgba(255,255,255,.88);max-width:58ch;margin:20px auto 0}
/* packaging */
.pd2-pack{background:#fff}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(36px,5vh,56px)}
.pk-tile{background:var(--cream2,#FBF9F4);border:1px solid rgba(22,40,26,.07);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.pk-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,40,26,.1)}
.pk-img{aspect-ratio:4/3;background:#fff}
.pk-img img{width:100%;height:100%;object-fit:cover;display:block}
.pk-tile span{display:block;padding:12px 16px 14px;font-family:'Outfit';font-weight:700;font-size:14.5px;color:var(--ink);border-top:1px solid rgba(22,40,26,.06)}
.pk-bulk{margin-top:clamp(36px,5vh,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(22px,3vw,32px);border-radius:22px;background:var(--cream2,#FBF9F4);border:1px solid rgba(22,40,26,.07)}
.pk-bulk h4{font-family:'Outfit';font-weight:700;font-size:18px;color:var(--ink)}
.pk-bulk-list{display:flex;flex-wrap:wrap;gap:8px}
.pk-bulk-list span{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink)}
@media(max-width:900px){.pd2-grid{grid-template-columns:1fr}.pd2-art{max-width:420px;margin:12px auto 0}.pk-grid{grid-template-columns:repeat(2,1fr)}.pd2-snack{min-height:70vh}}
@media(max-width:520px){.pk-grid{gap:10px}.pk-tile span{font-size:13px;padding:10px 12px}.pd2-hero h1{font-size:40px}.pd2-float.f1{left:-6%}.pd2-float.f2{right:-4%}}
/* benefits (p.20) */
.pd2-ben{background:var(--cream2,#FBF9F4)}
.pb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(36px,5vh,56px)}
.pb-item{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid rgba(22,40,26,.07);font-family:'Outfit';font-weight:700;font-size:15px;color:var(--ink)}
.pb-item .wic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:rgba(162,212,94,.18);color:var(--lime-deep);display:flex;align-items:center;justify-content:center}
.pb-item .wic svg{width:22px;height:22px}
@media(max-width:900px){.pb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pb-grid{grid-template-columns:1fr;gap:10px}.pb-item{padding:14px 16px;font-size:14px}}
/* quality (p.21) */
.pd2-quality{background:#0A0202;color:#fff}
.pq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.pd2-quality .eyebrow{color:var(--lime)}
.pd2-quality h2{color:#fff;margin-top:14px;font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.02em}
.pd2-quality p{color:rgba(255,255,255,.72);margin-top:18px;font-size:15px;line-height:1.7;max-width:56ch}
.pq-items{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pq-item{padding:22px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pq-item .wic{width:44px;height:44px;border-radius:12px;background:rgba(162,212,94,.14);color:var(--lime);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pq-item .wic svg{width:22px;height:22px}
.pq-item h4{font-family:'Outfit';font-weight:700;font-size:16px;color:#fff}
.pq-certs{margin-top:clamp(48px,7vh,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding-top:clamp(32px,5vh,48px);border-top:1px solid rgba(255,255,255,.12)}
.pq-block h4{font-family:'Outfit';font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.pq-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px)}
.pq-logos img{height:38px;width:auto;opacity:.9}
.pq-logos.aw img{height:56px}
@media(max-width:900px){.pq-grid{grid-template-columns:1fr}.pq-certs{grid-template-columns:1fr}}
@media(max-width:520px){.pq-items{grid-template-columns:1fr}.pq-logos img{height:30px}.pq-logos.aw img{height:46px}}
.pd2-art{width:100%;max-width:560px;margin-left:0;justify-self:end}
.pk-img img{object-fit:contain;padding:6%}
.pm-n{color:var(--pi,#fff)}
.pm,.pm-body{min-width:0;max-width:100%}
.pm-body{overflow-wrap:anywhere}
.pmodal-card{overflow-x:hidden}
.pm{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media(max-width:800px){.pm{grid-template-columns:minmax(0,1fr)}}
.pm-badges{min-width:0}.pm-badges span{white-space:normal;min-width:0;text-align:left}
.pm-lists{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
/* V12.2: product cards natural, only a whisper of colour; hover = slight lift/brighten */
.pc img{opacity:1;mix-blend-mode:normal;filter:saturate(.95)}
.pc::after{background:linear-gradient(to top,color-mix(in srgb,var(--c) 78%,#000 0%) 0%,color-mix(in srgb,var(--c) 30%,transparent) 42%,color-mix(in srgb,var(--c) 6%,transparent) 100%);opacity:.9}
.pc-n,.pc-t,.pc-more{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.pc:hover img{transform:scale(1.04);filter:saturate(1.05) brightness(1.04)}
.pc:hover::after{opacity:.75}
/* V12.3: full-bleed banner, catalog-page popups, page-19 packaging */
.pd3-hero{position:relative;overflow:hidden;color:#fff;min-height:min(78vh,760px);display:flex;align-items:center;padding:calc(var(--nav-h,84px) + clamp(40px,7vh,80px)) 0 clamp(56px,8vh,96px)}
.pd3-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.pd3-tint{position:absolute;inset:0;background:linear-gradient(100deg,rgba(120,10,40,.92) 0%,rgba(150,25,60,.72) 42%,rgba(150,25,60,.18) 75%,rgba(150,25,60,.05) 100%)}
.pd3-hero .wrap{position:relative;z-index:2}
.pd3-hero h1{color:#fff;font-weight:700;font-size:clamp(42px,6.2vw,84px);line-height:.98;letter-spacing:-.03em;max-width:12ch}
.pd3-hero h1 .dot{color:var(--lime)}
.pd3-hero .sub{color:rgba(255,255,255,.88);max-width:48ch;margin-top:22px;font-size:16px}
.pd3-hero .hero-cta{margin-top:30px}
.pd3-hero .btn-light{background:#fff;color:#A5183A}
.pd3-hero .crumb{margin-bottom:22px}
.pd3-hero .pd2-float{position:absolute;z-index:2;width:clamp(120px,14vw,220px);filter:drop-shadow(0 24px 30px rgba(60,0,20,.5))}
.pd3-hero .f1{left:auto;right:30%;bottom:6%;transform:rotate(-12deg)}
.pd3-hero .f2{right:6%;top:14%;transform:rotate(10deg)}
.pd3-hero .f3{right:20%;bottom:-4%;width:clamp(110px,12vw,190px);animation-delay:-1.5s;transform:rotate(-6deg)}
@media(max-width:900px){.pd3-hero{min-height:auto;padding-top:calc(var(--nav-h,72px) + 32px)}.pd3-tint{background:linear-gradient(180deg,rgba(120,10,40,.9) 0%,rgba(150,25,60,.8) 55%,rgba(150,25,60,.5) 100%)}.pd3-hero .pd2-float{width:96px;opacity:.9}.pd3-hero .f1{right:8%;bottom:2%}.pd3-hero .f2{right:4%;top:auto;bottom:34%}.pd3-hero .f3{display:none}}
/* cards: no colour wash on the photo, thin tint only at the bottom for the label */
.pc img{opacity:1;mix-blend-mode:normal;filter:none}
.pc::after{background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,0) 65%);opacity:1}
.pc{border:3px solid var(--c)}
.pc:hover::after{opacity:.85}
/* popup as catalogue page */
.pm.pm-page{display:block;min-height:0}
.pm-pageimg{display:block;width:100%;height:auto}
.pm-mobile{display:none;padding:22px}
.pm-foot{padding:18px 24px 24px;display:flex;justify-content:flex-end;border-top:1px solid var(--line)}
.pmodal-card{width:min(980px,100%)}
@media(max-width:800px){.pm-mobile{display:block}.pm-mobile .pm-lists{margin-top:18px;padding-top:18px}.pm-foot{justify-content:center}}
/* packaging page */
.pk-page{margin-top:clamp(32px,5vh,56px);border-radius:22px;overflow:hidden;border:1px solid rgba(22,40,26,.08);background:#fff}
.pk-page img{display:block;width:100%;height:auto}
.pk-mobile{display:none}
.pk-tile:hover{transform:none;box-shadow:none}
.pk-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vh,40px)}
@media(max-width:800px){.pk-page{display:none}.pk-mobile{display:block}}
/* V12.4: orange banner, no snacking section, continuous popups, cream sections */
.pd3-tint{background:linear-gradient(100deg,rgba(90,35,0,.9) 0%,rgba(150,70,10,.72) 42%,rgba(200,100,20,.2) 75%,rgba(200,100,20,.05) 100%)}
.pd3-bg{object-position:60% 45%}
.pd3-hero .btn-light{color:#8A3E05}
@media(max-width:900px){.pd3-tint{background:linear-gradient(180deg,rgba(90,35,0,.9) 0%,rgba(150,70,10,.82) 55%,rgba(200,100,20,.5) 100%)}}
.pd2-pack,.pd-cream,.pd2-products{background:var(--cream2,#FBF9F4)}
.pk-page{background:#F7F5F0}
.pm.pm-page{background:#F7F5F0}
.pm-text{padding:clamp(22px,3vw,40px) clamp(24px,4vw,56px) 8px}
.pm-text h3{font-family:'Outfit';font-weight:700;font-size:clamp(26px,2.8vw,38px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);max-width:22ch}
.pm-text p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.7;max-width:64ch}
.pm-mobile{padding-top:8px}
.pm-foot{border-top:none;padding-top:8px;padding-bottom:28px;justify-content:flex-start;padding-left:clamp(24px,4vw,56px)}
@media(max-width:800px){.pm-foot{justify-content:center;padding-left:24px}.pm-mobile{padding:8px 22px 0}}
.pm.pm-page,.pk-page{background:#F4F1ED}
.pc{border:none;box-shadow:0 10px 30px rgba(22,40,26,.08)}
.pc:hover{box-shadow:0 26px 50px rgba(22,40,26,.16)}
/* V12.5: packaging blends with the page paper, no frame */
.pd2-pack{background:#F4F1ED}
.pk-page{border:none;border-radius:0;background:transparent;margin-top:clamp(16px,3vh,32px)}
.pk-page img{max-width:1100px;margin:0 auto}
.pk-tile,.pk-img{background:#fff}
/* V12.6: banner = plain image, no tint, no floating parts */
.pd3-tint{display:none}
.pd3-hero .pd2-float{display:none}
.pd3-hero h1,.pd3-hero .sub{text-shadow:0 2px 18px rgba(60,20,0,.35)}
.pd3-hero .crumb{text-shadow:none}
/* V12.7: per-page paper colour, tighter quality gap, darker banner, bento cards */
.pm.pm-page{background:var(--paper,#F4F1ED)}
.pd2-pack.sec-pad{padding-bottom:clamp(40px,6vh,64px)}
#quality.sec-pad{padding-top:clamp(48px,6vh,72px)}
.pd3-tint{display:block;background:linear-gradient(105deg,rgba(16,24,14,.82) 0%,rgba(16,24,14,.5) 45%,rgba(16,24,14,.22) 100%)}
.pd3-hero h1,.pd3-hero .sub{text-shadow:none}
@media(max-width:900px){.pd3-tint{background:linear-gradient(180deg,rgba(16,24,14,.85) 0%,rgba(16,24,14,.6) 60%,rgba(16,24,14,.35) 100%)}}
@media(min-width:901px){
.pc-grid{grid-template-columns:repeat(4,1fr)}
.pc-grid .pc:first-child{grid-column:span 2;aspect-ratio:auto;height:100%}
.pc-grid .pc:first-child .pc-t{font-size:clamp(22px,2vw,30px);max-width:16ch}
}
@media(max-width:900px){.pc-grid .pc:first-child{grid-column:auto;aspect-ratio:4/5}}
/* V12.8: quality logos wrap on mobile */
@media(max-width:680px){
#quality .wrap > div:not(.sec-head){display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px;overflow:visible}
#quality .wrap > div:not(.sec-head) img{height:34px;width:auto;max-width:120px;object-fit:contain}
#quality.sec-pad{padding-bottom:56px}
}
/* V12.9: packaging on the page's own white; page image on every screen size */
.pd2-pack{background:#FDFCFC}
.pk-page,.pk-page img{background:#FDFCFC}
@media(max-width:800px){.pk-page{display:block;margin-left:calc(50% - 50vw);width:100vw}.pk-page img{max-width:none}.pk-mobile{display:none}}
/* V13: premium popup framing + go-back link; product + quality sections on packaging white */
.pd2-products,.pd-cream,#quality.sec-pad{background:#FDFCFC}
.pmodal-card{border-radius:30px;box-shadow:0 50px 110px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35)}
.pm.pm-page{padding:clamp(18px,3vw,40px) clamp(18px,3vw,40px) 0}
.pm-sheet{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(22,40,26,.09);box-shadow:0 18px 40px rgba(22,40,26,.08)}
.pm-cap{position:absolute;top:14px;right:16px;z-index:2;font:600 11px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:rgba(22,40,26,.55);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);padding:6px 10px;border-radius:100px}
.pm-text{padding:clamp(26px,3.5vw,44px) 0 6px}
.pm-foot{padding:14px 0 clamp(22px,3vw,36px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pm-back{background:none;border:none;font:600 13.5px 'Inter';color:var(--muted);cursor:pointer;padding:8px 0;letter-spacing:.01em}
.pm-back:hover{color:var(--ink)}
.pm-mobile{padding-left:0;padding-right:0}
.pmodal-x{top:18px;right:18px;background:#fff}
@media(max-width:800px){.pm.pm-page{padding:12px 12px 0}.pm-cap{display:none}.pm-foot{justify-content:center;padding-left:0}.pm-mobile{padding:8px 0 0}.pmodal-x{top:20px;right:20px}}
/* V13.1: popup frame in the page's own colour, tighter margin, sheet blends in */
.pmodal-card{background:transparent}
.pm.pm-page{padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) 0;min-height:100%;background:var(--paper,#F4F1ED)}
.pm-sheet{border:none;box-shadow:none;border-radius:14px}
.pm-cap{background:transparent;backdrop-filter:none;color:rgba(22,40,26,.45)}
@media(max-width:800px){.pm.pm-page{padding:10px 10px 0}}
/* V13.3: page sheet feathers into the frame (no visible seam), same on mobile */
.pm-sheet{border-radius:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%),linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%),linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-composite:intersect}
.pm.pm-page{padding:clamp(10px,1.6vw,22px) clamp(10px,1.6vw,22px) 0}
@media(max-width:800px){.pm.pm-page{padding:8px 8px 0}}
/* ===== V14 Contact page ===== */
.ct-sec{background:var(--paper);padding-top:clamp(56px,7vw,96px)}
.ct-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 70px -40px rgba(22,40,26,.25)}
.ct-info{padding:clamp(28px,3.4vw,52px);border-right:1px solid var(--line-soft);background:#FDFCF8}
.ct-info h3,.ct-form h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.ct-lead{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 30px}
.ct-rows{display:flex;flex-direction:column;gap:22px;padding-bottom:28px;border-bottom:1px solid var(--line-soft)}
.ct-row{display:flex;gap:16px;align-items:flex-start}
.ct-row b{display:block;font-size:15px;color:var(--ink);margin:6px 0 4px}
.ct-row span:not(.ct-ic){display:block;font-size:14.5px;line-height:1.55;color:var(--muted)}
.ct-row a{color:var(--muted);text-decoration:none}.ct-row a:hover{color:var(--ink)}
.ct-ic{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.ct-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-social{padding-top:26px}.ct-social b{display:block;font-size:15px;color:var(--ink);margin-bottom:12px}
.ct-soc{display:flex;gap:10px}
.ct-soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:.25s}
.ct-soc a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ct-soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-form{padding:clamp(28px,3.4vw,52px)}
.ct-form form{margin-top:6px}
.ct-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:14px 0 6px}
.ct-form input,.ct-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:.2s}
.ct-form input:focus,.ct-form textarea:focus{border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(162,212,94,.25)}
.ct-form textarea{min-height:140px;resize:vertical}
.ct-form .btn{margin-top:22px;width:100%;justify-content:center}
.ct-form .cthanks{padding:40px 0}
.fu-sec{background:#FDFCFC}
.fu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.fu-tile{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-soft);text-decoration:none;color:var(--ink);transition:.25s}
.fu-tile:hover{background:#fff;box-shadow:0 18px 40px -28px rgba(22,40,26,.35)}
.fu-tile b{display:block;font-size:14px;margin-bottom:2px}
.fu-tile span:not(.ct-ic){display:block;font-size:14px;color:var(--muted)}
.fu-map{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-soft);background:var(--paper);aspect-ratio:21/9}
.fu-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.75)}
.fu-open{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;padding:11px 16px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.fu-open .arx{width:20px;height:20px;border-radius:50%;background:var(--lime);display:inline-flex;align-items:center;justify-content:center}
.fu-open .arx svg{width:11px;height:11px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}
.faq-sec{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-grid .sec-head{margin-bottom:0;position:sticky;top:110px}
.faq-grid .sec-head p{margin-top:18px;color:var(--muted);line-height:1.6}
.faq-grid .sec-head p a{color:var(--ink);font-weight:600}
.faq{display:flex;flex-direction:column;gap:12px}
.fq{background:#fff;border:1px solid var(--line-soft);border-radius:18px;transition:.25s}
.fq.open{border-color:var(--lime);box-shadow:0 18px 40px -30px rgba(22,40,26,.3)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;background:none;border:0;padding:20px 22px;font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer}
.fq-i{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:.3s}
.fq-i::before,.fq-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:currentColor;transform:translate(-50%,-50%);transition:.3s}
.fq-i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq.open .fq-i{background:var(--lime);border-color:var(--lime)}
.fq.open .fq-i::after{transform:translate(-50%,-50%) rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.fq-a>div{overflow:hidden}
.fq-a p{margin:0;padding:0 22px 22px;color:var(--muted);line-height:1.65;font-size:15px}
.fq.open .fq-a{grid-template-rows:1fr}
@media(max-width:900px){
.ct-card{grid-template-columns:1fr}
.ct-info{border-right:0;border-bottom:1px solid var(--line-soft)}
.fu-tiles{grid-template-columns:1fr}
.fu-map{aspect-ratio:4/3}
.faq-grid{grid-template-columns:1fr}
.faq-grid .sec-head{position:static}
}
@media(max-width:560px){
.ct-form .frow{grid-template-columns:1fr;gap:0}
.ct-info,.ct-form{padding:26px 20px}
.fu-open{right:12px;bottom:12px}
.fq-q{padding:16px 16px;font-size:15.5px}
.fq-a p{padding:0 16px 18px}
}
/* V14.1 contact refinements */
.fsel{position:relative}
.fsel select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 44px 13px 15px;font:inherit;font-size:15px;color:var(--ink);outline:none;cursor:pointer;transition:.2s}
.fsel select:invalid,.fsel select option[value=""]{color:var(--muted-2)}
.fsel select:focus{border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(162,212,94,.25)}
.fsel svg{position:absolute;right:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fu-tiles{gap:0;margin-bottom:34px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.fu-tile{background:none;border:0;border-radius:0;padding:26px 28px 26px 0;gap:18px}
.fu-tile+.fu-tile{padding-left:32px;border-left:1px solid var(--line-soft)}
.fu-tile:hover{background:none;box-shadow:none}
.fu-tile .ct-ic{width:44px;height:44px;flex-basis:44px;background:none;border:1px solid var(--line);color:var(--ink);transition:.25s}
.fu-tile:hover .ct-ic{border-color:var(--ink);background:var(--ink);color:#fff}
.fu-tile .ct-ic svg{width:19px;height:19px;stroke-width:1.5}
.fu-tile b{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.fu-tile span:not(.ct-ic){font-size:16px;font-weight:500;color:var(--ink)}
@media(max-width:900px){
.fu-tiles{border:0}
.fu-tile{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.fu-tile+.fu-tile{padding-left:0;border-left:0}
.fu-tile:first-child{border-top:1px solid var(--line-soft)}
}
/* V14.3 contact: one heading system, site typography */
.ct-sec .sec-head{margin-bottom:40px}
.ct-row span:not(.ct-ic){font-size:15px}
.ct-row b,.ct-social b{font-size:16px;font-family:'Outfit';font-weight:700}
.ct-form label{font-size:13.5px}
.fu-tile span:not(.ct-ic){font-size:15px}
.fq-q{font-family:'Outfit';font-weight:700;font-size:17px;letter-spacing:-.01em}
.fq-a p{font-size:15px}
/* V14.4 brown retired: cocoa surfaces -> footer black */
:root{--cocoa:#0A0202;--cocoa-2:#140A0A}
/* ===== V15 Brands page ===== */
.bf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bf{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,36px);text-decoration:none;color:var(--ink);transition:.35s var(--ease)}
.bf:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(22,40,26,.35)}
.bf-logo{height:64px;display:flex;align-items:center;margin-bottom:22px}
.bf-logo img{height:52px;width:auto;max-width:190px}
.bf-logo img.mf{height:44px}
.bf h3{font-size:20px;margin:0 0 8px}
.bf p{color:var(--muted);margin:0 0 22px;font-size:15px}
.bf-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink)}
.bf-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.bf:hover .bf-more svg{transform:translateX(4px)}
.xp-grid .acard2{min-height:400px}
.xp-stat{position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;letter-spacing:.02em}
.xp-grid .a2-body p{color:rgba(255,255,255,.8)}
.why.ben{padding:32px 34px;border-color:var(--line-soft)}
.bic{width:64px;height:64px;margin-bottom:18px}
.bic img{width:100%;height:100%;object-fit:contain}
.why.ben h3{font-family:'Outfit';font-weight:700;font-size:19px}
.why.ben p{font-size:15px}
@media(max-width:900px){
.bf-grid{grid-template-columns:1fr}
.xp-grid{grid-template-columns:1fr 1fr}
.xp-grid .acard2{min-height:300px}
}
@media(max-width:560px){.xp-grid{grid-template-columns:1fr}}
/* V15.1 catalogue link under product groups */
.pc-cat{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;padding:26px 30px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:#fff}
.pc-cat b{display:block;font-family:'Outfit';font-weight:700;font-size:19px;color:var(--ink);margin-bottom:4px}
.pc-cat span{display:block;color:var(--muted);font-size:15px}
.pc-cat .btn{flex:0 0 auto}
@media(max-width:720px){.pc-cat{flex-direction:column;align-items:flex-start}.pc-cat .btn{width:100%;justify-content:center}}
/* V15.2 brands fixes */
.bf-logo{height:104px;background:#0A0202;border-radius:14px;justify-content:center;padding:0 24px;margin-bottom:24px}
.bf-logo img{height:50px;max-width:200px}
.bf-logo img.mf{height:42px}
.xp-grid .acard2 img{filter:none}
.xp-grid .acard2:hover img{filter:none}
.xp-grid .acard2::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,2,2,0) 38%,rgba(10,2,2,.82) 100%)}
.bic{width:72px;height:72px}
/* V15.3 brands: homepage band on top */
#family.brandband .bb-awards{margin-top:44px}
/* V15.4 brands: hero -> band transition, story image, transparent benefit cards */
.hero.hero-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(140px,26vh,260px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,2,2,0) 0%,#0A0202 100%)}
#family.brandband{background:#0A0202}
#family.brandband .bb-tint{background:linear-gradient(to bottom,#0A0202 0%,rgba(10,2,2,.55) 32%,rgba(10,2,2,.78) 62%,#0A0202 100%)}
#family.brandband .wrap{padding-top:clamp(40px,6vh,80px)}
.why.ben,.why.ben:hover{background:transparent;border:0;box-shadow:none;transform:none;padding:28px 0 8px;border-top:1px solid var(--line)}
.ben-grid{gap:0 clamp(28px,4vw,64px)}
.bic{width:80px;height:80px;margin-bottom:22px}
@media(max-width:900px){.ben-grid{grid-template-columns:1fr}}
/* V15.5 catalogue CTA frameless + tighter products→packaging spacing on mobile */
.pc-cat{background:transparent;border:0;border-radius:0;padding:0;margin-top:40px;border-top:1px solid var(--line);padding-top:28px}
@media(max-width:680px){
.pc-cat{margin-top:28px;padding-top:24px}
.pd2-products.sec-pad{padding-bottom:64px}
.pd2-pack.sec-pad{padding-top:72px}
}
/* V15.6 catalogue button black */
.pc-cat .btn.btn-primary{background:#0A0202;color:#fff;border-color:#0A0202}
.pc-cat .btn.btn-primary .arx{background:var(--lime)}
.pc-cat .btn.btn-primary .arx svg{stroke:var(--ink)}
.pc-cat .btn.btn-primary:hover{background:#221414}
/* V15.7 nav CTA lime + arrow */
.nav-cta,.nav.scrolled .nav-cta{background:var(--lime);border-color:var(--lime);color:var(--ink);gap:9px;padding:10px 12px 10px 22px;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-cta:hover,.nav.scrolled .nav-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.nav-cta .arx{width:24px;height:24px;border-radius:50%;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:background .3s,transform .35s var(--ease)}
.nav-cta .arx svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav-cta:hover .arx{background:var(--lime);transform:translate(1px,-1px)}
.nav-cta:hover .arx svg{stroke:var(--ink)}
/* V15.8 nav CTA: glass on top, lime after scroll, arrow circle */
.nav-cta{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-cta .arx{background:#fff}
.nav-cta .arx svg{stroke:var(--ink)}
.nav-cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.nav-cta:hover .arx{background:var(--ink)}
.nav-cta:hover .arx svg{stroke:#fff}
.nav.scrolled .nav-cta{background:var(--lime);border-color:var(--lime);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.scrolled .nav-cta .arx{background:var(--ink)}
.nav.scrolled .nav-cta .arx svg{stroke:#fff}
.nav.scrolled .nav-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.nav.scrolled .nav-cta:hover .arx{background:var(--lime)}
.nav.scrolled .nav-cta:hover .arx svg{stroke:var(--ink)}
/* ===== V16 Manufacturing page ===== */
.stmt{background:var(--paper);overflow:hidden}
.stmt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.stmt-h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:18px 0 26px}
.stmt-h em{font-style:normal;color:var(--lime-deep)}
.stmt-h .hl{background:linear-gradient(transparent 58%,rgba(162,212,94,.55) 58%)}
.stmt-h u{text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 96%/100% 3px}
.stmt p{color:var(--muted);margin-top:14px;max-width:56ch}
.stmt-img{border-radius:0 var(--r-xl) var(--r-xl) 0;overflow:hidden;aspect-ratio:4/4.2;border-radius:50% 50% 50% 50%/48% 48% 52% 52%}
.stmt-img img{width:100%;height:100%;object-fit:cover}
.stmt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(48px,7vh,84px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line)}
.ss b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1;color:var(--lime-deep);margin-bottom:12px}
.ss b.hlb{display:inline-block;position:relative}
.ss b.hlb::before{content:"";position:absolute;left:-8px;right:-14px;top:38%;bottom:-16px;background:rgba(162,212,94,.35);z-index:-1;border-radius:4px}
.ss span{display:block;font-size:15px;color:var(--muted);line-height:1.5}
.cap6{background:#fff}
.who6{grid-template-columns:repeat(3,1fr)}
.mfg-rd{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:start;margin-top:clamp(56px,8vh,96px);padding-top:clamp(36px,5vh,56px);border-top:1px solid rgba(255,255,255,.12)}
.mfg-rd-head h3{font-size:clamp(26px,2.8vw,38px);color:#fff;margin:14px 0 14px}
.mfg-rd-head p{color:rgba(255,255,255,.72);max-width:48ch}
.mfg-rd-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mfg-rd-list>div{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04)}
.mfg-rd-list img{width:46px;height:46px;flex:0 0 46px;object-fit:contain;filter:brightness(1.9)}
.mfg-rd-list b{display:block;color:#fff;font-size:15.5px;margin:4px 0 4px}
.mfg-rd-list span{display:block;color:rgba(255,255,255,.62);font-size:14px;line-height:1.5}
.careers2{background:#fff}
.careers-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center}
.careers-grid .cimg{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.careers-grid .cimg img{width:100%;height:100%;object-fit:cover}
.careers-grid h2{font-size:clamp(28px,3.2vw,42px);margin-top:18px}
.careers-grid p{color:var(--muted);margin-top:18px}
.careers2.sec-pad{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
@media(max-width:900px){
.stmt-grid{grid-template-columns:1fr}
.stmt-img{aspect-ratio:4/3;border-radius:var(--r-xl)}
.stmt-stats{grid-template-columns:1fr 1fr;gap:28px 18px}
.who6{grid-template-columns:1fr 1fr}
.mfg-rd{grid-template-columns:1fr}
.mfg-rd-list{grid-template-columns:1fr}
.careers-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.who6{grid-template-columns:1fr 1fr}}
/* V16.1 nav CTA arrow: plain arrow like sticky/home buttons */
.nav-cta,.nav.scrolled .nav-cta{gap:8px;padding:11px 22px}
.nav-cta .arx,.nav.scrolled .nav-cta .arx,.nav-cta:hover .arx,.nav.scrolled .nav-cta:hover .arx{width:auto;height:auto;border-radius:0;background:transparent;display:inline-flex;transform:none;transition:transform .35s var(--ease)}
.nav-cta .arx svg,.nav.scrolled .nav-cta .arx svg,.nav-cta:hover .arx svg,.nav.scrolled .nav-cta:hover .arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-cta:hover .arx,.nav.scrolled .nav-cta:hover .arx{transform:translate(3px,-3px)}
/* V16.2 nav CTA hover = same as other CTAs (no black flip) */
.nav-cta{transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.nav-cta:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff;transform:translateY(-2px)}
.nav.scrolled .nav-cta:hover{background:#B5E272;border-color:#B5E272;color:var(--ink);transform:translateY(-2px)}
/* ===== V17 Brands story page ===== */
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;transform:translateY(-2px)}
.legend{background:var(--paper);position:relative;overflow:hidden}
.lg-ill{position:absolute;filter:brightness(0);opacity:.08;pointer-events:none}
.lg-plane{width:clamp(180px,22vw,320px);right:4%;top:6%}
.lg-ice{width:clamp(160px,18vw,260px);left:2%;bottom:4%}
.lg-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,110px);align-items:start;position:relative;z-index:1}
.lg-brand{position:sticky;top:120px;text-align:center}
.lg-badge{width:clamp(180px,20vw,300px);height:auto;filter:brightness(0);display:block;margin:0 auto 26px}
.lg-word{width:clamp(220px,24vw,360px);height:auto;filter:brightness(0);display:block;margin:0 auto}
.lg-claim{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);margin-top:18px}
.lg-text h2{margin-top:18px}
.lg-text p{color:var(--muted);margin-top:16px;max-width:60ch;font-size:16px;line-height:1.75}
.lg-text p:first-of-type{color:var(--ink);font-family:var(--serif);font-size:clamp(20px,1.7vw,24px);line-height:1.5;margin-top:26px}
.lg-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:36px 0 34px;padding:28px 0 0;border-top:1px solid var(--line)}
.lg-facts li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink)}
.lg-facts .lf{width:16px;height:16px;flex:0 0 16px;margin-top:3px}
.cafes{background:#fff}
.cf-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:44px}
.cf-head h2{margin-top:18px}
.cf-head p{color:var(--muted);font-size:16px;line-height:1.7}
.cg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:14px}
.cg img,.cg-d{border-radius:var(--r-md);width:100%;height:100%;object-fit:cover}
.cg-a{grid-column:span 2;grid-row:span 2}
.cg-b{grid-column:span 2}
.cg-d{background:#0A0202;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.cg-d b{font-family:'Outfit';font-size:clamp(30px,3vw,44px);line-height:1;color:var(--lime)}
.cg-d span{font-size:13.5px;color:rgba(255,255,255,.7);margin-bottom:14px}
.cg-e{grid-column:span 2}
.cf-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.village{background:var(--paper);padding-bottom:clamp(72px,10vh,130px)}
.vl-hero{position:relative;min-height:clamp(480px,70vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.vl-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,2,2,.15) 0%,rgba(10,2,2,.2) 40%,rgba(10,2,2,.85) 100%)}
.vl-copy{position:relative;z-index:1;padding-bottom:clamp(150px,20vh,220px);color:#fff}
.vl-copy .eyebrow{color:var(--lime)}
.vl-copy h2{color:#fff;margin-top:16px;max-width:16ch}
.vl-copy p{color:rgba(255,255,255,.8);max-width:58ch;margin-top:18px;font-size:16px}
.vl-houses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(-120px,-14vh,-90px);position:relative;z-index:2}
.vh{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 30px 60px -40px rgba(10,2,2,.5)}
.vh img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vh div{padding:20px 22px 24px}
.vh b{display:block;font-family:'Outfit';font-size:19px;margin-bottom:6px;color:var(--ink)}
.vh span{font-size:14.5px;color:var(--muted);line-height:1.55}
.vl-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.vl-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
.vl-foot{margin-top:34px}
.africa .wrap.af-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
.africa p{margin-top:16px}
.af-badge{width:120px;filter:brightness(0) invert(1);opacity:.25;margin-top:28px}
.af-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.af-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.af-gal .big{grid-column:span 3;aspect-ratio:21/9;border-radius:var(--r-md)}
.awards2{background:#fff}
.aw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.aw-grid h2{margin-top:18px}
.aw-grid p{color:var(--muted);margin-top:18px;font-size:16px;line-height:1.7}
.aw-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:center;justify-items:center}
.aw-logos img{height:clamp(58px,6vw,84px);width:auto;object-fit:contain}
@media(max-width:900px){
.lg-grid{grid-template-columns:1fr}
.lg-brand{position:static}
.lg-badge{width:150px;margin-bottom:18px}.lg-word{width:220px}
.lg-facts{grid-template-columns:1fr}
.cf-head{grid-template-columns:1fr}
.cg{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,26vw,200px)}
.cg-a{grid-column:span 2;grid-row:span 1;aspect-ratio:auto}
.cg-b,.cg-e{grid-column:span 2}
.vl-houses{grid-template-columns:1fr;margin-top:-60px}
.vl-copy{padding-bottom:110px}
.vl-gal{grid-template-columns:1fr 1fr}
.africa .wrap.af-grid{grid-template-columns:1fr}
.aw-grid{grid-template-columns:1fr}
.aw-logos{grid-template-columns:repeat(4,1fr);gap:14px}
.aw-logos img{height:54px}
.lg-plane{width:140px;right:-20px;top:20px}.lg-ice{display:none}
}
/* ===== V18 Company page + Let's build icons ===== */
.co{background:#fff}
.co-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,90px);align-items:start}
.co-grid h2{margin-top:18px;font-size:clamp(28px,3.2vw,44px)}
.co-grid p{color:var(--muted);margin-top:18px;font-size:16px;line-height:1.75;max-width:62ch}
.co-grid p b{color:var(--ink)}
.co-factory{width:100%;max-width:640px;height:auto;margin-top:36px;display:block}
.co-facts{background:#0A0202;color:#fff;border-radius:var(--r-xl);padding:clamp(28px,3vw,44px);position:sticky;top:110px}
.co-facts ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.co-facts li{display:flex;gap:12px;align-items:center;font-size:16.5px;color:rgba(255,255,255,.85);padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.co-facts li:last-child{border-bottom:0;padding-bottom:0}
.co-facts li b{color:var(--lime);font-family:'Outfit';font-size:22px;margin-right:2px}
.co-facts .lf{width:16px;height:16px;flex:0 0 16px}
.sus{background:#0A0202;color:#fff}
.sus-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:clamp(40px,6vh,64px)}
.sus-head h2{display:flex;flex-direction:column;line-height:1;letter-spacing:-.03em}
.sus-head .s1{font-size:clamp(40px,6.4vw,92px);color:#fff}
.sus-head .s2{font-size:clamp(26px,3.6vw,52px);color:var(--lime);margin-top:6px}
.sus-iso{height:clamp(56px,6vw,84px);width:auto;filter:brightness(0) invert(1);opacity:.8;flex:0 0 auto}
.sus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(32px,4vh,48px)}
.sus-grid img{width:72px;height:72px;object-fit:contain;filter:brightness(1.6);margin-bottom:20px}
.sus-grid p{color:rgba(255,255,255,.68);font-size:15px;line-height:1.65;margin:0}
.sus-grid p b{color:#fff}
.a2-ic{position:absolute;top:16px;left:16px;z-index:2;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0}
.a2-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.acard2:hover .a2-ic{background:var(--lime);border-color:var(--lime);color:var(--ink)}
@media(max-width:900px){
.co-grid{grid-template-columns:1fr}
.co-facts{position:static}
.co-facts ul{grid-template-columns:1fr 1fr;gap:10px 18px}
.sus-head{flex-direction:column}
.sus-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.co-facts ul{grid-template-columns:1fr}.sus-grid{grid-template-columns:1fr;gap:28px}}
.lg-plane{right:1%;top:3%;width:clamp(150px,18vw,260px)}
/* V18.1 fixes */
.sus-grid img{filter:none}
#natural li{display:block;position:relative;padding-left:28px}
#natural li::before{position:absolute;left:0;top:12px}
#natural li strong{color:#fff}
/* V18.2 brands mobile fixes */
@media(max-width:900px){
.lg-plane{display:none}
.cg{grid-auto-rows:auto}
.cg img{aspect-ratio:4/3;height:auto}
.cg-a,.cg-b,.cg-e{aspect-ratio:16/10}
.cg-d{grid-column:span 2;height:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;padding:20px 22px}
.cg-d b{font-size:30px}
.cg-d span{margin-bottom:0;font-size:14px}
}
@media(max-width:900px){.cg-c{grid-column:span 2;aspect-ratio:16/10}}
/* ===== V19 nav without Contact, brands band as hero, typography coherence ===== */
.bb-hero .wrap{padding-top:clamp(150px,20vh,210px)!important;padding-bottom:clamp(80px,10vh,120px)!important}
.bb-hero .bb-tint{background:linear-gradient(to bottom,rgba(10,2,2,.72) 0%,rgba(10,2,2,.55) 40%,rgba(10,2,2,.85) 100%)}
.bb-stats{display:flex;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap;margin-top:44px;padding-top:34px;border-top:1px solid rgba(255,255,255,.16)}
.bb-stats .stat{text-align:left}
.bb-stats .lbl{color:rgba(255,255,255,.7);font-size:14px;margin-top:8px}
#family.brandband .bb-awards{margin-top:44px;border-top:1px solid rgba(255,255,255,.16);padding-top:36px}
/* one heading system: every section h2 = homepage size */
.legend h2,.cafes h2,.vl-copy h2,.africa h2,.awards2 h2,.co-grid h2,.careers-grid h2,.mfg-rd-head h3{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.mfg-rd-head h3{font-size:clamp(26px,2.8vw,36px)}
.legend .sec-head p,.lg-text p,.cafes .sec-head p,.vl-copy p,.africa p,.awards2 p,.co-grid p,.careers-grid p{font-size:15px;line-height:1.7}
.lg-text p:first-of-type{font-family:'Inter';font-size:17px;line-height:1.65;color:var(--ink);margin-top:22px}
.legend .sec-head{max-width:none}
.cafes .sec-head{margin-bottom:44px}
.vl-copy h2{max-width:18ch}
.vl-copy .eyebrow{color:var(--lime)}
.village{padding-bottom:clamp(96px,13vh,170px)}
.lg-facts li,.co-facts li{font-size:15px}
.cg-d span{font-size:13.5px}
@media(max-width:900px){
.bb-hero .wrap{padding-top:120px!important}
.bb-stats{gap:22px 28px;justify-content:flex-start}
}
/* ===== V19.1 manufacturing: black purpose section, natural section in green ===== */
.mfg3{background:#0A0202}
.mfg-rd-list>div{padding:22px 22px;border-radius:18px;background:rgba(255,255,255,.05);align-items:center;min-height:104px}
.mfg-rd-list img{width:44px;height:44px;flex-basis:44px}
.natural2{position:relative;overflow:hidden;color:#fff;background:#2F6B26}
.nt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.nt-grad{position:absolute;inset:0;background:linear-gradient(90deg,#1E4D1B 0%,#2F6B26 34%,rgba(47,107,38,.86) 52%,rgba(125,181,48,.35) 78%,rgba(125,181,48,.25) 100%)}
.natural2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,77,27,.55) 0%,rgba(30,77,27,0) 30%,rgba(30,77,27,0) 70%,rgba(30,77,27,.55) 100%);pointer-events:none}
.nt-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.natural2 .eyebrow{color:var(--lime)}
.natural2 h2{color:#fff;margin-top:18px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.natural2 p{color:rgba(255,255,255,.82);margin-top:18px;font-size:15px;max-width:50ch}
.nt-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.nt-list li{position:relative;padding:13px 0 13px 30px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.86);font-size:15px;line-height:1.55}
.nt-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.nt-list li::before{content:"";position:absolute;left:0;top:17px;width:16px;height:16px;border-radius:50%;background:var(--lime);-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.nt-list li b{color:#fff}
.nt-art{position:relative;min-height:420px}
.nt-cut{position:absolute;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.nt-cut1{width:62%;right:2%;top:0;animation:ntfloat 7s ease-in-out infinite}
.nt-cut2{width:48%;left:0;bottom:0;animation:ntfloat 9s ease-in-out infinite reverse}
@keyframes ntfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@media(max-width:900px){
.nt-grid{grid-template-columns:1fr}
.nt-grad{background:linear-gradient(180deg,#1E4D1B 0%,#2F6B26 45%,rgba(47,107,38,.75) 70%,rgba(125,181,48,.3) 100%)}
.nt-bg{object-position:50% 80%}
.nt-art{min-height:280px;margin-top:10px}
.nt-cut1{width:56%;right:0}.nt-cut2{width:44%;left:2%}
.mfg-rd-list>div{padding:16px;min-height:0;gap:14px}
.mfg-rd-list img{width:38px;height:38px;flex-basis:38px}
}
/* ===== V20 company: one intro (Outfit), green sustainability ===== */
.stmt-h{font-family:'Outfit';font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.stmt-h em{color:var(--lime-deep)}
.stmt-h .hl{background:linear-gradient(transparent 62%,rgba(162,212,94,.45) 62%)}
.stmt-h u{background-size:100% 4px}
.ss b{font-family:'Outfit';font-weight:700;font-size:clamp(36px,4vw,56px);letter-spacing:-.02em}
.stmt-img.stmt-render{aspect-ratio:auto;border-radius:0;overflow:visible;display:flex;align-items:center}
.stmt-img.stmt-render img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(22,40,26,.18))}
.sus{position:relative;overflow:hidden;background:#2F6B26}
.sus-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55}
.sus-grad{position:absolute;inset:0;background:linear-gradient(112deg,#1E4D1B 0%,#2F6B26 42%,rgba(47,107,38,.8) 65%,rgba(125,181,48,.55) 100%)}
.sus::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,77,27,.5) 0%,rgba(30,77,27,0) 25%,rgba(30,77,27,0) 70%,rgba(30,77,27,.55) 100%);pointer-events:none}
.sus-leaf{position:absolute;right:-6%;top:-10%;width:clamp(260px,34vw,520px);opacity:.14;pointer-events:none;filter:brightness(0) invert(1)}
.sus .wrap{position:relative;z-index:1}
.sus-head .s1{color:#fff}
.sus-head .s2{color:var(--lime)}
.sus-iso{opacity:.9}
.sus-grid{border-top:1px solid rgba(255,255,255,.22)}
.sus-grid p{color:rgba(255,255,255,.82)}
.sus-grid img{filter:none}
@media(max-width:900px){.sus-leaf{width:220px;right:-40px;top:-30px}.sus-grad{background:linear-gradient(180deg,#1E4D1B 0%,#2F6B26 50%,rgba(125,181,48,.55) 100%)}}
/* ===== V21 brands: full-height band hero, one-line stats, café gallery rhythm ===== */
.bb-hero{min-height:100vh;display:flex;align-items:center}
.bb-hero .wrap{padding-top:clamp(130px,16vh,180px)!important;padding-bottom:clamp(64px,8vh,100px)!important;width:100%}
.bb-hero h2{margin-bottom:clamp(40px,6vh,64px)!important}
.bb-hero .bb-logos{margin-bottom:clamp(40px,6vh,64px)}
.bb-hero .bb-lead{max-width:720px;margin-left:auto;margin-right:auto}
.bb-stats{justify-content:center;flex-wrap:nowrap;gap:clamp(36px,7vw,110px);margin-top:clamp(44px,7vh,72px);padding-top:clamp(32px,5vh,44px);border-top:1px solid rgba(255,255,255,.14)}
.bb-stats .stat{text-align:center}
.bb-stats .lbl{margin-top:10px;font-size:14px;color:rgba(255,255,255,.7)}
.cg-d{padding:30px 28px;gap:6px}
.cg-d span{margin-bottom:18px}
@media(max-width:900px){
.bb-hero{min-height:100svh}
.bb-hero .wrap{padding-top:120px!important;padding-bottom:56px!important}
.bb-hero .bb-logos{margin-bottom:36px}
.bb-hero h2{margin-bottom:32px!important}
.bb-stats{gap:18px;justify-content:space-between;margin-top:36px;padding-top:26px}
.bb-stats .stat{flex:1 1 0;text-align:center}
.bb-stats .stat .num{font-size:clamp(24px,7.4vw,30px)}
.bb-stats .lbl{font-size:11.5px;margin-top:6px;line-height:1.3}
/* café gallery: big, 2 small, big, 2 small (+ stat tile wide) */
.cg-b{grid-column:span 1;aspect-ratio:1}
.cg-c{grid-column:span 1;aspect-ratio:1}
.cg-d{grid-column:span 2;padding:26px 22px;gap:8px 18px}
.cg-d span{margin-bottom:0}
.cg-e{grid-column:span 2;aspect-ratio:16/10}
.cg-f,.cg-g{aspect-ratio:1}
}
/* V21.1 natural section: photo only, leaf bullets, no lines */
.nt-grid{grid-template-columns:1fr}
.nt-grid>div{max-width:600px}
.nt-grad{background:linear-gradient(90deg,#1E4D1B 0%,#2F6B26 30%,rgba(47,107,38,.82) 50%,rgba(47,107,38,.25) 78%,rgba(125,181,48,.15) 100%)}
.nt-bg{object-position:78% 50%;opacity:.95}
.nt-list{gap:12px;margin-top:30px}
.nt-list li,.nt-list li:last-child{border:0;padding:0 0 0 30px;line-height:1.6}
.nt-list li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:0;background:url('assets/brand/small-leaf-1.svg') center/contain no-repeat;-webkit-mask:none;mask:none}
@media(max-width:900px){.nt-grad{background:linear-gradient(180deg,#1E4D1B 0%,#2F6B26 55%,rgba(47,107,38,.7) 80%,rgba(125,181,48,.25) 100%)}.nt-bg{object-position:50% 85%}.natural2.sec-pad{padding-bottom:clamp(220px,40vh,320px)}}
/* V21.2 manufacturing order: logos + quality on white like "What we do" */
.partners.lt{background:#fff;border-top:0;border-bottom:0}
.partners.lt .lmq img{filter:none;opacity:1}
#quality.sec-pad{background:#fff}
.natural2.sec-pad{padding-bottom:clamp(96px,13vh,170px)}
@media(max-width:900px){.natural2.sec-pad{padding-bottom:clamp(220px,40vh,320px)}}
/* V21.3 */
.lg-claim{font-family:'Inter';font-style:normal;font-size:15px;color:var(--muted)}
.lg-facts{align-items:start}
/* V21.4 café stat tile breathing room on mobile */
@media(max-width:900px){
.cg-d{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:34px 28px;min-height:0}
.cg-d b{font-size:36px;line-height:1}
.cg-d span{font-size:14px;margin-bottom:22px;color:rgba(255,255,255,.72)}
.cg-d span:last-child{margin-bottom:0}
}
/* V21.5 footer: breathing room under the CTA row */
.footer2 .f2-top.f2-top2{padding-bottom:clamp(56px,8vh,96px);margin-bottom:clamp(40px,6vh,72px);border-bottom:1px solid rgba(255,255,255,.1)}
.footer2 .f2-cols{padding-bottom:clamp(48px,7vh,72px)}
@media(max-width:680px){.footer2 .f2-top.f2-top2{padding-bottom:44px;margin-bottom:40px}.footer2 .f2-cols{gap:28px 20px}}
/* V21.6 natural: lighter green, leaf aligned, before quality */
.natural2{background:#3C7A31}
.nt-bg{opacity:1}
.nt-grad{background:linear-gradient(90deg,rgba(30,77,27,.86) 0%,rgba(47,107,38,.74) 32%,rgba(47,107,38,.5) 52%,rgba(125,181,48,.18) 78%,rgba(125,181,48,.1) 100%)}
.natural2::after{background:linear-gradient(180deg,rgba(30,77,27,.35) 0%,rgba(30,77,27,0) 28%,rgba(30,77,27,0) 72%,rgba(30,77,27,.35) 100%)}
.nt-list li{display:flex;align-items:flex-start;gap:12px;padding-left:0}
.nt-list li::before{position:static;flex:0 0 16px;width:16px;height:16px;margin-top:.3em;transform:none}
.natural2.sec-pad{padding-bottom:clamp(96px,13vh,170px)}
@media(max-width:900px){.nt-grad{background:linear-gradient(180deg,rgba(30,77,27,.86) 0%,rgba(47,107,38,.72) 50%,rgba(47,107,38,.45) 75%,rgba(125,181,48,.15) 100%)}}
/* V21.7 natural mobile legibility */
@media(max-width:900px){
.nt-grad{background:linear-gradient(180deg,rgba(30,77,27,.9) 0%,rgba(30,77,27,.86) 58%,rgba(47,107,38,.45) 78%,rgba(125,181,48,.12) 100%)}
.nt-list li{text-shadow:0 1px 2px rgba(0,0,0,.25)}
}
/* ===== V22 company: sustainability with video + green wash; white lower sections ===== */
.sus{background:#173D16}
.sus-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sus-vid{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:saturate(.55) brightness(.85) blur(1.5px)}
.sus-wash{position:absolute;inset:0;background:#3E7A2A;mix-blend-mode:color;opacity:.7}
.sus-grad{background:linear-gradient(to bottom,rgba(23,61,22,.55) 0%,rgba(23,61,22,.38) 35%,rgba(23,61,22,.82) 80%,#173D16 100%)}
.sus::after{background:none}
.sus-leaf{opacity:.1}
.co-page .min-sec,.co-page .globe-sec{background:#fff}
.co-page .founder{background:#fff}
.co-page .careers2{background:#fff}
.co-page .gchips button{background:var(--paper);border-color:var(--line-soft)}
.co-page .gchips button:hover,.co-page .gchips button.on{background:var(--green);border-color:var(--green);color:#fff}
.co-page .gb-chip{background:var(--paper)}
.co-page .founder .fimg img{border-radius:var(--r-lg)}
.co-page .careers2{border-top:1px solid var(--line-soft)}
/* V22.1 logo marquee: never pauses, seamless loop */
.lmq:hover .lmq-track,.partners .lmq:hover .lmq-track{animation-play-state:running}
.partners.lt .lmq-set{gap:clamp(22px,3vw,40px);padding-right:clamp(22px,3vw,40px)}
.partners.lt .lmq-set img{height:54px;width:auto;padding:0 4px;object-fit:contain;filter:none;opacity:1;background:none}
.partners.lt .lmq-track{animation-duration:40s}
/* ===== V23 natural ingredients: green photo + black overlay, clean list ===== */
.natural3{position:relative;overflow:hidden;color:#fff;background:#0A0202}
.n3-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.n3-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,2,2,.92) 0%,rgba(10,2,2,.86) 34%,rgba(10,2,2,.55) 56%,rgba(10,2,2,.18) 80%,rgba(10,2,2,.1) 100%)}
.natural3 .wrap{position:relative;z-index:1}
.n3-text{max-width:560px}
.natural3 .eyebrow{color:var(--lime)}
.natural3 h2{color:#fff;margin-top:18px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.natural3 p{color:rgba(255,255,255,.78);margin-top:18px;font-size:15px;max-width:48ch}
.n3-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.n3-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
.n3-list .lf{width:16px;height:16px;flex:0 0 16px;margin-top:4px}
.n3-list b{color:#fff}
@media(max-width:900px){
.n3-tint{background:linear-gradient(180deg,rgba(10,2,2,.92) 0%,rgba(10,2,2,.88) 60%,rgba(10,2,2,.55) 82%,rgba(10,2,2,.25) 100%)}
.n3-bg{object-position:50% 90%}
.natural3.sec-pad{padding-bottom:clamp(200px,36vh,300px)}
}
/* V23.1 override old #natural list rules */
#natural .n3-list li{display:flex;align-items:flex-start;gap:12px;padding-left:0;position:static}
#natural .n3-list li::before{content:none}
#natural .n3-list li b{color:#fff}
#natural .n3-list .lf{width:16px;height:16px;flex:0 0 16px;margin-top:4px;display:block}
/* ===== V24 footer grid alignment ===== */
.footer2 .f2-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;padding-bottom:clamp(48px,7vh,72px)}
.footer2 .f2-col h4{white-space:nowrap}
.footer2 .f2-certs{display:grid;grid-template-columns:repeat(7,auto);justify-content:space-between;align-items:center;gap:20px;padding:36px 0;border-top:1px solid rgba(255,255,255,.1)}
.footer2 .f2-certs img{width:auto;height:44px;max-width:120px;object-fit:contain;justify-self:center}
.footer2 .f2-legal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;border-top:1px solid rgba(255,255,255,.1);padding:40px 0}
.footer2 .f2-legal>div:first-child{grid-column:1/3}
.footer2 .f2-legal>div:last-child{grid-column:3/6}
@media(max-width:1080px){.footer2 .f2-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}.footer2 .f2-col a{font-size:14px}.footer2 .f2-col h4{white-space:normal}}
@media(max-width:900px){
.footer2 .f2-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
.footer2 .f2-certs{grid-template-columns:repeat(4,1fr);justify-items:center;gap:18px 12px}
.footer2 .f2-certs img{height:40px;max-width:100%}
.footer2 .f2-legal{grid-template-columns:1fr;gap:24px}
.footer2 .f2-legal>div:first-child,.footer2 .f2-legal>div:last-child{grid-column:auto}
}
/* V24.1 hide Let's build icon badges */
.a2-ic{display:none}
/* V24.2 manufacturing logo strip: homepage logo size */
.partners.lt .lmq-set img{height:32px;max-width:120px;padding:0}
.partners.lt .lmq-set{gap:clamp(34px,4.5vw,64px);padding-right:clamp(34px,4.5vw,64px)}
.partners.lt{padding:clamp(36px,5vh,56px) 0}
/* V24.3 exact homepage logo height */
.partners.lt .lmq-set img{height:42px;max-width:140px}
/* V25 company order + founder mirrored + careers no divider */
.co-page .founder .wrap{direction:rtl}
.co-page .founder .wrap>*{direction:ltr}
.co-page .careers2{border-top:0}
/* V25.1 footer: no horizontal lines */
.footer2 .f2-top.f2-top2,.footer2 .f2-certs,.footer2 .f2-legal,.footer2 .f2-bottom{border-top:0;border-bottom:0}
/* V25.2 footer certs: centred row with breathing room */
.footer2 .f2-certs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(22px,3vw,44px);padding:clamp(40px,6vh,64px) 0}
.footer2 .f2-certs img{height:42px;width:auto;max-width:120px}
@media(max-width:900px){.footer2 .f2-certs{gap:22px 26px;padding:36px 0}.footer2 .f2-certs img{height:38px}}
/* V25.3 sustainability taller, more room before CEO, careers image last on mobile */
.co-page .sus.sec-pad{padding-top:clamp(110px,15vh,190px);padding-bottom:clamp(110px,15vh,190px);min-height:80vh;display:flex;align-items:center}
.co-page .sus .wrap{width:100%}
.co-page .founder.sec-pad{padding-top:clamp(96px,13vh,170px)}
@media(max-width:900px){.co-page .sus.sec-pad{min-height:0;padding-top:96px;padding-bottom:96px}.co-page .founder.sec-pad{padding-top:88px}.co-page .careers-grid .cimg{order:2}.co-page .careers-grid>div:not(.cimg){order:1}}
/* V25.4 footer mobile: contact column centred, full width */
@media(max-width:900px){.footer2 .f2-cols .f2-col:last-child{grid-column:1/-1;text-align:center;margin-top:8px;padding-top:28px}.footer2 .f2-cols .f2-col:last-child a{font-size:16px}.footer2 .f2-cols .f2-col:last-child li:first-child a{color:var(--lime);font-weight:700}}
/* V26 QA: topbar hover like CTAs, brands crumb */
.tb-btn{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.tb-btn:hover{transform:translateY(-2px)}
.bb-crumb{position:absolute;left:0;right:0;top:calc(var(--nav-h,84px) + 34px);z-index:3;padding-top:0!important;padding-bottom:0!important}
.bb-crumb .crumb{display:inline-flex}
@media(max-width:900px){.bb-crumb{top:96px}}
/* ===== V26.1 QA: one green family (logo hue), crumb in band, footer contact as before ===== */
:root{--lime:#A2D45E;--lime-deep:#7DB530;--green:#5C8F24;--green-dark:#2F4B14;--green-mid:#4F7A1E}
.bb-crumb2{display:inline-flex;margin-bottom:22px}
.bb-crumb{display:none}
.sus{background:var(--green-dark)}
.sus-wash{background:var(--lime-deep)}
.sus-grad{background:linear-gradient(to bottom,rgba(47,75,20,.55) 0%,rgba(47,75,20,.38) 35%,rgba(47,75,20,.82) 80%,var(--green-dark) 100%)}
.stmt-h em,.ss b{color:var(--lime-deep)}
.co-page .gchips button:hover,.co-page .gchips button.on,.gchips button:hover,.gchips button.on{background:var(--lime-deep);border-color:var(--lime-deep);color:#fff}
.footer2 .f2-cols .f2-col:last-child{grid-column:auto;text-align:left;margin-top:0;padding-top:0}
.footer2 .f2-cols .f2-col:last-child a{font-size:15px}
.footer2 .f2-cols .f2-col:last-child li:first-child a{color:rgba(255,255,255,.85);font-weight:400}
@media(max-width:900px){.footer2 .f2-cols .f2-col:last-child{grid-column:auto;text-align:left;margin-top:0;padding-top:0}.footer2 .f2-cols .f2-col:last-child a{font-size:14px}}
/* V26.2 brands crumb on its own line, centred */
.bb-crumb2{display:inline-flex;margin:0 auto 24px;}
.bb-hero .reveal>.bb-crumb2{display:table;margin-left:auto;margin-right:auto}
/* V26.3 brands crumb spacing without eyebrow */
.bb-hero .reveal>.bb-crumb2{margin-bottom:30px}
/* V27 subpage heroes unified: same height, same h1 size, same sub */
.hero.short{min-height:72vh}
.hero.short h1{font-size:clamp(36px,5.4vw,72px)!important;max-width:15ch}
.hero.short .sub{font-size:clamp(15px,1.4vw,16.5px);max-width:52ch;margin-top:22px}
.hero.short .wrap{padding-bottom:clamp(56px,9vh,110px)}
/* V27.1 brands crumb keeps its gap */
.bb-hero .reveal>.bb-crumb2{display:inline-flex;align-items:center;gap:10px;margin:0 0 30px}
.bb-hero .reveal>.bb-crumb2 .sep{margin:0 2px}
/* ===== V28 manufacturing: retailer logos inside "What we do" ===== */
.trusted{margin-top:clamp(64px,9vh,110px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line-soft)}
.trusted-head{max-width:720px;margin:0 auto;text-align:center}
.trusted-head h3{font-family:'Outfit';font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:16px 0 14px}
.trusted-head p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.trusted-logos.partners{padding:clamp(28px,4vh,44px) 0 0;background:transparent;border:0}
.trusted-logos .lmq{padding:10px 0}
.trusted-logos .lmq-set img{height:40px;max-width:130px}
@media(max-width:900px){.trusted{margin-top:56px;padding-top:36px}.trusted-logos .lmq-set img{height:34px;max-width:110px}}
/* V28.1 no hairlines above trusted block and catalogue CTA */
.trusted{border-top:0}
.pc-cat{border-top:0}
/* V28.2 logo marquee edge to edge, same speed everywhere */
.lmq{-webkit-mask-image:none;mask-image:none}
.lmq-track{animation-duration:40s}
.partners.dk .lmq-track,.partners.lt .lmq-track{animation-duration:40s}
/* V29 homepage hero copy: statement + supporting line */
.hero .sub{font-size:clamp(17px,1.7vw,21px);font-weight:500;color:#fff;max-width:30ch;line-height:1.4;margin-top:22px}
.hero .sub2{font-size:clamp(14px,1.15vw,15.5px);color:rgba(255,255,255,.72);max-width:58ch;line-height:1.65;margin-top:14px}
.hero .hero-cta{margin-top:30px}
@media(max-width:680px){.hero .sub{font-size:18px;max-width:none}.hero .sub2{font-size:14px}}
/* V29.1 hero headline: three lines */
.hero h1{max-width:16ch}
/* V29.2 hero proof: all three stats on tablet and mobile */
@media(max-width:900px){.hero-proof{display:inline-flex;flex-wrap:wrap;white-space:normal;justify-content:center;gap:8px 10px;font-size:11.5px;padding:8px 14px 8px 12px}.hero-proof span,.hero-proof i{display:inline-flex!important}.hero-proof i{height:11px}}
/* V29.3 hero proof one line on phones */
@media(max-width:680px){.hero-proof{font-size:10.5px;gap:6px 8px;padding:7px 12px 7px 10px;flex-wrap:nowrap;white-space:nowrap;max-width:100%}.hero-proof .hp-ico,.hero-proof .hp-ico svg{width:16px;height:16px}.hero-proof i{height:10px}}
@media(max-width:360px){.hero-proof{flex-wrap:wrap;white-space:normal}}
/* V29.4 phones: awards + products only */
@media(max-width:680px){.hero-proof span:nth-of-type(2),.hero-proof i:nth-of-type(2){display:none!important}.hero-proof{font-size:11.5px;gap:8px 10px;padding:8px 14px 8px 12px}}
/* V29.5 fix: icon is span 1, awards span 2, markets span 3, products span 4 */
@media(max-width:680px){.hero-proof span:nth-of-type(2){display:inline-flex!important}.hero-proof span:nth-of-type(3){display:none!important}.hero-proof i:nth-of-type(1){display:none!important}.hero-proof i:nth-of-type(2){display:inline-flex!important}}
/* V30 brands: awards above Africa, on cream like the village section */
.awards2{background:var(--paper)}
.village{padding-bottom:clamp(64px,9vh,110px)}
.awards2.sec-pad{padding-top:clamp(40px,6vh,72px)}
/* V30.1 sub-section headings at section size */
.trusted-head h3,.mfg-rd-head h3{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.trusted-head{max-width:820px}
.vh b{font-size:17px}
/* V30.2 last heading outliers: who/cap6 h2 and process card titles */
.intro.who h2,.cap6 h2,.who.sec-pad h2{font-size:clamp(30px,3.6vw,48px)!important;line-height:1.06;letter-spacing:-.02em}
.jcard h3{font-size:17px}
/* V30.3 revert: awards after Africa on white */
.awards2{background:#fff}
.awards2.sec-pad{padding-top:clamp(96px,13vh,170px)}
.village{padding-bottom:clamp(96px,13vh,170px)}
/* V32 social icons: LinkedIn, mail, phone */
.ct-soc svg{width:18px;height:18px}
.ct-soc .ic-li{fill:currentColor;stroke:none}
.f2-social a svg{width:18px;height:18px}
/* V33 footer: public tenders list */
.f2-tenders{margin-top:14px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.5)}
.f2-tenders b{color:rgba(255,255,255,.78);font-weight:600;margin-right:4px}
.f2-tenders a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.f2-tenders a:hover{color:var(--lime)}
/* V33.1 tenders as a dropdown */
.f2-tenders{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.5)}
.f2-tenders summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);font-weight:600;text-decoration:underline;text-underline-offset:3px;user-select:none}
.f2-tenders summary::-webkit-details-marker{display:none}
.f2-tenders summary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.f2-tenders[open] summary svg{transform:rotate(180deg)}
.f2-tenders summary:hover{color:var(--lime)}
.f2-tenders ul{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.14);display:grid;gap:8px}
.f2-tenders li a{color:rgba(255,255,255,.72);text-decoration:none;white-space:normal}
.f2-tenders li a:hover{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
/* V34 careers photo: 3:2 award photo */
.careers-grid .cimg{aspect-ratio:3/2}
.careers-grid .cimg img{object-position:50% 30%}
/* V35 footer credit */
.f2-by{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.45)}
.f2-by a{color:rgba(255,255,255,.75);text-decoration:none;font-weight:600}
.f2-by a:hover{color:var(--lime)}
@media(max-width:680px){.f2-by{display:block;margin:8px 0 0;padding:0;border:0}}
/* V36 client round 2: monochrome certificates, brands spacing, CEO photo */
.f2-certs img,.hc-row img,.sl-certs img,.bb-awards img,.certgrid img,.aw-logos img,.sus-iso{filter:grayscale(1) brightness(1.55) contrast(.9);opacity:.85}
.certgrid img,.aw-logos img{filter:grayscale(1) contrast(.85) brightness(1.05);opacity:.62}
.certgrid img:hover,.aw-logos img:hover,.f2-certs img:hover,.hc-row img:hover,.sl-certs img:hover,.bb-awards img:hover{opacity:1}
.brandband h2{margin-bottom:clamp(52px,7vh,72px)!important}
.brandband .bb-lead{margin-top:6px}
@media(max-width:680px){.brandband h2{margin-bottom:40px!important}.brandband .bb-logos{margin-bottom:36px}}
.co-page .founder .fimg{aspect-ratio:4/3.1;max-width:none}
.co-page .founder .fimg img{transform:none;object-position:center}
@media(min-width:901px){.co-page .founder .wrap{grid-template-columns:.9fr 1.15fr;align-items:center}}
/* V36.1 retailer logos as text, flip to logo on hover (desktop) / tap (touch) */
.partners .lmq-set .lg.flip{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;position:relative;display:inline-grid;place-items:center;height:44px;perspective:900px;-webkit-tap-highlight-color:transparent}
.partners .lmq-set .lg.flip>*{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .3s}
.partners .lmq-set .lg.flip .lg-txt{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;line-height:1;transform:rotateX(0)}
.partners .lmq-set .lg.flip img{height:38px;width:auto;max-width:150px;object-fit:contain;transform:rotateX(-180deg);padding:0;margin:0;background:none;border:0;box-shadow:none}
.partners .lmq-set .lg.flip.on .lg-txt,.partners .lmq-set .lg.flip:focus-visible .lg-txt{transform:rotateX(180deg)}
.partners .lmq-set .lg.flip.on img,.partners .lmq-set .lg.flip:focus-visible img{transform:rotateX(0)}
@media(hover:hover){.partners .lmq-set .lg.flip:hover .lg-txt{transform:rotateX(180deg)}.partners .lmq-set .lg.flip:hover img{transform:rotateX(0)}}
.partners .lmq-set .lg.flip:hover img{transform:none}
@media(hover:hover){.partners .lmq-set .lg.flip:hover img{transform:rotateX(0)}}
.partners .lmq-set .lg:hover img{transform:none}
.partners.lt .lmq-set .lg.flip .lg-txt{color:var(--ink)}
.partners .lmq-set .lg.flip:focus{outline:none}
.partners.dk .lmq-set,.partners.lt .lmq-set{gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px)}
@media(max-width:680px){.partners .lmq-set .lg.flip .lg-txt{font-size:16px}.partners .lmq-set .lg.flip img{height:30px;max-width:110px}.partners.dk .lmq-set,.partners.lt .lmq-set{gap:32px;padding-right:32px}}
/* V36.2 unified line icons (sprite assets/icons/ni.svg) */
.ni{display:block;width:44px;height:44px;fill:none;color:#6E6E6E}
.sl-list .wic{flex:0 0 52px;width:52px;height:52px;background:none;color:#E1E1E1}
.sl-list .wic .ni{width:40px;height:40px}
.ct-ic{background:none;color:#6E6E6E}
.ct-ic .ni{width:36px;height:36px}
.fu-tile .ct-ic{border:0;background:none;color:#6E6E6E}
.fu-tile:hover .ct-ic{background:none;border:0;color:var(--ink)}
.fu-tile .ct-ic .ni{width:34px;height:34px}
.jpin{top:-22px;color:#6E6E6E;background:#fff;border-radius:50%;padding:6px;box-shadow:0 6px 16px -8px rgba(22,40,26,.35)}
.jpin .ni{width:32px;height:32px;filter:none}
/* V36.3 award tweaks */
.aw-logos img[alt="Superbrands"],.certgrid img[alt*="Superbrands"]{filter:grayscale(1) brightness(.8) contrast(1.1)}
.bb-awards img[alt="Sweetie award"],.aw-logos img[alt="Sweetie award"]{height:60px;width:auto}
/* V36.4 flip logos: text defines the cell width, logo sits centred on top */
.partners .lmq-set .lg.flip{display:inline-flex;align-items:center;justify-content:center;min-width:84px;height:44px}
.partners .lmq-set .lg.flip img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(-180deg);max-width:130px}
.partners .lmq-set .lg.flip.on img,.partners .lmq-set .lg.flip:focus-visible img{transform:translate(-50%,-50%) rotateX(0)}
@media(hover:hover){.partners .lmq-set .lg.flip:hover img{transform:translate(-50%,-50%) rotateX(0)}}
@media(max-width:680px){.partners .lmq-set .lg.flip{min-width:72px;height:40px}.partners .lmq-set .lg.flip img{max-width:104px;height:30px}}
/* V37 round 2 follow-ups */
/* CEO photo everywhere: landscape factory portrait */
.founder .fimg{aspect-ratio:4/3.1;max-width:none}
.founder .fimg img{transform:none;object-position:center}
@media(min-width:901px){.founder .wrap{grid-template-columns:.9fr 1.15fr;align-items:center}}
/* retailer names: black caps, eyebrow-like, larger */
.partners .lmq-set .lg.flip .lg-txt{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(13px,1.05vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.92}
.partners.dk .lmq-set,.partners.lt .lmq-set{gap:clamp(40px,5.6vw,80px);padding-right:clamp(40px,5.6vw,80px)}
.partners.dk{padding-top:clamp(56px,8vh,88px);padding-bottom:clamp(56px,8vh,88px)}
.who.sec-pad{padding-top:clamp(72px,10vh,120px)}
@media(max-width:680px){.partners .lmq-set .lg.flip .lg-txt{font-size:12.5px;letter-spacing:.18em}.partners.dk .lmq-set,.partners.lt .lmq-set{gap:34px;padding-right:34px}.partners.dk{padding-top:44px;padding-bottom:44px}.who.sec-pad{padding-top:56px}}
/* science icons in the section's blue */
.sl-list .wic{color:#5FA8E8}
.sl-list .wic .ni{--lime:#8FD0FF}
/* V37.1 smoother, slower logo flip */
.partners .lmq-set .lg.flip>*{transition:transform .95s cubic-bezier(.22,.8,.2,1),opacity .5s ease}
.partners .lmq-set .lg.flip .lg-txt{transform:rotateX(0);opacity:.92}
.partners .lmq-set .lg.flip img{opacity:0}
.partners .lmq-set .lg.flip.on img,.partners .lmq-set .lg.flip:focus-visible img{opacity:1}
.partners .lmq-set .lg.flip.on .lg-txt,.partners .lmq-set .lg.flip:focus-visible .lg-txt{opacity:0}
@media(hover:hover){.partners .lmq-set .lg.flip:hover img{opacity:1}.partners .lmq-set .lg.flip:hover .lg-txt{opacity:0}}
/* V37.2 touch reliability for logo flip */
.partners .lmq-set .lg.flip{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.partners .lmq-set .lg.flip img{pointer-events:none}
.partners .lmq-set .lg.flip .lg-txt{pointer-events:none}
/* V38 MyFrida section on Brands page */
.myfrida{background:#0A0202;color:#fff}
.myfrida.sec-pad{padding-top:clamp(96px,13vh,170px);padding-bottom:clamp(96px,13vh,170px)}
.mf-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,80px);align-items:end}
.mf-head .eyebrow{color:var(--lime)}
.mf-head h2{color:#fff;margin-top:16px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.mf-head p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin-top:18px;max-width:60ch}
.mf-logo{width:clamp(170px,18vw,260px);height:auto;justify-self:end;margin-bottom:8px}
.mf-hero{margin-top:clamp(40px,6vh,64px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.3;background:#171313}
.mf-hero img{width:100%;height:100%;object-fit:cover;display:block}
.mf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.mf-card{background:#151111;border-radius:var(--r-lg);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:12px}
.mf-card b{font-family:'Outfit';font-weight:700;font-size:19px;line-height:1.25;color:#fff}
.mf-card p{color:rgba(255,255,255,.68);font-size:14.5px;line-height:1.65}
.mf-card>img{margin-top:auto;width:100%;border-radius:var(--r-md);display:block}
.mf-arch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding-top:12px}
.mf-arch div{padding:16px 14px;border-radius:14px;background:rgba(255,255,255,.05)}
.mf-arch small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.mf-arch span{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.5}
.mf-sw{display:grid;gap:12px;margin-top:auto;padding-top:12px}
.mf-sw div{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(255,255,255,.85)}
.mf-sw i{width:26px;height:26px;border-radius:50%;flex:0 0 26px}
.mf-evo{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(56px,8vh,96px)}
.mf-evo img{width:100%;border-radius:var(--r-lg);background:#151111;display:block}
.mf-evo .eyebrow{color:var(--lime)}
.mf-evo h3{font-family:'Outfit';font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin-top:14px}
.mf-evo p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin-top:14px;max-width:56ch}
.mf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mf-tags span{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff}
.mf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:900px){.mf-head{grid-template-columns:1fr}.mf-logo{justify-self:start;order:-1;margin-bottom:8px;width:180px}.mf-grid{grid-template-columns:1fr}.mf-evo{grid-template-columns:1fr;gap:28px}}
@media(max-width:680px){.myfrida.sec-pad{padding-top:72px;padding-bottom:72px}.mf-hero{aspect-ratio:1/1}.mf-arch{grid-template-columns:1fr}.mf-card{padding:22px}.mf-logo{width:150px}}
/* wellbeing pills with sprite icons */
.indul .pill .ni{width:22px;height:22px;flex:0 0 22px;color:#6E6E6E}
@media(max-width:680px){.indul .pill .ni{width:20px;height:20px;flex-basis:20px}}
.indul .pill .ni{color:#D6D6D6}
.mf-arch{grid-template-columns:1fr}
/* V38.1 touch devices: ignore sticky :hover on flip logos, only .on toggles */
@media(hover:none){
.partners .lmq-set .lg.flip:hover img,.partners .lmq-set .lg.flip img{transform:translate(-50%,-50%) rotateX(-180deg);opacity:0}
.partners .lmq-set .lg.flip:hover .lg-txt,.partners .lmq-set .lg.flip .lg-txt{transform:rotateX(0);opacity:.92}
.partners .lmq-set .lg.flip.on img,.partners .lmq-set .lg.flip.on:hover img{transform:translate(-50%,-50%) rotateX(0);opacity:1}
.partners .lmq-set .lg.flip.on .lg-txt,.partners .lmq-set .lg.flip.on:hover .lg-txt{transform:rotateX(180deg);opacity:0}
}
/* V38.2 MyFrida: packaging cut out, no frames */
.mf-hero{background:none;border-radius:0;aspect-ratio:auto;overflow:visible;margin-top:clamp(48px,7vh,80px)}
.mf-hero img{height:auto;object-fit:contain}
.mf-grid{margin-top:clamp(56px,8vh,96px);gap:clamp(28px,4vw,56px)}
.mf-card{background:none;border-radius:0;padding:0}
.mf-card>img{border-radius:0;margin-top:24px}
.mf-arch{gap:18px;padding-top:16px}
.mf-arch div{padding:0;border-radius:0;background:none}
.mf-arch small{margin-bottom:6px}
.mf-sw{padding-top:16px}
.mf-evo img{background:none;border-radius:0}
.mf-evo{margin-top:clamp(64px,9vh,110px)}
@media(max-width:900px){.mf-grid{gap:40px}.mf-card>img{max-width:420px}}
@media(max-width:680px){.mf-hero{aspect-ratio:auto}.mf-hero img{max-width:320px;margin:0 auto}}
/* V39 typography coherence for new MyFrida section */
.mf-evo h3{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.mf-card b{font-size:17px}
.mf-head p,.mf-card p,.mf-evo p{font-size:15px;line-height:1.7}
.mf-arch span,.mf-sw div{font-size:14.5px}
/* V39.1 manufacturing: vector icons for two cards, monochrome logo roll */
.who-card .who-ico.ni{height:64px;width:64px;color:var(--lime)}
.who-card .who-ico.ni{--lime:#A2D45E}
@media(max-width:520px){.who-card .who-ico.ni{height:44px;width:44px}}
.trusted-logos .lmq-set .lg img,.trusted-logos .lmq-set img{filter:grayscale(1) contrast(.9);opacity:.6;transition:opacity .3s,filter .3s}
.trusted-logos .lmq-set .lg:hover img{filter:none;opacity:1;transform:none}
/* V39.2 Manufactured with Purpose certs: one light monochrome */
.mcerts img{filter:grayscale(1) brightness(1.55) contrast(.9);opacity:.85}
.mcerts img[alt^="IFS"]{filter:brightness(0) invert(1);opacity:.85}
/* V39.3 manufacturing logo roll back to full colour */
.trusted-logos .lmq-set .lg img,.trusted-logos .lmq-set img{filter:none;opacity:1}
/* V40 step 1: platform message on homepage */
.who .sec-head .who-sub{margin-top:14px;color:var(--muted)}
.who-plat{display:block;text-align:center;margin:0 auto clamp(22px,3vh,32px);color:var(--lime-deep)}
/* V40.1 build cards: keep the packaging cluster and office in frame */
.acard2 img[src*="build-brands-bars"]{object-position:50% 40%}
.acard2 img[src*="build-team-office"]{object-position:35% 50%}
.acard2 img[src*="build-franchise-cafe"]{object-position:50% 40%}
/* V40.2 step 2: roll, certs, brand band, pills, CTA */
.partners .lmq-set .lg.flip img.coop{height:46px;max-width:170px}
.trusted-logos .lmq-set img.coop{height:50px;max-width:170px}
@media(max-width:680px){.partners .lmq-set .lg.flip img.coop{height:36px;max-width:130px}.trusted-logos .lmq-set img.coop{height:40px}}
/* uniform monochrome certificate silhouettes */
.f2-certs img,.hc-row img,.sl-certs img,.mcerts img,.certgrid img,.sus-iso{filter:invert(1);opacity:.82}
.certgrid img{filter:none;opacity:.7}
.f2-certs img:hover,.hc-row img:hover,.sl-certs img:hover,.mcerts img:hover,.certgrid img:hover{opacity:1}
.mcerts img[alt^="IFS"]{filter:invert(1)}
.certgrid img{height:64px}
/* awards: grey by default, colour on hover */
.bb-awards img,.aw-logos img{filter:grayscale(1) brightness(1.25) contrast(.95);opacity:.8;transition:filter .4s,opacity .4s}
.aw-logos img{filter:grayscale(1) contrast(.9);opacity:.65}
.bb-awards img:hover,.aw-logos img:hover{filter:none;opacity:1}
/* brand band definitions */
.bb-sub{font-size:16px;color:rgba(255,255,255,.72);margin:0 auto clamp(40px,6vh,56px);max-width:52ch}
.bb-item{display:flex;flex-direction:column;align-items:center;gap:16px}
.bb-def{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7);max-width:26ch;text-align:center}
.bb-def b{color:var(--lime);display:block;margin-bottom:2px}
@media(max-width:680px){.bb-sub{font-size:15px;margin-bottom:32px}.bb-def{max-width:30ch}}
/* pills as buttons + note */
.indul .pill{cursor:pointer;font-family:inherit;color:inherit;transition:background .3s,border-color .3s,color .3s}
.indul .pill.on{background:var(--lime);border-color:var(--lime);color:#0A0202}
.indul .pill.on .ni{color:#0A0202;--lime:#0A0202}
.pill-note{margin-top:16px;max-width:520px}
.pill-note p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);padding:4px 0 0;background:none;border-radius:0}
/* one CTA on desktop: floating button only on touch/small screens */
@media(min-width:901px){.sticky-contact{display:none!important}}
/* V40.3 brand band subtitle spacing */
.brandband h2{margin-bottom:14px!important}
.bb-sub{margin-bottom:clamp(40px,6vh,56px)!important}
@media(max-width:680px){.brandband h2{margin-bottom:12px!important}.bb-sub{margin-bottom:36px!important}}
/* V40.4 brand band heading */
.brandband h2,.bb-h1{margin-bottom:clamp(44px,6vh,64px)!important;color:#fff;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em;font-weight:700}
.bb-hero .bb-h1{font-size:clamp(34px,4.4vw,60px)}
@media(max-width:680px){.brandband h2,.bb-h1{margin-bottom:36px!important}.brandband h2 br,.bb-h1 br{display:none}}
/* V40.5 brands hero: safe centering, never pushes content under the nav */
.bb-hero{align-items:flex-start}
.bb-hero .wrap{margin-top:auto;margin-bottom:auto}
/* V40.6 brand band: heading + subheading, MyFrida line white bold, tidy at all sizes */
.brandband h2,.bb-h1{margin-bottom:12px!important}
.bb-sub{font-size:clamp(15px,1.25vw,17px);color:rgba(255,255,255,.78);margin:0 auto clamp(40px,6vh,60px)!important;max-width:60ch;line-height:1.5}
.bb-logos{align-items:flex-start}
.bb-item{flex:1 1 0;min-width:0;padding:0 12px}
.bb-def{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);max-width:28ch;min-height:2.6em}
.bb-lead-brand .bb-def{color:#fff;font-weight:700}
@media(max-width:900px){.bb-item{padding:0 8px}.bb-def{font-size:13.5px}}
@media(max-width:680px){.brandband h2,.bb-h1{margin-bottom:10px!important}.bb-sub{margin-bottom:32px!important;font-size:15px}.bb-item{padding:0}.bb-def{max-width:32ch;min-height:0}}
/* V40.7 brand band: MyFrida line regular, equal logo heights on phones; truck card focal point */
.bb-lead-brand .bb-def{font-weight:400;color:rgba(255,255,255,.72)}
@media(max-width:680px){.bb-logos .bb-item img{height:38px;width:auto}.bb-logos .mf{height:38px}}
.acard2 img[src*="build-distribution-truck"]{object-position:50% 20%}
/* V40.8 truck card: show the Tante Frida side of the truck */
.acard2 img[src*="build-distribution-truck"]{object-position:50% 62%}
@media(max-width:1080px){.acard2 img[src*="build-distribution-truck"]{object-position:50% 30%}}
/* V40.9 truck card: truck in the upper half at every size */
.acard2 img[src*="build-distribution-truck"]{object-position:50% 45%}
@media(max-width:1080px){.acard2 img[src*="build-distribution-truck"]{object-position:50% 0%}}
/* V40.10 brands card: tropical flatlay */
.acard2 img[src*="build-brands-tropical"]{object-position:50% 50%}
/* V40.11 brand band without subheading */
.brandband h2,.bb-h1{margin-bottom:clamp(44px,6vh,64px)!important}
@media(max-width:680px){.brandband h2,.bb-h1{margin-bottom:36px!important}}
/* V41 step 3: product development page */
.pc-v{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px;max-width:30ch}
.pc .pc-more{margin-top:12px}
@media(max-width:680px){.pc-v{font-size:12px;max-width:none}}
/* catalogue gate */
.cat-form{margin-top:22px;padding:26px 28px;border-radius:var(--r-lg);background:#fff;box-shadow:0 12px 34px -24px rgba(22,40,26,.25)}
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.cf-grid label{margin-top:0}
.cf-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);margin:18px 0 0;line-height:1.5}
.cf-consent input{width:16px;height:16px;margin-top:2px;flex:0 0 16px;accent-color:var(--lime-deep)}
.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.cf-msg{font-size:13.5px;color:#B23A3A}
.cf-done{font-size:15px;color:var(--ink);line-height:1.6}
.cf-done a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.cf-grid{grid-template-columns:1fr}.cf-grid label{margin-top:12px}.cf-grid>div:first-child label{margin-top:0}}
/* private label process timeline */
.plp{background:#fff}
.plp .sec-head{margin-bottom:clamp(44px,6vh,64px)}
.plp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:18px;position:relative;counter-reset:none}
.plp-steps::before{content:"";position:absolute;left:4%;right:4%;top:32px;height:1px;background:var(--line);z-index:0}
.plp-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.plp-steps .ni{width:64px;height:64px;padding:12px;background:#fff;border-radius:50%;box-shadow:0 6px 18px -10px rgba(22,40,26,.35);color:#6E6E6E}
.plp-n{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--lime-deep);order:-1}
.plp-steps b{font-family:'Outfit';font-weight:700;font-size:16px;line-height:1.25;color:var(--ink);margin-top:4px}
.plp-steps p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0;max-width:22ch}
@media(max-width:1080px){.plp-steps{grid-template-columns:repeat(4,1fr);gap:28px 18px}.plp-steps::before{display:none}}
@media(max-width:680px){.plp-steps{grid-template-columns:1fr;gap:0;padding-left:0}.plp-steps li{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.plp-steps li:first-child{border-top:0}.plp-steps .ni{width:52px;height:52px;padding:10px;flex:0 0 52px;box-shadow:none;background:var(--cream2)}.plp-n{display:none}.plp-steps li>b{margin-top:0}.plp-steps li>b,.plp-steps li>p{max-width:none}.plp-steps li{display:grid;grid-template-columns:52px 1fr;column-gap:16px}.plp-steps li .ni{grid-row:1/3}.plp-steps li p{grid-column:2}}
/* functional concepts row (product page version of Indulgence) */
.fx-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,5vh,56px);grid-column:1/-1}
.fx-row>div{display:flex;flex-direction:column;gap:8px;padding:0 4px}
.fx-row .ni{width:44px;height:44px;color:#D6D6D6;margin-bottom:4px}
.fx-row b{font-family:'Outfit';font-weight:700;font-size:16px;color:#fff;line-height:1.25}
.fx-row span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.68)}
@media(max-width:900px){.fx-row{grid-template-columns:1fr 1fr;gap:22px 16px}}
@media(max-width:520px){.fx-row{grid-template-columns:1fr}}
.pd-indul{padding-bottom:clamp(96px,13vh,170px)}
@media(min-width:901px){.pd-indul .igrid .fx-row{grid-column:1;grid-row:2;align-self:start;grid-template-columns:1fr 1fr;gap:26px 22px;margin-top:0}}
/* V41.1 platform cards: variant line inside the card overlay */
.pc-v{position:absolute;left:20px;right:20px;bottom:46px;z-index:2;color:rgba(255,255,255,.8);text-shadow:0 2px 10px rgba(0,0,0,.4);font-size:12.5px;line-height:1.4;margin:0;max-width:none}
.pc-t{bottom:92px}
.pc-more{bottom:18px}
@media(max-width:680px){.pc-v{font-size:12px;bottom:44px}.pc-t{bottom:88px}}
/* V41.2 Coop same size as the other logos; platform variant lines only where they fit */
.partners .lmq-set .lg.flip img.coop{height:38px;max-width:130px}
.trusted-logos .lmq-set img.coop{height:40px;max-width:130px}
@media(max-width:680px){.partners .lmq-set .lg.flip img.coop{height:30px;max-width:104px}.trusted-logos .lmq-set img.coop{height:34px;max-width:110px}.pc-v{display:none}.pc-t{bottom:52px}.pc-more{bottom:20px}}
.trusted-logos .lmq-set img.coop{height:42px}
/* V41.3 private label process as a journey with dark cards */
.pl-journey{background:#fff}
.pl-journey .jwrap7{height:1530px}
.pl-journey .j7{top:1190px;left:5%;--r:2deg}
.pl-journey .jinner{background:#0A0202;border-color:#0A0202;color:#fff}
.pl-journey .jinner h3{color:#fff}
.pl-journey .jinner p{color:rgba(255,255,255,.72)}
.pl-journey .jnum{color:var(--lime)}
.pl-journey .jcard{background:#fff}
.pl-journey .jpath path{stroke:#CBD3C0}
.pl-journey .jpin{background:#0A0202;color:#E1E1E1;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.pl-journey .jpin .ni{--lime:#A2D45E}
@media(max-width:900px){.pl-journey .jwrap7{height:auto}}
/* V41.4 process cards: deep green gradient instead of flat black */
.pl-journey .jinner{background:linear-gradient(160deg,#1C3410 0%,#2F4B14 48%,#4A7A1E 100%);border-color:transparent}
.pl-journey .jinner p{color:rgba(255,255,255,.78)}
.pl-journey .jpin{background:#2F4B14;color:#E6EFD9}
/* V41.5 process cards back to the original beige */
.pl-journey .jinner{background:var(--paper);border-color:var(--line-soft);color:inherit}
.pl-journey .jinner h3{color:var(--ink)}
.pl-journey .jinner p{color:var(--muted)}
.pl-journey .jnum{color:var(--lime-deep)}
.pl-journey .jpin{background:#fff;color:#6E6E6E;box-shadow:0 6px 16px -8px rgba(22,40,26,.35)}
/* V41.6 process images and pins */
.pl-journey .j5 .jinner img{object-position:50% 32%}
.pl-journey .j7 .jinner img{object-position:50% 50%}
.jpin{z-index:4;width:auto;display:inline-flex;align-items:center;justify-content:center}
.jcard{overflow:visible}
/* V41.7 journey pins: visible on every size */
.jpin{width:46px;height:46px;padding:0;border:1px solid var(--line);background:#fff;top:-23px}
.jpin .ni{width:26px;height:26px}
@media(max-width:900px){.jcard{position:relative;top:auto;left:auto;right:auto;margin-top:12px}.jwrap{gap:34px}}
/* V41.8 seventh card on phones + no pins on the private label journey */
@media(max-width:900px){.pl-journey .j7{top:auto;left:auto;right:auto}}
.pl-journey .jpin{display:none}
/* V41.9 private label journey: image-backed premium cards */
.pl-journey .jinner{position:relative;overflow:hidden;min-height:330px;padding:24px 22px 22px;display:flex;flex-direction:column;justify-content:flex-end;background:#0A0202;border-color:transparent;color:#fff}
.pl-journey .jinner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;z-index:0;opacity:.55;transform:scale(1.04);transition:transform .8s var(--ease),opacity .6s}
.pl-journey .jinner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,2,2,.92) 0%,rgba(10,2,2,.55) 45%,rgba(10,2,2,.15) 100%)}
.pl-journey .jinner>*:not(img){position:relative;z-index:2}
.pl-journey .jnum{color:var(--lime);margin-bottom:auto;font-size:28px}
.pl-journey .jinner h3{color:#fff;font-size:19px;margin-top:18px}
.pl-journey .jinner p{color:rgba(255,255,255,.78);font-size:13.5px;margin-top:8px}
.pl-journey .jcard:hover .jinner img{transform:scale(1.1);opacity:.7}
.pl-journey .j5 .jinner img{object-position:50% 30%}
@media(max-width:900px){.pl-journey .jinner{min-height:300px}}
/* V41.10 slightly brighter card images */
.pl-journey .jinner img{opacity:.75}
.pl-journey .jinner::after{background:linear-gradient(to top,rgba(10,2,2,.92) 0%,rgba(10,2,2,.5) 42%,rgba(10,2,2,.1) 100%)}
.pl-journey .jcard:hover .jinner img{opacity:.85}
/* V41.11 process numbers as large faint watermarks (Gorillas style) */
.pl-journey .jnum{position:absolute;top:-6px;right:14px;z-index:2;font-size:clamp(96px,9vw,128px);font-weight:800;line-height:1;color:rgba(255,255,255,.16);letter-spacing:-.04em;margin:0;pointer-events:none}
.pl-journey .jinner{padding-top:110px}
@media(max-width:900px){.pl-journey .jnum{font-size:110px;right:12px}}
.pl-journey .jinner>.jnum{position:absolute;top:-4px;right:12px;margin:0}
/* V41.12 process numbers back to small lime, top-left */
.pl-journey .jinner>.jnum{position:absolute;top:22px;left:22px;right:auto;font-size:28px;font-weight:800;color:var(--lime);letter-spacing:0;opacity:1}
.pl-journey .jinner{padding-top:96px}
@media(max-width:900px){.pl-journey .jinner>.jnum{font-size:28px;left:22px}}
/* V42 brands page: standard subpage hero, brand band as a section */
#family.brandband{padding:0}
#family.brandband .wrap{padding-top:clamp(80px,11vh,140px);padding-bottom:clamp(80px,11vh,140px)}
#family.brandband .bb-stats{margin-top:clamp(44px,6vh,64px)}
@media(max-width:680px){#family.brandband .wrap{padding-top:64px;padding-bottom:64px}.brandband h2 br{display:none}}
/* V42.1 brands page: light brand family section, official logos, café video, MyFrida without before/after */
.bfam{background:#fff}
.bfam .sec-head{margin-bottom:clamp(44px,6vh,64px)}
.bf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.bf-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bf-logo{height:56px;display:flex;align-items:center;margin-bottom:22px}
.bf-logo img{height:44px;width:auto;max-width:220px;object-fit:contain}
.bf-logo img.tf-dark{filter:brightness(0)}
.bf-card h3{font-family:'Outfit';font-weight:700;font-size:17px;color:var(--ink);line-height:1.25}
.bf-def{font-size:15px;line-height:1.6;color:var(--ink);margin-top:8px}
.bf-card ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.bf-card li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.bf-card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.bf-link{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);text-decoration:none}
.bf-link .arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bf-link:hover{color:var(--ink)}
.bf-stats{display:flex;justify-content:center;gap:clamp(40px,7vw,110px);margin-top:clamp(56px,8vh,88px)}
.bf-stats .num{font-family:'Outfit';font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink)}
.bf-stats .num span{color:var(--lime-deep)}
.bf-stats .lbl{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
@media(max-width:900px){.bf-grid{grid-template-columns:1fr;gap:40px}.bf-card{max-width:520px}.bf-stats{gap:32px;flex-wrap:wrap}}
.lg-badge.lg-official{width:clamp(200px,22vw,320px);margin-bottom:0}
.cg video.cg-a{border-radius:var(--r-md);width:100%;height:100%;object-fit:cover;display:block;background:#0A0202}
@media(max-width:680px){.brandband h2 br,.bfam h2 br{display:none}}
/* V42.2 kill legacy black logo box in the new brand family section */
.bfam .bf-logo{background:none;border-radius:0;padding:0;justify-content:flex-start;height:56px;margin-bottom:22px}
.bfam .bf-logo img{height:44px;max-width:220px}
/* V42.3 brand columns: no names, equal two-line definitions; official Teta Frida logo on homepage band; MyFrida lighter on packaging */
.bf-def{max-width:24ch;min-height:calc(1.6em*2)}
.bfam .bf-logo{height:52px}
.bb-logos .bb-item img.tf-official{height:clamp(38px,3.8vw,50px);width:auto}
.bb-def{max-width:24ch;min-height:calc(1.5em*2)}
@media(max-width:680px){.bb-logos .bb-item img.tf-official{height:36px}.bb-def{min-height:0}.bf-def{min-height:0}}
.mf-foot{margin-top:clamp(40px,6vh,64px);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mf-foot .mf-tags{margin-top:0}
.mf-foot .mf-cta{margin-top:22px}
/* V42.4 two-line definitions with fixed breaks; equal logo heights on the homepage band */
@media(min-width:681px){.bf-def,.bb-def{max-width:none;min-height:0;white-space:nowrap}}
@media(max-width:680px){.bf-def br,.bb-def br{display:none}.bf-def,.bb-def{max-width:30ch}}
@media(min-width:681px){.bb-logos .bb-item img,.bb-logos .bb-item img.tf-official,.bb-logos .mf{height:48px;width:auto}}
/* V42.5 legend facts: leaf pinned, text flows as one line (no flex gaps around bold words) */
.lg-facts li{display:block;position:relative;padding-left:26px}
.lg-facts .lf{position:absolute;left:0;top:3px;margin:0}
.lg-facts li b{display:inline}
/* V42.6 MyFrida section, minimal: text + one product visual */
.mf-min .mf2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.mf-min .mf-logo{width:clamp(150px,14vw,200px);height:auto;margin-bottom:26px;display:block}
.mf-min .eyebrow{color:var(--lime)}
.mf-min h2{color:#fff;margin-top:16px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.mf-min .mf2-text>p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin-top:18px;max-width:56ch}
.mf2-list{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0;display:grid;gap:18px;max-width:56ch}
.mf2-list li{display:grid;gap:4px}
.mf2-list b{font-family:'Outfit';font-weight:700;font-size:17px;color:#fff;line-height:1.3}
.mf2-list span{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.66)}
.mf-min .mf-cta{margin-top:clamp(28px,4vh,40px);align-items:center;gap:22px}
.mf2-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none}
.mf2-link .arx svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf2-link:hover{color:var(--lime)}
.mf2-visual img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
@media(max-width:900px){.mf-min .mf2{grid-template-columns:1fr;gap:40px}.mf2-visual img{max-width:360px}.mf2-visual{order:-1}}
@media(max-width:680px){.mf-min .mf-logo{width:150px}.mf2-visual img{max-width:280px}}
.mf-min .mf-logo{margin:0 0 26px 0;justify-self:start}
/* V42.7 homepage band: Tante Frida wordmark visually matched to the other two logos */
@media(min-width:681px){.bb-logos .bb-item img[alt="Tante Frida"]{height:auto;width:200px}}
@media(max-width:680px){.bb-logos .bb-item img[alt="Tante Frida"]{height:auto;width:150px}}
/* V43 homepage band: every logo sits in the same 48px box so the rows align */
@media(min-width:681px){.bb-logos .bb-item img,.bb-logos .bb-item img.tf-official,.bb-logos .mf,.bb-logos .bb-item img[alt="Tante Frida"]{height:48px;width:auto;max-width:220px;object-fit:contain}.bb-logos .bb-item img[alt="Tante Frida"]{width:200px}}
/* V43.1 manufacturing roll = homepage text-flip roll */
.trusted-logos .lmq-set .lg.flip .lg-txt{color:var(--ink)}
.trusted-logos .lmq-set .lg.flip img{filter:none;opacity:0}
.trusted-logos .lmq-set .lg.flip.on img{opacity:1}
@media(hover:hover){.trusted-logos .lmq-set .lg.flip:hover img{opacity:1}}
/* V43.2 manufacturing R&D list: sprite icons, no PNG backgrounds */
.mfg-rd-list .ni{width:44px;height:44px;flex:0 0 44px;color:#D6D6D6}
@media(max-width:680px){.mfg-rd-list .ni{width:38px;height:38px;flex-basis:38px}}
/* V43.3 company statement: full factory render (same file as Manufacturing), soft fade on the left edge */
.stmt-img.stmt-render img{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%)}
/* V43.4 manufacturing roll: exact same flip behaviour as the homepage (neutralise older colour-roll hover rules) */
.trusted-logos .lmq-set .lg.flip img{height:38px;max-width:130px;filter:none;transform:translate(-50%,-50%) rotateX(-180deg);opacity:0}
.trusted-logos .lmq-set .lg.flip.on img{transform:translate(-50%,-50%) rotateX(0);opacity:1}
@media(hover:hover){.trusted-logos .lmq-set .lg.flip:hover img{transform:translate(-50%,-50%) rotateX(0);opacity:1;filter:none}.trusted-logos .lmq-set .lg.flip:hover .lg-txt{transform:rotateX(180deg);opacity:0}}
@media(hover:none){.trusted-logos .lmq-set .lg.flip:hover img{transform:translate(-50%,-50%) rotateX(-180deg);opacity:0}.trusted-logos .lmq-set .lg.flip.on:hover img{transform:translate(-50%,-50%) rotateX(0);opacity:1}}
.trusted-logos .lmq-set .lg.flip img.coop{height:38px}
@media(max-width:680px){.trusted-logos .lmq-set .lg.flip img,.trusted-logos .lmq-set .lg.flip img.coop{height:30px;max-width:104px}}
/* company factory render: soft elliptical fade so the base blends into white */
.stmt-img.stmt-render img{-webkit-mask-image:radial-gradient(ellipse 62% 64% at 52% 46%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 52% 46%,#000 52%,transparent 100%);filter:none}
/* V43.5 company hero: office photo, keep the team and lamps in frame */
.co-page .hero.short .hero-img{object-position:40% 45%}
/* V44 manufacturing: homepage logo roll dropped in verbatim; no ornament over it */
.trusted .partners.dk{background:transparent;padding:clamp(28px,4vh,44px) 0 0}
#manufacturing.intro::after{display:none}
/* V45: one icon set site-wide. Homepage pillars + manufacturing capabilities + company sustainability now use the ni sprite; science list slightly bigger and brighter */
.sus-grid .sus-ni{width:72px;height:72px;display:block;margin-bottom:20px;color:#CFCFCF;--lime:#A2D45E}
@media(max-width:560px){.sus-grid .sus-ni{width:60px;height:60px;margin-bottom:14px}}
.sl-list .wic{flex:0 0 48px;width:48px;height:48px;background:rgba(143,208,255,.2)}
.sl-list .wic .ni{width:44px;height:44px;--lime:#BCE4FF;color:#BCE4FF}
@media(max-width:680px){.sl-list .wic{flex-basis:44px;width:44px;height:44px}.sl-list .wic .ni{width:40px;height:40px}}
/* V45.1: client asked for a CTA to products on the homepage; sits under the What-we-make copy */
.frozen3 .fz-cta{margin-top:26px}
@media(max-width:680px){.frozen3 .fz-cta{margin-top:18px}}
.fz-over .fz-cta{pointer-events:auto}
.fz-over-cta{bottom:clamp(56px,9vh,96px)}
@media(max-width:680px){.fz-over-cta{display:none}}
/* V46: certificates and awards. Mono by default, colour original fades in on hover (wrapper built in site.js). Brands awards on white are colourful by default. Academy of Chocolate added to both award rows. */
.cswap{position:relative;display:inline-flex;flex:none;line-height:0;vertical-align:middle}
.cswap>img:first-child{display:block;position:relative}
.cswap .c-col{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain;opacity:0;filter:none!important;transition:opacity .4s ease;pointer-events:none}
@media(hover:hover){.cswap:hover>img:first-child{opacity:0!important}.cswap:hover .c-col{opacity:1}}
.aw-logos img,.aw-logos img[alt="Superbrands"]{filter:none;opacity:1}
.aw-logos img[alt="Academy of Chocolate"],.bb-awards img[alt="Academy of Chocolate"]{height:66px}
@media(max-width:680px){.bb-awards{grid-template-columns:repeat(3,1fr)}.bb-awards img[alt="Academy of Chocolate"]{height:50px}}
.aw-logos{grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media(max-width:900px){.aw-logos{grid-template-columns:repeat(3,1fr);gap:18px 14px}}
.aw-logos img[alt="Sweetie award"]{height:clamp(56px,5.6vw,76px)}
/* V46.1: on phones keep 8 awards (4/4) and 6 quality certs (3/3); Academy of Chocolate + Kosher desktop/tablet only */
@media(max-width:680px){.m-hide{display:none!important}.bb-awards{grid-template-columns:repeat(4,1fr)}.aw-logos{grid-template-columns:repeat(4,1fr)}}
/* V46.1: on phones keep 8 awards (4/4) and 6 quality certs (3/3); Academy of Chocolate + Kosher desktop/tablet only */
@media(max-width:680px){.m-hide{display:none!important}.bb-awards{grid-template-columns:repeat(4,1fr)}.aw-logos{grid-template-columns:repeat(4,1fr)}}
/* V47: Brands page round 4. MyFrida on the pink key visual, Tante Frida logo with the Frida head, Africa before Chocolate Village */
.mf-pink{position:relative;background:#E4428F;color:#fff;overflow:hidden;min-height:clamp(560px,82vh,780px);display:flex;align-items:center}
.mf-pink .mf-kv{position:absolute;inset:0;display:block}
.mf-pink .mf-kv img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block}
.mf-pink::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(226,62,140,.92) 0%,rgba(226,62,140,.78) 34%,rgba(226,62,140,0) 62%);z-index:1;pointer-events:none}
.mf-pink .mf-pink-grid{position:relative;z-index:2;width:100%;padding-top:clamp(72px,10vh,120px);padding-bottom:clamp(72px,10vh,120px)}
.mf-pink-text{max-width:520px}
.mf-pink .mf-logo{width:clamp(150px,14vw,200px);height:auto;display:block;margin-bottom:26px}
.mf-pink .eyebrow{color:#fff;opacity:.85}
.mf-pink h2{color:#fff;margin-top:16px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.mf-pink h2 .dot{color:#0A0202}
.mf-pink p{color:rgba(255,255,255,.9);font-size:15px;line-height:1.7;margin-top:18px;max-width:52ch}
.mf-pink-facts{list-style:none;margin:clamp(22px,3vh,30px) 0 0;padding:0;display:grid;gap:10px}
.mf-pink-facts li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.92)}
.mf-pink-facts li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:#0A0202}
.mf-pink .mf-cta{margin-top:clamp(28px,4vh,40px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mf-pink .btn-primary{background:#0A0202;color:#fff}
.mf-pink .btn-primary:hover{background:#fff;color:#0A0202}
.mf-pink .mf2-link{color:#fff}
.mf-pink .mf2-link:hover{color:#0A0202}
@media(max-width:900px){
.mf-pink{min-height:0;display:block}
.mf-pink::before{display:none}
.mf-pink .mf-kv{position:relative;inset:auto;aspect-ratio:1400/937}
.mf-pink .mf-kv img{object-position:50% 50%}
.mf-pink .mf-pink-grid{padding-top:clamp(56px,8vh,80px);padding-bottom:clamp(40px,6vh,64px)}
.mf-pink-text{max-width:none}
}
@media(max-width:680px){.mf-pink .mf-logo{width:150px}.mf-pink h2{font-size:30px}}
/* Tante Frida logo now carries the head: size it exactly like Teta Frida everywhere */
@media(min-width:681px){.bb-logos .bb-item img[alt="Tante Frida"]{height:48px;width:auto;max-width:220px}}
@media(max-width:680px){.bb-logos .bb-item img[alt="Tante Frida"]{height:36px;width:auto}}
.bfam .bf-logo img[alt="Tante Frida"]{height:44px;width:auto;max-width:220px}
/* V47.1 MyFrida: flat brand pink as the section colour, key visual dissolves into it from the right; white instead of black accents */
.mf-pink{background:#E4428F}
.mf-pink .mf-kv{left:auto;width:72%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%)}
.mf-pink .mf-kv img{object-position:70% 50%}
.mf-pink::before{background:linear-gradient(90deg,rgba(228,66,143,.55) 0%,rgba(228,66,143,0) 40%)}
.mf-pink h2 .dot{color:#fff}
.mf-pink-facts li::before{background:#fff}
.mf-pink .btn-primary{background:#fff;color:#C2216E}
.mf-pink .btn-primary:hover{background:#0A0202;color:#fff}
.mf-pink .mf2-link:hover{color:#FFD6E8}
@media(max-width:900px){
.mf-pink .mf-kv{width:100%;left:0;-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%);margin-bottom:-14vw}
.mf-pink .mf-pink-grid{padding-top:0}
}
/* V48: on dark backgrounds icons are one colour (lime) and certificates stay mono; colour-on-hover only on light backgrounds */
.cswap .c-col{opacity:0!important}
@media(hover:hover){.cswap:hover .c-col{opacity:1!important}}
.fx-row .ni,.mfg-rd-list .ni,.indul .pill .ni,.sus-grid .sus-ni{color:var(--lime);--lime:#A2D45E}
.indul .pill.on .ni{color:#0A0202;--lime:#0A0202}
/* V48.1: category pop-ups as colour "subpages": card colour as background, product visual, premium option chips, two CTAs */
.pm.pm-v2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:min(86vh,840px);background:var(--c);color:var(--pi)}
.pm2-media{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 78%,#fff 22%) 0%,var(--c) 68%);overflow:hidden}
.pm2-media img{width:100%;max-width:440px;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.pm-v2[data-media="photo"] .pm2-media{padding:0;background:var(--c)}
.pm-v2[data-media="photo"] .pm2-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none}
.pm-v2[data-media="photo"] .pm2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,color-mix(in srgb,var(--c) 90%,transparent) 100%)}
.pm2-body{padding:clamp(34px,4.4vw,64px) clamp(30px,4.4vw,64px) clamp(30px,4vw,52px);display:flex;flex-direction:column}
.pm2-eyebrow{font:700 11px 'Inter';letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.pm2-body h3{font-family:'Outfit';font-weight:700;font-size:clamp(30px,3.3vw,46px);line-height:1.02;letter-spacing:-.025em;color:var(--pi);margin-top:16px;max-width:18ch}
.pm2-body>p{margin-top:18px;font-size:15.5px;line-height:1.72;color:color-mix(in srgb,var(--pi) 84%,transparent);max-width:56ch}
.pm2-groups{display:grid;gap:clamp(22px,3vh,32px);margin-top:clamp(26px,3.6vh,38px);padding-top:clamp(22px,3vh,30px);border-top:1px solid color-mix(in srgb,var(--pi) 18%,transparent)}
.pm2-group h4{font:700 12px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--pi) 70%,transparent);margin:0 0 12px}
.pm2-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.pm2-group li{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border-radius:100px;background:color-mix(in srgb,var(--pi) 10%,transparent);border:1px solid color-mix(in srgb,var(--pi) 20%,transparent);font-size:14px;line-height:1.3;color:var(--pi)}
.pm2-group li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--pi);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pm2-foot{margin-top:auto;padding-top:clamp(30px,4vh,44px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pm2-cta.btn{background:var(--pi);color:var(--c);border:1.5px solid var(--pi)}
.pm2-cta.btn:hover{background:transparent;color:var(--pi)}
.pm2-back{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid color-mix(in srgb,var(--pi) 40%,transparent);color:var(--pi);border-radius:100px;padding:13px 20px;font:600 14px 'Inter';cursor:pointer;transition:border-color .3s,background .3s}
.pm2-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm2-back:hover{border-color:var(--pi);background:color-mix(in srgb,var(--pi) 10%,transparent)}
.pmodal-card:has(.pm-v2){width:min(1120px,100%);border-radius:30px}
.pmodal:has(.pm-v2) .pmodal-x{background:color-mix(in srgb,#fff 88%,transparent);color:#0A0202}
@media(max-width:800px){
.pm.pm-v2{grid-template-columns:minmax(0,1fr);min-height:0}
.pm2-media{aspect-ratio:16/10;padding:22px}
.pm2-media img{max-width:min(320px,74%)}
.pm-v2[data-media="photo"] .pm2-media::after{background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--c) 90%,transparent) 100%)}
.pm2-body{padding:26px 22px 30px}
.pm2-body h3{font-size:30px}
.pm2-group li{font-size:13.5px;padding:8px 13px 8px 10px}
.pm2-foot{flex-direction:column;align-items:stretch}
.pm2-foot .btn,.pm2-back{justify-content:center;width:100%}
}
/* V48.2: light backgrounds show the colour certificates directly (no filters); MyFrida logo/text column on clean pink */
.certgrid img,.mcerts img,.mfg3 .mcerts img{filter:none!important;opacity:1!important}
.certgrid img[alt^="Kosher"],.mcerts img[alt^="Kosher"]{filter:invert(1) brightness(.25)!important}
.mf-pink .mf-kv{width:58%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 52%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 52%)}
.mf-pink .mf-kv img{object-position:64% 50%}
.mf-pink::before{background:linear-gradient(90deg,#E4428F 0%,#E4428F 34%,rgba(228,66,143,0) 58%)}
@media(max-width:900px){.mf-pink .mf-kv{width:100%}.mf-pink::before{display:none}}
/* V49: product categories open real subpages (product-*.html); cards are links */
a.pc{display:block;text-decoration:none;color:var(--ink)}
.pdp-crumb{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);padding-top:18px;padding-bottom:18px}
.pdp-crumb a{color:var(--muted);text-decoration:none}.pdp-crumb a:hover{color:var(--ink)}.pdp-crumb b{color:var(--ink);font-weight:600}
.pdp-hero .pm.pm-v2{min-height:min(84vh,860px);border-radius:0}
.pdp-hero .pm2-media img{max-width:520px}
.pdp-hero .pm2-body{max-width:760px}
.pdp-more{background:var(--paper)}
.pc-grid-sm{grid-template-columns:repeat(6,1fr);margin-top:0}
.pc-grid-sm .pc{aspect-ratio:3/4;border-radius:18px}
.pc-grid-sm .pc-t{font-size:15px;bottom:46px}
.pc-grid-sm .pc-more{font-size:11px}
@media(max-width:900px){.pc-grid-sm{grid-template-columns:repeat(3,1fr)}.pc-grid.pc-grid-sm .pc:last-child{grid-column:auto;aspect-ratio:3/4}}
@media(max-width:680px){.pc-grid-sm{grid-template-columns:repeat(2,1fr)}.pc-grid-sm .pc-t{font-size:14px;bottom:44px}.pdp-crumb{font-size:12px;flex-wrap:wrap}.pdp-hero .pm.pm-v2{min-height:0}}
/* legend: less dead air under the CTA on phones */
@media(max-width:680px){.legend.sec-pad{padding-bottom:48px}}
/* V49.1: packaging on phones/tablets = swipeable slider, one format per slide, big and legible. Desktop keeps the catalogue sheet. */
.pk-slider{display:none}
@media(max-width:800px){
.pk-page{display:none}
.pk-slider{display:block;margin-top:28px}
.pk-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 8px}
.pk-track::-webkit-scrollbar{display:none}
.pk-slide{flex:0 0 84%;max-width:420px;scroll-snap-align:center;margin:0;background:#fff;border:1px solid rgba(22,40,26,.08);border-radius:22px;overflow:hidden;box-shadow:0 14px 34px -22px rgba(22,40,26,.25)}
.pk-simg{aspect-ratio:1/1;background:#FBF9F4;display:flex;align-items:center;justify-content:center;padding:9%}
.pk-simg img{width:100%;height:100%;object-fit:contain;display:block}
.pk-slide figcaption{padding:16px 18px 20px}
.pk-slide b{display:block;font-family:'Outfit';font-weight:700;font-size:18px;color:var(--ink);line-height:1.2}
.pk-slide span{display:block;font-size:14px;line-height:1.55;color:var(--muted);margin-top:6px}
.pk-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.pk-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(22,40,26,.18);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pk-nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-dots{display:flex;gap:6px;align-items:center}
.pk-dots i{width:6px;height:6px;border-radius:50%;background:rgba(22,40,26,.18);transition:background .3s,transform .3s}
.pk-dots i.on{background:var(--lime);transform:scale(1.35)}
}
@media(max-width:520px){.pk-slide{flex-basis:88%}}
.pc-grid.pc-grid-sm .pc:first-child,.pc-grid.pc-grid-sm .pc:last-child{grid-column:auto;aspect-ratio:3/4}
@media(max-width:800px){.pk-simg{background:#fff;padding:6%}}
/* V49.2: breathing room between the legend text and its CTA */
.lg-text .btn{margin-top:clamp(28px,4vh,40px)}
/* V49.3: product subpages use the original pop-up layout (catalogue sheet + text + lists + CTAs) */
.pdp-sheet{background:var(--paper)}
.pdp-sheet .pm.pm-page{max-width:1060px;margin:0 auto;padding:clamp(20px,3.5vw,44px) clamp(16px,3vw,40px) 0;background:transparent;min-height:0;display:block}
.pdp-sheet .pm-sheet{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(22,40,26,.25);background:#fff}
.pdp-sheet .pm-text{padding:clamp(32px,4.5vh,52px) 0 0}
.pdp-sheet .pm-text h3{max-width:22ch}
.pdp-sheet .pm-text p{max-width:66ch}
.pdp-sheet .pm-mobile{padding:0}
.pdp-sheet .pm-foot{padding:clamp(34px,5vh,52px) 0 clamp(48px,7vh,84px);display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-start;border:none}
.pdp-sheet .pm-back{text-decoration:none;font:600 14px 'Inter';color:var(--muted);padding:8px 0}
.pdp-sheet .pm-back:hover{color:var(--ink)}
@media(max-width:800px){.pdp-sheet .pm.pm-page{padding:12px 14px 0}.pdp-sheet .pm-mobile{display:block;padding:8px 0 0}.pdp-sheet .pm-foot{justify-content:center;padding-top:28px;padding-bottom:48px;gap:18px}.pdp-sheet .pm-foot .btn{width:100%;justify-content:center}}
/* V49.4: MyFrida on phones/tablets: key visual dissolves into the flat pink on every side, no visible image edge */
@media(max-width:900px){
.mf-pink{background:#E4418F}
.mf-pink .mf-kv{width:100%;left:0;margin-bottom:-22vw;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.18) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.18) 88%,transparent 100%)}
.mf-pink .mf-kv img{object-position:50% 40%}
.mf-pink .mf-pink-grid{padding-top:0}
}
@media(max-width:900px){.mf-pink .mf-kv{margin-bottom:-6vw;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.12) 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.12) 86%,transparent 100%)}.mf-pink .mf-kv img{object-position:50% 30%}}
/* V49.5: product subpages: solid nav from the top, content starts below it */
.pdp{padding-top:clamp(96px,11vh,124px)}
.pdp-crumb{padding-top:0}
@media(max-width:900px){.pdp{padding-top:92px}}
@media(max-width:680px){.pdp{padding-top:84px}}
.pdp{padding-top:132px}
@media(max-width:900px){.pdp{padding-top:118px}}
@media(max-width:680px){.pdp{padding-top:104px}}
@media(max-width:680px){.pdp{padding-top:118px}}
/* V49.6: homepage Sweetie turns yellow on hover (the only colour hover on dark, per Nejc) */
.bb-awards .cswap{display:inline-flex}
.bb-awards .cswap .c-col{filter:none!important}
/* V49.7: subpage hero takes the exact paper tone of its catalogue sheet; no frame around the sheet; small strip titles */
.pdp-sheet{background:var(--paper)}
.pdp-sheet .pm-sheet{box-shadow:none;border-radius:0;background:transparent;border:none}
.pdp-sheet .pm-sheet img{background:transparent}
.pc-grid.pc-grid-sm .pc:first-child .pc-t,.pc-grid.pc-grid-sm .pc-t{font-size:15px;bottom:46px;max-width:none;line-height:1.2}
.pc-grid.pc-grid-sm .pc:first-child .pc-n{font-size:12px}
@media(max-width:680px){.pc-grid.pc-grid-sm .pc:first-child .pc-t,.pc-grid.pc-grid-sm .pc-t{font-size:14px;bottom:44px}}
/* V49.8: packaging slides use transparent cut-outs on the cream tile */
@media(max-width:800px){.pk-simg{background:#FBF9F4;padding:9%}.pk-simg img{filter:drop-shadow(0 14px 18px rgba(22,40,26,.14))}}
/* V49.9: product subpage = one background from breadcrumb to the category strip; molecule line-art on the Functional card */
.pdp{background:var(--paper)}
.pdp-more{background:transparent}
.pc .pc-mol{position:absolute;right:5%;top:5%;width:44%;height:auto;z-index:2;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.95;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));pointer-events:none}
.pc .pc-mol circle{fill:#fff;stroke:none}
.pc .pc-mol .lm{fill:var(--lime)}
.pc-grid-sm .pc .pc-mol{width:52%}
@media(max-width:680px){.pc .pc-mol{width:50%}}
/* V50: Manufacturing. Real aerial photo of the plant instead of the cut-out render; journey cards re-shot with properly framed images */
.mfactory .fbuild.fphoto{width:100%;max-width:none;height:auto;aspect-ratio:16/7.2;object-fit:cover;object-position:50% 42%;border-radius:var(--r-lg);filter:none;display:block;margin:0}
.mfactory{margin-top:clamp(30px,5vh,52px)}
@media(max-width:900px){.mfactory .fbuild.fphoto{aspect-ratio:16/9}}
@media(max-width:680px){.mfactory .fbuild.fphoto{aspect-ratio:4/3;border-radius:var(--r-md)}}
.journey.nt .j1 .jinner img{object-position:50% 45%}
.journey.nt .j2 .jinner img{object-position:50% 40%}
.journey.nt .j3 .jinner img{object-position:50% 55%}
.journey.nt .j4 .jinner img{object-position:50% 22%}
.journey.nt .j5 .jinner img{object-position:50% 30%}
.journey.nt .j6 .jinner img{object-position:50% 55%}
.mfactory .fbuild.fphoto{object-position:50% 48%}
/* V50.1: dark strip certs back to mono; sustainability icons in tinted circles like the homepage science list; journey 06 truck higher in frame */
.mfg3 .mcerts img{filter:invert(1)!important;opacity:.85!important}
.mfg3 .mcerts img:hover{opacity:1!important}
.sus-grid .sus-ni{width:56px;height:56px;padding:7px;box-sizing:border-box;border-radius:50%;background:rgba(162,212,94,.16);border:1px solid rgba(162,212,94,.22);margin-bottom:18px}
@media(max-width:560px){.sus-grid .sus-ni{width:50px;height:50px;padding:6px;margin-bottom:14px}}
.journey.nt .j6 .jinner img{object-position:50% 80%}
.journey.nt .j5 .jinner img{object-position:50% 50%}
/* V50.2: Company. Sustainability block uses the homepage science template (centered text + stacked rows) in lime; statement image larger */
.sus .sl-text{margin:0 auto;text-align:center;max-width:760px}
.sus .sus-iso{height:44px;width:auto;margin:0 auto 26px;display:block;filter:brightness(0) invert(1);opacity:.9}
.sus .eyebrow{color:var(--lime)}
.sus h2{color:#fff;margin-top:14px;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.sus .dot{color:var(--lime)}
.sus .sl-text p{color:rgba(255,255,255,.9);max-width:56ch;margin:18px auto 0;font-size:16px;line-height:1.7}
.sus .sl-list>div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.sus .sl-list .wic{background:rgba(162,212,94,.2);color:var(--lime)}
.sus .sl-list .wic .ni{--lime:#A2D45E;color:#A2D45E}
.sus .sl-list b+span{color:rgba(255,255,255,.72)}
@media(min-width:901px){.stmt-grid{grid-template-columns:.9fr 1.1fr}.stmt-img.stmt-render img{width:118%;max-width:none;margin-left:-4%}}
/* V50.3: statement image = the real aerial photo, large, rounded, on every device */
.stmt-img.stmt-photo{aspect-ratio:4/3.3;border-radius:var(--r-xl);overflow:hidden;display:block}
.stmt-img.stmt-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;display:block;-webkit-mask-image:none;mask-image:none;filter:none;margin:0;max-width:none}
@media(min-width:901px){.stmt-grid{grid-template-columns:.85fr 1.15fr;align-items:center}.stmt-img.stmt-photo{aspect-ratio:4/3.5;margin-right:calc(-1 * clamp(0px,4vw,60px))}}
@media(max-width:900px){.stmt-img.stmt-photo{aspect-ratio:16/10;margin-top:28px}}
@media(max-width:680px){.stmt-img.stmt-photo{aspect-ratio:4/3;border-radius:var(--r-lg)}}
/* V50.4: green underline used on Brands and Manufacturing headings; Company statement image wider */
u.ul{text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 94%/100% 4px;padding-bottom:2px}
@media(max-width:680px){u.ul{background-size:100% 3px}}
@media(min-width:901px){.stmt-grid{grid-template-columns:.72fr 1.28fr;gap:clamp(32px,4.5vw,64px)}.stmt-img.stmt-photo{aspect-ratio:16/10.5;margin-right:calc(-1 * clamp(0px,5vw,80px))}}
/* V50.5: heading accents (fill, colour, underline) reusable outside Company; Manufacturing intro gets a facts column; all dark CTAs are black */
.mk-hl{background:linear-gradient(transparent 62%,rgba(162,212,94,.45) 62%)}
em.mk-em,.sec-head h2 em.mk-em,.trusted h3 em.mk-em{font-style:normal;color:var(--lime-deep)}
.mfg3 .mgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:end}
.mfg3 .mgrid > div:first-child{max-width:640px}
.mfacts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mfacts li{display:grid;grid-template-columns:108px 1fr;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.mfacts b{font-family:'Outfit';font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--lime);letter-spacing:-.02em}
.mfacts span{font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)}
@media(max-width:900px){.mfg3 .mgrid{grid-template-columns:1fr;gap:28px}.mfacts li{grid-template-columns:96px 1fr}}
@media(max-width:680px){.mfacts{gap:10px}.mfacts li{padding:13px 16px;grid-template-columns:84px 1fr}.mfacts b{font-size:24px}}
.btn-dark,.pc-cat .btn,.pd-more-btn,.fu-open,.gtip,.min-sec .gtip,.nav-cta .arx,.tags .duo{background:#0A0202!important;border-color:#0A0202!important}
.nav-cta:hover,.nav.scrolled .nav-cta:hover,.ct-soc a:hover,.fu-tile:hover .ct-ic,.mf-pink .btn-primary:hover{background:#0A0202!important;border-color:#0A0202!important;color:#fff!important}
.btn-dark:hover{background:var(--lime)!important;border-color:var(--lime)!important;color:#0A0202!important}
/* V50.6: neutral black (not warm) for the Manufacturing dark block; journey focal points centred */
.mfg3{background:#060606}
.journey.nt .j4 .jinner img{object-position:50% 46%}
.journey.nt .j6 .jinner img{object-position:50% 50%}
/* V50.7: every sprite icon is one colour (lime); the science list stays its own blue, active pills stay black */
.ni{color:#A2D45E;--lime:#A2D45E}
.jpin .ni,.who-card .who-ico.ni,.ct-ic .ni,.fu-tile .ni{color:#A2D45E;--lime:#A2D45E}
/* V50.8: nav CTA arrow keeps its plain look (no filled box) */
.nav-cta .arx,.nav-cta:hover .arx,.nav.scrolled .nav-cta .arx{background:transparent!important;border-color:transparent!important}
/* V50.9: Manufacturing intro back to text-only, with the dead space above the photo trimmed */
.mfg3 .mgrid{display:block}
.mfg3.sec-pad{padding-top:clamp(56px,7vh,84px)}
.mfactory{margin-top:clamp(22px,3.5vh,36px)}
.mfg3 .mp{margin-bottom:0}
/* V51: packaging slides. Cut-outs shown a little smaller with more air so they stay crisp on 3x screens */
@media(max-width:800px){.pk-simg{padding:12% 14%}.pk-simg img{filter:drop-shadow(0 16px 20px rgba(22,40,26,.16))}}
/* V51.1: logistics slide = full-bleed truck graphic like in the catalogue */
@media(max-width:800px){.pk-slide.pk-bleed .pk-simg{padding:0;background:#fff}.pk-slide.pk-bleed .pk-simg img{object-fit:cover;object-position:0% 60%;filter:none}}
@media(max-width:800px){.pk-slide.pk-bleed .pk-simg img{object-position:50% 55%}}
@media(max-width:800px){.pk-slide.pk-bleed .pk-simg img{object-position:50% 100%}}
/* V51.2: build cards in colour wherever there is no hover; truck centred; map edge markers not clipped on phones */
@media(hover:none),(max-width:900px){.acard2 img{filter:grayscale(0)!important;transform:none}}
@media(max-width:1080px){.acard2 img[src*="build-distribution-truck"]{object-position:50% 38%}}
@media(max-width:680px){.mwrap{padding:0 14px;box-sizing:border-box}.mwrap svg{-webkit-mask-image:none;mask-image:none}}
/* V51.3: build cards. Photo in colour and visible through the whole card; lighter bottom gradient just for legibility */
.acard2 img{filter:none!important;transform:scale(1.02)}
.acard2:hover img{transform:scale(1.06)}
.acard2::after{background:linear-gradient(to top,rgba(10,7,4,.86) 0%,rgba(10,7,4,.55) 28%,rgba(10,7,4,.18) 55%,rgba(10,7,4,.06) 100%)}
.xp-grid .acard2::before{display:none}
.a2-body h3,.a2-body p{text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* V51.4: distribution card shows the whole truck scene */
.acard2 img[src*="truck-road"]{object-position:50% 55%}
@media(max-width:1080px){.acard2 img[src*="truck-road"]{object-position:50% 50%}}
/* V51.5: truck higher in the distribution card so the whole truck sits above the text gradient */
.acard2 img[src*="truck-road"]{object-position:50% 85%}
@media(max-width:1080px){.acard2 img[src*="truck-road"]{object-position:50% 78%}}
/* V51.6: dedicated portrait crop of the truck so it sits in the upper part of the card */
.acard2 img[src*="truck-card"]{object-position:50% 30%}
@media(max-width:680px){.acard2 img[src*="truck-card"]{object-position:50% 58%}}
/* V52: Teta + Tante Frida as plain wordmarks wherever the two sit together (homepage band, brands family row); the Frida head stays on the legend badge only */
@media(min-width:681px){.bb-logos .bb-item img.tf-wm,.bb-logos .bb-item img[alt="Tante Frida"]{height:30px;width:auto;max-width:220px}}
@media(max-width:680px){.bb-logos .bb-item img.tf-wm,.bb-logos .bb-item img[alt="Tante Frida"]{height:24px;width:auto}}
.bfam .bf-logo img.tf-wm,.bfam .bf-logo img[alt="Tante Frida"]{height:30px;width:auto;max-width:220px}
.bfam .bf-logo img.tf-dark{filter:brightness(0)}
/* V52.1: heads kept after all (white Tante logo rebuilt from the official white Teta head); sizes back to the head-logo values */
@media(min-width:681px){.bb-logos .bb-item img.tf-official,.bb-logos .bb-item img[alt="Tante Frida"]{height:48px;width:auto;max-width:220px}}
@media(max-width:680px){.bb-logos .bb-item img.tf-official,.bb-logos .bb-item img[alt="Tante Frida"]{height:36px;width:auto}}
.bfam .bf-logo img,.bfam .bf-logo img[alt="Tante Frida"]{height:44px;width:auto;max-width:220px}
/* V53: form states. [hidden] must win over the grid/flex display rules inside the catalogue form */
.cat-form [hidden],#cat-form [hidden]{display:none!important}
.pc-cat[hidden]{display:none!important}
/* V54: client round 5. Bigger ISO badge in sustainability; catalogue sheet full-bleed and edge-free on phones; hero H1 single line */
.sus .sus-iso{height:clamp(64px,7vw,88px);opacity:1;margin-bottom:30px}
@media(max-width:800px){
.pdp-sheet .pm.pm-page{padding:0}
.pdp-sheet .pm-sheet{margin:0 calc(50% - 50vw);width:100vw;border-radius:0;box-shadow:none;border:none;background:transparent}
.pdp-sheet .pm-sheet img{width:100%;height:auto;display:block;background:transparent}
.pdp-sheet .pm-text{padding:26px 18px 0}
.pdp-sheet .pm-mobile{padding:8px 18px 0}
.pdp-sheet .pm-foot{padding-left:18px;padding-right:18px}
}
.hero.centered h1{max-width:16ch}
/* V54.1: factory photo cropped above the car park (client: no cars); aspect ratios follow the new wide crop */
.mfactory .fbuild.fphoto{aspect-ratio:2.6/1;object-position:50% 50%}
@media(max-width:900px){.mfactory .fbuild.fphoto{aspect-ratio:2.2/1}}
@media(max-width:680px){.mfactory .fbuild.fphoto{aspect-ratio:16/9;object-position:38% 50%}}
.stmt-img.stmt-photo{aspect-ratio:16/10}
.stmt-img.stmt-photo img{object-position:60% 50%}
@media(min-width:901px){.stmt-img.stmt-photo{aspect-ratio:16/10.5}}
@media(max-width:680px){.stmt-img.stmt-photo{aspect-ratio:16/10}.stmt-img.stmt-photo img{object-position:45% 50%}}
.mfactory .fbuild.fphoto{aspect-ratio:2.5/1}
.mfactory .fbuild.fphoto{aspect-ratio:2.3/1}
/* V55: News (blog). Nav: News link + Contact in the mobile drawer only */
.nav-m-only{display:none}
@media(max-width:1024px){.nav-m-only{display:list-item}}
.blog-page{background:var(--paper)}
.blog-hero{background:var(--paper);padding:calc(72px + clamp(64px,10vh,120px)) 0 clamp(32px,5vh,56px)}
.blog-hero .wrap{max-width:820px;text-align:center}
.blog-hero h1{font-family:'Outfit';font-weight:700;font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin-top:14px}
.blog-hero p{color:var(--muted);font-size:16px;line-height:1.7;max-width:56ch;margin:18px auto 0}
.blog-list.sec-pad{padding-top:clamp(24px,4vh,40px)}
.bp-card{display:grid;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(22,40,26,.08);border-radius:22px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bp-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(22,40,26,.35)}
.bp-media{aspect-ratio:16/10;overflow:hidden;background:var(--cream2)}
.bp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.bp-card:hover .bp-media img{transform:scale(1.04)}
.bp-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.bp-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.bp-meta i{width:4px;height:4px;border-radius:50%;background:var(--lime)}
.bp-card h3{font-family:'Outfit';font-weight:700;font-size:20px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.bp-card p{font-size:14.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bp-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 12px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.bp-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.bp-card:hover .bp-more svg{transform:translateX(4px)}
.bp-big{grid-template-columns:1.2fr 1fr;margin-bottom:22px}
.bp-big .bp-media{aspect-ratio:auto;min-height:380px}
.bp-big .bp-body{padding:clamp(28px,4vw,52px);justify-content:center;gap:14px}
.bp-big h3{font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em}
.bp-big p{font-size:16px;-webkit-line-clamp:4}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.bp-grid{grid-template-columns:1fr 1fr}.bp-big{grid-template-columns:1fr}.bp-big .bp-media{aspect-ratio:16/10;min-height:0}}
@media(max-width:600px){.bp-grid{grid-template-columns:1fr}.bp-body{padding:18px 18px 20px}}
/* post */
.post-head{padding:calc(72px + clamp(48px,8vh,96px)) 0 clamp(28px,4vh,44px)}
.post-head .wrap{max-width:820px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 16px}
.post-tags span{font:700 11px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:rgba(162,212,94,.18);padding:6px 11px;border-radius:100px}
.post-head h1{font-family:'Outfit';font-weight:700;font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
.post-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--muted);margin:18px 0 20px;max-width:62ch}
.post-cover{max-width:1100px}
.post-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:22px;display:block}
.post-body{max-width:760px;padding-top:clamp(36px,5vh,56px);padding-bottom:clamp(28px,4vh,44px)}
.post-body p{font-size:17px;line-height:1.75;color:var(--ink-soft,#2D3A2F);margin:0 0 20px}
.post-body h2{font-family:'Outfit';font-weight:700;font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin:40px 0 14px}
.post-body ul{margin:0 0 22px;padding-left:22px}
.post-body li{font-size:17px;line-height:1.7;color:var(--ink-soft,#2D3A2F);margin-bottom:8px}
.post-body li::marker{color:var(--lime)}
.post-body a{color:var(--green);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px}
.post-body figure{margin:30px 0}
.post-body figure img{width:100%;border-radius:18px;display:block;aspect-ratio:16/9;object-fit:cover}
.post-body figcaption{font-size:13px;color:var(--muted);margin-top:10px;padding-left:12px;border-left:2px solid var(--lime)}
.post-foot{max-width:760px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:clamp(20px,3vh,36px);border-bottom:1px solid var(--line)}
.post-share{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted)}
.post-share a{color:var(--ink);font-weight:600;text-decoration:none;border:1px solid var(--line);border-radius:100px;padding:8px 14px}
.post-share a:hover{border-color:var(--lime)}
.post-related.sec-pad{padding-top:clamp(40px,6vh,72px)}
.blog-cta{background:#0A0202;color:#fff;padding:clamp(64px,9vh,110px) 0;text-align:center}
.blog-cta h2{font-family:'Outfit';font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em}
.blog-cta h2 em{font-style:normal;color:var(--lime)}
.blog-cta p{color:rgba(255,255,255,.72);margin:14px auto 28px;max-width:48ch;font-size:16px}
.blog-404{padding-top:calc(72px + 12vh)}
.blog-page .nav{background:rgba(255,255,255,.94)}
.blog-page .nav .logo-light{opacity:0}.blog-page .nav .logo-dark{opacity:1}
.blog-page .nav .nav-company a{color:var(--ink-soft)}
.blog-page .nav .burger span{background:var(--ink)}
.blog-page .nav .nav-cta{background:var(--ink);border-color:var(--ink);color:#fff}
/* V56: client round 6 */
.village[hidden]{display:none!important}
.chob li::before{content:"";flex:0 0 14px;width:14px;height:14px;margin-top:5px;background:url("assets/brand/small-leaf-1.svg") center/contain no-repeat}
/* company: clean full render, never cropped */
.stmt-img.stmt-render2{aspect-ratio:auto;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;background:transparent}
.stmt-img.stmt-render2 img{width:100%;max-width:none;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 34px 44px rgba(22,40,26,.22));-webkit-mask-image:none;mask-image:none;margin:0}
@media(min-width:901px){.stmt-img.stmt-render2 img{width:112%;margin-left:-4%}}
/* manufacturing dark block: no dead air under the cert line on phones */
@media(max-width:680px){.mfg3.sec-pad{padding-bottom:36px}.mfg3 .mline{margin-top:26px;gap:16px}.mfg3 .mline .fcap{margin-top:0}}
/* product subpages: our own headline above the catalogue sheet (sheet titles cropped off) */
.pdp-h1{font-family:'Outfit';font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:clamp(6px,1vh,14px) 0 clamp(18px,2.6vh,30px)}
@media(max-width:800px){.pdp-h1{padding:0 18px;margin:16px 0 14px;font-size:30px}}
/* V56.1: new MyFrida section, candy style (flat pink, torn edges, script watermark, floating cutouts, flavour pills) */
.mf-candy{position:relative;background:#F062A4;color:#fff;overflow:hidden;padding:clamp(96px,14vh,170px) 0 clamp(110px,15vh,180px)}
.mf-candy::before,.mf-candy::after{content:"";position:absolute;left:0;right:0;height:26px;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;z-index:3}
.mf-candy::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0.0 3.4 L2.58 4.46 L5.27 6.51 L6.98 1.61 L10.09 3.57 L12.11 9.47 L14.56 8.19 L17.02 6.61 L18.89 6.58 L22.05 5.69 L24.99 6.87 L26.7 7.57 L29.36 3.91 L31.02 8.42 L33.47 7.25 L36.65 7.21 L39.91 4.66 L42.95 5.06 L46.24 8.53 L48.01 2.59 L50.0 9.22 L52.39 6.51 L54.53 5.56 L56.82 4.31 L59.48 6.17 L62.71 6.96 L65.98 8.35 L69.36 6.87 L71.25 8.39 L74.59 8.74 L77.22 7.21 L79.2 8.15 L81.83 3.78 L83.54 8.33 L86.92 2.21 L89.96 4.78 L91.84 3.85 L94.82 8.48 L96.5 6.42 L98.18 7.25 L100 8.547242457978864 L100 0 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
.mf-candy::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0.0 0.6500000000000004 L2.51 0.5099999999999998 L4.67 7.88 L7.35 8.25 L9.3 5.24 L12.0 7.25 L13.68 1.5600000000000005 L15.84 0.8300000000000001 L19.06 5.48 L21.48 4.34 L24.24 3.7300000000000004 L26.85 3.54 L30.14 4.44 L32.52 2.74 L34.55 6.09 L37.91 4.33 L40.49 8.41 L42.84 3.8600000000000003 L44.48 3.5700000000000003 L47.22 8.02 L49.95 4.77 L52.77 5.68 L55.64 2.5999999999999996 L57.28 8.02 L60.1 0.7899999999999991 L62.15 4.85 L64.82 5.94 L67.07 6.0 L69.34 3.74 L71.48 5.48 L74.47 8.28 L77.09 2.62 L79.25 6.720000000000001 L82.3 6.59 L84.23 5.02 L87.09 7.6899999999999995 L89.27 5.83 L92.37 4.99 L95.51 7.15 L97.72 3.3 L100 4.89118252571822 L100 10 Z' fill='%23241812'/%3E%3C/svg%3E")}
.mfc-my{position:absolute;right:-2%;top:50%;transform:translateY(-54%) rotate(-9deg);font-family:'Caveat',cursive;font-weight:600;font-size:clamp(240px,36vw,620px);line-height:1;color:rgba(255,255,255,.16);pointer-events:none;user-select:none;z-index:0}
.mfc-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.mf-candy .mf-logo{width:clamp(150px,14vw,200px);height:auto;display:block;margin-bottom:26px}
.mf-candy .eyebrow{color:#fff;opacity:.88}
.mf-candy h2{color:#fff;margin-top:14px;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.02em}
.mf-candy h2 .dot{color:#F5C518}
.mfc-script{display:block;font-family:'Caveat',cursive;font-weight:600;font-size:1.28em;color:#F5C518;line-height:1;margin-top:4px;letter-spacing:0}
.mf-candy p{color:rgba(255,255,255,.92);font-size:16px;line-height:1.7;margin-top:20px;max-width:50ch}
.mfc-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.mfc-pill{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:100px;padding:6px 16px 6px 6px;box-shadow:0 10px 24px -14px rgba(60,0,30,.45)}
.mfc-pill i{width:38px;height:38px;border-radius:50%;background:#FDE6F0;display:grid;place-items:center;overflow:hidden;flex:none}
.mfc-pill i img{width:30px;height:30px;object-fit:contain;display:block}
.mfc-pill i.ph img{width:100%;height:100%;object-fit:cover}
.mfc-pill b{font:700 13.5px 'Outfit';line-height:1.1;display:block}
.mfc-pill small{display:block;font-size:11px;color:var(--muted);line-height:1.2;margin-top:2px}
.mf-candy .mf-cta{margin-top:clamp(28px,4vh,40px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mfc-btn.btn{background:#020A0A;color:#fff;border:1.5px solid #020A0A}
.mfc-btn.btn:hover{background:#fff;color:#020A0A}
.mf-candy .mf2-link{color:#fff}.mf-candy .mf2-link:hover{color:#F5C518}
.mfc-visual{position:relative;min-height:440px}
.mfc-visual img{position:absolute;display:block;filter:drop-shadow(0 30px 34px rgba(70,0,35,.35))}
.mfc-tubs{left:2%;top:50%;width:92%;transform:translateY(-52%) rotate(-5deg);animation:mfcFloat 7s ease-in-out infinite}
.mfc-bag{right:-4%;top:-6%;width:44%;transform:rotate(9deg);animation:mfcFloat 8s ease-in-out infinite reverse}
.mfc-bar{left:-6%;bottom:-2%;width:52%;transform:rotate(-14deg);animation:mfcFloat 9s ease-in-out infinite 1.2s}
@keyframes mfcFloat{0%,100%{margin-top:0}50%{margin-top:-10px}}
@media(prefers-reduced-motion:reduce){.mfc-visual img{animation:none}}
@media(max-width:900px){.mfc-grid{grid-template-columns:1fr;gap:28px}.mfc-visual{order:-1;min-height:0;height:min(72vw,360px);margin:0 6%}.mfc-tubs{width:88%;left:6%}.mfc-bag{width:40%;right:-2%;top:-4%}.mfc-bar{width:48%;left:-4%;bottom:0}.mfc-my{font-size:66vw;right:-10%;top:24%;transform:rotate(-9deg)}.mf-candy{padding:clamp(72px,10vh,110px) 0 clamp(84px,11vh,120px)}}
@media(max-width:680px){.mf-candy .mf-logo{width:150px}.mf-candy h2{font-size:32px}.mfc-pill b{font-size:13px}.mfc-pill{padding:5px 13px 5px 5px}.mfc-pill i{width:34px;height:34px}}
/* V56.2: ten awards. Desktop: homepage one row, brands 5x2; phones 5+5 */
.aw-logos{grid-template-columns:repeat(5,1fr);gap:24px 18px}
.aw-logos img{height:clamp(52px,5vw,72px)}
@media(max-width:900px){.aw-logos{grid-template-columns:repeat(5,1fr);gap:16px 10px}.aw-logos img{height:48px}}
@media(max-width:680px){.bb-awards,.aw-logos{grid-template-columns:repeat(5,1fr);gap:14px 8px}.bb-awards img,.aw-logos img{height:38px}.bb-awards img[alt="Sweetie award"],.aw-logos img[alt="Sweetie award"]{height:38px}.bb-awards img[alt="Academy of Chocolate"],.aw-logos img[alt="Academy of Chocolate"]{height:44px}}
.journey.nt .j6 .jinner img{object-position:50% 78%}
.journey.nt .j4 .jinner img{object-position:50% 50%}
/* V56.3: the factory render dissolves into its background on both pages (no hard cut edge) */
.stmt-img.stmt-render2 img{-webkit-mask-image:radial-gradient(ellipse 66% 72% at 54% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 98%);mask-image:radial-gradient(ellipse 66% 72% at 54% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 98%);filter:none}
.mfactory .fbuild.frender{width:100%;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;margin:0;display:block;filter:none;-webkit-mask-image:radial-gradient(ellipse 66% 72% at 54% 50%,#000 50%,rgba(0,0,0,.55) 72%,transparent 98%);mask-image:radial-gradient(ellipse 66% 72% at 54% 50%,#000 50%,rgba(0,0,0,.55) 72%,transparent 98%)}
@media(min-width:901px){.mfactory .fbuild.frender{width:104%;margin-left:-2%}}
@media(max-width:680px){.mfactory .fbuild.frender{width:116%;margin-left:-8%}.stmt-img.stmt-render2 img{width:112%;margin-left:-6%}}
/* V57: MyFrida in black + purple (reference palette), purple band with the range pills */
.mf-noir{background:#050708;padding-bottom:0}
.mf-noir::after{display:none}
.mf-noir .mfc-grid{padding-bottom:clamp(40px,6vh,72px)}
.mf-noir .mfc-my{color:rgba(143,91,167,.22)}
.mf-noir .mfc-visual::before{content:"";position:absolute;inset:-12% -8%;background:radial-gradient(ellipse 60% 55% at 55% 50%,rgba(143,91,167,.55) 0%,rgba(143,91,167,.18) 45%,transparent 72%);z-index:0;pointer-events:none}
.mf-noir .mfc-visual img{z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.mf-noir .eyebrow{color:#B07CC9;opacity:1}
.mf-noir h2{color:#fff}
.mf-noir h2 .dot{color:#B07CC9}
.mf-noir .mfc-script{color:#B07CC9}
.mf-noir p{color:rgba(255,255,255,.8)}
.mf-noir .mfc-btn.btn{background:#fff;color:#050708;border-color:#fff}
.mf-noir .mfc-btn.btn:hover{background:#8F5BA7;color:#fff;border-color:#8F5BA7}
.mf-noir .mf2-link{color:rgba(255,255,255,.85)}.mf-noir .mf2-link:hover{color:#B07CC9}
.mfc-band{position:relative;background:#8F5BA7;padding:clamp(44px,6vh,64px) 0 clamp(64px,9vh,96px);margin-top:26px;z-index:1}
.mfc-band::before,.mfc-band::after{content:"";position:absolute;left:0;right:0;height:26px;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.mfc-band::before{top:-25px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0.0 4.88 L2.61 1.1099999999999994 L5.05 4.44 L7.7 7.02 L10.22 3.46 L13.25 7.75 L15.4 7.77 L18.46 2.95 L20.13 0.6400000000000006 L23.47 3.2699999999999996 L26.18 7.24 L27.8 4.27 L29.51 6.98 L31.54 8.26 L33.98 4.98 L37.1 4.35 L39.85 4.5 L42.64 4.84 L44.74 0.5199999999999996 L48.13 1.7799999999999994 L51.01 5.98 L53.02 6.1899999999999995 L54.75 2.37 L57.07 1.7300000000000004 L59.36 0.8399999999999999 L62.49 8.5 L64.47 1.2200000000000006 L66.91 0.6600000000000001 L69.23 7.92 L71.96 2.2699999999999996 L74.05 7.8 L76.25 0.7899999999999991 L79.21 7.5600000000000005 L81.25 7.6899999999999995 L82.96 2.12 L84.88 4.03 L87.29 6.970000000000001 L90.2 7.45 L92.96 7.57 L95.32 6.8 L97.41 0.7300000000000004 L100 6.066838801032084 L100 10 Z' fill='%238F5BA7'/%3E%3C/svg%3E")}
.mfc-band::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0.0 1.42 L1.98 5.35 L5.12 3.37 L6.9 0.5899999999999999 L8.88 6.43 L11.87 5.87 L14.01 7.91 L15.77 3.84 L17.81 3.6900000000000004 L20.07 4.87 L23.4 4.63 L26.04 1.5700000000000003 L27.96 7.27 L31.2 1.9600000000000009 L33.25 6.98 L36.18 0.9800000000000004 L38.13 0.9000000000000004 L41.32 3.67 L43.68 7.67 L45.35 0.8000000000000007 L47.38 2.8600000000000003 L49.44 1.9100000000000001 L52.11 6.15 L54.03 2.74 L55.75 6.67 L58.36 1.6799999999999997 L61.07 6.26 L64.32 6.87 L65.95 6.35 L68.35 8.02 L70.27 5.55 L72.9 7.45 L75.15 1.3699999999999992 L78.51 3.24 L81.36 3.8200000000000003 L83.21 8.22 L84.84 1.2200000000000006 L87.71 0.8000000000000007 L89.34 3.41 L91.81 2.66 L93.99 0.5099999999999998 L95.72 4.13 L98.65 1.3000000000000007 L100 2.8704750460657813 L100 10 Z' fill='%23241812'/%3E%3C/svg%3E")}
.mfc-band .mfc-pills{margin:0;justify-content:center;gap:12px}
.mfc-band .mfc-pill{background:#050708;color:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.mfc-band .mfc-pill i{background:#1B1220}
.mfc-band .mfc-pill small{color:rgba(255,255,255,.62)}
@media(max-width:900px){.mf-noir .mfc-grid{padding-bottom:28px}.mfc-band{padding:38px 0 64px}.mfc-band .mfc-pills{justify-content:flex-start}}
@media(max-width:680px){.mfc-band .mfc-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mfc-band .mfc-pill{padding:6px 10px 6px 6px;gap:8px}.mfc-band .mfc-pill b{font-size:12.5px}.mfc-band .mfc-pill small{font-size:10.5px}.mfc-band .mfc-pill i{width:32px;height:32px}}
/* V57.1: product sheets. Tap/click opens a pinch-zoom lightbox; on phones the option lists render as chips */
.pm-zoom{display:block;width:100%;border:0;padding:0;margin:0;background:none;cursor:zoom-in;line-height:0}
.pm-zoom img{width:100%;height:auto;display:block}
.pm-zoom-hint{display:none;align-items:center;justify-content:center;gap:8px;font:600 12.5px 'Inter';letter-spacing:.02em;color:var(--muted);padding:12px 0 2px}
.pm-zoom-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){.pm-zoom-hint{display:flex}}
.lb{position:fixed;inset:0;z-index:3000;background:rgba(5,7,8,.97);display:none;overflow:hidden;touch-action:none;overscroll-behavior:contain}
.lb.open{display:block}
.lb img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform;user-select:none;-webkit-user-drag:none;pointer-events:none;background:#fff}
.lb-ui{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;z-index:2;pointer-events:none}
.lb-ui>*{pointer-events:auto}
.lb-ui span{font:600 12.5px 'Inter';letter-spacing:.04em;color:rgba(255,255,255,.7)}
.lb-btns{display:flex;gap:8px}
.lb-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.lb-lock{overflow:hidden}
@media(max-width:800px){
.pdp-sheet .pm-mobile .pm-lists{display:grid;gap:22px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.pdp-sheet .pm-mobile .pm-list h4{font:700 12px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.pdp-sheet .pm-mobile .pm-list ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pdp-sheet .pm-mobile .pm-list li{position:static;display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 9px;border-radius:100px;background:#fff;border:1px solid rgba(22,40,26,.12);font-size:13.5px;line-height:1.3;color:var(--ink)}
.pdp-sheet .pm-mobile .pm-list li::before{content:"";position:static;flex:none;width:16px;height:16px;border-radius:50%;background:var(--lime);top:auto;left:auto;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media(max-width:800px){.pdp-sheet .pm-mobile .pm-list ul{flex-direction:row}.pdp-sheet .pm-mobile .pm-list li{width:auto}}
/* V57.2: smooth wave transitions instead of torn edges; sheets feathered into the page */
.mf-candy::before{top:-1px;height:54px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 3.5 C88 8.5 72 9.6 56 7.2 C40 4.8 24 3.2 0 7.8 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
.mfc-band::before{top:-53px;height:54px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L100 10 L100 6.2 C84 1.4 66 0.6 50 3.4 C34 6.2 18 8.6 0 4.6 Z' fill='%238F5BA7'/%3E%3C/svg%3E")}
.mfc-band::after{bottom:-1px;height:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L100 10 L100 5.8 C82 9.4 62 9.8 44 6.6 C28 3.8 14 3.2 0 6.4 Z' fill='%23241812'/%3E%3C/svg%3E")}
.mfc-band{margin-top:54px}
@media(max-width:680px){.mf-candy::before{height:30px}.mfc-band::before{top:-29px;height:30px}.mfc-band::after{height:26px}.mfc-band{margin-top:30px}}
.mfc-visual .mfc-bag{right:0;top:-2%;width:46%}
.mfc-visual .mfc-tubs{left:0;width:88%}
.pdp-sheet .pm-sheet img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-composite:intersect}
@media(max-width:800px){.pdp-sheet .pm-sheet img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}}
.pdp-sheet .pm.pm-page{padding-top:clamp(12px,2vw,28px)}
/* V57.3: MyFrida mostly purple, black for accents and the range band, band melts into the cocoa Africa section */
.mf-purple{background:#8F5BA7}
.mf-purple .mfc-my{color:rgba(255,255,255,.13)}
.mf-purple .mfc-visual::before{background:radial-gradient(ellipse 60% 55% at 55% 52%,rgba(20,6,28,.55) 0%,rgba(20,6,28,.22) 45%,transparent 72%)}
.mf-purple .mfc-visual img{filter:drop-shadow(0 30px 40px rgba(20,6,28,.55))}
.mf-purple .eyebrow{color:#F3E4FA}
.mf-purple h2{color:#fff}
.mf-purple h2 .dot{color:#0A0708}
.mf-purple .mfc-script{color:#0A0708}
.mf-purple p{color:rgba(255,255,255,.9)}
.mf-purple .mfc-btn.btn{background:#0A0708;color:#fff;border-color:#0A0708}
.mf-purple .mfc-btn.btn:hover{background:#fff;color:#0A0708;border-color:#fff}
.mf-purple .mf2-link{color:#fff}.mf-purple .mf2-link:hover{color:#0A0708}
.mf-purple .mfc-band{background:linear-gradient(180deg,#0A0708 0%,#0C0809 48%,#241812 100%);padding-bottom:clamp(72px,10vh,110px)}
.mf-purple .mfc-band::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L100 10 L100 6.2 C84 1.4 66 0.6 50 3.4 C34 6.2 18 8.6 0 4.6 Z' fill='%230A0708'/%3E%3C/svg%3E")}
.mf-purple .mfc-band::after{display:none}
.mf-purple .mfc-band .mfc-pill{background:rgba(143,91,167,.22);border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:none}
.mf-purple .mfc-band .mfc-pill i{background:#1B1220}
.mf-purple .mfc-band .mfc-pill small{color:rgba(255,255,255,.66)}
/* V57.4: MyFrida logo pinned to the section's left corner on desktop; pill band purple with a straight edge into Africa; lighter sheet feathering */
@media(min-width:901px){
.mf-purple{padding-top:clamp(120px,16vh,190px)}
.mf-purple .mf-logo{position:absolute;left:clamp(28px,4vw,72px);top:clamp(30px,4.5vh,54px);margin:0;z-index:2;width:clamp(150px,12vw,190px)}
}
.mf-purple .mfc-band{background:#8F5BA7;margin-top:0;padding:clamp(8px,1.5vh,16px) 0 clamp(72px,10vh,110px)}
.mf-purple .mfc-band::before{display:none}
.mf-purple .mfc-band .mfc-pill{background:#0A0708;border:1px solid rgba(255,255,255,.06);color:#fff;box-shadow:0 14px 30px -16px rgba(20,6,28,.7)}
.mf-purple .mfc-band .mfc-pill i{background:#1B1220}
.mf-purple .mfc-grid{padding-bottom:clamp(28px,4vh,44px)}
@media(max-width:900px){.mf-purple .mfc-band{padding:6px 0 64px}}
.pdp-sheet .pm-sheet img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%)}
@media(max-width:800px){.pdp-sheet .pm-sheet img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%)}}
/* V57.5: MyFrida logo lives in the section corner (all widths) */
.mf-purple .mf-logo-corner{position:absolute;left:clamp(20px,4vw,72px);top:clamp(26px,4.5vh,54px);margin:0;z-index:2;width:clamp(120px,12vw,190px);height:auto}
@media(max-width:900px){.mf-purple{padding-top:clamp(96px,14vh,130px)}.mf-purple .mf-logo-corner{width:120px;left:20px;top:26px}}
/* V57.6: sharper MyFrida cutouts re-extracted from the presentation at 8400px: tub trio, pouch stack, two bars */
.mf-purple .mfc-visual{min-height:480px}
.mf-purple .mfc-tubs{left:0;bottom:0;top:auto;width:100%;transform:none;animation:mfcFloat 8s ease-in-out infinite}
.mf-purple .mfc-bag{right:-2%;top:-4%;width:38%;transform:rotate(7deg)}
.mf-purple .mfc-bars2{position:absolute;left:0;top:6%;width:50%;transform:rotate(-8deg);animation:mfcFloat 9s ease-in-out infinite .8s}
@media(max-width:900px){.mf-purple .mfc-visual{height:min(78vw,400px);margin:0 4%}.mf-purple .mfc-tubs{width:100%}.mf-purple .mfc-bag{width:36%;right:0;top:0}.mf-purple .mfc-bars2{width:48%;left:0;top:8%}}
.mf-purple .mf-logo-corner{top:calc(clamp(30px,4.5vh,54px) + 46px)}
@media(min-width:901px){.mf-purple{padding-top:clamp(150px,19vh,220px)}}
@media(max-width:900px){.mf-purple{padding-top:128px}.mf-purple .mf-logo-corner{top:58px;width:118px}}
/* V57.7: no dark halo behind the MyFrida products; cutouts fully transparent on the purple; tighter mobile stack */
.mf-purple .mfc-visual::before{display:none}
.mf-purple .mfc-visual img{filter:drop-shadow(0 22px 28px rgba(60,20,80,.28))}
@media(max-width:900px){.mf-purple .mfc-visual{height:min(84vw,330px);margin:0 4%}.mf-purple .mfc-bars2{top:0;width:50%}.mf-purple .mfc-bag{top:0;width:36%}.mf-purple .mfc-tubs{bottom:0}}
@media(max-width:900px){.mf-purple .mfc-visual{height:min(68vw,270px)}}
/* V57.8: MyFrida logo replaces the "My Frida." headline; corner logo removed; mobile visual is a tight grid */
.mf-purple .mf-h-logo{display:block;width:clamp(200px,20vw,300px);height:auto;margin:0 0 6px}
.mf-purple .mfc-script{font-size:clamp(34px,3.4vw,52px);margin-top:2px}
@media(min-width:901px){.mf-purple{padding-top:clamp(96px,14vh,170px)}}
@media(max-width:900px){
.mf-purple{padding-top:clamp(72px,10vh,110px)}
.mf-purple .mfc-visual{height:auto;min-height:0;display:grid;grid-template-columns:1.15fr .85fr;gap:8px 14px;align-items:center;margin:0 2%}
.mf-purple .mfc-visual img{position:static;transform:none;animation:none;width:100%;height:auto}
.mf-purple .mfc-bars2{width:100%;transform:rotate(-6deg)}
.mf-purple .mfc-bag{width:78%;justify-self:end;transform:rotate(6deg)}
.mf-purple .mfc-tubs{grid-column:1/-1;width:96%;justify-self:center;margin-top:-6px}
.mf-purple .mf-h-logo{width:200px}
.mf-purple .mfc-script{font-size:34px}
}
/* V57.9: softer shadows; phone product grid breathes */
.mf-purple .mfc-visual img{filter:drop-shadow(0 14px 18px rgba(50,15,70,.16))}
@media(max-width:900px){
.mf-purple .mfc-visual{gap:22px 20px;margin:6px 6% 10px}
.mf-purple .mfc-bars2{width:88%;justify-self:start}
.mf-purple .mfc-bag{width:70%}
.mf-purple .mfc-tubs{width:88%;margin-top:6px}
.mf-purple .mfc-grid{gap:34px}
}
/* V58: product sheets 06 + 07 are true cutouts (transparent background, cut-off objects removed), no edge feather needed; new aerial photo on manufacturing + company */
.pdp-sheet .pm-sheet.pm-cut img{-webkit-mask-image:none!important;mask-image:none!important}
@media(max-width:800px){.pdp-sheet .pm-sheet.pm-cut{margin:0;width:auto}.pdp-sheet .pm-sheet.pm-cut img{width:100%}}
.mfactory .fbuild.fphoto{object-position:50% 58%}
@media(max-width:680px){.mfactory .fbuild.fphoto{object-position:50% 55%}}
.stmt-img.stmt-photo img{object-position:50% 55%}
@media(max-width:680px){.stmt-img.stmt-photo img{object-position:50% 55%}}
/* V59: footer mega wordmark toned to the legal-text grey; map tooltip is country-only (JS) */
.f2-mega img{opacity:.5}
/* V60: packaging formats as white cards with the new mockups (white backgrounds read as transparent), desktop grid + phone slider */
.pd2-pack{background:#F6F4EF}
.pk-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,5vh,52px)}
.pk-card{margin:0;background:#fff;border:1px solid rgba(22,40,26,.06);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 36px -28px rgba(22,40,26,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pk-card:hover{transform:translateY(-4px);box-shadow:0 26px 48px -28px rgba(22,40,26,.28)}
.pk-cimg{aspect-ratio:1/1;background:#fff;padding:7%;display:flex;align-items:center;justify-content:center}
.pk-cimg img{width:100%;height:100%;object-fit:contain;display:block}
.pk-card figcaption{padding:0 20px 22px}
.pk-card b{display:block;font-family:'Outfit';font-weight:700;font-size:17px;color:var(--ink);line-height:1.2}
.pk-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:5px}
@media(max-width:1080px){.pk-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.pk-cards{display:none}.pk-simg{background:#fff;padding:5%}.pk-simg img{filter:none}.pk-slide{border-color:rgba(22,40,26,.06)}}
/* V61: MyFrida section pink (#F062A4, matched to the brand's own Choco Fruits section) instead of purple; everything else unchanged */
.mf-purple,.mf-purple .mfc-band{background:#F062A4}
.mf-noir .mfc-btn.btn:hover{background:#F062A4;border-color:#F062A4;color:#fff}
.mf-purple .mfc-visual img{filter:drop-shadow(0 14px 18px rgba(120,20,70,.18))}
/* V62: sheets 01 + 02 are cutouts too (see V58) */
/* V63: blog list built for volume: search, category pills, featured + grid, pagination */
.blog-hero{padding-bottom:clamp(20px,3vh,32px)}
.bf-search{display:flex;align-items:center;gap:10px;max-width:560px;margin:30px auto 0;background:#fff;border:1px solid rgba(22,40,26,.12);border-radius:100px;padding:6px 6px 6px 18px;transition:border-color .25s,box-shadow .25s}
.bf-search:focus-within{border-color:var(--lime);box-shadow:0 0 0 4px rgba(162,212,94,.22)}
.bf-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.bf-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:15px 'Inter';color:var(--ink);padding:8px 0}
.bf-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.bf-search button{border:0;border-radius:100px;background:var(--ink);color:#fff;font:600 13.5px 'Inter';padding:10px 18px;cursor:pointer;transition:background .25s}
.bf-search button:hover{background:var(--green)}
.bf-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.bf-pill{text-decoration:none;font:600 13px 'Inter';color:var(--ink);background:#fff;border:1px solid rgba(22,40,26,.12);border-radius:100px;padding:8px 15px;transition:border-color .2s,background .2s,color .2s}
.bf-pill:hover{border-color:var(--lime)}
.bf-pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bf-status{font-size:14.5px;color:var(--muted);margin:0 0 20px}
.bf-status a{color:var(--green);font-weight:600;text-decoration:none;margin-left:6px}
.bp-cat{color:var(--green);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.post-cat{text-decoration:none;font:700 11px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);padding:6px 11px;border-radius:100px}
.pg{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:clamp(34px,5vh,52px);flex-wrap:wrap}
.pg-nums{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pg-btn{text-decoration:none;font:600 13.5px 'Inter';color:var(--ink);background:#fff;border:1px solid rgba(22,40,26,.12);border-radius:100px;min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;transition:border-color .2s}
.pg-btn:hover{border-color:var(--lime)}
.pg-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-btn.off{opacity:.4;pointer-events:none}
.pg-gap{color:var(--muted);padding:0 4px}
.blog-list .bp-grid:empty{display:none}
@media(max-width:600px){.bf-search{margin-top:24px;padding-left:14px}.bf-search button{padding:9px 14px}.bf-cats{gap:6px}.bf-pill{font-size:12.5px;padding:7px 12px}.pg{justify-content:center}.pg-prev,.pg-next{order:2}}
.bp-cat{display:block;margin-bottom:-4px}
.bp-big .bp-media{position:relative;aspect-ratio:auto;min-height:380px;max-height:none}
.bp-big .bp-media img{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:901px){.bp-big{min-height:400px}.bp-big .bp-body{min-height:400px}}
@media(max-width:900px){.bp-big .bp-media{position:relative;aspect-ratio:16/10;min-height:0}.bp-big .bp-media img{position:absolute}}
/* V64: footer legal links, legal pages, 404, cookie consent */
.f2-links{display:inline-flex;gap:14px;margin:0 16px 0 14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.f2-links a{color:rgba(255,255,255,.55);text-decoration:none;font-size:13px}
.f2-links a:hover{color:#fff}
@media(max-width:680px){.f2-links{display:flex;flex-wrap:wrap;gap:10px 14px;margin:10px 0 0;padding:0;border:0}}
.legal{padding:calc(72px + clamp(40px,7vh,80px)) 0 clamp(48px,7vh,90px)}
.legal .wrap{max-width:760px}
.legal h1{font-family:'Outfit';font-weight:700;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin-top:22px}
.legal .post-lead{margin:14px 0 8px}
.legal-updated{font-size:13px;color:var(--muted);margin:0 0 6px}
.legal-body{padding-left:0;padding-right:0}
.legal-body h2{margin-top:36px}
.legal-body h3{font-family:'Outfit';font-weight:700;font-size:18px;color:var(--ink);margin:22px 0 8px}
.legal-body p,.legal-body li{font-size:16px}
.nf{min-height:calc(100vh - 72px);display:flex;align-items:center;padding:calc(72px + 40px) 0 80px;text-align:center}
.nf .wrap{max-width:680px}
.nf h1{font-family:'Outfit';font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin-top:16px}
.nf p{color:var(--muted);font-size:17px;margin:18px auto 0;max-width:46ch}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.nf .btn-ghost{background:#fff;border:1.5px solid rgba(22,40,26,.14);color:var(--ink)}
.nf .btn-ghost:hover{border-color:var(--lime)}
.ck{position:fixed;left:18px;right:18px;bottom:18px;z-index:2500;display:flex;justify-content:center;pointer-events:none}
.ck-box{pointer-events:auto;background:#0F1A12;color:#fff;border-radius:20px;padding:18px 20px;max-width:640px;width:100%;display:flex;gap:18px;align-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);transform:translateY(20px);opacity:0;animation:ckIn .5s var(--ease) forwards}
@keyframes ckIn{to{transform:none;opacity:1}}
.ck-box p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.8);margin:0;flex:1}
.ck-box p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck-btns{display:flex;gap:8px;flex:none}
.ck-btns button{border:0;border-radius:100px;padding:10px 16px;font:600 13.5px 'Inter';cursor:pointer;white-space:nowrap}
.ck-yes{background:var(--lime);color:var(--ink)}.ck-no{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)!important}
@media(max-width:680px){.ck{left:10px;right:10px;bottom:10px}.ck-box{flex-direction:column;align-items:stretch;padding:16px}.ck-btns{width:100%}.ck-btns button{flex:1}}
/* V65: footer credit in the same weight as its label; ISO 9001 removed from the certification grids; manufacturing shows the transparent factory render again */
.f2-by a{font-weight:inherit;color:rgba(255,255,255,.45)}
.f2-by a:hover{color:var(--lime)}
/* V66: anchor targets clear the fixed nav */
section[id],div[id],main[id],article[id],footer[id]{scroll-margin-top:108px}
/* V67: hero eyebrow line + admin-editable hero */
.hero-eyebrow{font:700 12px 'Inter';letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 16px}
.hero h1 .hl-g{color:var(--lime)}
@media(max-width:680px){.hero-eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:12px}}
/* V68: MyFrida back to the key-visual layout, in the current pink (#F062A4); key visual retinted to match */
.mf-pink,.mf-pink{background:#F062A4}
.mf-pink::before{background:linear-gradient(90deg,#F062A4 0%,#F062A4 34%,rgba(240,98,164,0) 58%)}
.mf-pink .btn-primary{background:#0A0202;color:#fff}
.mf-pink .btn-primary:hover{background:#fff!important;color:#0A0202!important;border-color:#fff!important}
.mf-pink h2 .dot{color:#0A0202}
.mf-pink-facts li::before{background:#0A0202}
.mf-pink .mf2-link:hover{color:#0A0202}
@media(max-width:900px){.mf-pink{background:#F062A4}.mf-pink::before{display:none}}