/* MRG Nuts website prototype, draft 2. Concept 1 "Colour of every nut". */
@font-face{font-family:Montserrat;font-weight:300;font-display:swap;src:url(../fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:900;font-display:swap;src:url(../fonts/montserrat-latin-900-normal.woff2) format('woff2')}

:root{
  --forest:#1E2F27; --forest-2:#283C32; --gold:#C49A54; --cream:#F4EEE3; --beige:#F2EFE9; --sand:#EAE2D3;
  --ink:#1E2F27; --ink2:#4A5A51; --line:rgba(30,47,39,.16);
  --pad:clamp(16.2px,3.6vw,50.4px); --max:1188px; --hd:75.6px;
  --r-xl:28.8px; --r-lg:23.4px; --r-md:16.2px; --r-sm:10.8px;
  --focus:#1E2F27;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:86.4px}
body{font-family:Montserrat,system-ui,sans-serif;font-weight:500;font-size:14.4px;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:5.4px}
.dark,.field-dark{--focus:#F4EEE3}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:10.8px;top:-54px;z-index:200;background:var(--forest);color:var(--cream);padding:9px 14.4px;border-radius:9px;font-weight:700}
.skip:focus{top:10.8px}

/* ---------- type ---------- */
.h-display{font-weight:800;font-size:clamp(41.4px,6.66vw,106.2px);letter-spacing:-.045em;line-height:.92}
.h-sec{font-weight:800;font-size:clamp(32.4px,4.68vw,75.6px);letter-spacing:-.04em;line-height:.96}
.h-mid{font-weight:800;font-size:clamp(25.2px,2.88vw,43.2px);letter-spacing:-.03em;line-height:1.02}
.h-sm{font-weight:800;font-size:clamp(18px,1.53vw,23.4px);letter-spacing:-.02em;line-height:1.15}
.lede{font-weight:400;font-size:clamp(16.2px,1.44vw,20.7px);line-height:1.45;max-width:34em}
.light{font-weight:300}
.muted{color:var(--ink2)}
.small{font-size:12.6px;line-height:1.55}
.tiny{font-size:11.25px;line-height:1.5}
p+p{margin-top:.8em}
.num{font-variant-numeric:tabular-nums}
.link{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:3px}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto}
.sec{padding:clamp(64.8px,8.1vw,126px) var(--pad)}
.sec.tight{padding-top:clamp(43.2px,5.4vw,81px);padding-bottom:clamp(43.2px,5.4vw,81px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:21.6px 43.2px;flex-wrap:wrap;margin-bottom:clamp(27px,3.6vw,54px)}
.sec-head .lede{max-width:28em}
.dark{background:var(--forest);color:var(--cream)}
.dark .muted{color:rgba(244,238,227,.78)}
.sand{background:var(--sand)}
.beige{background:var(--beige)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25.2px,4.5vw,72px);align-items:center}
.stack>*+*{margin-top:16.2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43.2px;padding:11.7px 23.4px;border-radius:899.1px;font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:16.2px;height:16.2px;flex:none}
.btn-g{background:var(--forest);color:var(--cream)}
.btn-o{box-shadow:inset 0 0 0 2px var(--forest);color:var(--forest);background:transparent}
.btn-c{background:var(--cream);color:var(--forest)}
.btn-oc{box-shadow:inset 0 0 0 2px var(--cream);color:var(--cream);background:transparent}
.btn-f{background:var(--fg);color:var(--bg)}
.btn-fo{box-shadow:inset 0 0 0 2px var(--fg);color:var(--fg);background:transparent}
.cta{display:flex;gap:10.8px;flex-wrap:wrap}
.txt-link{display:inline-flex;align-items:center;gap:7.2px;font-weight:700;border-bottom:2px solid currentColor;padding-bottom:3px}
.txt-link:hover{gap:10.8px}
.txt-link svg{width:14.4px;height:14.4px;transition:transform .3s var(--ease)}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hd);display:flex;align-items:center;gap:25.2px;padding:0 var(--pad);
  --hd-fg:var(--forest);--hd-bg:var(--cream);color:var(--hd-fg);transition:color .5s ease,background .4s ease,height .35s ease,box-shadow .4s}
.hd.solid{--hd-fg:var(--forest);--hd-bg:var(--cream);height:61.2px;background:rgba(244,238,227,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body.hd-over .hd:not(.solid){--hd-fg:var(--over-fg);--hd-bg:var(--over-bg)}
.hd .logo{display:block;height:54px;flex:none;transition:height .35s ease}
.hd.solid .logo{height:43.2px}
.hd .logo svg{height:100%;width:auto}
.hd nav{display:flex;align-items:center;gap:clamp(14.4px,1.98vw,30.6px);font-size:13.05px;font-weight:600;margin-left:auto}
.hd nav .lk{position:relative;padding:7.2px 0}
.hd nav .lk::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.hd nav .lk:hover::after,.hd nav .lk[aria-current=page]::after{transform:scaleX(1)}
.hd-act{display:flex;align-items:center;gap:10.8px}
.hd .hb{background:var(--hd-fg);color:var(--hd-bg);min-height:39.6px;padding:9px 18px;font-size:12.6px}
.wa-ic{width:39.6px;height:39.6px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor}
.wa-ic svg{width:19.8px;height:19.8px}
.burger{display:none;width:41.4px;height:41.4px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;align-items:center;justify-content:center;cursor:pointer}
.burger i{display:block;width:16.2px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
/* products dropdown */
.dd{position:relative;display:flex;align-items:center;gap:2px}
.dd-t{border:0;background:transparent;width:25.2px;height:28.8px;display:grid;place-items:center;cursor:pointer;border-radius:7.2px}
.dd-t svg{width:10.8px;height:10.8px;transition:transform .3s}
.dd.open .dd-t svg{transform:rotate(180deg)}
.mega{position:absolute;left:50%;top:calc(100% + 12.6px);transform:translate(-36%,8px);width:min(684px,77.4vw);background:var(--cream);color:var(--forest);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(20,32,26,.35),0 0 0 1px var(--line);padding:16.2px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s;--focus:#1E2F27}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14.4px;height:14.4px}
.dd.open .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-36%,0);transition:opacity .25s,transform .25s}
@media (hover:hover){.dd:hover .mega{opacity:1;visibility:visible;transform:translate(-36%,0);transition:opacity .25s,transform .25s}}
.mega ul{display:grid;grid-template-columns:1fr 1fr;gap:3.6px}
.mega li a{display:grid;grid-template-columns:46.8px 1fr;grid-template-rows:auto auto;column-gap:12.6px;align-items:center;padding:8.1px 9px;border-radius:12.6px}
.mega li a:hover{background:var(--sand)}
.mega .sw{grid-row:span 2;width:46.8px;height:46.8px;border-radius:12.6px;background:var(--c);display:grid;place-items:center;overflow:hidden}
.mega .sw img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.mega b{font-size:13.5px;font-weight:700;align-self:end;line-height:1.2}
.mega small{font-size:11.25px;font-weight:500;color:var(--ink2);align-self:start;line-height:1.35}
.mega-foot{display:flex;gap:19.8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:10.8px;padding:12.6px 9px 3.6px;font-size:12.6px;font-weight:700}
.mega-foot a:hover{text-decoration:underline;text-underline-offset:4px}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:80;background:var(--forest);color:var(--cream);overflow-y:auto;padding:16.2px var(--pad) 108px;--focus:#F4EEE3;display:none}
.mnav.open{display:block}
.mnav-top{display:flex;justify-content:space-between;align-items:center;height:50.4px;margin-bottom:19.8px}
.mnav-top .logo{height:37.8px}.mnav-top .logo svg{height:100%;width:auto}
.mnav-x{width:41.4px;height:41.4px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit;font-size:23.4px;line-height:1;cursor:pointer}
.mnav .big a{display:block;font-weight:800;font-size:clamp(27px,7.2vw,39.6px);letter-spacing:-.03em;line-height:1.15;padding:4.5px 0}
.mnav .fam{display:grid;grid-template-columns:1fr 1fr;gap:7.2px;margin:10.8px 0 16.2px}
.mnav .fam a{display:flex;align-items:center;gap:9px;padding:7.2px;border-radius:12.6px;background:rgba(244,238,227,.07);font-weight:700;font-size:13.5px}
.mnav .fam span{width:30.6px;height:30.6px;border-radius:9px;background:var(--c);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(244,238,227,.28)}
.menu-open .rv-t,.menu-open .proto,.menu-open .pbar{display:none}
.mnav .fam img{width:23.4px;height:23.4px;object-fit:contain}
.mnav .more{display:flex;flex-wrap:wrap;gap:7.2px 16.2px;margin:19.8px 0;font-weight:600}
.mnav .more a{border-bottom:1.5px solid rgba(244,238,227,.5)}
.mnav .cta{margin-top:9px}

/* phone bar */
.pbar{display:none}
@media (max-width:980px){
  .hd nav,.hd .hb{display:none}
  .burger{display:inline-flex}
  .hd{--hd:61.2px}
  .hd .logo{height:41.4px}
  .hd.solid .logo{height:37.8px}
  .pbar{display:grid;grid-template-columns:1fr 1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--forest);color:var(--cream);
    padding:7.2px 7.2px calc(7.2px + env(safe-area-inset-bottom));gap:5.4px;box-shadow:0 -10px 30px -12px rgba(0,0,0,.35);--focus:#F4EEE3}
  .pbar a{display:flex;align-items:center;justify-content:center;gap:7.2px;min-height:43.2px;border-radius:899.1px;font-weight:700;font-size:13.05px}
  .pbar a svg{width:17.1px;height:17.1px}
  .pbar a.main{background:var(--cream);color:var(--forest)}
  body{padding-bottom:57.6px}
  .ft{padding-bottom:70.2px}
}

/* ---------- review chrome (prototype only) ---------- */
.rv-t{position:fixed;left:12.6px;bottom:12.6px;z-index:90;display:flex;align-items:center;gap:7.2px;padding:7.2px 11.7px 7.2px 9px;border-radius:899.1px;border:0;cursor:pointer;
  background:rgba(22,26,24,.88);color:#F4EEE3;font:600 12px/1 Montserrat,sans-serif;backdrop-filter:blur(8px);--focus:#C49A54}
.rv-t .sw{width:25.2px;height:14.4px;border-radius:899.1px;background:#6b6b6b;position:relative;transition:background .2s}
.rv-t .sw::after{content:"";position:absolute;left:2px;top:2px;width:10.8px;height:10.8px;border-radius:50%;background:#fff;transition:transform .2s}
.rv-t[aria-pressed=true] .sw{background:var(--gold)}
.rv-t[aria-pressed=true] .sw::after{transform:translateX(12px)}
.proto{position:fixed;right:12.6px;bottom:12.6px;z-index:90;padding:6.3px 9.9px;border-radius:899.1px;background:rgba(22,26,24,.78);color:#F4EEE3;font:600 11px/1 Montserrat,sans-serif;letter-spacing:.02em;pointer-events:none}
@media (max-width:980px){.rv-t{bottom:73.8px;left:9px;padding:6.3px 9.9px 6.3px 7.2px;font-size:9.9px}.proto{bottom:77.4px;right:9px;font-size:9px;padding:5.4px 8.1px}}

/* TBC chips and placeholder tags: hidden in the clean view */
mark.tbc{background:rgba(196,154,84,.24);color:inherit;border-radius:4.5px;padding:0 3px;box-shadow:inset 0 -2px 0 rgba(196,154,84,.75)}
mark.tbc i{font-style:normal;font-size:.62em;font-weight:800;letter-spacing:.06em;vertical-align:.35em;margin-left:3px;color:inherit;opacity:.8}
.tbcn{display:inline-block;font-size:10.8px;font-weight:700;line-height:1.3;padding:3px 7.2px;border-radius:5.4px;background:rgba(196,154,84,.24);box-shadow:inset 0 0 0 1px rgba(196,154,84,.75);vertical-align:middle}
.tbcn::before{content:"TBC";font-weight:800;letter-spacing:.06em;margin-right:5.4px}
.dark .tbcn,.field-dark .tbcn{background:rgba(196,154,84,.3)}
.ph{position:absolute;z-index:4;left:10.8px;top:10.8px;display:inline-flex;align-items:center;gap:5.4px;padding:4.5px 8.1px;border-radius:6.3px;background:rgba(22,26,24,.78);color:#F4EEE3;font-size:9.9px;font-weight:700;line-height:1.2;letter-spacing:.02em;max-width:calc(100% - 21.6px);backdrop-filter:blur(6px)}
.ph::before{content:"";width:6.3px;height:6.3px;border-radius:50%;background:var(--gold);flex:none}
.ph.r{left:auto;right:10.8px}
.ph.b{top:auto;bottom:10.8px}
.ph.static{position:static;margin-top:9px;justify-self:start}
body.notes-off mark.tbc{background:none;box-shadow:none;padding:0}
body.notes-off mark.tbc i,body.notes-off .tbcn,body.notes-off .ph,body.notes-off .notes-only{display:none!important}

/* ---------- reveal (gentle, images and tiles only) ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- home hero (3D) ---------- */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--hero-bg,#2B3A6B);color:var(--hero-fg,#F4EEE3);transition:color .35s ease}
.hero .btn{transition:transform .3s var(--ease),background .35s,color .35s,box-shadow .35s}
.hero .wash{position:absolute;inset:0;background:var(--wash,transparent);clip-path:circle(0% at 50% 45%);pointer-events:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none}
#gl.drag{cursor:grabbing}
.hero .bottom{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 57.6px;display:flex;align-items:flex-end;justify-content:space-between;gap:21.6px;pointer-events:none}
.hero .bottom>*{pointer-events:auto}
.hero h1{font-weight:300;font-size:clamp(27px,3.06vw,46.8px);letter-spacing:-.02em;line-height:1.05}
.hero h1 b{font-weight:800}
.hero .btn.solid{background:var(--hero-fg);color:var(--hero-bg)}
.hero .btn.line{box-shadow:inset 0 0 0 2px var(--hero-fg);color:var(--hero-fg)}
.dots{position:absolute;left:50%;top:var(--dots-top,78%);transform:translateX(-50%);display:flex;gap:19.8px;font-size:12.6px;font-weight:600;z-index:3}
.dots button{all:unset;cursor:pointer;opacity:.5;transition:opacity .3s;padding:5.4px 0;position:relative}
.dots button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left}
.dots button.on{opacity:1}
.dots.paused button.on::after{transform:scaleX(1)}
.dots button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hero .fallback{position:absolute;left:50%;top:46%;width:min(27vw,342px);transform:translate(-50%,-50%);display:none;filter:drop-shadow(0 30px 34px rgba(0,0,0,.28))}
.hero.no3d .fallback{display:block}
.hero .hint{position:absolute;right:var(--pad);top:calc(var(--hd) + 16.2px);font-size:10.8px;font-weight:600;opacity:.7}
@media (max-width:860px){
  .dots{display:none}
  .hero .bottom{flex-direction:column;align-items:flex-start;gap:14.4px;padding-bottom:118.8px}
  .hero .cta{width:100%}.hero .cta .btn{flex:1}
  .hero .hint{display:none}
}

/* ---------- plant band ---------- */
.band-plant{position:relative;height:min(86svh,774px);min-height:468px;overflow:hidden;background:#cfc3a8;color:#fff;--focus:#F4EEE3}
.band-plant>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%}
.band-plant::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,24,20,0) 45%,rgba(15,24,20,.68) 100%)}
.band-plant .txt{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(23.4px,3.6vw,50.4px);display:flex;justify-content:space-between;align-items:flex-end;gap:21.6px;flex-wrap:wrap}
.band-plant .txt p{font-weight:300;font-size:clamp(23.4px,2.88vw,43.2px);line-height:1.08;letter-spacing:-.025em;max-width:16em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.band-plant .txt p b{font-weight:800;display:block}
.film{position:absolute;z-index:3;right:var(--pad);top:calc(var(--hd) + 21.6px);display:inline-flex;align-items:center;gap:9px;padding:7.2px 12.6px 7.2px 7.2px;border-radius:899.1px;background:rgba(20,28,24,.55);color:#fff;font-size:11.25px;font-weight:700;backdrop-filter:blur(8px)}
.film i{width:25.2px;height:25.2px;border-radius:50%;background:#fff;display:grid;place-items:center}
.film i::before{content:"";border-left:9px solid #1E2F27;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
@media (max-width:700px){
  .band-plant>img.d{display:none}
  .band-plant{height:auto;min-height:0;background:var(--forest)}
  .band-plant::after{display:none}
  .band-plant>img.m{position:relative;inset:auto;height:auto;aspect-ratio:4/5}
  .band-plant .txt{position:relative;left:auto;right:auto;bottom:auto;padding:23.4px var(--pad) 30.6px;color:var(--cream)}
  .band-plant .ph.b{bottom:auto;top:calc(112.5vw - 36px)}
  .band-plant .film{top:12.6px;right:10.8px}
}
@media (min-width:701px){.band-plant>img.m{display:none}}

/* ---------- crossed marquee bands ---------- */
.bands{position:relative;height:clamp(180px,21.6vw,306px);overflow:hidden;background:var(--cream)}
.band{position:absolute;left:-10%;right:-10%;padding:clamp(10.8px,1.35vw,18px) 0;white-space:nowrap;font-weight:900;font-size:clamp(23.4px,3.42vw,52.2px);letter-spacing:-.02em;display:flex}
.band .track{display:flex;gap:.5em;padding-right:.5em;animation:mq 46s linear infinite;flex:none}
.band .track span{display:inline-flex;align-items:center;gap:.5em}
.band .track i{display:inline-block;width:.4em;height:.4em;flex:none;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.b1{top:20%;background:var(--forest);color:var(--cream);transform:rotate(-4deg)}
.b2{top:46%;background:var(--gold);color:var(--forest);transform:rotate(3deg)}
.b2 .track{animation-direction:reverse;animation-duration:52s}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- bento family tiles ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(198px,18.9vw,288px);gap:clamp(9px,1.08vw,16.2px)}
.tile{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(18px,1.8vw,25.2px);display:flex;flex-direction:column;justify-content:flex-start;color:var(--fg);background:var(--bg);isolation:isolate}
.tile .tt{position:relative;z-index:2;padding-right:43.2px}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile h3{font-weight:800;font-size:clamp(20.7px,2.07vw,34.2px);letter-spacing:-.03em;line-height:1;position:relative;z-index:2}
.tile.big h3{font-size:clamp(30.6px,3.6vw,57.6px)}
.tile p{font-size:12.6px;font-weight:600;opacity:.92;max-width:17em;line-height:1.4;margin-top:7.2px}
.tile.big p{font-size:14.4px}
.tile .im{position:absolute;z-index:1;right:-12%;bottom:-14%;width:84%;transition:transform .8s var(--ease)}
.tile.big .im{width:96%;right:-6%;bottom:-6%}
.tile.wide .im{width:54%;right:-3%;bottom:-18%}
.tile.wide .tt{max-width:52%}
.tile .im.trio{display:flex;align-items:flex-end;gap:0;width:62%;right:-2%;bottom:-6%}
.tile .im.trio img{width:36%;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25))}
.tile .im.trio img:nth-child(2){width:46%;margin:0 -8%}
.tile:hover .im{transform:rotate(-5deg) scale(1.05)}
.tile .go{position:absolute;z-index:3;right:16.2px;top:16.2px;width:37.8px;height:37.8px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.85;transition:transform .3s var(--ease)}
.tile .go svg{width:14.4px;height:14.4px}
.tile:hover .go{transform:rotate(-45deg)}
.bento.lg{grid-auto-rows:clamp(216px,21.6vw,324px)}

/* ---------- application cards strip ---------- */
.strip-wrap{position:relative}
.strip{display:flex;gap:clamp(10.8px,1.26vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding:3.6px var(--pad) 16.2px;margin:0 calc(var(--pad) * -1);scroll-padding:0 var(--pad);scrollbar-width:thin;scrollbar-color:rgba(244,238,227,.35) transparent}
.strip::-webkit-scrollbar{height:5.4px}.strip::-webkit-scrollbar-thumb{background:rgba(244,238,227,.35);border-radius:8.1px}
.card{position:relative;flex:none;width:clamp(216px,21.6vw,324px);aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;background:#333}
.card img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.card:hover img{transform:scale(1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6))}
.card span{position:absolute;z-index:2;left:18px;right:18px;bottom:16.2px;font-weight:800;font-size:clamp(18.9px,1.71vw,25.2px);letter-spacing:-.02em;line-height:1.05;color:#fff}
.card small{display:block;font-size:11.7px;font-weight:600;letter-spacing:0;margin-top:5.4px;opacity:.9}
.strip-nav{display:flex;gap:9px}
.strip-nav button{width:46.8px;height:46.8px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 2px currentColor;color:inherit;cursor:pointer;display:grid;place-items:center}
.strip-nav button svg{width:16.2px;height:16.2px}
.strip-nav button:disabled{opacity:.35;cursor:default}

/* ---------- mm scale graphic ---------- */
.mm{display:grid;gap:10.8px;position:relative}
.mm figure{position:relative;background:var(--sand);border-radius:var(--r-lg);padding:14.4px 19.8px 14.4px 14.4px;display:grid;grid-template-columns:clamp(86.4px,8.1vw,117px) 1fr;column-gap:19.8px;align-items:center}
.mm .cut{height:clamp(77.4px,7.2vw,100.8px);display:grid;place-items:center;grid-row:span 2}
.mm figcaption{grid-column:2}
.mm svg.rule{grid-column:2;height:27px;margin-top:7.2px}
.mm .cut img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}
.mm svg.rule{width:100%;height:30.6px;color:var(--forest)}
.mm figcaption b{display:inline;font-size:16.2px;font-weight:800;letter-spacing:-.01em;margin-right:9px}
.mm figcaption span{font-size:12.6px;color:var(--ink2);font-weight:600}

/* ---------- stamps ---------- */
.stamps{display:flex;justify-content:center;gap:clamp(16.2px,3.6vw,57.6px);flex-wrap:wrap}
.stamp{width:clamp(117px,11.7vw,162px);aspect-ratio:1;position:relative;display:grid;place-items:center;color:var(--gold);text-align:center}
.stamp svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 34s linear infinite}
.stamp b{font-weight:900;font-size:clamp(16.2px,1.62vw,23.4px);letter-spacing:-.02em;line-height:1;color:var(--cream)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- closing / help bands ---------- */
.closing{position:relative;overflow:hidden;color:var(--cream);background:#1b2722;text-align:center;--focus:#F4EEE3}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.closing::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,40,.45),rgba(30,47,39,.68));z-index:1}
.closing .in{position:relative;z-index:2;padding:clamp(99px,12.6vw,189px) var(--pad)}
.closing h2{font-weight:300;font-size:clamp(36px,5.4vw,86.4px);letter-spacing:-.04em;line-height:1}
.closing h2 b{font-weight:800;display:block}
.closing p{margin:19.8px auto 0;max-width:32em;font-size:clamp(14.4px,1.26vw,17.1px)}
.closing .cta{justify-content:center;margin-top:30.6px}
.help{background:var(--sand);padding:clamp(39.6px,4.5vw,64.8px) var(--pad)}
.help .wrap{display:flex;align-items:center;justify-content:space-between;gap:21.6px 36px;flex-wrap:wrap}
.help h2{font-weight:800;font-size:clamp(23.4px,2.52vw,37.8px);letter-spacing:-.03em;line-height:1.05;max-width:16em}
.help p{margin-top:7.2px;color:var(--ink2);max-width:36em}
.disclaimer{padding:19.8px var(--pad) 27px;background:var(--sand);border-top:1px solid var(--line)}
.disclaimer p{max-width:var(--max);margin:0 auto;font-size:11.7px;color:var(--ink2);line-height:1.6}

/* ---------- page heads (inner pages) ---------- */
.phead{padding:calc(var(--hd) + clamp(36px,5.4vw,86.4px)) var(--pad) clamp(36px,4.5vw,72px)}
.phead .crumb{font-size:12.15px;font-weight:600;color:var(--ink2);margin-bottom:19.8px}
.phead .crumb a{text-decoration:underline;text-underline-offset:3px}
.phead .lede{margin-top:19.8px}
.crumb span[aria-hidden]{margin:0 7.2px;opacity:.6}

/* ---------- category hero (colour field) ---------- */
.chero{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);min-height:max(594px,94svh);--focus:var(--fg)}
.chero .word{position:absolute;left:50%;top:calc(var(--hd) + 7%);transform:translateX(-50%);white-space:nowrap;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.8;color:var(--word);pointer-events:none;user-select:none;font-size:var(--wsize,13.5vw)}
.chero .bowl{position:absolute;left:50%;top:calc(var(--hd) + 6% + var(--wsize,13.5vw) * .38);transform:translateX(-50%);width:min(52.2vw,702px);filter:drop-shadow(0 40px 40px rgba(0,0,0,.28))}
.chero .bowl.trio{display:flex;align-items:flex-end;justify-content:center;width:min(54vw,738px)}
.chero .bowl.trio img{width:34%}
.chero .bowl.trio img:nth-child(2){width:44%;margin:0 -6% -2%}
.chero .bowl .ph{left:auto;right:0;top:auto;bottom:4%}
.chero .crumb{position:absolute;left:var(--pad);top:calc(var(--hd) + 9px);font-size:11.7px;font-weight:600;opacity:.85;z-index:3}
.chero .crumb a{text-decoration:underline;text-underline-offset:3px}
.chero .bottom{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(23.4px,3.06vw,41.4px);display:flex;justify-content:space-between;align-items:flex-end;gap:18px 36px;flex-wrap:wrap}
.chero h1{font-weight:800;font-size:clamp(36px,4.14vw,64.8px);letter-spacing:-.04em;line-height:.95}
.chero .line{font-size:clamp(15.3px,1.26vw,18.9px);font-weight:500;margin-top:9px;max-width:24em}
@media (max-width:860px){
  .chero{min-height:0;padding-bottom:25.2px}
  .chero .word{top:calc(var(--hd) + 39.6px)}
  .chero .bowl{position:relative;left:auto;top:auto;transform:none;width:100%;margin:calc(var(--hd) + 39.6px + var(--wsize) * .45) auto 0;display:block}
  .chero .bowl.trio{display:flex}
  .chero .bottom{position:relative;left:auto;right:auto;bottom:auto;margin:16.2px var(--pad) 0}
  .chero .bottom .cta{width:100%}.chero .bottom .cta .btn{flex:1}
}

/* ---------- form tiles ---------- */
.fgroup+.fgroup{margin-top:clamp(36px,4.5vw,64.8px)}
.fgroup>h3{font-weight:800;font-size:clamp(19.8px,1.8vw,27px);letter-spacing:-.02em;margin-bottom:16.2px}
.forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:clamp(19.8px,2.16vw,30.6px) clamp(12.6px,1.44vw,21.6px)}
.fm{scroll-margin-top:100px}
.fm .ph-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;background:var(--beige)}
.fm .ph-wrap>img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fm:hover .ph-wrap>img{transform:scale(1.04)}
.fm .ph-wrap.cutout{background:var(--tint,#EDE6D8);display:grid;place-items:center}
.fm .ph-wrap.cutout>img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.2))}
.fm .ph-wrap.empty{background:var(--tint,#EDE6D8);display:grid;place-items:center}
.fm .ph-wrap.empty svg{width:34%;opacity:.22;color:var(--forest)}
.fm .ph-wrap.empty em{position:absolute;bottom:14.4px;left:0;right:0;text-align:center;font-style:normal;font-size:11.25px;font-weight:700;color:var(--ink2)}
.fm .nm{font-weight:800;font-size:17.1px;letter-spacing:-.015em;line-height:1.2;margin-top:12.6px}
.fm p{font-size:13.05px;color:var(--ink2);line-height:1.45;margin-top:3.6px}
.fm .nb{display:flex;gap:5.4px;flex-wrap:wrap;margin-top:9px}
.fm .nb span{font-size:10.35px;font-weight:700;padding:3px 8.1px;border-radius:899.1px;box-shadow:inset 0 0 0 1.5px var(--line)}
.fm .code{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:11.7px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--ink)}
.fm .code b{font-weight:800;letter-spacing:.01em}
.fm .code span{display:block;color:var(--ink2);font-weight:600}
.more-size{margin-top:clamp(27px,2.7vw,41.4px);display:flex;align-items:center;gap:14.4px;flex-wrap:wrap;font-weight:700}

/* options row */
.opts{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.opts span{padding:9.9px 16.2px;border-radius:899.1px;background:var(--beige);font-weight:700;font-size:13.05px;box-shadow:inset 0 0 0 1.5px var(--line)}
/* used in */
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(189px,1fr));gap:clamp(10.8px,1.26vw,18px)}
.use{display:grid;grid-template-columns:75.6px 1fr;gap:12.6px;align-items:center;padding:9px;border-radius:var(--r-md);background:var(--beige);transition:background .3s}
.use:hover{background:#fff}
.use img{width:75.6px;height:75.6px;border-radius:10.8px;object-fit:cover}
.use b{display:block;font-weight:800;font-size:14.85px;letter-spacing:-.01em}
.use span{font-size:12.15px;color:var(--ink2);line-height:1.4;display:block}
/* packing strip */
.pack{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(21.6px,3.6vw,57.6px);align-items:center}
.pack-vis{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:10.8px;aspect-ratio:1.45}
.pack-vis>div{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--beige)}
.pack-vis>div:first-child{grid-row:span 2;background:#E7DCC8;display:grid;place-items:center}
.pack-vis img{width:100%;height:100%;object-fit:cover}
.pack-vis svg.carton{width:84%;height:auto}
.pack ul{margin-top:16.2px;display:grid;gap:7.2px}
.pack li{display:flex;gap:10.8px;align-items:baseline;font-weight:600}
.pack li::before{content:"";width:7.2px;height:7.2px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex:none;position:relative;top:-1px}
/* family switcher */
.fams{display:flex;flex-wrap:wrap;gap:7.2px}
.fams a{display:inline-flex;align-items:center;gap:7.2px;padding:7.2px 12.6px 7.2px 7.2px;border-radius:899.1px;background:var(--beige);font-weight:700;font-size:12.6px;box-shadow:inset 0 0 0 1.5px var(--line)}
.fams a i{width:19.8px;height:19.8px;border-radius:50%;background:var(--c)}
.fams a[aria-current=page]{background:var(--forest);color:var(--cream)}

/* ---------- products matrix ---------- */
.mx-wrap{position:relative;overflow-x:auto;border-radius:var(--r-lg);background:var(--beige);padding:clamp(9px,1.8vw,23.4px)}
.mx{border-collapse:separate;border-spacing:0;width:100%;min-width:684px}
.mx th,.mx td{padding:10.8px 7.2px;text-align:center;font-size:12.15px}
.mx thead th{font-weight:700;vertical-align:bottom;line-height:1.25;color:var(--ink2)}
.mx tbody th{text-align:left;font-weight:800;font-size:14.4px;white-space:nowrap}
.mx tbody th a{display:inline-flex;align-items:center;gap:9px}
.mx tbody th a:hover{text-decoration:underline;text-underline-offset:4px}
.mx tbody th i{width:14.4px;height:14.4px;border-radius:50%;background:var(--c);flex:none}
.mx tbody tr+tr>*{border-top:1px solid var(--line)}
.mx .d,.mx-key .d{display:inline-block;width:16.2px;height:16.2px;border-radius:50%;background:var(--c)}
.mx .q,.mx-key .q{display:inline-block;width:16.2px;height:16.2px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c);background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(196,154,84,.5) 3px 5px)}
.mx-key{display:flex;gap:19.8px;flex-wrap:wrap;margin-top:14.4px;font-size:12.15px;font-weight:600;color:var(--ink2);align-items:center}
.mx-key span{display:inline-flex;gap:7.2px;align-items:center}
.mx-key .d,.mx-key .q{--c:var(--forest);width:12.6px;height:12.6px}

/* ---------- application blocks ---------- */
.mosaic{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-top:clamp(27px,3.6vw,50.4px)}
.mosaic a{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden}
.mosaic a:nth-child(odd){transform:translateY(22px)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic span{position:absolute;left:9px;right:9px;bottom:9px;color:#fff;font-weight:800;font-size:12.6px;line-height:1.15;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.ind{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(25.2px,4.5vw,81px);align-items:center;scroll-margin-top:90px}
.ind+.ind{margin-top:clamp(63px,8.1vw,117px)}
.ind.flip .ind-img{order:2}
.ind-img{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4}
.ind-img img{width:100%;height:100%;object-fit:cover}
.ind h2{font-weight:800;font-size:clamp(28.8px,3.42vw,52.2px);letter-spacing:-.04em;line-height:1}
.ind .one{font-size:clamp(16.2px,1.35vw,18.9px);margin-top:12.6px;max-width:24em}
.ind h3{font-size:12.15px;font-weight:700;color:var(--ink2);margin:23.4px 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:7.2px}
.chips a,.chips span{padding:8.1px 13.5px;border-radius:899.1px;background:var(--beige);font-weight:700;font-size:12.6px;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .25s}
.chips a:hover{background:#fff}
.ind .cta{margin-top:23.4px}

/* ---------- plant ---------- */
.arrival{position:relative;height:100svh;min-height:540px;overflow:hidden;color:#fff;--focus:#F4EEE3}
.arrival>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arrival::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,14,.35) 0%,rgba(10,18,14,0) 30%,rgba(10,18,14,0) 55%,rgba(10,18,14,.65) 100%)}
.arrival>.ph{top:calc(var(--hd) + 23.4px);bottom:auto;left:var(--pad)}
.arrival .txt{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(27px,4.5vw,63px)}
.arrival h1{font-weight:800;font-size:clamp(48.6px,8.1vw,135px);letter-spacing:-.05em;line-height:.88}
.arrival p{font-size:clamp(16.2px,1.44vw,21.6px);margin-top:12.6px;font-weight:500}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(9px,1.08vw,16.2px)}
.gal figure{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#ddd}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:14.4px;bottom:12.6px;z-index:3;color:#fff;font-weight:700;font-size:12.6px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.gal .g1{grid-column:span 7;aspect-ratio:16/10}
.gal .g2{grid-column:span 5;aspect-ratio:auto}
.gal .g3{grid-column:span 5;aspect-ratio:auto}
.gal .g4{grid-column:span 7;aspect-ratio:16/10}
/* real dusk photo: no colour filter */
.gal .gate{display:grid;place-items:center;background:#2a3a33;color:#F4EEE3}
.inside{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.08vw,16.2px)}
.inside figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--beige)}
.inside img{width:100%;height:100%;object-fit:cover}
.inside figcaption{position:absolute;left:14.4px;right:14.4px;bottom:12.6px;z-index:3;color:#fff;font-weight:700;font-size:12.6px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.inside .empty{display:grid;place-items:center;background:#E3D9C6}
.inside .empty svg{width:30%;opacity:.25;color:var(--forest)}
.inside .empty figcaption{color:var(--forest);text-shadow:none}
.cert{background:var(--cream);color:var(--forest);border-radius:var(--r-xl);padding:clamp(21.6px,3.06vw,43.2px);position:relative;overflow:hidden;--focus:#1E2F27}
.cert .ghost{position:absolute;right:-6%;top:-10%;width:42%;opacity:.09;color:var(--gold)}
.cert h3{font-weight:800;font-size:clamp(21.6px,2.16vw,32.4px);letter-spacing:-.03em;line-height:1.05}
.cert dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 23.4px;margin-top:19.8px;font-size:13.5px;position:relative}
.cert dt{color:var(--ink2);font-weight:600}
.cert dd{font-weight:700}
.cert q{display:block;font-weight:500;font-style:italic;quotes:"\201C" "\201D"}
.cert .rev{margin-top:19.8px;font-size:11.7px;color:var(--ink2);font-weight:600}
.cert+.cert{margin-top:14.4px}
.sec:not(.dark) .cert{background:var(--beige);box-shadow:inset 0 0 0 1px var(--line)}
.doclist{display:grid;grid-template-columns:repeat(3,1fr);gap:10.8px}
@media (max-width:1000px){.doclist{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.doclist{grid-template-columns:1fr}}
.doc{display:flex;gap:12.6px;align-items:flex-start;padding:16.2px;border-radius:var(--r-md);background:var(--beige);box-shadow:inset 0 0 0 1px var(--line)}
.doc svg{width:27px;height:32.4px;flex:none;color:var(--gold)}
.doc b{display:block;font-weight:800;font-size:14.4px;line-height:1.25}
.doc span{font-size:12.15px;color:var(--ink2);display:block;margin-top:3px;line-height:1.45}
.dark .doc{background:rgba(244,238,227,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.16)}
.dark .doc span{color:rgba(244,238,227,.75)}

/* ---------- about ---------- */
.ahead{position:relative;overflow:hidden;background:var(--beige);padding:calc(var(--hd) + clamp(36px,5.4vw,81px)) var(--pad) clamp(54px,7.2vw,108px)}
.ahead .ghost{position:absolute;right:-8%;top:4%;height:118%;width:auto;opacity:.07;color:var(--gold)}
.ahead .lock{width:min(504px,73.8vw);margin-bottom:clamp(36px,5.4vw,72px)}
.ahead .lock svg{width:100%;height:auto}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12.6px,1.8vw,25.2px)}
.way{padding:clamp(19.8px,2.34vw,32.4px);border-radius:var(--r-lg);background:rgba(244,238,227,.05);box-shadow:inset 0 0 0 1px rgba(244,238,227,.14)}
.way svg{width:54px;height:54px;color:var(--gold);margin-bottom:23.4px}
.way h3{font-weight:800;font-size:clamp(18.9px,1.71vw,24.3px);letter-spacing:-.02em;line-height:1.1}
.way p{margin-top:9px;color:rgba(244,238,227,.8)}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12.6px,1.8vw,25.2px)}
.person .pic{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);background:linear-gradient(160deg,#E6DCCB,#D9CCB4);overflow:hidden;display:grid;place-items:center}
.person .pic b{font-weight:900;font-size:clamp(50.4px,5.4vw,86.4px);letter-spacing:-.04em;color:rgba(30,47,39,.18)}
.person .pic svg{position:absolute;right:-12%;bottom:-8%;width:62%;opacity:.12;color:var(--gold)}
.person h3{font-weight:800;font-size:18.9px;letter-spacing:-.02em;margin-top:14.4px}
.person p{color:var(--ink2);font-weight:600}

/* ---------- contact ---------- */
.ctc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(27px,4.5vw,72px);align-items:start}
.form{background:var(--beige);border-radius:var(--r-xl);padding:clamp(18px,2.7vw,39.6px);box-shadow:inset 0 0 0 1px var(--line)}
.form fieldset{border:0;min-width:0}
.form fieldset+fieldset{margin-top:27px;padding-top:25.2px;border-top:1px solid var(--line)}
.form legend{font-weight:800;font-size:clamp(18px,1.62vw,21.6px);letter-spacing:-.02em;margin-bottom:16.2px;padding:0}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16.2px 16.2px}
.f-grid .full{grid-column:1/-1}
.fld label,.fld .lab{display:block;font-weight:700;font-size:13.05px;margin-bottom:6.3px}
.fld .req{color:#9A3B2C;margin-left:2px}
.fld .hint{display:block;font-weight:500;font-size:11.7px;color:var(--ink2);margin-top:5.4px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{width:100%;min-height:45px;padding:10.8px 12.6px;border-radius:10.8px;border:1.5px solid rgba(30,47,39,.32);background:#fff;font-size:14.4px;font-weight:500;transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:117px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(30,47,39,.18)}
.fld .tel{display:flex}
.fld .tel span{display:grid;place-items:center;padding:0 12.6px;border:1.5px solid rgba(30,47,39,.32);border-right:0;border-radius:10.8px 0 0 10.8px;background:var(--sand);font-weight:700}
.fld .tel input{border-radius:0 10.8px 10.8px 0}
.fld.err input,.fld.err select,.fld.err textarea,.fld.err .pills,.fld.err .boxes{border-color:#9A3B2C!important;box-shadow:0 0 0 3px rgba(154,59,44,.15)}
.fld .msg{display:none;color:#8E3224;font-size:12.15px;font-weight:700;margin-top:5.4px}
.fld.err .msg{display:block}
.pills{display:flex;flex-wrap:wrap;gap:7.2px;border-radius:12.6px}
.pills label{position:relative;cursor:pointer;margin:0}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills span{display:inline-flex;align-items:center;min-height:39.6px;padding:8.1px 14.4px;border-radius:899.1px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(30,47,39,.3);font-weight:700;font-size:13.05px;transition:background .2s,color .2s}
.pills input:checked+span{background:var(--forest);color:var(--cream);box-shadow:none}
.pills input:focus-visible+span{outline:3px solid var(--forest);outline-offset:2px}
.boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:7.2px;border-radius:12.6px}
.fld .chk{display:flex;margin:0}
.fld .pills label{display:inline-block;margin:0}
.chk{display:flex;align-items:center;gap:9px;min-height:41.4px;padding:8.1px 10.8px;border-radius:10.8px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(30,47,39,.22);cursor:pointer;font-weight:600;font-size:13.05px}
.chk input{width:18px;height:18px;accent-color:var(--forest);flex:none}
.chk.plain{background:transparent;box-shadow:none;padding:3.6px 0;min-height:0}
.docs-pick{margin-top:12.6px;padding:14.4px;border-radius:12.6px;background:rgba(196,154,84,.14)}
.docs-pick[hidden]{display:none}
.notice{font-size:12.15px;color:var(--ink2);line-height:1.55}
.notice a{text-decoration:underline}
.send{margin-top:19.8px;display:flex;align-items:center;gap:16.2px;flex-wrap:wrap}
.counter{font-size:11.25px;color:var(--ink2);text-align:right;margin-top:3.6px}
.err-sum{display:none;margin-bottom:18px;padding:12.6px 14.4px;border-radius:10.8px;background:#F6E2DC;color:#7A2A1E;font-weight:700;font-size:13.05px}
.err-sum.on{display:block}
.hp{position:absolute;left:-8999.1px;width:1px;height:1px;overflow:hidden}
.side>*+*{margin-top:27px}
.side h2{font-weight:800;font-size:19.8px;letter-spacing:-.02em;margin-bottom:10.8px}
.lines{display:grid;gap:9px}
.lines a,.lines div{display:grid;grid-template-columns:19.8px 1fr;gap:10.8px;align-items:start;font-weight:600;line-height:1.45}
.lines svg{width:18px;height:18px;margin-top:2px;color:var(--forest)}
.lines small{display:block;font-weight:500;color:var(--ink2);font-size:12.15px}
.addr{padding:16.2px;border-radius:var(--r-md);background:var(--beige);box-shadow:inset 0 0 0 1px var(--line)}
.addr b{display:block;font-size:11.7px;color:var(--ink2);font-weight:700;margin-bottom:3.6px}
.addr+.addr{margin-top:9px}
.gate-thumb{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9}
.gate-thumb img{width:100%;height:100%;object-fit:cover}

/* faq */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:19.8px 3.6px;font-weight:800;font-size:clamp(15.3px,1.35vw,18px);letter-spacing:-.01em;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{width:30.6px;height:30.6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--forest);flex:none;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:10.8px;height:2px;background:var(--forest);transform:translate(-50%,-50%);transition:transform .3s}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.qa .a{padding:0 3.6px 21.6px;max-width:44em;color:var(--ink2);font-size:14.4px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(21.6px,4.5vw,72px)}
.faq-grid h2{font-weight:800;font-size:clamp(19.8px,1.8vw,27px);letter-spacing:-.02em;position:sticky;top:90px}
.faq-grid+.faq-grid{margin-top:clamp(36px,4.5vw,63px)}

/* legal */
.legal{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(21.6px,4.5vw,72px);align-items:start}
.legal nav{position:sticky;top:86.4px;font-size:12.6px;font-weight:600;display:grid;gap:7.2px}
.legal nav a{color:var(--ink2)}.legal nav a:hover{color:var(--ink);text-decoration:underline}
.legal article{max-width:46em}
.legal h2{font-weight:800;font-size:19.8px;letter-spacing:-.02em;margin:34.2px 0 9px;scroll-margin-top:96px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#2E3C35}
.legal ul{list-style:disc;padding-left:19.8px;display:grid;gap:5.4px;margin:9px 0}
.legal .box{margin-top:12.6px;padding:18px;border-radius:var(--r-md);background:var(--beige);box-shadow:inset 0 0 0 1px var(--line)}
.legal .upd{font-weight:700;color:var(--ink2);margin-bottom:21.6px}

/* thank you / 404 */
.solo{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(var(--hd) + 36px) var(--pad) 72px;overflow:hidden;background:var(--beige)}
.solo .ghost{position:absolute;right:-10%;top:50%;transform:translateY(-50%);height:120%;width:auto;opacity:.08;color:var(--gold)}
.solo .wrap{position:relative;z-index:2;width:100%}
.solo .ref{display:inline-block;margin-top:21.6px;padding:12.6px 18px;border-radius:12.6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:800;font-size:clamp(18px,1.8vw,23.4px);letter-spacing:.02em}
.solo .cta{margin-top:30.6px}
.nf-nut{position:absolute;right:8%;top:50%;transform:translateY(-50%) rotate(-12deg);width:min(27vw,342px);filter:drop-shadow(0 30px 34px rgba(0,0,0,.2))}

/* ---------- footer ---------- */
.ft{background:var(--forest);color:rgba(244,238,227,.86);padding:clamp(54px,6.3vw,90px) var(--pad) 23.4px;--focus:#F4EEE3;font-size:13.05px}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-top{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:27px 36px}
.ft h2{font-size:11.7px;font-weight:700;color:var(--gold);margin-bottom:12.6px;letter-spacing:.02em}
.ft ul{display:grid;gap:6.3px}
.ft-legal{margin-top:clamp(36px,4.5vw,57.6px);padding-top:25.2px;border-top:1px solid rgba(244,238,227,.16);display:grid;grid-template-columns:repeat(auto-fit,minmax(234px,1fr));gap:16.2px 36px;font-size:11.7px;line-height:1.6;color:rgba(244,238,227,.78)}
.ft-legal b{color:var(--cream);font-weight:700}
.ft-legal dt{font-weight:700;color:rgba(244,238,227,.6);font-size:10.8px}
.ft-legal dd+dt{margin-top:9px}
.ft-word{margin:clamp(45px,5.4vw,81px) auto 0;max-width:var(--max)}
.ft-word svg{width:100%;height:auto;max-height:306px}
.ft-base{max-width:var(--max);margin:25.2px auto 0;display:flex;justify-content:space-between;gap:10.8px 27px;flex-wrap:wrap;font-size:11.7px;color:rgba(244,238,227,.7)}
.ft-base nav{display:flex;gap:18px}
.ft .tbcn{color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ft-top{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mosaic a:nth-child(n+5){display:none}
}
@media (max-width:860px){
  .grid2,.pack,.ctc,.ind,.faq-grid,.legal{grid-template-columns:1fr}
  .ind.flip .ind-img{order:0}
  .bento,.bento.lg{grid-template-columns:1fr 1fr;grid-auto-rows:189px}
  .tile.big{grid-column:span 2;grid-row:span 2}
  .tile.wide{grid-column:span 2}
  .ways,.people,.inside{grid-template-columns:1fr}
  .people{grid-template-columns:1fr 1fr}
  .inside figure{aspect-ratio:16/11}
  .gal .g1,.gal .g2,.gal .g3,.gal .g4{grid-column:span 12;aspect-ratio:16/11}
  .legal nav{position:static;display:flex;flex-wrap:wrap;gap:7.2px 14.4px}
  .faq-grid h2{position:static}
  .f-grid{grid-template-columns:1fr}
  .card{width:66.6vw}
  .strip-nav{display:none}
  .pack-vis{aspect-ratio:1.2}
  .nf-nut{position:relative;right:auto;top:auto;transform:rotate(-12deg);width:46.8vw;margin:0 auto 18px}
}
@media (max-width:520px){
  .ft-top{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic a:nth-child(n+4){display:none}
  .mosaic a:nth-child(odd){transform:none}
  .forms{grid-template-columns:1fr 1fr;gap:19.8px 10.8px}
  .fm .nm{font-size:14.85px}
  .fm p{font-size:12.15px}
  .tile p{font-size:11.25px;margin-top:5.4px}
  .tile .go{display:none}
  .tile .tt{padding-right:0}
  .tile h3{font-size:19.8px}
  .tile.big h3{font-size:30.6px}
  .bento,.bento.lg{grid-auto-rows:162px}
  .btn{padding:10.8px 18px}
  .cert dl{grid-template-columns:1fr;gap:2px}
  .cert dd{margin-bottom:9px}
}
@media (prefers-reduced-motion:reduce){
  .band .track,.stamp svg.ring{animation:none}
  .js .rv{transform:none;transition:opacity .4s}
  *{scroll-behavior:auto!important}
  .tile:hover .im,.card:hover img,.fm:hover .ph-wrap>img,.mosaic a:hover img{transform:none}
}

/* ---------- custom page steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14.4px,2.16vw,30.6px)}
.steps li{padding-top:19.8px;border-top:2px solid rgba(244,238,227,.22)}
.steps .n{display:block;font-weight:900;font-size:clamp(41.4px,4.5vw,68.4px);color:var(--gold);letter-spacing:-.04em;line-height:1}
.steps h3{font-weight:800;font-size:clamp(17.1px,1.44vw,20.7px);letter-spacing:-.015em;margin-top:14.4px;line-height:1.2}
.steps p{color:rgba(244,238,227,.8);margin-top:7.2px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
@media (max-width:860px){
  .arrival .txt{bottom:135px}
  .arrival>.ph{top:calc(61.2px + 55.8px)}
  .arrival .film{top:calc(61.2px + 14.4px);right:var(--pad)}
}

/* ===== draft-3 · fit to the screen =====
   Every card, tile and photo now fits inside one screen on short laptop displays,
   and product photos sit fully inside their tiles instead of bleeding off the edge. */
:root{--hd-s:61.2px;--fit:calc(100svh - var(--hd-s) - 48px)}
/* section headings: never taller than ~a tenth of the screen on wide, short displays */
@media (min-width:900px){
  .h-sec{font-size:clamp(32.4px,min(4.68vw,9.5svh),75.6px)}
  .sec-head{margin-bottom:clamp(21.6px,min(3.6vw,5svh),54px)}
}
/* bento: the two-row tile is never taller than the screen */
.bento{grid-auto-rows:clamp(162px,min(18.9vw,calc((100svh - var(--hd-s) - 57.6px) / 2)),288px)}
.bento.lg{grid-auto-rows:clamp(171px,min(21.6vw,calc((100svh - var(--hd-s) - 57.6px) / 2)),324px)}
/* product photo fully inside the tile, anchored bottom-right */
.tile .im{right:5%;bottom:5%;width:74%}
.tile.big .im{right:5%;bottom:5%;width:86%}
.tile.wide .im{right:4%;bottom:6%;width:46%}
.tile .im.trio{right:4%;bottom:6%;width:54%}
.tile .im img{display:block;width:100%;height:auto}
.tile:hover .im{transform:scale(1.03)}
/* application strip: heading, arrows and cards all fit in one screen */
.card{width:clamp(180px,min(21.6vw,calc((100svh - 351px) * .75)),324px)}
/* photo blocks: each one fits a single screen */
.person .pic,.inside figure,.ind-img,.mosaic a,.fm .ph-wrap,.gal>*,.gate-thumb{max-height:var(--fit)}
.chero .bowl{width:min(52.2vw,702px,calc((100svh - var(--hd) - 36px) * 1.25))}
.ft-base .ft-reg{display:block;margin-bottom:3.6px}
/* product photos keep their shape and stay clear of the tile text */
.tile .im{height:56%;display:flex;align-items:flex-end;justify-content:flex-end}
.tile.big .im{height:66%}
.tile .im img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
.tile .im.trio{height:auto}
.tile .im.trio img{height:auto}
/* family page hero: the bowl is sized by the space left under the giant word, never cropped */
@media (min-width:861px){
  .chero .bowl:not(.trio){width:auto;height:calc(97% - var(--hd) - 6% - var(--wsize,13.5vw) * .38)}
  .chero .bowl:not(.trio) img{height:100%;width:auto;max-width:min(52.2vw,702px);object-fit:contain;object-position:center bottom}
}
/* ---- draft 3: grouped menu, product families, split photos, lightbox (13-Oct) ---- */
.mega{width:min(820px,88vw);transform:translate(-30%,8px)}
.dd.open .mega,.dd:focus-within .mega{transform:translate(-30%,0)}
@media (hover:hover){.dd:hover .mega{transform:translate(-30%,0)}}
.mg{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr;gap:4px 18px;padding:4px 4px 0}
.mg-col:nth-child(1){grid-row:span 2}.mg-col:nth-child(2){grid-row:span 2}
.mg h3{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:6px 8px 6px}
.mg ul{display:grid;gap:1px}
.mg li a{display:flex;align-items:center;gap:10px;padding:5.4px 8px;border-radius:10.8px;font-size:13.5px;font-weight:700}
.mg li a:hover{background:var(--sand)}
.mg .sw{width:34px;height:34px;border-radius:9px;background:var(--c);display:grid;place-items:center;overflow:hidden;flex:none}
.mg .sw img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.mnav .fam .fam-h{grid-column:1/-1;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:6px 0 -2px}
.ft-prod ul{display:block;columns:2;column-gap:18px}
.ft-prod li{margin-bottom:6.3px;break-inside:avoid}
/* form photos are buttons that open the lightbox */
button.ph-wrap{display:block;width:100%;padding:0;border:0;font:inherit;color:inherit;cursor:zoom-in;text-align:left}
.fm .ph-wrap.split>img{position:absolute;inset:0}
.fm .ph-wrap.split>img.bl{clip-path:polygon(100% 0,100% 100%,0 100%)}
.fm .ph-wrap.split::after{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent calc(50% - .8px),rgba(255,255,255,.95) 50%,transparent calc(50% + .8px));pointer-events:none}
.fm .ph-wrap .tag{position:absolute;z-index:2;font-size:10.35px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:99px;background:rgba(244,238,227,.92);color:var(--forest)}
.fm .ph-wrap .tag.n{left:10.8px;top:10.8px}.fm .ph-wrap .tag.b{right:10.8px;bottom:10.8px}
.fm .ph-wrap.empty{color:var(--tfg,var(--forest));background:var(--tint)}
.fm .ph-wrap.empty>img{width:46%;height:46%;object-fit:contain;opacity:.95;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.fm .ph-wrap.empty em{color:inherit;opacity:.8}
.fnote{margin:-6px 0 22px;font-weight:600;color:var(--ink2)}
/* used-in photo cards */
.ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:clamp(12px,1.4vw,20px)}
.ucard{display:block}
.ucard .uim{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--beige)}
.ucard .uim img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ucard:hover .uim img{transform:scale(1.04)}
.ucard b{display:block;font-weight:800;font-size:14.4px;letter-spacing:-.01em;margin-top:10px;line-height:1.25}
.ucard>span:last-child{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-top:2px;letter-spacing:.01em}
@media (min-width:900px){.ucard .uim{max-height:calc(var(--fit) * .55)}}
/* home and products index */
.also{margin-top:18px;font-weight:600;color:var(--ink2)}
.also a{font-weight:700;color:var(--ink)}
.pgroup+.pgroup{margin-top:clamp(36px,4.5vw,60px)}
.pgroup>h2{margin-bottom:18px}
.bento.g-fruit,.bento.g-more{grid-template-columns:repeat(4,1fr)}
.bento .tile.full{grid-column:1/-1}
.bento .tile.full .im.trio{width:40%}
.tile>.ph{left:auto;right:16px;top:auto;bottom:16px}
.mx tr.grp th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding-top:16px}
.mx tbody tr.grp+tr>*{border-top:0}
.chero .bowl.none{height:30%;display:grid;place-items:center}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(14,20,17,.86);backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb figure{max-width:min(1100px,92vw);display:grid;gap:12px;justify-items:center}
.lb .pics{display:flex;gap:12px;justify-content:center}
.lb .pics img{max-height:72vh;max-width:min(80vw,720px);width:auto;border-radius:var(--r-lg);object-fit:contain;background:var(--beige)}
.lb .pics.two img{max-width:min(44vw,560px)}
.lb .pics figure{margin:0;display:grid;gap:6px;justify-items:center;color:var(--cream);font-weight:700;font-size:12.6px}
.lb figcaption{color:var(--cream);text-align:center;font-size:14px;line-height:1.5;max-width:40em}
.lb figcaption b{display:block;font-size:18px;font-weight:800}
.lb .x{position:absolute;right:18px;top:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(244,238,227,.14);color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
@media (max-width:700px){.lb .pics{flex-direction:column;align-items:center}.lb .pics.two img{max-width:86vw;max-height:36vh}.mg{grid-template-columns:1fr}}
.fm .ph-wrap.empty{background:color-mix(in srgb,var(--tint) 16%,var(--beige));color:var(--ink2)}
.mg{grid-template-columns:2fr 1.05fr 1.05fr}
.mega .mg ul{grid-template-columns:1fr;gap:1px}
.mega .mg .mg-col:first-child ul{grid-template-columns:1fr 1fr}
.mg li a{white-space:nowrap}
/* certificate bar */
.stamps.certbar{list-style:none;padding:0;margin:clamp(28px,3vw,44px) auto 0;gap:clamp(12px,2vw,30px);max-width:1100px}
.certbar .stamp{width:clamp(92px,9vw,128px)}
.certbar .stamp b{font-size:clamp(13.5px,1.3vw,18px)}
.sec:not(.dark) .certbar .stamp{color:var(--gold)}
.sec:not(.dark) .certbar .stamp b{color:var(--forest)}
/* about: the force behind */
.force{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.force-pic .ph-box{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);background:linear-gradient(135deg,#E7DCC8,#D8CBB2);max-height:var(--fit)}
.force .names{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.force .names li{display:grid;font-size:13.5px;color:var(--ink2)}
.force .names b{font-size:17px;color:var(--ink);font-weight:800}
@media (max-width:860px){.force{grid-template-columns:1fr}}
.inside.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.inside.four{grid-template-columns:1fr 1fr}}
/* ---- draft 3: applications flagship ---- */
.ahero{position:relative;height:max(560px,100svh);overflow:hidden;background:#111}
.ahero .slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:44% 56%;background:var(--bg);color:var(--fg);opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.slide.on{opacity:1;visibility:visible;transition:opacity .8s ease}
.slide .s-im{order:2;position:relative;overflow:hidden}
.slide .s-im img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.slide.on .s-im img{transform:scale(1)}
.slide .s-tx{order:1;align-self:center;padding:calc(var(--hd) + 20px) clamp(24px,4vw,64px) 110px var(--pad);display:grid;gap:14px;align-content:center}
.s-ey{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.s-ey span{margin-left:10px;opacity:.7}
.slide h2{font-weight:900;font-size:clamp(40px,5.6vw,92px);letter-spacing:-.05em;line-height:.9}
.s-ln{font-size:clamp(15px,1.3vw,19px);font-weight:500;max-width:22em;line-height:1.45}
.s-ch{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.s-ch a{font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.92}
.s-ch a:hover{background:var(--fg);color:var(--bg)}
.s-go{justify-self:start;margin-top:8px;background:var(--fg);color:var(--bg)}
.veg{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px 5px 9px;border-radius:99px;background:#F4EEE3;color:#3E5F22}
.veg::before{content:"";width:10px;height:10px;border-radius:50%;background:#5E8E2E;box-shadow:0 0 0 2px #F4EEE3,0 0 0 3px #5E8E2E}
.s-tabs{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:2px;padding:0 var(--pad) 18px;overflow-x:auto;scrollbar-width:none}
.s-tabs::-webkit-scrollbar{display:none}
.s-tabs button{flex:1 0 auto;min-width:88px;border:0;background:none;color:#fff;font:inherit;font-size:11.5px;font-weight:800;text-align:left;padding:12px 4px 0;cursor:pointer;opacity:.62;position:relative;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.s-tabs button i{position:absolute;left:4px;right:4px;top:0;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.s-tabs button i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.s-tabs button[aria-selected=true]{opacity:1}
.s-tabs button[aria-selected=true] i::after{animation:sfill var(--dur,6s) linear forwards}
.ahero.paused .s-tabs button[aria-selected=true] i::after{animation-play-state:paused}
@keyframes sfill{to{transform:scaleX(1)}}
.aidx{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.ai{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--c);max-height:calc(var(--fit) * .48)}
.ai img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ai:hover img{transform:scale(1.06)}
.ai span{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 11px;color:#fff;font-weight:800;font-size:14px;line-height:1.15;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.aind{padding:clamp(56px,7vw,110px) 0;scroll-margin-top:60px;border-top:1px solid var(--line)}
.aind:nth-of-type(even){background:var(--sand)}
.a-head{display:flex;gap:clamp(16px,2vw,30px);align-items:flex-start;margin-bottom:clamp(22px,2.6vw,36px)}
.a-no{font-weight:900;font-size:clamp(32px,4vw,64px);line-height:.85;letter-spacing:-.05em;color:var(--c)}
.aind h2{font-weight:800;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em;line-height:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aind .one{font-size:clamp(15px,1.25vw,18px);margin-top:10px;max-width:34em;color:var(--ink2)}
.acards{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(4,1fr)}
.acards.n5{grid-template-columns:repeat(5,1fr)}
.acards.n3{grid-template-columns:repeat(3,1fr)}
.acard{margin:0}
.acard .aim{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--c) 22%,var(--beige));max-height:calc(var(--fit) * .52)}
.acard .aim img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.acard:hover .aim img{transform:scale(1.05)}
.acard figcaption{margin-top:9px}
.acard b{display:block;font-weight:800;font-size:14px;line-height:1.25}
.acard span{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-top:2px}
.a-body{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3vw,44px)}
.a-body h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.auses{list-style:none;padding:0;margin:0;display:grid}
.auses li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600}
.auses li b{margin-left:auto;font-size:12.5px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.auses li i{order:3;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--gold);color:#fff}
.a-body .cta{margin-top:22px}
.dubai{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(22px,2.6vw,36px);border-radius:var(--r-xl);overflow:hidden;background:#2A1A12;color:#F4EEE3}
.dubai .d-im{position:relative;min-height:280px;max-height:var(--fit)}
.dubai .d-im img{width:100%;height:100%;object-fit:cover}
.dubai .d-tx{padding:clamp(24px,3.4vw,52px);display:grid;gap:12px;align-content:center}
.dubai h3{font-weight:900;font-size:clamp(26px,2.8vw,44px);letter-spacing:-.04em;line-height:1}
.dubai p{max-width:30em;line-height:1.5}
.dubai .btn{justify-self:start;margin-top:6px}
@media (max-width:980px){.aidx{grid-template-columns:repeat(3,1fr)}.acards,.acards.n5{grid-template-columns:repeat(2,1fr)}.a-body,.dubai{grid-template-columns:1fr}}
@media (max-width:700px){
  .slide{grid-template-columns:1fr;grid-template-rows:46% 54%}
  .slide .s-im{order:0}.slide .s-tx{order:1;align-self:start;padding:22px var(--pad) 80px;gap:10px}
  .slide h2{font-size:clamp(34px,10vw,48px)}.s-ch a:nth-child(n+4){display:none}
  .aidx{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.slide .s-im img{transition:none;transform:none}}
.chero h1.long{font-size:clamp(28px,3.1vw,48px);max-width:13em;line-height:1}
.gnav{position:sticky;top:calc(var(--hd-s) + 8px);z-index:20;display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 26px;padding:8px;border-radius:99px;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(8px);width:max-content;max-width:100%;box-shadow:0 6px 24px rgba(30,47,39,.08)}
.gnav a{font-size:12.5px;font-weight:800;padding:7px 13px;border-radius:99px;background:var(--beige);box-shadow:inset 0 0 0 1.5px var(--line)}
.gnav a:hover{background:var(--forest);color:var(--cream)}
.fgroup{scroll-margin-top:150px}
@media (max-width:700px){.gnav{position:static;border-radius:14px;width:auto}}
.pack-vis>div.cv{background:linear-gradient(160deg,#EFE8DC,#E3D8C6);display:grid;place-items:center}
.pack-vis>div.cv img{width:92%;height:92%;object-fit:contain}
.tile .im.flat{right:-4%;bottom:-8%;width:78%}
.tile.big .im.flat{width:92%;right:-3%;bottom:-5%}
.tile.wide .im.flat{width:46%;bottom:-14%}
.tile .im.flat img{filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))}
.chero .bowl.flat{width:min(46vw,640px);filter:drop-shadow(0 30px 34px rgba(0,0,0,.3))}
.s-tabs{background:linear-gradient(transparent,rgba(10,14,12,.42));padding-top:34px}
.ahero{height:max(560px,100svh)}
/* applications: feature card (13-Oct, new photographs) */
.acards.feat{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}
.acards.feat>.acard:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.acards.feat>.acard:first-child .aim{flex:1;aspect-ratio:auto;max-height:none;min-height:240px}
.acards.feat>.acard:first-child b{font-size:clamp(16px,1.4vw,20px)}
.acards.feat>.acard:first-child span{font-size:13px}
@media (max-width:980px){.acards.feat{grid-template-columns:repeat(2,1fr)}.acards.feat>.acard:first-child{grid-row:span 1}.acards.feat>.acard:first-child .aim{aspect-ratio:1;flex:none}}
/* contact form (round 4): product lines Product > Form > Grade > Size > kg per month */
.form .f-intro{font-size:12.6px;color:var(--ink2);margin:-6px 0 14px}
.pl-list{display:grid;gap:12px;container-type:inline-size}
.form .pl-list fieldset.pl{position:relative;margin:0;padding:8px 16px 16px;border:0;border-radius:var(--r-md);background:#fff;box-shadow:0 1px 2px rgba(30,47,39,.05),inset 0 0 0 1px var(--line)}
.form .pl legend{float:left;width:100%;margin:0 0 4px;padding:0;font-size:10.8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);line-height:32px}
.pl-g{clear:both;display:grid;grid-template-columns:1fr;gap:12px}
/* the line fits its card: one column on phones, two on mid widths, and on wide cards two rows (product, form, kg / grade, size) */
@container (min-width:400px){.pl-g{grid-template-columns:1fr 1fr}.pl-g>[data-k=v]{grid-column:1/-1}}
@container (min-width:540px){.pl-g{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 116px}
  .pl-g>[data-k=f]{grid-column:2/4}.pl-g>[data-k=v]{grid-column:auto}.pl-g>[data-k=q]{grid-column:3}
  .pl-g:has(>[data-k=v][hidden])>[data-k=s],.pl-g:has(>[data-k=s][hidden])>[data-k=v]{grid-column:1/3}
  .pl-g:has(>[data-k=v][hidden]):has(>[data-k=s][hidden])>[data-k=f]{grid-column:2}}
.pl-g .lf[hidden]{display:none}
.pl-g .fld label{font-size:12.15px;margin-bottom:5px}
.pl-x{position:absolute;top:7px;right:9px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border:0;border-radius:99px;background:transparent;color:var(--ink2);font-size:12.15px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.pl-x:hover{background:#F6E2DC;color:#7A2A1E}
.pl-x svg{width:13px;height:13px}
.pl-x[hidden]{display:none}
.fld select:disabled{background:var(--beige);color:var(--ink2);border-style:dashed;opacity:1;cursor:not-allowed}
.kg{position:relative}
.fld .kg input{padding-right:36px}
.kg span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.6px;font-weight:700;color:var(--ink2);pointer-events:none}
.pl-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:12px;border:1.5px dashed rgba(30,47,39,.38);border-radius:var(--r-md);background:transparent;color:var(--forest);font-weight:700;font-size:13.5px;cursor:pointer;transition:background .2s,border-color .2s}
.pl-add:hover{background:rgba(255,255,255,.75);border-color:var(--forest);border-style:solid}
.pl-add svg{width:16px;height:16px}
.pl-add[hidden]{display:none}
.f-also{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.f-also .chk:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--forest)}
.fld .opt{font-weight:500;color:var(--ink2)}
#rq #f-msg{min-height:88px}
.pl-in{animation:plin .35s var(--ease)}
@keyframes plin{from{opacity:0;transform:translateY(8px)}}
@media (max-width:560px){.f-also{grid-template-columns:1fr}.form .pl-list fieldset.pl{padding:6px 12px 14px}}

/* ===== round 4 · text and layout (13-Oct): first screens fit, draft-2 product photo sizes, plant, pack, film ===== */
/* first screens: display headings and page heads scale with the screen height on wide, short displays */
@media (min-width:900px){
  .h-display{font-size:clamp(41.4px,min(6.66vw,10.5svh),106.2px)}
  .phead{padding-top:calc(var(--hd) + clamp(28px,min(5.4vw,7svh),86.4px));padding-bottom:clamp(28px,min(4.5vw,6svh),72px)}
}
.phead-img{height:clamp(170px,calc(100svh - var(--rest,400px) - 4vw),500px)}
.phead-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* about: the logo lockup and headline fit one screen */
.ahead{padding-top:calc(var(--hd) + clamp(24px,4.5svh,64px));padding-bottom:clamp(32px,6svh,90px)}
.ahead .lock{width:min(440px,60vw,calc(26svh * 1.85));margin-bottom:clamp(20px,4svh,48px)}
.ahead .lede{margin-top:clamp(14px,2.4svh,24px)!important}
.force-pic .ph-box{overflow:hidden}
.force-pic .ph-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* product pages: draft-2 proportions for the form photos and the hero bowl */
.chero~*{--max:1320px}
@media (min-width:521px){
  .forms{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(22px,2.4vw,34px) clamp(14px,1.6vw,24px)}
  .fm .nm{font-size:19px;margin-top:14px}
  .fm p{font-size:14.5px;margin-top:4px}
  .fm .nb{gap:6px;margin-top:10px}
  .fm .nb span{font-size:11.5px;padding:3px 9px}
  .fm .code{font-size:13px;margin-top:10px;padding-top:10px}
}
@media (min-width:861px){
  .chero .bowl:not(.trio){width:auto;height:auto}
  .chero .bowl:not(.trio) img{width:min(58vw,780px);height:auto;max-width:none;object-fit:contain;object-position:center bottom;
    max-height:calc(max(594px,94svh) * .94 - var(--hd) - var(--wsize,13.5vw) * .38 - 10px)}
  /* the jar trio stays clear of the long heading on short screens */
  .chero .bowl.trio{width:min(60vw,820px,calc((max(594px,94svh) * .94 - var(--hd) - var(--wsize,13.5vw) * .38 - 190px) * 2.3))}
}

/* packaging: the real carton artwork, each picture filling its frame */
/* the carton renders are cut-outs: the main frame matches the carton's own shape (about 1.08:1), so it fills the frame uncropped */
.pack-vis{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1.85}
.pack-vis>div,.pack-vis>div.cv{background:linear-gradient(160deg,#EFE8DC,#E3D8C6);display:block}
.pack-vis>div:first-child{grid-row:span 2}
.pack-vis>div.cv img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.pack-vis>div.vac img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.pack-vis{aspect-ratio:1.85}}
.packshot{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1.2;background:linear-gradient(160deg,#EFE8DC,#E3D8C6);display:grid;place-items:center}
.packshot img{width:92%;height:auto;max-height:100%;object-fit:contain}

/* the aerial film: home band and plant hero */
.band-plant>video,.arrival>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a3a33 url(../img/plant/aerial.webp) 50% 50%/cover no-repeat}
.vid-tg{position:absolute;z-index:4;right:var(--pad);top:clamp(14px,2vw,26px);width:40px;height:40px;border-radius:50%;border:0;padding:0;background:rgba(20,28,24,.5);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);--focus:#F4EEE3}
.vid-tg i{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.paused>.vid-tg i{width:0;height:0;border-right:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.arrival .vid-tg{top:calc(var(--hd) + 16px)}
.band-plant .vid-tg{top:calc(var(--hd-s,61.2px) + 12px)}
/* the film is brighter than the old still: a stronger shade behind the band's text */
.band-plant::after{background:linear-gradient(180deg,rgba(15,24,20,0) 28%,rgba(15,24,20,.74) 100%),linear-gradient(90deg,rgba(15,24,20,.42) 0%,rgba(15,24,20,0) 62%)}
.band-plant .txt p{text-shadow:0 2px 24px rgba(0,0,0,.45)}
@media (max-width:700px){
  .band-plant>video{position:relative;inset:auto;display:block;height:auto;aspect-ratio:16/10}
}

/* plant: outside (two photos) and inside (six process images, 3:2) */
.gal.two{grid-template-columns:1fr 1fr}
.gal.two figure{grid-column:auto;aspect-ratio:3/2}
.inside.six{grid-template-columns:repeat(3,1fr)}
.inside.six figure{aspect-ratio:3/2;background:#E3D9C6}
.inside.six figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(10,16,13,.55));pointer-events:none;z-index:2}
.inote{margin-top:14px;font-size:12px;font-weight:600;color:var(--ink2)}
.addr.visit{padding:clamp(18px,2.2vw,28px);font-size:clamp(15px,1.25vw,17px);font-weight:600;line-height:1.5}
.addr.visit span{display:block;margin-top:10px;font-size:13px;font-weight:500;color:var(--ink2)}
@media (max-width:860px){.gal.two{grid-template-columns:1fr}.inside.six{grid-template-columns:1fr 1fr}.inside.six figure{aspect-ratio:3/2}}
@media (max-width:520px){.inside.six{grid-template-columns:1fr}}

/* privacy and terms: one short page */
.legal.one{grid-template-columns:minmax(0,1fr)}
.legal.one article{max-width:46em}
.legal li b{color:var(--ink)}
/* round 4: natural / blanched photo switch */
.ph-duo{position:relative}
.ph-duo .ph-wrap{display:block;width:100%}
.ph-duo .ph-wrap img.bl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.ph-duo.b .ph-wrap img.bl{opacity:1}
.duo-sw{position:absolute;left:10px;bottom:10px;display:flex;padding:3px;border-radius:999px;background:rgba(30,47,39,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.duo-sw button{appearance:none;border:0;background:transparent;color:#F4EEE3;font:700 11.5px/1 Montserrat,system-ui,sans-serif;letter-spacing:.02em;padding:7px 11px;border-radius:999px;cursor:pointer}
.duo-sw button[aria-pressed="true"]{background:#F4EEE3;color:#1E2F27}
.duo-sw button:focus-visible{outline:2px solid #E9C46A;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.ph-duo .ph-wrap img.bl{transition:none}}
/* round 4: keep wide hero images clear of long titles */
/* (pastes hero is now a standard wide cut-out, 14-Oct) */
/* phones and tablets: the wide jar row is centred and sized by its own (wide) bowl box, never pushed off the right edge */
@media (max-width:860px){.chero .bowl.wide{width:min(88vw,620px)}.chero .bowl.wide img{width:100%!important;height:auto!important;max-width:100%!important;transform:none;margin:0 auto;display:block}}

/* ===== round 4 · independent QA (13-Oct) ===== */
/* applications: industry sections keep the page gutter on phones and tablets (text and cards were touching the screen edge) */
.aind{padding-left:var(--pad);padding-right:var(--pad)}
/* family tiles below 861px: photo sits under the text in its own band, so it never covers the description */
@media (max-width:860px){
  .bento,.bento.lg{grid-auto-rows:minmax(162px,auto)}
  .tile:not(.big):not(.wide):not(.full) .im{position:relative;right:auto;bottom:auto;width:100%;height:clamp(112px,30vw,170px);margin-top:auto;padding-top:10px;justify-content:center}
  .tile:not(.big):not(.wide):not(.full) .im img{object-position:center bottom}
}
/* "Used in" on phones: two columns, and an odd last card spans the row instead of standing alone */
@media (max-width:520px){
  .ucards{grid-template-columns:1fr 1fr}
  .ucards>.ucard:last-child:nth-child(odd){grid-column:1/-1}
  .ucards>.ucard:last-child:nth-child(odd) .uim{aspect-ratio:16/9}
}
/* find-by-form matrix: pale family colours (gulkand, pecans, black currants, dates) still read as dots */
.mx .d,.mx tbody th i,.fams a i{box-shadow:inset 0 0 0 1px rgba(30,47,39,.22)}
/* family heroes, 861-1180px (tablet landscape, small laptops): text and buttons on the left, bowl on the right, no overlap */
@media (min-width:861px) and (max-width:1180px){
  .chero .bowl,.chero .bowl.trio{left:auto;right:var(--pad);transform:none}
  .chero .bowl:not(.trio) img{width:min(50vw,560px)}
  .chero .bottom{right:auto;max-width:44%;flex-direction:column;align-items:flex-start;gap:20px}
  .chero .bowl img[src*="hero-pastes-oils"]{max-width:min(52vw,600px)!important;transform:none}
}
/* products index on phones and tablets: the fruit and seeds groups use the same two-column grid as the nuts (they were squeezed into four columns) */
@media (max-width:860px){.bento.g-fruit,.bento.g-more{grid-template-columns:1fr 1fr}}
/* matrix key: the sentence with the link reads as one line of text (the flex layout split it into columns) */
.mx-key>span:last-child{display:inline;gap:0}
/* wide family tiles on tablets and phones: a larger photo, so the tile does not look empty */
@media (max-width:860px){.tile.wide .im:not(.trio){height:80%;width:44%;right:4%;bottom:7%}}
@media (min-width:521px) and (max-width:860px){.tile.wide .im:not(.trio){right:68px}}   /* keep clear of the arrow button */

/* ===== Applications page (Mock B, chosen 14-Oct): neutral grounds, ingredients first ===== */
.mock-b{--rule:rgba(30,47,39,.13);--ink3:#6B776F}

/* ---------- calmer hero: cream text panel + inset photo ---------- */
.mock-b .ahero{height:clamp(600px,88svh,820px);background:var(--cream)}
.mock-b .slide{grid-template-columns:44% 56%;background:var(--cream);color:var(--forest)}
.mock-b .slide .s-im{margin:calc(61.2px + 22px) var(--pad) 92px 0;border-radius:var(--r-xl);background:#E9E1D2}
.mock-b .slide .s-im img{filter:saturate(.9)}
.mock-b .slide .s-tx{padding-bottom:92px;gap:12px}
.mock-b .slide .s-ey{display:flex;align-items:center;gap:9px;color:var(--ink3)}
.mock-b .slide .s-ey i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.mock-b .slide .s-ey span{color:var(--ink3)}
.mock-b .slide h2{font-weight:800;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.045em;line-height:.95}
.mock-b .slide .s-ln{color:var(--ink2);max-width:24em}
.mb-wesup{margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.mock-b .s-ch{display:flex;flex-wrap:wrap;gap:7px}
.mock-b .s-ch span{padding:7px 12px;border-radius:99px;font-size:12.5px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--rule);background:transparent}
.mock-b .slide .s-go{justify-self:start;margin-top:8px}
.mock-b .s-tabs{background:none;padding-top:0;padding-bottom:26px}
.mock-b .s-tabs button{color:var(--forest);text-shadow:none;opacity:.5}
.mock-b .s-tabs button i{background:rgba(30,47,39,.14)}
.mock-b .s-tabs button i::after{background:var(--forest)}
.mock-b .s-tabs button[aria-selected=true]{opacity:1}

/* ---------- index: one quiet row ---------- */
.mock-b .mb-index{padding-top:clamp(56px,6.4vw,96px);padding-bottom:clamp(56px,6.4vw,96px);border-top:1px solid var(--rule)}
.mb-aidx{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(8px,1vw,14px)}
.mb-ai img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;transition:transform .6s var(--ease)}
.mb-ai:hover img{transform:translateY(-3px)}
.mb-ai span{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:700;line-height:1.2}
.mb-ai span i{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}

/* ---------- sections: neutral grounds, colour as a dot ---------- */
.mock-b .aind{background:var(--cream)}
.mock-b .aind:nth-of-type(even){background:#EFE8DC}
.mock-b .a-no{display:flex;align-items:center;gap:10px;font-size:clamp(22px,2.2vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--ink3);line-height:1;margin-top:10px}
.mock-b .a-no i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.mock-b .aind h2 .veg{background:transparent;padding:0;font-size:10.5px}
.mock-b .aind h2 .veg::before{box-shadow:none;width:8px;height:8px}

.mb-ings{margin-bottom:clamp(26px,3vw,40px)}
.mb-ings h3,.mb-cta h3{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
.mb-ing-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mb-ing{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--rule);transition:background .25s}
.mb-ing:hover{background:#fff}
.mb-ing img{width:60px;height:60px;object-fit:cover;border-radius:10px}
.mb-ing span{line-height:1.3;min-width:0}
.mb-ing b{display:block;font-size:14px;font-weight:700}
.mb-ing i{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--ink2);margin-top:2px}
.mb-ing i b{display:inline;font-size:12px;font-weight:700;color:var(--forest)}
.mb-ing .dotsep{color:var(--ink3)}

/* 1 large + 3 small, one quiet row */
.mb-cards{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.mb-cards .acard .aim{aspect-ratio:auto;height:clamp(190px,18.5vw,268px);max-height:none;background:#E9E1D2}
.mb-cards .acard.big .aim img{object-position:50% 58%;transform:scale(1.025)}
.mock-b .slide.on .s-im img{transform:scale(1.025)}

.mb-cta p{color:var(--ink2);max-width:26em}
.mb-cta .cta{margin-top:18px}
.mock-b .auses li i{background:transparent;color:#9A7434;padding:0;font-size:9.5px;letter-spacing:.12em}
.mock-b .help{background:#EFE8DC}

@media (max-width:980px){
  .mb-aidx{grid-template-columns:repeat(5,1fr)}
  .mb-cards{grid-template-columns:1.3fr 1fr 1fr}
  .mb-cards .acard:nth-child(4){display:none}
  .mb-ing-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .mock-b .ahero{height:max(640px,92svh)}
  .mock-b .slide{grid-template-columns:1fr;grid-template-rows:44% 56%}
  .mock-b .slide .s-im{order:0;margin:calc(61.2px + 10px) var(--pad) 0}
  .mock-b .slide .s-tx{padding:20px var(--pad) 84px}
  .mock-b .slide h2{font-size:clamp(34px,10vw,46px)}
  .mb-aidx{display:flex;overflow-x:auto;scrollbar-width:none;gap:10px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
  .mb-aidx::-webkit-scrollbar{display:none}
  .mb-ai{flex:0 0 96px}
  .mb-ing-row{grid-template-columns:1fr}
  .mb-cards{grid-template-columns:1fr 1fr 1fr}
  .mb-cards .acard.big{grid-column:1 / -1}
  .mb-cards .acard:nth-child(4){display:block}
  .mb-cards .acard.big .aim{height:auto;aspect-ratio:4/3}
  .mb-cards .acard .aim{height:auto;aspect-ratio:1}
  .mb-cards .acard b{font-size:12px}
  .mb-cards .acard span{font-size:11px}
}

/* family heroes (14-Oct): landscape bowl-and-heaps cut-outs; on shorter screens the picture ends above the title block */
@media (min-width:861px){
  .chero .bowl.wide{top:calc(var(--hd) + 4% + var(--wsize,13.5vw) * .26)}
  .chero .bowl.wide img{width:min(58vw,940px);max-height:calc(max(594px,94svh) * .96 - var(--hd) - var(--wsize,13.5vw) * .26 - 150px)}
}

/* enquiry form (pre-launch review): the send buttons need JavaScript; confirmation once WhatsApp or the email app has opened */
html:not(.js) #rq .send{display:none}
.f-nojs{margin-top:19.8px;font-size:14px;line-height:1.55}
.f-sent{margin-top:18px;padding:16px 18px;border-radius:14px;background:rgba(30,47,39,.06);border:1px solid var(--line);font-size:14.5px;line-height:1.55}
.f-sent p+p{margin-top:6px}
.f-sent:focus{outline:none}
.f-sent:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* bits ruler card: natural and blanched heaps side by side (14-Oct) */
.mm .cut.two{display:flex;align-items:center;justify-content:center;gap:2px}
.mm .cut.two img{max-width:50%;height:auto;max-height:100%}

/* ---- final fixes before launch (14-Oct) ---- */
/* home hero: buttons have their colours before the 3D script sets them, and the still pistachio shows until the 3D is ready */
.hero .btn.solid{background:var(--hero-fg,#F4EEE3);color:var(--hero-bg,#2B3A6B)}
.hero .btn.line{box-shadow:inset 0 0 0 2px var(--hero-fg,#F4EEE3);color:var(--hero-fg,#F4EEE3)}
.hero .fallback{display:block;transition:opacity .5s ease}
.hero.ready:not(.no3d) .fallback{opacity:0;pointer-events:none}
/* phone and tablet header: WhatsApp and menu buttons sit at the right */
@media (max-width:980px){.hd-act{margin-left:auto}}
/* Our plant film on phones: keep the shed with the MRG NUTS board in frame */
@media (max-width:760px){.arrival>video{object-position:25% 50%}}
/* bits ruler card: room for both heaps */
.mm figure:has(.cut.two){grid-template-columns:clamp(150px,13.5vw,200px) 1fr}
.mm .cut.two img{max-width:49%}